본문 바로가기

Front-End: Web/JavaScript

[생활코딩: JavaScript] 1. Intro

반응형

html은 정적이다. 하지만 사람들은 동적으로 사용자와 상호작용할 수 있는 웹페이지를 만들고 싶었다.

이런 배경에서 탄생한 것이 JavaScript이다.

 

목적

웹페이지의 야간모드/주간모드 버튼을 통해 모드를 변경한다.

- 사용자가 누르는 버튼으로 인해 웹페이지의 상태가 변화 (상호작용)

- 개발자 모드 > Elements의 코드가 변화

ex)

<input

type="button" : 태그의 속성으로 버튼을 주면 버튼이 만들어짐

value="night" : 버튼에 띄울 내용

onClick="~" : 버튼을 클릭했을 때 실행될 자바스크립트를 작성한다. 

  - document.querySelector("body").style.backgroundColor="black"; : body 태그를 선택하고, 이의 style 속성값으로 backgroundColor값을 black으로 변경한다

  - document.querySelector("body").style.color="white"; : body 태그를 선택하고, 이의 style 속성값으로 color를 white로 변경한다

 

 

요약

1. 자바스크립트는 사용자와 상호작용하는 언어이다

2. 웹브라우저는 한 번 화면에 출력되면 코드를 바꿀 수 없다. 하지만 자바스크립트를 이용하면 코드를 변경할 수 있다.

즉, 자바스크립트는 html을 제어하는 언어이다.

 

 

 

반응형