본문 바로가기

Javascript/javascirpt

조건문(if문, else if 문)

반응형

조건문이란?

조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다. 예를 들어 질의응답 창을

이용해 방문자가 좋아하는 숫자를 입력받는다. 이때 입력된 값을 2로 나누어 나머지 값이 0이면 "당신의 좋아하는

숫자는 짝수입니다."라고 출력하게 하고, 아닐 경우에는 "당신이 좋아하는 숫자는 홀수입니다."라고 출력하게 한다고

하자. 이렇게 수를 나눈 나머지 값에 따라 다른 결과를 출력하게 하려면 조건문을 사용해야 한다.

조건문의 종류에는 if 문, else 문 그리고 else if 문이 있다.

 

if 문

if 문은 조건식을 만족(true)할 경우에만 코드를 실행한다. 조건식은 Boolean() 내장 메서드와 마찬가지로 그 어떤 

데이터를 입력해도 true 또는 false를 반환한다.

 

ex1)

<script>
  var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?", "")

  if(walkAmount >= 10000){
    document.write("매우 좋은 습관을 지니고 계시는군요!!", "<br>");
  }
  document.write("======= The End =======");
</script>

prompt함수 : prompt("질문", "답변") 질문과 답변으로 질의응답 창을 나타낸다.

 

출력화면

11000보 입력시

1000보 입력시

ex2)

<script>
  var userName = prompt("방문자의 이름은?", "");

  if(userName){
    document.write(userName+"님 반갑습니다! 방문을 환영합니다.");
  }
</script>

출력화면

 

else 문

else 문은 조건식을 만족할(true) 경우와 만족하지 않을(false) 경우에 따라 실행되는 코드가 달라진다. 즉, 두 가지 결과가

나올 수 있다.

 

ex)

<script>
  var num = prompt("당신이 좋아하는 숫자는?", "");

  if(num % 2 == 0){
    document.write("당신이 좋아하는 숫자는 짝수입니다.");
  }else{
    document.write("당신이 좋아하는 숫자는 홀수입니다.");
  }
</script>

출력화면

 

 

else if 문

else if 문은 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않을 때 실행되는 코드로 이루어져 있다.

 

ex)

<script>
  var mon = prompt("현재는 몇 월입니까?", "");

  if(mon >= 9 && mon <= 11){
    document.write("가을");
  }else if(mon >= 6 && mon <= 8){
    document.write("여름");
  }else if(mon >= 3 && mon <= 5){
    document.write("봄");
  }else{
    document.write("겨울");
  }
</script>

출력화면

중첩 if 문

조건문 안에 조건문이 있으면 중첩 if문이라고 한다. 중첩 if문은 바깥쪽에 있는 조건문인 조건식1을 만족해야만 안쪽에 있는 조건문인 조건식2를 검사 한다. 만일 안쪽 if문의 조건식2를 만족하지 않으면 바깥쪽 조건문인 조건식 1의 중괄호 안에 있는 코드만 실행하고 종료된다.

 

ex)

<script>
  var id = "hello";
  var pw = "112233";

  var user_id = prompt("아이디는?", "");
  var user_pw = prompt("비밀번호는?", "");

  if(id == user_id){
    if(pw == user_pw){
      document.write(user_id+"님 반갑습니다!");
    }else{
      alert("비밀번호가 일치하지 않습니다.");
      location.reload();
    }
  }else{
    alert("아이디가 일치하지 않습니다.");
    location.reload();
  }
</script>

location.reload() : 브라우저 새로 고침

 

출력화면

둘다 일치 할 경우

아이디 불일치

비밀번호 불일치

 

 

반응형

'Javascript > javascirpt' 카테고리의 다른 글

배열  (0) 2020.07.25
반복문  (0) 2020.07.20
조건문(if문, else if 문)  (0) 2020.06.18
연산자  (0) 2020.06.17
변수  (0) 2020.06.13
Javascript 정의와 외부로 연결하기  (0) 2020.05.23