웹 페이지는 한 번 화면에 출력되면 자기 자신을 바꾸는 능력이 없습니다. 그것을 가능하게 해주는 것이
자바 스크립트 입니다.
자바스크립트는 사용자와 상호작용하는 언어입니다.
night 와 day 라는 버튼이 있다.
각 각의 버튼을 클릭 했을 때 그것에 반응해서 웹 페이지를 바꿀 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript 란?</h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white'
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black'
">
<p> 코딩하는 코린이</p>
</body>
</html>
input 의 onclick 이라는 속성의 값으로 자바스크립트 코드를 넣어서
onclick의 속성이 위치하고 있는 버튼을 클릭했을 때 자바스크립트 코드를 실행하게 된다.
자바스크립트 코드를 보면
대략
document ( 이 문서에서 ) querySelector('body') <body> 태그를 선택하겠다!
그 다음 <body> 태그에 style 속성 값으로 color= black 를 사용하겠다! 는 뜻이다.
'JavaScript' 카테고리의 다른 글
| JavaScript 함수 (function) (0) | 2020.12.06 |
|---|---|
| 리팩토링(refactoring) 이란? (0) | 2020.12.06 |
| 조건문 활용- 토글(toggle) (0) | 2020.12.06 |
| JS의 이벤트 (0) | 2020.12.06 |
| script 태그 (0) | 2020.12.06 |