Preparation

If, you are working thought these activities on your own then you can try each of them in turn and skip the ones you can't do by yourself.

If, you are going to do a workshop with other people then it's a good idea to first do the activities on your own to become familiar with them.

Some of these activites use the online Thimble tool from Mozilla webmaker. To get the most out of the workshop it is a good idea to get your students to head over to "https://webmaker.org and create a Webmaker account if they don't already have one. In this way they will be able to save work.

Introduction

A short introduction on the mechanics of the web.

Then review some online games including Cube Slam to have a bit of fun and see the potential for Javascript.

Javascript is one of the main sparks that make the web dance

Offline Activity - Game to help understand variables

In coding we use variables to store different kinds of data. In this game the boxes represent variables.

In this game the boxes represent variables and the sheets of paper with our names on are values. Variables are used all the time in coding to work with different kinds of data.

In the Magic Numbers session we found out about different Datatypes including numbers and Strings. This activity is like creating lots of different variables of with String values. The string value are our names.

Activity - Create an online, international T-Shirt Shop

Variables are a way of storing data in coding. This activity uses number variables to do the maths needed to create an international T-Shirt shop.

Everyone loves T-shirts and with international shipping you can get rare T-shirts from around the world. The problem is currency rates between different kinds of money are always going up and down.

This activity shows how we can use Javascript to do maths the maths we need to change a T-shirt price from one currency to another.

Activity - Get started with String Variables

Keywords - variable, value, assign, code, text coding

Learners should split into groups of 2 or 3. The challenge is to find out what is happening under the hood of the browser. We are entering a new world.

Follow these instructions ot get started:

 

Give the students the following info:

 

What we just did in the language of coding was to assign (give) a value of "Derek the Duck" to a new varible called my name. Next try this:

 

What did this teach us about Javascript and variables?

These lines of code create and then print out a variable. A variable is a way of storing a number, name or some other information. You can think of it as a space in the memory of computer or phone. When you save a number in your phone, it is being kept as a variable. Let's look at our lines of code.

 

This video sums it all up pretty well too!

Offline Activity - What's in a name

Generating ideas for fun names.

Choose 2 boxes. Let's say colour and food. Everyone go around and think of one each. Examples could be, Red Lion, Blue Cat, Green Cow etc. No-one can choose the same animals.

Try this again with 2 other boxes. Keep going and try to get crazier and stranger combinations.

Now everyone has to write on post it notes of bits of paper to put in at least one in each box. They should write their own choices.

Remixing a page: Custard Pies Tour

Katy Perry is going on tour again soon. But there is a problem! Katy has not chosen the name of the tour yet. She has many many of ideas and just can't decide yet. It is going to be either “Changeable Custard”, “Fickle Flans” or “Variable Vollyballs” .

Our team has written a web page using Javascript to make it easy to change the name of the tour. Our job is to update the page with the correct name.

 

Answer: The code used to write our variable to the page is

<script>
document.write(tourName)
</script>

Bonus Question: All javascript needs to go inside <script> tags in an HTML page. What happens if you remove the <script> tags

Taking it further

Here are some ideas for taking what you have learned further.