5일차(3)/javascript 기초 : if(2)
- if : 조건부 수행
- if ~ else : 양자택일
- if ~ elseif ~ else : 여러개 중에 하나를 실행하고싶은 경우
<예제3>
<!DOCTYPE html>
<html lang="en">
<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>Step04_if3.html</title>
</head>
<body>
<h1>다중 if 문 사용해보기</h1>
<p>점수를 입력하고 Enter 를 입력하세요</p>
<input type="text" id="inputJumsu" placeholder="0~100 사이의 점수 입력...">
<p id="result"></p>
<script>
/*
점수를 입력하기 Enter 를 쳤을때
입력한 점수가
90 이상일때는 "A 입니다."
80 이상일때는 "B 입니다."
70 이상일때는 "C 입니다."
60 이상일때는 "D 입니다."
그 이외의 경우에는 "F 입니다."
를 p 요소에 출력하기
*/
// id 가 inputJumsu 인 요소에 무언가 입력했을때 실행할 함수 등록
document.querySelector("#inputJumsu").addEventListener("keydown", function(e){
console.log("keydown!");
console.log(e);
//만일 Enter 를 쳤다면
if( e.keyCode == 13 ){ // e.key == "Enter"
//입력한 점수를 읽어와서
let jumsu=Number(document.querySelector("#inputJumsu").value);
//결과를 출력한다.
if(jumsu>=90){
document.querySelector("#result").innerText="A 입니다.";
}else if(jumsu>=80){
document.querySelector("#result").innerText="B 입니다.";
}else if(jumsu>=70){
document.querySelector("#result").innerText="C 입니다.";
}else if(jumsu>=60){
document.querySelector("#result").innerText="D 입니다.";
}else{
document.querySelector("#result").innerText="F 입니다.";
}
}
});
</script>
</body>
</html>
- "keydown!"이 키보드로 값을 입력할때마다 뜬다.
- e는 매개변수. input 안에 사용자가 입력하는 값이다.
- console에 나오는 object들을 쭉 보면 keycode라는 이름의 방(key)이 있다. 이곳에서 엔터키를 눌렀을 경우의 keycode 값을 알아낸다.(value:13)
- e.keycode로 특정 키의 번호를 참조할 수 있다.
- if( e.keyCode == 13 ){ } : 엔터(13)가 클릭될 때 if문 안쪽 함수가 실행되도록 함
- 엔터를 눌렀을 때 결과값이 90이상이면 if(){ }를 실행하고 빠져나옴
90미만 80이상일 경우 첫번째 else if를 실행하고, ... (반복)
}else{
document.querySelector("#result").innerText="F 입니다.";
}- 마지막 이 부분은 디폴트 실행부분. 위에 작성된 내용이 전부 해당하지 않을 때 실행되는 것이다.(없어도되긴함)
'국비교육(22-23)' 카테고리의 다른 글
| 5일차(5)/javascript 기초 : 동적 요소 만들기 (0) | 2022.10.12 |
|---|---|
| 5일차(4)/javascript 기초 : 연산자 operator (0) | 2022.10.12 |
| 5일차(2)/javascript 기초 : if, else 문 (0) | 2022.10.12 |
| 5일차(1)/javascript 기초 : 매개변수, 함수 (0) | 2022.10.12 |
| 4일차(4)/javascript 기초 : event (2) | 2022.10.11 |