5일차 : 비교 연산자와 Boolean 데이터 타입, 조건문, 조건문의 활용

5일차 : 비교 연산자와 Boolean 데이터 타입, 조건문, 조건문의 활용

 

 

1. 비교연산자와 불리언(Boolean)

 

조건문을 배우기 위해서는 먼저 비교 연산자와 이를 활용하여 만들어지는 데이터 타입인 불리안(Boolean)을 살펴봐야 합니다.

 

우선 간단한 비교 연산자를 알아봅시다.

 

a>b : a는 b보다 크다.

a>=b : a는 b보다 크거나 같다.

작다도 마찬가지 입니다.

 

여기까지는 수학의 비교 연산자와 같죠.

 

그럼 같다와 같지 않다는 어떻게 표현할까요?

a==b : a와 b가 같다.

a!=b : a와 b가 같지 않다.

등호(=)를 하나만 쓰면, 어떤 값을 정하는 의미가 되기 때문에 위와 같이 사용합니다.

 

간단히 웹페이지를 만들어 볼게요.

 

 

자 이렇게 비교 연산자를 사용하고 출력을 하면, 맞다(true)와 아니다(false)의 두가지 결과가 도출됩니다.

이처럼 참과 거짓을 나타내는데에 사용되는 자료형을 불리언 자료형이라고 합니다.

즉, 불리언은 단 두가지의 데이터 타입으로 구성된 것이죠.

 

* html 안에서 <를 사용하게 되면 문법으로 받아들여지기 때문에, <대신 &lt;을 사용하면 됩니다.

 

 

2. 조건문 기본

 

 

자 그럼 이제 불리언과 비교 연산자를 어디에 사용하는지 알아봅시다.

 

새로 연습 페이지를 먼저 만들어 줍니다.

그리고 조건을 걸어주겠습니다.

 

조건문의 간단한 형태는 if{} else{} 입니다.

위와 똑같은 코드에 1번과 2번 사이에 if(true)를, 3번과 4번 사이에 else를 넣어줄게요.

아래와 같이, true일때는 2번을 실행하고, 3번을 실행하지 않습니다. 즉 3을 건너뛰는 것이죠.

 

 

반대로 true대신 false를 넣어보겠습니다.

이번에는 2번을 건너뛰고, 3번으로 넘어갔죠.

 

 

조건문의 기본은 이 형식을 이해하는 것이라고 합니다.

If 바로 다음 괄호 안에 불리언 값이 true이면 다음 대괄호를 실행시키고,false이면 else부분을 실행시키는 것이죠.

지금은 true와 false가 적혀있어서 감이 안오지만, if(x=1)처럼 어떤 조건이 있다고 생각해보면 이해가 빠릅니다.

x가 1이면 그 다음의 스크립트를 실행시키면 되고, x가 1이 아니면 else부분의 스크립트를 실행하면 되겠죠.

 

 

3. 조건문의 활용

 

지난번 다크모드 적용했던 것 생각나시죠?

두 가지 버튼을 놓고 번갈아 누르는 것보다는, 버튼을 누를 때마다 형태가 변경되는 것이 훨씬 편할 것 같다고 했는데요.

 

그럼 조건문을 활용하여 스크립트를 만들 수 있겠네요.

night 일때는 배경을 블랙으로, day 일때는 흰색으로 변경하면 되니까요.

 

일단 새로운 버튼을 먼저 만들어 볼게요. 이름은 우선 auto로 지어보겠습니다.

 

 

위의 코드는 이해하기 쉽게 우선 night일때는 화면은 검정, 글씨는 흰색이 나오게, day일때는 그 반대가 나왔으

면 하는 소망을 적어놓은 if문입니다.

if night 이라는 것은 없기 때문에, 이제 코드를 완성해 보아야 겠죠.

 

우선, 현재 화면이 흰색이기 때문에, 버튼의 value는 night로 만들어 볼게요.

그리고 그 버튼을 클릭했을 때, night 모드가 실행되도록 해봅시다.

 

document.querySelector.value는 선택자의 value를 보여줍니다.

value를 night로 해놓았으니, 버튼에는 night가 표시되고, night 버튼을 누르면 다크모드로 바뀌네요.

 

우리가 원하는 것은 버튼을 한 번 더 누르면, 다시 데이 모드가 되는 것입니다.

그럼 night  버튼을 누르자마자, 버튼이 day로 변경되어야겠죠. 마지막에 value를 day로 바꾸는 명령을 추가해 줍시다.

버튼을 누르면 스위치가 바로 day로 변경됩니다!

 

그러면 다음 else 명령에는 무엇이 추가되어야 할까요?

네! 바로 선택자의 value를 night로 바꾸는 명령이 추가되면 됩니다.

document.querySelector('#auto).value='night'

 

너무 신기하죠?

오늘도 새로운 내용을 배웠습니다! 뿌듯하네요~