Preparation

First do the activities on your own to become familiar with it.

Find out more about loops in Javascript to help if students run in to trouble. This page from Chris Mills has a great example of a code loop an puts it into good context Chris Mills' course. .

Introduction

It's time to meet another Data Type which will help us to make web pages.

This Data Type is called an Array and is very good at keeping lists of things.

 

Lets imagine we want to create a list of opening times for a swimming pool.

There is a lot of repetion there. Computer coders are paid to be lazy and they have to ask. Is there a way of writing some code to do this easier and quicker.

What if we put the Days and times in an array?

Activity One - Using simple Arrays

Let's look at an example of an Array in a Thimble page which shows two ways of listing the opening times of a swimming pool.

 

Complete the activity by doing the following:

Activity Two - Creating a list from an Array and a For Loop

In the previous Thimble example we saw an Arrays in use but what we really needed was a way of looping through all the values of the array to save us the work of repeating the HTML code. What we need is called the For Loop.

Meet the For Loop

Have a look at this video to see how the For Loop can help us.

 

Now have a look at this example of a code loop from Chris Mills' course.

for(i = 0; i < 10 ; i++) {
 // code in here gets repeated
}

Loops nearly always involve a single variable being iterated a certain number of times during the course of the loop. This can be called anything you like, but standard convention dictates that it be called i , mainly due to laziness!

Inside the for() brackets you have three values separated by semi-colons:

1. i = 0 — this is the starting value of the variable to be iterated.
2. i < 10 — this is the "exit condition" of the loop. This condition must be true each time the loop runs. If it is false the loop with stop. So in this case, the loop will keep running while i is less than 10. When the value of i hits 10 the loop ends, and the browser moves on to whatever comes next in the code. The loop needs an exit condition; if it didn't have one, the loop would never end, and the browser would just keep running the loop forever until it crashed. This is called an "infinite loop".
3. i++ — this is the "iterator". Each time the loop has finished running, the iterator modifies the value of i in some way and then the loop is run again (unless of course that iteration is the last one, and the loop doesn't run again). i++ means "add 1 to i each time", and is shorthand for i = i + 1 .

Using a For Loop

Now take a look at this Thimble activity which uses a For Loop to write our Swimming Pool times.

 

 

Recap: Understanding Iteration

If you are working as part of a group then have a discussion about the following ideas to check you understand. Use examples if you can.

• Iteration in coding is a way of repeating things easily.
• We can use the Data Type of Array, and For Loops to make it easy to repeat things like printing out things to a web page.
• The start of a For Loop has three parts, a loop variable, an exit condition to say when to stop looping, an iterator (a way of changing the loop variable).
• We can find out the length of an array

Activity Three: Create your own web page

You have learned a lot in this course. You know about variables which can hold different Data Types, we know about maths and different operators, we can make decisions and now use loops to save us work.

If we put all this knowledge together we can create an amazing web page. We can use our creativity AND check we can use all the great things we have learned in these sessions.

In small groups, have a discussion to work out some ideas of what you can create. You can choose any subject. Ask your self some of the following questions.

• What images can I use to make the page colourful and exciting?
• What text will I write or reuse to explain my subject to readers?
• Can I think of a question to ask readers that will change what is on the page? (a good way to use an if statement)
• What list of things will I want on my page? (a good way to use Loops)

If you want more help about writing for the web there are other activities as part of the Webmaker resource available.

 

Go for it click on this link to start your new page from scratch. Remember to keep sharing ideas with others doing the activity.

Sharing what we have learned

Let's share what we have created and use it to find example of the things we have learned.

Because we have created our work in Thimble we can share the links to our work, look at the pages of others and then

Can you find: