🔥 [UIUX] 0108 JAVASCRIPT Coding, 코딩 초급 6

✏️ 2025. 1월 8일 / javascript 초급 6

🔔 도전! while문 실습
20부터 10까지의 숫자 중 짝수면 파란색, 홀수면 빨간색으로 출력해주세요.

      var i = 20;
      while (i >= 10) {
        if (i % 2 == 0) {
          document.write("<p class='blue'>" + i + "</p>");
        } else {
          document.write("<p class='red'>" + i + "</p>");
        }
        i--;
      }

👑 반복문 - do while문
while문의 경우 조건식의 만족 여부를 먼저 검사한 후,
만족할 경우 안에 있는 코드를 반복 실행하지만
do while문은 먼저 코드를 한번 실행한 후, 조건식을 검사합니다.

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

      var i = 10;
      do {
        document.write("hello");
      } while (i < 5);

❤️‍🔥 반목문 - for문
for문도 while문과 마찬가지로 코드를 원하는 횟수만큼 반복 실행 하고 싶을 때 사용합니다.
실제 실무에서 코드를 작성할 때에는 보통 while문 보다는 for문을 많이 사용합니다.
그 이유는 for문의 문법이 훨씬 간결하고 변수가 반복문의 안에 있어 안전하기 때문입니다.
(변수의 충돌 이슈가 적어집니다.)

      [기본형]
      for(초깃값; 조건식; 증감식){
        자바스크립트 코드;
      }
      [실행순서]
      1. 초깃값 검사를 합니다.
      2. 조건식을 검사합니다.
      3. 자바스크립트 코드를 실행합니다.
      4. 증감식을 실행합니다.
      5. 다시 한번 조건식을 검사합니다.
      (true에서 false가 될때까지 반복합니다.)

      for (var i = 1; i <= 10; i++) {
        document.write("반복" + i + "<br/>");
      }
      document.write("-----------구분선----------", "<br/>");
      //for문을 이용하여 1부터 100까지 숫자 중 5의 배수일 경우 빨간색, 7의 배수는 파란색, 5와 7의 배수는 핑크색으로 만들어주세요.
      for (var num = 1; num <= 100; num++) {
        // 5의 배수이지만 7의 배수는 아니어야 한다.
        if (num % 5 == 0 && num % 7 != 0) {
          document.write("<p class='red'>" + num + "</p>");
          // 7의 배수이지만 5의 배수는 아니어야 한다.
        } else if (num % 7 == 0 && num % 5 != 0) {
          document.write("<p class='blue'>" + num + "</p>");
        } else if (num % 5 == 0 && num % 7 == 0) {
          // 5의 배수이면서 7의 배수인 숫자 (35, 70)
          document.write("<p class='pink'>" + num + "</p>");
        }
      }

👑 break, continue
🗨️ break문
반복문인 while문, for문에서 break문을 실행하면
조건식과 관계없이 반복문을 종료합니다.
즉, break문은 반복문을 강제로 종료시키는 '강제 종료문' 입니다.

      [기본형]
      1. while문
      --------------------------------------------
      var 변수 = 초깃값;
      while(조건식){
      break; > 반복문 강제 종료
      자바스크립트 코드;
      증감식;
      }

      2. for문
      for(초깃값; 조건식; 증감식){
      break; > 반복문 강제 종료
      자바스크립트 코드;
      }

🗨️ continue문
continue은 반복문 안에서만 쓸 수 있습니다.
while문에서 사용할 경우 continue문 다음에 오는 코드는 건너뛰고
바로 조건식으로 가서 조건 검사를 합니다.
for문에서 사용할 경우 continue문 다음에 오는 코드는 건너뛰고
바로 '증감식'으로 이동하여 증감 연산을 실행합니다.
즉, while문에서 continue문은 다음줄의 코드를 무시하고 조건식을 검사한다. 라는 의미를 담고있으며,
for문에서 continue문은 다음줄의 코드를 무시하고 증감식을 실행한다. 라는 의미를 담고 있습니다.

  [기본형]
  1. while문
  --------------------------------------------
  var 변수 = 초깃값;
  while(조건식){
  continue; > 아래 코드와 증감식을 무시하고 조건식을 검사한다. 
  자바스크립트 코드;
  증감식;
  }
  2. for문
  ---------------------------------------------
  for(초깃값; 조건식; 증감식){
  continue; > 아래 코드를 무시하고 증감식을 실행합니다.
  자바스크립트 코드;
  }

      //break문
      for (var i = 1; i <= 10; i++) {
        if (i == 6) break; //i가 6이 되면 강제종료
        document.write(i, "<br/>");
      }
      document.write("-----------구분선--------------", "<br/>");
      //continue문
      for (var a = 1; a <= 10; a++) {
        if (a % 2 == 0) continue; //짝수면 코드를 건너뛰고 증가합니다.
        document.write(a, "<br/>");
      }

👑 중첩 for문
for문 안에 for문을 사용한 것을 중첩 for문이라고 합니다.
중첩 for문은 바깥쪽 for문이 한 번 실행되면 안쪽의 for문을 만나
안쪽 for문이 true > false가 될때까지 반복 실행합니다.
안쪽 for문이 false가 되면 바깥쪽 for문의 증감식으로 이동하여
증감 연산을 진행하고, 또 조건 검사를 합니다.
조건이 만족하면 안쪽의 for문을 다시 만나 초기값 > 조건식 > 코드실행 > 증감식을
또 다시 true > false가 될 때까지 반복합니다.
결국 바깥쪽 for문이 false가 되면 그때 중첩 for문이 종료됩니다.

    [기본형]
    for(초깃값; 조건식; 증감식){ //바깥쪽 for문
      for(초깃값; 조건식; 증감식){ //안쪽 for문
        자바스크립트 코드;
      }
    }

      for (var i = 1; i <= 3; i++) {
        for (var k = 1; k <= 2; k++) {
          document.write(i + "행" + k + "열" + "<br/>");
        }
        document.write("========구분선=======", "<br/>");
      }

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