![[JS] 2.1. 조건문](/_next/image?url=https%3A%2F%2Fblog.huns.site%2Fimgs%2Fthumbnails%2Fblog%2Fposts%2Ffrontend%2FjavaScript%2Fboost-course%2Flifecoding.png&w=1200&q=75)
TOC
참고 자료
비교연산자
===
프로그래밍 언어에서 =을 통해 우변의 값을 좌변에 할당하여 변수를 지정하기 때문에 파이썬에서는 ==처럼 등호를 두 개 연달아 써서 양변을 비교해주었다.
그런데 자바스크립트에서는 ===처럼 등호를 3개 써서 양변을 비교한다.
document.write(1 === 1);
// [결과] true
참고로 파이썬에서는 True와 False처럼 Capitalize되어 표시되지만, 자바스크립트는 true와 false처럼 소문자로만 표시된다.
HTML에서 비교연산자 표기하기
참고📣 JS 문법이 아니라 HTML 문법이다.
{: .notice--primary}
<, >로 표기하기에는 HTML에서 태그를 표시할 때 사용하므로, 부등호 표시는 다음과 같이 한다.
<:</ less than>:>/ greater than<=:≤/ less than or equal>=:≥/ greater than or equal
조건문
비교연산자를 배운 이유이다. if~else문의 조건에 boolean 타입을 넣어 true일 때와 false일 때의 코드의 동작을 다르게 한다.
document.write("1<br />");
document.write("2<br />");
document.write("3<br />");
document.write("4<br />");
// [결과]
// 1
// 2
// 3
// 4
기본적으로 브라우저에 숫자를 쓰고 다음 줄로 넘어가는 코드이다. print()와 같다.
document.write("1<br />");
if (true) {
document.write("2<br />");
} else {
document.write("3<br />");
}
document.write("4<br />");
// [결과]
// 1
// 2
// 4
if(조건){조건이 true일 때 실행 코드}의 형식을 가진다.
document.write("1<br />");
if (false) {
document.write("2<br />");
} else {
document.write("3<br />");
}
document.write("4<br />");
// [결과]
// 1
// 3
// 4
조건이 true이든 false이든 if(조건){조건이 true일 때 실행 코드}의 형식을 가진다.
조건문의 활용
조건문을 활용해서 다크모드를 on/off 하는 토글을 구현해보자.
<body style="color: black; background-color: white;">
<input
id="night_day"
type="button"
value="night"
onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.color='white';
document.querySelector('body').style.backgroundColor='black';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.color='black';
document.querySelector('body').style.backgroundColor='white';
document.querySelector('#night_day').value = 'night';
}
"
/>
<ul>
<li .list="">내용</li>
<li .list="">내용</li>
<li .list="">내용</li>
</ul>
</body>
onclick 속성 내부에 if()와 else()가 들어가있는 모습이다. 최초에 body는 검정 글씨와 흰 배경으로 설정되었고, night_day라는 id명을 가진 button 타입 input의 초기 value는 night이다.
이 상황에서 night를 누르면 body는 색이 반전되어 흰 글씨와 검정 배경으로 변하게 하고, 버튼의 value는 'day'로 바뀌게 되어 이를 누르면 다시 원래대로 돌아오게 하려고 한다.
document.querySelector('#night_day')를 통해 'night_day' 를 가진 id의 HTML 문서를 지정한다. console에서 위에처럼만 치면 태그에 대한 내부 정보가 모두 보인다. 이중에서 우리에게 필요한 정보는 value이다. 이 value를 조건문에서 비교해서 night일 때 버튼을 누르면 스타일이 검정배경/흰글씨 로 바뀌게 되는 것이다.
이후에 그냥 조건문을 빠져나오게 된다면 다음 클릭에서 value가 여전히 night이기 때문에 다시 if문을 거치게 된다. 즉, night 모드에서 빠져나올 수 없는 것이다. 이를 바꿔주기 위해 value 속성을 사용한다.
