- 01. 1부터 10까지 출력하기(초기값0)
- 02. 2부터 25까지 출력하기(초기값0)
- 03. 1부터 20까지 출력하기(짝수만)(3가지)
- 04. 1부터 20까지 출력하기(홀수만)(3가지)
- 05. 1부터 100까지 출력하기(5의 배수)(3가지)
- 06. 1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)
- 07. 배열 데이터 1부터 10까지 출력하기
- 08. 구구단 출력하기(8단만 출력하기)
- 09.테이블 출력하기(5*5)
- 10.테이블 출력하기(5*5 짝수만 나오게 출력하기)
- 11.테이블 출력하기(10*10 짝수는 빨간색, 홀수는 파란색 출력하기)
01. 1부터 10까지 출력하기
for문을 이용하여 1부터 10까지 출력하는 예제입니다.
for 키워드: "for" 키워드는 일반적으로 반복 작업을 수행하기 위해 사용되는 반복문을 시작하는 키워드입니다.
{
for(let i=0; i<10; i++){
console.log(i+1);
}
}
2. "for" 루프를 사용하여 숫자를 반복적으로 출력하는 역할을 합니다.
let i = 0;: 반복문의 초기화 단계입니다. 변수 i를 선언하고 0으로 초기화합니다. 이 변수는 반복의 제어를 위해 사용됩니다.
i < 10;: 반복문의 조건 부분입니다. 조건 i < 10은 i가 10보다 작을 동안에만 반복을 계속하라는 의미입니다. 조건이 참일 경우 루프가 계속 실행됩니다.
3. i++: 반복문의 증감 부분입니다. i++는 현재 i의 값을 1씩 증가시킵니다. 이 부분은 각 반복마다 실행됩니다.
{ ... }: 중괄호 내부에 있는 코드 블록이 반복적으로 실행됩니다. 이 코드 블록은 반복문의 본문 부분으로, 각 반복에서 수행될 작업을 포함합니다.
console.log(i + 1);: 현재 i 값에 1을 더한 결과를 콘솔에 출력합니다. 이 부분은 각 반복에서 실행되며, i가 0부터 시작하므로 출력 결과는 1부터 시작하여 10까지 출력됩니다.
결과 확인하기
02. 2부터 25까지 출력하기(초기값0)
for문을 이용하여 2부터 25까지 출력하는 예제입니다.
for 키워드: "for" 키워드는 일반적으로 반복 작업을 수행하기 위해 사용되는 반복문을 시작하는 키워드입니다.
{
for(let i=0; i<24; i++){
console.log(i+2);
};
}
2. "for" 루프를 사용하여 숫자를 반복적으로 출력하는 역할을 합니다.
let i = 0; 변수 i를 0으로 초기화합니다.
i < 24;: 반복문의 조건 부분입니다. 조건 i < 24는 i가 24 미만일 동안에만 반복을 계속하라는 의미입니다. 조건이 참일 경우 루프가 계속 실행됩니다.
i++: 반복문의 증감 부분입니다. i++는 현재 i 값을 1씩 증가시킵니다. 이 부분은 각 반복마다 실행됩니다.
3. { ... }: 중괄호 내부에 있는 코드 블록이 반복적으로 실행됩니다. 이 코드 블록은 반복문의 본문 부분으로, 각 반복에서 수행될 작업을 포함합니다.
console.log(i + 2);: 현재 i 값에 2를 더한 결과를 콘솔에 출력합니다. 이 부분은 각 반복에서 실행되며, i 값이 0부터 시작하므로 0에 2를 더한 값부터 시작하여 23에 2를 더한 값까지 출력됩니다.
결과 확인하기
03. 1부터 20까지 출력하기(짝수만)(3가지)
for()문과 while문 그리고 for문 + if문을 이용하여 1부터 20까지 짝수만 출력하는 예제입니다.
{
//1. for문
for(let i = 2; i <= 20; i+=2){
console.log(i);
};
//2. while문
let i = 2;
while (i<=20){
console.log(i);
i+=2;
};
//3. for문 + if문
for(let i = 1; i i<= 20; i++){
if(i % 2 ==0){console.log(i)}
};
}
1. for 키워드: "for" 키워드는 반복 작업을 수행하기 위한 반복문을 시작합니다.
2. while 반복문을 사용하여 2부터 20까지의 짝수를 출력하는 코드입니다.
let i = 2;: 반복문을 시작하기 전에 변수 i를 2로 초기화합니다. 이 변수는 반복의 제어를 위해 사용됩니다. 시작 값이 2로 설정되었으므로 첫 번째 반복부터 짝수가 시작됩니다.
while (i <= 20) { ... }: while 키워드는 조건이 참인 동안에 반복을 계속하는 반복문을 나타냅니다. 조건 i <= 20은 i가 20 이하일 동안에만 반복을 실행하라는 의미입니다.
console.log(i);: 현재 i 값을 콘솔에 출력합니다. 이 부분은 각 반복에서 실행됩니다.
i += 2;: i 값을 2씩 증가시킵니다. 이 부분은 각 반복의 끝에서 실행됩니다. 이렇게 하면 i는 계속해서 짝수 값을 가지며, 반복 조건이 거짓이 될 때까지 반복이 계속됩니다.
3. for 키워드: "for" 키워드는 반복 작업을 수행하기 위한 반복문을 시작합니다.
let i = 1;: 반복문의 초기화 부분입니다. 변수 i를 1로 초기화합니다. 이 변수는 반복의 제어를 위해 사용됩니다.
i <= 20;: 반복문의 조건 부분입니다. 조건 i <= 20은 i가 20 이하일 동안에만 반복을 계속하라는 의미입니다. 조건이 참일 경우 루프가 계속 실행됩니다.
if (i % 2 == 0): 조건문입니다. 조건 i % 2 == 0은 i가 2로 나누어 떨어질 때 (즉, 짝수일 때) 조건이 참이 됩니다.
{ ... }: 중괄호 내부에 있는 코드 블록이 조건이 참일 때 실행됩니다. 이 코드 블록은 조건문의 본문 부분으로, 짝수일 때만 실행됩니다.
console.log(i);: 현재 i 값을 콘솔에 출력합니다. 이 부분은 조건이 참일 때만 실행됩니다. 따라서, 1부터 20까지의 숫자 중에서 짝수만 출력됩니다.
결과 확인하기
04. 1부터 20까지 출력하기(홀수만)(3가지)
for()문과 while문 그리고 for문 + if문을 이용하여 1부터 20까지 홀수만 출력하는 예제입니다.
{
//1. for문
for(let i=1; i<=20; i+=2){
console.log(i);
};
//2. while문
let i = 1;
while (i<=20){
console.log(i);
i+=2;
};
//3. for문 + if문
for(let i = 1; i <= 20; i++){
if(i % 2 ==1){console.log(i)}
};
}
1. for문 (1부터 20까지의 홀수 출력):
이 부분은 for 반복문을 사용하여 1부터 20까지의 숫자 중에서 홀수를 출력하는 방법을 보여줍니다. i 값을 1부터 시작하여 20까지 반복하면서, 홀수인 경우에만 출력합니다.
2. while문 (1부터 20까지의 홀수 출력):
이 부분은 while 반복문을 사용하여 1부터 20까지의 숫자 중에서 홀수를 출력하는 방법을 보여줍니다. i 값을 1부터 시작하여 2씩 증가시키면서 홀수를 출력합니다.
3. for문 + if문 (1부터 20까지의 홀수 출력):
이 부분은 for 반복문과 if 조건문을 함께 사용하여 1부터 20까지의 숫자 중에서 홀수를 출력하는 방법을 보여줍니다. i 값을 1부터 시작하여 20까지 반복하면서, 홀수인 경우에만 출력합니다.
결과 확인하기
05. 1부터 100까지 출력하기(5의 배수)(3가지)
for()문과 while문 그리고 for문 + if문을 이용하여 1부터 100까지 출력하는 예제입니다.
{
//1. for문
for(let i=5; i<=100; i+=5){
console.log(i);
};
//2. while문
let i = 5;
while (i<=100){
console.log(i);
i+=5;
};
//3. for문 + if문
for(let i = 1; i <= 100; i++){
if(i % 5 ==0){console.log(i)}
};
}
1. for문 (5부터 100까지의 5의 배수 출력):
이 부분은 for 반복문을 사용하여 5부터 100까지의 숫자 중에서 5의 배수를 출력하는 방법을 보여줍니다. i 값을 5부터 시작하여 5씩 증가시키면서 5의 배수를 출력합니다.
2. while문 (5부터 100까지의 5의 배수 출력):
이 부분은 while 반복문을 사용하여 5부터 100까지의 숫자 중에서 5의 배수를 출력하는 방법을 보여줍니다. i 값을 5부터 시작하여 5씩 증가시키면서 5의 배수를 출력합니다.
3. for문 + if문 (1부터 100까지의 숫자 중에서 5의 배수 출력):
이 부분은 for 반복문과 if 조건문을 함께 사용하여 1부터 100까지의 숫자 중에서 5의 배수를 출력하는 방법을 보여줍니다. i 값을 1부터 시작하여 100까지 반복하면서, 5의 배수인 경우에만 출력합니다.
결과 확인하기
06. 1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)
for문 + if-else문을 이용하여 1부터 20까지 출력하여 짝수에는 빨간색을 홀수에는 파란색을 주는 예제입니다.
{
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>',"<br>");
};
};
}
if-else 문은 if 조건이 참일 때와 그렇지 않을 때 각각 다른 코드 블록을 실행합니다. if 다음에 오는 조건식을 평가하고, 조건식이 참일 경우 첫 번째 중괄호 블록이 실행되고, 그렇지 않은 경우 두 번째 중괄호 블록이 실행됩니다.
span 태그는 아무 의미를 가지지 않고, 주로 특정 텍스트나 구문에 스타일을 적용하고 싶을 때 사용됩니다.
결과 확인하기
07. 배열 데이터 1부터 10까지 출력하기
length 속성을 활용하는 예제입니다.
{
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for(let i = 0, i<arr.length; i++){
console.log(arr[i]);
};
}
.length : 배열의 길이는 Array 인스턴스의 length 속성을 통해서 확인할 수 있습니다.
결과 확인하기
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);
};
};
for(let i=8; i<=8; i++){
for(let j=1; j<=9; j++){
console.log(i + " X " + j + " = " + i*j);
};
};
}
1. 첫 번째 for 반복문은 i의 초기값을 8로 설정하고, 조건이 i == 8인 동안 반복문이 실행됩니다. 이 조건은 단 한 번만 반복문을 실행하도록 합니다.
2. i라는 변수를 선언하고 초기값 8을 할당합니다. 이 변수는 구구단의 단을 나타내는 역할을 합니다.
3. i가 8과 같은 동안만 반복문이 실행됩니다. 이 조건이 참(True)인 경우에만 첫 번째 for 반복문의 코드 블록이 실행됩니다. 조건이 처음부터 참이기 때문에 반복문은 한 번만 실행됩니다.
4. 반복문이 한 번 실행된 후 i 값을 1씩 증가시키는 부분입니다. 이 증감 섹션은 첫 번째 for 반복문의 마지막에서 실행되며, 이후에 조건이 다시 평가됩니다.
5. 중괄호 {} 안에 있는 코드는 첫 번째 for 반복문이 실행될 때 실행됩니다.
6. j의 초기값은 1로 설정되고, j가 9보다 작을 동안만 실행됩니다.
7. j라는 변수를 선언하고 초기값 1을 할당합니다. 이 변수는 곱해지는 수를 나타내는 역할을 합니다.
8. j가 9보다 작은 동안만 반복문이 실행됩니다. 조건이 참(True)인 경우에만 두 번째 for 반복문의 코드 블록이 실행됩니다.
9. 반복문이 한 번 실행된 후 j 값을 1씩 증가시키는 부분입니다.
10. 중괄호 {} 안에 있는 코드는 두 번째 for 반복문이 실행될 때 실행됩니다.
결과 확인하기
09.테이블 출력하기(5*5)
5x5 크기의 테이블을 생성하고 각 셀에 순차적인 숫자를 채우는 예제입니다
{
let table = "<table class='table'>";
let num = 1;
for(let i=1; i<=5; i++){
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td>"+num+"</td>";
num ++;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
1. HTML 테이블의 시작 태그를 table 문자열에 추가하며 클래스 이름을 설정합니다.
2. num 변수를 사용하여 테이블의 각 셀에 들어갈 숫자를 초기화합니다.
3. 외부 루프(for 문)를 사용하여 행을 생성하고 시작 태그를 추가합니다.
4. 내부 루프를 사용하여 열을 생성하고 각 셀에 숫자를 넣습니다.(가로로) 각 숫자는 num 변수를 통해 증가시킵니다.
5. 각 행의 종료 태그 /tr를 추가합니다.
6. 외부 루프가 종료되면 테이블의 종료 태그를 추가합니다.
7. document.write(table)을 사용하여 생성한 테이블을 현재 웹 페이지에 출력합니다.
결과 확인하기
10.테이블 출력하기(5*5 짝수만 나오게 출력하기)
{
1.for문 5*5 짝수 테이블
let table = "<table class='table'>";
let num = 2;
for(let i = 0; i < 5; i++){
table += "<tr>";
for(let j = 0; j < 5; j++){
table += "<td>"+num+"</td>";
num += 2;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
1. let table = "<table class='table'>";: 초기 문자열 table에 HTML <table> 요소를 시작하고 클래스 속성을 추가합니다.
2. let num = 2;: 변수 num을 초기화하여 표에 넣을 첫 번째 짝수 숫자를 나타냅니다. 코드는 2부터 시작합니다.
3. for(let i = 0; i < 5; i++): 외부 루프 표의 행을 생성합니다. 5개의 행을 만듭니다.
4. table += "<tr>";: 각 행을 나타내는 <tr>(표의 행) 요소를 열고, table 문자열에 추가합니다.
5. for(let j = 0; j < 5; j++): 내부 루프 - 각 행에 5개의 <td>(표의 셀)를 생성합니다.
6. table += "<td>"+num+"</td>";: 현재 num 값을 <td> 요소로 감싸서 table 문자열에 추가하고, num을 2씩 증가시켜 다음 짝수 숫자를 준비합니다.
7. table += "</tr>";: 현재의 행을 닫는 </tr> 태그를 table 문자열에 추가합니다.
8. table += "</table>";: 표 전체를 닫는 </table>태그를 table 문자열에 추가합니다.
9. document.write(table);: 최종적으로 생성된 HTML 문자열인 table을 문서에 출력합니다.
결과 확인하기
11.테이블 출력하기(10*10 짝수는 빨간색, 홀수는 파란색 출력하기)
javaScript를 사용하여 HTML 표(table)를 생성하고, 10x10 크기의 표에 짝수를 빨간색으로, 홀수를 파란색으로 표시하는 예제입니다.
{
let table = "<table class='table'>";
let num = 1;
for (let i = 0; i < 10; i++) {
table += "<tr>";
for (let j = 0; j < 10; j++) {
if (num % 2 === 0) {
table += "<td><span style='color: red;'>" + num + '</span></td>';
} else {
table += "<td><span style='color: blue;'>" + num + '</span></td>';
}
num ++
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
1. let table = "<table class='table'>";: 초기 문자열 table에 HTML <table> 요소를 시작하고 클래스 속성을 추가합니다.
2. let num = 1;: 변수 num을 초기화하여 표에 넣을 첫 번째 숫자를 나타냅니다. 코드는 1부터 시작합니다.
3. for (let i = 0; i < 10; i++) : 외부 루프 - 표의 행을 생성합니다. 10개의 행을 만듭니다.
4. table += "<tr>";: 각 행을 나타내는 <tr>(표의 행) 요소를 열고, table 문자열에 추가합니다.
5. for (let j = 0; j < 10; j++) : 내부 루프 - 각 행에 10개의 <td>(표의 셀)를 생성합니다.
6. if (num % 2 === 0) : 현재 num이 짝수인지 확인합니다.
7. table += "<td><span style='color: red;'<" + num + '</span></td>';: 현재 num 값을 <td> 요소로 감싸고, 짝수인 경우 <span> 요소에 빨간색 텍스트 스타일을 적용하여 table 문자열에 추가합니다.
8. else : 홀수인 경우
table += "<td><span style='color: blue;'>" + num + '</span></td>';: 현재 num 값을 <td> 요소로 감싸고, 홀수인 경우 <span> 요소에 파란색 텍스트 스타일을 적용하여 table 문자열에 추가합니다.
9. num++;: 다음 숫자를 준비하기 위해 num을 1씩 증가시킵니다.
10. table += "</tr>";: 현재의 행을 닫는 </tr> 태그를 table 문자열에 추가합니다.
11. table += "</table>";: 표 전체를 닫는 </table> 태그를 table 문자열에 추가합니다.
12. document.write(table);: 최종적으로 생성된 HTML 문자열인 table을 문서에 출력합니다.