[자바스크립트] - ★ 제어문 if / else문 / else if( )문 / 중첩 if문

< 제어문 >
      
제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다. 
제어문에는 조건식의 만족여부에 따라 코드를 제어하는 '조건문'과 조건문과 변수의 일치에 따라 코드를 제어하는 '선택문',
특정코드를 원하는 횟수만큼 반복실행하는 '반복문'이 있다. 

 

*삼항조건연산자보다 코드가 길어질 때 if문을 사용한다. 삼항조건연산자는 코드 한줄밖에 못쓰고 if는 여러 개 쓸 수 있다.

 

if	if(조건식){ 조건식이 만족했을 경우 실행할 코드; }	if문은 조건식을 만족할 경우에만(true) 코드를 실행
else문	if(조건식){ 조건식이 만족했을 경우 실행할 코드; } else{조건식이 만족하지 않을 경우 실행할 코드;}	if문의 조건식이 만족하지 않았을 경우 코드를 실행하는 문장
else if( )문	if(조건식1){ 조건식1이 만족하면 실행할 코드;} else if(조건식2){ 조건식2가 만족하면 실행할 코드; } else if(조건식3){ 조건식3이 만족하면 실행할 코드; }	else if문은 가장 위에 있는 조건식 1부터 조건식 3까지 모두 차례로 검사하면서 만족하는 값이 나오면 그에 해당하는 코드를 실행하고 조건문을 종료한다. 조건식 중 만족하는 값이 하나도 없으면 else문의 코드를 실행하고 조건문을 종료한다.
중첩 if문	if(조건식1){            if(조건식2){             조건식2가 만족하면 실행될 코드             }else{              조건식2가 만족하지 않았을 때 실행될 코드             }           }else{조건식1이 만족하지 않았을 때 실행될 코드           }	조건문 안에 조건문이 들어있는 것

---

if -조건문

 

: 만약에

 if문은 조건식을 만족할 경우에만(true) 코드를 실행한다. 

조건식은 앞에서 배웠던 Boolean데이터와 마찬가지로 어떤 데이터를 입력해도 true / false 값을 반환한다. 
if문이 조건식을 만족했을 경우 { }안에 있는 코드를 실행하고 종료한다. 만약 조건문이 만족하지 못한다면 {}안에 있는 코드는 실행하지않고 그냥 종료한다.  

 

* if뒤에 ( )소괄호 자리는 Boolean 자리라서 Boolean의 속성을 그대로 가져오게 된다. 

Boolean()메서드에서는 0, null, undefined, ""(빈 문자)들은 false로 나오게 된다. 

빈 문자를 를 제외하고는 모든 값을 true로 반환한다

 

 [기본형]

-  if(조건식){ 조건식이 만족했을 경우 실행할 코드; } -> 가장 기본

-  if(조건식) 조건식이 만족했을 경우 실행할 코드;    -> 조건식이 무조건 만족해야하고 뒤에 실행할 코드가 무조건 한줄이여야한다. / 응용버전

 

※ { }뒤에 ; 붙지않는다 주의 

 

* - if문을 단독으로 하나만 쓸 때는 뒤에 { }을 생략할 수 있다. 

   if (url) location.href = "https://" + url;  

      var a = 10;

      var b = 3;

      if (a > b) { document.write("a는 b보다 크다");  } 

       //a가 b보다 크다라는 식이 true이면 브라우저에 'a는 b보다 크다' 라고 적어라 라는 뜻

조건식이 true니깐 아래와 같이 브라우저에 출력된다. 

 

      Boolean(0); //false

      Boolean("하이"); //true

   

      if ("하이") {

        document.write("a는 b보다 크다");

      } //if 뒤에는 Boolean 자리라서 Boolean에 문자 넣으면 true가 되니깐 if에도 문자 넣으면 true가 된다.

      if ("") {

        document.write("a는 b보다 크다");

      } //Boolean에 빈문자 넣으면 false가 되니깐 if에도 빈문자 넣으면 false가 된다.

Boolean의 속성을 그대로 가져오기때문에 문자를 넣으면 true로 반환되고 빈문자를 넣으면 false로 반환되는 것을 볼 수 있다. 

"하이"는 true라 브라우저에 "a는 b보다 크다" 문구가 출력되고

"" 빈 문자는 false라서 브라우저에 문구가 출력되지 않는다. 

---

 if (baseFont <= 8) {

              return false;

            }

            baseFont--;

중첩 if 안의 if문에서 

baseFont가 8보다 같거나 작으면 그 아래 줄의 코드 return false를 실행한다.

baseFont가 8보다 같거나 작지않고 크다면 밖의 baseFont를 감소 시킨다. 

조건문이 만족하면 { }안의 코드를 실행하고 아니면 그 밖의 코드를 실행

 

---

예제)

 // 사용자가 하루에 만 보 이상 걸을 때 브라우저에 문구 출력

      var walkAmount = prompt("하루에 몇 보를 걸으시나요?");

      if (walkAmount >= 10000) {

        document.write("좋은 습관을 가지고 계시네요!", "<br>");

      }

 

---

예제)

//사용자에게 하루 통화량이 얼마나 되는지를 묻고 60분 이상이면 '많이 통화하는 편이네요'라고 화면에 출력

      var tellTime = prompt("하루 통화량이 몇 분정도 되시나요?");

      if (tellTime >= 60) {

        document.write("많이 통화하는 편이네요");

      }

---

 else  

: 그렇지 않으면  /  앞에 있는 게 다 맞지 않으면, 

if문의 조건식이 만족하지 않았을 경우 코드를 실행하는 문장. if문과 세트로 쓰인다

 [기본형]
if(조건식){ 조건식이 만족했을 경우 실행할 코드; } else{조건식이 만족하지 않을 경우 실행할 코드;}
-> if 조건식이 만족하지 않을 경우 else 안의 코드를 실행해라 
     

 //사용자에게 하루 통화량이 얼마나 되는지를 묻고 60분 이상이면 '많이 통화하는 편이네요'라고 화면에 출력

      var tellTime = prompt("하루 통화량이 몇 분정도 되시나요?");

      if (tellTime >= 60) {

        document.write("많이 통화하는 편이네요");

      } else {

        document.write("많이 통화하지 않는 편이네요");

      }

 

---

 var num = prompt("당신이 좋아하는 숫자는?7");

      //if - 짝수일 경우 else -  홀수일 경우 num을 2로 나눴을 때 나머지값이 0과 같다면(짝수),

      if (num % 2 == 0) {

        document.write("당신이 좋아하는 숫자는 짝수입니다.");

      } else {

        document.write("당신이 좋아하는 숫자는 홀수입니다.");

      }

* 짝수 쓰는 법 = 변수명 % 2 == 0    -> 2로 나눴을 때 나머지가 0과 같다면, 이라는 뜻

 

 

---

 else if ( ) 문

: 그렇지 않으면

 

여러 개의 경우가 필요할 경우.

두가지 이상의 조건식과 정해놓은 조건을 만족하지 않았을 경우 실행되는 코드로 이루워져 있다.
else if문은 가장 위에 있는 조건식 1부터 조건식 3까지 모두 차례로 검사하면서 만족하는 값이 나오면

그에 해당하는 코드를 실행하고 조건문을 종료한다.
조건식 중 만족하는 값이 하나도 없으면 else문의 코드를 실행하고 조건문을 종료한다.  

 [ 기본형 ]
 if(조건식1){ 조건식1이 만족하면 실행할 코드;}

else if(조건식2){ 조건식2가 만족하면 실행할 코드; }

else if(조건식3){ 조건식3이 만족하면 실행할 코드; }

else{모든 조건이 만족하지 않았을 경우 실행할 코드;}

 

 

else if 결과값들

 //범위를 지정할 땐 논리연산자 &&and 사용한다. 3보다는 커야하는 값을 일치해야하고 5보다 작은 값을 일치해야하니깐.       교집합된 부분을 설정해준다.

      var mon = prompt("몇 월에 태어나셨나요?");

      if (mon >= 3 && mon <= 5) {

        document.write("꽃피는 봄에 태어나셨네요");

      } else if (mon >= 6 && mon <= 8) {

        document.write("청량한 여름에 태어나셨네요");

      } else if (mon >= 9 && mon <= 11) {

        document.write("시원한 가을에 태어나셨네요");

      } else {

        document.write("새하얀 겨울에 태어나셨네요");

      } //겨울은 12,1,2라서 범위를 설정할 수 없기에 else문에 담는다

 

** 범위 설정 **

범위를 지정할 땐 논리연산자 &&(and)를 사용한다. 

3이상 5미만이라고 할 때,

mon >=3 은 3,4,5,6,7,8.... 이고 mon <=5 는 5,4,3,2,1,0 인데 이 둘의 교집합 부분이 되야하기 때문에 mon >=3과

mon<=5 둘 다를 일치해야하는 &&(and)를 사용한다. 

 

 

---

  중첩 if 문  

:조건문 안에 조건문이 들어있으면 이것을 '중첩 if문'이라고 한다.  * { }  괄호 닫히는 부분 주의하기 

 [ 기본형 ]
          if(조건식1){
           if(조건식2){
            조건식2가 만족하면 실행될 코드
            }else{
             조건식2가 만족하지 않았을 때 실행될 코드
            }
          }else{조건식1이 만족하지 않았을 때 실행될 코드
          }

 

 

 [기본형]

          if(조건식1){

           if(조건식2){

            조건식2가 만족하면 실행될 코드

            }else{

             조건식2가 만족하지 않았을 때 실행될 코드

            }

          }else{조건식1이 만족하지 않았을 때 실행될 코드

          }

 

파란 박스 안에 주황 박스 구조로 이루어져 있는 것이다. 

- if 조건식 1이 일치하면 하늘색 화살표로 그 뒤 { } 안에 들어가고, 조건식 1이 일치하지 않는다면 빨간색 화살표를 따라 아래의 else 로 가게 된다. 

 

- 조건식 1이 일치하게 되면 하늘색 화살표로 들어가서 다시 조건식 2가 일치하게 되면 주황색 화살표를 따라가고,

일치하지 않으면 그 뒤에 파란색 화살표 else를 따르게 되는 것이다. 

첫번째 if의 대괄호는 마지막 else 앞에서 닫힌다. 

---

   //사용자에게 입력받은 회원 정보

      var userId = prompt("아이디를 입력");

      var userPw = prompt("비밀번호 입력");

      //아이디가 일치했을 경우 else는 아이디가 일치하지 않았을 경우

      if (id === userId) {

        if (pw === userPw) {

          document.write(userId + "님 환영합니다.");

        } else {

          alert("비밀번호가 일치하지 않습니다");

          location.reload();

        }

      } else {

        alert("아이디가 일치하지 않습니다"); //경고창

        location.reload(); //새로고침

      }

위에서 아래 순서대로 코드를 읽어나가기 때문에 먼저 prompt로 사용자에게 물어본다. 

이때 만약 아이디를 틀렸더라도 일단 비밀번호 입력까지 prompt로 받고 그 뒤 if 문으로 넘어가게 된다.