조건문
조건문은 조건의 결과(true / false)에 따라 다른 코드를 실행하는 구문이다.
조건문의 구조)
만약에(A라면) { if(ConditionA) {
B를 실행한다. console.log("B를 실행한다");
} 그렇지 않다면 { -> } else {
C를 실행한다. console.log("C를 실행한다");
} }
if(ConditionA) {
B를 실행 : 조건A를 만족할 경우 실행;
} else if(ConditionD) {
E를 실행 : 조건D를 만족할 경우 실행;
} else {
C를 실행 : 조건A와 조건D를 모두 만족하지 않을 경우;
}
<script>
var score = prompt("점수를 입력해주세요.");
console.log("제 점수는요 : " + score);
if(score>=90){ // 90 ~ 100
console.log("A학점입니다.");
} else if(score>=80){ // 80 ~ 89(위에 if문에 90점이 있기 때문에)
console.log("B학점입니다.");
} else if(score>=70){ // 70 ~ 79(위에 else if문에 80점이 있기 때문에)
console.log("C학점입니다.");
} else if(score>=80){ // 60 ~ 69(위에 else if문에 70점이 있기 때문에)
console.log("D학점입니다.");
} else { // 60점 미만
console.log("F학점입니다.");
}
</script>switch문
조건문 중에서는 switch문도 존재한다.
switch문의 구조)
switch(조건변수) {
case 변수1 :
조건변수가 변수1일때 실행;
break;
case 변수2 :
조건변수가 변수2일때 실행;
break;
case 변수n :
조건변수가 변수n일때 실행;
break;
default :
break;
}
-> break문은 switch문을 멈추게 하는 역할이다.
<script>
switch(num){
case 1 :
document.write("num의 값은 1입니다.");
break;
case 2 :
document.write("num의 값은 2입니다.");
break;
case 3 :
document.write("num의 값은 3입니다.");
break;
default :
document.write("해당하는 숫자가 없습니다.");
break;
}
</script>script를 활용한 html
<!DOCTYPE html>
<html lang="ko">
<!-- head -->
<head>
<meta charset="UTF-8">
<title>좋아하는 계절(Season)</title>
</head>
<!-- body -->
<body>
<fieldset>
<legend>좋아하는 계절</legend>
<h3>[1]봄 [2]여름 [3]가을 [4]겨울</h3>
<input type="text" id="season">
<input type="button" value="입력" onclick="input1()">
<!--
onclick="input1()"
: 버튼을 클릭했을 경우
script에 있는 input1()함수를 호출한다.
-->
<h1 id="result"></h1>
</fieldset>
</body>
<!-- script -->
<script>
// input1() 함수 만들기!
function input1(){
var season1 = document.getElementById("season").value;
// document.getElementById("season").value;
// 문서(body)에서 id값이 season인 요소의 '값(value)'을 불러온다.
console.log("season1 : " + season1);
switch(season1){
case "봄" :
// document.write("좋아하는 계절은 봄 입니다.");
document.getElementById("result").innerHTML = "좋아하는 계절은 봄 입니다.";
break;
case "여름" :
// document.write("좋아하는 계절은 여름 입니다.");
document.getElementById("result").innerHTML = "좋아하는 계절은 여름 입니다.";
break;
case "가을" :
// document.write("좋아하는 계절은 가을 입니다.");
document.getElementById("result").innerHTML = "좋아하는 계절은 가을 입니다.";
break;
case "겨울" :
// document.write("좋아하는 계절은 겨울 입니다.");
document.getElementById("result").innerHTML = "좋아하는 계절은 겨울 입니다.";
break;
default :
// document.write("잘못 입력했습니다. 계절을 입력해주세요.");
document.getElementById("result").innerHTML = "잘못 입력했습니다. 계절을 입력해주세요.";
break;
}
}
</script>
</html>'Js' 카테고리의 다른 글
| 6. 변수와 HTML 구조 설정 (0) | 2022.08.18 |
|---|---|
| 5. while문과 continue/break (0) | 2022.08.18 |
| 4. for문 (0) | 2022.08.17 |
| 2. 연산자 (0) | 2022.08.15 |
| 1. JavaScript 기초 (0) | 2022.08.15 |
