Welcome to JavaScript

Learn JavaScript by following a simple and practical example. The goal of the talk is to give beginners the tools to learn on their own.

Transcript

1. Welcome to
   JavaScript!
   @this_ahmed
   

   View Slide

2. History? tl;dr
   

   View Slide

3. History? tl;dr
   

   View Slide

4. JavaScript is the language
   of the web
   • Standardized as ECMAScript (latest stable is
   version 5)
   • Browsers implement this standard in their engines.
   e.g. Chrome (browser) => V8 (engine)
   • ECMAScript 6 standard finalized June 2015
   

   View Slide

5. –Douglas Crockford
   “JavaScript is the only language people feel like
   they don't need to learn to use.”
   

   View Slide

6. JS is a sound
   investment
   

   View Slide

7. JS is a sound
   investment
   

   View Slide

8. JS is a sound
   investment
   

   View Slide

9. JS is a sound
   investment
   

   View Slide

10. JS is a sound
    investment
    

    View Slide

11. Example 1: Select text
    

    View Slide

12. what do we need?
    • a way to respond to user actions (e.g. click!)
    • a way to make changes to the pages (e.g. select
    the text-area’s contents)
    

    View Slide

13. “The DOM”
    

    View Slide

14. it’s an API
    

    View Slide

15. API
    “Outside” “Inside”
    DOM is an API
    

    View Slide

16. how do I use the DOM?
    https://developer.mozilla.org
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. “String”
    

    View Slide

22. Variable
    

    View Slide

23. View Slide

24. variable string
    

    View Slide

25. View Slide

26. how do we know when
    someone clicks button?
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. !!!
    

    View Slide

34. View Slide

35. Functions
    

    View Slide

36. Functions
    

    View Slide

37. View Slide

38. back to our function
    

    View Slide

39. View Slide

40. View Slide

41. DOM interfaces
    https://developer.mozilla.org/en-US/docs/Web/API/
    Document_Object_Model
    

    View Slide

42. HTMLTextAreaElement
    it’s a JavaScript Object
    

    View Slide

43. Object
    

    View Slide

44. Object
    Number
    

    View Slide

45. Object
    property!
    

    View Slide

46. Object
    property!
    method
    

    View Slide

47. document is an object?
    

    View Slide

48. HTMLTextAreaElement
    is an object
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. What did we learn?
    • DOM and API
    • Mozilla Developer Network
    • Types: String, Number
    • Variables
    • events and addEventListener
    • Functions
    • Statements and semicolons
    • DOM interfaces, Objects, properties and methods.
    

    View Slide

53. View Slide

54. Resources
    • jstherightway.org
    • jsforcats.com
    • javascript.com
    

    View Slide

55. fin
    i have more examples, come talk to me!
    

    View Slide