[MUSIC] Hi and welcome to the lesson. In our last lesson, we examined JavaScript's built in alert and prompt functions. In this lesson, we're going to look at built in JavaScript events. So our first event is probably the most popular one called onclick. And we've seen it several times already. Here on line 22 and this is an example from our last lesson, we have onclick. And the target of the onclick is a little bit of JavaScript code that does an alert that says the test worked. And over here on this button we also have an onclick with a different target, the myAlertMath() function. So most elements can have an onclick event. For instance, we could add an onclick event to this paragraph or some other element. But it's a best practice to keep the onclick associated with things that our visitors will expect to click, like a button. So, giving an onclick event to a paragraph usually means our users won't click it. And if they do click it, they won't expect anything to happen. Keeping our onclicks associated with our buttons and other things that users will typically click is often best. Sometimes we can use an onclick with, say, an image or some other thing that our users probably won't click. So since we've already seen the onclick then before, let's look at, instead, the on load. So here, you have a page from a previous week. Here's our body tag. And notice that the content for the page really goes between the two body tags and the onload event here will fire once our content has loaded. So once the content has loaded to the page, our user here is going to get a message. So let's see how that looks. And notice that instantly as the content loaded, the page is loaded. Okay, is the message we get. And we were forced to click this before we continue. So, most of the time, the onloader then is best for our housekeeping if we have something we need to do on our program when the page first loads whatever that maybe we can use this event to our advantage. But we have to be careful using it the way I've done here because giving the user the alert every time the page loads, like this can be annoying and so putting the alert on the onload is something you should do only after some careful consideration, just so you have a pleasant experience. But in general, you can use this onload event to act as soon as whatever content you're referring to, in this case everything between the body tags, has loaded. Another place we might use it that's what's commonly used In the body tag is for an image. So, if you want to heavy on load execute with an image, you can give image on the load event. And then usually, some JavaScript code that you want to execute when that on load happens. So the code doesn not have to be an alert. So, let's look at our next event. And that is the onblur, have that right here. So for this example, I have three input fields, we've seen input fields before, and the first one on line 28. Has an event called onblur. Now, the other two events we've talked about so far, the onclick and onload, are fairly self explanatory about what they'll do. One happens on a click, and one happens when something loads, but. What onblur is not quite as obvious. So here we have onblur and we're associating it with JavaScript function field called check field one and we'll come back and look what that is in just a moment. So let's actually try running it so we have onblur right here and we have our three input fields and I'm going to go into this field and I'll just once I've clicked it I'll click out. And notice when I click out I immediately get a little message saying Too short. So what the onblur is, I'll refresh this, is whenever this element has the focus which it does right now and then the focus moves away and we call the a blur. And we can get some effect by tabbing out, I'm in it right now, I'll tab out and I get too short. And if I go back into it and now I'll type something in here Like so. And instead I get a message, That's long enough. And we'll look at how the code is doing that in a moment. But the onblur is very valuable actually because it lets us do something right when the user is leaving a field or some other element. So for instance, if they're filling out a form and we want to evaluate what they've put in. We want to make sure that it's a valid phone number or that the address looks like an address or any other item, like they filled out everything completely. We can use the unblur to capture that moment when they're moving around. So going back to the code here we see check field one and we'll go up and look at what it's doing and of course it's a function called check field one. We've seen some of these before on line 9 we've got a variable called field and it's getting the value from field one. That was the one we were just working with, id field1, and then we're checking to see, on line 11 with an if, if(field, that's the field variable right here, .length < 5), we want a message that comes out saying, Too short! And else, that means if this is not true, then we're going to say that's long enough. And we've seen this if-else in other lessons. It's something you definitely want to practice. So the way we're doing the message for the user is we have an element here called a span. Now, a span is something we haven't looked at in previous lessons. But it's a tag that has no visibility until we add text to it. So, message1 is the ID for the span. And what we're doing is giving The element with the ID message one. InnerHTML would be either too short or that's long enough. So hopefully this has given you some insight into three commonly used events, the onclick, onload, and onblur. There are many other events, and you could research those for yourself. For instance you might want to try onmouseover. And next time we'll be revisiting JavaScript input and dynamically changing HTML.
