01. 1부터 10까지 출력하기(초기값 0)
for()문을 이용하여 1부터 10까지 출력
{
for(let i=0; i<10; i++){
console.log(1 + i);
}
}
for()문은 (초기값; 조건식; 증감값)으로 구성되어있다.
for(let i=0; i<10; i++)을 풀어보면 i의 초기값은 0이고 i가 10보다 작으면 반복문이 실행되고 실행 후 i++로 인해 1이 증가하는 것이다.
결과 확인하기
02. 2부터 25까지 출력하기(초기값 0)
for()문을 이용하여 2부터 25까지 출력
{
for(let i=0; i<24; i++){
console.log(2+i);
}
}
2부터 출력해야하지만 초기값은 0으로 고정되어있기에 최초 출력할 때 2를 더하고 그 다음부터는 1씩 증가하기때문에 2부터 25까지 출력이 가능하다.
결과 확인하기
03. 1부터 20까지 출력하기(짝수만 - 3가지 방법)
for(), while, for() + if를 이용하여 짝수만 출력
{
for(let i=2; i<21; i+=2){
console.log(i);
}
let j = 2;
while(j < 21){
console.log(j);
j+=2;
}
for(let k=2; k<21; k++){
if(k % 2 == 0){
console.log(k);
}
}
}
line 2 : i의 초기값이 2이며 그 후 반복될 때마다 2씩 증가하여 짝수만 출력하게 되었다.
line 7 : while을 이용한 반복문으로 역시 2로 시작 후 2씩 증가하여 짝수만 출력하게 되었다.
line 12 : for()와 if를 합한 것으로 k를 2나 나누었을때 나머지가 0이면 짝수일 것이므로
if로 조건을 달아
그에 적합한 k만 출력되도록하여 짝수만 출력이 되었다.
결과 확인하기
04. 1부터 20까지 출력하기(홀수만 - 3가지 방법)
for(), while, for() + if를 이용하여 홀수만 출력
{
for(let i=1; i<21; i+=2){
console.log(i);
}
let j = 1;
while(j < 21){
console.log(j);
j+=2;
}
for(let k=1; k<21; k++){
if(k % 2 == 1){
console.log(k);
}
}
}
line 2 : i의 초기값이 1이며 그 후 반복될 때마다 2씩 증가하여 홀수만 출력하게 되었다.
line 7 : while을 이용한 반복문으로 1로 시작 후 2씩 증가하여 홀수만 출력하게 되었다.
line 12 : for()와 if를 합한 것으로 k를 2나 나누었을때 나머지가 1이면 홀수일 것이므로
if로 조건을 달아
그에 적합한 k만 출력되도록하여 홀수만 출력이 되었다.
결과 확인하기
05. 1부터 100까지 출력하기(5의 배수 - 3가지 방법)
for(), while, for() + if를 이용하여 5의 배수 출력
{
for (i=5; i<101; i+=5){
console.log(i);
}
j = 5;
while (j<101){
console.log(j);
j += 5;
}
for (k=1; k<101; k++){
if (k % 5 == 0){
console.log(k);
}
}
}
line 2 : for()문을 이용하여 5의 배수를 출력한 것으로 초기값을 5로 설정, 반복마다 i의 값이 5씩 증가하도록 되어있다.
line 7 : while()문을 이용하여 5의 배수를 출력한 것으로 초기값 5로 설정, 반복마다 j의 값이 5씩 증가하도록 되어있다.
line 12 : for()문과 if가 합쳐진 것으로 k를 5로 나눈 나머지가 0일것을 조건으로 달아 5의 배수만 출력되도록 하였다.
결과 확인하기
06. 1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)
for()문과 if를 이용한 색상 바꾸기
{
for(i=1; i<21; i++){
if (i % 2 == 1){
document.write("<span style='color:blue'>" + i + "</span><br>")
} else{
document.write("<span style='color:red'>" + i + "</span><br>")
}
}
}
line 1 : i의 초기값을 1로주어 시작점을 1로 하였고 반복조건을 i가 21보다 작게하여 20분 반복하게 하였다.
line 2 : i를 2로 나눈 나머지의 값이 1이면 홀수이므로 if에 조건을 걸어 홀수를 찾아냈다.
line 3 : document.write써 브라우저에 글씨가 나타나게 하였고, ""로 파란색을 주었다.
line 4 : if로 조건을 다시거는 대신에 else로 그 외의 것을 짝수로 보았다.
line 5 : ""으로 빨간색을 주었다.
결과 확인하기
07. 배열 데이터 1부터 10까지 출력하기
for()문을 이용하여 배열 데이터 출력
{
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (i=0; i<arr.length; i++){
console.log(arr[i]);
}
}
line 1 : 배열 arr에 1~10까지의 숫자가 들어있다.
line 3 : arr.length은 배열 arr안에 들어있는 데이터이 개수를 구하는 메소드이다. 이 메소드를 이용하여 arr의 배열 개수만큼만 반복을 하도록 하였다.
line 5 : 배열 arr의 인덱스 부분에 i를 넣어 i가 인덱스를 대신하여 데이터의 위치를 출력해 주었다.
결과 확인하기
08. 구구단 출력하기(8단)
2중 for()문을 이용하여 구구단 8단 출력
{
for(i=8; i<9; i++){
document.write(i + " 단", "<br>");
for(j=1; j<10; j++){
document.write(i + " * " + j + " = " + i*j, "<br>");
}
}
}
line 2 : i의초기값 8, 반복조건을 9보다 작게하여 한번만 실행하도록 하였다.
line 4 : 2번째 for()문으로 1~9까지의 숫자가 나오도록 하였다. 이 두번째 for문이 전부 반복되어야 밖에있는 첫번째 for문이 실행된다.
결과 확인하기
09. 테이블 출력하기(5*5 출력하기)
스크립트를 활용하여 테이블 출력
{
let table = "<table>";
for(let i=1; i<6; i++){
table += "<tr>";
for(let j=1; j<6; j++){
table += "<td>1</td>";
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
line 2 : table이라는 변수를 만들어 table태그를 초기값으로 설정
line 4~5 : for()문을 활용하여 원하는 수만큼 tr태그를 table에 추가
line 6~7 : 중첩 for()문을 활용하여 td태그를 table에 추가
line 9 : table에 닫는tr태그 추가
line 12 : table에 닫는 table태그 추가
line 14 : table을 출력하면 위에 table에 추가한 것들이 전부 추가가 되어 결과가 나옴.
결과 확인하기
11111
11111
11111
11111
10. 테이블 출력하기(5*5 짝수만 나오게 출력하기)
스크립트를 활용한 테이블 출력
{
let table = "<table>";
let num = 2;
for(let i=1; i<6; i++){
table += "<tr>";
for(let j=1; j<6; j++){
table += "<td>" + num + "</td>";
num += 2;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
line 2 : table변수 선언
line 3 : num에 초기값설정
line 5 : for()문으로 column 설정
line 8~9 : 중첩 for()문으로 row 설정
line 10 : 초기값 num에 계속 2만 더해서 짝수만 나오게 함
결과 확인하기
11. 테이블 출력하기(10*10 짝수는 빨간색, 홀수는 파란색)
for()문과 if()문을 사용하여 조건이 있는 테이블 출력
{
let table = "<table>";
let num = 1;
for(let i=1; i<6; i++){
table += "<tr>";
for(let j=1; j<6; j++){
if(num % 2 == 1){
table += "<td><span style='color:blue'>" + num + "</span></td>";
} else{
table += "<td><span style='color:red'>" + num + "</span></td>";
}
num++;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
line 1~2 : 변수 선언
line 5 : 반복문으로 column 설정
line 8 : 반복문으로 row 설정
line 9~12 : num을 2로 나눈 나머지가 1일경우 홀수이므로 스타일설정으로 파란색을 주고
그 외에는 짝수이므로 빨간색을 줌
line 14 : num++로 num에 계속 1씩 추가함