01. 1부터 10까지 출력하기(초기값0)
for()문을 이용하여 1부터 100까지 출력하는 예제입니다.
{
for(let i=0; i<10; i++){
console.log(i);
}
}
1. i가 0으로 초기화됩니다.
2. 조건 i < 10을 만족하므로 반복 부분이 실행됩니다.
3. console.log(i);를 통해 현재 i의 값인 0이 콘솔에 출력됩니다.
4. i++에 의해 i는 1로 증가합니다.
5. 조건 i < 10을 다시 확인하고, 조건이 만족하므로 다시 반복 부분이 실행됩니다.
6. 위 과정을 반복하여 i가 9까지 증가하면서 0부터 9까지의 숫자가 순서대로 콘솔에 출력됩니다.
7. i가 10이 되면 조건 i < 10을 만족하지 않으므로 루프가 종료됩니다.
결과 확인하기
02. 0부터 25까지 출력하기(초기값0)
0부터 25까지의 숫자를 출력하면서 초기값을 0으로 설정하는 방법은 다음과 같습니다.
{
for(let i=0; i<24; i++){
console.log(i+2);
}
}
이i는i <= 25를i의 값이 1씩 증가하며, console.log(i)를
만약 초기값을 0으로 설정하고 1부터 25까지 출력하려면 다음과 같이 코드를 수정할 수 있습니다.
결과 확인하기
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
03. 1부터 20까지 출력하기(짝수만)(3가지)
이 코드는 반복문을 사용하여 1부터 25까지의 숫자를 출력합니다.
{
for (let i = 1; i <= 25; i++) {
console.log(i);
}
}
이i는i <= 25를i의 값이 1씩 증가하며, console.log(i)를
만약 초기값을 0으로 설정하고 1부터 25까지 출력하려면 다음과 같이 코드를 수정할 수 있습니다.
결과 확인하기
04. 1부터 20까지 출력하기(홀수만 : 3가지)
for()문, while문, if문 for문을 이용하여 1부터 20까지 홀수만을 출력하는 예제입니다.
{
//for문
for(let i=1; i<=20; i+=2){
console.log(i);
}
//while문
let i = 1;
while(i <= 20){
console.log(i)
i += 2
}
//if문 for문
for(let i=0; i<20; i++){
if(i % 2 == 1){
console.log(i);
}
}
}
for문
4 : let i = 1;은 루프의 초기화 부분입니다. i 변수를 1로 초기화합니다.
4 : i <= 20;는 루프의 조건 부분입니다. 이 조건이 참일 때, i가 20 이하일 때만 루프가 실행됩니다.
4 : i += 2는 루프의 반복 후 작업 부분입니다. 각 반복이 끝날 때마다 i 변수를 2씩 증가시킵니다.
5 : 루프의 중괄호 {} 내부에 있는 console.log(i);는 현재 i 변수의 값을 출력합니다. 초기에 i는 1로 초기화되었으므로, 루프의 처음에는 1이
출력됩니다.
5 : 값이 20을 넘어가면 더 이상 루프의 조건이 참이 아니므로 루프가 종료됩니다.
while문
10 : let i = 1;은 초기에 i 변수를 1로 초기화합니다. 이 변수는 반복의 시작 값을 나타냅니다.
11 : while(i <= 20)은 while 루프의 조건입니다. 조건이 참, i가 20 이하일 때만 루프가 실행됩니다.
12 : 루프 내부의 console.log(i)는 현재 i 변수의 값을 콘솔에 출력합니다. 초기에 i는 1로 초기화되었으므로, 루프의 처음에는 1이 출력됩니다.
13 : 루프 내부의 i += 2는 i 변수를 2씩 증가시키는 작업입니다. 각 반복이 끝날 때마다 i 값이 2씩 증가하게 됩니다.
13 : i가 20을 넘어가게 되면 더 이상 루프의 조건이 참이 아니므로 루프가 종료됩니다.
if문 for문
18 : let i=0;은 루프의 초기화 부분입니다. i 변수를 0으로 초기화합니다.
18 : i < 20;는 루프의 조건 부분입니다. 이 조건이 참일 때, i가 20보다 작을 때만 루프가 실행됩니다.
18 : i++은 루프의 반복 후 작업 부분입니다. 각 반복이 끝날 때마다 i 변수를 1씩 증가시킵니다.
19 : if (i % 2 === 1)은 현재 i 값이 홀수인지 확인하는 조건문입니다. % 연산자는 나머지를 계산하는데 사용되며, i % 2가 1이면 i는
홀수입니다.
20 : 루프의 중괄호 {} 내부에 있는 console.log(i);는 홀수인 i 값을 출력하는 역할을 합니다.
결과 확인하기
05. 1부터 100까지 출력하기(5의 배수 : 3가지)
for()문, while문, if문 for문을 이용하여 1부터 100까지 5의 배수만을 출력하는 예제입니다.
{
//for문
for(let i=0; i<=100; i+=5){
console.log(i);
}
//while문
let i = 0;
while(i <= 100){
console.log(i)
i += 5
}
//if문 for문
for(let i=1; i<100; i++){
if(i % 5 == 0){
console.log(i);
}
}
}
for문
4 : let i = 1;은 루프의 초기화 부분입니다. i 변수를 1로 초기화합니다.
4 : i <= 100;는 루프의 조건 부분입니다. 이 조건이 참일 때, i가 100 이하일 때만 루프가 실행됩니다.
5 : 루프의 중괄호 {} 내부에 있는 console.log(i);는 현재 i 변수의 값을 출력합니다. 초기에 i는 1로 초기화되었으므로, 루프의 처음에는 1이
출력됩니다.
5 : i 값이 100을 넘어가면 더 이상 루프의 조건이 참이 아니므로 루프가 종료됩니다.
while문
10 : let i = 0;은 초기에 i 변수를 0로 초기화합니다. 이 변수는 반복의 시작 값을 나타냅니다.
11 : while(i <= 20)은 while 루프의 조건입니다. 조건이 참, i가 20 이하일 때만 루프가 실행됩니다.
12 : 루프 내부의 console.log(i)는 현재 i 변수의 값을 콘솔에 출력합니다. 초기에 i는 5로 초기화되었으므로, 루프의 처음에는 0이 출력됩니다.
13 : 루프 내부의 i += 5는 i 변수를 5씩 증가시키는 작업입니다. 각 반복이 끝날 때마다 i 값이 5씩 증가하게 됩니다.
13 : i가 20을 넘어가게 되면 더 이상 루프의 조건이 참이 아니므로 루프가 종료됩니다.
if문 for문
18 : let i = 1;은 변수 i를 1로 초기화합니다. 이 변수는 반복문의 제어 변수로 사용되며, 반복문이 시작될 때 1로 설정됩니다.
18 : i < 100은 i가 100 미만일 때만 반복문 내부의 코드 블록을 실행하도록 합니다.
19 : if (i % 5 == 0)은 i를 5로 나눈 나머지가 0인지를 검사합니다. 즉, i가 5의 배수인지 확인하는 것입니다.
조건 충족시 출력: 만약 i가 5의 배수라면(i % 5 == 0이 참이라면), console.log(i);를 실행하여 현재의 i 값을 콘솔에 출력합니다.
20 : for 루프 증가: 반복문 내부의 코드 블록이 실행된 후에는 i를 1 증가시킵니다(i++). 이로써 다음 숫자를 검사하게 됩니다.
결과 확인하기
06. 1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)
for()문, while문, if문 for문을 이용하여 1부터 20까지 출력하는 예제입니다.
{
for(let i=1; i<=20; i++){
if (i % 2 == 0){
document.write('' + i + '
')
} else {
document.write('' + i + '
')
}
}
}
1. for 반복문을 사용하여 1부터 20까지의 숫자를 반복합니다.
2. 각 숫자 i에 대해 i % 2 == 0 조건을 사용하여 숫자가 짝수인지 검사합니다.
3.만약 짝수라면 span 태그를 사용하여 빨간색 텍스트로 숫자를 출력하고, 홀수라면 파란색 텍스트로 숫자를 출력합니다.
결과 확인하기
07. 배열 데이터 1부터 10까지 출력하기
for()문을 이용하여 1부터 10까지 출력하는 예제입니다.
{
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for(let i = 0; i<arr.length; i++){
console.log(arr[i]);
}
}
1.배열 arr에는 10개의 요소가 들어있으므로, for 반복문은 0부터 시작하여 배열의 길이(arr.length)보다 작을 때까지 반복됩니다.
2.각 반복마다 arr[i]를 통해 배열의 i번째 요소에 접근하고, console.log()를 사용하여 해당 요소를 출력합니다.
3.끝날때 까지 반복하며 결과적으로 배열의 모든 데이터가 출력됩니다.
결과 확인하기
2
3
4
5
6
7
8
9
10
08. 구구단 출력하기(8단만 출력하기)
for()문을 이용하여 구구단 8단을 출력하는 예제입니다.
{
for(let i=8; i==8; i++){
console.log("8단")
for(let j=1; j<10; j++){
console.log(i + "*" + j + "=" + i*j);
}
}
}
2 : let i = 8;은 변수 i를 8로 초기화합니다. 이 변수는 바깥쪽 반복문의 제어 변수로 사용되며, 반복문이 시작될 때 8로 설정됩니다.
2 : i == 8은 i가 8과 같을 때만 바깥쪽 반복문 내부의 코드 블록을 실행하도록 합니다. 즉, 이 부분은 한 번 실행될 것입니다.
3 : 바깥쪽 반복문의 코드 블록 내에서 출력문으로 "8단"을 출력합니다. 이 부분은 반복문이 실행될 때마다 한 번 출력됩니다.
4 : 중첩된 내부 for 루프 시작 : let j = 1;은 변수 j를 1로 초기화합니다. 이 변수는 안쪽 반복문의 제어 변수로 사용되며, 안쪽 반복문이 시작될 때 1로
설정됩니다.
4 : j < 10은 j가 10 미만일 때만 안쪽 반복문 내부의 코드 블록을 실행하도록 합니다. 따라서 j가 1부터 9까지의 값을 가질 때까지 안쪽 반복문이
실행됩니다.
안쪽 반복문의 코드 블록 내에서 구구단의 곱셈식을 계산하고 출력합니다. i와 j를 곱한 값을 문자열로 표현하여 출력합니다.
4 : 안쪽 for 루프 증가: 안쪽 반복문 내부의 코드 블록이 실행된 후에는 j를 1 증가시킵니다(j++). 이로써 다음 구구단의 결과를 계산하고 출력할 수 있게
됩니다.
5 : 위의 단계를 계속 반복하면서 i값인 8에 대한 8단의 구구단 결과가 1부터 9까지 출력될 것입니다.
5 : 바깥쪽 for 루프 증가: 바깥쪽 반복문의 코드 블록 내부의 실행이 끝나면 i를 1 증가시킵니다(i++). 그러나 조건 i == 8이 여전히 만족되지 않기 때문에 이
부분은 실행되지 않을 것입니다.
결과 확인하기
09. 테이블 출력하기(5*5)
총 25칸의 테이블을 만드는 작업입니다.
{
let table = "";
let num = 1;
for(let i=1; i<=5; i++){
table += "";
for(let j=1; j<=5; j++){
table += ""+num+" ";
num ++;
}
table += " ";
}
table += "
";
document.write(table);
}
1.table이라는 문자열 변수를 선언하고, 테이블을 시작하는 HTML 코드를 초기화합니다. 테이블에는 "table" 클래스가 적용됩니다.
2. num이라는 변수를 선언하고, 테이블 셀에 들어갈 숫자를 나타내기 위해 1로 초기화합니다.
3. 외부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 행(row)을 생성합니다.
4. 각 행을 시작하는 태그를 table 문자열에 추가합니다.
5. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
6. 각 셀에 현재의 num 값을 포함한 태그를 table 문자열에 추가합니다.
9. 외부 루프가 다음 행을 생성하기 위해 다시 시작됩니다.
10. 테이블을 닫는
태그를 table 문자열에 추가합니다. num은 1부터 시작하여 25까지 증가됩니다.
7. num 변수를 1씩 증가시킵니다.
8. 각 행의 끝을 표시하는
태그를 table 문자열에 추가합니다.
11. 최종적으로 완성된 table 문자열을 문서에 출력합니다.
결과 확인하기
10. 테이블 출력하기(5*5 짝수만 나오게 출력하기)
25칸의 테이블에 짝수만 나오도록 출력한 것입니다.
{
let table = "<table class='table'>";
let num = 1;
for(let i=0; i<=5; i++){
if(num%2==0){
table += "<tr>";
for(let j=1; j<=5; j++){
if(num%2 == 0 && num <51){
table += "<td>"+num+"</td>";
num +=2;
}
}
} else {
num++;
};
table += "</tr>";
};
table += "</table>";
document.write(table);
}
1. table이라는 문자열 변수를 선언하고, 테이블을 시작하는 HTML 코드를 초기화합니다. 테이블에는 "table" 클래스가 적용됩니다.
2. num 변수를 선언하고, 테이블 셀에 들어갈 숫자를 나타내기 위해 1로 초기화합니다.
3. 외부 루프로 6번 반복됩니다. 이 루프는 테이블의 각 행(row)을 생성합니다.
4. 현재 num이 짝수인지 확인합니다.
5. 각 행을 시작하는 <tr> 태그를 table 문자열에 추가합니다.
6. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
7. 현재 num이 짝수이고 125보다 작은지 확인합니다.
8. 각 셀에 현재의 num 값을 포함한 <td> 태그를 table 문자열에 추가합니다.
9. num 변수를 2씩 증가시킵니다. 이렇게 하면 다음 짝수로 이동합니다.
10. 내부 루프의 if 블록을 종료합니다.
11. 만약 num이 짝수가 아니라면, num을 1만큼 증가시킵니다.
12. 각 행의 끝을 표시하는 </tr> 태그를 table 문자열에 추가합니다.
13. 외부 루프가 다음 행을 생성하기 위해 다시 시작됩니다.
14. 테이블을 닫는 태그를 table 문자열에 추가합니다.
15. 최종적으로 완성된 table 문자열을 문서에 출력합니다.
결과 확인하기
11. 테이블 출력하기(10*10 짝수는 빨간색, 홀수는 파란색 출력하기)
25칸의 테이블에 짝수는 빨간색, 홀수는 파란색으로 나오도록 출력한 것입니다.
{
let table = "<table class='table'>";
let num = 1;
for(let i=1; i<=10; i++){
if(num%2==0){
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td><span style='color: red;'>" +num+ "</span ></td>";
num++;
}
} else {
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td><span style='color: blue;'>" +num+ "</span ></td>";
num++;
}
};
table += "</tr>";
};
table += "</table>";
document.write(table);
}
1. 외부 루프로 10번 반복됩니다. 이 루프는 테이블의 각 행(row)을 생성합니다.
2. 현재 num이 짝수인지 확인합니다.
3. 각 행을 시작하는 <tr> 태그를 table 문자열에 추가합니다.
4. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
5. 각 셀에 현재의 num 값을 포함한 <td> 태그를 추가하고, 텍스트의 색상을 빨간색으로 설정합니다.
6. num 변수를 1씩 증가시킵니다.<br>
7. 현재 num이 홀수인 경우를 처리하기 위한 else 블록을 시작합니다.
8. 각 홀수 행을 시작하는 <tr> 태그를 table 문자열에 추가합니다.
9. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
10. 각 셀에 현재의 num 값을 포함한 <td> 태그를 추가하고, 텍스트의 색상을 파란색으로 설정합니다.
11. num 변수를 1씩 증가시킵니다.
결과 확인하기
미션1
while 문을 이용하여 구구단 5단을 출력하는 예제입니다.
{
var i = 1;
while (i < 10) {
document.write("5 X " + i + " = " + i * 5 + "
");
i++;
}
}
이 코드는 while 루프를 사용하여 i 값을 1부터 9까지 증가시키면서 각 숫자에 대한 곱셈 결과를 계산하고 출력합니다. "
" 태그를 사용하여 결과를 새 줄에
표시합니다.
결과 확인하기
5X2=10
5X3=15
5X4=20
5X5=25
5X6=30
5X7=35
5X8=40
5X9=45
미션2
중첩 for문을 이용해 5행 5열 표를 만드는 예제입니다.
{
var num=1;
var t="";
for(var i=1; i<=5; i++){
t+="";
for(var k=1; k<=5; k++){
t+=""+num+" ";
num++
}
t+=" ";
}
t+="
";
console.log(t);
document.write(t);
}
1.num 변수를 초기화하고, HTML 테이블을 나타내는 문자열 t를 초기화합니다.
2.외부 for 루프를 사용하여 테이블의 행을 생성합니다. (5번 반복)
3.내부 for 루프를 사용하여 각 행에 5개의 셀을 생성하고, num 값을 각 셀에 넣습니다.
4.num 값을 증가시킴으로써 각 셀에는 1부터 25까지의 연속된 숫자가 들어갑니다.
5.각 행의 생성을 마치면 "" 태그를 추가하여 행을 닫습니다.
6.모든 행이 생성되면 "" 태그를 추가하여 테이블을 닫습니다.
7.생성된 HTML 문자열을 console.log()를 사용하여 콘솔에 출력하고, document.write()를 사용하여 웹 페이지에 출력합니다.