So far, we have learned syntax of JavaScript. We've covered data type, variable, constant, and a few operators. In this chapter, we are going to learn concrete, key techniques to control a web browser, which is one of the things you can do through JS.

First, let's look at the web page on the left side.

I want to make the background color of the page turn black when the night is clicked. To do this, when you look at the code on the right side for the  tag, which applies to the entire web page, I'm going to add a style attribute.

And for values of the style attribute, another language called CSS will be used.

CSS is completely different from HTML or JavaScript and describes the style of a document. I'm going to set background-color to black and reload the page.

And the result is like this. And then if you add color:white, the font color has now changed to white.

So, when I click the night button like this, if we can change the style attribute of the body tag, that means we can do whatever we want to do.

Think yourself about what I just said. By the way, for HTML pages, we can modify the code to get the desired result like this.

But that means the style will stay the same always. In other words, HTML is a static language, which means you cannot make variations once the page is loaded.

But let's see what you can do by using JS to control the screen when you click the night button.

Let me first delete this part and reload the page. If you click the button, how will the  tag change? 1, 2, 3 Ta-da!

As you see, the value of style="background-color" is changing between black and white. So, in order to do this, there are some intelligent parts we need.

First, do you remember I mentioned earlier that CSS is used as values of the style attribute?

So, while we don't need to know everything about CSS, we do need to know some of it, at least. Second, to apply this style attribute to the body tag, we need to tell to whom we want to give this attribute.

We need to know how to tell the web browser that the style here is targeting the body tag by using JavaScript.

From now on, we are going to move to two important topics.

First, we will look into the most fundamental and important rules of CSS. Second, we are going to learn how to use JavaScript to select specific tags that you want to control.

Since these are very important topics, let's take a break here and continue in the next chapter.

WEB2 JavaScript - 8.웹브라우저 제어

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

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