웹 프로그래머(웹 개발자)가 되어보자 - 11

5-1. 비교문

앞 시간에서는 변수, 자료형태에 대해서 알아보았습니다. 
물론 "비교연산자"라는 기호를 통해서 논리값을 만드는 방법도 살펴보았습니다.
앞으로 살펴볼 비교문은 프로그램의 대부분이라고 할 정도로 안쓰이는 곳이 없습니다.

비교문이 필요한 것은 다양한 상황과 다양한 데이터가 있기 때문 입니다.
우리는 사탕을 한개 사더라도 가격, 맛 그리고 판매하는 곳 등 다양한 내용(자료, 데이터)을 가지고 고민(비교문) 합니다.
이처럼 다양한 데이터를 조건에 맞게 처리하기 위해서 비교문이 필요합니다.
비교문의 첫번째 시간으로 대표적으로 사용되는 if에 대해서 살펴보겠습니다.

if는 "만약"이라는 뜻을 가지고 있으며 자바스크립트의 예약어 입니다.
예약어라는 뜻은 우리가 앞시간에서 사용한 var, const 등 이미 컴퓨터에 의해서 정의된 일종의 사용해서는 안되는 형태의 값, 즉 규칙입니다.
var var = 10 을 입력하여보세요. 빨강색 오류를 만나게 될 것 입니다.

우리는 이 if를 잠깐 만나보았던 적이 있습니다.
사용법은 사실 어렵지 않습니다.
console.log를 사용한 것 처럼 사용할 데이터를 소괄호에 넣어주면 됩니다.
소 괄호에는 논리형 자료가 필요합니다.
조건에 일치한 뒤의 할일을 적고싶으면 대괄호{} 를 사용하여 범위를 지정하여 줍니다.
아래 예문을 살펴보겠습니다.

if(true){  //소괄호에 논리형자료를 넣고, 대괄호 { 을 입력하여 조건문의 시작을 알립니다.
    console.log('true이면 실행');  //내용을 입력합니다. 여러개를 입력 할 수 있습니다.
} // 조건문의 끝을 알리기위해 뒤에 대괄호 }을 입력 해 줍니다.
if(false){
    console.log('false이면 실행');
}

true인 부분만 실행되었습니다.

위 내용을 실행하여 보면 "true이면 실행" 이라는 내용만 출력 된 것을 볼 수 있습니다.
소괄호에서의 조건이 참(true)인 경우에 if문은 동작 합니다.
그렇다면 데이터가 과연 단순하게 true와 false만 존재할까요?
그렇지 않습니다.
논리값을 살펴본 바에 의하면 논리값 true와 false는 "비교연산자"에 의해서 더 많이 만들어지게 됩니다.
아래내용을 실행하여 봅니다.

if(5>=1){
    var text= '첫번째 실행';
    console.log(text);  //대괄호가 끝나는 곳 까지 여러내용을 입력 할 수있습니다.
}
if(5<1){
    var text= '두번째 실행';
    console.log(text);
}

비교 연산자에 의해서 값이 만들어진 후 실행되었습니다.

비교연산자를 통해서 논리값을 만들어 보았습니다.
"첫번째 실행"이라는 값만 출력이 되었습니다. 
왜냐하면 첫번째 값만 참(true)이기 때문 입니다.

조건을 조금 더 멋있게 바꾸어 보겠습니다.
기존에 배웠던 내용을 추가하여봅니다.
이해를 돕기 위해 몇가지 문제를 살펴보겠습니다.

* 문제 : 5-1-1
"prompt로 입력된 값이 20보다 크면 alert을 통해서 20보다 크다고 알려주세요"

반드시 직접 입력해 보아야 합니다. 고민해 보고 연습해 보아야 합니다.
실패하더라도 최소한 1시간 이상은 직접하여보세요.

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

아래는 위 문제에 대한 답 입니다.

* 답

var number = prompt( '숫자를 입력하여주세요, 20보다 작은값이면 좋습니다.', 0);
number = Number(number);
if(number > 20){
    alert('20보다 큰 값이 들어왔습니다 : ' + number);
}
if(number <= 20){
    alert('20보다 작거나 같은값이 들어왔습니다 : ' + number);
}

제법 뭔가 동작하는 모양의 조건문을 포함한 프로그래밍이 되었습니다.
"비교연산자" 가 등장하였으며 Number라는 함수도 등장 하였습니다.
prompt를 통해서 입력받은 데이터는 "문자" 입니다. 그러므로 숫자로 변환하여 비교 하였습니다.
다른 문제를 풀어보겠습니다.

* 문제 : 5-1-2
"입력된 문자를 받은뒤 a라는 문자가 반드시 있어야 하면서 길이가 4자리보다 크면 성공이라는 메시지를 띄우게 해 주세요."

내용이 조금 어렵습니다.
여기서의 힌트는 대괄호{} 입니다.
대활호에는 원하는 내용을 쓸 수 있다고 하였습니다.
..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

아래는 위 문제에 대한 답 입니다.
* 답

var text = prompt( '문자를 입력하여주세요. a를 반드시 입력해야되며, 길이는 4자리 이상이어야 합니다.', 0);
if( text.includes('a') ){
    var check = text.length;
    if(check > 4){
        alert('성공 : ' + text);
    }
    if(check <= 4){
        alert('a는 있지만 4자리보다 작습니다. : ' + text);
    }
}
if( !text.includes('a') ){
    alert('a를 포함하고 있지 않습니다 : ' + text);
}

if의 조건뒤의 대괄호 안에 다양한 내용이 입력되어 있습니다.
if에서의 소괄호는 논리값이 필요하며 논리값에 일치되면 대괄호의 내용을 수행합니다.
위 예문처럼 if조건 뒤에 대괄호에는 필요한 내용을 쓸 수 있습니다.

앞선 시간에 살펴보았던 부정형 기호인 느낌표(!) 가 나왔습니다.
우리는 느낌표(!)를 비교연산자에서 사용해본적이 있습니다.  
 * 예 : console.log(1 != 0);   //1과 0은 같지 않는가에 대한 부등연산자입니다.

그런데 단순하게도 논리값에 붙이면 반대의 값을 표현하게 됩니다.
아래내용을 실행하여보세요.

console.log(!true);
console.log(!faluse);

5-1-2번문제가 조금 어려웠습니다.
반드시 눈에 익을 때 까지 연습을 하여야 합니다.

이번시간에는 if 비교문에 대해서 간단히 살펴 보았습니다.
다음시간에도 이어서 비교문에대해서 계속 살펴 보겠습니다.