Your SlideShare is downloading. ×
  • Like
Are we there yet?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Are we there yet?

  • 115 views
Published

Learn about events in JavaScript, and how to use them.

Learn about events in JavaScript, and how to use them.

Published in Software , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
115
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Are we there yet? polling & eventing in JavaScript
  • 2. Ask vs. Tell Are we there yet?
  • 3. Ask vs. Tell No.
  • 4. Ask vs. Tell Are we there yet?
  • 5. Ask vs. Tell No.
  • 6. Ask vs. Tell Are we there yet?
  • 7. Ask vs. Tell Are we there yet?
  • 8. Ask vs. Tell NO!!
  • 9. Ask vs. Tell Let me know when we get there!
  • 10. Ask vs. Tell Roger that!
  • 11. Ask vs. Tell
  • 12. Ask vs. Tell
  • 13. Ask vs. Tell
  • 14. Ask vs. Tell
  • 15. Ask vs. Tell
  • 16. Ask vs. Tell
  • 17. Ask vs. Tell
  • 18. Ask vs. Tell
  • 19. Ask vs. Tell We’re here!
  • 20. Ask vs. Tell YAY!!!
  • 21. Tell, don’t ask. ● More efficient ● Less complex to implement
  • 22. Telling with Events Use events to get notified when “something” happens ○ key on keyboard is pressed ○ mouse is moved ○ browser window is resized ○ ...and a lot more!
  • 23. Hook up your events document.addEventListener('mousemove', function (e) { console.log(e.clientX, e.clientY); }); Example http://codepen.io/sethmcl/pen/zEGLy
  • 24. Hook up your events document.addEventListener('mousemove', function (e) { console.log(e.clientX, e.clientY); }); global object provided by the browser, entry point to the web page which is currently loaded in the browser Learn more https://developer.mozilla.org/en-US/docs/Web/API/document
  • 25. Hook up your events document.addEventListener('mousemove', function (e) { console.log(e.clientX, e.clientY); }); method (function) that we can call to “register” for a particular event Learn more https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
  • 26. Hook up your events document.addEventListener('mousemove', function (e) { console.log(e.clientX, e.clientY); }); name of event Learn more https://developer.mozilla.org/en-US/docs/Web/Reference/Events
  • 27. Hook up your events document.addEventListener('mousemove', function (e) { console.log(e.clientX, e.clientY); }); function which is called when the event is “fired” this function is called the “event handler” Learn more https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers
  • 28. Hook up your events document.addEventListener('mousemove', function (e) { console.log(e.clientX, e.clientY); }); Learn more https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove event object, which contains information about the event
  • 29. Keyboard Events document.addEventListener('keydown', function (e) { console.log(e.keyCode, e.keyCode); }); Learn more https://developer.mozilla.org/en-US/docs/Web/Reference/Events/keydown
  • 30. Putting it all together window.addEventListener('resize', function (e) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Note: resizing the canvas will also clear it }); Example http://codepen.io/sethmcl/pen/rsJGh
  • 31. Homework Think about the concepts we have learned so far, and brainstorm an idea for a game that you can make. The output of this activity is not code, but rather a list of ideas and some drawings (pen and paper, powerpoint, etc) that describes what you want to build.