[JS] prompt를 활용한 제어문(조건문 if / if-else / if-else if)

제어문

-프로그램의 흐름을 제어하는 문장

1. 조건문 : 특정 조건에 따른 실행 (if / if-else / if-else if)
2. 선택문 : 특정 조건에 따른 실행 (switch-case)
3. 반복문 : 특정 조건에 따라 반복 실행 (for / while / do-while)

1. 조건문

1) 조건문 if문

<script>
if(조건문) {
            조건문이 참일때 실행하는 코드; // 거짓일땐 실행안함
        }
</script>

---

*if문은 실행하는 코드가 1줄일때 중괄호 생략가능

<script>
if(조건문)
                실행문;
        // *if문은 실행하는 코드가 1줄일때 중괄호 생략가능
</script>

<script>
var number = 100;

//변수 number의 값이 50보다 클때 "50보다 큰값이 입력!!"
    if ( number > 50 ) {
        document.write("50보다 큰값이 입력!!");
    }
</script>

Boolean(값) ⇒ t/f 리턴

-0, null, undefined, ""(공백문자) -> false

-그 외 모든 데이터 => true

		if(0)  { //false
        document.write("@@@@0@@@@"+ "<br>");
    }
    if(1)  { //true
        document.write("@@@@1@@@@"+ "<br>");
    }
    if(2)  { //true
        document.write("@@@@2@@@@"+ "<br>");
    }
		if("아이티윌")  { //true
        document.write("@@@@아이티윌@@@@"+ "<br>");
    }

prompt

var number = prompt("숫자를 입력하세요!");

→30 입력시 : 50보다 큰값이 입력!! 출력되지않음

→500입력시 : 50보다 큰값이 입력!! 출력됨

number 변수의 값이 양수 일때만 "양수!" 메세지 출력!

//number 변수의 값이 양수 일때만 "양수!" 메세지 출력!
    if (number > 0) {
        document.write("양수!");
    }

2) if-else문

//if-else문
    // if(조건문) {
    //     조건문이 참일때 실행코드
    // } else {
    //     조건문이 참이 아닐때 실행코드
    //     (그외 나머지)
    // }

변수 number값이 홀수/짝수 구분해보기

if ( number % 2 == 0 ) {
        document.write("짝수");
    } else {
        document.write("홀수");
    }

confirm 명령어

confirm();

confirm("yes or no?");

→ 확인 / 취소(true / false) 버튼이 생김

// confirm("퇴실 찍으셨나요? yes or no?");
    var check = confirm("퇴실 찍으셨나요? yes or no?")
    if(check == true) {
        document.write("정상 출석!"); /// yes -> 정상 출석!
    } else {
        document.write("퇴실 버튼을 눌러주세요!");  // no -> 퇴실 버튼을 눌러주세요!
    }
    // document.write(tmp);

if-else if문

//if-else if문
    if(조건문1) {
        조건문1 참일때 실행문
    } else if (조건문2) {
        조건문2 참일때 실행문
    } else if (조건문3) {
        조건문3 참일때 실행문
    } 
      .....
      else {
            모든 조건을 제외한 경우 실행문
    }

변수 month의 값에 따라서 계절 정보 출력

// 사계절
    // 봄(3~5) 여름(6~8) 가을(9~11) 겨울(12~2)
    var month = 10;
    // 변수 month의 값에 따라서 계절 정보 출력
    // "00월은 OO입니다."
    
    if(month ==1) {
        document.write(month+"월은 겨울입니다.");
    } else if(month ==2) {
        document.write(month+"월은 겨울입니다.");
    } else if(month ==3) {
        document.write(month+"월은 봄입니다.");
    } else if(month ==4) {
        document.write(month+"월은 봄입니다.");
    } else if(month ==5) {
        document.write(month+"월은 봄입니다.");
    } else if(month ==6) {
        document.write(month+"월은 여름입니다.");
    } else if(month ==7) {
        document.write(month+"월은 여름입니다.");
    } else if(month ==8) {
        document.write(month+"월은 여름입니다.");
    } else if(month ==9) {
        document.write(month+"월은 가을입니다.");
    } else if(month ==10) {
        document.write(month+"월은 가을입니다.");
    } else if(month ==11) {
        document.write(month+"월은 가을입니다.");
    } else if(month ==12) {
        document.write(month+"월은 겨울입니다.");
    } else {
        document.write(month+"월은 겨울입니다.");
    }

위 코드를 간략하게 쓰면

if(3 <= month && month <= 5) {
        document.write(month+"월은 봄입니다.");
    } else if(6 <= month && month <= 8) {
        document.write(month+"월은 여름입니다.");
    } else if(9 <= month && month <=11) {
        document.write(month+"월은 가을입니다.");
    } 
    // else if(1 <= month && month <= 2 || month ==12) {
    else if(1 == month || month == 2 || month ==12) {
        document.write(month+"월은 겨울입니다.");
    } else {
        document.write("1~12월까지 정상적인 데이터를 입력하세요!");
    }

중첩 if문

if(조건문) {
    참일때 실행하는 코드 >if문 가능? O
    if(조건문2) {
        참일때 실행하는 코드 //1이 만족하면서 2를 만족하는지 
    }
}

//중첩 if문
    if(조건문1 && 조건문2) { // 1과 2가 동시에 만족하는지
        참일때 실행하는 코드
    }

 

중첩 if문

//중첩 if문
    // if(조건문) {
    //     참일때 실행하는 코드 >if문 가능? O
    //     if(조건문2) {
    //         참일때 실행하는 코드 //1이 만족 ->  2를 만족하는지
    //     }
    // }

    //중첩 if문
    // if(조건문1 && 조건문2) { // 1과 2가 동시에 만족하는지
    //     참일때 실행하는 코드
    // }

---

로그인 만들기

//로그인 만들기 
1. ID/PW 입력
2. ID(입력) - ID(기존)가 같은지 비교
3-1. ID가 같은 경우 (회원)
	4. PW(입력) - PW(기존)가 같은지 비교
	5-1. (아이디 같음) 비밀번호 같음
	  6. 본인 (로그인 성공) 
	5-2. (아이디 같음) 비밀번호 다름
	  6. 본인X (로그인 실패 - 비밀번호 오류~)
3-2. ID가 다른 경우 (비회원)

var DBID = "itwill";
var DBPW = "1234";

//로그인 만들기 
// 1. ID/PW 입력
var inputID = prompt("ID를 입력하세요.");
var inputPW = prompt("PW를 입력하세요.");

// 2. ID(입력) - ID(기존)가 같은지 비교
if (inputID == DBID) {
            // 3-1. ID가 같은 경우 (회원)
            //   4. PW(입력) - PW(기존)가 같은지 비교
    if(inputPW == DBPW) {
            //   5-1. (아이디 같음) 비밀번호 같음
            //     6. 본인 (로그인 성공) 
            alert("로그인 성공!");
    }   else {
            //   5-2. (아이디 같음) 비밀번호 다름
            //     6. 본인X (로그인 실패 - 비밀번호 오류~)
            alert("로그인 실패(비밀번호 오류)");
    }
} else { // 3-2. ID가 다른 경우 (비회원)
    alert("회원정보가 없습니다! (비회원)");
}

if(inputID == DBID && inpuwPW == DBPW) { // ID,PW 중에 뭘 틀렸는지 모름
        alert("로그인 성공!");
    } else {
        alert("아이디 혹은 비밀번호가 잘못되었습니다."); // 악의적인 접근 방지
    }

---

선택문

1. switch-case문

1. 처음~끝까지 실행하면 종료
2. default 구문을 실행하면 종료
3. case를 실행해서 break문을 실행하면 종료 (* break문이 없으면 다음 break문을 실행할때까지 모든코드 실행)

var num = 8;

switch(num) {
    case 10:
        alert("10!");
        break;
    case 9:
        alert("9!");
        break;
    case 8:
        alert("8!");
        break;
    case 7:
        alert("7!");
        break;
    case 6:
        alert("6!");
        break;
    default:
        alert("지원하지 않는 숫자입니다.");
}

학점 출력 프로그램 작성

-학생의 점수에 따른 학점 출력 (학생의 점수는 항상 0~ 100숫자)

1 ) if-else if문

var score = 77;
    if(score >= 0 && score <=100) {
        if (score >= 90) {
            alert("학점은 A입니다.");
        } else if (score >= 80) {
            alert("학점은 B입니다.");
        } else if (score >= 70) {
            alert("학점은 C입니다.");
        } else if (score >= 60) {
            alert("학점은 D입니다.");
        } else {
            alert("학점은 F입니다.");
        } 
    }

2) switch-case문 - 문자를 비교하고 싶을때 쓰면 좋음

var score = 77;
var tmpScore = Math.floor(score / 10);

    switch(tmpScore) {
        case 10:
        case 9:
            alert("학점은 A");
            break;
        case 8:    
            alert("학점은 B");
            break;
        case 7:
            alert("학점은 C");
            break;
        case 6:
            alert("학점은 D");
            break;
        default:
            alert("학점은 F")
        }

⇒ alert(); 한 줄로 출력하기

 

사용자가 이동하고 싶은 홈페이지 이름 입력

ex) 네이버, naver, NAVER ... => 네이버 홈페이지로 이동

location.href="www.nave.com";

⇒ 주소창을 보면 네이버 주소와 다름.

⇒ 현재 내가 만든 코드 중 www.naver.com 이라는 파일이 있다면 그 파일을 실행해라

⇒ 통신프로토콜 추가함

location.href="<https://www.nave.com>";

⇒ 홈페이지 이동완료

// 사용자가 이동하고 싶은 홈페이지 이름 입력
    // ex) 네이버, naver, NAVER ... => 네이버 홈페이지로 이동
    // location.href="<https://www.naver.com>";
    var site = "naver";
        switch(site) {
            case "naver":
            case "NAVER":
            case "네이버":
            location.href="https:www.naver.com";
            brek;
        }
    //    구글. google => 구글 홈페이지 이동
    var site = "google";
        switch(site) {
            case "google":
            case "GOOGLE":
            case "구글":
            location.href="https:www.google.com";
            brek;
        }