Lesson 14

Looping

Repeating the image change

Now we've got our images displaying we need to set them to change on a timer. To do this we will use a loop.

1. Create 'play' function

Create a new function called 'play'. Watch where this code is added. It needs to wrap around the code you've already written which changes the image randomly.

Also, now we're happy our random number generator is working properly we can comment out the console.log tests.

Inside our 'play' function should be the variables for num1 & 2, img1 & 2, url1 & 2 and our jQuery functions to change the canvas background-image.

Let's also add a comment (// play function ends here) to the final closing { bracket. It's easy to forget which function these closing backets connect to, so it is a good habit to comment closing brackets.

Remind me what a 'function' is...

A function is an action in code.

2. Loop play function on timer

To get the play function to loop we can add a 'setTimeout' function. This is another native function in JavaScript.

In the brackets that follow the function we need to add two arguments. The defines which function to run, and the second defines how long to wait. In this case we are running the 'play' function, and setting the 'delay' argument to 2000 milliseconds. See *Arguments for more information about how this works.

Add this on the line just before your 'play' function closes.

What is attribute?

Each element of an HTML page can have a number of “attributes.” A paragraph, for example, might have a style attribute, or a link might have a source attribute. These are additional pieces of information added by the developer about a specific element on the page.

3. Use h1 to play

Now the image loop is within a function it won't play automatically. We need a button to trigger play, and we can use the h1 to start the game.

We can add a bunch of jQuery functions to begin play and hide and show the h1 and paragraph elements. Watch where this code is added. It goes above where the 'play' function begins.

How can I find out what functions are available in jQuery?

The jQuery library is really well documented, and there are loads of resources online (including jquery.com) which can help.

Congraulations!

When you press your h1 in the 'View Your App' preview, the images should randomly cycle!

*Arguments

Arguments are bits of information that you give a function that modify the behaviour of the function.

If we were to think of function as verbs, we could consider arguments as adverbs. Imagine we had a robot that understood the function "walk()". We could pass an argument to the function to tell the function to walk quickly like this:

walk("quickly");

A more realistic JavaScript function would be the native function alert(). The alert() function displays a popup in your browser with a message. We pass the function the message to display like this:

alert("Hello, world!");

In this example, "Hello, world!" would be the argument.

Go to the next lesson

index.html

script-1.js

the web page

New Window
Next Lesson