1. 수업의 목적
- JavaScript를 이용하면 사용자의 행위에 반응하도록 만들 수 있다. (상호작용)
- 웹 페이지는 브라우저에 한 번 출력되면 바뀔 수 없지만 (e.g.
<body>태그는 계속<body>태그를 유지) JavaScript를 이용하면 디자인에 변화를 줄 수 있다.
Example
사용자가 버튼을 클릭했을 때 웹 페이지의 배경과 글씨 색을 바꿀 수 있다.
- night button: 배경 검정색, 글씨 흰색
- day button: 배경 흰색, 글씨 검정색
<!-- night 버튼을 클릭하면 배경색을 검정으로 전환 -->
<input type = "button" value = "night" onclick = "
document.querySelector('body').style.backgroundColor = 'black'; ">input type = "button" value = "night": 글씨가 night이 써진 버튼 생성onclick: 클릭했을 때 속성값을 실행, 속성값으로 JavaScript를 갖는다.document.querySelector('body'): 웹 페이지의<body>태그를 선택.style.backgroundColor = 'black';: 배경색을 검정으로 변경
브라우저의 개발자 도구에서 버튼을 클릭할 때 코드가 바뀌는 것을 볼 수 있다.
'공부를 합니다 > 언어 (Language)' 카테고리의 다른 글
| WEB2 - JavaScript_10 프로그램, 프로그래밍, 프로그래머 (0) | 2020.05.01 |
|---|---|
| WEB2 - JavaScript_7-9 웹 브라우저 제어 (0) | 2020.05.01 |
| WEB2 - JavaScript_5-6 데이터 타입, 변수와 대입연산자 (0) | 2020.05.01 |
| WEB2 - JavaScript_2-4 HTML과 JavaScript의 만남 (0) | 2020.04.30 |
| [생활코딩] WEB2 - JavaScript (0) | 2020.04.30 |