Post on 11-May-2015
description
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
○ browser window is resized
○ ...and a lot more!
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
Examplehttp://codepen.io/sethmcl/pen/zEGLy
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 morehttps://developer.mozilla.org/en-US/docs/Web/API/document
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 morehttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
name of event
Learn morehttps://developer.mozilla.org/en-US/docs/Web/Reference/Events
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 morehttps://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers
Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
Learn morehttps://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove
event object, which contains information about the event
Keyboard Events
document.addEventListener('keydown', function (e) {
console.log(e.keyCode, e.keyCode);
});
Learn morehttps://developer.mozilla.org/en-US/docs/Web/Reference/Events/keydown
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
});
Examplehttp://codepen.io/sethmcl/pen/rsJGh
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.