WEB2 JavaScript -1 정의 및 동작
1. JavaScript 등장배경
- 웹이 등장할 때 있던 최초의 기술 HTML, HTML을 통해 정보를 표현하고 주고 받을 수 있게 됨.
- HTML은 정적임, 한번 출력되면 화면에 언제나 그 모습.
- 기술의 발전 이후 개발자는 사용자와 동적으로 상호작용하는 웹페이지를 만들고 싶어짐.
2. JavaScript의 동작
- 웹은 HTML을 이용해서 웹페이지를 우선 만든 후에
- JavaScript를 이용해서 사용자와 상호작용 할 수 있도록 기능을 추가하여, HTML정보와 JavaScript의 기능을 갖춤.
- HTML이 '정보'라는 것을 그린다면, JavaScript는 '정보'를 움직이게 한다.
- 버튼의 클릭으로 웹화면이 Night모드 Day모드로 바뀌는 것처럼, 웹브라우저와 사용자가 상호작용하게 함.
2-1 동작 간단 코드 예제
1) 버튼의 생성
- night라는 버튼은 input이라는 태그를 이용하면 만들 수 있다.
- input태그의 속성으로 button을 준다.
- value="night"를 통해 웹브라우저가 버튼의 이름을 "night"라고 사용함
- onclick : HTML의 사용설명서에는 onclick이라는 속성의 값으로는 JavaScript가 와야된다라고 명시돼있음.
- onclick이라는 속성의 값으로 JavaScript코드를 넣어주면 사용자가 onclick속성이 위치하고 있는 버튼을 클릭했을 때, 명시한 JavaScript코드를 그때 실행시킴.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';2)document.querySelector('body').style.backgroundColor='black';
- document.querySelector('body'): 사용자가 night라는 버튼을 클릭했을 때, 문서에서 body태그를 선택하는 코드
- onclick이라는 속성값에 오는 JavaScript코드
- body태그는 화면 전체의 내용을 나타냄.
- style.backgroundColor='black' : 그다음 body 태그에 style속성 값으로 background color를 black으로 한다라는 의미
3) night버튼을 클릭하고 바뀌는 코드
- 2)번 JavaScript코드에 의해 night버튼을 누르면, body컬러에 background와 color코드가 추가됨.
<body style="background-color: white; color: black;">
즉, JavaCript는 HTML을 제어하는 언어이다.