반응형
[새로 알게된 것]
1. 키보드 키코드
더보기
| KEY | KeyCode | ASCII | KEY | KeyCode | ASCII |
| 0 | 48 | 48 | Numpad 0 | 96 | 48 |
| 1 | 49 | 49 | Numpad 1 | 97 | 49 |
| 2 | 50 | 50 | Numpad 2 | 98 | 50 |
| 3 | 51 | 51 | Numpad 3 | 99 | 51 |
| 4 | 52 | 52 | Numpad 4 | 100 | 52 |
| 5 | 53 | 53 | Numpad 5 | 101 | 53 |
| 6 | 54 | 54 | Numpad 6 | 102 | 54 |
| 7 | 55 | 55 | Numpad 7 | 103 | 55 |
| 8 | 56 | 56 | Numpad 8 | 104 | 56 |
| 9 | 57 | 57 | Numpad 9 | 105 | 57 |
| A | 65 | 65 | Multiply | 106 | 42 |
| B | 66 | 66 | Add | 107 | 43 |
| C | 67 | 67 | Enter | 13 | 13 |
| D | 68 | 68 | Subtract | 109 | 45 |
| E | 69 | 69 | Decimal | 110 | 46 |
| F | 70 | 70 | Divide | 111 | 47 |
| G | 71 | 71 | F1 | 112 | |
| H | 72 | 72 | F2 | 113 | |
| I | 73 | 73 | F3 | 114 | |
| J | 74 | 74 | F4 | 115 | |
| K | 75 | 75 | F5 | 116 | |
| L | 76 | 76 | F6 | 117 | |
| M | 77 | 77 | F7 | 118 | |
| N | 78 | 78 | F8 | 119 | |
| O | 79 | 79 | F9 | 120 | |
| P | 80 | 80 | F10 | 121 | |
| Q | 81 | 81 | F11 | 122 | |
| R | 82 | 82 | F12 | 123 | |
| S | 83 | 83 | Backspace | 8 | 8 |
| T | 84 | 84 | Tab | 9 | 9 |
| U | 85 | 85 | Enter | 13 | 13 |
| V | 86 | 86 | Shift | 16 | 0 |
| W | 87 | 87 | Left Control | 17 | 0 |
| X | 88 | 88 | Right Control | 25 | 0 |
| Y | 89 | 89 | Left Alt | 18 | 0 |
| Z | 90 | 90 | Right Alt | 21 | 0 |
| a | 65 | 97 | Caps Lock | 20 | 0 |
| b | 66 | 98 | Esc | 27 | 27 |
| c | 67 | 99 | Spacebar | 32 | 32 |
| d | 68 | 100 | Page Up | 33 | 0 |
| e | 69 | 101 | Page Down | 34 | 0 |
| f | 70 | 102 | End | 35 | 0 |
| g | 71 | 103 | Home | 36 | 0 |
| h | 72 | 104 | Left Arrow | 37 | 0 |
| i | 73 | 105 | Up Arrow | 38 | 0 |
| j | 74 | 106 | Right Arrow | 39 | 0 |
| k | 75 | 107 | Down Arrow | 40 | 0 |
| l | 76 | 108 | Insert | 45 | 0 |
| m | 77 | 109 | Delete | 46 | 127 |
| n | 78 | 110 | Num Lock | 144 | 0 |
| o | 79 | 111 | ScrLk | 145 | 0 |
| p | 80 | 112 | Pause/Break | 19 | 0 |
| q | 81 | 113 | ; : | 186 | 59 |
| r | 82 | 114 | = + | 187 | 61 |
| s | 83 | 115 | – _ | 189 | 45 |
| t | 84 | 116 | /? | 191 | 47 |
| u | 85 | 117 | ‘~ | 192 | 96 |
| v | 86 | 118 | [ { | 219 | 91 |
| w | 87 | 119 | \ | | 220 | 92 |
| x | 88 | 120 | ] } | 221 | 93 |
| y | 89 | 121 | ” ‘ | 222 | 39 |
| z | 90 | 122 | < , | 188 | 44 |
| > . | 190 | 46 |
2. data() : HTML 엘리먼트 내에 데이터를 저장하고 읽는 역할을 하는 함수.
- jQuery에서 자주 사용되며 매우 쉽게 적용할 수 있다.
- Javascript에 data를 저장하지 않아도 되기 때문에 code를 깨끗하게 유지할 수 있다.
더보기
데이터 저장
$(selector).data(key,value)
key : string type의 변수로 data가 저장될 key값
value : object type으로 JavaScript에서 지원하는 모든 type의 데이터를 저장할 수 있다.
데이터 읽기
$(selector).data(key)
key : 앞서 저장한 data를 읽어오기 위한 key값
key를 생략하고 .data()로 호출할 경우 해당 엘리먼트에 저장된 모든 data들이 JSON형식으로 리턴됨
데이터 삭제
$(selector).removeData(key)
key : string type으로 삭제할 data의 key값
3.
- eventListener : eventTarget 객체로부터 발생한 이벤트를 처리하기 위한 오브젝트
- classList : DOMTokenList 개체로, 요소의 클래스 이름을 반환하는 읽기 전용 프로퍼티다. CSS클래스를 추가, 제거 및 전환하는데 유용하다.
- Array.prototype.forEach() : 주어진 함수를 배열 요소 각각에 대해 실행한다.
[내가 짠 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.keys {
display: flex;
width: 500px;
text-align: center;
}
.key{
width: 50px;
height: 50px;
margin: 5px;
background: linear-gradient(#ff8888, #949dff);
font-size: 2em;
line-height: 45px;
border-radius: 3px;
color: #fff;
}
</style>
</head>
<body>
<div class="keys">
<div data-key="81" class="key">
<!--kbd : 키보드 입력을 지정할 때 쓰는 코드-->
<kbd>Q</kbd>
</div>
<div data-key="87" class="key">
<kbd>W</kbd>
</div>
<div data-key="69" class="key">
<kbd>E</kbd>
</div>
<div data-key="82" class="key">
<kbd>R</kbd>
</div>
<div data-key="65" class="key">
<kbd>A</kbd>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
</div>
<div data-key="90" class="key">
<kbd>Z</kbd>
</div>
<div data-key="88" class="key">
<kbd>X</kbd>
</div>
</div>
<!-- audio : 오디오 삽입 시 사용하는 코드, 전역 특성을 포함한다 -->
<audio data-key="81" src="sounds/src_01-javascript-drum-kit_sounds_crash.wav"></audio>
<audio data-key="87" src="sounds/src_01-javascript-drum-kit_sounds_hihat-close.wav"></audio>
<audio data-key="69" src="sounds/src_01-javascript-drum-kit_sounds_hihat-open.wav"></audio>
<audio data-key="82" src="sounds/src_01-javascript-drum-kit_sounds_kick (1).wav"></audio>
<audio data-key="65" src="sounds/src_01-javascript-drum-kit_sounds_kick.wav"></audio>
<audio data-key="83" src="sounds/src_01-javascript-drum-kit_sounds_ride.wav"></audio>
<audio data-key="68" src="sounds/src_01-javascript-drum-kit_sounds_snare.wav"></audio>
<audio data-key="70" src="sounds/src_01-javascript-drum-kit_sounds_tom-high.wav"></audio>
<audio data-key="90" src="sounds/src_01-javascript-drum-kit_sounds_tom-high.wav"></audio>
<audio data-key="88" src="sounds/src_01-javascript-drum-kit_sounds_tom-high.wav"></audio>
<script>
function removeTransition(e) {
if (e.propertyName !== "transform") return;
e.target.classList.remove("playing");
}
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
key.classList.add("playing");
audio.currentTime = 0;
audio.play();
}
const keys = Array.from(document.querySelectorAll(".key"));
keys.forEach((key) =>
key.addEventListener("transitionend", removeTransition)
);
window.addEventListener("keydown", playSound);
</script>
</body>
</html>반응형
