Javascript : 제어문 - 조건문 (if, else, if else, 중첩 if문)

제어문

프로그램 흐름(알고리즘)을 제어하도록 도와준다.
제어문에는 조건식의 만족여부에 따라 코드 제어하는 조건문과
변수의 값 일치하는지 여부에 따라 코드 제어하는 선택문과
코드 원하는 횟수만큼 반복시키는 반복문이 있다.

조건문

true false에 따라 코드 제어
if, else, else if문이 있다

if 문

true일 경우 코드 실행
Boolean()메서드와 마찬가지로 true false 값만 반환한다.

[기본형]
if(조건식){조건식 true일 경우 실행 코드};

<script>
  // 걸음수 입력 값 10000 이상이면

  var walkAmount = prompt("하루에 몇 보를 걸으시나요?", "0");
  if (walkAmount >= 10000) {
    document.write("매우 좋은 습관을 가지고 있으시군요!", "<br/>");
  }

  /* 질의응답 창으로 "하루 통화량은 몇 분인가요?" 묻고 60분 이상이면
  "많이 통화하는 편이네요." 출력*/

  var call = prompt("하루 통화량은 몇 분인가요?");
  if (call >= 60) {
    document.write("많이 통화하는 편이네요.");
  }

  //사용자로부터 이름을 입력받아 if문 실행여부 확인
  var userName = prompt("당신의 이름은?");

  if (userName) {
    document.write("사용자 이름:" + userName + "입니다.", "<br/>");
  }
</script>

else 문

if문의 조건식이 false일 경우 실행되는 코드 제어
else문은 단독으로 쓸 수 없으며 if문 다음에 등장
즉 true false에 따라 두가지 결과값이 나온다

[기본형]
if(조건식){
조건식이 true일 경우 실행 코드;}
else{
false일 경우 실행 코드
}

confirm()

컨펌창이라고 하며 사용자로부터 확답을 받는 확인 취소 창을 말함

[기본형]
confirm("메세지")

<script>
  var num = prompt("당신이 좋아하는 숫자는 무엇입니까", "0");
  if (num % 2 == 0) {
    // 짝수면 실행될 코드
    document.write("당신이 좋아하는 숫자는 짝수입니다.", "<br/>");
  } else {
    // 홀수면 실행될 코드
    document.write("당신이 좋아하는 숫자는 홀수입니다.", "<br/>");
  }

  // 회원에게 탈퇴 여부를 묻는 컨펌창

  var result = confirm("정말 회원을 탈퇴하시겠습니까?");

  if (result) {
    document.write("회원 탈퇴 완료되었습니다.");
  } else {
    document.write("탈퇴가 취소되었습니다.");
  }
</script>

연산자 실습

<script>
  //하루 지출 내역이 아래와 같을 때
  //하루 지출 비용의 합계를 구하고 적정 지출 만원의 초과 여부 출력
  
  var price1 = 3000;
  var price2 = 6000;
  var price3 = 3000;

  // 합계
  var total = price1 + price2 + price3;

  //초과금액
  var over = total - 10000;

  var result =
    total > 10000
      ? over + "원 초과! 돈 관리 잘하세요."
      : "돈 관리 잘했어요!";

  document.write(result); // 2000원 초과! 돈 관리 잘하세요.
</script>

유연한 적정체중 계산기

<script>
  //사용자의 정보
  var user_name = prompt("이름을 입력해 주세요.");
  var user_height = prompt("키를 입력해 주세요.");
  var user_weight = prompt("체중를 입력해 주세요.");

  // 평균체중 공식
  var normalweight = (user_height - 100) * 0.9;
  var result2 = user_name + "님의 적정체중 : " + normalweight + "입니다.";

  // +-5kg의 오차범위를 가진 평균체중 계산기

  var result =
    user_weight >= normalweight - 5 && user_weight <= normalweight + 5;

  result = result
    ? user_name + "님은 적정 체중입니다"
    : user_name + "님은 적정체중이 아닙니다";

  document.write(result, "<br/>");
  document.write(user_name + "님의 몸무게 : " + user_weight, "<br/>");
  document.write(result2, "<br/>");
</script>

else if

두가지 이상의 조건식과 정해놓은 조건 만족하지 않을 때 실행할 코드
if가 안되면 else if 실행, else if가 전부 안되면 마지막으로 else 실행

[기본형]
if(조건식1){조건식1 만족시 실행 코드;
}else if(조건식2){조건식2 만족시 실행 코드;
}else if(조건식3){조건식3 만족시 실행 코드;
}else{조건식 모두 만족하지 않을 때 실행 코드;}

<script>
  //현재 몇월인지 묻고 해당하는 계절 문구 출력
  var month = prompt("현재 몇 월입니까?");

  if (month >= 9 && month <= 11) {
    document.write("독서의 계절 가을이네요", "</br>");
  } else if (month >= 6 && month <= 8) {
    document.write("서핑의 계절 여름이네요", "</br>");
  } else if (month >= 3 && month <= 5) {
    document.write("꽃의 계절 봄이네요", "</br>");
  } else {
    document.write("눈사람의 계절 겨울이네요", "</br>");
  }
</script>

중첩 if 문

조건1 만족해야 조건2 실행하고, 조건 2 만족하지 않으면 1만 실행하고 종료

[기본형]
if(조건식1){
if(조건식2){코드;
}
코드;
}

alert()

사용자에게 알려줘야 하는 내용을 나타내는 메세지 창
메세지와 확인버튼이 나타나고 확인 버튼을 누르면 alert 아랫줄의 코드 실행

<script>
  //회원 정보(DB)
  var id = "ezen1004";
  var pw = "112233";

  //로그인 폼(prompt)
  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>