01. 1부터 10까지 출력하기(초기값0)
for()문을 이용하여 1부터 10까지 출력하는 예제입니다.
{
for (let i = 0; i <= 10; i++) {
console.log(i);
}
}
2줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
2줄: let i = 0;: 반복문이 시작될 때 변수 i를 0으로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
2줄: i < 10;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 10보다 작거나 같을 때 참입니다.
따라서 i가 10까지 반복됩니다.
2줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
이렇게 하면 0부터 10까지의 숫자를 순서대로 반복하게 됩니다.
3줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
5줄: 결과적으로 위의 코드는 0부터 10까지의 숫자를 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
결과 확인하기
02. 2부터 25까지 출력하기(초기값0)
for()문을 이용하여 2부터 25까지 출력하는 예제입니다.
{
for (let i = 0; i <= 23; i++) {
console.log(i + 2);
}
}
2줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
2줄: let i = 0;: 반복문이 시작될 때 변수 i를 0으로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
2줄: i < 23;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 23보다 작거나 같을 때 참입니다.
따라서 i가 23까지 반복됩니다.
2줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
이렇게 하면 0부터 23까지의 숫자를 순서대로 반복하게 됩니다.
3줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
5줄: 결과적으로 위의 코드는 0부터 25까지의 숫자를 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
결과 확인하기
03. 1부터 20까지 출력하기(짝수만)(3가지)
for()문, while()문, if for()문 을 이용하여 1부터 20까지 중 짝수만 출력하는 예제입니다.
{
{
for (let i = 2; i = 20; i+=2){
console.log(i);
}
};
{
let i = 2; {
while ( i <= 20) {
console.log(i);
i+=2
}
}
};
{
for (let i = 2; i <= 20; i+=2) {
if (i % 2 === 0) {
console.log(i);
}
}
};
}
3줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
3줄: let i = 2;: 반복문이 시작될 때 변수 i를 2로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
3줄: i < 20;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 20보다 작거나 같을 때 참입니다.
따라서 i가 20까지 반복됩니다.
3줄: i+=2: 반복이 한 번 실행될 때마다 i를 2씩 증가시킵니다.
이렇게 하면 0부터 20까지의 숫자를 2의 배수로 반복하게 됩니다.
4줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
6줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 짝수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
8줄: let i = 2;: 반복문이 시작될 때 변수 i를 2로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
9줄: while (i <= 20): 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 20보다 작거나 같을 때 참입니다.
따라서 i가 20까지 반복됩니다.
10줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
11줄: i+=2: 반복이 한 번 실행될 때마다 i를 2씩 증가시킵니다.
이렇게 하면 0부터 20까지의 숫자를 2의 배수대로 반복하게 됩니다.
14줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 짝수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
16줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
16줄: let i = 2;: 반복문이 시작될 때 변수 i를 2로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
16줄: i <= 20;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 20보다 작거나 같을 때 참입니다.
따라서 i가 20까지 반복됩니다.
16줄: i+=2: 반복이 한 번 실행될 때마다 i를 2씩 증가시킵니다.
이렇게 하면 0부터 20까지의 숫자를 2의 배수로 반복하게 됩니다.
17줄: if(): 조건을 검사하고 해당 조건이 참일 때에만 특정 코드 블록을 실행하는 제어문입니다.
17줄: i % 2 === 0: i를 2로 나누었을 때 나머지가 0인지 확인하여 i가 짝수인지 검사합니다.
18줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
21줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 짝수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
결과 확인하기
04. 1부터 20까지 출력하기(홀수만)(3가지)
for()문 while()문 if for()문 을 이용하여 1부터 20까지 중 홀수만 출력하는 예제입니다.
{
{
for (let i = 0; i < 20; i++) {
console.log(i++);
}
};
{
let i = 0; {
while (i < 20) {
console.log(i++);
i++
}
}
};
{
for (let i = 0; i < 20; i++) {
if (i % 2 == 1) {
console.log(i++);
}
}
}
}
3줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
3줄: let i = 0;: 반복문이 시작될 때 변수 i를 0으로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
3줄: i < 20;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 20보다 작을 때 참입니다.
따라서 i가 20까지 반복됩니다.
3줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
이렇게 하면 0부터 20까지의 숫자를 순서대로 반복하게 됩니다.
4줄: { console.log(i++); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i++);는 현재 i의 값 + 1을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
6줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 홀수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
8줄: let i = 0;: 반복문이 시작될 때 변수 i를 0으로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
9줄: while (i < 20): 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 20보다 작을 때 참입니다.
따라서 i가 20까지 반복됩니다.
10줄: { console.log(i++); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i++);는 현재 i의 값 +1을 출력합니다.
반복문이 실행될 때마다 i의 값이 1씩 증가되며 출력됩니다.
11줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
결국 i의 값이 2씩 증가하게 되어 0부터 20까지의 숫자 중 홀수인 수로 반복하게 됩니다.
14줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 홀수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
16줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
16줄: let i = 0;: 반복문이 시작될 때 변수 i를 0으로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
16줄: i < 20;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 20보다 작을 때 참입니다.
따라서 i가 20까지 반복됩니다.
16줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
이렇게 하면 0부터 20까지의 숫자를 순서대로 반복하게 됩니다.
17줄: if(): 조건을 검사하고 해당 조건이 참일 때에만 특정 코드 블록을 실행하는 제어문입니다.
17줄: i % 2 == 1: i를 2로 나누었을 때 나머지가 1인지 확인하여 i가 홀수인지 검사합니다.
18줄: { console.log(i++); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i++);는 현재 i의 값 + 1을 출력합니다.
반복문이 실행될 때마다 i의 값이 1씩 증가되며 출력됩니다.
21줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 짝수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
결과 확인하기
05. 1부터 100까지 출력하기(5의 배수)(3가지)
for()문, while()문, if for()문 을 이용하여 1부터 100까지 중 5의 배수만 출력하는 예제입니다.
{
{
for (let i = 5; i <= 100; i+=5) {
console.log(i);
};
};
{
let i = 5; {
while (i <= 100) {
console.log(i);
i+=5;
}
}
};
{
for (let i = 1; i <= 100; i++){
if ( i % 5 == 0){
console.log(i);
}
}
};
}
3줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
3줄: let i = 5;: 반복문이 시작될 때 변수 i를 5로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
3줄: i < 100;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 100보다 작거나 같을 때 참입니다.
따라서 i가 100까지 반복됩니다.
3줄: i+=5: 반복이 한 번 실행될 때마다 i를 5씩 증가시킵니다.
이렇게 하면 0부터 100까지의 숫자를 순서대로 반복하게 됩니다.
4줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
6줄: 결과적으로 위의 코드는 0부터 100까지의 숫자 중 5의 배수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
8줄: let i = 5;: 반복문이 시작될 때 변수 i를 5로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
9줄: while (i < 100): 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 100보다 작거나 같을 때 참입니다.
따라서 i가 100까지 반복됩니다.
10줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 5씩 증가되며 출력됩니다.
11줄: i+=5: 반복이 한 번 실행될 때마다 i를 5씩 증가시킵니다.
결국 i의 값이 5씩 증가하게 되어 0부터 100까지의 숫자 중 5의 배수로 반복하게 됩니다.
14줄: 결과적으로 위의 코드는 0부터 100까지의 숫자 중 5의 배수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
16줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
16줄: let i = 5;: 반복문이 시작될 때 변수 i를 5로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
16줄: i < 100;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 100보다 작거나 같을 때 참입니다.
따라서 i가 100까지 반복됩니다.
16줄: i+=5: 반복이 한 번 실행될 때마다 i를 5씩 증가시킵니다.
이렇게 하면 0부터 100까지의 숫자를 순서대로 반복하게 됩니다.
17줄: if(): 조건을 검사하고 해당 조건이 참일 때에만 특정 코드 블록을 실행하는 제어문입니다.
17줄: i % 2 == 1: i를 5로 나누었을 때 나머지가 0인지 확인하여 i가 홀수인지 검사합니다.
18줄: { console.log(i); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
console.log(i);는 현재 i의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 5씩 증가되며 출력됩니다.
21줄: 결과적으로 위의 코드는 0부터 100까지의 숫자 중 5의 배수만 출력하게 됩니다.
console.log() 함수를 호출하여 숫자를 콘솔에 출력합니다.
결과 확인하기
06. 1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)
for()문, while()문, if for()문 을 이용하여 1부터 20까지 중 짝수는 빨간색으로, 홀수는 파란색으로 출력하는 예제입니다.
{
{
let number = 1;
while (number <= 20) {
if (number % 2 === 0) {
document.write("<span style='color:red'>" + number + "</span><br>");
} else {
document.write("<span style='color:blue'>" + number + "</span><br>");
}
number++;
}
};
{
for (let i = 1; i < = 20; i++) {
if ( i % 2 === 0 ) {
document.write( "<span style='color:red'>" + i + "</span>", "<br>");
} else {
document.write( "<span style='color:blue'>" + i + "<span/span>", "<br>");
}
}
};
}
3줄: let number = 1;: 반복문이 시작될 때 변수 i를 1로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
5줄: while (number <= 20): 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 number가 20보다 작거나 같을 때 참입니다.
따라서 number가 20까지 반복됩니다.
6줄: if() else: 조건을 검사하고 해당 조건이 참일 때에만 특정 코드 블록을 실행하는 제어문입니다.
6줄: (number % 2 === 0): number를 2로 나누었을 때 나머지가 0인지 확인하여 number가 짝수인지 검사합니다.
7줄: 만약 number가 짝수라면, 빨간색 스타일을 적용한 span 태그를 사용하여 숫자 number를 출력하고 <br> 태그를 사용하여 줄을 바꿉니다.
9줄: 만약 number가 홀수라면, 파란색 스타일을 적용한 span 태그를 사용하여 숫자 number를 출력하고 <br> 태그를 사용하여 줄을 바꿉니다.
11줄: number++;는 number 값을 1 증가시키며 값이 20보다 작을 때까지 반복합니다.
12줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 짝수를 빨간색으로, 홀수를 파란색으로 출력하게 됩니다.
15줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
15줄: let i = 1;: 반복문이 시작될 때 변수 i를 1로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
15줄: i < 20;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 20보다 작거나 같을 때 참입니다.
따라서 i가 20까지 반복됩니다.
15줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
이렇게 하면 0부터 20까지의 숫자를 순서대로 반복하게 됩니다.
16줄: if() else: 조건을 검사하고 해당 조건이 참일 때에만 특정 코드 블록을 실행하는 제어문입니다.
16줄: i % 2 === 0: i를 2로 나누었을 때 나머지가 0인지 확인하여 i가 짝수인지 검사합니다.
17줄: 만약 i가 짝수라면, 빨간색 스타일을 적용한 span 태그를 사용하여 숫자 i를 출력하고 <br> 태그를 사용하여 줄을 바꿉니다.
19줄: 만약 i가 홀수라면, 파란색 스타일을 적용한 span 태그를 사용하여 숫자 i를 출력하고 <br> 태그를 사용하여 줄을 바꿉니다.
22줄: 결과적으로 위의 코드는 0부터 20까지의 숫자 중 짝수를 빨간색으로, 홀수를 파란색으로 출력하게 됩니다.
결과 확인하기
07. 배열 데이터 1부터 10까지 출력하기
for()문, while()문, if for()문 을 이용하여 배열 데이터에서 1부터 10까지 출력하는 예제입니다.
{
{
const numbers = [3, 7, 1, 8, 2, 5, 9, 4, 10, 6];
let index = 0;
while (index < numbers.length) {
if (numbers[index] <= 10) {
console.log(numbers[index] + "<br>");
}
index++;
}
};
{
const numbers = [3, 7, 1, 8, 2, 5, 9, 4, 10, 6];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] <= 10) {
console.log(numbers[i] + "<br>");
}
}
};
}
3줄: const numbers: 배열 안에 각각의 숫자가 저장되어있습니다.
4줄: let index = 0;: 반복문이 시작될 때 변수 index를 0으로 초기화합니다.
index는 반복문에서 사용되는 변수로, 배열의 인덱스를 나타내며, 루프에서 현재 처리 중인 배열의 위치를 추적합니다.
5줄: while (index numbers.length): 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 index가 배열의 길이인 10보다 작을 때 참입니다.
따라서 index가 10까지 반복됩니다.
7줄: if (numbers[index] = 10): numbers[index]가 10 이하인지를 확인하는 조건문입니다.
8줄: console.log(numbers[index] + "<br>");: 중괄호 안에 있는 코드가 반복되는 부분입니다.
만약 i가 10보다 작거나 같다면, 해당 요소의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
10줄: index++;: index 값을 1 증가시키며 배열의 길이가 10과 같아질 때까지 반복합니다.
11줄: 결과적으로 위의 코드는 배열 안의 요소들을 모두 출력하게 됩니다.
15줄: const numbers: 배열 안에 각각의 숫자가 저장되어있습니다.
17줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
17줄: let i = 0;: 반복문이 시작될 때 변수 i를 0으로 초기화합니다.
i는 반복문에서 사용되는 변수로, 배열의 인덱스를 나타내며, 루프에서 현재 처리 중인 배열의 위치를 추적합니다.
17줄: numbers.length: 배열 numbers의 요소의 개수를 나타내는 속성입니다.
이 값은 배열 내에 저장된 데이터의 갯수를 반환합니다.
배열에 총 10개의 요소가 있으므로 i는 0부터 9까지 반복됩니다.
17줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
이렇게 하면 0부터 10까지의 숫자를 순서대로 반복하게 됩니다.
18줄: if(): 조건을 검사하고 해당 조건이 참일 때에만 특정 코드 블록을 실행하는 제어문입니다.
18줄: numbers[i] = 10: 배열 numbers의 인덱스 i값이 10보다 작거나 같은지 검사합니다.
19줄: { console.log(numbers[i] + "<br>"); }: 중괄호 안에 있는 코드가 반복되는 부분입니다.
만약 i가 10보다 작거나 같다면, 해당 요소의 값을 출력합니다.
반복문이 실행될 때마다 i의 값이 변경되며 출력됩니다.
22줄: 결과적으로 위의 코드는 배열 안의 요소들을 모두 출력하게 됩니다.
결과 확인하기
08. 구구단 8단 출력하기
중첩for()문을 이용하여 구구단 8단을 출력하는 예제입니다.
{
{
for (let dan = 8; dan < 9; dan++) {
document.write( dan + "단" + "<br>");
for (let i = 1; i <= 9; i++) {
document.write(dan + " × " + i + " = " + (dan * i) + "<br>");
}
document.write("<br>");
}
};
}
3줄: 세 개의 표현식으로 변수의 초기값 설정, 반복문의 조건, 반복 후 작업을 정의합니다.
3줄: let dan = 8;: 반복문이 시작될 때 변수 i를 8로 초기화합니다.
dan은 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
3줄: dan < 9;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 dan이 9보다 작을 때 참입니다.
따라서 i가 8만 실행됩니다.
3줄: dan++: 반복이 한 번 실행될 때마다 dan을 1씩 증가시킵니다.
이렇게 하면 8부터 8까지의 숫자를 반복하게 됩니다.
4줄: document.write( dan + "단" + "<br>");: dan 값에 문자열 "단"을 붙여 "8단" 문자열을 출력하고 <br> 태그를
사용하여 줄을 바꿉니다..
5줄: let i = 1;: 반복문이 시작될 때 변수 i를 1로 초기화합니다.
i는 반복문에서 사용되는 변수로, 현재 반복의 횟수를 나타냅니다.
5줄: i = 9;: 조건이 참일 동안 반복문을 실행합니다.
여기서 조건은 i가 9보다 작거나 같을 때 참입니다.
따라서 i가 0부터 9까지 반복합니다.
5줄: i++: 반복이 한 번 실행될 때마다 i를 1씩 증가시킵니다.
이렇게 하면 1부터 9까지의 숫자를 반복하게 됩니다.
6줄: document.write(dan + " × " + i + " = " + (dan * i) + "<br>");: dan 값인 8에 문자열 "x"와 1씩
증가하는 i값과 문자열"="를 붙여서 출력합니다.
6줄: (dan * i) + "<br>": dan 값인 8에 1씩 증가하는 i값을 곱한 값을 출력하고 <br> 태그를 사용하여 줄을 바꿉니다.
8줄: 반복문이 끝나면 document.write("<br>")를 사용하여 줄바꿈을 하면서 구구단을 만듭니다.
11줄: 결과적으로 위의 코드는 구구단 8단만 출력하게 됩니다.
결과 확인하기
09. 테이블 출력하기 (5*5 1부터 25까지 출력하기)
5*5의 HTML 표를 생성하고 1부터 25까지 출력하는 예시입니다.
{
let num = 1
let table="<table border = 1>"
for(i=1; i<=10; i++){
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td>" + num + "</td>";
num++;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
2줄: 숫자 변수 num을 선언하고 1로 초기화합니다.
4줄: table 문자열은 "<table>" 요소를 생성하며, 테두리가 있는 테이블을 정의합니다.
5줄: 첫 번째 반복문은 1부터 10까지 10회 반복합니다.
6줄: 각 반복마다 HTML 테이블의 새로운 행을 시작합니다.
이 부분은 문자열 table에 추가됩니다.
8줄: 두 번째 반복문은 1부터 5까지 5회 반복하여 각 행에 5개의 셀을 만듭니다.
9줄: 각 반복마다 HTML 테이블의 셀을 추가합니다.
셀 내부에는 num 변수의 값을 삽입해서 각 셀에 1부터 50까지의 숫자가 차례대로 들어갑니다.
10줄: 각 반복마다 num 변수를 증가시켜 다음 숫자를 준비합니다.
13줄: 각 행이 끝나면 문자열 table에 해당 HTML을 추가하여 행을 닫습니다.
15줄: 테이블을 닫는 HTML을 문자열 table에 추가하여 HTML 테이블을 완성합니다.
17줄: 최종적으로 문자열 table을 웹 페이지에 출력합니다.
결과 확인하기
10. 테이블 출력하기 (5*5 짝수만 출력하기)
{
let num = 2;
let table="<table border = 1>"
for(i=1; i<=5; i++){
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td>" + num + "</td>"
num += 2;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
2줄: 숫자 변수 num을 선언하고 테이블 셀에 들어갈 짝수 값을 나타내기 위해 2로 초기화합니다.
4줄: table 문자열은 "<table>" 요소를 생성하며, 테두리가 있는 테이블을 정의합니다.
5줄: 첫 번째 반복문은 1부터 5까지 5회 반복하여 테이블에 5개의 행을 만듭니다.
6줄: 각 반복마다 HTML 테이블의 새로운 행을 시작합니다.
이 부분은 문자열 table에 추가됩니다.
8줄: 두 번째 반복문은 1부터 5까지 5회 반복하여 각 행에 5개의 셀을 만듭니다.
9줄: 각 반복마다 HTML 테이블의 셀을 추가합니다.
셀 내부에는 num 변수의 값을 삽입하여 각 셀에 2부터 10까지의 짝수가 차례대로 들어갑니다.
10줄: 각 반복마다 num 변수를 2씩 증가시켜 다음 짝수를 준비합니다.
13줄: 각 행이 끝나면 문자열 table에 해당 HTML을 추가하여 행을 닫습니다.
15줄: 테이블을 닫는 HTML을 문자열 table에 추가하여 HTML 테이블을 완성합니다.
17줄: 최종적으로 문자열 table을 웹 페이지에 출력합니다.
결과 확인하기
11. 테이블 출력하기 (10*10, 짝수는 빨간색, 홀수는 파란색 출력하기)
HTML 테이블을 생성하고, 각 셀의 텍스트 색상을 짝수 셀은 빨간색으로, 홀수 셀은 파란색으로 지정하는 예제입니다.
{
let num = 1;
let table="<table border = 1>"
for(i=1; i<=10; i++){
table += "<tr>";
for(let j=1; j<=10; j++){
let textColor = num % 2 === 0 ? "red" : "blue";
table += "<td style='color:${textColor}'>${num}</td>";
num++;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
2줄: 숫자 변수 num을 선언하고 1로 초기화합니다.
이 변수는 각 셀에 들어갈 숫자를 나타냅니다.
4줄: table 문자열은 "<table>" 요소를 생성하며, 테두리가 있는 테이블을 정의합니다.
5줄: 첫 번째 반복문은 1부터 10까지 총 10번 반복하여 테이블에 10개의 행을 만듭니다.
6줄: 각 반복에서 HTML 테이블의 새로운 행을 시작하고 문자열 table에 추가됩니다.
8줄: 두 번째 반복문은 1부터 10까지 10번 반복하여 각 행에 10개의 셀을 만듭니다.
10줄: textColor 변수를 사용하여 현재 숫자 num이 짝수인지 아닌지를 확인합니다.
짝수이면 "red"를, 홀수이면 "blue"를 textColor에 저장합니다.
13줄: 현재 반복에서 생성한 셀을 HTML 문자열 table에 추가합니다.
이 때, 각 셀의 텍스트 색상을 textColor에 따라 빨간색 또는 파란색으로 설정합니다.
${} 구문을 사용하여 변수 textColor와 num 값을 텍스트로 삽입합니다.
11줄: 각 반복에서 num 변수를 1씩 증가시켜 다음 숫자를 준비합니다.
14줄: 각 행이 끝날 때 문자열 table에 해당 HTML을 추가하여 행을 닫습니다.
16줄: 테이블을 닫는 HTML을 문자열 table에 추가하여 HTML 테이블을 완성합니다.
18줄: 최종적으로 문자열 table을 웹 페이지에 출력합니다.