Successfully reported this slideshow.
Are we there yet?
polling & eventing in JavaScript
Ask vs. Tell
Are we
there yet?
Ask vs. Tell
No.
Ask vs. Tell
Are we
there yet?
Ask vs. Tell
No.
Ask vs. Tell
Are we
there yet?
Ask vs. Tell
Are we
there yet?
Ask vs. Tell
NO!!
Ask vs. Tell
Let me know
when we get
there!
Ask vs. Tell
Roger that!
Ask vs. Tell
Ask vs. Tell
Ask vs. Tell
Ask vs. Tell
Ask vs. Tell
Ask vs. Tell
Ask vs. Tell
Ask vs. Tell
Ask vs. Tell
We’re here!
Ask vs. Tell
YAY!!!
Tell, don’t ask.
● More efficient
● Less complex to implement
Telling with Events
Use events to get notified when “something” happens
○ key on keyboard is pressed
○ mouse is moved
○ br...
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
Example
h...
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
global ob...
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
method (f...
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
name of e...
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
function ...
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
Learn mor...
Keyboard Events
document.addEventListener('keydown', function (e) {
console.log(e.keyCode, e.keyCode);
});
Learn more
http...
Putting it all together
window.addEventListener('resize', function (e) {
canvas.width = window.innerWidth;
canvas.height =...
Homework
Think about the concepts we have
learned so far, and brainstorm an idea
for a game that you can make.
The output ...
Upcoming SlideShare
Loading in …5
×

Are we there yet?

523 views

Published on

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

Published in: Software, Technology, Education
  • Be the first to comment

  • Be the first to like this

Are we there yet?

  1. 1. Are we there yet? polling & eventing in JavaScript
  2. 2. Ask vs. Tell Are we there yet?
  3. 3. Ask vs. Tell No.
  4. 4. Ask vs. Tell Are we there yet?
  5. 5. Ask vs. Tell No.
  6. 6. Ask vs. Tell Are we there yet?
  7. 7. Ask vs. Tell Are we there yet?
  8. 8. Ask vs. Tell NO!!
  9. 9. Ask vs. Tell Let me know when we get there!
  10. 10. Ask vs. Tell Roger that!
  11. 11. Ask vs. Tell
  12. 12. Ask vs. Tell
  13. 13. Ask vs. Tell
  14. 14. Ask vs. Tell
  15. 15. Ask vs. Tell
  16. 16. Ask vs. Tell
  17. 17. Ask vs. Tell
  18. 18. Ask vs. Tell
  19. 19. Ask vs. Tell We’re here!
  20. 20. Ask vs. Tell YAY!!!
  21. 21. Tell, don’t ask. ● More efficient ● Less complex to implement
  22. 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. 23. Hook up your events document.addEventListener('mousemove', function (e) { console.log(e.clientX, e.clientY); }); Example http://codepen.io/sethmcl/pen/zEGLy
  24. 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. 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. 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. 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. 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. 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. 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. 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.

×