Key Sequence Detection
Day12-Key Sequence Detection
구현 사항: 비밀번호 입력 기능 구현
1) 입력된 문자열을 저장할 배열과 맞춰야 하는 비밀번호를 각각 변수에 할당
const pressed = [];
const answer = "answer";
2) keyup 이벤트 발생 시 pressed에 할당된 배열에 누른 키를 저장
window.addEventListener("keyup", (e) => {
pressed.push(e.key);
});
- 만약 'a'를 눌렀을 시 pressed = ['a']가 됨
3) pressed에 저장된 요소들의 개수가 비밀번호 문자열의 length를 넘어가는 경우, splice()를 이용하여 가장 먼저 배열에 들어온 값을 제거
window.addEventListener("keyup", (e) => {
pressed.push(e.key);
pressed.splice(-answer.length - 1, pressed.length - answer.length);
});
-
만약 ['a','n','s','w','e','l']까지 입력된 상태에서 'r'을 입력하였을 경우, 가장 먼저 배열에 들어온 'a'가 삭제되고 'r'이 배열에 추가되어 ['n','s','w','e','l','r']이 됨
-
['a','n','s','w','e','l']까지 입력된 상태에서 'r'을 입력하였을 경우, pressed는 ['a','n','s','w','e','l', 'r']가 되며
pressed.splice(-7, 1);
이 되므로, 'a' 한 글자가 삭제됨
4) 만약 pressed 배열에 들어온 값들을 전부 이어 붙였을 때 비밀번호와 일치하는 문자열이 될 경우 cornify_add()를 실행
window.addEventListener("keyup", (e) => {
pressed.push(e.key);
pressed.splice(-answer.length - 1, pressed.length - answer.length);
if (pressed.join("").includes(answer)) {
console.log("DING DING!");
cornify_add();
}
});
Author And Source
이 문제에 관하여(Key Sequence Detection), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@carmine/JavaScript-30-Days-Challenge-DAY-12저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)