O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – adding keyboard events

The first thing we need to do is add keycodes.js to our application. This file contains a global static object named keyCodes that maps keys on the keyboard to their associated key code. For example, keyCodes.ENTER is equal to 13. Using this will make our code more readable than using key code numbers.

The next thing we need to do is open the HTML and add a new custom data attribute to the piano-key elements. We will call it data-keycode and it will be set to the value in the keyCode object we want to associate with the piano key:

<div data-note="2C" data-keycode="Q" class="piano-key white" title="C2"></div>
<!—elements not shown -->
<div data-note="4C" data-keycode="COMMA" class="piano-key white" title="C4"></div> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required