01. 데이터 이펙트 : 1부터 100까지 출력하기
for문을 이용해서 1-100까지 출력하는 예제입니다.
for(let i=1; i<=30; i++){
console.log(i)
}
결과 확인하기
'++'는 1씩 증가시킬 때 사용하는 증감 연산자이다. i = i + 1
<=는 30 이하를 의미한다.
<는 기본코드 작성에 필요한 문법으로 컴퓨터가 이해할 수 있는 &, l, t, ;를 이어붙여 써야 한다.(배운 내용 작성 시에만)
자세한 건 특수문자 코드표를 검색해 보자.
02. 0부터 50까지 출력하기
for문을 이용해서 0-50까지 출력하는 예제입니다.
for(let i=0; i<=50; i++){
console.log(i)
}
결과 확인하기
초깃값을 0부터 설정하면 0부터 시작하는 for문이 된다.
03. 03. 데이터 이펙트 : 1부터 100까지 짝수만 출력하기
for문을 이용해서 짝수만 출력하는 예제입니다.
for(let i=0; i<=100; i+=2){
console.log(i)
}
결과 확인하기
짝수만 출력하기 위해선 '+=' 대입 연산자를 이용한다. (i = i + 2)
만약 숫자가 아닌 문자나 변수 등이 오면 기존 데이터에 새로운 데이터를 연결하여 누적한다.
04. 데이터 이펙트 : 1부터 100까지 5의 배수 출력하기
for문을 이용해서 5의 배수만 출력하는 예제입니다. 증감 연산자와 조건문 if문을 이용한 방법입니다.
for(let i=1; i<=100; i++){
if(i % 5 == 0){
console.log(i)
}
}
결과 확인하기
첫 번째 for문은 대입 연산자 '+='를 이용해 표현했다. (i = i + 5)
두 번째는 if문을 이용해 조건문을 만들어 표현했다.
'%'는 나눈 뒤 나머지 값을 의미하기 때문에, "i % 5 == 0"는 5배수를 뜻한다.
if문은 if(초깃값; 조건식; 증감식)으로 이뤄진다.
식의 계산 순서는 "데이터 불러오기"를 참고.
05. 데이터 이펙트 : 1부터 100까지 짝수(파란색) 홀수(빨간색) 출력하기
for문을 이용해서 짝수와 홀수에 색을 넣어 출력하는 예제입니다.
for( let i=1; i<=99; i++ ){
if(i % 2 == 0){
document.write('<span style="color: blue">' + i + '</span>')
}
if(i % 2 == 1){
document.write('<span style="color: red">' + i + '</span>')
}
}
결과 확인하기
연산자 %를 이용해 짝수(i % 2 == 0)와 홀수(i % 2 == 1)의 출력 for문을 만든다.
그다음 document.write에 <span> 태그를 이용해 style을 넣는다.
여기서 <sapn> 태그는 입력값이 아닌 코드 문자로 나와야 하기 때문에 따음표를 넣는다.
따음표를 넣을 땐 큰따음표(")와 작은따음표(')가 함께 들어가지 않도록 주의한다.
06. 데이터 이펙트 : 1부터 100까지 합 구하기
for문과 변수를 이용해 1부터 100까지의 합을 구하는 예제입니다.
let num = 0
for(let i=0; i<=100; i++){
num += i //num = num + i
}
document.write(num);
결과 확인하기
조건문의 범위까지 실행을 반복하는 for문의 특징을 이용하여 만드는 예제입니다.
변수 num은 0이지만 "num+=i"로 for문이 1번 실행될 때마다 i의 값이 더해지기 때문에
for문 바깥에서 구하는 최종적인 num의 값은 0부터 100까지의 i를 더한 값이 됩니다.
07 데이터 이펙트 : for문을 이용해서 테이블 만들기
for문을 이용해서 테이블을 만드는 예제입니다.
let table = "<table border='1'>";
for(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);
결과 확인하기
먼저 변수를 이용해 <table> 코드를 만들어야 한다. '+=' 연산자를 이용하자.
table border 입력 시 따음표에 주의!
for문에 들어가는 <tr> 태그와 <td> 태그가 연산 요소가 아님을 유의하고 따음표를 붙이자.
태그들은 위에서 했던 숫자 출력하기 예제의 숫자라고 생각하면 된다.
class로 요소를 묶는 것처럼 태그를 반복하지 않고 표현하는 게 중요하다.
HTML에서도 부모와 자식으로 <tr> 태그 안에 <td> 태그를 넣었던 것을 생각하자.
테이블 칸마다 숫자를 넣는다면 변수로 설정한 값과 동일하기 때문에 간략하게 "태그" +변수명+ "/태그"로 간략히 표현할 수 있다.
태그는 항상 따음표를 붙이는 걸 잊지 말자!
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>");
}
}
결과 확인하기
중첩 for문은 순서를 이해하는 게 중요하다.
첫 번째 for문이 한 번 진행되면 그 뒤의 for문은 끝날 때까지 진행된다.
이 순서를 이해하면 첫 for문에 몇 단부터 시작할 것인지 넣을 수 있다(i=시작하는 단; i<=끝나는 단).
document.write에 이어 나오는 문자(태그)는 쉼표(,)로 잇는다. CSS처럼
두 번째 for문에서 화면에 출력하기 위한 '*'와 '='에 따음표를 붙이는 걸 잊지 말자.
앞의 i, j는 출력하기 위해서 뒤의 i, j는 연산을 위해서.
09. 데이터 이펙트 : 테이블 25칸 (짝수 빨간색 홀수 파란색)
중첩 for문을 이용해서 테이블을 만들고 if문을 이용해 색깔을 넣습니다.
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++;
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);
결과 확인하기
테이블의 칸마다 숫자를 넣고 색깔을 넣기 위해서는 for문이 진행될 때마다 늘어나는 변수 하나와 짝수 홀수 조건에 따라 색을 넣기 위한 if문과 스타일 태그가 필요하다.
for문이 진행 될때마다 변수 num은 1씩 증가하므로 25가 되며 if문과 조건식 'num % 2 == 0'으로 인해 짝수를 지정하여 색을 넣을 수 있다.
10. 데이터 이펙트 : 테이블 25칸 (3의 배수 파란색 25칸 5의 배수는 빨간색)
중첩 for문을 이용해서 테이블을 만들고 if과 else if문을 이용해 색깔을 넣습니다.
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++;
if(num % 3 == 0){
table += "<td style=color:blue>"+num+"</td>"
} else if(num % 5 == 0) {
table += "<td style=color:red>"+num+"</td>"
} else {
table += "<td>"+num+"</td>"
}
}
table += "</tr>";
}
table += "</table>";
document.write(table);
결과 확인하기
테이블의 칸마다 숫자가 들어가는 데, 3의 배수와 5의 배수라는 조건이 추가됐다.
이런 경우 늘어난 조건만큼 if문을 늘려나간다 생각하고 3의 배수가 아닌 경우는 5의 배수, 5의 배수가 아닌 경우는 마지막 else를 통해 지정해주면 된다.
조건이 늘어날 때마다 알맞은 if문을 떠올려 보자!
11. 배열 데이터에서 10보다 큰 수 찾기
배열 데이터를 조건문을 사용해 조건에 맞는 데이터만 뽑는 예제입니다.
const arr = [1,5,10,15,20,30]
for(let i=0; i<arr.lenght; i++){
if(arr[i] >10){
document.write(`${arr[i]}<br>`);
}
}
결과 확인하기
for문과 if문을 이용해서 배열 arr의 데이터 값 중 10보다 큰 값의 데이터만 불러오는 예제입니다.
먼저 i의 증감 조건을 배열의 갯수보다 1개 작게 설정하면, 배열은 0부터 시작하기 때문에 배열의 모든 데이터를 가져올 수 있습니다.
if문을 이용해 arr[i]로 배열의 값 중에 10보다 큰 수를 조건으로 지정합니다.