TIL/06_JS

WEB과 Javascript [ing]

JJO.OYA 2022. 6. 15. 01:05

 

[1]

WEB이 처음 등장했을 때, 사람들은 HTML을 사용해서 정보를 주고받았습니다.

하지만 HTML은 정적입니다. 한 번 출력되면 그 모양이 바뀌지 않죠.

사용자와 동적으로 상호작용하는 WEB을 만들기 위해서 Javascript가 등장했습니다.

이제 우리는 HTML을 이용해 웹페이지를 만들고, Javascript를 이용해 사용자와 상호작용할 수 있도록 추가할 겁니다.

즉, 정적인 정보인 HTML을 Javascript가 동적으로 만들어 주는 것입니다.

 

 

[2] Javascript 역할

 

가장 중요한 역할은 사용자와 상호작용할 수 있게 하는 것

 

어떻게 이러한 기능이 가능한 것일까요? 직접 이 페이지를 살펴보면서 알아봅시다.

 

(실습) Javascript 살펴보기

(크롬 기준으로) 웹 페이지에서 '오른쪽 버튼 > 검사'를 누르면 새로운 창이 뜨게 됩니다. 여기에서 Elements 탭을 보면, 페이지를 구성하는 HTML 태그들이 나와 있습니다.

이제 직접 night/day 버튼을 눌러보세요. 누를 때마다 body 태그의 style 속성이 바뀌는 것을 볼 수 있을 겁니다.

그렇다면 이제 이 버튼을 한 번 살펴봅시다. 버튼은 type이 button인 input 태그로 이루어져 있습니다. value는 버튼의 이름을 나타냅니다. 그리고 onclick이라는 속성에 바로 javascript가 들어가게 됩니다. 즉, 이 버튼을 누르면 이 javascript 코드가 실행되는 것이죠.

적혀있는 코드를 간단히 살펴봅시다. onclick에는 이런 javascript 코드가 적혀있습니다.

document.querySelector('body').style.backgroundColor='black'

이 코드를 쉽게 풀어봅시다. 먼저, 문서(document)에서 body라는 태그를 선택(Selector)합니다. 그리고 난 후 style 속성값에서 backgroundColor를 'black'으로 설정한다는 뜻입니다.

이렇게 부여된 속성값은 아까 살펴봤듯이 body 태그의 style 속성으로 들어갑니다. 이 style 속성은 CSS입니다. CSS란 디자인하는 언어입니다. 지금은 CSS에 대해서 몰라도 괜찮으니 걱정마세요.

 

정리하기

Javascript는 사용자와 상호작용 하는 언어입니다. 그리고 우리는 실습을 통해서 어떻게 이러한 일이 가능한지 살펴보았습니다. 웹 브라우저는 한 번 출력되면 바뀔 수 없지만, Javascript 코드에 따라서 style 속성이 추가되면서 디자인이 바뀌는 것입니다.

이러한 Javascript의 특성을 이용해서 우리는 웹페이지를 더 동적으로 만들 수 있습니다.

 

1) night 버튼을 눌렀을 때 배경이 검은색이 아닌 회색으로 바뀌도록 만들고 싶다면, 어떻게 하면 될까요?

document.querySelector('body').style.backgroundColor='gray'

 

 

 

[3] HTML과 JS의 만남 : script 태그

 

HTML과 Javascript

Javascript는 HTML 위에서 동작하는 언어입니다. 그렇다면 어떻게 서로 다른 두 언어를 하나로 합칠 수 있는 것일까요?

이 때 바로 script 태그가 필요합니다

 

Script 태그

HTML의 태그 중 하나인 script 태그 안에는 Javascript 코드를 쓸 수 있습니다. 다음 예제 코드와 같이 쓸 수 있는 것이죠.

<body>
  <script>
    document.write('hello, world!');
  </script>
</body>

위와 같은 코드를 <body> 태그 안에 넣어서 웹페이지를 띄워보면 페이지에 hello,world! 라는 글자가 뜨는 것을 볼 수 있을 겁니다. 

하지만 이러한 기능은 다음과 같이 HTML만 사용해서 구현할 수도 있습니다.

<body>
  hello, world!
</body>

그렇다면 이 둘의 차이점은 무엇일까요?

바로 Javascript로 쓴 코드는 동적이라는 것입니다. 만약 hello,world! 대신 1+1을 출력한다고 해 봅시다. 이 때는 HTML과 Javascript로 쓴 코드의 결과가 아래와 같이 달라집니다.

 

 

>> 변화되는 값이 없고 정적인 부분을 전달할 때 html

      사용자와 상호작용하며 동적인 부분을 전달할 때 javascript