01. 데이터 이펙트 : 1부터 100까지 출력하기
for문을 이용해서 1~100까지 출력하는 예제입니다.
for(let i=1; i<=100; i++){ //반복문 for문
console.log(i)
}
결과 확인하기
02. 데이터 이펙트 : 0부터 50까지 출력하기
for문을 이용해서 0~50까지 출력하는 예제입니다.
for(let i=0; i<=50; i++){ //반복문 for문
console.log(i)
}
결과 확인하기
03. 데이터 이펙트 : 1부터 100까지 짝수만 출력하기
for문을 이용해서 1~100까지 짝수만 출력하는 예제입니다.
for(let i=0; i<=100; i+=2){
console.log(i)
}
// 증감 연산자를 이용
// i += 2는 i = i + 2와 같은 식(2씩 증가)
결과 확인하기
04.데이터 이펙트 : 1부터 100까지 5의 배수 출력하기
for문과 if문을 이용해서 1~100까지 5의 배수 출력하는 예제입니다.
// 증감 연산자를 이용한 방법
for(let i=0; i<=100; i+=5){
console.log(i)
}
// if문을 이용한 방법
for(let i=1; i<=100; i++){
if(i % 5 == 0){ // % 연산자를 이용해서 나머지가 0이면 그 수의 배수를 의미한다.
console.log(i)
}
}
결과 확인하기
05. 데이터 이펙트 : 1부터 100까지 짝수(파란색) 홀수(빨간색) 출력하기
for문과 if문을 이용해서 1부터 100까지 짝수(파란색) 홀수(빨간색) 출력하는 예제입니다.
for(let i=1; i<=100; i++){
if(i % 2 == 0){ // % 연산자를 이용해서 나머지가 0이므로 2의 배수(짝수)를 의미한다.
document.write("<span style='color:blue'>" + i + "</span>") // 짝수(파란색)을 만들기 위한 if문 예시
}
if(i % 2 == 1){ // % 연산자를 이용해서 나머지가 1이므로 홀수를 의미한다.
document.write("<span style='color:red'>" + i + "</span>") // 홀수(빨간색)을 만들기 위한 if문 예시
}
}
결과 확인하기
css 스타일보다 우선 순위로 스타일 주기
css 스타일보다 우선적으로 스타일을 주기 위해서 태그에다가 직접적으로 스타일을 주게 되면 우선적으로 인식하기 때문에 css 스타일을 무시하고 적용된다.
ex) span style='color:blue', 'font-size=12px'> + 스타일 우선 순위 + </span>
결과) <span style='color:blue'>스타일 우선 순위
06. 데이터 이펙트 : for문을 이용해서 테이블 만들기
중첩 for문을 이용해서 10행 & 10열 칸짜리 테이블 만들기 예제입니다.
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);
결과 확인하기
숫자와 문자 같이 입력하기
숫자와 문자를 같이 입력하기 위해서는 서로 숫자와 문자 사이에 ' + ' 를 입력해주면 됩니다.
07. 데이터 이펙트 : 중첩 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>");
}
결과 확인하기
08. 데이터 이펙트 : 테이블 25칸(짝수:빨간색, 홀수:파란색)
중첩 for문, if문을 이용해서 테이블 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);
결과 확인하기
09. 데이터 이펙트 : 테이블 25칸(3의 배수 출력(5의 배수는 빨간색))
f중첩 for문, if문을 이용해서 테이블 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++;
let sum = num*3
if(sum % 3 == 0 && sum % 5 == 0){
table += "<td style='color:red'>" + sum + "</td>"
} else if(sum<100){
table += "<td>" + sum + "</td>"
} else {
};
};
table += "</tr>";
};
table += "</table>";
document.write(table);
결과 확인하기
10. 데이터 이펙트 : 배열 데이터에서 10보다 큰 수 찾기
for문, if문을 이용해서 큰 수 찾기 예제입니다.
const arr = [1,3,5,7,9,11,13,15,17,19]
for(let i=1; <=arr.length; i++){
if(arr [i] > 10){
document.write(arr[i] + " , ");
}
}
결과 확인하기
11,13,15,17,1911. 데이터 이펙트 : 1부터 100까지 합 구하기
for문, if문을 이용해서 합을 구하는 예제입니다.
let num = 0;
for(let i=1; <=100; i++){
num += i;
}
document.write(num);