국비수업5(반복문,다중반복문)

자바스크립트&제이쿼리 국비수업(그린컴퓨터학원) 내용 중 반복문에 대해서 정리해보자

반복문

• 반복문 : 조건이 참일 떄 같은 동작을 여러 번 반복하는 문
• while문 : while(조건){할일}

var a = 0;
while(a < 3) {
    document.writeln("<p>javascript!<p>");
    a++;
    }

만일
while(true){
   명령문
    }
명령이 무한 반복되는 상태가 된다 

• for문 : for(

for(var a=0; a<3; a++){
    document.write("<p>javascript!</p>");
 }

//응용
for(var a=0; a<15; a++){
    document.write("<p style='font-size:"+(a+10)+"px'>javascript!</p>");
}

for(var a=0; a<10; a++){
   document.write(a+"<br>");
}

활용 예시

var dan = Number(prompt("구구단 몇 단을 출력할래요?"));
    document.write("<ul class='gugudan'>");
    for(var i=1; i<=9; i++){
        document.write("<li>"+dan+"x"+i+"="+(i*dan)+"</li>");
    }
    document.write("</ul>");

문제

• 반복문을 사용해서 구구단 2단을 웹문서에 나타내세요

• 양식
  2 X 1 = 2
  2 X 2 = 4
  2 X 3 = 6
  2 X 4 = 8
  2 X 5 = 10
  2 X 6 = 12
  2 X 7 = 14
  2 X 8 = 16
  2 X 9 = 18

• 내가 작성한 코드

for(var a=1; a<10; a++){
     document.write("2"+"x"+a+"="+2*a+"<br>");
   }

• 선생님이 작성한 코드

 for(var i=1; i<10; i++){
     document.write("2x"+i+"="+2*i+"<br>");
  }

for문 안의 for문(다중반복문)

문법

• 패턴을 찾아라 : 더 많이 보이는 구문을 안 쪽으로 넣어라

for(시작값; 최종값; 증감식) {
        for(시작값; 최종값; 증감식){
            반복할 문장
       }
     }

활용

for(var i=0; i<2; i++){
    for(var k=0; k<3; k++){
       document.write(i+"/"+k+"<br>");
    }
}

문제

  [1] 123456789

  [2] 123456789

  [3] 123456789

  [4] 123456789

  [5] 123456789

를 화면에 출력하는 코드를 짜보세요

for(let i = 1; i <= 5 ; i++){
  document.write("<h2>[  "+i+"  ]");
  for(let c = 1; c <= 8 ; c++){
      document.write(c); 
  }
      document.write("</h2>");
}

다중 반복문을 이용한 구구단 출력

for(a=2; a<=9; a++) {
    document.write("<h2>");
    document.write(" [");
    document.write(a);
    document.write("단 ] ");
    document.write("</h2>");
 for(b=1; b<=9; b++){
    document.write(a);
    document.write(" * ");
    document.write(b);
    document.write(" = ");
    document.write(a*b);
    document.write("<br>");
}
}

😂 코드를 줄여보자

for(a=2; a<=9; a++) {
    document.write("<h2>[ "+a+" 단] </h2>")
  for(b=1; b<=9; b++){
    document.write(a+" * "+b+" = "+(a*b)+"<br>")
  }
}

😂 출력결과