Are we there yet?
0 likes•598 views
The document discusses using events in JavaScript to tell rather than ask for updates. It provides examples of using addEventListener to hook up mousemove and keydown events. The mousemove event handler logs the mouse position coordinates, while the keydown handler logs the key code. Events provide a more efficient way to be notified when something happens, like user input, rather than continuously asking if something changed. Homework involves brainstorming ideas for a game that uses these event concepts.
Are we there yet?
- 1. Are we there yet? polling & eventing in JavaScript
- 2. Ask vs. Tell Are we there yet?
- 4. Ask vs. Tell Are we there yet?
- 6. Ask vs. Tell Are we there yet?
- 7. Ask vs. Tell Are we there yet?
- 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!
- 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.