Hi everybody. One of the things we promise you in this course was that we'd teach you how to do interactivity with JavaScript. Well, we finally reached that point where we can start having some fun and reacting to events that happened to your web page. So up to now it has been up to us to decide when the functions should execute. In our code, we put the script tags and we call those functions. Well now, what we wanna do, is we wanna take advantage of the fact that we can call this functions based on special events. Where do these events come from, well, they come from the JavaScript API. We can start doing things based on clicking, mouse movement, all these different types of dynamic function calls. So let's take a look at how we can do this. First, let's talk about just some of the events that we normally react to on a web page. The first one is onclick, its very straightforward, if the user clicks on an HTML element we want something JavaScript function to execute. We can also have onmouseover, onresize, and a very common one is onload. This last one says whenever the page is loaded, I wanna call some JavaScript functions or run some sort of JavaScript code, but please don't do it until the page is completely done. The reason that this one is a little bit more interesting to me, is that sometimes students have problems in that they try to write JavaScript. But the page that they are trying to apply the JavaScript to, is so complex and takes so long to load that the JavaScript is done before the user can even see the page. So this last one onload we are gonna use quite a bit to make sure we are all seeing the exact same events. All right, so how does this work? We know that any element can react to an event. Well, we need to add code to our HTML that links the events and the tags together. So here's an example for you. Here, I have my tag div, simple HTML five tag but I've added this event right here that says on click. So now the browser's changed, the browser is what I say listening. It's listening, listening to this one div and saying okay, if anybody clicks on this then I am gonna call the JavaScript function message. All right, this isn't gonna happen just once, this is gonna happen for the duration that this site is loaded onto the browser. So, one of the things that we need to talk about is the use of quotes. When we have our event such as onclick equals message function or onclick equals add function, anything like that we need to put the function inside quotes. And you can use single quotes or double quotes in order to do this. However, I always use double quotes because it makes it much easier if I want to pass string arguments to the function. So if you take a look down here, you can see I wanna call the function called message and I need to send it this Hi message. Well if I'd done it this way equals Message with a sing quote. And then, what's gonna happen when I try to send my screen? As soon as I add another single quote the browser goes [SOUND], that's the end, it matches there's your whole string. So if you're gonna be matching different strings together, put the outer one in double quotes and the inner one in single quotes and it's gonna make it much easier for your browser to understand what's going on. Be careful of copying and pasting quotes when you're coding. It's a very common thing to do but it's important to remember that a lot of times your editor gets mixed up. Because when you're coding, you don't have that same kind of slant that Word, PowerPoint, and other programs put into your quotes. So whenever you copy and paste, go back and make sure that they're matching up correctly. So let's go ahead and take a look at what I do with this code right here. I have my HTML on one side and my JavaScript function on the other. The JavaScript function's pretty simple, all is it gonna do is take a string, and it's gonna update the output element to show whatever that string is along with the word event. Over here in the HTML is where it's gonna get a little bit more interesting and it's gonna be the first time we're using events, I have three. I have onload, which means hey whenever I load this page I want you to call the message function and send it the message load. I have onresize which means if I change the size of the browser I wanna send a different message and then finally the last one is onclick. So all three of these events, onload, onresize, onclick, they're all gonna call the message function, but they're gonna call it with three different frame runners. So let's take a look at what's going on. As you can see, when I loaded the page, it automatically had LOAD event show up. What happens if I click on this paragraph right here? Oh, it changes to click event. It's actually happening over and over again, you just can't tell because it's so quick. So now, the last thing I'm gonna do is I'm gonna resize the page and you can see, that it recognize that there is a resize event. So, it's pretty simple to go through, and I'll go back here, and had your HTML actually change based on the different events. The second example is, again, a very straightforward way of showing you how the events can be linked to different element types. One HTML element we haven't used a lot in my courses is button. I avoid using it because I think that the semantics of a button tag really conveys this idea of click me and I'm gonna do something, and since we didn't have the power to do that yet, I really didn't wanna use that element, but now we can. So what I have here is a simple JavaScript function that says, hey I want you to call the JavaScript date function, this is something that I didn't write. You know that it was written by JavaScript partly because well, it's yellow. All right, so I'm gonna use this function and connect it with the button. So, I have button type equals button and I have on click equals display date. As soon as I click on that, we wanna keep our eye on where it says this is a paragraph, because when I click on it that should be updated to what the current date in time is for when I'm running this. All right. Now, there's a good chance that this date doesn't look exactly the way you expect it. Don't forget, computers are very specific, and they're gonna give much longer answers than we're usually used to. As we start adding JavaScript events and reacting to events to our code, I just want you to be aware of something that's going on, that's really quite complex. Before JavaScript, for the most part, our programs ran in a linear order, it would start at the top and execute each statement step by step, one by one and everything was really only executed once. But now that we have events, we're really causing the program to what I wanna say, run continuously. Because soon as I add that event, the DOM is now always gonna be listening for those events. The API is saying, all right I need to wait on click, onclick, onclick. So, if you add too many events to your page, you could conceivably slow down the execution of your page. Clearly there are a lot more events than just the four I told you about. We tend to categorize these events into groups. We have mouse events where you can react to onclick, double click, mouse enter or mouse leave, mouse move, you can react to keyboard events. So, you can actually listen for certain keys to be pressed down or the least. There's also what we call frame events, and we've looked at two of those already. You can do onload, onresize, you can react to scrolling on your page or even if there's an error. If you want a more comprehensive list of events you can really go anywhere online, but I went ahead and I'll link one for you in the course page, that goes directly through Mozilla. The important thing to know is that you're not expected to know all of the events, it's something we're gonna learn over time. So hopefully, you've got this little idea of what events do and how you can start using them to add a little bit of interaction with your page. Without these events JavaScript can be limited in its ability to interact with the DOM. We didn't have onclick, onload and be really hard to actually work with our webpages. Another thing I'd like you to take away from this is while events are really cool, they are also very annoying. It's possible to put a listener on every paragraph of your page or every dip and have cool things happening all the time. But after a while, the usability of your page is really gonna take a hit. I know I've said it before, but don't worry about memorizing all the different events. As you code, certain needs will arise and you'll say, [SOUND], I wonder if there's an event for that, I'm gonna go look it up. What I'm much more concerned about at this point and hopefully you are to is gaining the basic idea of, I know how events work, I'm gonna try to implement one. And when a problem arises, as it probably will, I can kinda fight my way through and make it work, just don't forget. We're there on the message boards. We're happy to all work as a team to make sure that your page is doing the types of cool things that you want it to do. Good luck.
