 Welcome to Intro to JavaScript for Absolute Beginners with Tokyo EdTick. Today on this video, we're going to be taking a look at basic JavaScript, like how it works on a web page. We're going to be looking at events, which is how we tell the computer, like when we want something to happen. This is kind of analogous to input. And then we're going to have three different types of output. We're going to have the computer do three things in response to our input. Our input is going to be clicking a button or moving the mouse over that button. So we're going to have the computer pop up an alert. We're going to have the computer change the background color of the page. And we're going to have some text change. So through this, you'll learn some really, really basic concepts, fundamentally how JavaScript interacts with web pages. Let's go ahead and get started. So again, this is for beginners. But we want to think you should know at least a little bit about HTML. You don't have to know anything about JavaScript. We do need to know a little bit about HTML. I'm making this video for my students. And so they've done a little bit of HTML. They've done a little bit of CSS. And we're going to try and build on those skills here in this particular unit. So what you can see here is on the left, I've got the Genie coding editor open, and I've added an HTML page. I've added a head, title, body, and an H1. And you can see over here, this is the rendered HTML, Tokyo EdTech's beginner intro to JavaScript. Okay, so as I mentioned earlier, what we're going to do is we are going to do some events. So we're going to put some buttons on the screen and we're going to have the computer do something when we click or move the mouse over. So first we're going to need a button. Okay, so I'm going to go ahead and type button. And then I can just say that the button will say something here. So for example, since we're going to do alert, I'm going to do that. Now I'm going to save it. So I'm going to do control S or command S depending on what your operating system is. And I'm going to come back over to here and I'm going to refresh. Or if you're using Genie, you should be able to click this button. But this is probably a more safer way of doing it. So let's go ahead and reload it. And now we've got this cool little button here. So notice button, close button. And then whatever we type here is what's going to be shown on the button. So if I click it, nothing happens. Okay, so this is where JavaScript comes in. So we're going to do a simple event, which is called on click. Now note the capitalization. Note there's a space here. And note that it's inside this opening button tag. So I'm going to type equals. I'm going to do double quote, double quote. So we want to make sure all the quotation marks are balanced. Then inside of that, inside of the quotation marks, this is where our JavaScript is going to go. Later we're going to learn how to put it in a separate section. But for now, this is just going to get us started on the idea. So there is a JavaScript command called alert. I'm going to put this in parentheses afterwards. I'm going to use single quotes and then a semicolon. So notice the balance with the double quotes. Notice the balance with the parentheses. And notice the balance with the single quotation marks. So inside here, I'm just going to have it say, you know, warning, for example. So I'm going to hit Control S. I'm going to save it again. I'm going to refresh. And hopefully you'll still see this. If that disappears, something went wrong. Check your balance here. So let's say if I forgot to put the second quotation mark, it disappears. So you can see how everything is green here. So the color kind of helps you to figure out where problems exist. So let's go ahead and refresh that. If I click Alert, we're going to get a warning pop up. And it's going to say warning. So let's go ahead and hit Alert. And you'll see how this pops up. It says Warning. And then all we can do is click OK. So I'm going to go ahead and click OK. It takes us back to the page. I can do that again, et cetera, et cetera. So this is what I like to say to my students is the foundation of all programming. If this, do that. So if I click this button, it's going to, so if I click this button, it's going to do Alert Warning. So this is our actual JavaScript here from the page. So let's try it again. And it will happily do it over and over and over. So that is the absolute fundamental concept that you need to learn at this point. Let me go ahead and make this maybe just a little bigger so you can see the buttons. So let's go ahead and try one of the other ones. So the other one was background color. So I'm going to go back to my code. I'm going to go ahead and make a new button. And oops, button. And I'm going to call this green because green is one of my favorite colors. And I'm going to go ahead and just test it right now. And you see how it came next to the Alert, but it's on a different line here in the HTML. HTML ignores that. So if we wanted to put it on a different line, we would have to put the break tag, BR. Let's go ahead and test that. Now we put that below. It's up to you. You can do it however you like. I personally like it this way. So now what I want to do is when I click the green button, I'm going to change the background color of my web page to green. So again, if I click this, then I'm going to do that. I'm going to change the background color. So again, I'm going to go in here. I'm going to do on click equals quote, quote. It's a lot easier if you just put this here at the beginning than start typing your JavaScript. Now this one's a little bit long. It is document dot body. Oops, body dot style dot background color color. And notice it is the American spelling of color. Do not put a U there. It will not work. Sorry to people that use use. Now I'm going to put equals and I'm going to put single quotes again. So I'm just going to put green. And after that, I'm going to put semicolon and save it. So I'm going to refresh. I'm going to test it and click this. And you can see now when I click this button, it changes the background color to green. So I'm going to refresh that. I'm going to make sure it alerts still works. Yes, it does. I'm going to click on green. Yes, it does. Everybody's happy. So again, here's the code on the screen. Again, let me explain it on click. So it means when I click this particular button, I'm going to change the document. This whole thing over here is the document. The body, which we've talked about before, the body is this section of our HTML. The style. So we're changing the color or some other elements, some other aspect of the style. In this case, it's background color. Note the capital C. And we're going to say it is green. Now, we didn't have to do green, but this is just what I chose. And that is the second one. So again, we're still doing if this, then that. If we click, then make this change. Let's go back to our last coding concept, which is changing text. It's a little bit more complicated because we need to have a place for the text to change. So first, let's go ahead and do the button since we know how to do that part. And we're going to call. We're going to put a question here. So what is my favorite flavor? I'm going to save it. I'm just going to test it. Make sure it works. Okay. And you notice it's over there. So I'm going to put another BR tag. Oops. Put another BR tag here. And refresh it. There we go. So what I want to happen is when I click this, I want my favorite flavor to appear here. So to do that, we need to create a div. And I'm just going to put some question marks in there so that we know where the text is going to go. Notice how I'm testing it. Every time I add something, I test it to make sure. So the alert should still work. Background color change should still work. Everything should still work the way we have it. Okay. Now here's a key thing. If we're going to change something, we have to give it a name. Name has to be unique to that thing. So we know what we want to change. So I'm going to give this div an ID. Okay. So again, notice I'm putting my double quotes in. And I'm just going to call this answer. I could call it div answer. That's usually what I do. So we know it's a div. And I find my students really don't like adding the div part. I don't know why. But it just makes your code a lot clearer and easier to understand. And I'm going to refresh it just to make sure nothing changed, which is good. So here's what we have to do. We're going to go back to on click equals quote, quote. And then what we want to do is when I click this, I want to change the text in this element. It's called an element div answer to the answer. So I've already got my on click part. So I'm going to do document just like we did before. So instead of body, we're going to do get element by ID. Single quotes. Dot inner HTML equals and then our single quotes. And then our semicolon. Okay. So that's a complicated one. So notice we got document dot get element by ID. Note the E is capitalized. The B is capitalized. The I is capitalized. If you don't follow the proper capitalization, it will not work. Note the dot inner HTML all capital letters. And now we need to put our information here. So which ID and it's going to be this one div answer. So I can just copy that. And now it's kind of going off the screen. So I'm going to scroll over. So see where it says inner HTML equals. I'm going to put chocolate. Because that is my favorite flavor. I'll put an exclamation point because I really like it. Okay. So I've saved it. I'm going to refresh it. And now when I click this, it comes up with chocolate. Okay. So yeah, let me review that. That's basically it. So we've looked at events. I haven't talked about on mouse over. I'm going to show you that real quick at the end. But what we've done is we've created some HTML elements, in this case buttons. We've said that when we click on a particular button, we can show an alert. We can change the background color, or we can change the text of a particular div. We're actually changing the inner HTML. We can go full on HTML. But for now, we'll keep it simple. And again, in a future lesson, we'll learn how to put this into a different part of the program. So it's easier to deal with the code instead of putting this big long thing here. But that is a story for another day. What I wanted to show you real quick is instead of on click, we could also do, so I'm going to do this with green. We could do, well, let's do it with alert. That makes more sense. Mouse over. So we'll notice the capital M, capital O. So I want to refresh it. And what that means is when the mouse pointer you see here goes over that button, it will execute this JavaScript code. So let's see it. Okay, notice that I didn't click it. It just popped up. So I'm not going to click. I'm just going to move it. And as soon as I go over that, it does that. So I can do the same thing here. So I saved it, refreshed it. The alert pops up. And then as soon as I go over green, the background changes to green. I can do the same thing here with click as you've seen before. Again, these are called events. Okay, saved it. Refresh. As soon as I do that, it changes. So we can change how we input information into the computer. So that's about it. So we learned a little bit about events on click and on mouse over. Showed how to pop up an alert to the user. Showed how to change the background color. And we showed how to change text of a particular div. Actually, the HTML of a particular div. So that, my friends, is that. Thank you for watching and keep on coding.