-
[WEB2 JavaScript] 14. 조건문 예고, 17.조건문의 활용 | 초코더JavaScript/생활코딩 2019. 11. 14. 15:10
오늘은 간단한 조건문에 대해 공부해볼게요.
우선 저번 시간에는 아래 사진과 같이 night버튼을 누르면 배경검정_글씨흰색, day버튼을 누르면 배경흰색_글씨검정이 되도록 만들었는데요.
day모드 night모드 버튼 하나를 가지고 day일때 버튼을 누르면 night로, night일때 버튼을 누르면 day로 변경되게 바꿔보겠습니다.
document.querySelector('#night_day').value우선 버튼 하나만 가지고 제어하기 위해서는 지금 버튼의 상태가 무엇인지 가져와야겠죠?
지금 버튼의 value값을 가져오는 코드입니다.
이렇게 하면 id값 night_day의 value값을 가져옵니다.
이 값이 night인지 day인지 비교하는 조건문을 아래에 짜볼게요.
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'; }value값이 night과 같은지 비교할 때는 ===을 사용해줍니다. 보통 프로그래밍 언어에서 같다는 등호는 ==을 사용하는데 자바스크립트에서는 보통 ===이렇게 세개를 써줍니다. 세개는 타입까지 같은지 비교해주는 것입니다. 주의해주세요!
그럼 같을 경우 배경과 글자색을 변경해주고 value값도 day로 바꿔줘야겠죠?
document.querySelector('#night_day').value = 'day' 이문장이 value값을 day로 변경해주는 코드입니다.
이렇게 최종적으로 하나의 버튼을 가지고 조건문을 이용해 배경과 글자색을 바꿔주는 코드를 짜보았습니다.
아래는 전체코드입니다.
<html> <h1><a href="index.html">WEB</a></h1> <!-- 한 버튼을 가지고 색 바뀌기 if else 문 --> <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><a href="1.html">HTML</a></li> <li><a href="2.html">CSS</a></li> <li><a href="3.html">JavaScript</a></li> </ol> <h2>JavaScript</h2> <p> JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA. </p> </html>'JavaScript > 생활코딩' 카테고리의 다른 글
[WEB2 JavaScript] 25.함수, 26. 함수 : 매개변수와 인자, 27. 리턴 | 초코더 (0) 2019.11.15 [WEB2 JavaScript] 23.배열과 반복문의 활용 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 22. 배열과 반복문 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 18.리팩토링(refactoring) | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 12.제어할 태그 선택하기 | 초코더 (0) 2019.11.14