Student Instructions

Unit 5: Lesson 14 - Image Scroller with Key Events

Background

When designing programs, you will often discover new pieces of functionality you wish to add once you have completed a working prototype. Incorporating these new features will of course require writing new code, but it can also often require redesigning the parts of your program you have already written. In this lesson you will extend the "My Favorite Things" app you built in the previous lesson, continuing to practice using arrays in apps while learning how to approach the process of refactoring code.

Vocabulary

• Key event: an event triggered by pressing or releasing a key on the keyboard.
  • keyup - event type triggered when key is released on the keyboard
  • keydown - event type triggered when key is pressed down on the keyboard
• event.key - Use event.key - from the event parameter of the onEvent callback function - to figure out which key was pressed.

Lesson

• Introduction to key events.
• Improve the "My Favorite Things" app to store and display images.
• Refactor code in order to incorporate new functionality.

Continue

Student Instructions

Making our App an Image Scroller

Over the course of this lesson we are going to be working towards improving our "My Favorite Things" app to add some new features. Our improved app will be able to:

• Respond to key events.
• Display images by storing their URLs.

We'll call this new kind of app an image scroller but feel free to call it anything you like.

Do This:

• Close these instructions.
• Experiment with the improved "My Favorite Things" app to understand the new features we'll be adding.
• Make sure you try clicking the left and right arrow keys!

Once you think you've experimented enough, continue on to the next level.

Student Instructions

keypress

If we want to add keyboard input to our apps we'll need to learn about how key events work in App Lab. To start let's take a closer look at the onEvent block. We already know that event handlers call a function. What we'll see now is that they also pass a parameter. The default name for this parameter is simply event but you can change it to be anything you like.

The event parameter is a more complex kind of variable (called an "Object") that we'll learn more about later. For now just know that for both mouse and keyboard events, the event parameter passes more information about the event. In the case of key events you can find out the key(s) that were actually pressed by using event.key.

Do This:

• Drag out an onEvent block.
• Change the ID to screen1 and the event type to keypress.

• Once you hit Run, click on the screen so that the keystrokes will register.
• Type different combinations of keys and check out the results in the console. Does every key combination print to the console? Some keys to try:
  • Letter keys
  • Number keys
  • Shift key
  • Hold shift and letter
  • Delete key
  • Left and right arrow keys
  • Press and hold a key

Student Instructions

Using keyup and keydown

On the last level, we played with the keypress event. Let's take a look at some of the other key events.

You are going to get the chance to play with keyup and keydown in this level. Pay attention to the different values of event.key for keydown and keypress.

Do This:

• Switch to the event type to keydown or keyup.

• Try out the event.
  • Press and hold a key
  • Try the arrow keys
  • Shift
  • Option
  • Alt
  • Others

Student Instructions

Play Sound With Keys

You may have noticed from the last couple of levels that the value of event.key is just a string which is the name of the key. As a result we can check which key was pressed with a simple conditional statement. For example to check for the press of the "a" key we could write if (event.key == "a").

Do This:

The starter code provided plays the sound whenever ANY key is pressed.

• Use console.log to find out the value of event.key when the up arrow is pressed.

• Add an if statement so the sound only plays when the when the up arrow is pressed.

Student Instructions

Multiple Keys

If you want your program to respond differently to a couple different keys, you will need to use chained conditional statements (if and else-if).

Let's set up the program to play a different sound for the down key.

Do This:

We've added another sound to the app, but it's just sitting at the top of the code.

• Add an else-if statement to check if the down arrow was pressed.

• Move the playSound command from the top of the program inside the else-if. (Notice that in the example, we switch to block mode to move this line because it's easier to move blocks around that way. You can just copy/paste the text too.)

• Test the program: it should play one sound when the up arrow is pressed and a different sound if the down arrow is pressed. It shouldn't make any sound if any other keys are pressed.

Student Instructions

Buttons and Keys

We now know how to respond to key events, but often we want the user to be able to do the same thing with the app in multiple ways. For example, we might want the app to exhibit the same behavior if the user clicks a button on the screen or a key on the keyboard. (This is how so-called "keyboard shortcuts" work.)

In the program you're about to see, we've provided event handlers for some buttons on the screen. You're going to create identical functionality for the key events.

Do This:

• Add conditional statements inside the keydown event handler to check for when the up and down arrows are pressed.

• Copy the code for the upImage button, and paste into the up arrow if statement.

• Copy the code for the down button, and paste it into the down arrow if statement.

• Confirm your app responds to key events by running it. For example, clicking the image of the up arrow in the app should do the same thing as hitting the up arrow on the keyboard.

Student Instructions

Refactoring Code

On the last level, we copied a few lines of code to a different part of our program. Hopefully warning bells went off in your head! Any time you are copying portions of code from one area of your program to another, it's a good indication that you should write a function to capture that behavior in one place.

When you add new features to your code you will often create redundancies. To keep your code readable and consistent, you may need to rewrite old pieces of code. This process of restructuring existing code without changing its external behavior is called refactoring. It is an important process when developing software that improves code readability and reduces complexity. As a result, code is much easier to maintain.

Do This:

• Create a function called doUpArrow.
• Move the code from the upArrow event handler to the function.
• Call doUpArrow from both your button and key event handlers. (The animation below shows the steps above.)
• Repeat the same process for the down arrow / button by creating a function called doDownArrow.
• Once you have removed these redundancies from your code test your app to make sure it still works!

Student Instructions

Adding Image URLs

We're ready to start improving the "My Favorite Things" app.

We'll do this in two steps: 1. We will change it from scrolling text to scrolling images. 2. We will add key events to scroll with the keyboard.

Step 1: The default values in your array should be image URLs. The large text area needs to be changed to an image. * Instead of setting the text, you'll now be using setImageURL to set the URL of the image.

Do This:

NOTE: We've re-loaded the code from the "My Favorite Things" App you wrote in the previous lesson. (If you want to refer to code you just wrote, you can go back to look at it.)

• Set the default values in your array to be image URLs. (You might need to take a minute to go collect a few if you didn't in preparation for this lesson.)
• In Design Mode delete the text area and replace it with an image. Make sure your image has a descriptive and meaningful ID.
• Inside your function that updates the display replace setText with setImageURL. Make sure you reference your new image element by its correct ID.
  
• Test your app to confirm that it's now showing the images in your array.

Student Instructions

Final Image Scroller

You're now ready to add key event functionality to your app! As you are doing so, keep an eye out for places where you need to refactor old code in order to prevent redundancy. Create functions that carry out repeated tasks and make other changes to keep your code readable and consistent.

If you want a reminder of how key events work, you can always go back to the example from earlier in this lesson. You will need to add if statements to check for which keys were pressed, just as before.

Do This:

• Add the ability to respond to key events to your app.

• Refactor your old code to remove redundant portions.

• Keeping adding to your program. What other features do you want to include?

Student Instructions

Free Response: Why Refactor?

Why is refactoring your code important?