Welcome to the second in the series on HTML X JavaScript. What we are going to learn today is "event," which plays a key role in making JS interact with users.

Such an interesting subject, so stay focused. First, I have created basic HTML code, as you can see. And then I'm going to create a button over here.

For this purpose, you can use the `<input>` tag. And if you set the type to `button`, it will be displayed as a button, like this.

And if you want to show text on the button, use an attribute called `value`. Over here, I'm going to type...

"hi." Hi. It will show up like this. And then what I want to do now is I want to see an alert window pop up when clicking "hi." You can use the `alert` feature to create an alert window.

Let's do a search. For example, we can search JavaScript alert.

As you can see down here, this is the code for an alert. You can also reference search results just like me. Anyway, I'm going to add the code over here.

`onclick=""` and then... `alert('hi')`. Now let's reload the page and click the button to see what happens.

We've got this result. Now, let's look at the results more closely to understand how it worked. I used `onclick`, which is a very special attribute.

The HTML tutorial describes that for a value of an `onclick` attribute, you can only use JavaScript. In addition, according to the tutorial, the web browser stores the value of the `onclick` attribute.

And when you click the tag where `onclick` is located, which is the button right here, the web browser interprets the stored JavaScript code according to the JavaScript rules and operates accordingly.

Let's run it again to confirm. As you see, when the button is clicked, the JavaScript is executed.

In other words, when the web browser reaches an `onclick` attribute, it will think, "Oh, then I'm going to remember `alert('hi')`" "and I will execute it when the user clicks the button," and wait until when the user really clicks the button.

And this kind of thing that happens on the browser is called an "event." And what triggers JavaScript when an event occurs is an `onclick` attribute.

Then, you might wonder what kinds of web browser events there are.

If we are talking about all kinds of possible events, the list will be endless. But among them, there are some major events that are worth noting, such as clicking something.

Here's another example. For the same `input` tag, if you change the type to "text," you will get this result.

Ta-da! You can now add text into the box. And the content changes as you type in, right? There's even an event for checking whether there's a change to the content.

For this, type in "onc" first and the editor will suggest possible attribute names.

That means you don't need to remember them all. So, let's press enter here. Oh, `onclick` is not what we want.

We're going to use an attribute named `onchange`. And then let's look what will happen if I make it to execute the JavaScript called `changed`.

When you type in ABC and move your cursor outside of the box, the web browser will execute the `onchange` event. What's interesting is, if you add some text, delete it, and then leave the box, the web browser won't execute the `onchange` event.

As I mentioned earlier, web browsers have already defined 10 to 20 events that are worth noting among many web browser events.

And we can use those events to create a website that interacts with users.

Now, let's do a search again. I think search is the most important thing. Let's say you want to make an event that's triggered when the user clicks on a certain button, JavaScript, and then... keydown event, and then attribute.

If you search them, the `onkeydown` event attribute, an HTML attribute. And, voila! This is the result: `onkeydown`.

Then let's try it. `input type="text"` and then `onkeydown=""`. Alert "key down". Let's check again. If you reload the page, I'm going to press any keys within the page.

Once you click, it confirms that you have clicked the key. This is it. As you see, the hero of this chapter is the group of attributes starting with "on".

And what do we call them? They are the heroes and we call them "events." Also, there are many events for use on the web browser.

But among them, there's a list of 10-20 particular events that are worth memorizing and useful to users. And you will be able to write interactive code.

Alright, let's go back to the main example. We now partially get how night/day work. Let me explain in more details. As you see, an `onclick` attribute is included here.

And for the value of the `onclick` attribute, which we can't say we get the meaning 100%, it includes JavaScript code.

And thanks to it, we can get this result. Alright, we've covered a lot in this video! Let's wrap up here.

WEB2 JavaScript - 4.HTML과 JS의 만남 : 이벤트

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNaPCfjS0OtBGosccoJssHdaB5i8H73dKI9jimeybLU11Hzb6a86EAaDFkM6bYaBwIDAQAB


WEB2 JavaScript - 4.HTML과 JS의 만남 : 이벤트

Scripts