생활코딩 JavaScript

조건문-1.조건 문이란?(if,else)2.else,else if 3.조건문의 응용

우주 코더 2018. 11. 16. 19:02



◎조건 문이란?(if,else)

-Boolean

'비교 '에서 비교 연산의 결과로 참(true)이나 거짓(false)을 얻을 수 있다고 배웠다.

 여기서 참과 거짓은 언어에서 제공하는 데이터 형이다. 이를 Boolean(불린)이라고 부르고 

불린으로 올 수 있는 값은 true와 false 두가지 밖에 없다. 불린은 조건문에서 핵심적인 역할을 담당한다.


-조건문(conditional staement)

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


-조건문의 문법

-if

조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다.

 Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.

아래 예제의 실행결과는 'result : true'다. if 뒤에 true가 왔기 때문이다.

1.
if(true){
alert('result: true')
}//result: true

false조건을 블록안에 내용이 실행 되지 않는다 
2.
if(false){
alert('result: true')
}// 아무일도 일어나지않음 

3.
if(true){//false 가되면 alert(5); 만 실행된다 
    alert(1);// 순서대로 내려오며 프로그램이 실행된다 
    alert(2);
    alert(3);
    alert(4);
}
alert(5);

◎else,else if

-else

if만으로는 좀 더 복잡한 상황을 처리하는데 부족하다.

if(true){
    alert(1);
} else {
    alert(2);
}// 결과는 1

if(false ){
    alert(1);
} else {
    alert(2);
}// 결과는 2

if else는 둘중 하나를 출력한다  
if{
//true일경우 여기실행
}else{
//false일경우 여기실행
}
if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행된다.
 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.

-else if

1.

if(false){

    alert(1);

} else if(true){

    alert(2);

} else if(true){

    alert(3);

} else {

    alert(4);

}// 결과는 2이다 

물론 3이 될수 도 있다 생각하겠지만 ,else는 앞 블록이 false일 경우 실행 되는 것이여서 2문을 들어가서 실행 하고 탈출한다  

2.

if(false){

    alert(1);

} else if(false){

    alert(2);

} else if(true){

    alert(3);

} else {

    alert(4);

}//결과3(분석해보기 )

3.

if(false){

    alert(1);

} else if(false){

    alert(2);

} else if(false){

    alert(3);

} else {

    alert(4);

}//결과 4(앞에 조건들이 성립 하지 않았기 때문에  마지막  else가default같은 느낌으로 적용 된다 )

else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다. 

else if의 특징은 if나 else와는 다르게 여러개가 올 수 있다는 점이다. 

else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다


◎조건문의 응용 

 변수와 비교연산자 그리고 조건문을 결합해보기.

 ID의 값으로 egoing을 입력해보고, 다른 값도 입력해보자. 아래의 예제는 브라우저에서 실행해야 한다.

 다른 환경에서는 원하는데로 동작하지 않을 것이다.

prompt() 에 대하여 알아 보자 alert()와 유사 하지만  prompt() 입력 창이 존재한다 .


 


입력하고 확인을 누르면  입력 값18을 출력한다 

그럼 만약 alert(prompt('당신의 나이는?')); alert 안에 prompt를 실행하게 된다 면?

순서는 어떻게 진행될까?

1.alert 안에 prompt 실행하게되고 값을 입력하고 확인을 누르면 



2.prompt의 입력값이alert 창에 뜨게 된다 . 


3.연산또 한 가능하다 


prompt() 구문은 사용자가 입력한 값을 가져와서 id 변수의 값으로 대입한다. 

이러한 것을 API 또는 함수라고 부름. 사용자가 입력한 값이 egoing이라면 '아이디가 일치 합니다'를 

출력하고 그렇지 않다면 '아이디가 일치하지 않습니다'를 출력한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        // 로그인 로직
        //1.사용자 정보 가 뜬다 
        // 데이터를 입력하면 id에 입력 데이터가 대입된다 
 
        id = prompt('아이디를 입력해주세요.')
        //조건 걸과에 대한 값이 출력 된다 
        if(id=='egoing'){
            alert('아이디가 일치 합니다.')
        } else {
            alert('아이디가 일치하지 않습니다.')
        }
    </script>
</body>
</html
cs

-아이위 입력창 



-일치 

-불일치 

 업그레이드 시킨 로그인 폼 

if문 안에 다시 if문이 등장했다. 즉 사용자가 입력한 값과 아이디의 값이 일치하는지를

 확인한 후에 일치한다면 비밀번호가 일치하는지 확인한 것이다. 이렇게 조건문은

 조건문 안에 중첩해서 사용될 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</head>
<body>
    <script>
        // 로그인 로직
        //1.사용자 정보 가 뜬다 
        // 데이터를 입력하면 id에 입력 데이터가 대입된다 
 
       var id = prompt('아이디를 입력해주세요.')
        //조건 걸과에 대한 값이 출력 된다 
        if(id=='egoing'){
            var password = prompt('비밀번호를 입력해주세요');
            if(password == '111111'){
                alert('로그인 했습니다 '+id+'님 반갑습니다.')
            }else{
            alert('비밀번호가 다릅니다 ')
            }
        } else {
            alert('아이디가 일치하지 않습니다.')
        }
    </script>
</body>
</html
cs




저작자표시 (새창열림)