{SFB} Javascript day 5 - 조건문

● 조건문

 

조건문

: 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라 다른 순서의 기능들이 실행되게 하는 것

 

내가 했던 실습으로 조건문의 필요성에 대한 예를 들어보면

2개의 버튼을 한개로 만들어서 야간 모드에서 버튼을 클릭하면 주간 모드가 되고, 반대로 주간 모드에서 버튼을 클릭하면 야간 모드가 되는 기능을 구현해보고 싶다고 하자. 이것을 토글(toggle) 이라고 하는데, 이 토글을 구현하기 위해서 조건문이 필요하다.

위 코드가 토글을 만든 것이다. 

if 조건문에 따라 현재 모드가 주간 모드라면 if의 코드가 실행되고, 주간 모드가 아니라면 else의 코드가 실행된다. 

또한 === 라는 비교 연산자와 이 === 를 통해 만들어진 불리언(boolean) 이라는 것이 있다.

 

 ○ 비교 연산자 === 와 불리언(boolean)

 

script 태그의 document.write(1===1) 을 입력하면 왼쪽 웹페이지 모습처럼 값이 true(참) 이 나온다.

즉, === 비교 연산자는 왼쪽의 값과 오른쪽의 값이 같은지 판단하는 것이다. 1 과 1은 같기 때문에 true라고 출력된 것이다.

만약 document.write(1===2) 라고 하면 어떻게 될까?

1과 2는 다르기 때문에 false 가 출력되는 것을 볼 수 있다.

=== 는 비교 연산자 이면서, 이항 연산자라는 것을 알 수 있다. 이항 연산자를 사용할 때는 좌항과 우항이 있고 좌항과 우항을 결합해서 어떠한 데이터를 만드는 것이다.

=== 라는 연산자가 왼쪽에 있는 값과 오른쪽에 있는 값을 비교해서 만약 같다면 true 값을 출력해주고 같지 않다면 false 값을 출력하게 된다.

즉, === 라는 비교 연산자는 좌항과 우항의 관계에 따라 true 또는 false 중 하나의 값을 만들어내는 연산자이다.

그리고 true 와 false 라는 두 가지 값을 묶어서 불리언(boolean) 이라고 한다.

 

숫자 , 문자열 데이터 타입 외에 불리언이란 데이터 타입이 있다. 숫자와 문자열은 상당히 많은 데이터가 있다. 하지만 불리언은 단 2개의 데이터로 이루어진 데이터 타입이다.

 

이번에는 1<2 를 살펴보자.

※ HTML 에서 < 는 태그의 시작 문법으로 인식하기 때문에 출력하기 위해선 &lt; (less than 을 의미) 라고 해준다.

document.write(1<2) 는 true 이기 때문에 true 라고 출력되는 모습을 볼 수 있다. < 라는 비교 연산자는 좌항과 우항을 비교하고, 2가 더 크기 때문에 true를 출력한다.

 

1<1 은 어떻게 될까?

당연히 거짓이기 때문에 false를 출력하게 된다.

 

비교 연산자가 있고 비교 연산자를 통해 만들어지는 결과는 true나 false 중 하나이며 이 값들을 묶으서 boolean 이라는 것을 기억하자.

 

 ○ 조건문의 형식

 

아주 단순한 코드를 짜보자.

아주 단순한 프로그램이다. 여기서 write() 안에 <br> 태그를 쓰면 줄바뀜이 적용된다는 것을 알아두자.

 

다시 if 문을 사용해서 프로그램을 작성해보자.

if(true) { document.write("3<br>") } 

else { document.write("4<br>") } 을 작성하고 웹 페이지에 출력된 것을 보면 3은 출력되지 않은 모습을 볼 수 있다.

즉, 코드의 실행 순서가 바뀐 것을 알 수 있다. else에 적힌 코드를 무시하는 방향으로 진행된 것이다.

 

if(false) { document.write("3<br>") }

else { document.write("4<br>") }          라고 하면 어떻게 될까?

웹 페이지는 2를 무시하고 3을 출력하는 것을 볼 수 있다.

즉, 1을 출력하는 부분이 먼저 실행되고, if 문에 지정한 값이 false 이므로 else 안의 코드가 실행되어 3이 출력되고 그 다음 4가 출력되는 모습이다.

다시 말해, if 문의 뒤에 나오는 괄호 안에는 boolean data type (true / false)가 오는 것이고, true 라면 첫 번쨰 중괄호 안의 코드가 실행되고, 두 번째 중괄호 안의 코드는 무시하게 된다. 

반면, false 가 등장하면, 첫 번째 중괄호 코드는 무시되고, else 안에 있는 코드가 실행된다는 것이 조건문을 이해하는 데 가장 중요한 요소이다. 

따라서, boolean 의 값이 무엇이냐에 따라 실행되는 코드가 바뀌는 것이다. 

 

 ○ 조건문의 활용

이번엔 우리가 예제로 만들었던 night / day 버튼들을 하나로 통합시켜서 구현해보자.

<input> 태그 의 type 속성 값으로 button 을 주고 value 값으로 night 를 기본으로 준다.(웹페이지가 기본 흰색이기 때문에) 

그리고 onclick 속성과 그 값으로 if - else 문을 가정해서 코드를 적은 것이다. 만약 night 라면 앞서 만든 야간 모드 코드가 실행되고, 그것이 아니라면( day 라면 ) 주간 모드 코드가 실행되도록 하는 코드이다.  

여기서 if (night) 부분이 가장 중요하다.

() 안의 내용이 boolean data type 이 오게끔 만들어 줘야 한다.

이를 위해서 첫째로 할 일은 console 을 사용하여 현재 버튼의 value 값이 무엇인지 알아내는 것이다.

 

쉽게 알기 위해 우선 input 태그에 id 값 (night_day) 을 줘서 이 웹 페이지의 단독적인 태그를 만들어 보자.

그 다음 id 값이 night_day 인 element 의 value  값을 알아내는 방법은

위 이미지 처럼 value 라는 property를 사용하면 된다.

console 에 document.querySelector('#night_day') 를 입력하면 위와 같은 결과가 출력된다. 

※ 이때 ↑(위 방향키) 를 누르면 직전에 입력했는 것이 다시 나온다.

그리고 다시 document.querySelector('#night_day').value 를 입력하면 night 값이 나오는 것을 알 수 있다.

 

이번엔 input 태그의 value 값을 day 로 바꾼뒤

document.querySelector('#night_day').value 를 입력하면 day 값이 나오는 것을 알 수 있다.

 

즉, 이 코드(.value)를 통해 id 값이 night_day 인 element 의 value 를 알 수 있다.

 

다시 조건문으로 돌아와서 이 .value property 를 이용해보자.

if 문의 조건에 document.querySelector('#night_day').value 의 값이 night 와 같다면

야간 모드가 실행되도록 하고, 그렇지 않다면

주간 모드가 실행되도록 하면 된다. 

 

이대로 작성하고 웹페이지를 새로고침 한 후 버튼을 누르면 야간모드는 잘 실행이 된다. 하지만 주간 모드는 실행되지 않는다. 그 이유는 value 값이 여전히 night 이기 때문이다. 따라서 야간 모드로 바꿨을 때 버튼의 value 값이 day 로 바뀌고 주간 모드로 바뀌었을 땐 value 값이 night 로 바뀌도록 만들어 준다.

 

document.querySelector('#night_day').value = 'day'; 와 document.querySelector('#night_day').value = 'night'; 를 추가해주고 실행하면 위 웹페이지 이미지와 같이 야간모드 일때 button 의 value 값이 day 로 바뀐것을 볼 수 있다.

 

이 상태에서 다시 button 을 누르면 if 문의 조건문 안에서 document.querySelector('#night_day').value 의 값은 day 이기 때문에 document.querySeletor('#night_day').value === 'night' 가 false 값이 되고 else 안의 코드가 실행되게 된다.

 

 

 

참조 : 생활코딩 유튜브 (www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA)