JavaScript 조건문

1. JavaScript 조건문
1.1 조건문
: 조건문이란 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것이다.

1.2 조건문의 문법
1.2.1 if
: 조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될수 있는 값은 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.

<script type="text/javascript">
    if(true) {
        alert('result : true');
    }
</script>

결과

<script type="text/javascript">
    if(false) {
        alert('result : true');
    }
</script>

결과
: 조건문이 false이기 때문에 아무것도 실행되지 않는다.

1.2.2 else
: if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행된다. 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.

<script type="text/javascript">
    if(true) {
        alert(1);
    } else {
        alert(2);
    }
</script>

결과

<script type="text/javascript">
    if(false) {
        alert(1);
    } else {
        alert(2);
    }
</script>

결과

1.2.3 else if
: else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다. else if의 특징은 if나 else와는 다르게 여러개가 올 수 있다는 점이다. else if 의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다.

<script type="text/javascript">
    if(false) {
        alert(1);
    } else if(true) {
        alert(2);
    } else if(true) {
        alert(3);
    } else {
        alert(4);
    }
</script>

결과

: if문이 false이기 때문에 그 다음 구문인 else if를 확인한다. else if가 true이기 때문에 그 이후에 구문은 확인하지 않고 건너뛰게 된다. 그렇기 때문에 2를 출력해주는 것이다.

<script type="text/javascript">
    if(false) {
        alert(1);
    } else if(false) {
        alert(2);
    } else if(false) {
        alert(3);
    } else {
        alert(4);
    }
</script>

결과

: if문과 else if문이 모두 false이기 때문에 else문이 실행되어 4를 출력해주는 것이다.

1.3 변수와 조건문의 중첩

<script type="text/javascript">
    var id = prompt('아이디를 입력해주세요.');
    if(id == 'sungju') {
        var password = prompt('비밀번호를 입력해주세요.');
        if(password == '111111') {
            alert(id+'님이 로그인 하셨습니다.');
        } else {
            alert('비밀번호가 다릅니다.');
        }
    } else {
        alert('아이디가 일치하지 않습니다.');
    }
</script>

결과
- prompt 함수를 이용하여 sungju는 사용자가 입력한 것이다.

: 사용자가 id, pw를 올바르게 입력했다면 로그인 되었다는 알림창이 나타난다.

: 사용자가 id를 올바르지 않게 입력했다면 아이디가 일치하지 않는다는 알림창이 나타난다.

: 사용자가 id는 올바르게 입력했지만, pw를 올바르지 않게 입력했다면 비밀번호가 다르다는 알림창이 나타난다.

1.4 논리 연산자
- '&&' : &&는 좌항과 우항이 모두 참(true)일 때 참이된다. 이러한 논리 연산자를 'and 연산자'라고 한다.

<script type="text/javascript">
    var id = prompt('아이디를 입력해주세요.');
    var password = prompt('비밀번호를 입력해주세요.');
    if(id == 'sungju' && password == '111111') {
        alert(id+'님이 로그인 하셨습니다.');
    } else {
        alert('아이디 또는 비밀번호가 일치하지 않습니다.');
    }
</script>

결과



: 사용자가 id, pw를 올바르게 입력했다면 로그인 되었다는 알림창이 나타난다. 여기서 주의할 점은 id를 올바르지 않게 입력했어도 pw를 입력하는 알림창이 나타난다.

: 사용자가 id 또는 pw중에 하나라도 올바르지 않게 입력했다면, 아이디 또는 비밀번호가 일치하지 않는다는 알림창이 나타난다.

- '||' : ||는 좌항과 우항중에 하나라도 true라면 true가 된다. 이러한 논리 연산자를 'or 연산자'라고 부른다.

<script type="text/javascript">
    var id = prompt('아이디를 입력해주세요.');
    var password = prompt('비밀번호를 입력하세요.');
    if((id === 'sungju' || id === 'fullmoon' || id === 'javascript')
     && password === '111111') {
        alert('인증에 성공하셨습니다.')
    } else {
        alert('인증에 실패하셨습니다.')
    }
</script>

결과



: 사용자가 id 3개중 하나를 올바르게 입력하고, pw까지 올바르게 입력했다면 인증에 성공했다는 알림창이 나타난다. 만약 id 혹은 pw중 하나라도 올바르지 않게 입력했다면, 인증에 실패했다는 알림창이 나타난다.

- '!' : !는 부정의 의미로, Boolean의 값을 역전시킨다. true를 false로 false를 true로 만든다. 이러한 연산자를 'not 연산자'라고 부른다.

1.5 Boolean의 대체제
: 자바스크립트에서 0, ' '(빈 문자열), undefined, null을 false로 간주한다. 그리고 1, 빈 문자열이 아닐경우에 true로 간주한다. 하지만 보통 Boolean을 주로 사용한다.