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:
keydown
keyup
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.)
Your book uses keyup
, so we will too.
The event listener is invoked with an event object, and that object will
contain a code
property that is the number of that key on the
keyboard. See
KeyboardEvent.code
for more detail.
Note that 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
:::JavaScript
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.
:::JavaScript
$("#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 propert-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.