기록 ＞ 기억
[JavaScript] 제어문 ① 조건문 (if, switch) 본문
조건문
● if 문
① if
let weight = 59;
if(weight < 60 || weight > 90) { /* 조건이 true 면 실행 */
document.write("<span style='color : red'>탑승불가</span><br/>");
}
document.write("몸무게 : " + weight + "kg"); /* 항상 실행 */| 탑승불가 몸무게 : 59kg |
몸무게 : 60kg |
② if ~ else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if ~ else</title>
<style>
form {
width: 500px;
height: 300px;
margin: 30px auto;
}
output {
display: block; /* 크기조정 위해 block 타입으로 변경 */
width: 150px;
height: 50px;
border: 2px solid #aaa;
line-height: 50px;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<form name="frm_sum" method="post">
<input type="text" name="a"> +
<input type="text" name="b">
<input type="button" name="btn_sum" value="더하기"><br/>
<output name="sum"></output>
</form>
<script>
/*** document.[form name].[element name] 과 같은 형식으로 접근가능 ***/
let frm = document.frm_sum;
let btn = frm.btn_sum;
let sum = frm.sum;
btn.onclick = function() {
let a = Number(frm.a.value);
let b = Number(frm.b.value);
if(a > b) {
sum.innerHTML = a + b; /* 조건이 true 면 실행 */
} else {
sum.innerHTML = a - b; /* false 면 실행 */
}
}
</script>
</body>
</html>
③ if ~ else if [ ~ else ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if_exam</title>
<link rel="stylesheet" type="text/css" href="if_exam.css">
</head>
<body>
<form name="frmCalcAmount">
<h3>단가계산 및 포인트별 등급계산</h3>
<div>
<label>제품명</label>
<input type="text" value="홈런볼" name="product">
</div>
<div>
<label>단가</label>
<input type="text" value="1500" name="price">
</div>
<div>
<label>수량</label>
<input type="text" value="3" name="cnt">
<input type="button" value="금액계산" name="btnCalc">
</div>
<div>
<label>금액</label>
<input type="text" name="amount" disabled placeholder="금액계산을 누르세요">
</div>
<div>
<label>총포인트</label>
<input type="text" name="totalPoint" disabled placeholder="금액계산을 누르세요">
</div>
<div>
<label>등급</label>
<input type="text" name="grade" disabled placeholder="금액계산을 누르세요">
</div>
</form>
<script type="text/javascript" src="if_exam.js"></script>
</body>
</html>/*** 단가계산 및 포인트별 등급계산 ***/
let frm = document.frmCalcAmount;
let btn = frm.btnCalc;
let nowPoint = 1000; /* 현재 포인트 */
btn.onclick = function() {
let price = Number(frm.price.value); /* 단가 */
let cnt = Number(frm.cnt.value); /* 수량 */
let amount = price * cnt; /* 금액(단가x수량) */
let totalPoint; /* 총포인트 */
let grade; /* 등급 */
/* 금액 */
frm.amount.value = amount;
/* 총포인트 = 현재포인트 + 금액의 10프로 */
totalPoint = nowPoint + (amount * 0.1);
frm.totalPoint.value = totalPoint;
/* 포인트별 등급 */
if(totalPoint <= 1500){ /* A조건이 true 면 실행 */
grade = "실버등급";
} else if(totalPoint <= 2000) { /* B조건이 true 면 실행 */
grade = "골드등급";
} else if(totalPoint <= 2500) { /* C조건이 true 면 실행 */
grade = "다이아등급";
} else { /* C조건이 false면 실행 */
grade = "가족등급";
}
frm.grade.value = grade;
}@charset "UTF-8";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
form {
width: 400px;
margin: 50px auto;
padding: 20px;
background-color: teal;
}
form h3 {
color: white;
text-align: center;
margin: 15px 0px;
}
form div{ margin: 5px;}
form input {
height: 30px;
}
form label {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: #eee;
padding: 2px;
}
● switch 문
/* 만점은 A+, 90점대는 A, 80점대는 B, 70점대는 C, 60점대는 D, 그 외 F */
var score = 87;
var grade = "";
switch(parseInt(score/10)) {
case 10 : grade = "A+";
break; /* break를 만나면 switch문을 빠져나감 */
case 9 : grade = "A";
break;
case 8 : grade = "B";
break;
case 7 : grade = "C";
break;
case 6 : grade = "D";
break;
default : grade = "F"; /* case에 맞는 조건이 없다면 default 실행 (if문의 else) */
break;
}
console.log(grade);let input = prompt("1, 2, 3 중 하나를 입력하세요");
switch(input) {
case "1" :
document.write("case '1'...", "<br/>");
break;
case "2" :
document.write("case '2'...", "<br/>");
/* break; */
case "3" :
document.write("case '3'...", "<br/>");
break;
}
'IT국비지원' 카테고리의 다른 글
| [JavaScript] 함수 (function) (0) | 2021.09.15 |
|---|---|
| [JavaScript] 배열 (Array) (0) | 2021.09.14 |
| [JavaScript] 제어문 ② 반복문 (for, while, do while, for in, for of) (0) | 2021.09.08 |
| [JavaScript] 연산자 (0) | 2021.09.07 |
| [JavaScript] 작성위치, 변수와 상수 (0) | 2021.09.06 |
| [CSS] 반응형 웹 (0) | 2021.09.06 |
| [CSS] visibility : hidden 과 display : none 의 차이 (0) | 2021.09.05 |
'IT국비지원' Related Articles
more
Comments