if (document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
if (document.querySelector('#night_day').value === 'night')를 통해
id가 night_day인 button의 value가 night인 경우 배경색을 black으로 바꾸고, 글자색을 white로 바꾼다.
중요한 것은 document.querySelector('#night_day').value = 'day'; 를 통해
id가 night_day인 button의 value 값을 day로 바꾸어주게 되면, button의 값은 day가 된다.
다시 button을 누르게 되면, 이번엔 if (document.querySelector('#night_day').value === 'night')의
value값이 day이기 때문에 거짓이 되므로 else구문을 실행하게 된다.
else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
구문에서는 다시 한번 배경색을 white, 글자색을 black으로 변경한 뒤,
다시한번 document.querySelector('#night_day').value = 'night'; 을 통해 value 값을 night로 바꾸어준다.
따라서 button을 누를 때마다, if문과 else문이 번갈아가면서 실행하고 주간모드, 야간모드가 실행되는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2>JavaScript<br>
JS연습</h2>
<p>HTTP: 웹페이지와 서버간의 요청과 응답을 관리
Hypertext: 하이퍼링크, 문서, 이미지 등
AJAX: HTTP를 하는 방법?
XML: HTML과 같은 마크업언어 중 하나
JSON: (자바스크립트오브젝트노테이션) 서버와 데이터를 주고 받을 때 사용하고 사람들이 주로 사용 KEY: VALUE 로 이루어짐
ex) 클라이언트에서 토끼 오브젝트를 서버로 주려면 key : value의 스트링값으로 전해지고 돌아올때도 똑같이 key:value로 돌아온다
오브젝트를 직렬화해서 JSON으로 변환할지 중점적으로 공부
</p>
</body>
</html>▲동영상의 최종 코드
위 포스팅은 생활코딩님의 JavaScript 강의를 시청 후 작성하였습니다. 감사합니다.
댓글