Welcome to the 2nd 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 <button> tag. And if you set the type to button, it will be displayed as a button, like this. And if you want to show a text on the button, use an attribute called value. Over here, I'm going to type... 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 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 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 to note 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... key down event. And then attribute. That's enough. 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 download 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're 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
