01. 데이터 이펙트 : 1부터 100까지 출력하기
for문을 이용해서 1~100까지 출력하는 예제입니다.
for(let i=1; i<=100; i++){ //반복문 for문
console.log(i)
}
결과 확인하기
1
2
3
4
~~
100
2
3
4
~~
100
let i=1; 변수 i를 1로 할당한다.
i<=100; i가 100보다 같거나 작을때까지
console.log(i) 출력한다.
i++ 1씩 올린다.
반복
i<=100; i가 100보다 같거나 작을때까지
console.log(i) 출력한다.
i++ 1씩 올린다.
반복
02. 데이터 이펙트 : 0부터 50까지 출력하기
for문을 이용해서 0~50까지 출력하는 예제입니다.
for(let i=0; i<=50; i++){
console.log(i); //초기값을 0으로 설정하고 1씩 증가시켜서 50번 반복함
}
결과 확인하기
1
2
3
4
~~
50
2
3
4
~~
50
변수 i를 0부터 시작하여 50보다 작거나 같을 때까지 1씩 증가시키며 반복하면서, 각 반복마다 i 값을 출력하는 코드입니다.
03.데이터 이펙트 : 1부터 100까지 짝수만 출력하기
for문을 이용해서 짝수를 출력하는 예제입니다.
for(let i=0; i<=100; i+=2){
console.log(i)
}
결과 확인하기
2
4
6
8
10
~~ 100
4
6
8
10
~~ 100
증감 연산자를 이용하였습니다.
i += 2는 i = i + 2와 같습니다. (2씩 증가합니다.)
마찬가지로 1 += 3 이면 (3씩 증가합니다.)
i += 2는 i = i + 2와 같습니다. (2씩 증가합니다.)
마찬가지로 1 += 3 이면 (3씩 증가합니다.)
04-1.데이터 이펙트 : 1부터 100까지 5의 배수 출력하기(증감연산자)
증감연산자를 사용하여 같은 결과값을 출력하는 예제입니다.
// 증감 연산자를 이용한 방법
for(let i=0; i<=100; i+=5){
console.log(i)
}
결과 확인하기
5
10
15
20
25
~~ 100
10
15
20
25
~~ 100
변수 i를 0부터 시작하여 100보다 작거나 같을 때까지 5씩 증가시키며 반복하면서, 각 반복마다 i 값을 출력하는 코드입니다.
04-2.데이터 이펙트 : 1부터 100까지 5의 배수 출력하기(if문)
if문을 사용하여 같은결과값을 출력하는 예제입니다.
for(let i=1; i<=100; i++){
if( i % 5 == 0){
console.log(i)
}
}
결과 확인하기
5
10
15
20
25
~~ 100
10
15
20
25
~~ 100
반복문을 사용하여 변수 i를 1부터 100까지 1씩 증가시키면서, 각 i 값에 대해 if문을 사용하여 i가 5의 배수인지 검사합니다. i를 5로 나눈 나머지가 0이면 i는 5의 배수이므로, 이때 console.log 함수를 사용하여 i 값을 출력합니다.
05-1. 데이터 이펙트 : 1부터 100까지 짝수(파란색) 출력하기
if문 을 이용하여 1부터 100까지 짝수는 출력하기
for( let i=1; i<100; i++ ){
if(i % 2 == 0){
document.write("<span style='color:blue'>"+i+"</span>");
}
결과 확인하기
1
2
3
4
5
6
7
8
9
~~
100
if문을 사용하여 i를 2로 나눈 나머지가 0인지 검사합니다. i가 짝수일 경우, document.write() 함수를 사용하여 해당 i 값을 출력하는데, 이때 출력되는 텍스트의 색상을 파란색으로 설정합니다.
05-2. 데이터 이펙트 : 1부터 100까지 홀수(빨간색)으로 출력하기
for문을 이용하여 1부터 100까지 홀수는 빨간색으로 출력하기for( let i=1; i<100; i++ ){
if(i % 2 == 1){
document.write("<span style='color:red'>"+i+"</span>");
}
결과 확인하기
1
2
3 4 5 6 7 8 9 10 ~~ 100
3 4 5 6 7 8 9 10 ~~ 100
if문을 사용하여 i를 2로 나눈 나머지가 1인지 검사합니다. i가 홀수일 경우, document.write() 함수를 사용하여 해당 i 값을 출력하는데, 이때 출력되는 텍스트의 색상을 빨간색으로 설정합니다.
06. 데이터 이펙트 : 1부터 100까지 합 구하기
1부터 100까지 합을구하는 방법입니다.let sum = 0;
for(let i=1; i<=100; i++){
sum += i;
}
document.write(sum);
결과 확인하기
5050
복습전
07. 데이터 이펙트 : for문을 이용해서 100칸 테이블 만들기
중첩 for()문을 이용한 테이블 만들기 예제입니다.let table = "<table border=1>";
for(let i=1; i<=10; i++){
table += "<tr>";
for(let j=1; j<=10; j++){
table+= "<td>" + j + "</td>";
}
table += "</tr>";
}
table += "</table>";
document.write(table);
결과 확인하기
변수 table에 초기값 "<table border='1'>"을 할당합니다.
그리고 i를 1부터 10까지 1씩 증가시키면서, table 변수에 "<tr>" 문자열을 추가합니다.
내부 반복문에서는 j를 1부터 10까지 1씩 증가시키면서, table 변수에 "<td>"+ j +"</td>" 문자열을 추가합니다.
이렇게 생성된 각 열은 j의 값에 따라서 1부터 10까지의 숫자를 가집니다.
내부 반복문이 종료되면, 외부 반복문에서는 "</tr>" 문자열을 table 변수에 추가합니다.
이렇게 생성된 각 행은 i의 값에 따라서 1부터 10까지의 숫자를 가지는 10개의 열을 가지고 있습니다.
외부 반복문이 종료되면, "</table>" 문자열을 table 변수에 추가합니다.
이렇게 생성된 테이블은 table 변수의 값을 document.write() 함수를 사용하여 출력합니다.</h4>
08. 데이터 이펙트 : 중첩 for문을 이용해서 구구단 만들기
for문과 if문을 이용한 짝수 홀수 출력하는 방법입니다.for(let i=2; i<=9; i++){
document.write(i + "단","<br>");
for(let j=1; j<=9; j++){
document.write(i + "*" + j + "=" + i*j);
document.write("<br>");
}
document.write("<br><br>");
}
결과 확인하기
2단
2*1=2
2*2=4
2*3=6
2*4=8
2*5=10
2*6=12
2*7=14
2*8=16
2*9=18
~
9단
9*1=9
9*2=18
9*3=27
9*4=36
9*5=45
9*6=54
9*7=63
9*8=72
9*9=81
2*1=2
2*2=4
2*3=6
2*4=8
2*5=10
2*6=12
2*7=14
2*8=16
2*9=18
~
9단
9*1=9
9*2=18
9*3=27
9*4=36
9*5=45
9*6=54
9*7=63
9*8=72
9*9=81
먼저, for 반복문을 이용하여 2부터 9까지의 숫자를 반복합니다.
반복문의 실행 내용은 다음과 같습니다.
document.write(i + "단","<br>"); : i값과 "단" 문자열을 결합하여 출력하고, 줄바꿈(<br>) 태그를 추가합니다.
내부에 또 다른 for 반복문을 이용하여 1부터 9까지의 숫자를 반복합니다.
document.write(i + "*" + j + "=" + i*j); : i값과 j값, 그리고 구구단 결과인 i*j값을 결합하여 출력합니다.
document.write("<br>"); : 줄바꿈(<br>) 태그를 추가합니다.
외부 for 반복문이 끝나면 다시 줄바꿈(<br>) 태그를 추가합니다.
document.write("<br><br>"); : 빈 줄을 추가하여 구구단 사이에 간격을 두고 출력합니다.
09. 데이터 이펙트 : 테이블 25칸 (짝수: 빨간색, 홀수: 파란색)
for문으로 총25칸의 테이블을 만들고 홀수엔 파란색 짝수에는 빨간색을 출력하는 코드입니다.let table = "<table border='1'>";
let num = 0;
for(let i=0; i<5; i++){
table += "<tr>";
for(let j=0; j<5; j++){
num++;
if(num % 2 == 0){
table += "<td style='color:red'>" + num + "</td>";
} else {
table += "<td style='color:blue'>" + num + "</td>";
}
};
table += "</tr>";
}
table += "</table>";
document.write(table);
결과 확인하기
위 코드는 JavaScript를 사용하여 HTML 테이블을 생성하는 코드입니다.
테이블을 생성하고자 하는 HTML 페이지에서 위의 코드를 사용하면, 5x5 크기의 테이블이 생성됩니다.
각 셀은 번갈아가면서 파란색과 빨간색으로 색칠되며, 셀 안에는 1부터 25까지의 숫자가 들어갑니다.
JavaScript 코드를 이용하여 HTML 요소를 생성할 수 있기 때문에, 동적인 웹 페이지를 만드는 데 유용합니다. 이 코드에서는 for 루프를 사용하여 테이블과 테이블 셀을 생성하고,
조건문을 사용하여 색상을 결정하는 등 JavaScript의 기본 문법을 활용하고 있습니다.
테이블을 생성하고자 하는 HTML 페이지에서 위의 코드를 사용하면, 5x5 크기의 테이블이 생성됩니다.
각 셀은 번갈아가면서 파란색과 빨간색으로 색칠되며, 셀 안에는 1부터 25까지의 숫자가 들어갑니다.
JavaScript 코드를 이용하여 HTML 요소를 생성할 수 있기 때문에, 동적인 웹 페이지를 만드는 데 유용합니다. 이 코드에서는 for 루프를 사용하여 테이블과 테이블 셀을 생성하고,
조건문을 사용하여 색상을 결정하는 등 JavaScript의 기본 문법을 활용하고 있습니다.
10. 데이터 이펙트 : 테이블 25칸 (3의배수만 출력하고(5의 배수는 빨간색))
25칸 테이블을 3의배수만 출력하고 그중 5의 배수는 빨간색으로 표현하는 방법입니다.{
let table = "<table border='1'>";
let num = 0;
for(let i=0; i<5; i++){
table += "<tr>";
for(let j=0; j<5; j++){
num += 3;
if(num % 3 == 0 && num % 5 == 0){
table += "<td style='color:red'>" + num + "</td>";
} else {
table += "<td>" + num + "</td>";
};
};
table += "</tr>";
};
table += "</table>";
document.write(table);
}
결과 확인하기
결과 확인합시다.
복습전
11. 데이터 이펙트 : 배열 데이터에서 10보다 큰 수 찾기
배열 데이터에서 10보다 큰 수 찾기 예제입니다.const arr = [1, 3, 5, 7, 9, 10, 11, 13, 15, 17, 19]
for(let i=0; i<arr.length; i++){
if(arr[i]>10){
document.write(arr[i]);
}
}
결과 확인하기
11, 13, 15, 17, 19
복습전