01. 1부터 100까지 출력하기(초기값0)
for()문을 이용하여 1부터 100까지 출력하는 예제입니다.
{
for(let i=0; i<10; i++){
console.log(i);
}
}
2줄 :for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다. 이 부분은 반복문의 실행 조건을 설정하고 초기화를 수행합니다.
let i = 0;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 0으로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i < 10;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 10보다 작을 동안 반복문이 계속 실행됩니다.
i++: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 1씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 1씩 증가하면서,0부터 9까지의 값을 반복적으로 검사하는 역할을 합니다.
3줄 :console.log(i);: 반복문의 본문으로, 현재 i의 값을 출력합니다. console.log() 함수는 괄호 안의 값을 콘솔에 출력하는 역할을 합니다.
결과 확인하기
02. 2부터 25까지 출력하기(초기값0)
for()문을 이용하여 2부터 25까지 출력하는 예제입니다.
{
for(let i=0; i<24; i++ ){
console.log(i+2);
}
}
2줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다.
let i = 0;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 0으로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i < 24;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 24보다 작을 동안 반복문이 계속 실행됩니다.
i++: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 1씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 1씩 증가하면서, 0부터 23까지의 값을 반복적으로 검사하는 역할을 합니다.
3줄: 루프 내부에서 i에 2를 더한 값을 계산하고, 계산된 값이 console.log 함수를 통해 출력됩니다.
결과적으로, 2부터 25까지의 숫자가 연속적으로 문서에 출력될 것입니다.
결과 확인하기
03. 1부터 20까지 출력하기(짝수만)(3가지)
for()문,while문, if문 for문을 이용하여 1부터 20까지 (짝수만) 출력하는 예제입니다.
{
//for문
for(let i=2; i<=20; i+=2 ){
console.log(i);
}
//while문
let i = 2 ;
while (i<= 20){
console.log(i);
i +=2; // 2씩 증가한다.
}
//if문 for문
for(let i=1; i<20; i++){
if(i % 2 == 0){
console.log(i);
}
}
}
3줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다
let i = 2;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 2로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i i<= 20;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 20보다 작거나 같을 동안 반복문이 계속 실행됩니다.
i += 2: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 2씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 2씩 증가하면서, 2부터 20까지의 짝수 값을 반복적으로 검사하는 역할을 합니다.
4줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
8줄: let i = 2;: 반복문 밖에서 변수 i를 2로 초기화합니다. 이 변수는 반복문 내에서 사용될 것입니다.
9줄: while (: 'while' 키워드로 시작하는 반복문의 선언 부분입니다. 'while' 반복문은 조건이 참인 동안 반복됩니다.
i i<= 20;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 20보다 작거나 같은 동안 반복문이 실행됩니다.
10줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
11줄: i += 2;: 반복문의 본문 내에서 i 값을 2씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 2씩 증가하면서, 2부터 20까지의 짝수를 반복적으로 출력하는 역할을 합니다.
15줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다.
let i = 1;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 1로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i i<= 20;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 20보다 작거나 같을 동안 반복문이 계속 실행됩니다.
i++: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 1씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 1씩 증가하면서, 1부터 20까지의 값을 반복적으로 검사하는 역할을 합니다.
16줄: if (i % 2 == 0) {: 조건문으로, 현재 i의 값이 짝수인지 검사합니다. % 연산자는 나머지를 구하는 연산을 수행하는데, i % 2의 결과가 0이면 i는 짝수입니다.
결과적으로, 1부터 20까지의 숫자 중 짝수만이 순서대로 콘솔에 출력될 것입니다.
17줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
결과 확인하기
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=1; i<=20; i++){
if(i % 2 == 1){
console.log(i);
}
}
}
3줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다.
let i = 1;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 1로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i i<= 20;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 20보다 작거나 같을 동안 반복문이 계속 실행됩니다.
i += 2: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 2씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 2씩 증가하면서, 1부터 20까지의 홀수 값을 반복적으로 검사하는 역할을 합니다.
4줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
8줄: let i = 1;: 반복문 밖에서 변수 i를 1로 초기화합니다. 이 변수는 반복문 내에서 사용될 것입니다.
9줄: while (: 'while' 키워드로 시작하는 반복문의 선언 부분입니다. 'while' 반복문은 조건이 참인 동안 반복됩니다.
i i<= 20;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 20보다 작거나 같은 동안 반복문이 계속 실행됩니다.
10줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
11줄: i += 2;: 반복문의 본문 내에서 i 값을 2씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 2씩 증가하면서, 1부터 20까지의 홀수를 반복적으로 출력하는 역할을 합니다.
15줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다.
let i = 1;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 1로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i i<= 20;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 20보다 작거나 같을 동안 반복문이 계속 실행됩니다.
i++: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 1씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 1씩 증가하면서, 1부터 20까지의 값을 반복적으로 검사하는 역할을 합니다.
16줄: if (i % 2 == 1) {: 조건문으로, 현재 i의 값이 홀수인지 검사합니다. % 연산자는 나머지를 구하는 연산을 수행하는데, i % 2의 결과가 1이면 i는 홀수입니다.
17줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
결과적으로, 1부터 20까지의 숫자 중 홀수만이 순서대로 콘솔에 출력될 것입니다.
결과 확인하기
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 =5; i<=100; i+=5){
if(i % 5 == 0){
console.log(i);
}
}
}
2줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다.
let i = 5;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 5로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i i<= 100;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 100보다 작거나 같을 동안 반복문이 계속 실행됩니다.
i += 5: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 5씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 5씩 증가하면서, 5부터 100까지의 숫자 중 5의 배수를 반복적으로 검사하는 역할을 합니다.
3줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
6줄: let i = 5;: 반복문 밖에서 변수 i를 5로 초기화합니다. 이 변수는 반복문 내에서 사용될 것입니다.
7줄: while (: 'while' 키워드로 시작하는 반복문의 선언 부분입니다. 'while' 반복문은 조건이 참인 동안 반복됩니다.
i i<= 100;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 100보다 작거나 같은 동안 반복문이 계속 실행됩니다.
8줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
9줄: i += 5;: 반복문의 본문 내에서 i 값을 5씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 5씩 증가하면서, 5부터 100까지의 숫자 중 5의 배수를 반복적으로 출력하는 역할을 합니다.
12줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다.
let i = 5;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 5로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i i<= 100;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 100보다 작거나 같을 동안 반복문이 계속 실행됩니다.
i += 5: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 5씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 5씩 증가하면서, 5부터 100까지의 숫자 중 5의 배수를 반복적으로 검사하는 역할을 합니다.
13줄: if (i % 5 == 0) {: 조건문으로, 현재 i의 값이 5의 배수인지 검사합니다. % 연산자는 나머지를 구하는 연산을 수행하는데, i % 5의 결과가 0이면 i는 5의 배수입니다.
14줄: 루프 내부에서 i 값을 console.log 함수를 사용하여 출력합니다.
결과적으로, 5부터 100까지의 숫자 중 5의 배수가 순서대로 콘솔에 출력될 것입니다.
결과 확인하기
06. 1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)
for문 if문을 이용하여 1부터 20까지(짝수는 빨간색, 홀수는 파란색) 출력하는 예제입니다.
{
for(let i=1; i<=20; i++){
if(i % 2 !== 0){
console.log("<span style='color:red'>"+ i + "<br></span>");
} else {
console.log("<span style='color:blue'>" + i + "<br></span>");
}
}
}
2줄: for (: 'for' 키워드로 시작하는 반복문의 선언 부분입니다.
let i = 1;: 초기화 부분으로, 반복문이 시작될 때 변수 i를 1로 설정합니다. 이 변수는 반복문의 카운터로 사용될 것입니다.
i i<= 20;: 조건 부분으로, 반복문이 실행될 조건을 나타냅니다. i가 20보다 작거나 같을 동안 반복문이 계속 실행됩니다.
i++: 이 부분은 반복문의 각 반복이 끝날 때마다 실행되는 부분입니다. i 값을 1씩 증가시킵니다. 이는 반복문이 실행될 때마다 i가 1씩 증가하면서, 1부터 20까지의 값을 반복적으로 검사하는 역할을 합니다.
3줄: if (i % 2 !== 0) {: 조건문으로, 현재 i의 값이 홀수인지 검사합니다. % 연산자는 나머지를 구하는 연산을 수행하는데, i % 2의 결과가 0이 아니면 i는 홀수입니다. (!==는 "같지 않음"을 나타내는 비교 연산자입니다.)
4줄: console.log("<span style='color:red'>"+ i + "<br></span>");: 조건문이 참인 경우인 홀수일 때, 태그를 사용하여 현재 i의 값을 빨간색으로 스타일링하여 콘솔에 출력합니다. style 속성을 이용하여 글자 색을 변경하고, 줄바꿈(
)을 포함하여 출력합니다.
5줄: else {: 조건문의 조건이 거짓인 경우에 실행됩니다. 즉, 짝수인 경우에 해당됩니다.
6줄: console.log("<span style='color:blue'>" + i + "<br></span>");: else 블록 내에서는 태그를 사용하여 현재 i의 값을 파란색으로 스타일링하여 콘솔에 출력합니다. 스타일은 color:blue로 변경하고, 줄바꿈(
)을 포함하여 출력합니다.
결과적으로, 1부터 20까지의 숫자 중 홀수는 빨간색, 짝수는 파란색으로 스타일링된 형태로 콘솔에 출력될 것입니다.
결과 확인하기
07. 배열 데이터 1부터 10까지 출력하기
배열 데이터를 이용하여 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]);
}
}
2줄: const arr를 사용하여 이름이 "arr"인 배열을 생성하고 초기값으로 1부터 10까지의 정수가 들어있는 배열을 할당합니다.
4줄: for 루프가 시작됩니다. 초기에 i 변수를 0으로 초기화합니다. 이 변수는 배열의 인덱스를 나타냅니다.
조건 i < arr.length 가 참인 동안에 루프가 실행됩니다. 이 조건은 배열의 길이보다 작은 인덱스일 동안 루프를 실행합니다. 이렇게 하면 배열의 모든 요소를 반복하게 됩니다.
5줄: 루프 내에서 console.log(arr[i])를 사용하여 배열의 각 요소를 출력합니다. i는 배열의 현재 인덱스를 나타내므로 arr[i]는 배열에서 현재 인덱스에 해당하는 값을 가져옵니다.
결과 확인하기
08. 구구단 출력하기(8단만 출력하기)
중첩for()문을 이용하여 구구단 8단을 출력하는 예제입니다.
{
for(i=8; i<9; i++){
console.log(i + "단<br>")
for(j=1; j<=10; j++){
console.log(i + " * " + j + " = " + i*j + "<br>")
}
}
}
2줄: 외부의 첫 번째 for 루프에서 i 변수를 8로 초기화하고, i가 9보다 작을 때까지 (i < 9) 루프가 실행됩니다. 이 루프는 8단만을 출력합니다.
3줄: 외부 루프의 각 반복에서 "i + '단<br>'" 형식의 문자열을 출력합니다. 여기서 i는 현재 8로 설정되어 있으므로 "8단<br>"이 출력됩니다.
4줄: 내부의 두 번째 for 루프에서 j 변수를 1로 초기화하고, j가 10 이하일 때까지 (j <= 10) 루프가 실행됩니다. 이 루프는 구구단의 한 행을 출력합니다.
5줄:내부 루프의 각 반복에서 "i * j = i*j + '<br>'" 형식의 문자열을 출력합니다. 여기서 i는 현재 8로 설정되어 있으며, j는 현재 루프의 반복 횟수에 따라 변합니다. 곱셈 결과와 줄바꿈 문자 (<br>)이 함께 출력됩니다.
내부 루프가 종료되면 다음 단의 내용을 출력하기 위해 외부 루프의 반복이 진행됩니다. 이러한 과정이 8단부터 8 * 1부터 8 * 10까지의 구구단을 출력하는데 사용됩니다.
결과 확인하기
09.테이블 출력하기(5*5 출력하기)
중첩 for()을 이용하여 5*5 테이블 출력합니다./p>
{
let num = 1;
let table ="<table class = 'table'>";
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);
}
2줄: num 변수를 선언하고 초기값을 1로 설정합니다.
3줄: table 변수를 선언하고 초기값을 <table class='table'>로 설정합니다. 이는 HTML 테이블을 시작하는 태그입니다. class 속성은 "table" 클래스를 할당하고 있습니다.
5줄: i 변수를 사용한 반복문을 시작합니다. 이 반복문은 5번 실행됩니다. 각각의 반복은 표의 한 행을 나타냅니다.
6줄: 각 행을 나타내는 <tr> 태그를 table 문자열에 추가합니다.
8줄: j 변수를 사용한 또 다른 반복문을 시작합니다. 이 반복문은 5번 실행되며 각각의 반복은 한 행에 5개의 열을 나타냅니다.
9줄: 현재의 num 값을 포함하는 <td> 태그를 table 문자열에 추가합니다. num 값은 1부터 시작해서 각 셀마다 1씩 증가합니다. 이로써 표의 각 셀에 1부터 25까지의 숫자가 들어갑니다.
10줄: 변수를 1 증가시킵니다.
12줄: 한 행의 열을 모두 추가한 후, 행을 닫는 </tr> 태그를 table 문자열에 추가합니다.
14줄: 모든 행과 열을 추가한 후, 표를 닫는 </table> 태그를 table 문자열에 추가합니다.
16줄: 최종적으로 생성된 HTML 테이블을 문서에 출력합니다.
결과적으로 이 코드는 5x5 크기의 HTML 테이블을 생성하고 표의 각 셀에는 1부터 25까지의 숫자가 차례대로 들어갑니다.
결과 확인하기
10. 테이블 출력하기(5*5 짝수만 나오게 출력하기)
중첩for문을 이용하여 5행 5열 표를 만들고, 짝수만 나오게 출력하는 예제입니다.
{
let num = 2;
let table ="<table class = 'table'>";
for(let 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로 설정합니다.
3줄: table 변수를 선언하고 초기값을 <table class='table'>로 설정합니다. 이는 HTML 테이블을 시작하는 태그입니다. class 속성은 "table" 클래스를 할당하고 있습니다.
5줄: i 변수를 사용한 반복문을 시작합니다. 이 반복문은 5번 실행됩니다. 각각의 반복은 표의 한 행을 나타냅니다.
6줄: 각 행을 나타내는 <tr> 태그를 table 문자열에 추가합니다.
8줄: j 변수를 사용한 또 다른 반복문을 시작합니다. 이 반복문은 5번 실행되며 각각의 반복은 한 행에 5개의 열을 나타냅니다.
9줄: 현재의 num 값을 포함하는 <td> 태그를 table 문자열에 추가합니다. 이전 코드와 달리 num 값은 2씩 증가합니다. 따라서 표의 각 셀에는 2, 4, 6, 8, 10, 12, ... 과 같은 숫자가 들어갑니다.
10줄: num 변수를 2씩 증가시킵니다.
12줄: 한 행의 열을 모두 추가한 후, 행을 닫는 태그를 table 문자열에 추가합니다.
14줄: 모든 행과 열을 추가한 후, 표를 닫는 </table> 태그를 table 문자열에 추가합니다.
16줄: 최종적으로 생성된 HTML 테이블을 문서에 출력합니다.
결과적으로 이 코드는 5x5 크기의 HTML 테이블을 생성하고 표의 각 셀에는 2, 4, 6, 8, 10, 12, ... 과 같이 2씩 증가하는 숫자가 들어갑니다.
결과 확인하기
11. 테이블 출력하기(10*10 짝수는 빨간색, 홀수는 파란색 출력하기)
for()문과 if()문을 이용하여 짝수는 빨간색, 홀수는 파란색 출력하는 테이블 예제입니다.
{
let num = 1;
let table ="<table class = 'table'>";
for(let i=1; i<=10; i++){
table += "<tr>";
for(let j=1; 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);
}
2줄:num 변수를 선언하고 초기값을 1로 설정합니다.
3줄:table 변수를 선언하고 초기값을<table class='table'>로 설정합니다. 이는 HTML 테이블을 시작하는 태그입니다. class 속성은 "table" 클래스를 할당하고 있습니다.
5줄:i 변수를 사용한 반복문을 시작합니다. 이 반복문은 10번 실행됩니다. 각각의 반복은 표의 한 행을 나타냅니다.
6줄:각 행을 나타내는 <tr> 태그를 table 문자열에 추가합니다.
8줄:j 변수를 사용한 또 다른 반복문을 시작합니다. 이 반복문은 10번 실행되며 각각의 반복은 한 행에 10개의 열을 나타냅니다.
9줄:현재의 num이 짝수인지 검사합니다.
10줄:만약 짝수라면, 빨간색 텍스트를 가진 <span> 태그를 포함하는
12줄:그렇지 않으면 파란색 텍스트를 가진 <span> 태그를 포함하는
14줄:num 변수를 1 증가시킵니다.
16줄:한 행의 열을 모두 추가한 후, 행을 닫는 </tr> 태그를 table 문자열에 추가합니다.
18줄:모든 행과 열을 추가한 후, 표를 닫는 </table> 태그를 table 문자열에 추가합니다.
20줄:최종적으로 생성된 HTML 테이블을 문서에 출력합니다.
결과적으로 이 코드는 10x10 크기의 HTML 테이블을 생성하고, 짝수 번호의 셀은 빨간색으로, 홀수 번호의 셀은 파란색으로 표시합니다.