Seperti yang kita ketahui bahwa keyboard mempunyai kode ASCII yang mana fungsi dari kode ASCII itu sendiri adalah untuk mewakili karakter-karakter huruf atau angka pada sebuah komputer. Kode ASCII (American Standard Code for Information Interchange) merupakan kode standar internasional yang bersifat unicode dan biasa digunakan oleh semua perangkat komputer untuk menerangkan sebuah teks. Nah buat kalian yang tidak tahu atau belum hafal kode ASCII kalian bisa membuat kumpulan kode ASCII, berikut Cara Menampilkan Kode ASCII dengan Keyboard.
Pada kasus ini saya akan membuat kode ASCII dengan sintak Javascript, dan akan diberikan sentuhan desain agar terlihat menarik untuk dilihat. berikut langkah-langkah nya.
Pertama kita akan buat sintak HTML sebagai objek yang akan kita pilih dengan keyboard.
<body> <div class="display"> <div class="wrap" aria-live="polite" aria-atomic="true"> <p class="keycode-display"></p> <p class="text-display">Tekan Tombol Keyboard</p> </div> </div> </body>
Setelah sintak HTML terbuat, berikut nya adalah ketikan sintak CSS3 untuk memberikan desain agar terlihat menarik.
@import url('https://fonts.googleapis.com/css?family=Pangolin');
* {
margin: 0;
padding: 0;
}
html,body {
height:100%;
margin:0;
font-family: 'Pangolin', cursive;
color:red;
overflow: hidden;
}
.display {
text-align: center;
display: table;
height:100%;
margin:0 auto;
}
.wrap {
display: table-cell;
vertical-align: middle;
}
p {
font-size: 100px;
font-size:40vmin;
text-align: center;
margin: 0;
}
p.text-display {
display: inline-block;
color: #5E5E5E;
font: bold 20px arial;
text-decoration: none;
text-align: center;
margin: 20px auto;
padding: 15px 20px;
background: #EFF0F2;
border-radius: 50px;
border-top: 1px solid #F5F5F5;
box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
text-shadow: 0px 1px 0px #F5F5F5;
}
Selanjut nya tahap terakhir adalah membuat kumpulan kode ASCII yang dikumpulkan dengan sintak Javascript berikut ini.
var body = document.querySelector('body');
body.onkeydown = function(e) {
if (!e.metaKey) {
e.preventDefault();
}
console.log(e.metaKey);
document.querySelector('.keycode-display').innerHTML = e.keyCode;
document.querySelector('.text-display').innerHTML = keyCodes[e.keyCode];
}
var keyCodes = {
3 : "break",
8 : "backspace / delete",
9 : "tab",
12 : 'clear',
13 : "enter",
16 : "shift",
17 : "ctrl",
18 : "alt",
19 : "pause/break",
20 : "caps lock",
27 : "escape",
28 : "conversion",
29 : "non-conversion",
32 : "spacebar",
33 : "page up",
34 : "page down",
35 : "end",
36 : "home ",
37 : "left arrow ",
38 : "up arrow ",
39 : "right arrow",
40 : "down arrow ",
41 : "select",
42 : "print",
43 : "execute",
44 : "Print Screen",
45 : "insert ",
46 : "delete",
48 : "0",
49 : "1",
50 : "2",
51 : "3",
52 : "4",
53 : "5",
54 : "6",
55 : "7",
56 : "8",
57 : "9",
58 : ":",
59 : "semicolon (firefox), equals",
60 : "<",
61 : "equals (firefox)",
63 : "ß",
64 : "@ (firefox)",
65 : "a",
66 : "b",
67 : "c",
68 : "d",
69 : "e",
70 : "f",
71 : "g",
72 : "h",
73 : "i",
74 : "j",
75 : "k",
76 : "l",
77 : "m",
78 : "n",
79 : "o",
80 : "p",
81 : "q",
82 : "r",
83 : "s",
84 : "t",
85 : "u",
86 : "v",
87 : "w",
88 : "x",
89 : "y",
90 : "z",
91 : "Windows Key / Left ⌘ / Chromebook Search key",
92 : "right window key ",
93 : "Windows Menu / Right ⌘",
96 : "numpad 0 ",
97 : "numpad 1 ",
98 : "numpad 2 ",
99 : "numpad 3 ",
100 : "numpad 4 ",
101 : "numpad 5 ",
102 : "numpad 6 ",
103 : "numpad 7 ",
104 : "numpad 8 ",
105 : "numpad 9 ",
106 : "multiply ",
107 : "add",
108 : "numpad period (firefox)",
109 : "subtract ",
110 : "decimal point",
111 : "divide ",
112 : "f1 ",
113 : "f2 ",
114 : "f3 ",
115 : "f4 ",
116 : "f5 ",
117 : "f6 ",
118 : "f7 ",
119 : "f8 ",
120 : "f9 ",
121 : "f10",
122 : "f11",
123 : "f12",
124 : "f13",
125 : "f14",
126 : "f15",
127 : "f16",
128 : "f17",
129 : "f18",
130 : "f19",
131 : "f20",
132 : "f21",
133 : "f22",
134 : "f23",
135 : "f24",
144 : "num lock ",
145 : "scroll lock",
160 : "^",
161: '!',
163 : "#",
164: '$',
165: 'ù',
166 : "page backward",
167 : "page forward",
169 : "closing paren (AZERTY)",
170: '*',
171 : "~ + * key",
173 : "minus (firefox), mute/unmute",
174 : "decrease volume level",
175 : "increase volume level",
176 : "next",
177 : "previous",
178 : "stop",
179 : "play/pause",
180 : "e-mail",
181 : "mute/unmute (firefox)",
182 : "decrease volume level (firefox)",
183 : "increase volume level (firefox)",
186 : "semi-colon / ñ",
187 : "equal sign ",
188 : "comma",
189 : "dash ",
190 : "period ",
191 : "forward slash / ç",
192 : "grave accent / ñ / æ",
193 : "?, / or °",
194 : "numpad period (chrome)",
219 : "open bracket ",
220 : "back slash ",
221 : "close bracket / å",
222 : "single quote / ø",
223 : "`",
224 : "left or right ⌘ key (firefox)",
225 : "altgr",
226 : "</git>",
230 : "GNOME Compose Key",
231 : "ç",
233 : "XF86Forward",
234 : "XF86Back",
240 : "alphanumeric",
242 : "hiragana/katakana",
243 : "half-width/full-width",
244 : "kanji",
255 : "toggle touchpad"
};
Setelah semua sintak diatas telah diketikan, simpan kemudian jalankan pada browser masing-masing dan apabila kita tekan salah satu tombol pada keyboard akan tampil kode ASCII. Selesai
Baik itulah tadi kode-kode ASCII yang terdapat pada keyboard, cukup sekian artikel mengenai Cara Menampilkan Kode ASCII dengan Keyboard. Semoga bermanfaat 🙂
