Preparation

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

Then do a follow up bit of research on Javascript to help if students run in to trouble. Specifically good is this page on Chris Mills' course .

Introduction

Give a short presentation about maths and Javascript.

Javascript uses variables to rememeber and work with data. In the last session we were using variables to store the names of things. In this game Javascript variables are used to keep track of how many cookies we have created.

 

Each time we click the cookie the number value of the variable goes up by one, simples!

Activity One - Use the console to play with number variables

Split learners into groups of 2 or individuals if there enough computers explain that we will use the console to find out more about how numbers and maths are done in Javascript.

Ask individuals / groups to follow these instructions:

 

The simple way to do adding, subtracting, multipliction and division is to user the following Javascript maths Operators?

• + Add Operator
• - Subtract Operator
• * Multiply Operator
• / Divide Operator

Discussion: Why does 2 + 3 give a different result to "2" + "3"

Wait what is happening? What are the answers to 6 and 8 different from what we got for 1?

The answers to 1,6,8 are different because we are adding different types of data.

• 2 is a datatype of number: Numbers are used for maths and calculations
• “2” is a datatype of String: Strings are used for text based data, names and addresses are common examples.

The easy way to tell the difference between a value of type number and String is by noticing if the quotation marks ("") are used.

Using the + operator has a different effect with strings and number variables. It adds together numbers with addition but strings get put next to each other like being stuck together end to end with glue. In coding this is called "concatenation".

Be careful!: If we use + with a string and a number, then both the string and number are treated as strings so the the result is a string.

Activity - Hacking Cookie Clicker

In your browser go to cookie clicker game website Press F12 - go to the console and Enter

• Game.cookies = 23570

 

What happens? The equal sign assigns the number value on the right to the variable on the left (Game.cookies). Because this variable is what is used by the cookie clicker game to keep a track of your score, the number used on the game goes up on your page. Amazeballs! You've hacked it!

Smooth Operators

There are other operators we can use too. What about if we wanted to add on 10 cookies to our total?

How about we want to take 100 cookies off of our total? Find out how to do this by entering the following instructions in the console window when you are playing cookie clicker.

We can see that if we put a plus sign infront of our equals sign that it add on the number on the right to the current value of the variable on the left. We call this an addition assignment operator. The same idea works for subtracting, mulitplying etc.

 

 

To test out that you understand these new operators, use the console and try some examples like the one below.

Wow Factor Activity 4 - Javascript Takeover Demo

INSTALL "HEY FRENCH TOAST" EXAMPLE BOOKMARKLET

Before hacking the javascript, follow the instructions on the Thimble Page to install the “Hey French Toast” bookmarklet on your browser. You’ll just drag the “hey french toast” button image from the “Preview” pane on the right into your browser’s bookmarks bar (usually underneath the address bar).

Try it out on any website. Just browse to a site with lots of images, like a news-site homepage, or a Google image search results page, then click the “Hey French Toast” link that you just added to your bookmarks. If everything is working right, all or most of the images on the side should now be pictures of french toast!

What have we learned?

There was a lot of things to learn in this session. A lot if it is quite quick to pick up but a discussion at the end to recap what we have learned is a great idea to check we are all on the path.

• We've learned about the different Data Types of Number, String and Boolean in Javascript and what we use them for.
• We've learned about how use Arithmetic Operators and Assignment Operators
• We've done an experiment to let Javascript take over our browser and pepper it with French Toast!
• And hopefully we've learned how to make a pointless game like Cookie Clicker even more pointless by cheating!