01. if문
if문의 기본형식
if(0){
document.write("실행되었습니다.(True)")
} else {
document.write("실행되었습니다.(False)")
}
결과 확인하기
if문
0, null, undefined, false, 빈문자열("") 다섯가지만 false가 출력.
값이 없는 것에 대해서 false가 뜬다.
위 false값이 나오는것 외 모든 것은 true가 나온다.
02. if문 생략
if문은 생략 가능해서 간략하게 표현 가능하다.
const num = 100;
if(num == 100){
document.write("실행되었습니다.(True)");
} else {
document.write("실행되었습니다.(False)")
}
if(num) document.write("실행되었습니다.(True)");
else document.write("실행되었습니다.(False)");
결과 확인하기
실행되었습니다.(True)
if문 생략해서 간략하게 쓰기
색이 들어간 라인은 서로 같은 내용이다.
중괄호를 생략해서 표현이 가능하다.
03. 삼항 연산자
if문을 삼항으로 생략해서 표현 가능하다.
const num = 100;
if(num == 100){
document.write("true");
} else {
document.write("false");
}
(num == 100) ? document.write("true") : document.write("false")
결과 확인하기
if문 삼항으로 표현하기
색이 들어간 라인은 같은 내용의 if문인데,
if와 else를 생략하고 표현 가능하다.
컴퓨터가 인식할 때 첫 번째 표현은 else문까지 다 읽는 반면에,
두 번째 문장은 뒤에 else문을 컴퓨터가 읽지 않기 때문에 훨씬 효율적이다.
04. 다중 if문
else if문을 사용하여 각각의 결과 값을 설정할 수 있다.
{
const num = 100;
if(num == 90){
document.write("실행되었습니다.(num == 90)");
} else if(num == 100){
document.write("실행되었습니다.(num == 100)");
} else if(num == 110){
document.write("실행되었습니다.(num == 110)");
} else if(num == 120){
document.write("실행되었습니다.(num == 120)");
} else {
document.write("실행되었습니다.")
}
}
결과 확인하기
// 변수가 설정된 값에 따라 결과가 다르게 출력된다.
다중 if문 (else if)
if문에 else if를 추가하여 변수가 변화함에 따라 각각의 결과를 출력 가능하다.
05. 중첩 if문
if문 안에 또 다른 if문을 넣어줄 수 있다.
{
const num = 100
if(num ==100){
document.write("실행되었습니다.(1)");
if(num == 100){
document.write("실행되었습니다.(2)");
if(num == 100){
document.write("실행되었습니다.(3)");
}
}
} else {
document.write("실행되었습니다.(4)");
}
}
결과 확인하기
중첩 if문
조건문 안에 조건문을 넣어주게 되면 첫 번째와 두 번째 조건이 모두 true여야 출력 가능하다.
즉, 겉의 조건을 만족해야 순차적으로 안의 조건으로 들어갈 수 있다.
06. 데이터 제어하기 : switch문
else if문의 내용을 switch문으로 사용할 수 있다.
const num = 100;
switch(num){
case 90:
document.write("실행90");
break;
case 80:
document.write("실행80");
break;
case 70:
document.write("실행70");
break;
case 60:
document.write("실행60");
break;
case 50:
document.write("실행50");
break;
default:
document.write("0");
}
결과 확인하기
switch문
조건값의 case를 만들어서 case값이 만족하는 결과를 출력할 수 있다.
사이사이 break를 넣어 만족하는 조건의 결과값을 출력하면 다른 case를 조사하지 않고 실행을 마친다.
07. 데이터 제어하기 : while문
while문으로 반복실행이 가능하다.
for(let i=0; i<5; i++){
document.write(i);
}
let num = 0;
while(num<5){
document.write(num);
num++;
}
결과 확인하기
while문
1~3번라인의 for문과 4~8번 라인의 while문은 같은 내용이다.
변수 num을 만들어 num의 조건을 정해주고 num을 출력하는 방법이다.
08. 데이터 제어하기 : do while문
while문은 do while문으로 바꾸어 사용 가능하다.
let num = 0;
do {
document.write(num);
num++;
} while (num<5);
결과 확인하기
do while문
위 7번에 나와있는 while문은 위의 do while문으로 바꾸어 사용 가능하다.
09. for문
반복되는 내용에 for문을 사용 가능하다.
for(let i=1; i<=100; i++){
document.write(i);
}
const arr = [1,2,3,4,5,6,7,8,9,10];
for(let i=0; i<arr.length; i++){
document.write(arr[i]);
}
for(let i=1; i<arr.length; i+=2){
document.write(arr[i]);
}
for(let i=0; i<arr.length; i++){
if(arr[i] % 2 == 0){
document.write(arr[i]);
}
결과 확인하기
1 2 3 4 5 6 7 8 9 10
2 4 6 8 10
2 4 6 8 10
for문 기본
첫 번째 for문 부터 순서대로
1부터 100까지 출력하기
배열안에 있는 값 for문으로 출력하기
배열안에서 짝수만 출력하기
배열안에서 짝수만 if문을 같이 사용하여 출력하기
예시라 i를 써줬지만 같은 곳에 작성하려면 변수를 다르게 주어야한다.
10. 데이터 제어하기 : 중첩 for문
for문 안에 for문을 넣어 반복에 대한 반복을 실행시킬 수 있다.
{
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);
}
결과 확인하기
중첩 for문
반복문 안에 반복문을 넣어 사용 가능하다.
위의 테이블을 만드는 반복문을 보면 다섯번 반복하는 각각의 <tr>태그에
<td>태그의 반복문을 넣어주어 표를 만들 수 있다.
(반복문안에 조건문도 같이 넣어주어 홀수와 짝수의 색을 구분하였다.)
11. 데이터 제어하기 : break문
반복문에 break문을 넣어주어 반복실행을 멈출 수 있다.
for(let i=1; i<20; i++){
if(i == 10){
break;
}
document.write(i);
}
결과 확인하기
break문
반복문 안에 조건을 걸어 조건값을 만족하는 경우 반복문을 멈출 수 있다.
break가 들어가는 위치에 따라 결과값이 바뀌기 때문에 잘 보아야한다.
12. 데이터 제어하기 : continue문
반복문에 continue문을 넣어주어 결과를 건너뛰기 할 수 있다.
for(let i=1; i<20; i++){
if(i == 10){
continue;
}
document.write(i);
}
결과 확인하기
continue문
break문과 마찬가지로 반복문 안에 조건문을 넣어 사용하는데,
continue문은 조건을 만족하는 경우 그 결과값을 건너뛰고 반복을 실행한다.