Summary of JavaScript Event Handling

Let's do something more fun. I will add a generic container here, a div. It's just a block element. What I'm going to do is, I want to set some properties here. Let me say div, background color. See I'm using dash because I'm typing CSS right now. Make it green and then the width. Let's say, let's try 100 pixels and hide 100 pixels. So I made a square out of this div. Now, what I want to do is, when I click the square, first you already know I changed the color, right? I already told you, can add an ID. It works as any element, doesn't matter. Paragraph, div, whatever. Add an ID, document element by ID, pass the ID as the argument, and then say dot style, the color, background color, in this case, equals whatever. Now, how can we do that when you click? When you're on the web page, you're clicking everywhere, many things, right? So it's very interactive in the sense that, when it clicks, it sends that it clicked it, and it will react to it and do something. Now, I want to do a follow. I want to click this square, and I want the color to change to red, the background color. How would we do that in JavaScript? Okay, so one way is, here, give an attribute to the div, let's call it onClick. So these are called events in JavaScript. And then, double equals and give it a value. Now, this value has to be a function. Okay, which is a set of instructions that we're going to write for something to happen when we click this element. Let's call change, call it. Now, all functions we need to call it in this case. So I put two open, close. So we're going to see what, why is that? So I'm going to go to the JavaScript tab here, going to say function word, space. Now, I'm going to use the same name I used here for the onClick, and the parenthesis because it's a function. Now, every function body needs the curly braces here. So we type the instructions between the open and close curly braces. So this is just syntax. JavaScript is a programming language. So we just follow their syntax. This is just how things have to be. You have to type the keyword function, space, and then the name, any name you want. And notice I use the chemo case naming convention. You don't have to use it, but that's pretty much the standard that we always follow. And then the function can take arguments. In this case, there's none. So I leave the open and close parenthesis empty. And finally, we can have the body or the instructions of the function between the open and curly braces. I don't have to have space here. It's just optional, but I like to have it for better visuals. And whenever I open a curly brace, it's usually programming. We add what's called indentation, which is just spaces at the left-hand side. For example, I usually use two spaces. So you're gonna see that a lot. And then when I reached the closing curly brace, I continue writing from the same level, you know, vertically. In any case, so I want to be able to target this div. No, I can't give an ID. Let's give it an ID. I just call it the square. Now here I'm gonna say document.getElementById. The ID here is square. It has to match the same ID value attribute here for the div. Now, once we get that, we can finally change the dot style, dot background color. Whoops. And remember to assign new value equals sign. And then right-hand side, the new value. Let's say it's red, right? And you know, I put a semicolon here. It's optional in JavaScript, but I usually like to place it. Usually programming languages, many of them, when you finish a statement, you finish with a semicolon. Okay. Now I'm gonna click run, nothing happens, right? But I click the div and turn red. Now let me click run in the top left to reset. Now why does that happen? Well, we have the onclick attribute passed to this div, which means, okay, when I click anywhere within this square, I want to call the function change color. The parenthesis here is important because you wanna call or execute the instructions for change color. Since we define change color in the JavaScript section here, it's gonna go and run every instruction between the open and closing curly brace. In this case, this instruction here is to change the background color of that div whose ID is square to red. So if I click that, becomes red. So these are called events. So there are many kinds of events. This one is click, but there could be, you're typing something in a form and you move your cursor away from the form, control the input and so on. Or you move the mouse over an element, outside an element. All of these are events. You can have the event for the form submission. You can have the event when you press the key down and so on. Does anybody have any questions so far? Can you hear me? Yeah, yeah, go ahead. Could you go over that just one more time, a little quick? Yeah, yeah, yeah. Is there a specific part you're gonna understand or? Just the entire function. Okay, okay. So once you add an attribute, in this case, on click to the element, what's gonna happen is when I click that element, it's gonna try to see what to do. Okay, you give me something to do when I click. And that's something as what we call the function. We can call or execute a function. A function is a set of instructions that you can write so that the computer can do. So in this case, I say, okay, the name of the function here is change color and the parentheses are necessary because they are mean execute or call this function. And we define the function in the JavaScript panel here. To define a function, you have to write the word function, space, and then the name of the function. Now this name has to match the same name we gave in the value for on click. And then you define the rest of the function. By definition of JavaScript syntax, the arguments are things you can give to a function if it needs anything at all. This one doesn't need anything. Therefore, we leave the open and closing empty, meaning I don't have to write anything inside. So I can just leave it empty. Now the instructions are always placed between the open curly brace and the closing curly brace. So I can write whatever here as long as within the open and close. And all these lines will be executed. The moment I see the function name and the parentheses, the computer sees, right? So when I click, okay, let me reset. Okay, call change color goes here. Okay, change color, starts from the top, do this line, and then it changed the color. And once it reaches the curly brace here, the end curly brace, the function is done, it's over. That's it, I don't need to do anything else. Obviously here I just want to have one thing to do, but I could have instructor number two, another instructor here, a fourth instructor here, and so on. So what it would do is go line by line from the top. Okay, do this one, then once I'm done, do the following one, okay, do A, and then do D, and then do R. Okay, I've reached the end, this is the curly brace marking the end of the function body. I'm done, and that's it.