01. if문

if다음 소괄호에 조건을 표기하여 결괏값에 따라 답이 나오는 명령입니다.

{
const x = prompt("당신이 좋아하는 숫자는 무엇입니까?");

    if(x == 100){
        document.write("당신은 100점짜리 인간이네요!");
    } else if(x == 99) {
        document.write("당신은 99점짜리 인간이네요!");
    } else if(x == 98) {
        document.write("당신은 98점짜리 인간이네요!");
    } else if(x == 97) {
        document.write("당신은 97점짜리 인간이네요!");
    } else {
        document.write("좀 더 높게 쓰시는게 어떨까요?");
    }   
}
결과 확인하기
질문에 답을 입력시
100 - 당신은 100점짜리 인간이네요!
99 - 당신은 100점짜리 인간이네요!
98 - 당신은 100점짜리 인간이네요!
97 - 당신은 100점짜리 인간이네요!
그 외 숫자 - 좀 더 높게 쓰시는게 어떨까요?

01-2. if문

조건식에서 데이터에 따라서 어떤 결괏값이 나오는지 정리한 기본적인 정보입니다.

{
    if(조건식){
        document.write("실행되었습니다.(true)");
    } else {
        document.write("실행되었습니다.(false)");
    }
}
결과 확인하기(참고용)
false : 0, null, undefined, false, ""(빈문자열)
true : 1, 2, "0", "1", "ABC", [], {}, true

02. if문 생략

if문을 좀 더 효율적으로 사용하기 위해 생략하는 방법입니다.

{
    const num = 100;
    // if(num){
    //     document.write("실행되었습니다.(true)");
    // } else {
    //     document.write("실행되었습니다.(true)");
    // }
    if(num) document.write("실행되었습니다.(true)");
    else document.write("실행되었습니다.(false)");
}

03. 삼항(조건) 연산자

if, else문을 사용하지 않고도 조건에 따라 값을 반환할 수 있는 방법입니다.

{
    // const num = 100;                // 주석 처리한 기존의 삼항 연산자는 사용되지 않는 코드까지 사용하게 된다는 단점이 있었다. 
    // if(num == 100){                 
    //     document.write("true");
    // } else {
    //     document,write("false");
    // }

    (num == 100) ? document.write("true") : document.write("false");
}
결과 확인하기
true

04. 다중 if

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("실행되었습니다");
    }
}
결과 확인하기
실행되었습니다.(num == 100)

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)")
    }
}
결과 확인하기
실행되었습니다.(1)실행되었습니다.(2)실행되었습니다.(3)

연습

지금까지의 내용들 정리

{
    for(let i=1; i<=100; i++){      // 1부터 100까지
        document.write(i);
    }
    document.write("<br>");       // 줄바꿈 표시

    const arr = [1,2,3,4,5,6,7,8,9]

    for(let i=0; i<arr.length; i++){    // 배열 안에 있는 데이터 불러오기
        document.write(arr[i]);
    }

    document.write("<br>");        // 줄바꿈 표시

    for(let i=1; i<arr.length; i +=2){      // 배열 안에 있는 데이터를 짝수로 불러오기
        document.write(arr[i]);
    }

    document.write(" <br>");          // 줄바꿈 표시 

    for(let i=0; i<arr.length; i +=2){  // 배열 안에 있는 데이터를 홀수로 불러오기
        document.write(arr[i]);
    }
}

for문

for문과 if..else문을 사용하여 배열 안에 있는 데이터에서 짝수는 빨간색으로 출력 그 외는 파란색으로 출력된다

{
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    
    for(let i=1; i<=arr.length; i++){
        if(i % 2 ==0){
            document.write("<span style='color:red'>"+i+"</span>");
        } else {
            document.write(`<span style='color:blue'>${i}</span>`);
        }
    }
}
결과 확인하기
1 2 3 4 5 6 7 8 9

06. switch문

코드마다 break;을 걸어 코드가 필요한 부분을 전부 읽었다면 종료될 수 있게 한다.

{
    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");
    }
}
결과 확인하기
0

07. while문

while문은 먼저 조건식을 검사한 후에 코드 블록을 실행합니다. 코드 블록을 실행한 후에 다시 조건식을 검사하고, 조건식이 참(True)일 동안 반복적으로 실행합니다. 만약 처음부터 조건식이 거짓(False)이라면 코드 블록은 한 번도 실행되지 않습니다.

{
    let num = 0;
    while(num<5){
        document.write(num);
        num++;
    }
}
결과 확인하기
01234

08. do while문

do-while문은 while문과는 달리 먼저 코드 블록을 실행한 후에 조건식을 검사합니다. 코드 블록을 최소한 한 번은 실행하고 싶을 때 유용합니다. do-while문은 조건식이 거짓(False)이라도 코드 블록을 최소한 한 번은 실행하고, 그 다음에 조건식을 검사합니다.

{
    let num2 = 0;
    do {
        document.write(num2);
        num2++;
    } while (num2<5);
}
결과 확인하기
01234

09. for문 연습

1부터 30까지, 배열에 있는 데이터 호출, 배열 안에 있는 수 더하기

{
    for(let i=1; i<30; i++){
        document.write(i);
    }
    document.write("<br>");
    let num = [1,2,3,4,5,6,7,8,9];
    let sum = 0;
    for(let i=0; i<num.length; i++){
        document.write(num[i]);
        sum +=num[i];
    }
    document.write("<br>");
    document.write(sum);
}
결과 확인하기
1234567891011121314151617181920212223242526272829 123456789 45

10. 중첩 for문

for문에 for문을 중첩 시키는 방법입니다.

{
    for(let i=1; i<=10; i++){
        document.write(i,"<br>")
        for(let j=1; j<=10; j++){
            document.write(j);
        }
    }
}
결과 확인하기
01234

11. break문

if문에 if문을 중첩 시켜 사용하는 방법입니다.

{
    for(let i=1; i<20; i++){
        document.write(i);
        if(i == 10){
            break;
        }
    }
    document.write("<br>");

    for(let j=1; j<20; j++){
        if(j == 10)
        break;
        document.write(j);
    }
}
결과 확인하기
12345678910 123456789

12. continue문

if문에 if문을 중첩 시켜 사용하는 방법입니다.

{
    for(let i=1; i<20; i++){
        document.write(i);
        if(i == 10){
            continue;
        }
    }
    document.write("<br>");

    for(let i=1; i<20; i++){
        if(i == 10){
            continue;
        }
        document.write(i);
    }
}
결과 확인하기
12345678910111213141516171819 123456789111213141516171819