Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Welcome to JavaScript

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.

Ahmed Omran

July 10, 2015
Tweet

More Decks by Ahmed Omran

Other Decks in Programming

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