document에서 사용되는 이벤트를 정의
마우스 이벤트 : click(), focus(), input(), change(), mousevoer(), moseout(), scroll() ...
키보드 이벤트 : keyDown(), keyPress(), keyUp()
기타 이벤트 : prevnetDefault(), target, submit()
addEventListener('evnetName', callback Function)
메서드를 사용하여 이벤트 구현을 권장
- 이벤트 중복 부여가 가능하기 때문
키보드 이벤트
- keyDown : 키를 눌렀을 때
- keyPress : 키를 누르고 있는 시점
- keyUp : 키가 올라오는 순간
활용) 숫자야구 게임 만들어보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button" id="startBtn">게임시작</button>
<h1 id="comMsg"></h1>
숫자입력 : <input type="text" id="myNum">
<button type="button" id="tryBtn">게임확인</button>
<ol id="ol"></ol>
<script>
const comSet = new Set();
let comNums = [];
const comMsg = document.getElementById('comMsg');
const ol = document.getElementById('ol');
document.getElementById('startBtn').addEventListener('click', makeGame);
document.getElementById('tryBtn').addEventListener('click', compareNum);
//비교
function compareNum(){
console.log(comNums);
if(comSet.size<=0){
comMsg.innerText = "게임시작버튼을 클릭해주세요.";
return; //함수종료
}
let myNum = document.getElementById('myNum');
//유효성 검증
if(validMyNum(myNum.value)){
console.log("검증통과!!");
//비교
let myNumsArr = myNum.value.split("");
console.log(myNumsArr);
let strike = 0, ball =0;
//com
for(let i=0; i<comNums.length; i++){
//my
for(let j=0; j<myNumsArr.length; j++){
if(comNums[i] == myNumsArr[j]){
if(i==j){
strike++;
}else{
ball++;
}
break;
}
}
}
if(strike == 0 && ball==0){
ol.innerHTML += `<li>${myNumsArr} => OUT!!</li>`;
}else{
if(strike == 3){
ol.innerHTML += `<li>${myNumsArr} => SUCCESS!!</li>`;
}else{
ol.innerHTML += `<li>${myNumsArr} => ${strike}Strike, ${ball}Ball</li>`;
}
}
}else{
console.log("검증실패!!");
comMsg.innerText="유효하지 않은 숫자입니다.";
}
myNum.value="";
myNum.focus();
}
function makeGame(){
//기존 값 초기화
comNums = [];
comSet.clear();
ol.innerText='';
while(comSet.size < 3){
let rNum = Math.floor(Math.random()*9+1);
comSet.add(rNum);
}
console.log(comSet);
//set => arr 저장
comSet.forEach((e)=>{
comNums.push(e);
});
comMsg.innerText = "컴퓨터가 숫자를 결정하였습니다."
}
//검증
//숫자는 3자리, 숫자만 가능, 비어있으면 안됨, 중복 안됨
function validMyNum(myNum){
if(myNum==''){
return false;
}else if(myNum.length != 3){
return false;
}else if(isNaN(myNum)){
return false;
}else if(new Set(myNum.split("")).size != 3){
return false;
}else{
return true;
}
}
// console.log(validMyNum('q'));
</script>
</body>
</html>
'화면 수업 정리' 카테고리의 다른 글
| HTML,CSS,JS 15일차 (0) | 2024.08.14 |
|---|---|
| HTML,CSS,JS 14일차 (0) | 2024.08.13 |
| HTML,CSS,JS 13일차 (0) | 2024.08.12 |
| HTML,CSS,JS 12일차 (0) | 2024.08.09 |
| HTML,CSS,JS 11일차 (0) | 2024.08.08 |
