//INPUT: Reading keypresses

<New code>

//INPUT JS: 

//INPUT: this reads the unicode number of the key that was pressed
var readKeypress = function ( keyEvent ) {
    console.log( "in readKeypress..." );
    
    var unicodeNumber   = keyEvent.which || keyEvent.keyCode;   
}

//INPUT: triggers readKeypress when someone presses a key down
window.onkeydown    = readKeypress;

-OR-, for an awkward FUNCTIONAL PROGRAMMING style... 

//INPUT: this listens to the keyboard, and returns the number of the key that was pressed
window.onkeydown    = function ( keyEvent ) {
    console.log("in .onkeydown...");
    
    var unicodeNumber   = keyEvent.which || keyEvent.keyCode;
    
    //your process and/or output functions can go in here. For example:
    decideDirection( unicodeNumber );
}

-OR-, to turn off the keyboard reader... 

//INPUT: turn off the keyboard reader
window.onkeydown = "";

WASD keys make things more fun!

Many of us grew up playing games on computers, using the keyboard to move things around. It is time for us to learn a webpage can read the keyboard

There are a number of different ways to detect the keyboard. Remember how Javascript uses events, such as onclick, onload, and onchange? Well, there are even more options for reading keypresses:

Most Javascript programs use window.onkeydown.

Listening to the window

In Javascript, the window refers to the whole web browser. (In fact, window actually contains all the code, actions, and data of everything that happens in a browser, but more on that later.)

You can't attach onkeydown to just any id. For example: document.getElementById('anyOldId').onkeypress = mainProcedure; will not work. We have to attach onkeydown to the window.

The steps for reading a keystroke are:

var readKeypress = function (keyEvent) {
1. create a function that will be triggered when a key is pressed
note that keyEvent is inside the parentheses.
keyEvent is a variable that stores information about what key has been pressed
var unicodeNumber = keyEvent.which || keyEvent.keyCode;
2. store the unicode number inside a variable
This code is ugly because different browsers store the keypress information differently
//do something interesting with the unicode number
3. often there will be if...else statements here to do different things for different unicode numbers
}
window.onkeydown = readKeypress;
4. then make a keypress trigger the function you created

Example code

Press any key to begin!

You pressed character #

...is the result of the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My first keyboard sniffer</title>
        <meta name="description" content="Display information from keyboard keypresses">
        <meta name="author" content="Dave Drapak">
        <!--
            Change log:
                5. Oct 2015     - created!                                      - Drapak
                21. March 2017  - moved script to bottom for better style       - Drapak
                25. March 2018  - changed variable name for clarity             - Drapak
                9. October 2018 - updated to change stylistic issues            - Drapak
        -->
    </head>

    <body>
        <h4>Press any key to begin!</h4>
        <p>You pressed character #<span id="keyNumberId"></span></p>

        <script>
            // first, set up the keypress reading function
            // note that the keyEvent variable is inside the brackets
            var readKeypress = function ( keyEvent ) {
                console.log( 'in readKeypress...' );
                
                // the next line handles how different browsers read keypresses
                //INPUT: read the key that was pressed
                var unicodeNumber   = keyEvent.which || keyEvent.keyCode;   
                
                //PROCESS: Here is where you would do different things 
                //  depending on the variable, unicodeNumber.
                //Typically this will be some kind of if ... else if ... else chain
                
                //OUTPUT: show the character code that was pressed
                document.querySelector( '#keyNumberId').innerHTML   = unicodeNumber;
            }
            
            // Then activate it with window.onkeydown, which is like onclick, 
            // but is activated anytime a key is pressed down while the browser is active.
            //
            // Notice that there are no brackets () after readKeypress.
            // This is because it is reading the entire function from the readKeypress variable
            window.onkeydown    = readKeypress;
        </script>
    </body>
</html>