12 - Key Sequence Detection

개요

 

간단한 강좌이다.

특정 키 조합을 타이핑하면 정해둔 액션이 실행된다.

 

1) 키 입력 이벤트 ('key up') 시에 이를 받아서 저장하고

2) 특정 키 패턴이 있는지 체크하는 것을 배우게 된다.

- 도어락의 허수 기능처럼 쓸 수도 있겠다.

 

 

내용

 

1) cornify   - js 파일 링크: http://www.cornify.com - cornify_add() 를 실행하면 랜덤한 유니콘 이미지가 브라우저 회면에 나타난다.   2) .splice() 함수   - splice 는 두 개를 꼬아서 붙인다 정도의 뜻이다. - 사용법 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) - start 인덱스부터 - deleteCount 개수만큼 삭제: 0이면 삭제안함 (optional) - item1, item2, ... 만큼 삽입한다. (optional) → 반환값은 삭제된 요소를 담은 배열. 삭제된 것이 없다면 빈 배열   여기서는 - start 는 -6-1 = -7 - deleteCount 는 7 - 6 = 1 이므로 - index -7 에서 1개를 삭제하라는 것이 된다.   3) .join() 과 .include() - .join() 을 해주면 ["j", "u", "s", "t", "h", "s"] 가 "jusths" 가 되며 - .include() 를 해주면 .join() 된 string 속에 secretCode 인 "jusths" 가 포함되어 있는지를 확인해준다.

타이핑시 아래와 같이 pressed[] 가 출력된다.   1) a, s, d, g, j, u, s, t, h, s 를 타이핑 하였다. 2) a, s, d, g, j, u, s 까지 7개가 pressed 에 들어갈때에 secretCode 길이보다 길어진다. - 이때 splice() 를 보면 - splice(-7, 1) 이 되는데, -1은 맨 끝의 s 의 인덱스이므로 - -7 은 뒤쪽에서 7번째인 a 가 되며 - deleteCount 는 1 이므로 a 를 지우게 된다. - 따라서 남은 pressed[] 는 s, d, g, j, u, s 이다.

 

splice 심화과정

 

- 출처 링크: https://goo.gl/NdsDhW

 

['angel', 'clown', 'mandarin', 'surgeon'] 이 있다.       1) splice(2, 0, 'drum'); - 2번 인덱스에,  삭제하진 말고, 'drum' 을 추가하라는 것이다. - 따라서 결과는 왼쪽과 같다.     2) splice(3, 1); - 3번 인덱스 (= 'mandarin') 에서부터 1개만 지우라는 것이다.            3) splice(2, 1, 'trumpet'); - 2번 인덱스 (='drum') 에서부터 1개를 지우고 - 'trumpet' 을 삽입하라는 것이다. → 결국은 replace 가 되는 셈이다.       4) splice(0, 2, 'parrot', 'anemone', 'blue'); - 0번 인덱스, 즉 처음부터 2개를 지우고 - 'parrot', 'anemone', 'blue' 를 삽입한다.       5) splice(3, Number.MAX_VALUE); - 3번 인덱스부터, 어마어마한 숫자만큼 삭제해라 - Number.MAX_VALUE == 2^1024 이다. - 따라서 있는 만큼까지는 다 지워버린다.