조건문 (feat. 조건문을 이용한 주간모드,야간모드 전환 버튼 생성)

조건문이란,

주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는것이다.

 

조건문은 if로 시작하며, if 뒤의 괄호 안에 조건을 기입한다. (조건이 될 수 있는 값은 Boolean이다.)

IF 뒤의 괄호 안에 조건이 true 이면, IF문 뒤의 중괄호 { } 구간이 실행되고,

IF 뒤의 괄호 안에 조건이 false 이면 else문 뒤의 중괄호 { } 구간을 실행한다.

---

이 조건문을 이용하여 이전 "제어할 태그 선택하기" 강의에서 학습하였던 주간모드/야간모드 버튼을 하나로 통합하여 생성해보자.

https://nossodia.tistory.com/117

제어할 태그 선택하기 (야간모드,주간모드 버튼 생성)

기존 "제어할 태그 선택하기" 에서는 Night 버튼을 클릭하면 야간모드로, Day 버튼을 클릭하면 주간모드로 보여지도록 만들었지만, 이번에는 조건문을 응용하여 버튼을 하나만 생성하고 주간모드일때 클릭하면 야간모드로 변경되고 야간모드일때 클릭하면 주간모드로 바뀌도록 설정해보도록 하자.

---

---

위 예시에서는 [night] 라는 버튼을 하나만 생성하였고 id를 "night_day"로 지정하였다.

 

그리고 이 버튼을 클릭하였을때 IF문을 통해 value 값이 "night" 이면, 야간모드(IF문 뒤의 중괄호문 : 배경색-검정,글자색-흰색)를 실행하면서 [night]버튼의 value값을 "day"로 변경한다.

그럼 예시와 같이 [night] 로 보여지던 버튼이 [day]라고 변경된다.

 

그리고 다시 이 버튼을 클릭하면 value 값이 "day"로 변경되었기때문에 (IF문에 조건으로 설정한 [night]가 아니기때문에) else문 뒤의 중괄호문을 실행한다.

즉 주간모드로 실행되면서 배경색-흰색, 글자색-흰색으로 바뀌고 value 값 역시 "night"로 바뀌게 된다.

---

위 예시에서 어떻게 [버튼] 속성의 value 값만 불러서 값을 비교하였을까?

 

If문 내의 조건을 보면 (document.querySelector('#night_day').value === 'night') 인데,

이는 id가 '#night_day'인 태그의 value 값을 불러온 뒤 'night' 라는 값과 비교하여

동일하면 True (IF문 뒤의 중괄호문 실행) , 불일치하면 False (else문 뒤의 중괄호문 실행)를 출력한다.

 

:) 버튼 클릭 -> 해당 버튼의 value 값을 불러옴 -> 불러온 value값과 "night"의 일치 여부를 확인

   -> 일치하면 IF문 실행 / 불일치하면 Else문 실행.