01. 데이터 이펙트 : 1부터 100까지 출력하기
for문을 이용해서 1부터 100까지 출력하는 방법입니다.
for(let i=1; i<=100; i++){
console.log(i);
}
결과 확인하기
for 반복문
for 반복문을 사용해서 1부터 100까지 출력
i의 초기값 1 (i=1);
i는 100보다 작거나 같다의 조건문 (i<=100);
조건값이 true면 console.log(i) 실행
실행 후 증감식 (i++) 실행 --> 반복
02. 데이터 이펙트 : 0부터 50까지 출력하기
범위 값은 초기값과 조건식으로 변경 가능하다.
for(let i=0; i<51; i++){
console.log(i);
}
결과 확인하기
for 반복문
i의 초기값 0으로 변경 (i=0);
i의 조건문 변경 i<=50 혹은 i<51 둘 다 가능
03. 데이터 이펙트 : 1부터 100까지 짝수만 출력하기
증감식에 변화를 주어 2씩 증가가 가능하다.
for(let i=2; i<=100; i+=2){
console.log(i);
}
결과 확인하기
for반복문 (2씩증가)
2부터 시작해서 i값이 100보다 작거나 같을 때 출력,
조건문 false까지 2씩 더하며 반복
04. 데이터 이펙트 : 1부터 100까지 5의 배수 출력하기
if()문과 %연산을 사용하여 나머지 값으로 배수를 출력 가능하다.
for(let i=5; i<=100; i+=5){
console.log(i);
} // 증감식을 사용하여 5의 배수를 출력하는 방법.
for(let i=0; i<=100; i++){
if(i % 5 == 0){
console.log(i);
}
}
결과 확인하기
if()문과 %연산자 사용
if()문과 %연산을 사용하여도 배수 출력이 가능하다.
i를 5로 나누었을 때 나머지가 0이면 출력
05. 데이터 이펙트 : 1부터 100까지 짝수(파란색) 홀수(빨간색) 출력하기
for문 document로 출력하기
for(let i=0; i<=100; i++){
if(i % 5 ==0){
document.write("<span style='color:blue'>" + i + "</span>");
}
if(i % 7 ==0){
document.write("<span style='color:red'>" + i + "</span>");
}
}
결과 확인하기
5의 배수와 7의 배수 if()문 사용
if()문에 %연산을 사용하여 5의 배수와 7의 배수를 출력 가능하고
각각에 스타일을 사용하여 빨간색 파란색 출력이 가능하다.
06. 데이터 이펙트 : 1부터 100까지 합 출력하기
반복문으로 합 출력하기
let sum = 0
for(let i=1; i<=100; i++){
sum += i;
}
document.write(sum);
결과 확인하기
합 구하는 반복문
100번 반복하는 반복문에 매 반복 시마다 변수 sum에 i를 추가하는 식을 만들어준다.
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);
결과 확인하기
for중첩문을 사용
for중첩문을 사용하여 열 하나당 행 열번 반복하는 작업이 가능하다.
첫 번째 for문에 <tr>을 두 번째 for문에 <td>를 사용해야 한다.
두 번째 for문(<td>)이 조건을 만족하게 되면 첫 번째 for문(<tr>)이 실행된다.
08. 데이터 이펙트 : 중첩 for문을 이용해서 구구단 만들기
for중첩문을 이용하여 구구단 만들기가 가능하다.
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>");
}
결과 확인하기
for중첩문을 사용
for중첩문을 사용하여 변수i의 반복마다 j의 곱을 나타낼 수 있다.
변수 + "문자열"을 준수하여 적어야한다.
두 번째 for문에도 i값을 적용시킬 수 있다.
09. 데이터 이펙트 : 테이블 25칸(짝수:빨간색, 홀수:파란색)
for문과 if문 활용하여 테이블 만들기
let table = "<table border=1>";
let count = 1;
for(let i=1; i<=5; i++){
table += "<tr>"
for(let j=1; j<=5; j++){
if(count % 2 == 0){
table += "<td style='color:red'>" + count + "</td>"
} else {
table += "<td style='color:blue'>" + count + "</td>"
}
count++
}
table += "</tr>"
}
table += "</table>";
document.write(table);
결과 확인하기
위 6번에서 만든 테이블에서 count라는 변수를 만들어 각 <td>태그에 숫자를 넣어주고,
count의 짝수, 홀수를 구분하는 조건문을 넣어 각각의 스타일태그를 걸어주었다.
10. 데이터 이펙트 : 테이블 25칸(3의배수만/5의 배수는 빨간색)
for문과 if문 활용하여 테이블만들기2
let table = "<table border=1>"
let num = 0
for(let i=1; i<=5; i++){
table += "<tr>"
for(let j=1; j<=5; j++){
num += 3;
if(num % 5 == 0){
table += "<td style='color:red'>" + num + "</td>"
} else {
table += "<td>" + num + "</td>"
}
}
table += "</tr>"
}
table += "</table>"
document.write(table);
결과 확인하기
for중첩문을 사용
위의 테이블 만들기와 같이 테이블을 만들어주고 안에 들어가는 변수 num의 증가량을 3씩 바꾸어주었다.
조건문으로 5의 배수에는 빨간색 스타일을 적용시켜주었다.
11. 데이터 이펙트 : 배열 데이터에서 10보다 큰 수 찾기
반복문과 조건문으로 조건에 맞는 값 배열에서 출력하기
const arr = [1,3,5,7,9,11,13,15,17,19]
for(let i=0; i<arr.length; i++){
if(arr[i] >= 10){
document.write(arr[i]);
}
}
결과 확인하기
배열에서 조건부 출력하기
반복문을 통해 배열의 요소를 출력 가능하고, 조건문을 걸어 특정 값을 출력 가능하다.