🔥 [UIUX] 0107 JAVASCRIPT Coding, 코딩 초급 5

✏️ 2025. 1월 7일 / javascript 초급 5

🎈 제어문 - else if
else if문은 두 가지 이상의 조건식과 정해놓은
조건을 만족하지 않았을 경우 실행할 코드로 이루어져 있습니다.
아래 기본형은 if문에 조건식1을 먼저 검사한 후,
만약 조건식1이 만족하지 않는다면 아래 else if문을 검사합니다.
조건식 1,2,3을 순차적으로 검사한 후 만족하는 조건식이 있다면
그에 해당하는 {}안에 코드를 실행시킨 후 종료합니다.
만약 조건식 중 하나도 만족하는 조건식이 없다면 마지막
else문을 실행시킨 후 종료합니다.

     [기본형]
     if(조건식1){
      조건식1이 만족하면 실행될 코드;
     }else if(조건식2){
      조건식2이 만족하면 실행될 코드;
     }else if(조건식3){
      조건식3이 만족하면 실행될 코드;
     }else{
      조건식 1,2,3이 모두 만족하지 않았을 경우 실행될 코드;
     }

⭐ 제어문 - 도전 실습!
사용자에게 현재 몇 월인지 묻고 해당하는 계절문구를 출력해주세요.

      var month = prompt("현재 몇 월입니까?");
      if (month >= 9 && month <= 11) {
        document.write("지금은 낭만의 계절 가을입니다! 🦋");
      } else if (month >= 6 && month <= 8) {
        document.write("🌊 지금은 서핑의 계절 여름입니다!");
      } else if (month >= 3 && month <= 5) {
        document.write("지금은 꽃놀이의 계절 봄입니다 🌼");
      } else {
        document.write("✨ 지금은 눈사람 만들기 좋은 계절 겨울입니다 ⛄");
      }

🎈 중첩 if문
조건문 안에 조건문이 있으면 중첩 if문이라고 부릅니다.
중첩 if문은 바깥쪽에 있는 조건문인 조건식1을 만족해야지만
안쪽에 있는 조건식2를 검사합니다.
만약 안쪽 if문의 조건식2를 만족하지 않을 경우
바깥쪽 조건문의 조건식1의 {}안의 코드만 실행 후 종료합니다.

      [기본형]
     if(조건식1){ //조건식1이 만족하면
      if(조건식2){ //조건식2를 검사한다. 조건식 2도 만족하면
        자바스크립트 코드; //해당 코드를 실행시킨 후 종료한다.
      }
      자바스크립트 코드; //조건식2가 만족하지 않는다면 여기만 실행시킨다.
      }

🎈 alert창에 대하여
alert메서드가 실행되면 메세지와 함께 '확인' 버튼이 나타나고 사용자가 확인 버튼을 누르게 되면
alert()메서드는 사용자에게 알려줘야 하는 내용을 나타내는 메세지 창으로 보통 경고창이라고 합니다.
alert메서드가 실행되면 메세지와 함께 '확인' 버튼이 나타나고 사용자가 확인 버튼을 누르게 되면
alert()메서드의 바로 아랫줄에 있는 코드를 실행합니다.

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

⭐ 중첩 if문 - 도전 실습!
긴단한 로그인 창을 하나 만들어보겠습니다.

      //가상의 회원 정보 (DB)
      var id = "ezen1004";
      var pw = "112233";
      //로그인 폼(prompt)
      var user_id = prompt("아이디를 입력해주세요.");
      var user_pw = prompt("비밀번호를 입력해주세요.");
      //사용자가 입력한 아이디와 DB에 저장된 아이디가 일치하는지 검사
      if (user_id == id) {
        //사용자가 입력한 비밀번호와 DB에 저장된 비밀번호가 일치하는지 검사
        if (user_pw == pw) {
          document.write(user_id + "님 정상 로그인 되었습니다 👑");
          //사용자가 입력한 비밀번호와 DB에 저장된 비밀번호가 일치하지 않을 경우
        } else {
          alert("비밀번호가 일치하지 않습니다.");
          location.reload();
        }
      } else {
        //사용자가 입력한 아이디와 DB에 저장된 아이디가 일치하지 않을 경우
        alert("아이디가 일치하지 않습니다.");
        location.reload();
      }

🎈 선택문
선택문인 switch문은 변수에 저장된 값과 switch문 안의 경우(case)의 값을 검사하여
변수와 일치하는 경우의 값이 있으면 그에 해당하는 코드를 실행시키고 종료합니다.
if문과 사용 용도는 비슷하지만 if문은 만족하는 데이터가 여러 개일 경우 사용하고,
switch문은 여러 경우의 값중에 일치하는 데이터를 찾아
그에 해당하는 코드를 실행시키고 싶을 때 사용합니다.
변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사합니다.
case의 값과 변수의 값이 일치하는 데이터가 있으면 그에 해당하는 코드를 실행시키고,
다음줄의 break문을 만나 종료합니다. break문은 강제 종료한다라는 의미입니다.
만약 case의 값과 변수의 값이 일치하는 데이터가 없다면,
맨 마지막 default문의 코드를 실행하고 switch문은 종료합니다.

      [기본형]
      var 변수 = 초깃값;
      switch(변수의 이름){
        case 값1 : 코드1;
        break;
        case 값2 : 코드2;
        break;
        case 값3 : 코드3;
        break;
        default : 코드4;
      }

⭐ 선택문 - 도전 실습!

      /*
      사용자에게 자주 이용하는 포털 사이트를 묻고,
      일치하는 케이스가 있으면 해당 사이트로 이동시키겠습니다.
      */
      var site = prompt(
        "네이버, 다음, 구글, 네이트 중 즐겨 이용하는 포털 검색 사이트는?"
      );
      // 웹 주소를 담을 변수
      var url;
      switch (site) {
        case "구글":
          url = "https://www.google.com";
          break;
        case "네이버":
          url = "https://www.naver.com";
          break;
        case "네이트":
          url = "https://www.nate.com";
          break;
        case "다음":
          url = "https://www.daum.net";
          break;
        default:
          alert("앗, 요청하신 사이트를 찾을 수 없어요..");
      }
      //만약 url에 값이 있다면 location(주소창)의 .href(연결경로)를 url로 이동시킨다.

🎈 반복문
반복문을 이용하면 코드를 원하는 횟수만큼 반복 실행시킬 수 있습니다.
예를 들어 '안녕하세요' 라는 문구를 100번 출력하고 싶다면,
출력문을 100번 반복해서 작성해야합니다.
하지만 반복문을 사용한다면 단 한줄의 출력문으로 100회를 반복하여 사용할 수 있습니다.
반복문의 종류로는 while문, do while문,for문이 있습니다.
🎈 while문
while문은 조건식을 만족할때까지 코드를 여러 번 반복 실행시킵니다.
여기서 조건식을 만족한다는 의미는 true에서 false가 될 때까지 반복시킨다는 의미입니다.
while문의 실행 순서는
1. 조건식을 검사하고, 만족하면
2. {}안에 있는 자바스크립트 코드와 증감식을 실행합니다.
3. 다시 조건식을 검사합니다.
증감식을 반복하다가 조건식이 true > false가 되면 그때 while문이 종료합니다.

      [기본형]
      var 변수 = 초깃값;
      while(조건식①,③){
      ②
        자바스크립트 코드;
        증감식;
      }

⭐ 반복문 - 도전 실습!

      //while문을 이용하여 1부터 30까지의 숫자 중 2의 배수만 출력하기
      var num = 1;
      while (num <= 30) {
        if (num % 2 == 0) {
          document.write(num, "<br/>");
        }
        num++;
      }

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)