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++){
console.log(i); //초기값을 0으로 설정하고 1씩 증가시켜서 50번 반복함
}
결과 확인하기
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'>스타일 우선 순위</span>
06. 데이터 이펙트 : 1부터 100까지 합 구하기
1부터 100까지 합 구하기 예제입니다.
let sum = 0;
for(let i=1; i<=100; i++){
sum += i;
}
document.write(sum);
결과 확인하기
07. 데이터 이펙트 : 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);
결과 확인하기
✍️ 숫자와 문자 같이 입력하기
숫자와 문자를 같이 입력하기 위해서는 서로 숫자와 문자 사이에 +(플러스) 를 입력해주고 문자에는 " "(큰따옴표)를 감싸서 입력해줍니다.
다른 방법으로는 ` `(백텟)을 입력하고 숫자에 ${ }을 감싸서 입력해줍니다.
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>");
}
결과 확인하기
09. 데이터 이펙트 : 테이블 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);
결과 확인하기
10. 데이터 이펙트 : 테이블 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 += 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]);
}
}