연습문제) 윤년 계산기, 합격여부 확인 풀이
2) switch(식) - 숫자로 판단되는 값 p487
case, default, break 명령어도 함께 사용
'식'이 어떤 case에 해당되면 그 case로 이동
식 - number 형태의 값 또는 변수
string 형태의 값 또는 변수
형식)
switch(식) {
case 1: 실행문장들;
break;
case 2: 실행문장들;
break;
........
case n: 실행문장들;
break;
[ default: 실행문장들; ]
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스위치 예제</title>
</head>
<body>
<script>
var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인");
switch(session) {
case "1"
: document.write("<p>마케팅 세션은 201호에서 진행됩니다.</p>");
break;
case "2" :
document.write("<p>개발 세션은 203호에서 진행됩니다.</p>");
break;
case "3" :
document.write("<p>디자인 세션은 205호에서 진행됩니다.</p>");
break;
default :
document.write("잘못 입력했습니다!");
}
</script>
</body>
</html>
if와 switch의 구분
if는 조건에 따른 분기, switch는 경우에 따른 분기
윤년 계산기는 switch로 만들기 어렵다.
반면 학점 계산기는 if 보다는 switch로 만드는 것이 더 좋다.(컴퓨터의 입장에서 편하다.)
if문의 경우 처음부터 끝까지 조건을 다 확인한다.
switch의 경우는 조건에 해당하는 부분으로 바로 넘어간다.
break가 없는 경우 순차적으로 전부 실행된다. defalult는 switch의 조건에 모두 해당 되지 않을 때 실행된다.
자바로는 switch로 메뉴를 만들기도 한다.
라이브러리 : 사전적인 의미는 도서관, 프로그래밍 언어로서의 의미는 미리 만들어 놓은 코드 집합
모든 코드를 한 개발자가 만들 수 없기 때문에 코드를 모아놓음.
부가적인 기능이나 공통적으로 사용하는 기능들을 미리 코드로 작성하여 쉽게 가져다 쓸 수 있도록 함.
alert, confirm, prompt 등
수학연산용 라이브러리, 그래픽 처리용 라이브러리 등......
parseInt(실수) -> 내림한 정수를 준다.
예) parseInt(3.14) - 결과 : 3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>학점 계산기(switch)</title>
</head>
<body>
<h2>학점 계산기</h2>
<p>점수를 입력하세요.</p>
<p>점수 : <input type="number" id="score"></p>
<p><button id="btn">계산</button></p>
<p id="res"></p>
</body>
<script>
//제어할 요소 가지고 오기
var s = document.getElementById("score");
var b = document.getElementById("btn");
var r = document.getElementById("res");
var snum; //입력값을 넣는 변수
var grade;//결과값을 넣는 변수
//버튼을 눌렀을 때 발생하는 함수
b.addEventListener("click", function () {
snum = s.value; //점수값 출력하기
// 90~99의 값을 한자릿수로 만들어 주기 위해서 10으로 나누기
// console.log(snum/10);
//정수로 변환하는 라이브러리 함수 parseInt
snum = parseInt(snum / 10);
console.log(snum);
switch (snum) {
case 10:
// grade = "A";
// break; 없으면 밑으로 내려간다. 처음부터 끝까지 다 출력된다.
case 9:
grade = "A";
break;
case 8:
grade = "B";
break;
case 7:
grade = "C";
break;
case 6:
grade = "D";
break;
default:
grade = "F"; //break 안 써도 됨.
}
r.innerHTML = grade;
})
</script>
</html>중괄호가 끝나는 부분이 어디인지 잘 확인하고 코드 작성하기!
출력하는 부분은 switch문 끝나고 중괄호 뒤에 작성하기
switch로 만든 것은 if로 변환 가능! if문으로 만든건 switch로 변환 안 될 수도 있다.
2. 반복 제어문 : for, while
for() : 특정 횟수만큼 실행문장들을 반복 실행.
기본형태)
for(카운터변수초기식; 반복횟수조건식; 카운터변수증감식){
반복할 문장들;
}
처리 순서
for(①; ②; ③){
④;
}
3. 기타 제어문 : break, continue
break문 : 제어를 중단시키는데 사용하는 문장, break문 때문에 각 case를 별개로 처리할 수 있다.
단독으로만 쓰기는 어렵다. switch문에서 { 한번에 같이 실행 } 해당 조건만 하고 { } 을 중단시켜 버린다.
연습문제) 가위바위보 게임 만들기
랜덤한 값(난수)의 생성 : Math.random()
Math.random() - 0.0 ~ 0.9 사이의 값을 생성.
1부터 10 사이의 수 생성
Math.random() * 10 : 0.0 ~ 9.99999 사이의 값을 생성.
Math.floor(Math.random() * 10) : 0 ~ 9 사이의 값.
Math.floor(Math.random() * 10) + 1 : 1 ~ 10 사이의 값.
수학의 버림함수 : Math.floor(3.14) -> 3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가위바위보 게임</title>
</head>
<body>
<h2>가위바위보 게임</h2>
<p>가위, 바위, 보 중 하나를 선택하세요.</p>
<p>
<button id="ka">가위</button>
<button id="ba">바위</button>
<button id="bo">보</button>
</p>
<p>대전 결과 : <span id="res"></span></p>
</body>
<script>
//컴퓨터의 값 1.가위 2.바위 3.보
var com =Math.floor(Math.random() * 3) + 1;
var ka = document.getElementById("ka");
var ba = document.getElementById("ba");
var bo = document.getElementById("bo");
var res = document.getElementById("res");
//컴퓨터의 값과 비교(승패판별)
ka.addEventListener("click", function(){
if(com == 2){
res.innerHTML = "컴퓨터는 바위, " + "컴퓨터가 이겼습니다";
}
else if(com == 3) {
res.innerHTML = "컴퓨터는 보, " + "당신이 이겼습니다.";
}
else {
res.innerHTML = "컴퓨터는 가위, " + "비겼습니다.";
}
});
ba.addEventListener("click", function(){
if(com == 3){
res.innerHTML = "컴퓨터는 보, " + "컴퓨터가 이겼습니다";
}
else if(com == 1) {
res.innerHTML = "컴퓨터는 가위, " + "당신이 이겼습니다.";
}
else {
res.innerHTML = "컴퓨터는 바위, " + "비겼습니다.";
}
});
bo.addEventListener("click", function(){
if(com == 1){
res.innerHTML = "컴퓨터는 가위, " + "컴퓨터가 이겼습니다";
}
else if(com == 2) {
res.innerHTML = "컴퓨터는 바위, " + "당신이 이겼습니다.";
}
else {
res.innerHTML = "컴퓨터는 보, " + "비겼습니다.";
}
});
</script>
</html>
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 9일 (2) JavaScript - 제어문 while 문, 배열 (0) | 2023.03.09 |
|---|---|
| 3월 9일 (1) JavaScript - 신규 표준 문법, 제어문 for문 (0) | 2023.03.09 |
| 3월 8일 (1) JavaScript - 연산자2, 분기 제어문 if문 (0) | 2023.03.08 |
| 3월 7일 (2) JavaScript - 변수3, 제어문, 연산자 (0) | 2023.03.07 |
| 3월 7일 (1) JavaScript - 변수2 (0) | 2023.03.07 |
