230526 day37 개념 정리

마우스 이벤트 
click 
mouseenter 
mouseleave
mousemove
scroll

데이터 변경 이벤트 
input 사용자가 인풋의 값을 변경할 때 발생 
change 요소 변경이 끝나면 발생
focus 요소가 포커스를 받을 때 발생 
blur 요소가 포커스를 잃을 때 발생 


키보드 이벤트 
keydown 키보드의 키를 눌렀을 때 발생
keyup 키보드의 키를 뗐을 때 발생


자바스크립트 비동기 

setInterval(function, time)
ex>
setInterval(function(){ alert("신나는 금요일")}, 2000 )

setTimeout(함수, 시간)
ex> 
setTimeout( function(){ location.href = "https://naver.com"; }, 3000 )

인터벌 생성
ex>
let timer = 
setInterval(function(){ alert("신나는 금요일")}, 2000 )

인터벌 정지
clearInterval(함수, 시간);
ex>
clearInterva(timer);


타자게임 만들기 실습 
<힌트>
1. 단어배열 words
2. 배열 중 랜덤한 인덱스의 요소를 화면 출력
3. 게임 시작 버튼을 누르면 
setInterval이 시작되고 20초가 지나면 게임이 종료된다 
4. input 이벤트 발생 시 input의 value값과 
화면의 단어랑 일치하는지 비교 
5. 일치하면 점수를 10점 더해주고 출력
6. 그 후 input 값은 ""로 변경
7. 화면 위에 나타난 단어도 번경