반응형
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을 제어하는 언어이다.
반응형
'Front-End: Web > JavaScript' 카테고리의 다른 글
[생활코딩: JavaScript] 3. 데이터타입 - 문자열과 숫자 (0) | 2020.09.16 |
---|---|
[생활코딩: JavaScript] 2. HTML과 JavaScript의 만남 (0) | 2020.09.16 |
자바스크립트와 웹 애플리케이션 개발 (0) | 2020.09.01 |
클로져(Closure) (0) | 2020.08.31 |
내장형 객체 (0) | 2020.08.31 |