코드랩 레퍼런스
JavaScript - 조건문 본문
조건문(제어문)
조건문은 말 그대로 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.
if문
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문
두개의 값을 비교하여 코드를 별개로 실행합니다.
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문
여러가지 조건에 따라 조건문을 설정합니다.
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>
switch문
해당 조건에 맞는 값을 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>
Related Articles
more
Ad
Comments