안녕하세요 풀스택 개발자를 꿈꾸는 진쓰입니다.
자바스크립트 3장 - 제어문 1(if, switch) 포스팅 시작하겠습니다.
목 차
(1). if 문 (2). if ~ else 문 (3). if ~ else 문 if ~ else 문 (4). switch~ case 문 (5). switch ~ case 문의 flow
|
포스팅에 앞서 잡설 하겠습니다.
프로그래밍을하다보면 수많은 조건, 상황, 예외에 따라 실행을 각기 다르게 해줘야할 필요가있습니다.
이럴때 제어문을 써야하는데요.
제어문은 자바스크립트 뿐만 아니라 수많은 프로그래밍 언어에서도 같은 맥락으로 사용되고있습니다.
이번 포스팅으로 제어문을 배워보도록 하겠습니다.
(1). if 문
제어문 : 프로그램이 흐름을 제어할 때 사용되는 구문입니다.
제어문의 종류:
비교문, 반복문이 있습니다.
if문 시리즈
if ~
if ~ else
if ~ else if ~ else
if 문 예제를 살펴보겠습니다.
먼저 if문의 구조입니다.
if( 조건식 ) { 실행문 ..... } |
조건식이 참 - 실행문을 합니다.
조건식 거짓 - if문 탈출 합니다.
예제코드 입니다. |
결과 입니다. |
<html> <head><title> </title> <script language="javascript"> <!-- A = 300; B = 5 ; document.write("자바스크립트 예제"+"<br>"); if(A>B){ document.write( A + "값이 더 큽니다"); } //--> </script> </head> <body> </body> </html> |
|
.
(2). if ~ else 문
if( 조건식 ) { 실행문1; ..... } else { 실행문2; } |
조건식이 참 - 실행문1 실행 합니다.
조건식이 거짓 - 실행문2 실행 합니다.
예제코드 입니다. |
결과 입니다. |
<html> <head><title> </title> <script language="javascript"> <!-- A = 10; B = 30 ; document.write("자바스크립트 예제"+"<br>"); if(A>B){ document.write( A + "값이 더 큽니다"); } else { document.write( B + "값이 더 큽니다"); } //--> </script> </head> <body> </body> </html> |
|
(3). if ~ else 문 if ~ else 문
-조건이 여러 개인 경우 else if 사용합니다.
-else if문은 여러 개 나올 수 있다.
-더 이상 조건을 나열하지 않고 그 외의 것을 명시하고자할때 else 실행문을 실행하게 된다.
if(조건1){ 실행문1 ; else if(조건2) 실행문2 ; else if(조건3) 실행문3; ..... else 실행문 x; }
|
조건1을 만족하면 실행문1을 실행합니다.
조건2를 만족하면 실행문2를 실행합니다.
조건3을 만족하면 실행문3을 실행합니다.
위 의 모든 조건을 만족하지 않으면 실행문 x을 실행합니다.
예제코드 입니다. | 결과 입니다. |
<HTML> <HEAD> <TITLE>Java Script Program</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var score; score = prompt("점수를 입력해 주십시오."); //유저로부터 점수입력받음 if (score >= 90) { document.write("A학점 입니다."); } else if (score >= 80) { document.write ("B학점 입니다."); } else if (score >= 70) { document.write ("C학점 입니다."); } else if (score >= 60) { document.write ("D학점 입니다."); } else { document.write ("F학점 입니다."); } // --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> |
위 예제에서는 85점입력했을때 결과화면 |
(4) Switch ~ case 문
switch(변수 혹은 수식){ case 값1: 수행문1; break; case 값2 수행문2; break; default : 수행문3; } |
switch문의 뼈대라하면, case, 값, break 이렇게 따라오는데 특히, case와 break는 switch문의 예약어로 쓰이기도 합니다.
특히 break는 반복문을 빠져나오는 예약어이기도 하죠.
아무튼, 변수 혹은 수식, 에 맞게 "값"으로 분기를하고 "break"를 만나면 case문은 종료하게됩니다.
가끔 프로그래머는 의도적으로 "break"문을 빠트려서, 여러 case 값: 구문들이 실행되게 하는 경우도 있습니다.
아래 유튜브 강의를 보시면 예제를 보실수있습니다.
예제코드 입니다. | 결과 입니다. |
<HTML> <HEAD> <TITLE>Java Script Program</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var Num; Num= prompt("번호를 입력해주세요! 혹은 알파벳을 입력해주세요.");
switch(Num){ case "1" : document.write(“1를 선택하셨습니다." ); break; case "2" : document.write(“2을 선택하셨습니다." ); break; case "3" : document.write(“3을 선택하셨습니다." ); break; case "4" : document.write(“4를 선택하셨습니다." ); break; default : document.write("번호를 잘못 누르셨습니다." ); } // switch문을 닫아줌 // --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> |
위 예제에서는 3을 입력했을때 결과화면 입니다. |
3을 입력하면 case "3" 이하의 구문을 실행하고 break를 만나서 case문을 탈출하게 되죠.
정독해주셔서 늘 감사합니다. :)
아래는 유튜브 강의영상입니다.
'웹 (WEB) > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 객체, 배열 (6장) (2) | 2017.06.12 |
|---|---|
| 자바스크립트 함수의개요 및 내장함수(5장) (0) | 2017.06.11 |
| 자바스크립트 제어문2 반복문(for, while) (4장) (0) | 2017.06.09 |
| 자바스크립트 연산자(2장) (0) | 2017.06.09 |
| 자바스크립트 개요(1장) (0) | 2017.06.08 |