01. 데이터 이펙트 : 1부터 100까지 출력하기
for문을 이용해서 1-100까지 출력하는 예제 입니다. i가 1이면 100보다 작으므로 값은 1나오고 i에 1이 증가 됩니다. 순차적으로 진행하면 i가 100까지 진행되고 101부터는 false값이 나옵니다.
{
for(let i=1; i<=100; i++){ //반복문 for문
console.log(i)
}
}
결과 확인하기
02. 데이터 이펙트 : 0부터 50까지 출력하기
for문을 이용해서 0-50까지 출력하는 예제 입니다. i값이 0부터 50까지 순차적으로 대입되고 51부터는 false값이 나와 값이 성립하지 않습니다.
{
for(let i=0; i<51; i++){ //i = i + 1
console.log(i) //초기값을 0으로 설정하고 1씩 증가시켜 50번 반복함
}
}
결과 확인하기
03. 데이터 이펙트 : 1부터 100까지 짝수만 출력하기
for문을 이용해서 출력하는 예제입니다. i+=2는 변수에 2씩 더하는 것을 의미합니다. i에 0이 들어가면 i는 100보다 같거나 작으므로 0이 출력되고 i값에 2를 더하게 됩니다.
이에 의해 순차적으로 i값에 2가 더해지면 0,2,4,...,100까지 값이 구해집니다.
{
for(let i=0; i<=100; i+=2){ //i = i + 2
console.log(i)
}
}
결과 확인하기
04. 데이터 이펙트 : 1부터 100까지 5의 배수만 출력하기
for문과 if문을 이용하여 5의 배수를 출력하는 예제입니다.조건문 if문과 증감연산자를 이용합니다. +=5는 변수에 5를 더하는 의미 입니다. %는 몫을 나눈후 나머지를 의미합니다. if문에서 i의 값이 5의 배수일 경우에만 나머지의 값이 0이 됩니다.
{
// 증감 연산자를 이용한 방법
for(let i=0; i<=100; i+=5){
console.log(i)
};
// if문을 이용한 방법
for(let i=1; i<=100; i++){
if( i % 5 == 0){
console.log(i)
};
}
}
결과 확인하기
05. 데이터 이펙트 : 1부터 100까지 짝수(파란색) 홀수(빨간색) 출력하기
for문을 이용하여 짝수는 파란색 홀수는 파란색을 출력하는 예제입니다.
{
for( let i=1; i"<100; i++ ){
if( i % 2 == 0){ // %연산자를 이용하여 2로 나눈 값이 0일 경우 짝수입니다.
document.write("<span style='color:blue'>"+i+""</span>"); // span은 문장의 특정 구역에 CSS스타일을 지정할 때 사용합니다.
}
}
if( i % 2 == 1){ // %연산자를 이용하여 2로 나눈 값이 1일 경우 홀수입니다.
document.write(""<span style='color:red'>"+i+""</span>");
}
}
결과 확인하기
1,3,5,7, ... ,99
06.데이터 이펙트 : 1부터 100까지 합 구하기
for문을 이용하여 1부터 100까지 합을 구하는 예제입니다.
{
let sum = 0; // 변수 sum을 지정합니다.
for(let i=1; i<=100; i++){ // i의 초기값은 1 조건은 100이하 증감식은 1씩 증가
sum += i; // sum = sum + i
}
document.write(sum);
}
결과 확인하기
07.데이터 이펙트 : for문을 이용해서 100칸 테이블 만들기
for문을 이용하여 100칸의 테이블을 만드는 예제입니다. for문을 이용하여 10행 10열의 100칸 테이블을 만드는 코드입니다.
{
let table = "<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);
}
결과 확인하기
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
08.데이터 이펙트 : 중첩 for문을 이용해서 구구단 만들기
중첩 for문을 이용해서 구구단을 만드는 방법입니다. 구구단은 2단부터 시작하기 때문에 초기식은 2입니다. 9단까지 있으므로 조건식은 9와 같거나 작고
초기식이 2인 경우 자식 for문이 1에서 9까지 진행되는 동안 document.write식에 의하여 부모 초기식의 i와 자식 초기식의 j가 곱해집니다.
i변수는 2부터 9까지 입력되는 동안 j변수가 1부터 9까지 계속해서 곱해집니다.
{
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>");
}
}
결과 확인하기
3단 3,6,9, ... ,27
...
9단 9,18,27, ... ,81
09.데이터 이펙트 : 테이블 25칸(짝수:빨간색, 홀수:파란색)
테이블을 생성하고, 테이블 안에 빨간색과 파란색으로 번갈아가며 셀에 번호를 채우는 코드입니다.
{
let table = "<table border='1'>";
let count = 0; //count 변수를 0으로 초기화합니다. 이 변수는 테이블 셀 안에 들어갈 숫자를 의미합니다.
for(let i=0; i<5; i++){
table += "<tr>"; // 테이블에 새로운 행을 추가 합니다.
for(let j=0; j<5; j++){
count++; // 행 안에 들어갈 숫자를 1씩 증가시킵니다.
if(count % 2 == 0){ // 변수가 짝수인지 확인합니다.
table += "<td style='color:red'>"+count+"</td>"; // 테이블에 새로운 셀을 추가하고, 빨강색으로 번호를 채웁니다.
} else {
table += "<td style='color:blue'>"+count+"</td>";
}
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
결과 확인하기
10.데이터 이펙트 : 테이블 25칸(3의 배수는 빨간색 5의 배수는 파란색)
테이블을 생성하고, 테이블 안에 빨간색과 파란색으로 번갈아가며 셀에 번호를 채우는 코드입니다.
{
let num = 0;
let table = "<table border='1'>" // 테이블 두께를 1로 지정합니다.
for(let i=1; i<=5; i++){ // 테이블의 행을 5칸으로 지정합니다.
table += "<tr>"
for(let j=1; j<=5; j++){ // 테이블의 열을 5칸으로 지정합니다.
num ++; // 변수 num 을 1씩 증가합니다.
if(num % 3 == 0){
table += "<td style='color:red'>" + num + "</td>" // 테이블 각 칸의 값에 num값을 넣고 3의 배수인 경우 빨간색으로 출력합니다.
} else if(num % 5 == 0){
table += "<td style='color:blue'>" + num + "</td>" // 5의 배수인 경우는 파란색
} else {
table += "<td>" +num+ "</td>" // 앞 2개의 조건과 다른 경우는 num 값이 그대로 나옵니다.
}
}
table += "</tr>"
}
document.write(table);
}