반응형
코드 분석
<!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>
목표
지정해놓은 시크릿코드가 입력되면 유니콘 모양이 나오도록 만들어보자.
분석
- 사용할 변수를 선언한다.
const pressed = [];
const secretCode = 'wesbos';
- 선언한다.
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.splice부터이다. -secretCode.length를 보면 앞에 -가 붙어 있는데, 음수부분이면 배열의 마지막부분부터 카운트가 들어간다. 그 다음 콤마 이후의 부분은 pressed배열의 개수가 6을 넘어가면 한개씩 빠지도록 하여 6개의 개수를 유지하게 만들어준다.
그 아래에는 pressed의 입력부분에 시크릿코드가 들어가있으면 유니콘그림이 나오게 하는 코드구조이다.
마무리
.splice에 대한 지식이 단편적이여서 살짝 헷갈린 부분이 있었다.
그리고 cornify_add();부분은 새로웠다.
그래도 전체적으로 어려운 부분은 없었다.
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 14. JavaScript References VS Copying (0) | 2017.04.19 |
|---|---|
| 13. Slide in on Scroll (0) | 2017.04.19 |
| 11. Custom Video Player (0) | 2017.04.18 |
| 10. Hold Shift and Checkboxes (0) | 2017.04.14 |
| 9. Dev Tools Domination (0) | 2017.04.13 |
