반응형
Key Sequence Detection
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Key Detection</title>
<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>목표
누른 키가 콘솔창에 뜨도록 배열로 연결되어 뜨도록 하고, 비밀 키를 입력하면 유니콘이 나오도록 설정
과정
- 상수 설정
- 이벤트 리스너 생성 및 효과 설정
코드 분석
1. 상수 설정
const pressed = [];
const secretCode = 'wesbos';빈 배열 pressed와 비밀코드가 담긴 secret을 만든다
2. 이벤트 리스너 생성 및 효과 설정
window.addEventListener('keyup', e => {
console.log(e.key);
pressed.push(e.key);
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
if (pressed.join('').includes(secretCode)) {
console.log('DING DING!');
cornify_add();
}
console.log(pressed);
});우선 키를 누르면 콘솔창에 누른 키가 뜨면서 배열 pressed에 추가된다.
배열의 길이를 항상 6으로 정하기 위해 splice를 사용했고, 새로 입력 시 뒤에서 부터 채워진다
만약 w,e,s,b,o,s를 입력하면 조건문의 내용과 같이 콘솔창에 알림과 유니콘사진이 생긴다(cornify_add())
찾아본 내용, 알게된 내용들
splice() - 첫번째 매개변수 > 시작 위치, 두번째 매개변수 > 제거할 요소의 수