Introduction to Javascript
Class 4
Recap
Javascript Functions
DOM
Recap
In today’s class
Events
Events
Slides: https://www.teaching-materials.org/jsweb/slides/animevents#/
We will not cover animations in this class.
Events
Last lesson we learned about the Document Object Model, and how it allows us to manipulate elements on a web page. Most of the time we want to do that manipulation as a result of a user's interaction with the page. That's where 'events' come in.
An 'event' is a type of object that is created when the user interacts with a web page. Events are related to the element the user interacted with, for example when a user clicks a link, a 'click' event is created for that link <a> element.
To trigger some code to run when a particular event happens, we need to create an 'event listener'.
element.onclick = function () {
//code to execute when the click happens
};
Events (cont.)
There are lots of different types of events - you can see a full list at:
https://developer.mozilla.org/en/DOM/element#Event_Handlers
Wow that was easy - events rock!! Ok not so fast, we have one little problem.
Your web browser also uses events to help it respond to user interactions. If you are listening for an event on an element that doesn't have any built-in responses (like a div) your code will work just fine.
But what if you assigned an event listener to an element that does have a predefined response to your event, like a click event on a link? It's good practice to use links as controllers for interactivity on your web page, but in addition to running your 'onclick' code, the browser will also what it always does when a link is clicked - follow the link.
Events (cont.)
So how can we turn off the browser's built in reaction to the event we want to use?
Event handlers have a special argument that gets passed in automatically - a reference to the event object that has been created. This means that inside our event handler function we can access the methods and properties of the event itself.
The event object has a method that stops the browser responding to it called 'preventDefault'. Cool!
To access the event object we need to name it as an argument. It's the only argument that will be passed into our event handler function.
element.onclick = function (event) {
event.preventDefault();
};
'this'
Sometimes we need to do something with the element that has just been clicked, moused over or otherwise interacted with. We can use the 'this' keyword as a reference to the element with our event handler function.
element.onmouseover = function (event) {
console.log(this);
};
element.onmouseout = function (event) {
this.style.backgroundColor = "red";
this.innerHTML = "I've been clicked!";
};
Exercises
http://html-tuts.com/demo/photo_gallery/
ADS random image generator
http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/js/tryit.asp-filename=tryjs_doc_links.html (changing div positions)
Lets go through the examples here: https://www.w3schools.com/js/js_events_examples.asp
Revision and Exercises
1- Write a function that takes an array of numbers as an argument and displays all the numbers that are less than 10. You can log the results to the console or display them in a web page.
2 - Write a function that adds a working link to a web page.
3 - Write a function that takes an element name as an argument (like "li") and turns the background of those elements yellow.
4 - Use a combination of Javascript and CSS to turn the text in a paragraph purple when it is clicked. You can add an id to the paragraph to make it easy to find.
Revision and Exercises
5 - Write a function that counts the number of links (<a> tags) on a web page and shows the number in the console. For bonus points display the number on the web page in a sentence, ie "There are 5 links on this page".
Note - to add an element directly to the end of the page you can use document.body.appendChild();
6 - Create an object literal, just like the 'dog' example, that represents an animal. Give your animal object some properties and methods. Call one of the methods. For bonus points, create a web page element that calls one of the animal's methods when it is clicked (eg, a link that reads "Moo" and calls the moo method of a cow object).
7. Build a tabbed module using a combination of Javascript, HTML and CSS. Hint - you can use id's to make your elements easier to match up.