Animation and Keyboard Events¶

This reading covers two separate things: animation and keyboard events.

Animation can be done with the jQuery .animate method, which is one place that jQuery exceeds raw JavaScript. (That's not literally true, since jQuery is implemented in raw JavaScript, but with animate, the added value is enormous.)

Keyboard events are another useful way to react to user input; this time, not by clicking the mouse, but by using the keyboard.

Keyboard Events¶

There are three keyboard events that you might potentially be interested in:

1. keydown
2. keyup
3. keypress

The last is only for real characters, not modifiers like shift or control. The keypress event is officially deprecated in favor of device-independent events, but it's likely to be supported for a long time. (deprecated is jargon in the computer science community meaning that, even though a feature exists, you should not use it.)

Ottergram uses keyup, so we will too.

The event listener is invoked with an event object, and that object will contain a two useful properties:

• key which is a string describing the intended input, taking into account:
  • shift state (is the shift key down? Caps lock on?)
  • modifier keys (control, option, command, etc.)
  • for example, "a" versus "A"
  • Key
• code which is a string describing the physical key, e.g. "KeyA"
  • Code

The former is better if, say, the user is typing a string and we want to capture that string. The latter is better if we are using a key as a kind of control, like WASD as an alternative to arrow keys. In that case, we probably don't care about upper/lower case.

In other words, the code for a key is not the same as the code for a character. So, for example, the "a" key has the same code whether the "shift" key is up or down. If you care about "a" versus "A"; you want the key property instead. See KeyboardEvent.key

document.addEventListener('keyup',function (eventObj) {
    if( eventObj.code === 'Escape' ) {
        eventObj.preventDefault();
        ...
    } else if( eventObj.code === 'KeyW' ) {
        ...
    }
});

Or, using jQuery:

$(document).on('keyup', function (eventObj) {
    console.log(eventObj.code);
}

Note. The .code attribute was added to jQuery in version 3, so when you load jQuery, use something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Doing that ensures that the jQuery event object includes the ".code" property. If you copy the template file, you'll get that version of jQuery.

I've added the latter keyup handler to this page, so you can open the JS console, type a few keys, and see the results. Try WASD, since you'll use those keys in the assignment. You can also try the four arrow keys.

jQuery Animations¶

jQuery provides an easy way to do animations that is compatible with older browsers, since the animations are done by jQuery. You can read the details here: jQuery animate() method.

It's very easy to use, but first let's see it in action. Try clicking on the following box. You can click it again (and again) to re-run the animation.

Essentially, the animation effect is to successively (frame by frame) to change the height and font-size CSS attributes from their initial values (height:50px and font-size:10px) to their final values (height:200px and font-size:20px).

So, let's see how the JQ code does that. Here's the complete code; we'll break it down afterward.

$("#box1")
    .click(function () {
        $("#box1")
             .css({height: "50px", "font-size": "10px"})
             .animate({height: "200px", "font-size": "20px"},
                      2000);
        });

Now let's break that down. The click handler is the following function:

    function () {
        $("#box1")
             .css({height: "50px", "font-size": "10px"})
             .animate({height: "200px", "font-size": "20px"},
                      2000);
        }

Almost all of it is a sequence of two operations on the element #box1.

The first operation is to reset two CSS property-value pairs to some initial values. This happens instantly. The argument to the .css method is a JS object literal that is a collection of CSS property-value pairs.

             .css({height: "50px", "font-size": "10px"})

The second operation is to gradually change those values to their final values. The gradual changes take 2000 milliseconds (2 seconds). That uses the JQ .animate method. The .animate() method's first argument is a JS object literal that contains a collection of target CSS values, just like the .css() method. The second argument says how many milliseconds it should take to achieve that change.

             .animate({height: "200px", "font-size": "20px"},
                      2000);

Note that I could have specified the initial CSS using CSS style rules instead of JQ's .css() method, but I like using the same medium for specifying both the starting and ending values. It also makes it easy to re-run the animation as many times as you want.

Modifying a Value¶

In JavaScript, Python and most modern languages, there is an update assigment operator that allows you to modify a variable up or down by some amount. For example, in JavaScript:

x += 200;  // increase by 200
y -= 100;  // decrease by 100

By analogy, jQuery's animate method allows you to increase or decrease a property by some amount. The above example increased the width from 50px to 200px, an increase of 150px. Similarly, it increased the font size from 10px to 20px, an increase of 10px. The following code using += is equivalent (there's also a -= operator). Note that the "value" is a string that includes the operator as well as the amount.

$("#box2")
    .click(function () {
        $("#box2")
             .css({height: "50px", "font-size": "10px"})
             .animate({height: "+=150px", "font-size": "+=10px"},
                      2000);
        });

Here it is in action:

This is a useful trick in several assignments.