고정 헤더 영역
상세 컨텐츠
본문
제어문
프로그램의 흐름을 변경해주는 지시어로 조건문, 반복문 등이 있다.
조건문
참 거짓에 따라 실행되는 if 와 switch 코드.
장단점.
if : 조건 일치 확인하며 인트럭션이 필요
switch : 처음 입력값을 확인하는 인터럭션만 필요, 조건 확인 시 인터럭션 불필요.
인터럭션 : CPU가 명령을 수행하기 위해 메모리 상에서 명령어를 읽어오는 과정, 즉 인터럭션이 적을수록 좋음.
switch 조건이 많아져도 인터럭션이 늘지 않으므로 조건이 많을 때는 switch 문이 좋다.
if 문
- 조건이 참이면, { } 안의 실행문이 실행되고, 거짓이면 if 문을 빠져나간다.
예문 if / if else
<script>
var age = Number(prompt("enter ur age"));
if (age >= 19) {
document.write("성인입니다.");
}
</script>
18 이하는 화면에 아무것도 출력이 되지 않음.
<script>
var age = Number(prompt("enter ur age"));
if (age >= 19) {
document.write("성인입니다.");
} else {
document.write("애들이야 이자식아");
}
</script>
이렇게 else를 사용하면, 거짓 조건에 해당하는 실행문이 생긴다.
if userid == admin show the button
<body>
<div id="a"></div>
<script> // Only when admin user is entered, "Write" button shows
var userid = prompt("Enter ")
if (userid == "admin") {
document.getElementById("a").innerHTML="<button>글쓰기</button>";
} // innerHTML 대소문자 꼭 잘 보고 작성.
</script>
</body>
-------------------------------------------------------------------------
<div id="btn"></div>
<script>
var show = prompt("글쓰기 버튼이 필요하신가요 (y or n)");
if (show == "y") { // 입력 값 대소문자 구별
document.getElementById("btn").innerHTML=
"<input type='button' value='글쓰기'>";
} else {
document.getElementById("btn").innerHTML=
"<input type='button' value='글수정'>"
}
</script>
짝수 홀수 구하기
<script>
var x = prompt("Enter any number"); // 숫자 입력
if (x%2 == 0) { // 입력 값을 2로 나누어 나머지가 0이라면,
document.write("Even number..."); // 짝수
} else {
document.write("Odd number"); // 홀수
}
</script>학점
<script>
var score = Number(prompt("점수를 입력하세요."));
if (score < 0 || score > 100) {
document.write("점수가 잘못 입력되었습니다.");
} else if (score >= 95) {
document.write("A+ 입니다.");
} else if (score >=90) {
document.write("A 입니다.");
} else if (score >=85) {
document.write("B+ 입니다.");
} else if (score >=80) {
document.write("B 입니다.");
} else if (score >=75) {
document.write("C+ 입니다.");
} else if (score >=70) {
document.write("C 입니다.");
} else if (score >=65) {
document.write("D+ 입니다.");
} else if (score >=60) {
document.write("D 입니다.");
} else {
document.write("F 입니다. 그냥 나가세요");
}
</script>
// 소수점을 사용해도 자동으로 float 형변환이 이루어진다.계절
<script>
var month = Number(prompt("몇 월인지 입력하세요"));
if ( month < 1 || month > 12) {
document.write("Wrong month you entered")
} else if (month >= 3 && month <= 5) {
document.write("The month of" + month + " is Spring");
} else if (month >= 6 && month <= 8) {
document.write("The month of" + month + " is Summer");
} else if (month >= 9 && month <= 11) {
document.write("The month of" + month + " is Autumn");
} else {
document.write("The month of" + month + " is Winter");
}
</script>
3항연산자
if ~ else ~ 구문에서 각각 실행 할 문장이 하나 씩 일 때, 3항 연산자를 사용하면 편리하다.
if (조건) ? true_실행 : false_실행 해주면 된다.
<script>
var userNum = Number(prompt("Enter any Number"));
if (userNum !== null) {
(userNum % 3 === 0) ? alert("3 multiple number") : alert ("Not 3 multiple Number"); // 3항 연산자
} else alert ("There no exists any number");
</script>
<script>
var num1 = prompt("Enter any number under 50");
var num2 = prompt("Enter any number under 50");
if (num1 < 10 || num2 < 10)
alert("Either of two number is less than 10");
else
alert("Neither of two number is less than 10");
</script>
웹 사이트에서 회원 아이디와 회원 레벨에 따라 콘텐츠 접근을 판정하는 프로그램을 생각해보자.
1. 회원 아이디를 입력 받는다.
2. 아이디가 admin 이면, 콘텐츠에 접근 가능하다는 메시지를 보이고 프로그램 종료한다.
3. 그렇지 않으면 회원 레벨을 입력받는다.
4. 회원 레벨이 1~7 이면, 접근 가능 메시지를 출력하고 프로그램을 종료한다.
5. 그렇지 않으면 콘텐츠 접근 불가 메시지를 출력하고 프로그램을 종료한다.
<script>
var id = String(prompt("아이디를 입력해주세요."));
if (id == "admin") {
document.write("접근 가능 admin")
} else {
var level = Number(prompt("회원 레벨을 입력하세요"));
(level >= 1 && level <= 7) ? alert("접근 가능") : alert("접근 불가");
}
</script>
알파벳
<script>
var alphabet = String(prompt("Enter any alphabet lower letter"));
if (alphabet == "a" || alphabet == "e" || alphabet == "i" || alphabet == "o" || alphabet == "u") {
// document.write(alphabet + "는(은) 모음입니다.");
document.getElementById("result").innerHTML=alphabet + "는 모음입니다."
} else {
// alert(alphabet + "는(은) 자음입니다.");
document.getElementById("result").innerHTML=alphabet + "는 자음입니다."
}
</script>
팁 계산
<script>
var customer = {good:"0.15",soso:"0.1",bad:"0.05"};
var cost = prompt("결제 할 금액을 입력해주세요")
var costomer_satisfied = prompt("만족도 조사 (good/soso/bad)");
if (costomer_satisfied == "good") {
document.write("팁은 " + cost * customer.good + "입니다.");
} else if (costomer_satisfied == "soso") {
document.write("팁은 " + cost * customer.soso + "입니다.");
} else if (costomer_satisfied == "bad") {
document.write("팁은 " + cost * customer.bad + "입니다.");
} else {
alert("다시 입력해주세요 (good/soso/bad)");
}
</script>
Switch 문
<script>
var x = Number(prompt("숫자를 입력해주세요")); // 입력받는 값은 문자로 인식 그래서 형변환 필요
switch (x) {
case 1: // : 콜론 유의
document.write("x는 1입니다.");
break;
case 2:
document.write("x는 2입니다.");
break;
default:
document.write("x는 1도 2도 아닙니다.");
}
</script>
요일 나타내기
// var day = Number(prompt("1 일요일 2 월요일 3 화요일 4 수요일 5 목요일 6 금요일 7 토요일"));
// switch (day) {
// case 1:
// document.getElementById("day").innerHTML="일요일"
// break;
// case 2:
// document.getElementById("day").innerHTML="월요일"
// break;
// case 3:
// document.getElementById("day").innerHTML="화요일"
// break;
// case 4:
// document.getElementById("day").innerHTML="수요일"
// break;
// case 5:
// document.getElementById("day").innerHTML="목요일"
// break;
// case 6:
// document.getElementById("day").innerHTML="금요일"
// break;
// default :
// document.getElementById("day").innerHTML="토요일"
// break;
// }
var day = Number(prompt("1~7 중에 숫자를 입력하세요."));
switch (day) {
case 1 :
day_name = "일요일";
break;
case 2 :
day_name = "월요일";
break;
case 3 :
day_name = "화요일";
break;
case 4 :
day_name = "수요일";
break;
case 5 :
day_name = "목요일";
break;
case 6 :
day_name = "금요일";
break;
case 7 :
day_name = "토요일";
break;
default :
document.write("다시 입력하세요");
}
document.write(day_name + " 입니다.");
'FrontEnd > JavaScript' 카테고리의 다른 글
| 반복문 ( while, do while, for, break, continue ) (0) | 2022.07.01 |
|---|---|
| if else 예문 (0) | 2022.07.01 |
| 형변환 및 예제 (0) | 2022.06.30 |
| 연산자 (Arithmetic, Assignment, String, Comparison, Logical) (0) | 2022.06.28 |
| 변수 Variable / 출력 (0) | 2022.06.28 |
