코드랩 레퍼런스

JavaScript - 조건문 본문

JAVASCRIPT

JavaScript - 조건문

webstoryboy 2018.01.17 15:00

조건문(제어문)

조건문은 말 그대로 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.

if문 단독으로 사용하는 형태입니다.

if (조건) {

      //실행코드

}

Example1 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var x = 100;
        	
        	if(x % 2 == 0) {
	        	document.write("짝수");
        	}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example2 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var value = window.prompt("숫자를 입력해주세요.");
			value = parseInt(value);

			if (value % 2 == 0){
				alert("짝수입니다.");
			}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

두개의 값을 비교하여 코드를 별개로 실행합니다.

if (조건) {

      //참일 때 실행 코드

} else {

      //거짓일 때 실행 코드

}

Example1 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var x = 100;
        	
        	if(x % 2 == 0) {
	        	document.write("짝수");
        	} else {
	        	document.write("홀수");
        	}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example2 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var value = window.prompt("숫자를 입력해주세요.");
			value = parseInt(value);

			if (value % 2 == 0){
				alert("짝수입니다.");
			} else {
				alert("홀수입니다.");
			};
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example3 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var userID = window.prompt("아이디를 입력하세요");
			var userPW = window.prompt("패스워드를 입력하세요");

	        if (userID == "webstoryboy" && userPW == "1234"){
		        alert("환영합니다.");
	        } else {
		        alert("틀렸습니다.");
	        };
		</script>
    </head>
    
    <body>
	...
    </body>
</html>     

여러가지 조건에 따라 조건문을 설정합니다.

if (조건) {

      //참일 때 실행 코드

} else if {

      //앞 조건이 거짓일 때 실행 코드

} else if {

      //앞 조건이 거짓일 때 실행 코드

} else {

      //앞의 모든 조건이 거짓일 때 실행 코드

}

Example1 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var x = 100;
        	
        	if(x == 90){
	        	document.write("x의 숫자는 90입니다.");
        	}else if(x == 91){
	        	document.write("x의 숫자는 91입니다.");
        	}else if(x == 92){
	        	document.write("X의 숫자는 92입니다.");
        	}else if(x == 93){
	        	document.write("X의 숫자는 93입니다.");
        	}else if(x == 94){
	        	document.write("X의 숫자는 94입니다.");
        	}else if(x == 95){
	        	document.write("X의 숫자는 95입니다.");
        	}else if(x == 100){
	        	document.write("X의 숫자는 100입니다.");
        	}else{
	        	document.write("X의 숫자를 모르겠습니다.");
        	}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example2 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var userID = window.prompt("아이디를 입력하세요");
			var userPW = window.prompt("패스워드를 입력하세요");

	        if(userID == "webstoryboy" && userPW == "1234"){
                alert("환영합니다.");
            } else if(userID == "webstoryboy"){
                alert("패스워드가 틀렸습니다.");
            } else if(userPW == "1234"){
                alert("아이디가 틀렸습니다.");
            } else {
                alert("틀렸습니다.");
            }
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다.

switch (조건을 체크할 변수) {

    csae 값1 :

          //조건을 체크할 변수가 값1을 가지면 실행

        break;

    csae 값2 :

          //조건을 체크할 변수가 값2을 가지면 실행

    break;

    csae 값3 :

          //조건을 체크할 변수가 값3을 가지면 실행

    break;

    default :

          //해당되는 값을 가지고 있지 않을 경우 실행

    break;

}

Example1 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var color = prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 느낌이 오는 색을 적어주세요^^.", "");	
			switch (color){
				case "빨강" :
					document.write("당신은 빨강처럼 열정적인 사람입니다.");
					break;				
				case "파랑" :
					document.write("당신은 파랑처럼 열정적인 사람입니다.");
					break;					
				case "노랑" :
					document.write("당신은 노랑처럼 열정적인 사람입니다.");
					break;				
				case "검정" :
					document.write("당신은 검정처럼 열정적인 사람입니다.");
					break;
				case "흰색" :
					document.write("당신은 흰색처럼 열정적인 사람입니다.");
					break;
				default :
					document.write("당신은 색을 볼 줄 모르는군요~ 실망입니다.");
					break;
			}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example2 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var site = prompt("네이버, 다음, 구글, 네이트 중 자주가는 사이트는?","");
			var url;
			
			switch(site){
				case "네이버":url="www.naver.com";
				break;
				
				case "다음":url="www.daum.net";
				break;
				
				case "구글":url="www.google.co.kr";
				break;
				
				case "네이트":url="www.nate.com";
				break;
				
				default : document.write("그런 사이트는 없습니다.");
				break;
			}
			if(url) location.href="http://"+url;
        </script>
    </head>
    
    <body>
	...
    </body>
</html>  
    
Example3 switch문을 if문으로 대체하여 적용하였습니다.
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var color = prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 느낌이 오는 색을 적어주세요^^.", "");	
			if (color == "빨강"){
				document.write("당신은 빨강처럼 열정적인 사람입니다.");
			} else if (color == "파랑"){
				document.write("당신은 파랑처럼 열정적인 사람입니다.");
			} else if (color == "노랑"){
				document.write("당신은 노랑처럼 열정적인 사람입니다.");
			} else if (color == "검정"){
				document.write("당신은 검정처럼 열정적인 사람입니다.");
			} else if (color == "흰색"){
				document.write("당신은 흰색처럼 열정적인 사람입니다.");
			} else {
				document.write("당신은 색을 볼 줄 모르는군요~ 실망입니다.");
			}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

switch를 if문으로 변경하여 사용 할 수 있지만 조건식이 특정 값과 일치하는 경우(==)에만 변경 할 수 있습니다. if 구문 중 조건식에 >,<,>=,<=와 같은 비교 연산자를 사용한 경우는 switch로 변경할 수 없습니다.

조건부 연산자는 조건을 처리하는 다른 형태의 제어문입니다.

(조건) ? (참일 때 실행할 코드) : (거짓일 때 실행할 코드);

Example View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
        	// if ~ else
        	var value = window.prompt("숫자를 입력해주세요.");
			value = parseInt(value);

			if (value % 2 == 0){
				alert("짝수입니다.");
			} else {
				alert("홀수입니다.");
			};
			
			//조건 연산자
			var value = window.prompt("숫자를 입력해주세요. ");
	        value = parseInt(value);

	        (value % 2 == 0) ? alert("짝수입니다.") : alert("홀수입니다.");
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

Ad

Comments
댓글쓰기 폼