GET

CODING!
GC0_p1-15_9781406366846_PI_UK.indd 1 15/02/2016 15:47
 CONTENTS

ABOUT THIS BOOK ..........................................4–5

INTRODUCTION .............................................6–11

HOW TO USE THIS BOOK .................................... 12

KEY CODE SKILLS ........................................ 13–15

MISSION 1: Build a web page ..................... 16–57

MISSION 2: Create a password ................. 58–93

GC0_p1-15_9781406366846_PI_UK.indd 2 15/02/2016 15:47

 <!DO
<ht CTYPE
m htm
<he l> l>
a
<tit d>
Diam le>The
</h ond</ Monk
<bo ead> title
>
dy>
As
t
has olen d
<sc been iamon
rip fou d
var t> nd!
a dia
mon
</ lert( d
</b scrip diamo = 300
o t> nd) ;
</h dy> ;
tml>

MISSION 3: Build an app .......................... 94–133

MISSION 4: Plan a route ........................ 134–151

MISSION 5: Make a game ........................152–187

MISSION 6: Your finished website ........ 188–203

WHAT NEXT? ........................................ 204–205

INDEX ...................................................206–207

GC0_p1-15_9781406366846_PI_UK.indd 3 15/02/2016 15:47

 ABOUT THIS BOOK
Hello! We’re Young Rewired State, a worldwide community of digital-
makers aged eighteen and under. We’ve made this book because we want
you to become a technology star of the future. We hope that Get Coding!
will not only teach you how to code, but also show you how fun and
exciting it can be. Coding is one of the most important skills young people
can learn and there’s never been a better time to master it.

What does this book teach you?

This book teaches you how to code using HTML, CSS and JavaScript are three of the
three essential programming languages: most important programming languages in the
HTML, CSS and JavaScript. A computer world. They are used by web developers to
can be made to do almost anything, but first build the websites and web-based apps and
someone has to write a program for it to follow. games you use every day. This book will teach
Programs have to be written in languages you how to write code and build programs
a computer can understand. Coding is all using these programming languages. In this
about learning to write programs in these book you will learn real-life coding skills you
different languages. can use to do all kinds of programming.

Find out more about Young Rewired State:

www.yrs.io www.getcodingkids.com

GC0_p1-15_9781406366846_PI_UK.indd 4 25/02/2016 16:12

 Go to
www.getcodingkids.com
for help and support

How does this book work?

There are six chapters in this book. Each
irsto Day
chapter contains a mission that will teach Ba r Hello!

ne

D
.
you new HTML, CSS and JavaScript
Prof
Great to
coding skills. Your job is to work through meet you!
the chapters and use your skills to
complete the missions. You will be joining
Professor Bairstone, Dr Day and Ernest,
who need your help to keep a valuable
diamond safe.
est
Ern

What do you need?

All you need is a computer (PC or Mac)
that is connected to the Internet.

We hope you enjoy this book and it inspires you to get coding!

Tweet us: @youngrewired #GetCoding

Also find us on YouTube, Facebook and Instagram

GC0_p1-15_9781406366846_PI_UK.indd 5 15/02/2016 15:48

 INTRODUCTION:
COMPUTER CODING
Computers are an important part of our lives today.
We use them all the time to do many different things.
You’ve probably used a laptop, desktop computer
or tablet before. But did you know
that a smartphone is also a computer?
And that there are computers inside cash machines, washing
machines, games consoles and cars? All these computers
look different and work slightly differently, but all have
one thing in common: they have to follow sets of
instructions, called programs, to complete tasks.

Perfect programming
Computers are electronic devices that can process
information. They can be the size of a room or fit
inside tiny gadgets, and do all kinds of complex tasks.
Computers are made up of hardware (the physical Facebook
parts of a computer you can touch) and software Google
(the parts you can’t touch). Computers need software
because they can’t think or act by themselves. They iTunes
have to follow a detailed series of commands in a Microsoft Word
piece of software known as a program. Programs are
written in programming languages that computers can Minecraft
understand. Writing programs is therefore known as
YouTube
coding or programming. You can write programs
to do all sorts of things. You might have used some
of these:

GC0_p1-15_9781406366846_PI_UK.indd 6 15/02/2016 15:48

 You use programs every day. When you check You may have already done some coding at
your friend’s profile on Facebook, send a text, use school, using programming languages such as
a microwave or play a DVD, you’re using computer Scratch or Python. Scratch is made up of coloured
programs. In fact, you can write a program to make blocks of code that you drag and drop together to
a computer do almost anything. The people who create programs. It’s great for making small games
write programs are called programmers or software and animations. Python is a text-based programming
developers. Programmers write code in different language, which means you create programs by
programming languages depending on the type of typing out each instruction for your computer as a
program they want to build. piece of code. Programs like Instagram are written
in Python.
In this book you are going to learn how to write
Programming languages code using three programming languages: HTML,
CSS and JavaScript. Using these programming
There are many different programming languages languages, you are going to create programs
you can code in. Computers can understand more that run on the Internet. You are going to create a
than one programming language at a time, so website, app, game and many other programs that
programs are often written using several different will run in your web browser.
programming languages. A programmer’s job is to
pick the best languages for the program they are
building, because different programming languages WORD An APP (APPLICATION) is a type
CODE

of computer program. Apps

work better for different things. Every programming S
language has things it’s good and bad at. Some are usually programs that a user
commonly used programming languages are needs to perform specific tasks,
listed below. like word processing or emailing.

C and C++ are used to build operating systems

for your computer.
C#, Java, PHP and Ruby are used to build
websites.
C#, Java and Objective-C are used to write
apps for computers and smartphones.
SQL is used to extract information from
databases. Look at all the
different programming
languages you
can code in!

GC0_p1-15_9781406366846_PI_UK.indd 7 15/02/2016 15:48

 CODING AND THE WEB
A giant network connects lots of computers all over the world. This network
is called the Internet and it allows us to access and share information with
people around the world in seconds. You’ve probably used the Internet to visit
websites, watch videos, send emails, listen to music or play games. But did you
know that when you connect to the Internet and view a website you are using a
chain of different computer programs? Programs on our computers called web
browsers connect via Internet networks to programs running on web servers,
letting us share information quickly and easily.

World Wide Web Web browsers

The Internet is made up of lots of smaller networks. Web browsers are computer programs that allow us
The World Wide Web (or “the web”) is a network to view web pages. You have probably come across
connecting many of our computers, used daily by web browsers such as Google Chrome, Microsoft
millions of people. The web is made up of lots of Internet Explorer, Safari and Mozilla Firefox, and
individual web pages. used them to access all sorts of different websites.
A web page is a file written in computer code by Your web browser uses a web address to find the
a programmer. Web pages are nearly all written in web page you want on the web. It then accesses
the same programming language, which is called the information for the web page using another
HTML. HTML contains the information your computer program, called a web server.
needs to display a web page on-screen. When a
group of web pages is linked together, the group of
pages is called a website. You access web pages
Professor
using a program called a web browser. Bairstone is
always online,
sending emails!

GC0_p1-15_9781406366846_PI_UK.indd 8 15/02/2016 15:48

 Web servers Web pages
Servers are computers that provide other computers When the web server sends your web browser
with information. A web server can either be a web page, it sends the information in a HTML
hardware (a computer) or software (a program) document. HTML documents are made up of HTML
that helps to deliver a web page to your browser. elements, such as text and images, as well as exact
To access a web page, your web browser has to instructions for the browser about how to display
connect to that page’s web server. The program and position the elements on-screen.
running on the web server then finds the web page When a web browser reads the instructions in the
your browser has requested. It then sends the web HTML code, we say the browser “parses“ the HTML
page to your computer as HTML code. document. As it parses and decodes the instructions,
the browser draws each element of the document
Web server on-screen. A HTML document could contain just a
few words of text. The simplest HTML document is
Web browser asks for Web server sends
only a few lines of code long and looks like this:
the web page the web page
<!DOCTYPE html>
<html> HTML element
Web browser <head>
<title>Get Coding!</title>
</head>
Web addresses <body>
Are you ready to get coding?
Web addresses, or URLs as they are more commonly </body>
known, are a handy way for a web browser to find </html>
the web server and HTML file it needs on the web.
There are millions of websites on the Internet, and if Or the document might be more complicated,
each web page didn’t have an individual URL your containing other programming languages as well,
web browser wouldn’t know where to look for it. such as CSS and JavaScript.
URLs are split into different parts, each telling your
web browser a different piece of information: Turn over to
This tells the server to find out more
This tells the web browser about HTML
send your web browser a
to connect to a web server
HTML file and the other
http://www.getcodingkids.com/hello.html
programming
languages used
to code web
This tells the web browser which pages!
server to connect to

GC0_p1-15_9781406366846_PI_UK.indd 9 15/02/2016 15:48

 CODING WEB PAGES
The three most common programming languages in the world are HTML,
CSS and JavaScript. These languages are used to build web pages and
web-based apps. Using them together allows you to build web pages that
not only look great, but are interactive too. In this book you are going to
learn how to code in these languages.

TML css
H

Today, nearly all web CSS (Cascading Style Sheets) is a programming

pages are written using HTML language that works with HTML to make your web page
(HyperText Markup Language) look good. HTML looks very boring on its own, so you use
code. HTML was developed by CSS to change the colour, font and position of text and
Tim Berners-Lee in the early 1990s. images. CSS will let you make a piece of text bigger or
HTML is a great way of creating smaller, change your background colour or position an
the basic structure of your web image in the centre of a page.
page. HTML documents are made
up of individual HTML elements.
Elements are created using
avaScript
opening and closing tags. Each
tag is the name of the element
J
enclosed in angle brackets (< >). JavaScript is a very important programming
The content goes between the tags. language because it brings web pages to life by
Each HTML tag is an instruction to making them interactive. An interactive web page
your web browser, telling it how to changes when the user does something. So if you want
show the content on your screen. your user to be able to click a button, or an alert to
Tags allow you to add text, images pop up, you need to use JavaScript. If you use HTML
and videos to your web page and and CSS without JavaScript, you will have a web page
divide information into sections, that looks great but doesn’t respond to the user.
such as lines or paragraphs.

10

GC0_p1-15_9781406366846_PI_UK.indd 10 15/02/2016 15:48

 SOME CLEVER CODERS
Grace Hopper (1906–92)
Ada Lovelace (1815–52) created the world’s first computer
wrote the world’s first computer compiler, a program that turns
program in 1843. human-readable code into
computer code.

Tim Berners-Lee (1955–)

is a computer scientist who invented Alan Turing (1912–54)
the World Wide Web and the HTML was a mathematician who
programming language. established the foundations
of modern computer science.

Paul Allen (1953–)

and Bill Gates (1955–) Brendan Eich (1961–)
founded the Microsoft technology created the JavaScript
company and created the Microsoft programming language.
Windows operating system.

Sergey Brin (1973–)

Markus Persson (1979–) and Larry Page (1973–)
is a computer game programmer are computer scientists and Internet
who created Minecraft. entrepreneurs who co-founded the
Google search engine.

Mark Zuckerberg (1984–)

is a computer programmer and
Internet entrepreneur, who
co-founded Facebook.
These are very
brainy people!

11

GC0_p1-15_9781406366846_PI_UK.indd 11 15/02/2016 15:49

 HOW TO USE THIS BOOK
There are six exciting missions in Get Coding! Your job is to work through
each mission and learn how to code in HTML, CSS and JavaScript. You
can then use your new coding skills to help the intrepid explorer Professor
Bairstone and top scientist Dr Day, who are in urgent need of your assistance.
They have found the valuable Monk Diamond on an expedition and need
your help to keep it safe.
<!DO
<htmCTYPE
<hea l> htm
l>
<tit d>
Diam le>The
</he ond</ Monk
<bo ad> titl

Mission Briefs
dy> e>
A st
has olen di
<scr been amond
ip foun
var t> d!
a di am
</ lert(d ond
</bo script iamo = 300
</ht dy> > nd); ;
ml>

At the start of each mission you will receive a Code Skills

Mission Brief from Professor Bairstone or Dr Day.
The brief will ask you to use your coding knowledge The best way to learn how to code is through
to help with a Do It Yourself Task. The tasks include practice! At first coding can seem daunting as
building a web page, creating a password, coding you have to use special words and symbols.
an app, planning a route, making a game and But you will soon become familiar with the ways
building a finished website. the different programming languages have to be
written. To help you see how each new piece of
code works you will find Code Skills exercises
The Explorer’s Encyclopedia dotted throughout each mission. Follow the step-
by-step instructions in each exercise and master
You will find out more about Professor Bairstone, a new Code Skill every time.
Dr Day and the Monk Diamond in the entries from
the Explorer’s Encyclopedia after the briefs.
You can use this information to help you complete Do It Yourself Tasks
the tasks.
At the end of each mission is a Do It Yourself Task.
onk Use the code you have learnt in the Code Skills to
The M complete the tasks and accomplish the missions.
Diamond
The future of the Monk Diamond is in your hands!

12

GC0_p1-15_9781406366846_PI_UK.indd 12 15/02/2016 15:49

 KEY CODE SKILLS
Before you receive the brief for Mission 1, there are some basic Code Skills
you need to learn. You will use these skills throughout the entire book, so it’s
important to get to grips with them now. You can code using a PC or a Mac,
but you have to create and save your HTML file in a different way depending
on which system you are using.

KEY CODE SKILL 1 CREATING A FOLDER

You need to have a place in your computer where you can save all your HTML files. Make a folder on
your desktop called Coding. It’s really important that you save all your HTML files in the same place,
so make sure you keep using this folder as you work through the missions.

On a PC, right-click on your desktop

PC and click New and then Folder.
Call your new folder Coding.

On a Mac, hold down the Control key and

Mac click on your desktop. Then select New Folder.
Call your new folder Coding.

Master these essential

Code Skills and you'll
be ready for the
first mission!

13

GC0_p1-15_9781406366846_PI_UK.indd 13 25/02/2016 16:12

 KEY CODE SKILL 2 CREATING A HTML FILE
You need to know how to create a HTML file so you can write code. Programmers normally use specialist
software to write code, but all computers come with text-editing programs that let you write HTML files.
If you have a PC, you can use Notepad. If you have a Mac, you can use TextEdit.

PC On a PC, you’ll find Notepad by going into the Start menu and typing it in the search bar.

On a Mac, you’ll find TextEdit by typing it in the Spotlight search magnifying glass in
Mac the top-right of your screen. When you open TextEdit, you need to do the following things:
• Set up your file as a plain text (rather than rich text) file. To do this go to Format
in the menu bar and select Make Plain Text.
• Also go to TextEdit in the menu bar. Select Preferences. In the New Document tab in
the Format section, make sure Plain text is checked. In the Options section, make sure
Smart quotes is unchecked.
• In the Open and Save tab in Preferences, make sure Display HTML files as HTML code
instead of formatted text is unchecked.

KEY CODE SKILL 3 SAVING YOUR HTML FILE

When you save your HTML file for the first time, you need to make sure you save it using the file extension
.html at the end of your file name. Your computer uses file extensions to work out how to open files. By
giving your file the extension .html you’re telling your computer that it should open it in a web browser.

On a PC, you need to:

PC • Go to File and select Save As.
• Select the Coding folder as the destination to save the file to.
• Choose a name for your file, such as Mission1, and type it into the File name bar.
• After the name of the file, type .html so your file name reads Mission1.html. Click Save.

On a Mac, you need to:

Mac • Go to File and select Save.
• Select your Coding folder as the destination to save your file to.
• Choose a name for your file, such as Mission1, and type it into the Save As bar.
• After the name of the file, type .html so your file name reads Mission1.html.
• Make sure the check box If no extension is provided, use ".txt". is unchecked. Click Save.

14

GC0_p1-15_9781406366846_PI_UK.indd 14 15/02/2016 15:49

 KEY CODE SKILL 4 OPENING YOUR HTML FILE
To see your code displayed on-screen, you need to open your HTML file in a web browser. You then might
want to go back into your text-editing program to make some changes to your code.

On a PC, you need to:

PC • Save your file, as described in Key Code Skill 3.
• Open your Coding folder on your desktop. Double-click on your HTML file.
It will open in your web browser.
• When you want to edit your code, right-click on the HTML file in your Coding folder.
Select Open with and choose Notepad.
Use a web browser
On a Mac, you need to: like Mozilla Firefox
Mac • Save your file, as described in Key Code Skill 3. or Google Chrome.
• Open your Coding folder on your desktop.
Double-click on your HTML file. It will open in your
web browser.
• When you want to edit your code, right-click on the HTML file
in your Coding folder. Select Open with and choose TextEdit.

KEY CODE SKILL 5 USING THE GET CODING! WEBSITE

Don’t forget that as you work through the book you can use the Get Coding! website to help you with
your missions. You’ll find entries from the Explorer’s Encyclopedia and images that you can use. If you get
stuck at any point when you’re writing code, go to the website and see what your code block should look
like. You can even copy and paste the code blocks from the website into your text-editing program.

The Get Coding! URL is www.getcodingkids.com

On the website you will find:

Some of these steps may
• Professor Bairstone’s entries on vary depending on the system you're
the Explorer’s Encyclopedia using. If you’re having trouble,
• Pictures of Professor Bairstone, Ernest, do an online search for how to
Dr Day and the Monk Diamond write HTML in the version of the
• Code blocks for each Code Skills exercise program you're using.
and Do It Yourself Task.

15

GC0_p1-15_9781406366846_PI_UK.indd 15 15/02/2016 15:49

 o
Mi ssi n
1 BUILD A
WEB PAGE
LEARN WHAT HTML IS AND HOW
IT WORKS
MAKE A SIMPLE WEB PAGE
USING HTML
ADD TEXT AND IMAGES TO YOUR
HTML WEB PAGE
LEARN HOW TO LAY OUT AND
DESIGN YOUR WEB PAGE USING CSS

GC1_p16-57_9781406366846_PI_UK.indd 16 15/02/2016 16:46

 1
M ission Brief

Dear Coder,

We haven’t met before, but I’m

sure you already know my name.
explorer, Professor Harry Bairston I’m the famous
e. I’m emailing you because I am
need of your help. in desperate

I am currently on an expedition
in the mountains of Siberia, with
Dr Ruby Day and my dog Ernest. the top scientist
The aim of our expedition was to
fossils. Instead we have made an find prehistoric
even more sensational discovery.
We were exploring a cave when
Ernest suddenly started barking
a large boulder. We looked closer and sniffing at
and saw that something had bee
crack in the rock-face. Dr Day pull n hidden in a
ed out the object. It was a small
oilcloth. When I opened the box box, wrapped in
, I couldn’t believe my eyes.
It was the legendary Monk Diam
ond! As I’m sure you know, the Mon
was stolen from Moscow three year k Diamond
s ago in a daring robb
obbery and its whereabouts
has been unknown until now. Our
discovery is of great internationa
l significance.
We can only access the Internet
briefly, using my emergengency booster pack.
Dr Day and I were hoping you cou
ld help us by using youourr Code Skills to build
a web page about our exciting disc
overy.
I’m attaching an entry from the Exp
lorer’s Encyclopedia,, which will tell
about the Monk Diamond’s rem you all
arkable history. You can use the
to build your web page. We will information
use the page to announncece our discovery to
the world the moment we arrive
in Moscow.
Thank you for helping us with this
exci ting mission. It’s goin
oingg to be great!
Warmest wishes from the chilly
mountains,
Professor Harry Bairstone

GC1_p16-57_9781406366846_PI_UK.indd 17 15/02/2016 16:46

 The Monk Diamond
From the Explorer’s Encyclopedia, the guide to every adventure

T HE E XPLORER ’ S This entry is about the Monk Diamond. For other jewels, see Diamonds.
ENCYCLOPEDIA
The Guide to Every Adventure
The Monk Diamond is one of the rarest and most precious diamonds in the world,
Home page famous for its distinctive green colour. It was discovered in 1880 and was bought by
Contents a Russian nobleman for his wife in 1889.
Featured discoveries
Famous explorers During the Russian Revolution, the Monk Diamond was stolen from the nobleman’s
Historical expeditions palace in St Petersburg. For the next 30 years, the Monk Diamond’s whereabouts

GC1_p16-57_9781406366846_PI_UK.indd 18 15/02/2016 16:46

 1
Professor Bairston
e's Fact File

The Monk
Diamond

Age: over 1 billion years

old
Colour: Green

Cut: Oval

Carats: 300

Clarity: Flawless
Value: Over £10 million

was unknown. In 1947 it was discovered during a police raid on a gang of petty criminals in Moscow. It was
returned to the nobleman’s family.
The nobleman’s son decided the Monk Diamond was unlucky and sold it to the House of Volkov, Moscow’s
oldest jewellery house. The House of Volkov paid an undisclosed sum for the jewel, but it was rumoured to be
the most expensive diamond sale ever.
The Monk Diamond was on display in the House of Volkov’s private collection until three years ago, when it was
stolen in an audacious raid. Despite a long investigation and the promise of a huge reward, the police were
unable to track down the culprits and the case remains unsolved.
The thieves are believed to be the Bond Brothers, the international gang of jewel thieves responsible for
numerous high profile thefts. A theory put forward by the explorer Professor Bairstone is that the Monk Diamond
was smuggled out of Moscow by the Bond Brothers and hidden somewhere in Russia. He thinks “the thieves are
biding their time until they can sell the diamond on the black market without attracting suspicion.”

GC1_p16-57_9781406366846_PI_UK.indd 19 15/02/2016 16:46

 CODING WITH HTML
Now you’ve read the Mission Brief, it’s time to A HTML web page is called a document. It’s
get coding. To build Professor Bairstone’s web made up of HTML elements. Elements are created
page, you’re first going to need to learn to write using small pieces of code called tags. Tags nearly
HTML (HyperText Markup Language). HTML is the always come in pairs and surround every piece of
programming language used by programmers to content (like a piece of text or an image) on the
build websites. It allows you to give your browser page. Each tag contains an instruction for your web
instructions. You use HTML to add text and images browser, telling it how to show the element
to a web page. You also use it to group together on-screen. This is why HTML is called a “markup
pieces of information into lines, paragraphs language”. You use tags to mark up each piece of
or sections. content with an instruction
ruction for your browser.

HTML tags It’s simple: <p> is codee

arn
for paragraph. You'll learn
Each tag is made up of a piece of code ter
more about this tag later
surrounded by two angle brackets (< >). in the mission.
The angle brackets are on the same keys as the
full stop and comma symbols on your keyboard.
Let’s look at an example of a tag:

<p>Professor Bairstone and Dr Day have discovered the Monk Diamond.</p>

Opening tag Closing tag

This is the paragraph <p> tag. When tags come in pairs, we call the first tag the opening tag and the
second tag the closing tag. You can spot a closing tag because it contains a forward slash (/). When
your browser reads this code it understands that you are telling it to group the text between the opening
and closing <p> tags into a paragraph.
To code a web page you have to create a HTML file in a text-editing program. Your browser expects
some tags to appear in a certain order. You need to code the tags that contain instructions about the
whole page first. Then you code the tags with instructions for specific pieces of content on your page.
Tags can be put inside other tags. You just have to remember to close each tag when you’ve finished with it.

20

GC1_p16-57_9781406366846_PI_UK.indd 20 15/02/2016 16:47

 1
Let’s have a look at the HTML tags you need to code a very simple web page. If you use these tags
you will create a web page that is made up of a title and some text. Each tag gives your browser a
different piece of information:

<!DOCTYPE html>
This is called the <!DOCTYPE> declaration and it is always <html>
the first line of a HTML file. It tells our browser what version of This is the <html> tag and it tells the
HTML our page has been coded in. It is not a HTML tag so it browser that we have used HTML to
is written with capital letters and it doesn’t need a closing tag. code our page.

<!DOCTYPE html>
<html> <title>
<head> The <title> tag
<head> <title> goes inside the
This is the <head> The Monk Diamond Discovery <head> tag. The
tag. Inside are </title> content between the
pieces of content </head> tags will not appear
that aren’t displayed <body> in the main body
in the main <body> <p>Professor Bairstone and Dr Day have of our page. It will
of your page, like discovered the Monk Diamond.</p> be the title of the
the title. You can </body> browser window
also put instructions </html> when you open
that you want your the page in your
browser to apply browser.
to your whole
page here. <body> <p>
All the content you want to see displayed This is the paragraph tag.
you web page goes inside the <body>
in your All the text between the
tag. So
S this text about the Monk Diamond opening and closing tags
will appear
ap on our page when we open will be grouped into a
the file in our web browser. paragraph.

Turn over to see what

this code will look like
on-screen in our web
browser!

21

GC1_p16-57_9781406366846_PI_UK.indd 21 15/02/2016 16:47

 When we save the code we wrote in our The Monk Diamond Di

text-editing program and then open it in

our web browser, our browser decodes
een a
our HTML file and draws on-screen
Professor Bairstone and Dr Day have discovered the Monk Diamond.
web page that looks like this:

See how the text Look at how all the text

between the opening and between the opening
closing <title> tags has and closing <p> tags has
become the title of the become the contents of
browser window? your web page!

Writing HTML
Now you know what HTML tags are and how they is as accurate as possible. Having a letter or a
work, it’s time for you to have a go at using them. symbol wrong or missing could stop your code
The best way to learn new pieces of code is to from working, as your browser won’t be able to
practise writing them. Throughout this book you will understand your instructions. If you are having
find Code Skills. Follow the step-by-step instructions problems making a program
in the exercises and learn new skills each time. work, it’s a good idea to
It’s really important to make sure your code check the following things:

That you’ve not missed out any tags or used them in the wrong order
That there are no typos or spelling errors in your code
That you’ve used correct capitalization throughout your code
These are some top
That you’ve included all the symbols you need, in the right order
tips for writing code!
That you’re using straight quotes (" ") and not curly quotes (“ ”)
That you’ve closed all your tags by including the forward slash (/)
That your text-editing program has saved your file as a HTML file (.html)

If you’re still stuck, go to the Get Coding! website (www.getcodingkids.com) where you will be able to
copy and paste the code block you need.

22

GC1_p16-57_9781406366846_PI_UK.indd 22 15/02/2016 16:47

 1
CODE SKILLS WRITING HTML

Let’s use HTML tags to code a very simple web page. Follow these steps to
learn how to structure a HTML web page that is made up of a title and a
piece of text.

1. Open up your text-editing program. Look back 4. Open your HTML file in your web browser.
at Key Code Skill 2 on page 14 if you need a See Key Code Skill 4 on page 15 if you need
reminder about how to do this. a reminder about how to do this. Your code
will be displayed on-screen as a web p
page,
2. Type this code into your text-editing program: like this:
The Monk
<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title> The Monk Diamond is a rare jewel.
</head>
<body>
<p>The Monk Diamond is a rare jewel.</p>
</body>
</html>

Make sure you copy the code carefully. Then open your file in your text-editing program
Your web browser won’t be able to read again. Change the text between the opening
your code if there are any mistakes in it. and closing <title> tags and <p> tags
The <!DOCTYPE> declaration has to have to text of your choice. Save your file.
capital letters and your last tag always has
to be </html>. Check you have closed each 5. Press the Refresh button in your browser. On a
tag by including the forward slash (/). PC, press F5. On a Mac, press Command+R.
Your changes to the text will appear on-screen.
3. Save your file in your Coding
folder as a HTML file (.html). Call it
webpagetemplate.html. Go back You just built your
to Key Code Skills 1 and 3 on pages 13 and first web page!
14 if you need a reminder about how to do this.

23

GC1_p16-57_9781406366846_PI_UK.indd 23 15/02/2016 16:47

 BUILDING A WEB PAGE WITH HTML TAGS
Now you can write HTML tags, let’s look at how we can use them to code a more complex web page.
As you’ve just seen in the Code Skill on the previous page, if you write text between the opening and
closing <p> tags it will appear on-screen. But just having one block of text on our web page won’t look
very exciting. If we want to make new lines or paragraphs we have to learn new tags.
We need to put these new tags between our opening and closing <body> tags. Putting tags inside
other tags is called nesting. Nesting tags allows us to create more exciting page layouts. Let’s look at
an example of nesting with the <body> tag and the paragraph <p> tag:

<body>
The <p> tag is nested
Indent <p>The Monk Diamond is worth over £10 million.</p> inside the <body> tag
</body>

White space around your HTML doesn’t matter. But

programmers like to indent their code every time they open
Did you
a new tag. It helps them keep track of when they’ve opened notice?
and closed a tag and makes the code block easier to read.
To indent, press Tab every time you open a new tag. All our tags are written using lower-
Let’s learn about the tags you need to make paragraphs case and there are no spaces
and line breaks. The code in the tags is very simple. It’s just between the tags and text.
a shorter way of saying “paragraph” and “break”.

The paragraph tag: <p> and </p>

The paragraph <p> tag lets you make new paragraphs. The opening tag is <p> and the closing tag is
</p>. Everything between the opening and closing <p> tags is grouped together. Use a new <p> tag
every time you want a new paragraph. Look at this example, where we’ve coded two paragraphs:

<body>
Opening
paragraph <p>Professor Bairstone and Dr Day have made a sensational discovery.</p>
tag <p>They have discovered the Monk Diamond in a remote cave in Siberia.</p>
</body>
Closing
paragraph tag

24

GC1_p16-57_9781406366846_PI_UK.indd 24 15/02/2016 16:47

 1
When we open this code
The Monk Di
in our web browser it
looks like this!

Professor Bairstone and Dr Day have made a sensational discovery.

They have discovered the Monk Diamond in a remote cave in Siberia.

The line break tag: <br/>

The line break <br/> tag lets you start your
text on a new line, but without starting a new
paragraph. The line break tag is a self-closing
HTML tag. Because there is no content to display
on-screen, the line break tag is a single tag. In
this example, we’ve used both the <p> tag and
<br/> tag to change the way our text displays:

<body>
<p>Professor Bairstone and Dr Day have made a sensational discovery.<br/>
Professor Bairstone is the world's leading explorer.<br/>
Line break tag
Dr Day is a scientist who studies fossils.</p>
<p>They have discovered the
e Monk Diamond in a remote cave in Siberia.</p>
</body>

The Monk Di

WORD A SELF-CLOSING HTML

tag is an opening and
CODE

Professor Bairstone and Dr Day have made a sensational discovery.

closing tag rolled into Professor Bairstone is the world's leading explorer.
one. Only some kinds of Dr Day is a scientist who studies fossils.

tag are used this way. ed the Monk Diamond in a remote cave in Siberia.
They have discovered
You can spot a self-closing tag
because the forward slash (/)
comes at the end of the tag, rather
than at the beginning as it does for Now it’s your turnn to
a regular closing tag. ing
have a go at using
these new tags!s!

25

GC1_p16-57_9781406366846_PI_UK.indd 25 15/02/2016 16:47

 CODE SKILLS CODING PARAGRAPHS AND
LINE BREAKS
Let’s try coding paragraphs and line breaks in a web page, using the <p> and
<br/> tags.
1. Open up your text-editing program. Create a 3. Type some more text in your first paragraph.
new HTML file called breaks.html. Check the Add the line break <br/> tag to the end of
Key Code Skills on pages 13–15 if you need a a line of text like this:
reminder about how to do this. Then copy and
paste your code from webpagetemplate.html <body>
into your new file. Modify the code so that it <p>The Monk Diamond has been
looks like this: discovered in Siberia.<br/>
Professor Bairstone
<!DOCTYPE html> and Dr Day were on a fossil-
<html> finding expedition.</p>
<head> <p>Ernest, Professor Bairstone's
<title>The Monk Diamond</title> dog, found the jewel.</p>
</head> </body>
<body>
</body> 4. Save your HTML file in your Coding
</html> folder. Then open your web page in
your browser. Your page will look
2. Use the paragraph <p> tag. Open the <p> tag, like this:
type some text, then use the closing </p> tag. The Monk Di

Repeat as many times as you want. Your code

will look like this:
The Monk Diamond has been discovered in Siberia.
eria.
<body> Professor Bairstone and Dr Day were on a fossil-finding exp
expedition.

<p>The Monk Diamond has been Ernest, Professor Bairstone's dog, found the jewel.
discovered in Siberia.</p>
<p>Ernest, Professor Bairstone's
dog, found the jewel.</p> I think it’s time
</body> t learn about
to
Great work! But what t image tag!
the
about some pictures of
the Monk Diamond?
26

GC1_p16-57_9781406366846_PI_UK.indd 26 15/02/2016 16:47

 1
The image tag: <img/>
Now you’ve mastered the paragraph and line break
tags, let’s learn how to add an image to our web
page. The image <img/> tag is another self-closing
tag. Inside the tag itself you have to include a piece
of information called the source (src) attribute.
WORD An ATTRIBUTE is a useful way
An image tag looks like this:

CODE

S
of giving your browser extra
<img src="image.jpg"/> information about a HTML element.
There are lots of different kinds of
attributes you can include in your tags.
The equals sign (=) and double quotes
(" ") set the value of the source attribute There are two parts to an attribute: the
attribute name and the value of the attribute.
You have to include the source attribute in the You use an equals sign (=) to set the value
<img/> tag so your browser knows where to find of the attribute and put the value in double
your image. Without it your browser won’t know quotes (" "). So an attribute will always look
what to display on-screen. The value of your source like this: name="value". Attributes are added
attribute can either be set to a file name of a saved to the opening tag, or to the only tag (in the
image or a URL (web address) of your image. case of a self-closing tag).

Using a saved image

The Monk Di

If you have an image saved as a JPEG file

Professor Bairstone has sent us this secret photo of the Monk Diamond:
(.jpg) in your Coding folder, it’s really easy to
add this image to your page. All you need to
do is set the value of the source attribute to the
name of your image file, using the equals sign
(=) and double quotes (" "). So if your file
is called diamond.jpg, your code will look
like this:

<body>
Image <p>Professor Bairstone has sent us this secret photo of the Monk Diamond:</p>
tag <img src="diamond.jpg"/>
</body>
Source File name
attribute

27

GC1_p16-57_9781406366846_PI_UK.indd 27 15/02/2016 16:47

 Using an image URL

If there’s an image on the Internet you want to use on your web page, you have to set the value of the
source attribute in your <img/> tag to the URL of the image. You find the URL of a picture by right-clicking on
it and selecting Copy image URL on a PC or Copy image address on a Mac. You then paste the URL inside
your <img/> tag as the value of the source attribute. Don’t forget to put it in double quotes (" "), like this:

<body>
<p>This is Professor Bairstone and Dr Day's first expedition together.</p>
<p>Here is a photo of the team:</p>
<img src="https://getcodingkids.com/team_photo.jpg"/>
c
</body> The Monk D

A URL will always start with

http:// or https://
T is Professor Bairstone and Dr Day's first expedition together.
This
H
Here is a photo of the team:

Naming an image

If you include an image on your page, you should

always give it a name. It helps search engines like
Google find your page. A name is also handy for
users who may not be able to download images.
To name your image, you need to add the
alternative (alt) attribute after your <img src="diamond.jpg" alt="Diamond"/>
source attribute, like this:
The complete code block for our web page with text and images now looks like this: Alternative attribute

<body>
<p>This is Professor Bairstone and Dr Day's first expedition together.</p>
<p>Here is a photo of the team:</p>
<img src="https://getcodingkids.com/team_photo.jpg" alt="The Team"/>
</body>

In some web browsers, if you

hover your mouse over the
Did you image in your browser and
notice? leave it still, a little pop-up will
be displayed containing the
The quotes in our code are always straight (" ") rather than curly (“ ”). text in your alt attribute
Your browser won’t understand instructions if they are in curly quotes.

28

GC1_p16-57_9781406366846_PI_UK.indd 28 15/02/2016 16:47

 1
CODE SKILLS ADDING IMAGES

Let’s have a go at adding some images of the Monk Diamond, Professor

Bairstone, Dr Day and Ernest to our web page to make it look more exciting.
1. Go to the images section of the Get Coding! 4. Then add a value to the source attribute. Add
website. Find the image of the Monk Diamond. the name of the image file you saved in your
Right-click on the image and select Save Image Coding folder, like this:
As. Save the image as a JPEG file (.jpg) in your
Coding folder. Call it diamond.jpg. <p>The Monk Diamond is a rare green
colour.</p>
2. Open up your text-editing program and <img src="diamond.jpg"/>
create a new HTML file called images.html.
Then copy and paste your code from Save your HTML file and open it in your
webpagetemplate.html into your new file. browser. Your image will be displayed
Modify the code so that it looks like this: on-screen.

<!DOCTYPE html> 5. Now add an image of Professor Bairstone,

<html> Dr Day and Ernest to your page using a URL.
<head> Add another paragraph and an <img/> tag
<title>The Monk Diamond</title> with an empty source attribute, like this:
</head>
<body> <p>The Monk Diamond is a rare green
<p>The Monk Diamond is a rare colour.</p>
green colour.</p> <img src="diamond.jpg"/>
</body> <p>The team was delighted with their
</html> discovery.</p>
<img src=" "/>
3. Now add an image of the Monk Diamond to your
page. Add an <img/> tag with an empty source
attribute after your closing </p> tag, like this: Don’t forget that
attributes always
<p>The Monk Diamond is a rare green have to be in
colour.</p>
<img src=" "/>
double quotes.

PTO
29

GC1_p16-57_9781406366846_PI_UK.indd 29 15/02/2016 16:47

 CODE SKILLS CONTINUED

6. Go to the images section of the Get Coding! website. Find the photo of the team. Right-click and select
Copy image URL or Copy image address depending on your system. Paste the URL into your source
attribute, like this:

<p>The team was delighted with their discovery.</p>

<img src="https://getcodingkids.com/team_photo.jpg"/>

Save your file and refresh the page The Monk Di

in your browser. You will see your

second image displayed on-screen.
The Monk Diamond is a rare green colour.

7. Finally, you need to add two alt

attributes to your <img/> tags.
The team was delighted with their discovery.
Choose a name for each of your
images. Your code will look like this:

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
</head>
<body>
<p>The Monk Diamond is a rare green colour.</p>
<img src="diamond.jpg" alt="The Monk Diamond"/>
<p>The team was delighted with their discovery.</p>
<img src="https://getcodingkids.com/team_photo.jpg" alt="The Team"/>
</body>
</html>

Save your file and refresh your page. Doesn't Ernest look
Depending on your browser, you may see proud of himself?
the text in the alt attributes if you hover your
mouse over the images.
30

GC1_p16-57_9781406366846_PI_UK.indd 30 15/02/2016 16:47

 1
Code Skills che
cklist
Here are some
handy things to
CODING WITH HTML remember when
using HTML tags!
The basic structure of a HTML document always
looks the same: <!DOCTYPE html>
<html>
HTML documents are made up of HTML <head>
elements. Elements are pieces of content </head>
surrounded by HTML tags. Each tag is an <body>
instruction to your browser, telling it how to </body>
display the content between the opening and </html>
closing tags on-screen.
HTML tags are written inside angle brackets (< >). You have an opening and closing
tag, so your browser knows when the instruction starts and stops. You can always spot a
closing tag because it contains a forward slash (/). If there is no content to put between
two tags, you use a self-closing tag, which is an opening and closing tag rolled into one.
Tags are always written in lower-case.
You can nest HTML tags inside each other. Just don’t forget to close your tags.
When you open a new tag you should always indent your code by pressing Tab.
This makes it easier to read your code.
If you want to give your browser extra
instructions or information about a
Web pages normallyally have
HTML element, you can use various
ords and
more than just words
HTML attributes. Attributes go inside
m. Turn
pictures on them.
the opening tag. They always
over to find out how to
have a name and a value, which you
change the layoutut and
set using the equals sign (=) and
design of your page.
double quotes (" ").

31

GC1_p16-57_9781406366846_PI_UK.indd 31 15/02/2016 16:47

 THE LAYOUT AND DESIGN OF YOUR WEB PAGE
Now you know what HTML tags are and how they on our page. If we want to position our text and
work, it’s time to start thinking about the layout images in different places or change the design of
and design of your web page. So far our HTML our web page, we need to learn some new HTML
elements have been positioned in the same place tags and attributes.

The division tag: <div> and </div>

The division <div> tag helps us change the layout of a web page by splitting it into sections. The opening
tag is <div> and the closing tag is </div>. The tag is a useful and time-saving way of grouping HTML
elements together. It works like an invisible container.
When you group together HTML elements between an opening and closing <div> tag you can ask
your browser to make the same changes to all the elements inside the <div>. The elements outside the
<div> will be unchanged. Let’s take a look at how the <div> tag works:

<body> Style attribute

Opening <div>
<div style="color: green;">
<p>The Monk Diamond is over a billion years old.</p>
<p>It is a rare green diamond.</p>
</div>
Closing <div> <p>It is 300 carats and worth over £10 million.</p>
</body>
The Monk Di

Here we have put two paragraphs of text inside

a <div>. The text inside the <div> has been
changed to green, using a new HTML attribute The Monk Diamond is over a billion years old.
called the style attribute. The paragraph of text
not in the <div> has remained unchanged. It is a rare green diamond.
Our <div> has grouped together HTML It is 300 carats and worth over £10 million.
elements and allowed us to easily
change them.

You’ll learn all about

the style attribute
after this Code Skill!
32

GC1_p16-57_9781406366846_PI_UK.indd 32 15/02/2016 16:47

 1
CODE SKILLS CREATING SECTIONS

Now it’s your turn to have a go at using the <div> tag. Master this skill and
you’ll then be able to make a web page with an interesting layout.

1. Open up your text-editing program. Create a new HTML file called divs.html. Then copy and paste
your code from webpagetemplate.html into your new file. Modify the code so that it looks like this:

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
</head>
<body>
<p>Professor Bairstone is a famous explorer.</p>
<p>Dr Day is a top scientist. She loves dinosaur fossils.</p>
</body>
</html>

2. Now add two <div> tags between the opening and closing 3. Save your HTML file and open
<body> tags. Put each paragraph inside a <div>, like this: it in your browser. Your <div>
tags won’t have changed
<body> anything on-screen, but your elements
<div> will be grouped together, ready for
<p>Professor Bairstone is a famous you to design and position.
explorer.</p>
The Monk D
</div>
<div>
<p>Dr Day is a top scientist. She loves Professor Bairstone is a famous explorer.
dinosaur fossils.</p>
Dr Day is a top scientist. She loves dinosaur fossils.
</div>
</body>

33

GC1_p16-57_9781406366846_PI_UK.indd 33 15/02/2016 16:47

 CODING WITH CSS
So far in this mission you’ve been coding using in your browser. CSS is short for Cascading Style
HTML. As you’ve just seen, <div> tags are used to Sheets and is sometimes called “style sheets” or
group together HTML elements so you can easily “styles”. You can use CSS to change the design of
change them. To change the look and position of your page by adding colours or changing the size
your HTML elements, you have to use CSS. and shape of HTML elements. You can also use
CSS is a programming language often used with CSS to change where things are positioned. In fact,
HTML. It is used by programmers to change the there are many different things you can do with
way HTML elements look when they’re displayed CSS to change the look and feel of your page.

The style attribute

To use CSS to change a HTML element you can add a style attribute to your opening HTML tag. You can
use the style attribute with any HTML tag. The style attribute works in exactly the same way as the source
and alt attributes we used earlier in the mission. Let’s have a look at how we add a style attribute:

<p style="CSS-property: value;">The Monk Diamond had been hidden in a cave.</p>

Style attribute CSS

Just like we saw earlier, the value of our style attribute is set using the equals sign (=) and enclosed in
double quotes (" "). We apply CSS to our HTML tag by setting the value of the style attribute to CSS. CSS
is a very simple programming language to write. It’s always split into two parts: a property and a value.

CSS properties and values

When you write CSS you always
CSS What does it mean? Example values
have to use both a property and
a value. The property tells your
browser what part of the HTML
The thing you want to background-color;
property
element you want to change. change height;
The value tells your browser What you want to
exactly what to change it to. value red; 200px;
change it to
So it works like this:
34

GC1_p16-57_9781406366846_PI_UK.indd 34 15/02/2016 16:47

 1
When you use CSS you divide the property from the value by inserting a colon (:). At the end of the
value, you use a semi-colon (;). If the CSS is more than one word, you join the two words using a hyphen
(-). If you don’t use the right syntax, your browser won’t be able to decode your instructions.
Your style attribute should always be written like this:

style="CSS-property: value;"
WORD SYNTAX is the
Hyphen Colon

CODE
Semi-colon

S
set of rules which
decide the way a programming
Your browser has hundreds of different built-in language is structured and written.
CSS properties and values that you can use in
your HTML tags to change your page.
Let’s take a closer look at how we can use Look at how we can use
CSS with <div> tags. If we want to change the HTML and CSS together
background colour of a section of our page, to change our page!
we can use CSS and HTML like this:

Style CSS
attribute property CSS value
<body>
<div style="background-color: green;">
<p>The Monk Diamond had been hidden in a cave.</p>
<p>It was inside a crack in the rock.</p>
</div>
</body>

Did you
notice?
The Monk Di

All words in CSS are spelt using

American English. If you don’t The Monk Diamond had been hidden in a cave.
use American English, your
It was inside a crack in the rock.
browser won’t understand your
CSS. For example, every time you
write the word “colour”, you must
use the American spelling, which
is “color“.

35

GC1_p16-57_9781406366846_PI_UK.indd 35 15/02/2016 16:47

 The background-color CSS property
Now you understand more about CSS and how it works, let’s see how we can use CSS properties to
make our page more colourful. Professor Bairstone and Dr Day’s discovery is sure to be an international
sensation and our web page needs to look eye-catching and interesting.
We can change the background colour of different areas of our page using different <div> tags. First
we have to add style attributes to each of our opening <div> tags. Then inside the style attribute we set the
background-color CSS property and choose a colour for the CSS value. The code we need looks like this:

<body>
<p>THE STOLEN MONK DIAMOND IS DISCOVERED!</p>
Background-color property
<div style="background-color: green;">
<p>Professor Bairstone, Dr Day and Ernest were on an expedition.<br/>
They made an exciting discovery in the mountains.</p>
</div>
<div style="background-color: cyan;">
<p>Ernest started sniffing and barking at a rock in a cave.<br/>
Hidden inside the rock was the Monk Diamond.</p>
</div>
</body>
The Monk Di
T

THE STOLEN MONK DIAMOND IS DISCOVERED!

Professor Bairstone, Dr Day and Ernest were on an expedition.

They made an exciting discovery in the mountains.
This is such Ernest started sniffing and barking at a rock in a cave.
a good Code Hidden inside the rock was the Monk Diamond.
Skill to learn.

Did you
notice?
There are thousands of colours that you can use as values in CSS. Go to
www.w3schools.com/cssref/css_colornames.asp to view more of them.

36

GC1_p16-57_9781406366846_PI_UK.indd 36 15/02/2016 16:47

 1
CODE SKILLS WRITING CSS

It’s time for you to start using CSS with HTML. Have a go at adding the style
attribute to a HTML tag and then setting a CSS property and value.

1. Open up your text-editing <!DOCTYPE html>

program and create a new <html>
HTML file called CSS.html. <head>
Then copy and paste your <title>The Monk Diamond</title>
code from divs.html into </head>
your new file. Modify the <body>
code so that it looks <div>
like this: <p>The jewel was stolen from Moscow.</p>
<p>The theft happened three years ago.</p>
2. Now add an empty style </div>
attribute to each of your <div>
opening <div> tags, <p>The Bond Brothers are the prime suspects.</p>
like this: </div>
</body>
<div style=" "> </html>

3. Then add the background-color CSS

property to the style attributes. Remember <div style="background-color: pink;">
you need to separate the property name
and the value with a colon (:). Don’t forget
the semi-colon (;) at the end of the value. The Monk Di

Your opening <div> tags will look like this:

4. Save your HTML file and open it The jewel was stolen from Moscow.
in your browser. Try changing the
The theft happened three years ago.
value of the background-color CSS
property to different colours. Save your The Bond Brothers are the prime suspects.

file and refresh your page to see your

changes on-screen.

37

GC1_p16-57_9781406366846_PI_UK.indd 37 15/02/2016 16:47

 MORE CSS PROPERTIES
Let’s have a look at some of the CSS properties we can add to our HTML elements to make Professor
Bairstone’s web page more exciting. As you know already, CSS is always made up of a property and a
value. There are hundreds of different CSS properties and values, but here are some of the most common:

CSS property name What does it do? Example values

background-color Sets the colour of your background red; black; white; yellow;

color Sets the colour of your text red; black; white; yellow;

Positions your text around

text-align left; right; center;
the page

font-size Changes the size of your text 12px; 20pt;

Positions your element to the left

float left; right; none;
or the right of another element

height Sets the height of your element 100px; 100%;

width Sets the width of your element 100px; 100%;

border Gives your element a border 1px solid black;

margin Adds space around your element 10px;

padding Adds space inside your element 10px;

WORD
Graphics on your computer screen are made up of tiny coloured dots called PIXELS
CODE

(px). You can tell your browser how many pixels you want to be in a HTML element.

38

GC1_p16-57_9781406366846_PI_UK.indd 38 15/02/2016 16:47

 1
The color CSS property
To change the colour Color property
of your text, use the <body>
color CSS property
perty and style="color: blue;">The Monk Diamond Discovery!</div>
<div style="color ery!</di
then choose a value. </body>
It’s the same ass using
the background-color
d-color
The Monk Di
property. Remember
ember
to use the American
erican
spelling ”color”.
”.
The Monk Diamond Discovery!

Alignment CSS properties

So far all our HTML elements Text-align property
have been in the same position <body>
on our page. The text-align <div style="text-align: center;">
and float CSS properties allow The Monk Diamond Discovery!
you to align (another way of </div>
saying position) text and other <p>Stolen jewel found in Siberia.</p>
HTML elements on your page. </body>
The text-align property lets
you position your text to the The Monk Di

left, right or centre of your

page. Remember to use the
American spelling “center” The Monk Diamond Discovery!
and include the hyphen (-).
Stolen jewel found in Siberia.

39

GC1_p16-57_9781406366846_PI_UK.indd 39 15/02/2016 16:47

 Float property
We can also use CSS to position <body>
HTML elements, such as <div> tags <div style="float: right;">
or images, to the left or right of the The expedition team:<br/>
page. You use the float CSS property <img src="team.jpg" alt="The Team"/>
and set the value to the left or right. </div>
/bo
</body>

The text-align and float The Monk

T

CSS properties are easy

ways
y to cre
create an interesting The expedition team:

layout for your web page.

Using more than one CSS property

You can use more than
one CSS property and <body>
value in a style attribute. <div style="background-color: lightblue; float: right;">
All you have to do is Ernest sniffed out the diamond.
use a semi-colon (;) to </div>
separate them. Your </body> Here we’ve used two
CSS properties
browser will read all of
the CSS properties and
The Monk D
apply them to your HTML element,
so you can use as many as you need.

Look at how we can Ernest sniffed out the diamond.

change both the

background colour and
position of a <div>!

40

GC1_p16-57_9781406366846_PI_UK.indd 40 15/02/2016 16:47

 1
Making things different sizes with CSS
We now know how to change the colour of our of our HTML elements. CSS lets us change the size
text, add background colours to our HTML elements of things really easily. We have to use the width
and position them in different places on the page. and height CSS properties and set the values to the
But if we want to make a really interesting web measurements we want. Let’s take a look at how we
page, we need to know how to change the sizes can use these properties to make a square <div>:

Height property Unit Width property

<body>
<div style="background-color: plum; height: 200px; width: 200px;">
<p>The Monk Diamond was believed to be gone for good.</p>
<p>The House of Volkov was shocked by the theft.</p>
</div>
</body> The Monk D

The Monk Diamond was

believed to be gone for good.
Did you
notice? The House of Volkov was
shocked by the theft.
This time we have set the values of the
CSS properties to numbers rather than
words. When we use numbers we have
to include units.

Measurements in CSS
There are lots of different units you can use for Types of unit:
measuring in CSS. Make sure you tell your browser
Pixels (px)
what unit you are using by typing it after the number
value. Here are some of the most common: Percentages (%)
Points (pt)

41

GC1_p16-57_9781406366846_PI_UK.indd 41 15/02/2016 16:47

 Let’s look at how we can use percentages to change the height and width CSS properties of a <div>:

<body>
<div style="background-color: palegreen; height: 75%; width: 50%;">
<p>The police remain baffled by the crime.</p>
<p>There were no successful leads in the case.</p> Percent value
</div>
</body>

The Monk Di

Did you
notice?
The police remain baffled by
When you calculate percentages you are the crime.
calculating what percentage of the screen
There were no successful
you want your element to fill. If you change leads in the case.
the size of your browser, the size of the
element will also change.

Pixels and points are used in exactly the same way

as percentages. With these units, the size of your
element will always stay the same, even if you change the size of your browser. Here we’ve set the height
and width CSS properties using values in pixels, and we’ve used the font-size CSS property to change the
size of the text to a value in points.
Pixel value Pixel value Point value
<body>
<div style="background-color: gold; height: 200px; width: 350px; font-size: 20pt;">
<p>The Bond Brothers have never been caught.</p>
</div>
</body> The Monk

The Bond Brothers have never

been caught. It was the
perfect crime!

42

GC1_p16-57_9781406366846_PI_UK.indd 42 15/02/2016 16:47

 1
Creating borders and space with CSS
We can also use CSS properties to create borders and space around our HTML elements. To create a
border around a HTML element, you have to use the border CSS property and set the values to the width,
style and colour you want. Let’s look at an example:
Border
Width Style Colour
property
<body>
<div style="border: 4px solid green; width: 50%; height: 100px;">
Professor Bairstone and Dr Day are very excited by their discovery.
</div>
The Monk
</body>

We can also change how much space there is

Professor Bairstone and Dr
inside a HTML element by using the padding and Day are very excited by their
margin CSS properties. You can set the values for the discovery.

margin and padding at the top, bottom, left and right

of a HTML element. Let’s take a look:

Padding property Margin property

<body>
<div style="padding: 25px; margin: 50px; border: 4px solid blue;
width: 50%; height: 100px;">
Ernest was also very happy with the find.<br/>
Professor Bairstone gave him extra rations.
</div> The Monk

</body>

Here the padding CSS property creates 25pxx

of space between the border of our <div> and the Ernest was also very happy
with the find.
text about Ernest inside the <div>. The margin CSS Professor Bairstone gave him
property creates 50px of space between the border extra rations.

of our <div> and the edge of the page.

Did you My extra rations

notice? were yummy!
The style of our border has been set to the value of solid.
You can also use dotted, dashed or double as values.

43

GC1_p16-57_9781406366846_PI_UK.indd 43 15/02/2016 16:47

 CODE SKILLS USING MORE THAN ONE
CSS PROPERTY
There are many different CSS properties you can use to make your web page
for Professor Bairstone and Dr Day look great. Now have a go at using more
than one CSS property in your code to change the page’s layout and design.

1. Open up your text-editing program and create a new HTML file called CSSproperties.html.
Copy and paste your code from CSS.html into your new file and modify it so that there are three
<div> tags, like this:

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
</head>
<body>
<div>
Why was the diamond hidden in a cave?<br/>
Who hid it there?
</div>
<div>
Was it the Bond Brothers?<br/>
Could they be watching the cave?
</div>
<div>
Is the team safe?<br/> I really hope
Their camp
p is very
y remote. we're not in
</div> danger!
</body>
</html>
We have to
keep the
diamond safe!

44

GC1_p16-57_9781406366846_PI_UK.indd 44 15/02/2016 16:47

 1
2. Change the colour, font size and position of the text in your first <div>. Use the color,
font-size and text-align CSS properties. Your code will look like this:

<div style="color: green; font-size: 18pt; text-align: center;">

Why was the diamond hidden in a cave?<br/>
Who hid it there?
</div>

3. Change the width and height of your second <div> using the width and height CSS properties.
Make your <div> 75% of the width of your page and 100px high. Add a background colour
and margin to your <div> too. Your code will look like this:

<div style="width: 75%; height: 100px; background-color: lightblue; margin: 20px;">

Was it the Bond Brothers?<br/>
Could they be watching the cave?
</div>

4. Let’s try moving our third <div> to a different position on the page. Use the float CSS property to
move your <div> to the right of your page. Also add a border and some padding to the <div>
using the border and padding CSS properties. Your code will look like this:

<div style="float: right; border: 6px dotted red; padding: 20px;">

Is the team safe?<br/>
Their camp is very remote.
</div>
The Monk Di

5. Save your HTML file and

open it in your browser.
Now try changing the
values of all the CSS properties to Why was the diamond hidden in a cave?
ones of your choice and see what Who hid it there?
it does to your web page. Was it the Bond Brothers?
Could they be watching the cave?

Is the team safe?

Their camp is very remote.

45

GC1_p16-57_9781406366846_PI_UK.indd 45 15/02/2016 16:47

 USING CSS CLASSES
You might have noticed that adding lots of CSS on your page. Programmers use CSS classes to
properties to our HTML tags has made our lines keep their code as simple as possible. It’s really
of code long and difficult to read. It also takes important to do this when you are coding, as it
time to type in the same CSS properties over and means you are less likely to make mistakes. If, for
over again. To save time and make our code look example, you know that you want all the text in
neater, we now need to learn how to use CSS every <div> on your page to be a certain colour
classes. CSS classes help you organise the CSS in and font size, rather than having to type the
the <body> of your page. CSS properties into every <div>, you can use
A CSS class is a very handy way of applying a CSS class to change all the <div> tags on your
a group of CSS properties to any HTML element page in one go.

Using the <head> tag

So far we’ve mostly been coding inside the <body> of our page. It’s now time to take a closer look
at how we can use the <head>. Let’s go back to the very first page we built at the start of the mission:

<!DOCTYPE html>
<html>
Head tag
<head>
<title>The Monk Diamond Discovery</title>
</head>
<body>
<p>Professor Bairstone and Dr Day have discovered the Monk Diamond.</p>
</body>
</html>

In every page we’ve built so far, the <title> tag The Monk

has been nested inside the <head>. The content

between the opening and closing <title> tags
doesn’t appear in the main <body> when we view Professor Bairstone and Dr Day have discovered the Monk Diamond.
it in our web browser.
We are going to add our CSS classes to our
<head> tag. This is because the <head> is the best
place to put information for our browser that we don’t
want to see drawn in the main <body> of the page.

46

GC1_p16-57_9781406366846_PI_UK.indd 46 15/02/2016 16:47

 1
The style tag: <style> and </style>
When you create a CSS class you tell your browser that you are switching from HTML to CSS. You do
this by using the <style> tag, which you nest inside the <head>. The <style> tag is just like all the other
HTML tags you have used so far in this mission, except you put CSS inside it.
Once you’ve opened the <style> tag, you can create a CSS class. Every CSS class needs a name.
It’s a good idea to make the name relate to the element you want to change. Let’s have a look at how
we can create a CSS class that changes the look of our text:

<head>
Style tag <title>The Monk Diamond Discovery</title>
<style>
CSS class name Opening curly brace
.text {
Dot text-align: center;
font-size: 18pt;
CSS
properties background-color: aqua;
}
Closing
</style> curly brace
</head>

This is a different way of writing and structuring want to apply to the HTML element. As before, you
our code. CSS classes always start with the class separate the property from the value with a colon
name. It’s up to you what you name your CSS (:) and after the value put a semi-colon (;).
classes, but before the class name there has to In this example we have created a CSS class
be a dot (.). Then there is a pair of curly braces which we have named “text“. Every time we use this
({ }). The curly braces tell your browser where the CSS class we will change the text-align, font-size
instructions it needs to follow begin and end. Inside and background-color CSS properties to the values
the curly braces you put all the CSS properties you we
we’veve selected.

Did you Turn over to see how

Tu
notice? you make CSS classes
wor in the <body> of
work
Curly braces ({ }) are found next to the P key your code.
and on the same keys as the square brackets
on your keyboard. You need to press Shift to
use them.

47

GC1_p16-57_9781406366846_PI_UK.indd 47 15/02/2016 16:47

 Using the class attribute
Applying a CSS class to a HTML element in the <body> of our code is really simple. We just add the name
we have chosen for our CSS class to the opening HTML tag for the element we want to change. Rather
than using the style attribute, we now use the new class attribute. The class attribute is written and works in
exactly the same way as all the other attributes we’ve used so far in this mission. Let’s see what we have to
do to apply our CSS class to HTML elements on our page:

<!DOCTYPE html>
<html>
<head> CSS classes and
<title>The Monk Diamond Discovery</title> the class attribute
<style> are the best way to
.text { S.
write CSS.
text-align: center;
CSS class font-size: 18pt;
background-color: aqua;
}
</style>
</head> Class attribute
<body>
<p class="text">The Monk Diamond Discovery</p>
<p>The Monk Diamond has been discovered in the mountains of Siberia.</p>
<p class="text">The discovery is of great international significance.</p>
<p>The team were looking for fossils.</p>
<p class="text">Not one of the world's most famous jewels.</p>
</body>
</html> The Monk Di

In the class attribute we have

used our name for the CSS class The Monk Diamond Discovery
as the value. We haven’t included The Monk Diamond has been discovered in the mountains of Siberia.
the dot (.) at the start. As with all the
other attributes, we have used an equals The discovery is of great international significance.

sign (=) and double quotes (" ") to set its The team were looking for fossils.

value. Look at how using a CSS class and

Not one of the world's most famous jewels.
the class attribute has easily changed the
layout of our page!

48

GC1_p16-57_9781406366846_PI_UK.indd 48 15/02/2016 16:47

 1
Code Skills che
cklist

CODING WITH CSS

CSS is always made up of a property and a value. The property is the name of what
you want to change and the value is what you want to change it to. There are hundreds
of different CSS properties and values.
You separate the property from the value using a colon (:) and always use
a semi-colon (;) after the value. A hyphen (-) is used between words.
CSS properties and values are always spelt using American English.
Values can be given in words or numbers. Common units for numerical values
include pixels (px), points (pt) and percentages (%).
You can apply more than one CSS property to a HTML element. The best way
to do this is to use a CSS class and the class attribute.
You tell your browser you are switching from HTML to CSS by using the <style>
tag. CSS classes are nested inside the <head> tag.
When you choose a CSS class name, it needs to begin with a dot (.). The CSS
p p
properties y want to apply are put inside curly braces.
and values you
You can apply a CSS class
cla to any HTML element using the class attribute.

Professor Bairstone
one
is going to be so
Here are some our
pleased with your
im
important things web page!
to remember when
y write CSS!
you

49

GC1_p16-57_9781406366846_PI_UK.indd 49 15/02/2016 16:47

 CODE SKILLS USING CSS CLASSES
AND THE CLASS ATTRIBUTE
CSS classes are a simple and effective way of using CSS to change your
HTML elements. Let’s have a go at coding some CSS classes and using them
with the class attribute to change the design of a web page.

1. Open up your text-editing program and create

a new HTML file called CSSclasses.html. Copy
and paste your code from CSSproperties.html Don't forgett me!
into your new file and modify it so that the three I was on the
<div> tags look like this: expedition too!

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
</head>
<body>
<div>
The Monk Diamond<br/>
An incredible discovery
</div>
<br/>
<div>
Stolen diamond found on expedition in Siberia!
</div>
<br/>
<div>
Professor Bairstone and Dr Day were looking for fossils in Siberia.<br/>
They found the stolen diamond hidden inside a remote cave.
</div>
</body>
</html>

50

GC1_p16-57_9781406366846_PI_UK.indd 50 15/02/2016 16:47

 1
2. Now add a <style> tag inside <head>
your <head>. Your code will look <title>The Monk Diamond</title>
like this: <style>
</style>
</head>

3. Between your opening and closing <style>

<style> tags, create a CSS class .header {
called header. Set the background- background-color: blue;
color, padding, text-align and font- padding: 25px;
size CSS properties. Add the width text-align: center;
and height CSS properties too. font-size: 18pt;
Choose values for your properties. width: 100%;
Your code will look like this: height: 25%;
}
</style>

4. Apply your header CSS class to the <div class="header">

first <div> in your <body> using the The Monk Diamond<br/>
class attribute. Your code will look
ook An incredible discovery
like this: </div>

5. Create a second CSS class in yyour <style> .title {

tag and call it title. This new CS
CSS class will font-size: 14pt;
come after your header CSS cla class. Set the text-align: center;
font-size, text-align and color pr
properties. color: green;
Choose values for your propert
properties. }
Your code will look like this:

Whyy don't yyou

differen
try some different
colours?

PTO
51

GC1_p16-57_9781406366846_PI_UK.indd 51 15/02/2016 16:47

 CODE SKILLS CONTINUED

6. Apply your title CSS <div class="title">

class to your second Stolen diamond found on expedition in Siberia!
<div>. Your codede will </div>
look like this:

7. Create a third CSS class in your <style> tag .body {

and call it body. This CSS class will come after margin: 20px;
your title CSS class. Set the margin CSS propertyy }
and value. Your code will look like this:

8. Apply your body CSS class to your third <div>.

Your code will look like this:

<div class="body">
Professor Bairstone and Dr Day were looking for fossils in Siberia.<br/>
They found the stolen diamond hidden inside a remote cave.
</div>

The Monk Di
9. Save your HTML file
and open it in your
browser. You will
see that each CSS class
changes the design of a <div>.
The Monk Diamond
An incredible discovery
G work! But
Good Stolen diamond found on expedition in Siberia!
reme
remember that I was
the one who sniffed Professor Bairstone and Dr Day were looking for
fossils in Siberia.
ou
out the diamond! They found the stolen diamond hidden inside a
remote cave.

52

GC1_p16-57_9781406366846_PI_UK.indd 52 15/02/2016 16:47

 1
More than one CSS class
If you want to make your CSS really effective, it’s best to split your CSS classes into groups of CSS
properties. This way, when you are designing and laying out a web page you can apply more than
one CSS class to your HTML element. It’s really easy to use more than one CSS class at a time. All you
have to do is add the names of the different classes to your class attribute. Let’s take a look:

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
The Monk Di
<style>
.header {
background-color: lightgreen;
width: 70%;
height: 50%; The Monk Diamond
} An incredible discovery
.text {
text-align: center;
font-size: 18pt;
}
.padding {
padding: 25px;
This is how we add more
} than one CSS class name
</style> to our class attribute
</head> Using CSS classes to
<body>
select HTML elements
<div class="header text padding">
The Monk Diamond<br/> Another handy thing you can do with CSS
An incredible discovery classes is use them to change the CSS
</div> properties of a type of HTML element. To do
</body> this you use something called the element
</html> selector. To use the element selector, you use
the name of the element you want to change
as the name of your CSS class. You shouldn’t
Turn over to find include the dot before the name of your CSS
out more about the class. You also don’t need to include a class
element selector. attribute in the <body>.

GC1_p16-57_9781406366846_PI_UK.indd 53 15/02/2016 16:47

 So if you want all the text in your paragraphs to be centred and in a certain font size, you can create a
CSS class called “p“ which will find and select your <p> tags. Let’s take a look at what using the element
selector does:

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond Discovery</title>
<style>
Element
selector p {
font-size: 16pt;
text-align: center;
background-color: lightblue;
}
</style>
</head>
<body>
<p>The Monk Diamond was discovered by Professor Bairstone and Dr Day.</p>
<p>Ernest alerted them to its hiding place.</p>
<p>It had been hidden in a crack in the rock.</p>
</body>
</html>

The Monk Di

Now that’s what I

The Monk Diamond was discovered by call clever coding!
Professor Bairstone and Dr Day.

Ernest alerted them to its hiding place.

It had been hidden in a crack in the rock.

The element selector has changed all our paragraphs without

us having to add a class attribute to our <p> tags.

54

GC1_p16-57_9781406366846_PI_UK.indd 54 15/02/2016 16:47

 1
o
ssi n DO IT YOURSELF TASK
Mi

1 BUILD A WEB PAGE

In Mission 1 you learnt lots of HTML and CSS Code Skills. Now it’s time to
use your new knowledge to build the web page for Professor Bairstone.

The Monk Diamond Discovery Web Page Brief

Build a web page about the discovery of the Monk Diamond. Use HTML and CSS to add
text and images and create an interesting design. Include these things on your page:

A header banner
A title banner
Text about the Monk Diamond
An image of the team Turn over to see
a code block for a
An image of the diamond finished web page.
A Monk Diamond fact file

Save your file in your Coding folder and call it

monkdiamonddiscovery.html .

Don’t forget to use the

Get Coding! website if
you get stuck.

55

GC1_p16-57_9781406366846_PI_UK.indd 55 15/02/2016 16:47

 The Monk Di

<!DOCTYPE html>
<html>
<head>
The Monk Diamond Discovery
<title>The Monk Diamond</title>
<style>
Stolen Diamond Discovered in Siberia!
body {
Professor Bairstone and Dr Day have made a sensational discovery.
They have discovered the Monk Diamond in a remote cave in Siberia.
margin: 0px;
Professor Bairstone's dog, Ernest, sniffed out the diamond.

The jewel was stolen three years ago from the House of Volkov.
}
The prime suspects in the theft were the Bond Brothers.
The team thinks the diamond had been hidden by the thieves.
They sent this photo from their camp:
.pad {
The Monk Diamond
padding: 25px;
Fact File
Carats: 300 }
Colour: Green
Value Over £10 million
.header {
background-color: lightblue;
color: green;
height: 100px;
font-size: 36pt;
text-align: center;
}
This is what your
.welcome {
p would
web page background-color: plum;
look like iif you color: white;
used this code! font-size: 16pt;
text-align: center;
height: 40px;
margin: 0px;
}
.main-text {
width: 60%;
float: left;
background-color: beige;
}
.divs {
margin: 5px;
width: 25%;
float: left;
border: 4px solid lightblue;
}
</style>

56

GC1_p16-57_9781406366846_PI_UK.indd 56 15/02/2016 16:47

 1
</head>
<body>
<div class="header pad">
The Monk Diamond Discovery
</div>
<div>
<p class="welcome">
Stolen Diamond Discovered in Siberia!
</p>
</div>
<div class="main-text pad">
<p>
Professor Bairstone and Dr Day have made a sensational discovery.<br/>
They have discovered the Monk Diamond in a remote cave in Siberia.<br/>
Professor Bairstone's dog, Ernest, sniffed out the diamond.
</p>
<p>
The jewel was stolen three years ago from the House of Volkov.<br/>
The prime suspects in the theft were the Bond Brothers.<br/>
The team thinks the diamond had been hidden by the thieves.<br/>
They sent this photo from their camp:
</p>
<img src="team.jpg" alt="The Team" style="height: 150px;"/>
</div>
<div class="divs pad">
<img src="diamond.jpg" alt="Diamond" style="width: 150px;"/>
<p style="text-align: center;">The Monk Diamond</p>
</div>
<div class="divs pad" style="text-align: center;">
Fact File<br/>
Carats: 300<br/>
Colour: Green<br/> FUTURE CODE SKILLS
Value: Over £10 million
</div> HTML and CSS are the most fundamental programming
</body> languages of the web. Now you’ve mastered them you
</html> can start building your own web pages. Knowing HTML
and CSS is a great first step in a career in web design.
Rather than using templates, you can create your own
unique layouts – a fantastic skill. Mission accomplished!

GC1_p16-57_9781406366846_PI_UK.indd 57 15/02/2016 16:47

 o
Mi ssi n
2 CREATE A
PASSWORD
LEARN TO USE HYPERLINKS TO
CONNECT WEB PAGES
LEARN WHAT JAVASCRIPT IS
AND HOW IT WORKS
WRITE PROGRAMS IN JAVASCRIPT
THAT RUN IN YOUR WEB BROWSER
PROTECT A WEB PAGE BY USING
JAVASCRIPT TO CREATE A
PASSWORD

GC2_p58-93_9781406366846_PI_UK.indd 58 15/02/2016 15:24

 2
M ission Brief

Dear Coder,

I’m Dr Ruby Day, the scientist on

the expedition with Professor Bair
hoping to discover dinosaur foss stone. We were
ils. Instead we’ve found the stolen
Monk Diamond!
I want to tell you about a strange
event. Yesterday we were examinin
where we found the diamond. I g the cave
heard a rumbling noise and Erne
frantically. We looked up and saw st started barking
a massive boulder rolling over the
cliff above the cave! We jumped edge of the
out of the way just in time, as the
exactly where we had been stan boulder landed
ding. In the commotion, Professo
and sprained his ankle. r Bairstone tripped

Professor Bairstone and I both agre

e the timing of the boulder is very
It seems too much of a coincidence suspiciou
iouss..
for it to have happened just after
a valuable stolen diamond. Professo we disccove
overed
r Bairstone is convinced that the
found out about our expedition thieves have
and are trying to scare us off. He
is exactly the kind of dirty trick that thinks the boulder
the Bond Brothers, the main susp
Monk Diamond heist, would try. ects in the

We would leave the mountains now

to take the diamond to safety, but
Professor Bairstone’s sprained ank unfortun
tunaatel
telyy
le means he can’t make the trea
just yet. While we are stuck in the cherous desc
esceent
nt
mountains, I think the news abo
of the diamond needs to remain ut the discovery
top secret. I am worried that the
built for Professor Bairstone cou web page you ou
ld be accessed by the Bond Brot
compromised. Please could you hers and our safety
add a password to the web page
only Professor Bairstone and I can so that for now
ow
view the page? Use Ernest300 as
the passworord.
d.
Thank you for all your help and hard
work.
Very best wishes from the dangero
us mountains,
Dr Ruby Day

PS Prof. B. has asked me to send

you this entry from the Explorer’s
Encyclopedia.
a.

GC2_p58-93_9781406366846_PI_UK.indd 59 15/02/2016 15:25

 The Bond Brothers
From the Explorer’s Encyclopedia, the guide to every adventure

T HE E XPLORER ’ S This entry is about the Bond Brothers. For more information about jewel robberies,
ENCYCLOPEDIA see Jewel Thefts.
The Guide to Every Adventure

Home page The Bond Brothers are a top secret international gang of jewel thieves. According
Contents to Interpol, over the last fifteen years they have stolen gems worth a total of more
Featured discoveries
than £500 million.
Famous explorers
Historical expeditions The gang’s tactics are similar to those used by the famous gang the Pink Panthers.

GC2_p58-93_9781406366846_PI_UK.indd 60 15/02/2016 15:25

 2

WANTED FOR THE THEFT OF THE MONK DIAMOND

The Bond Brothers

Light Fingers Gemma the Gem Tony Twinkles

REWARD OF £1 MILLION
FOR INFORMATION LEADING TO the RECOVERY OF THE MONK DIAMOND
OR ARREST OF THE GANG

The Bond Brothers typically target exclusive jewellery houses and boutiques all over the world. Their raids are
exceptionally well-planned, with the targets scoped out weeks in advance.
The Bond Brothers’ tactics have included driving 4x4s through jewellery house windows and drilling through
basements of boutiques to access valuables kept in vaults. Members of the gang have disguised themselves
as workmen to confuse staff and then smashed open display cases.
Although the police were unable to prove it, most people think that the Bond Brothers are responsible for the
unsolved theft of the Monk Diamond from the House of Volkov jewellery house in Moscow. Two members of the
gang (a man and a woman) pretended to be looking for an engagement ring. While the woman distracted the
staff, the man smashed open the Monk Diamond’s display case with a pickaxe. The two then fled in a getaway
car, which was posing as a taxi outside.
All the CCTV in and around the House of Volkov had been disabled for the hour in which the crime took place.
Interpol therefore believes that one of the gang is also skilled in cyber-crime.

GC2_p58-93_9781406366846_PI_UK.indd 61 15/02/2016 15:25

 USING HYPERLINKS
In the Mission Brief Dr Day asked you to create page that asks the user to enter the password to the
a password. The password will stop the Bond web page you built for Professor Bairstone.
Brothers finding out about the discovery of the Hyperlinks (or links, as they are normally known)
Monk Diamond. In this mission you are going to are found on most web pages and are essential for
learn how to make the password. creating the groups of web pages we call websites.
We have to use a new programming language A hyperlink can be a word, number, phrase or
called JavaScript to make the password. But before image that you click on. When you click on the link,
we can get started on coding the password, you your web browser takes you to either a different
first need to learn how to use HTML to link two web place in your current web page, or a completely
pages together. We need to be able to link the web new web page.

The anchor tag: <a> and </a>

Hyperlinks are made using a HTML tag called the anchor <a> tag. The opening tag is <a> and the closing
tag is </a>. Inside the opening <a> tag you have to include an href attribute. The href attribute contains
the URL (or web address) your browser needs to link to the new web page. Let’s take a look:

Anchor tag href attribute URL Hyperlink text

<a href="https://www.monkdiamonddiscovery.com">Diamond Discovery</a>

Diamonds The Monk

Diamond Discovery The Monk Diamond Discovery

Stolen Diamond Discovered in Siberia!

Professor Bairstone and Dr Day have made a sensational discovery.

They have discovered the Monk Diamond in a remote cave in Siberia.
Professor Bairstone's dog, Ernest, sniffed out the diamond.

The jewel was stolen three years ago from the House of Volkov.
The prime suspects in the theft were the Bond Brothers.
The team thinks the diamond had been hidden by the thieves.
They sent this photo from their camp:
The Monk Diamond

Fact File
Carats: 300
Colour: Green
Value Over £10 million

We’ve set the value of our href attribute to the URL for the Monk Diamond Discovery page. We’ve done
this in exactly the same way as we set the values of all the attributes in Mission 1: by using the equals
sign (=) and double quotes (" ") to enclose the URL. The text between the opening and closing <a> tags
becomes your link. When you click on this text you will be taken to the Monk Diamond page.

62

GC2_p58-93_9781406366846_PI_UK.indd 62 15/02/2016 15:25

 2
CODE SKILLS CREATING A HYPERLINK

Hyperlinks are an important skill to master when building websites as they

let the user easily access pieces of content. Let’s create a web page with
a hyperlink.
1. Open up your text-editing program. Create a 4. Now choose the URL you want your hyperlink
new HTML file called links.html. Type this code to connect to. Set it as the value of your href
into your new file: attribute. Your code will look like this:

<!DOCTYPE html> <body>

<html> <a href="https://www.google.co.uk">
<head> Click here</a>
<title>Links</title> </body>
</head>
<body> 5. Save your HTML file and open it in your
</body> web browser. You will see the text
</html> between your <a> tags displayed on-
screen. When you click the hyperlink text
ext yo
your
2. Let’s make our hyperlink. Add an anchor <a> web browser will link to your URL.
tag with an empty href attribute to the <body>
Links
of your page. Your code will look like this:

<body>
<a href=" "></a> Click here
</body>

3. Choose a word or phrase to be the text for your

hyperlink on your web page. Put it between
your opening and closing <a> tags. Your code
will look like this:

<body>
<a href=" ">Click here</a> Try clicking
ingg your
</body> ink!
new link!

63

GC2_p58-93_9781406366846_PI_UK.indd 63 15/02/2016 15:25

 Linking between web pages
To protect the information about the Monk Diamond, we first need to make a new web page. This new
web page will be the first page that the user sees. If the user gets the password correct they will be sent to
the Monk Diamond web page. If they get the password wrong, nothing will happen. By linking our pages
together, we create a website.
We need to use a hyperlink to connect our two pages. If your web pages are saved in the same place
on your computer, you don’t need to provide your web browser with the URL – you can just use the file
name as the URL. So if we make sure we have both HTML files saved in our Coding folder, we can use
code like this:
File name

<a href="filename.html">Web page name<a/>

When we create our new password web page and

save the HTML file in our Coding folder, we can
link the new web page to the web page we built for Page 2: monkdiamonddiscovery.html
Professor Bairstone in Mission 1 really easily. All we
need to do is use the <a> tag and href attribute on <!DOCTYPE html>
each of our pages, like this: <html>
<head>
Page 1: password.html <title>The Monk Diamond</title>
</head>
File name
<!DOCTYPE html> <body>
<html> <a href="password.html">
<head> Click here to log out</a>
<title>Password</title> </body>
The Monk
</head> </html>
File name
<body>
<a href="monkdiamonddiscovery.html">
Click here to log out
Click here to visit the Monk
Diamond web page</a>
</body>
Password
</html>

Click here to visit the Monk Diamond web page Clicking on the link in our password
page takes us to our Monk Diamond
web page. And clicking on the link in the
Monk Diamond page takes us back to our
password page.

64

GC2_p58-93_9781406366846_PI_UK.indd 64 25/02/2016 16:09

 2
CODE SKILLS LINKING BETWEEN WEB PAGES

Let’s learn how to use hyperlinks to link together two web pages and build
a very simple website.
1. Open up your text-editing program. Create a 3. Now create a hyperlink that connects your first
new HTML file called page1.html. Make sure page to your second page. On your first page,
it is saved in your Coding folder. Type this code add the <a> tag with an href attribute. Set the value
into your new file: of the href to the file name of your second page.
Then add some text between the opening and
<!DOCTYPE html> closing <a> tags to make your hyperlink, like this:
<html>
<head> <body>
<title>Page 1</title> <a href="page2.html">Page 2</a>
</head> </body>
<body>
</body> 4. Now open your second page. Create a
</html> hyperlink that takes you back to your first page.
Your code will look like this:
2. Create a second HTML file called page2.html.
Make sure it is saved in your Coding folder. <body>
Then copy and paste your code from page1.html <a href="page1.html">Back to Page 1</a>
into your new file. Modify the code so that it </body>
looks like this:
Save your files and open them in your
<!DOCTYPE html> browser. You will be able to link between
<html> the two pages.
<head>
<title>Page 2</title>
Page 2
Now to make
</head>
the pas
password!
Page 1
<body> Back to Page 1
</body>
</html>
Page 2

65

GC2_p58-93_9781406366846_PI_UK.indd 65 15/02/2016 15:25

 CODING WITH JAVASCRIPT
Hyperlinks are an important first step in creating use JavaScript with HTML to create a password,
a web page that responds to the user. But if we so that the information about the Monk Diamond
want to code a page that is really interactive and is kept safe from the cyber-criminal in the Bond
changes according to what the user does, we Brothers gang.
need to use a new programming language called We saw in Mission 1 how HTML documents
JavaScript with our HTML. are made up of different elements and that you
JavaScript is the most popular programming use attributes to change those elements. JavaScript
language in the world. It transforms a HTML and also has its own syntax, or set of rules, for writing
CSS web page by making it interactive. We need code. JavaScript syntax is made up of pieces of
JavaScript to do all sorts of useful things, such as code called statements, variables, operators and
making buttons and alerts and storing information. functions. Let’s learn about them and see how we
In this mission we are going to learn how we can can use them to build the password.

Adding JavaScript to your HTML page

Before you can start writing JavaScript you need to
tell your browser that you are switching from HTML <!DOCTYPE html>
to JavaScript. You do this by using the <script> <html>
tag. If you don’t put your JavaScript code between <head>
the opening and closing <script> tags your code <title>Password</title>
won’t run. You can have as many <script> tags </head>
as you want in your HTML document and you can <body>
put them inside either the <head> or <body> on <script> Script tag
your page. </script>
</body>
</html>

Her the <script>

Here
ta
tag is inside the
<body> of our page.
<bo
Some
Sometimes we call this
a <script> block.

66

GC2_p58-93_9781406366846_PI_UK.indd 66 15/02/2016 15:25

 2
Statements
When we write an instruction for our <!DOCTYPE html>
browser in JavaScript, we call this <html>
writing a statement. JavaScript programs <head>
normally contain many statements. <title>Password</title>
A statement usually starts with a keyword </head>
that tells you what action it will perform. <body> Semi-colon
It always ends with a semi-colon (;). Your <script>
browser runs one statement after another alert("We need a password urgently!");
in the order they are written. Let’s look alert("Use the password Ernest300");
at some JavaScript statements. When we </script>
save this code and run it in our browser, </body> Statements
this happens: </html>

Password

Password

We need a password urgently!

OK Use the password Ernest300

OK

The two statements between the opening and

closing <script> tags have run one after another,
popping up two alert boxes with different messages
WORD CAMELCASE
is the practice of
inside. An alert is a piece of JavaScript called
CODE

joining two words together to

S

a function, and it’s built in to your web browser.

form one word. The first word
We’ll learn more about it later in the mission.
starts with a lower-case letter
JavaScript is case sensitive, so it’s important
and the second word begins with an upper-
to make sure you have used the correct capital
case letter, but there is no space between
letters. If you have to choose a name for a piece
them, just like the humps of a camel.
of JavaScript, you can’t leave spaces between
An example of camelCase is sayHello.
words. A good way to write two words is to use
camelCase.
67

GC2_p58-93_9781406366846_PI_UK.indd 67 15/02/2016 15:25

 VARIABLES These are
important!
Variables are an important part of JavaScript. They
are a way to store information in your web browser
for a short period of time. You can then use the
stored data to build programs that make your web check if the user has entered a correct password.
page interactive. Without variables your browser Variables store data in the form of words or
has no way of remembering information. numbers. You have to code variables in a certain
So when we use JavaScript to code a program way. You always have to tell your browser you
that will check a password, we need to use a are creating a variable. This is called defining a
variable to store the data for the correct password. variable. Let’s have a look at how we create
Without a vavariable our browser won’t be able to a variable that will store Ernest’s name:

Ernest is a very var dogName = "Ernest";

good name!
Variable keyword Variable name Value

Variables are always written in the same way. Every piece of JavaScript tells your browser a different
piece of information, and will be important when you build a program.

A variable needs:
A keyword
To define a variable you have to use the variable (var) keyword. It tells your browser
you are creating a variable.
A variable name
The next part of a variable is the variable name. You can give your variable any
name you like. The only rule with variable names is that they can’t have spaces
(so use camelCase instead) and can’t begin with a number.
A value
You then have to give your variable a value using the equals sign (=). Doing this
is called assigning a value. If the value of your variable is text, you have to put the
value in double quotes (" "). You can include spaces in your values. After the value
you have to include a semi-colon (;).

68

GC2_p58-93_9781406366846_PI_UK.indd 68 15/02/2016 15:25

 2
Operators
Operators are another key part of JavaScript. They are a way of changing the value of a variable.
Different kinds of operators do different things to the information in your variable.

Can youu spot

p the
Assignment operators use of camelCase?
Assignment operators allow you to create and set the values of your variables.
s.

Equals (=): you use the equals sign (=) to give your
variable a value. You can use it to set variables to
both numbers and words. If your variable is a number, var teamMembers = 3;
it doesn’t have to be in double quotes (" "). Here’s an
example where the value is set to a number: Assignment operator
And here’s an example where
the value is set to words and var expeditionLeader = "Professor Bairstone";
needs double quotes (" "):

Arithmetic operators

Arithmetic operators are a way of using maths calculations to change the values of your variables.
They are a useful way of creating a numerical value for a variable.

Addition (+): you use the addition

operator (+) to add together numbers var campRations = 2 + 1;
to create a value. Here the value of our
campRations variable will be set to 3. Addition operator
Subtraction operator
Subtraction (−): you use the subtraction
operator (−) to subtract numbers to var dogBiscuits = 5 − 4;
create a value. Here the value of our
dogBiscuits variable will be set to 1.
Don't forget to
Always make sure you put text values in
use a semi-colon at the double quotes.
end of the variable.
69

GC2_p58-93_9781406366846_PI_UK.indd 69 15/02/2016 15:26

 CODE SKILLS USING VARIABLES AND OPERATORS

Variables and operators are important parts of the JavaScript programming

language. Let’s code some simple JavaScript programs using them.

1. Before we can write any JavaScript we need to <!DOCTYPE html>

create a HTML file with a <script> tag in the <html>
<body>. Open up your text-editing program. <head>
Create a new HTML file called variables.html. <title>Variables</title>
Type this code into your new file: </head>
<body>
<script>
2. Now try writing some JavaScript. Create a </script>
variable between the opening and closing </body>
<script> tags. Give your variable a name and </html>
then use the assignment operator (=) to set the
value of your variable. Let’s try with a number, <script>
like this: var diamondCarats = 300;
</script>

Don’t forget JavaScript is case sensitive, so make sure you keep the cases the same in your code block.
Also remember the semi-colon (;) at the end. If you save your HTML file and open it in your browser,
nothing will happen – but don’t worry. You have stored 300 in your diamondCarats variable.

3. Let’s use the alert function to check that your <script>

variable has been stored in your browser. var diamondCarats = 300;
Underneath your variable type alert(diamondCarats);
this code: </script>

What we’re doing is asking our

browser to run the built-in alert Check that pop-ups haven’t
function. Whatever value is in our been disabled in your browser.
diamondCarats variable will be Search online for how to
displayed in an alert. disable the pop-up blocker in
the browser you are using.
70

GC2_p58-93_9781406366846_PI_UK.indd 70 15/02/2016 15:26

 2
Save your HTML file and refresh your Variables

page. An alert will pop up and you will see

the value of your diamondCarats variable
displayed on-screen. Click OK and your
alert will vanish. Refresh your page and 300
the alert will reload.

4. Now let’s code a new variable, using the addition OK

operator (+), to find the total number of people

and dogs in Professor Bairstone’s team. Let’s
call our variable teamMembers and set an alert
to show the value of our variable. Modify the Variables

<script> block so that it looks like this:

<script>
var teamMembers = 2 + 1; 3
alert(teamMembers);
</script>
OK

Save your file and refresh your page.

Your alert will be the value of your
teamMembers variable. Click OK.
Variables

5. Finally, let’s try creating a variable using the

assignment operator (=) to store text in our
variable. Don’t forget that you need double
quote marks (" ") around the text. Set an alert The Bond Brothers
to show the value of your variable. Modify the
code in your file so that it looks like this:
OK

<script>
var jewelThieves = "The Bond Brothers";
alert(jewelThieves);
</script>

When you save your file and refresh your Well done! You’ve
ou’ve
page, you will see your text displayed in just written yyour
an alert. cript
first JavaScript
programs!!
71

GC2_p58-93_9781406366846_PI_UK.indd 71 15/02/2016 15:26

 COMPARISON OPERATORS
As well as assigning values or performing maths
Operator Meaning
calculations, operators can be used to compare
the values of variables. Being able to compare
values allows us to make our web pages more == Equal to
interactive. Using comparison operators we can
write code that does different things depending on
the values of our variables. Here are some of the != Not equal to
different comparison operators you can use:
> Greater than
These operators can be used in JavaScriptpt
statements to ask questions about our variables.
abl
Then we can write code that makes different things < Less than
happen depending on the answer to the question.
Instructions for our browser that use comparison >= Greater than or equal to
operators are called if statements and else
statements. These types of statement are called
conditionals, because they depend on the value, <= Less than or equal to
or condition, of the variable.

IF STATEMENTS
If statements are a way of telling our browser to perform an instruction only if the condition of our variable
is true. If the condition of our variable is false, our browser won’t perform the instruction in the code.
We have to structure if statements in a certain way. We start them with the statement keyword (if). Then
we open a pair of brackets and put the rule for our if statement inside them. Then we open a pair of curly
braces ({ }). Inside them we put the instruction we want to happen only when our if statement is true.
Let’s have a look at an example where
Equal to operator
we’ve used the equal to operator (==)
to create an if statement. Here the value <script> Curly brace
of our variable is set to Dr Day using the var person = "Dr Day";
assignment operator (=). We then create an if(person == "Dr Day") {
if statement by asking our browser to check If alert("Hello Dr Day!");
if the value in our variable is equal to (==) statement }
Dr Day. Then we ask our browser to pop up </script>
Alert
an alert if our condition is true.

72

GC2_p58-93_9781406366846_PI_UK.indd 72 15/02/2016 15:26

 We've used an if 2
Conditionals
statement to code a
program that will say
hello to Dr Day!
Hello Dr Day!
Now, if we change the value of our variable to a
value that isn’t equal to Dr Day, nothing will happen.
OK
This is because the if statement is false. Our browser
won’t run the code inside the curly braces and no
alert will pop up.
Conditionals

<script>
var person = "Ernest";
if(person == "Dr Day") {
alert("Hello Dr Day!");
}
</script>

You can use the other comparison

operators in that table to check all sorts
of different things. You can see if things are not equal to (!=), or you can use the greater
than (>) and less than (<) operators to check if a number is bigger or smaller than another
number. Let’s have a look at using the greater than operator (>) to create an if statement.

Greater than Conditionals

operator
<script>
var diamondCarats = 300;
if(diamondCarats > 299) {
Valuable Diamond Alert!
alert("Valuable Diamond Alert!");
}
</script> OK

Here the value of our variable is set

to 300. We create an if statement by
asking our browser to check if the value inn our
variable is greater than (>) 299. Then wee ask our Notice how the
browser to pop up an alert if our condition
on is true. cclosing curly brace
The Monk Diamond is 300 carats, so the alert li up with the
lines
will pop up. keyword.

GC2_p58-93_9781406366846_PI_UK.indd 73 15/02/2016 15:26

 CODE SKILLS CODING IF STATEMENTS

Using if statements in your JavaScript code means you can build more
complex programs that change according to the value in a variable.
Let’s build a program that uses an if statement.

1. Open up your text-editing program. 2. Create an if statement using the equal to operator (==).
Create a new HTML file called Make an alert pop up if the condition of a variable is true.
ifstatements.html. Type this code First, create a variable called dogName between your
into your new file: <script> tags. Then create your if statement and alert.
Don’t forget to put the instruction for the if statement st
<!DOCTYPE html> in brackets and the instruction for your alert in curly
<html> braces ({ }). Your code will look like this:
<head>
<title>Conditionals</title> <script>
</head> var dogName = "Ernest";
<body> if(dogName == "Ernest") {
<script> alert("You discovered the Monk Diamond!");
</script> }
</body> </script>

Conditionals

3. Save your HTML file

and open it in your
browser. An alert
You discovered the Monk Diamond!
will pop up.

OK

I certainly did discover that 4. In the value of your variable try

d
diamond! It wasn’t such a changing Ernest to your own name, so
the condition of the if statement is false.
cl
clever hiding place after all. Save your file and refresh your page.
The alert will not pop up.
74

GC2_p58-93_9781406366846_PI_UK.indd 74 15/02/2016 15:26

 2
ELSE STATEMENTS
Else statements are used with if statements to make web pages even more interactive. You use an else
statement after an if statement to change which block of code is run by your browser. If the condition
of your if statement is false, your browser will run the alternative else statement.
Else statements are written in exactly the same way as if statements – you just have to use the else
keyword instead. You put the code you want to run inside curly braces ({ }). Let’s take a look at an
example of an if statement and an else statement working together:

<script>
var name = "Tony Twinkles";
if(name == "Dr Day") {
Conditionals
Else alert("Access Granted!");
statement }
else {
alert("Access Denied!");
} Access Denied!
</script>

OK

If we run this code in our browser an

alert will pop up. The value in our variable is the
name of one of the Bond Brothers and not equal
to (==) Dr Day. Because the condition of the if
statement was false, our browser ran the else
statement. But if the value of our variable had been
equal to (==) Dr Day and the condition of our if
statement had been true, the else statement would That’s a clever
not have run. The if statement would have run wwayy to st
stopp the
nted“ alert would
instead, and the “Access Granted“ B Bro
Bond others!
Brothers!
have popped up.

Hmph! How am I going

to find out if they
have the jewel?

75
75

GC2_p58-93_9781406366846_PI_UK.indd 75 15/02/2016 15:26

 CODE SKILLS CODING ELSE STATEMENTS

Now we should learn how to use an else statement with an if statement in a

block of JavaScript code. Let’s try coding a program that uses both types of
conditional statement.

1. Open up your text-editing program. Create 3. Now add an else statement after your if
a new HTML file called elsestatements.html. statement. This statement will run if the condition
Then copy and paste your code from of the if statement is false. Your code will look
ifstatements.html into your new file. like this:
Modify the code so that it looks like this:
<script>
<!DOCTYPE html> var diamondValue = 10;
<html> if(diamondValue <= 9.9) {
<head> alert("Value: Under £10 million!");
<title>Conditionals</title> }
</head> else {
<body> alert("Value: Over £10 million!");
<script> }
</script> </script>
</body>

2. Create a new if statement in your <script> 4. Save your HTML file and open it in your
block using the less than or equal to operator browser. Your else statement will run
(<=) . Make the condition of your if statement and an alert will pop up.
false. Your code will look like this:
Conditionals

<script>
var diamondValue = 10;
if(diamondValue <= 9.9) {
Value: Over £10 million!
alert("Value: Under £10 million!");
}
</script> OK

76

GC2_p58-93_9781406366846_PI_UK.indd 76 15/02/2016 15:26

 2
Code Skills che
cklist

WRITING JAVASCRIPT
JavaScript always has to be written inside the <script> tag, so that your browser
knows you are switching from HTML to a new programming language. You can put
<script> tags in the <head> or <body> of your page.

Just like HTML and CSS, JavaScript is written in a special way and has its own syntax.
It is a case-sensitive language. You should leave spaces between pieces of code to
make them easier to read.
Each instruction you give your browser in JavaScript is called a statement. Statements
have to end in a semi-colon (;). Curly braces ({ }) are used to group statements
together into a block of code to be run in one go by your browser.
Statements normally start with a keyword that tells you the action the statement
will perform.
You can store information in your browser using variables. Variables have a name and
a value, which can be either text or numbers. If the value is text it has to be in double
quotes (" "). If your variable name has two words, write it using camelCase.
To change or set the values of your variables you can use assignment
operators, arithmetic operators and comparison operators.
If statements and else statements are known
as conditional statements.
Using conditional statements Using JavaScript helps
allows us to make our code do us make interactive web
different things depending on pages that respond to
the value of a variable. the user.

77

GC2_p58-93_9781406366846_PI_UK.indd 77 15/02/2016 15:26

 FUNCTIONS
Another important part of JavaScript coding is learning how to create and use functions. You create a
function by grouping together JavaScript statements. The statements grouped in the function work together
to perform a particular action. The function won’t run until you tell your browser to run it. This is known as
calling a function. Let’s take a look at how you create a function that will pop up an alert and then call it:
Function name Function

<script>
Function function sayPassword() {
keyword alert("Password!");
} Password!
sayPassword(); Statement
</script> OK

Function call

Functions always have to be written in the same way. Each part is an important instruction for your browser.

A function needs:
The function keyword
To define and create a function you have to use the function keyword.
A function name
Then you need to give your function a name. The name should be short and explain
the action the function performs. The name always ends with a pair of brackets.
Curly braces
After the function name you have to open a pair of curly braces ({ }). All the statements
you want to group together in the function have to go inside the curly braces.
Statements
Statements form the body of your function. You can use as many statements as you
want and the block of code will run in your browser whenever you call the function.
A function call
To call our function and run the block of code, you have to type the name of the
function (including the brackets) followed by a semi-colon. After you have defined
your function, you can call your function anywhere in your <script> block.

78

GC2_p58-93_9781406366846_PI_UK.indd 78 15/02/2016 15:26

 2
Built-in functions
As well as grouping together statements to create function and the information it needs to run.
your own functions, you can also use functions that JavaScript has many built-in functions. You’ve
are built into your browser. A built-in function is an already been using one in this mission: the alert
action your browser knows how to perform without function. To use the alert function, all you do is type
you having to write any code. A programmer has “alert” and your browser pops up the alert box.
already done the hard work for you. All you have Built-in functions save you time and let you do more
to do is give your browser the name of the built-in complex things when you are programming.

Functions and arguments

To make a function perform a task, you sometimes have to give it a piece of information so it can run.
When we put information inside a function, we say that we have passed our function an argument.
You have been passing an argument to a function every time you have used the alert function. Let’s take
a look at what an argument looks like:
Argument
Function
alert("Access Denied!");

The information in brackets after the name of the function is

our argument. Our browser needs the argument to know what
text to display in the alert box. Without the argument, the alert
function wouldn’t work properly.
Arguments can be in the form of text, numbers or variables.
If you are passing your function a piece of text to use as an
argument, it needs to be in double quotes (" "). If you are
passing it the name of a variable, you just use the variable
name without quotes, like this:

var bondBrothers = "Dangerous jewel thieves!";

alert(bondBrothers);
Variable passed as argument

You can pass arguments to any kind of function. You might have wondered why function names
and function calls always end with a pair of brackets. It’s so you can pass the function an
argument. Turn over to see how to do it.

79

GC2_p58-93_9781406366846_PI_UK.indd 79 15/02/2016 15:26

 Functions
Argument added
to function
<script>
function sayHello(name) {
alert("Hello " + name); Hello Dr Day!
}
sayHello("Dr Day!");
OK
</script>
Function call

In this piece of code we have created a function that will pop up an alert. We do this by adding an
argument to our function. This kind of argument is called a parameter. We then code an alert which tells
our browser to pop up some text plus the argument. We then tell the browser the name to insert in the alert
by putting it in the function call.

The return statement

So far we have been giving our functions pieces of information in arguments. We can also make our
functions give us pieces of information back as values. When a function gives back a piece of information,
we say it has returned the information. To make a function return a piece of information, we have to use a
return statement inside the function. The value in the return statement can be text, numbers or a variable,
and it becomes the value of the function. Let’s take a look at how we can use a return statement to give us
a piece of text:
Functions
Function name
<script>
function getName() {
Return return "Dr Day";
statement } Value to return Dr Day

var scientist = getName();

alert(scientist);
OK
</script>

Functions will often In this example we’ve created a function called getName.
perform an action and We want our function to give us Dr Day’s name as a value, so
rreturn the result to the we’ve used a return statement and set her name as the value.
rest of your code. We’ve then stored the function name as the variable value. When
the alert pops up, it will pop up with the value of the return.

80

GC2_p58-93_9781406366846_PI_UK.indd 80 15/02/2016 15:26

 2
CODE SKILLS FUNCTIONS AND ARGUMENTS

Let’s have a go at grouping together statements and creating a function.

We should also try out the return statement as it will be very useful when
we create our password for Dr Day.
1. Open up your text-editing program. Create a 2. Inside your <script> block create a function
new HTML file called functions.html. Type this called checkAccess that will pop up an alert
code into your new file: when you call it. Your code will look like this:

<!DOCTYPE html> <script>

<html> function checkAccess() {
<head> alert("Restricted access!");
<title>Functions</title> }
</head> checkAccess();
<body> </script>
<script>
</script> Functio

</body>
</html>
Restricted access!
3. Save your HTML file and open it in
your browser. An alert will pop up.
OK

4. Now change your checkAccess function so that

it contains a return statement. Store the name of
Functio
your function in a variable. Then make an alert
pop up to show the value of your variable:

<script> Expedition team only!

function checkAccess() {
return "Expedition team only!"; OK
}
var webPage = checkAccess();
alert(webPage); Save and refresh your page.
</script> A new alert will pop up.

81

GC2_p58-93_9781406366846_PI_UK.indd 81 15/02/2016 15:26

 MAKING JAVASCRIPT WORK WITH HTML
We’ve seen throughout this mission how you can
add JavaScript to your HTML web page by writing
it inside the <script> tag. But now we need to
learn how to make our JavaScript code run when Attributes!
tes!
the user clicks on a HTML element. If we want You know all
something to happen when the user clicks on a about them from
piece of text or an image on our page, we have to Mission 1.
add JavaScript to our HTML tags. Luckily there’s an
attribute that lets us do this.

The onclick attribute

It’s really easy to make a piece of JavaScript run when the user clicks on a HTML element on your page.
All you need to do is include the onclick attribute (or the “onclick”) in the HTML tag you want to make
interactive. Then when the user clicks on the HTML element in their browser, the JavaScript code will run.
The onclick attribute is just like all the other attributes we’ve used in the missions so far. You add the
attribute to the opening tag of the HTML element you want the user to click on. You then set the value of
the onclick to the piece of JavaScript you want to run, using the equals sign (=) and double quotes (" ").
Don’t forget the semi-colon (;). You can put any JavaScript you want inside an onclick. Let’s take a look:

<!DOCTYPE html>
<html>
<head>
<title>Diamond Colour</title>
</head> Value set to
Onclick attribute JavaScript
<body>
<p onclick="alert('Green');">
Click here to find out the colour of the Monk Diamond
</p>
</body>
</html>

82

GC2_p58-93_9781406366846_PI_UK.indd 82 15/02/2016 15:26

 2
When the user clicks on the text between the
opening and closing <p> tags, the JavaScript
Did you know that
function in our onclick runs. An alert will pop up.
green diamonds are
extremely rare?

Did you
notice?
Diamond
mond co

We used single quotes (' ') around

the argument we passed to our alert
function. This is because we had Click
Green
already used double quotes to set the
value of the onclick attribute. Always
use single quotes inside double quotes,
OK
or your code won’t run.

Using true and false with the return statement

You can also use your onclick attribute to stop your
browser following an instruction in a piece of code.
de.
To do this you use a return statement in your onclick,
lick, wo
I'm worried those
and set its value to “false”.
B Brothers
pesky Bond
Return is a reserved word in JavaScript. If you ou
e”,
use a return statement and set it to the value “true”,
might be around...
your browser will keep running the code. But if youou
Please hurry with
our
use “false” as a value in your return statement, your the password!
browser will stop running the code immediately.

WORD RESERVED WORDS are words that

CODE

cannot be used as function or

variable names. This is because
they are special commands that yourr
browser understands. You don’t need to
put reserved words in double quotes (" ").

83

GC2_p58-93_9781406366846_PI_UK.indd 83 15/02/2016 15:26

 The onclick attribute and hyperlinks
We can create a very useful piece of JavaScript with the onclick attribute and the value “false“. You can
use the onclick and the return statement to stop a hyperlink from working when a user clicks on it. This will
be very useful when we code our password later in the mission. If the user gets the password wrong, they
won’t be taken to the Monk Diamond web page.
To do this, you first create your hyperlink in exactly the same way as we did at the start of the mission,
using the anchor <a> tag and the href attribute, like this:

<body>
<a href="monkdiamonddiscovery.html">
Click here to visit the Monk Diamond web page
</a>
</body>

Then you add the onclick attribute and the return statement. Set the value of the return statement to “false“,
like this:
Return statement False value
<body>
<a href="monkdiamonddiscovery.html" onclick="return false;">
Click here to visit the Monk Diamond web page
</a>
</body>

Using “false“ as the value of our onclick means that nothing

will happen when the user clicks on the link.

This will help keep

our web page hidden!!

84

GC2_p58-93_9781406366846_PI_UK.indd 84 15/02/2016 15:26

 2
CODE SKILLS MAKING HTML CODE RUN JAVASCRIPT

Practise using the HTML onclick attribute to run a piece of JavaScript code.
Knowing how to do this will mean you can make HTML elements respond to
the user.
1. Open up your text-editing program. Create 2. In your <body> create a hyperlink that will take
a new HTML file called onclick.html. your user to Google. Use the anchor <a> tag
Type this code into your new file: and href attribute. Set the value to the Google
URL. Your code will look like this:
<!DOCTYPE html>
<html> <body>
<head> <a href="https://www.google.com">
<title>Onclick</title> Google
</head> </a>
<body> </body>
</body>
</html>

3. Now add your onclick attribute to your opening <a> tag. Set the value of your onclick to a JavaScript
alert. Remember to use single quotes (' ') for the alert argument. Your code will look like this:

<a href="https://www.google.com" onclick="alert('Redirecting to Google');">

Google
</a>

4. Save your HTML file and open it in your browser. When you click on the link an alert will
pop up. When you click OK, you will be taken to Google.

5. Now stop your

hyperlink from taking <a href="https://www.google.com" onclick="return false;">
you to Google. Use Google
a return statement in </a>
your onclick like this:
Save your file and refresh your page. When you click
on the link, your page won’t connect to Google.

85

GC2_p58-93_9781406366846_PI_UK.indd 85 15/02/2016 15:26

 CREATING YOUR PASSWORD PAGE
Now you know how to use the onclick attribute to make your HTML elements
interactive, we can start building our password web page for Dr Day.
Let’s start with the basic HTML structure of our page:

<!DOCTYPE html>
<html>
<head>
<title>Password</title> Don’t forget the
<style> top secret password
body {
is Ernest300
Ernest300.
CSS class
background-color: lightblue;
padding: 30px;
}
</style>
</head>
<body>
<p style="font-size: 30pt;">THE MONK DIAMOND DISCOVERY</p>
<p>Please enter the password to view this website.</p>
<p>Password:</p>
<a href="monkdiamonddiscovery.html"> Hyperlink
Click here to submit password and view website
</a>
</body> Password

</html>

Here we’ve created a simple web page using THE MONK DIAMOND DISCOVERY
HTML and CSS. We’ve included a hyperlink
that links to our Monk Diamond Discovery Please enter the password to view this website.
web page. But there isn’t anywhere on our Password:
page where the user can enter their password.
We need to create a box so that the user can Click here to submit password and view website
type it in.

86

GC2_p58-93_9781406366846_PI_UK.indd 86 15/02/2016 15:26

 2
The input tag: <input/>
Websites often need you to type in information. It’s how you log in to an online account, book cinema
tickets or use a search engine. So asking your user to type in information is a common part of coding.
It’s called asking for user input.
There are lots of tags you can use to ask for user input, but the one you will use the most is the
<input/> tag. It’s great for creating boxes on your page so your user can enter data. It’s a self-closing tag
and you include two attributes inside it: the id attribute and the type attribute. As you already know, you set
the value of these attributes using the equals sign (=) and double quotes (" "). Let’s take a look at how we
would use the <input/> tag on our page:

<body>
<p style="font-size: 30pt;">THE MONK DIAMOND DISCOVERY</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="text"/></p>
<a href="monkdiamonddiscovery.html"> Type attribute
Click here to submit password and view website
</a>
</body> Id attribute

Using the <input/> tag with these Password

two attributes creates a box that we
can type our password into.
You use the id attribute to give
your <input/> tag a unique name.
THE MONK DIAMOND DISCOVERY
You have to choose the name of
your id attribute. Make sure it’s
easy to remember. Here we’ve Please enter the password to view this website.
set the value of the id attribute to
passwordBox. Password: Ernest300
Doing this allows us to use the iew website
Click here to submit password and view
value inside the <input/> tag in our
JavaScript. We use the id attribute to
tell our browser exactly which piece
of data we want it to use. Without
the id attribute your browser will not
Look, you can
an
be able to find the password and enter the
check if the password is correct. password!

87

GC2_p58-93_9781406366846_PI_UK.indd 87 15/02/2016 15:26

 The type attribute
There are lots of different kinds of <input/> tags, so you need to use the type attribute to tell your browser
exactly what sort of <input/> tag you need. You have to choose from defined values for your type
attribute. Here are some of the common type attributes you can use inside your <input/> tag:

You may have noticed on the

Attribute value What does it do? previous page that when we set
the type attribute to text, the text
for the password was displayed
text Creates a box for entering text
in the box. That isn’t very secure!
What happens if the Bond
Creates a box for entering
password Brothers are near by when
a password
Dr Day types in the password?
Creates a clickable button If we want to keep our
button password secret we can change
(with JavaScript)
the value of our type attribute to
Creates a box the user can password. This will hide what the
checkbox
tick or untick user types by changing the text
to dots. Let’s take a look:

<body>
<p style="font-size: 30pt;">THE MONK DIAMOND DISCOVERY</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="password"/></p>
<a href="monkdiamonddiscovery.html">
Click here to submit password and view website Password value
</a>
</body>
Password

THE MONK DIAMOND DISCOVERY

That’s a much
better way of Please enter the password to view this website.
keeping the Password: •••••••••
password secret!
Click here to submit password and view website

88

GC2_p58-93_9781406366846_PI_UK.indd 88 15/02/2016 15:26

 2
Using JavaScript to check the password
Now we’ve built the basic HTML structure of our page, we need to write some JavaScript that will check
if the password the user enters is correct. If they enter the password Ernest300 they will be taken to the
Monk Diamond Discovery page. If they enter an incorrect password an alert will pop up telling them they
have got the password wrong.
The first thing we need to do is create a function
that will contain all the code we need to check our <script>
password. Let’s create the function inside our <head>. function checkPassword() {
You can put JavaScript anywhere in a HTML web page, }
Function
and having it in our <head> in this example makes our </script>
code easier to understand. Don’t forget to put your
JavaScript inside the <script> tag, like this:
We then need to create variables that store the value of our password, so that our
function can check if the user has got it correct. Let’s look at the two variables we need:

<script> getElementById
Variable 1 function checkPassword() {
var password = document.getElementById("passwordBox");
Variable 2 var passwordEntered = password.value;
} Id attribute
</script>

In our first variable we are using a new built-in function called getElementById. You will learn all about this
function and use it more in Mission 3. It is a handy function that finds the HTML element with the specified
id attribute. The id attribute we have selected here is for our <input/> tag. So the value of our variable
will be whatever data the user has typed into the password box.
We then create a second variable to store the data that the user has typed into the password
box. We create this value by typing the name of our first variable followed by a dot (.)
then the value keyword. We do this so we can write an if statement using the value
of this variable.
We now need to create an if statement. If the
condition of our second variable is true and our
Turn the page to
password text is equal to (==) Ernest300, the
see what that code
hyperlink will work. If the condition of our variable is looks like!
false and the password text is not equal to Ernest300,
the link won’t work and an alert will pop up. We don’t need to use
an else statement because the return statement will halt the function.

89

GC2_p58-93_9781406366846_PI_UK.indd 89 15/02/2016 15:26

 Our complete <script> block for our password with the new if statement looks like this:

<script>
function checkPassword() {
var password = document.getElementById("passwordBox");
If statement var passwordText = password.value;
if(passwordText == "Ernest300") {
return true;
}
alert("Access denied! Incorrect password!");
Alert
return false;
}
</script>

Finally we have to make our JavaScript work with our HTML elements. We need to look at the code in
the <body> of our page now. We want to call the checkPassword function when someone clicks on the
hyperlink in our page. So we need to add an onclick attribute to our opening <a> tag, like this:

<body>
<p style="font-size: 30pt;">THE MONK DIAMOND DISCOVERY</p>
<p>Please enter the password to view this website.</p>
Function call
<p>Password:<input id="passwordBox" type="password"/></p>
<a href="monkdiamonddiscovery.html" onclick="return checkPassword();">
Click here to submit password and view website
</a> Password

</body>

THE MONK DIAMOND DISCOVERY

Access denied! Incorrect password!

Password Please enter the password to view this website.

t
Incorrec Password: •••••••••
OK

rd
passwo Click here to submit password and view website
The Monk
THE MONK DIAMOND DISCOVERY

Please enter the password to view this website. Corre

ct The Monk Diamond Discovery
passw
Password: ••••••••• ord
Stolen Diamond Discovered in Siberia!
Click here to submit password and view website Professor Bairstone and Dr Day have made a sensational discovery.
They have discovered the Monk Diamond in a remote cave in Siberia.
Professor Bairstone's dog, Ernest, sniffed out the diamond.

The jewel was stolen three years ago from the House of Volkov.
The prime suspects in the theft were the Bond Brothers.
The team thinks the diamond had been hidden by the thieves.
They sent this photo from their camp:
The Monk Diamond

Fact File
Carats: 300
Colour: Green
Value Over £10 million

90

GC2_p58-93_9781406366846_PI_UK.indd 90 15/02/2016 15:26

 2
o
ssi n DO IT YOURSELF TASK
Mi

2 CREATE A PASSWORD

It’s time to have a go at using all the JavaScript Code Skills you’ve learnt in this
mission to create a new web page that asks the user to enter a password. This
web page will protect the web page you built in Mission 1. If the user gets the
password right, they will be able to access the Monk Diamond Discovery web
page. If they get it wrong, an alert will pop up telling them that access is denied.

The Monk Diamond Discovery Password Brief

When you build your new web page make sure you code these things using HTML
and JavaScript:

A function that will check your password when it is called.

Variables that will store the value of the data the user enters into the
password box.
An if statement that will check if the password the user enters is correct.
An alert that will pop up if an incorrect password is entered.
A text box the user can enter data into.
A hyperlink that connects this web page to the Monk Diamond
Discovery web page.
Save your file in your Coding folder and Turn over to see the
call it password.html. code you need for
your password page.

91

GC2_p58-93_9781406366846_PI_UK.indd 91 15/02/2016 15:26

 <!DOCTYPE html>
<html> The Bond
<head> Brothers won't
<title>Password</title> beat us!
<style>
body {
background-color: lightblue;
padding: 30px;
}
</style>
<script>
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText == "Ernest300") {
return true;
}
alert("Access denied! Incorrect password!");
return false;
}
</script>
</head>
<body>
<p style="font-size: 30pt;">THE MONK DIAMOND DISCOVERY</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="password"/></p>
<a href="monkdiamonddiscovery.html" onclick="return
checkPassword();">
Click here to submit password and view website
</a>
</body>
</html>

92

GC2_p58-93_9781406366846_PI_UK.indd 92 25/02/2016 16:34

 2
Password

THE MONK DIAMOND DISCOVERY

Please enter the password to view this website.

Password: •••••••••

Click here to submit password and view website

B
Brilliant coding! This password
pag
g will keep the Monk Diamond
page
s
safe. Don't forget you can use
m CSS properties to change
more
the look of the page.

FUTURE CODE SKILLS

JavaScript is a powerful and dynamic programming
language, used by all modern web browsers. Knowing
JavaScript allows you to create interactive and responsive
web pages that allow a user to enter information. It’s also
great for building web-based apps.

93

GC2_p58-93_9781406366846_PI_UK.indd 93 25/02/2016 16:09

 o
Mi ssi n
3 BUILD AN APP
CREATE A BUTTON USING
JAVASCRIPT
PROGRAM YOUR WEB BROWSER
USING THE DOCUMENT OBJECT
MODEL (DOM) API
LEARN TO MAKE YOUR WEB PAGE
REMEMBER THINGS WITH THE
LOCALSTORAGE API
BUILD A TO-DO LIST APP

GC3_p94-133_9781406366846_PI_UK.indd 94 16/02/2016 10:44

 3
M ission Brief

Dear Coder,

You’ll be pleased to hear that ther

e are no more suspicious events
that the work you did for Dr Day to report. I think
has been a success and, unable to
page, the Bond Brothers have bee access our web
n thrown off our trail. Once agai
n you impress me!
My injured ankle has now healed.
We left the mountains yesterday
on the Trans-Siberian Railway to and are currently
Moscow. Our first class carriage
and I’ve been emailing my old and is very luxurious
dear friend, Mr Viktor Volkov of
Volkov. As you already know, the the House of
House of Volkov is where the Mon
so audaciously stolen from three k Diamond was
years ago. It is one of the oldest
jewellery houses in the world and and most respected
Mr Volkov was devastated by the
theft.
I have told Mr Volkov about our
discovery. At first he couldn’t beli
I convinced him and he wants us eve it! But finally
to return to Moscow with the diam
as possible. Already he is making ond as quickly
plans for a special exhibition. He
important jewel collectors from will invite the most
all over the world and announce
our discovery.
Mr Volkov needs help with planning
the exhibition. As we’re on the train
hoping once again you might be , I was
able to help. Is there any way you
list app? We can use the app to could build a to-do
keep track of all the different task
between now and the opening of s we need to do
the exhibition. I can be quite abse
having the app would be really usef nt-minded, so
ul.
If we don’t plan the exhibition prop
erly (and with maximum security)
the Bond Brothers might try to stea , I’m worried
l back the diamond. I’m attaching
about what needs to be done befo some notes
re the opening of the exhibition
from the Explorer’s Encyclopedia and also an entry
about the House of Volkov, which
the app. will help you build

Warmest regards from my comfort

able carriage,
Professor Harry Bairstone

GC3_p94-133_9781406366846_PI_UK.indd 95 16/02/2016 10:45

 The House of Volkov
From the Explorer’s Encyclopedia, the guide to every adventure

T HE E XPLORER ’ S Volkov diamonds redirects here.

ENCYCLOPEDIA
The Guide to Every Adventure
The House of Volkov is one of the world’s oldest jewellery houses, famous for its high
Home page quality diamond jewellery. It also has a world-renowned private collection of gems.
Contents
The House of Volkov was founded in St Petersburg in the 1790s. It was founded by
Featured discoveries
Famous explorers Vladimir Volkov, who became known as the Prince of Diamonds for his love of the
Historical expeditions most rare and valuable stones. The House of Volkov was appointed as the official

GC3_p94-133_9781406366846_PI_UK.indd 96 16/02/2016 10:45

 3

The Monk Diamond Special Exhibition

To-Do List
• Commission a state-of-the-art
unbreakable glass display case
• Order a new velvet cushion for
the diamond
• Hire private security
• Hire a bodyguard to protect
Mr Volkov
• Invite guests
• Buy diamond-themed snacks
and lemonade
• Buy dog biscuits for Ernest

jeweller of the Imperial Court, supplying the Russian nobility with beautiful jewellery
in intricate designs. The House of Volkov
Today the House of Volkov is located on one of the most exclusive streets in
Moscow, near to St Basil’s Cathedral. Volkov diamonds are still renowned for their
quality and are some of the most expensive in the world.
Viktor Volkov, the current owner, bought the Monk Diamond for an undisclosed sum
at auction. It was the centrepiece of the House of Volkov’s private collection. It was
displayed to the public in an antique glass case until it was stolen in a smash-and- Industry: Jewellers
Founded: 1794
grab robbery. The theft of the Monk Diamond remains unsolved. Since the robbery
Founder: Vladimir Volkov
the House of Volkov has reported a sharp drop in sales and there are rumours that Headquarters: Moscow
it might be sold. Mr Volkov said in a recent interview, “I would be devastated if the Area served: Worldwide
business, which has been in my family for generations, had to close.”

GC3_p94-133_9781406366846_PI_UK.indd 97 16/02/2016 10:45

 BUILDING A WEB-BASED APP
Planning the special exhibition for the Monk Diamond at the House of Volkov is going to be a big job for
Professor Bairstone, Dr Day and Mr Volkov. In this mission you are going to help them by building an app
that will run in your web browser. Professor Bairstone can use this app to create his to-do list. Once he’s
done a task, he can remove it from the list.
We’re going to need to learn some new JavaScript functions to build our app. At the moment the web
pages we’ve built don’t change after your browser has drawn them on-screen. Professor Bairstone is going
to want to add and remove items from his list, so our app needs to be more interactive. Let’s have a look at
what our app will look like:
To-Do List

The House of Volkov

Did you
Text box Special Exhibition To-Do List know?
Dog biscuits
Add item The best web browsers to use in
Button for adding
items to list Glass display case this mission are Mozilla Firefox and
Velvet cushion
Hire private security
Google Chrome. Not all browsers
Items removed Hire bodyguard will support the features you need
from list when Invite guests
Snacks and lemonade
to complete this mission.
clicked

Our app will have a text box that Professor Bairstone can type into. When he clicks on the button, the item
will be added to the list. When he’s completed a task, he can click on it and it will be removed. We can
code all these things using the JavaScript you learnt in Mission 2 with some new programming tools.

Building a text box and button

Before we start learning new JavaScript code, The <input/> tag allows you to create a HTML
let’s build the basic structure of our app. We element on your page where your user can enter
need a text box and a button. In Mission 2 you data. You use the type attribute to choose the kind
learnt how to use the <input/> tag and the type of element your user can add data to. So to create
attribute. We’re going to be using those skills again a text box and a clickable button on our page, we
in this mission. will need the following code:

98

GC3_p94-133_9781406366846_PI_UK.indd 98 16/02/2016 10:45

 To-Do List
3
<input type="text"/>
<input type="button"/>
Special Exhibition To-Do List

We also need to add some text inside the

text box and button, so the user knows what
action they perform. We do this by adding
a new value attribute to the <input/> tags:
To-Do List

<input type="text" value="Type here to add task"/>

<input type="button" value="Add item"/> Special Exhibition To-Do List

Type here to add task

Then we can change the CSS properties of our
Add item
<input/> tags to make them look a bit more
exciting. We do this with CSS classes, like we did
in Mission 1. But this time, rather than giving our
CSS class a name, we use the CSS type attribute To-Do List

selector to find and format our button. Let’s have

a look at the whole code block:
Special Exhibition To-Do List
<!DOCTYPE html>
<html>
Type here to add task
<head>
Add item
<title>To-Do List App</title>
<style>
input[type="button"] {
background-color: pink;
}
</style> This is the CSS type attribute selector. It finds
the selected type attribute and then formats it to
</head> your chosen CSS properties
<body> But if you try to type
<p>Special Exhibition To-Do List</p> into the text box
<br/> or click the button,
<input type="text" value="Type here to add task"/> nothing will happen.
<br/> If we want our button
<input type="button" value="Add item"/> and text box to work,
<br/> we need to add
</body> Type attribute some JavaScript to
</html> our page.

99

GC3_p94-133_9781406366846_PI_UK.indd 99 16/02/2016 10:45

 CODE SKILLS HOW TO BUILD A BUTTON

Let’s start making the app for Professor Bairstone by building a button.
Use <input/> tags to code a text box and button.

1. Open up your text-editing program. <!DOCTYPE html>

Create a new HTML file called <html>
app.html. Type this code into <head>
your new file: <title>To-Do List App</title>
</head>
2. Now use the <input/> tag to create <body>
a text box and button in your <body>. <p>Special Exhibition To-Do List</p>
Don’t forget that you need to include <br/>
two attributes inside your <input/> <br/>
tags: the type and value attributes. You <br/>
should set the value attribute to the text </body>
you want to display in your box and </html>
button. Your code will look like this:

<body>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" value="Type here to add task"/>
<br/>
<input type="button" value="Add item"/>
<br/>
</body> To-Do List A

3. Save your HTML file and open it in

your browser. You will see your box Special Exhibition To-Do List
and button displayed on-screen.
Type here to add task
Now create a CSS class and use the CSS Add item
type attribute selector to change the colour
of your button.

100

GC3_p94-133_9781406366846_PI_UK.indd 100 16/02/2016 10:45

 3
Making buttons run code
We now need to make the button in our app Let’s code a button that will call a function that
interactive. To make the button run JavaScript code pops up an alert when it’s clicked. First create the
when we click it, we need to add the onclick attribute JavaScript function you need. Then add the onclick
to our button <input/> tag, like we did in Mission attribute to the <input/> tag for the button. Finally
2. When the user clicks on the button, we want it to set the value of the onclick attribute to the name of
call a JavaScript function. All we have to do is set the function. Do this by using the equals sign (=)
the value of our onclick attribute to the name of the and double quotes (" "). The code we need looks
function we want to call. like this:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title> JavaScript
<script> function
function addItem() { Please don't
alert("Remember dog biscuits!"); forget my
} rations!
Alert
</script>
</head>
<body>
<p>Special Exhibition To-Do List</p>
<br/> Function
<input type="text" value="Type here to add task"/> name
Input tag <br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/> Onclick
</body> Button attribute
</html> To-Do List

Now when you

click on the button, Special Exhibition To-Do List
the onclick attribute calls the
JavaScript function and an alert Type here to Remember
add task dog biscuits!
pops up. Add item
OK

101

GC3_p94-133_9781406366846_PI_UK.indd 101 16/02/2016 10:45

 CODE SKILLS MAKING BUTTONS RUN CODE

Now practise using the onclick attribute to make a button that pops up an alert.
1. Open up your text-editing program. Create a new HTML file called button.html. Then copy and paste
your code from app.html into your new file. In your <body> add an onclick attribute that calls
a JavaScript function to your button, like this:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
</head>
<body>
<p>Special Exhibition To-Do List App</p>
<br/>
<input type="text" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
</body>
</html>

2. Add the <script> tag <head>

to your <head>. Create <title>To-Do List App</title>
a JavaScript function that <script>
will pop up an alert when function addItem() {
it’s called. Your code will alert("Hire security team!");
look like this: } To-Do List A

</script>
</head>
Special Exhibition To-Do List
3. Save your HTML file and
Type here to Hire security team!
add task
open it in your browser.
Add item
Your button will now pop OK

up an alert when you click on it.

102

GC3_p94-133_9781406366846_PI_UK.indd 102 16/02/2016 10:45

 3
THE DOCUMENT OBJECT MODEL (DOM)
The button and text box in our app now work. But to build the app we need to be able to change,
how will Professor Bairstone add and remove items delete or add new HTML elements after our
from his list? To allow him to do this we need to use browser has drawn the page on our screen.
the Document Object Model (or DOM for short). As we’ve seen as we’ve worked through
We learnt in Mission 1 that a HTML web page Mission 2, built-in functions such as the alert are
file is called a document. As you know, HTML very useful when we code. The DOM is a set of
documents are made up of lots of smaller pieces of built-in functions that work with your web browser.
HTML, called HTML elements. When we save our The built-in functions make it easy to build web
HTML file and run the code in our web browser, the pages that are dynamic, changing according to
browser draws the elements on-screen. If we want what the user does.

Programming interfaces
The DOM is an application program interface The alert function we used in Mission 2 is a
(or API). APIs help when you are coding. They built-in function. Rather than having to code an
are sets of built-in functions that you can easily use alert, we can just type the alert keyword and our
with your HTML and browser knows what to do. The DOM works in a
JavaScript code. very similar way. We can use the DOM’s built-in
functions to make changes to our HTML document
after it’s been drawn on-screen.
The DOM will Using the DOM lets us build web pages that
help make your change and react when the user does something.
app interactive. So if we want our to-do list to be interactive and
change on-screen when Professor Bairstone adds
a new task or checks one off, we need to use the
DOM’s methods and properties.

WORD APPLICATION PROGRAM INTERFACES (APIS) save lots of time when you are writing code,
CODE

because they allow you to use their built-in functions. Rather than having to write the
code for these functions yourself, you can use the API’s functions in your code. There are
APIs to do all sorts of things, from storing information to adding content to your page.

103

GC3_p94-133_9781406366846_PI_UK.indd 103 16/02/2016 10:45

 Using the DOM
The DOM API is structured in a special way called Using the DOM when you code allows you to
a “hierarchy“, which is a bit like a family tree. make changes to individual HTML elements after
This structure is called the document object. In the they have been drawn on-screen. You can use the
document object the individual HTML elements DOM’s methods and properties to find a HTML
are all connected to each other, like the members element on your page and then, using JavaScript,
of a family, with parents and children. The way add to it, remove it or change it.
the document object is structured allows you to If we want our app to be interactive, we need to
use another programming language, such as learn how to use these methods and properties with
JavaScript, to access, change, add or remove any JavaScript. Professor Bairstone needs to be able to see
of the HTML elements inside the document. his tasks on-screen and then add and remove items.

DOM methods and properties

Before you can use any of the DOM’s built-in document. Dot
functions, you have to tell your browser you want
to access the API. To do this you always have to DOM keyword
type this piece of code at the start of an instruction
for the DOM.
Once you’ve told your browser you want to use the DOM, you then have to say which DOM functions
you want to use. The DOM has built-in functions called methods and properties that allow you to change
HTML elements. A method is an action you can do, such as adding or removing a HTML element. A property
is a value that you can access and change, such as setting the contents of a HTML element to a piece of text.
When you want to use a method or property, you separate the DOM keyword from the DOM method
or property with a dot (.). Because the DOM lets you access any HTML element in your web page, lots of
DOM methods have the word “element” in them. In Mission 2 you used a DOM method with JavaScript
when you wrote this code:

document.getElementById("password");
Did you
Id attribute
notice?
DOM keyword Dot DOM method
When we use dots (.) to separate
Here we are telling our browser to use the DOM. pieces of code we are using dot
Then we are asking to use a DOM method called notation. The dot tells your browser
getElementById to find a HTML element. Finally, you will be using DOM methods
we’re directing our browser to find the HTML and properties.
element with that specific id attribute.

104

GC3_p94-133_9781406366846_PI_UK.indd 104 16/02/2016 10:45

 3
Changing your app with the DOM
We can use a DOM method to find a HTML element in our app by its id attribute. We can then use
a DOM property to change the contents of that element. Let’s take a look at how we do this.

Using the getElementById method

Method Id attribute you
The getElementById method is a very keyword want to find
DOM
handy way of finding a specific HTML
element in your block of code. To use document.getElementById("list");
the getElementById method, you have
to include the id attribute you gave to Here we have asked our browser to find the HTML
the HTML element in brackets after the element in our web page that has the id attribute set
keyword, like this: to the value “list“.

Using the innerHTML property

You can use the DOM’s innerHTML property to access or change the contents of a HTML element
in your app. You can then use the contents of the HTML element as a value in your JavaScript code.

HTML element
Variable

var showList = document.getElementById("list");

Alert alert(showList.innerHTML);
Id attribute
Here we have created a variable innerHTML you
where the value is set to the want to set
contents of the HTML element Turn over to see
that we have called “list“, using how you can use
the id attribute. We have then The DOM is case
sensitive. Make this method and
created an alert. The alert will property.
pop up the value of our variable. sure your capital
Our browser can access this letters are in the
information because we have right place.
set the innerHTML property of
the variable.

105

GC3_p94-133_9781406366846_PI_UK.indd 105 16/02/2016 10:45

 Let’s have a look at using the getElementById method with the innerHTML property to pop up an alert:

<!DOCTYPE html>
<html>
<head>
<title>List Alert</title>
</head>
Id attribute
<body>
<div id="list">Buy Ernest a new collar</div>
<script>
var showList = document.getElementById("list");
alert(showList.innerHTML);
</script> getElementById
</body> innerHTML method
</html> property

In this example we’ve used the List Alert

getElementById method to find the

<div> with the id attribute set to “list“.
You will remember <div> tags from Mission 1.
Buy Ernest a new collar
They are containers for pieces of content and you
can use them to divide your page into sections.
We’ve then stored the contents of that <div> Buy Ernest a new collar
in a variable. Then we’ve used innerHTML to set
the text in our alert to the value of our variable. OK
If the text in the <div> changes, so will the text
inside the alert box, without us having to write
any more code.

Pawsome
list!

106

GC3_p94-133_9781406366846_PI_UK.indd 106 16/02/2016 10:45

 3
CODE SKILLS METHODS AND PROPERTIES

Let’s have a go at using the getElementById method and the innerHTML

property to find and change the contents of a HTML element.
1. Open up your text-editing program. <!DOCTYPE html>
Create a new HTML file called <html>
methods.html. In your <body> use the <head>
<input/> tag to create a button. Also <title>Methods</title>
create an empty <div>, like this: </head>
<body>
2. Now create a JavaScript function in your <input type="button" value="Add item"/>
<head> that uses the getElementById <div id="container"></div>
method to find your empty <div>. Then </body>
use innerHTML to set the contents of your </html>
empty <div> to some text, like this:

<script>
function addItem() {
document.getElementById("container").innerHTML = "Item to remember";
}
</script>

3. Then make your button call your JavaScript function when it is clicked. Add the onclick attribute to
your <input/> tag and set the value of the onclick attribute to the name of your function, like this:

<input type="button" value="Add item" onclick="addItem();"/>

<div id="container"></div> Methods

4. Save your HTML file and open

it in your browser. You will see
a button. When you click on the Add item
button, the innerHTML text will
Item to remember
be added to your <div>.

107

GC3_p94-133_9781406366846_PI_UK.indd 107 16/02/2016 10:45

 Adding to your app using the DOM
We now know how to use the DOM’s methods and elements to our app. After all, Professor Bairstone
properties to find and change HTML elements in needs to be able to add items to the list. The DOM
our app, which will be really useful. We now need has two methods that we can use with JavaScript
to learn how to use the DOM to add new HTML to do this.

The createElement method

The createElement method is used to make a Method HTML element you

keyword want to create
new HTML element, such as a <div>, button DOM
or a paragraph. You have to include the
name of the type of HTML element you want document.createElement("div");
to create in double quotes (" ") and brackets
after the keyword, like this:
You can then use JavaScript to assign your new element to a variable, using the assignment operator
(=) we learnt about in Mission 2. Then you can use the innerHTML property to set the content of your new
element before your browser draws it on-screen.

The appendChild method

Create <div>
The appendChild method lets you add a <script>
new HTML element to an existing HTML var newDiv = document.createElement("div");
element. When the new element is drawn newDiv.innerHTML = "Professor Bairstone";
on-screen, it will be drawn underneath document.body.appendChild(newDiv); Set
the existing element. You have to include </script> innerHTML
Location appendChild
the HTML element you want to add in
brackets after the keyword, like this:

The appendChild and Did you

createElement methods notice?
allow you to add each All the DOM methods and properties
item to the list are written using camelCase.
in the app.

108

GC3_p94-133_9781406366846_PI_UK.indd 108 16/02/2016 10:45

 3
Let’s have a look at an example that uses the createElement and appendChild methods to create a
new HTML element on our page. The HTML element will be a <div> with a piece of text inside it. A
<div> is a useful way of creating a section or container for other HTML elements.

<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
</head>
Id attribute
<body>
createElement
<div id="list">To-Do List</div>
<script>
Variable Create <div>
var newItem = document.createElement("div");
newItem.innerHTML = "Item added to list";
document.getElementById("list").appendChild(newItem);
</script>
Add HTML
</body> appendChild element
</html>

To-Do List

The first thing we’ve done is code

a <div> and set its id attribute to list. This <div>
will be the HTML element we add our new HTML
element to, using appendChild. To-Do List
Item added to list
Then we’ve opened the <script> tag and
created a block of JavaScript code. In the first line
of JavaScript we have used createElement to make
a <div>. We have then stored this new <div> in
a variable called newItem. You can use any name
you want here.
In our next line of JavaScript, we’ve set the
value of our variable to a piece of text using the In our final line of JavaScript, we’ve used
innerHTML property. Our new <div>, stored in our getElementById to find the first <div> we
variable, now contains text. made using the id attribute. We’ve then used
appendChild to add the <div> stored in our
You wouldn't believe variable to the first <div> on our page.
how forgetful Professor When we run our code in our web browser,
we will see our new <div> has been added to
Bairstone can be! our first <div>.

109

GC3_p94-133_9781406366846_PI_UK.indd 109 16/02/2016 10:45

 CODE SKILLS ADDING NEW HTML ELEMENTS

Now it’s your turn to have a go at using the createElement and appendChild
methods. In your code, use the DOM and JavaScript to create a new HTML
element when an existing element is clicked. Using APIs like the DOM makes
building apps easier.
1. Open up your text-editing <!DOCTYPE html>
program. Create a new HTML <html>
file called newelements.html. <head>
Code a <div> (with an id <title>New Elements</title>
attribute) that contains text, </head>
like this: <body>
<div id="list">Click here to add item</div>
</body>
</html>

2. In your <head>, create a new <head>

function. Your code will look like this: <title>New Elements</title>
<script>
function addItem() {
}
</script>
</head>

3. Now make your function

create a new <div> using the <script>
createElement method. Store function addItem() {
your new <div> in a variable var newItem = document.createElement("div");
and give the variable a name. newItem.innerHTML = "New item";
Then set the value of your new }
<div> to some text using the </script>
innerHTML property. Your code
will look like this:

110

GC3_p94-133_9781406366846_PI_UK.indd 110 16/02/2016 10:45

 3
4. Add a final line to your function. Use getElementById to find the <div> in your <body>. Use the
appendChild method to add the new <div> to the <div> in your <body>. Your code will look like this:

<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = "New item";
document.getElementById("list").appendChild(newItem);
}
</script>

5. Now the only thing missing is the function call in the <body> of our code. Add the onclick attribute to
the <div> in your <body>, so that when the <div> text is clicked your addItem function is called. Your
code will look like this:

<body>
<div id="list" onclick="addItem();">Click here to add item</div>
</body>

New Elemen

6. Save your HTML file and

open it in your browser.
When you click on the Click here to add item
“Click here“ piece of text a New item
new <div> will be added to New item
New item
your app every time you click.
New item
New item
New item
But how do we
add the button to
the app?

Turn over to
find out!

111

GC3_p94-133_9781406366846_PI_UK.indd 111 16/02/2016 10:45

 MAKING THE TO-DO LIST APP
Now you know what the DOM is and how it works, let’s bring together all your new Code Skills and
create the to-do list app. At the start of the mission you learnt how to build a text box and button using
the <input/> tag. Let’s take a look at that code again:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
</head>
<body>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" value="Type here to add task"/> Text box
<br/>
<input type="button" value="Add item"/> Button
<br/>
</body>
</html>

To-Do List A

At the moment Professor Bairstone can type a

task into the text box, but when he clicks on the
Special Exhibition To-Do List
button nothing happens. We have to use the
DOM’s methods and properties to add an item
Type here to add task
to the list when the button is clicked.
Add item Let’s start with the changes we need to make
to our <body>. We need to add an onclick
attribute to our <input/> tag to make our button
work. This onclick has to call a function. We also
need to create an empty <div> that will become
our to-do list. When an item is added to the list, it
will be added to this empty <div> using the DOM
methods. Our <body> block will look like this:
s
Thing
tO
dO

112

GC3_p94-133_9781406366846_PI_UK.indd 112 16/02/2016 10:45

 3
<body>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
<div id="list"></div> <div>
Onclick attribute
</body>

Now let’s create a function in our <head> that will set the text inside our newItem variable. Finally we
run when the onclick is clicked. Our function needs need to use getElementById to find the <div> with
to use the createElement method to make a new the id attribute “list“ in our body. Then we can use
<div>. This new <div> will be stored in a variable appendChild to add our newItem to our list. Our
called newItem. Then we need to use innerHTML to <script> block in our <head> will look like this:

<script>
Create new <div>
function addItem() {
Set var newItem = document.createElement("div");
innerHTML of newItem.innerHTML = "New item";
new <div>
document.getElementById("list").appendChild(newItem);
} Add new <div> to
</script> Find id attribute <div> in <body>

To-Do List A
When we run this code in our browser the
button works. The text “New item” is added
to the list every time the button is clicked.
Special Exhibition To-Do List

Type here to add task

Add item Now to make
New item that text box
New item work!
New item
New item

113

GC3_p94-133_9781406366846_PI_UK.indd 113 16/02/2016 10:45

 Adding your own tasks
Our app is really starting to take shape. Now an We only need to change two lines in our code
item is added to the list every time the user clicks block to add the value of the text box to the list. The
the button. But Professor Bairstone can’t yet type an first thing we need to do is in our <body>. We need
item into the text box and add it to the list. Let’s see to give the <input/> tag for our text box an id
how we can allow him to type in his own tasks. attribute of our choice, like this:
Id attribute

<input type="text" id="box" value="Type here to add task"/>

We’re then going to change our JavaScript in the <head> so that it sets the innerHTML of the new <div>
to whatever value has been typed into the text box. To do that we have to use getElementById to find the
text box using the id attribute. We then access the value by making this change to our <script> block:

<script>
function addItem() { Id attribute
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
} Access value
</script>

To-Do List A Now Professor Bairstone can replace

the text in the text box with the item
he wants to add to his list. Our addItem
function will set whatever text is typed into the
Special Exhibition To-Do List
text box as the contents of the new <div>. He can
now add his own items to the to-do list.
Dog biscuits
Add item
Gosh! There are
Glass display case
Velvet cushion
so many things we
Hire private security need to do!
Hire bodyguard
Invite guests
Snacks and lemonade

114

GC3_p94-133_9781406366846_PI_UK.indd 114 16/02/2016 10:45

 3
Code Skills ch
ecklist

USING THE DOM API

The DOM (or Document Object Model) is an API (Application Program Interface).
When your HTML document runs in your web browser, it becomes part of the DOM
called the document object. The way the document object is structured allows you to
write code that will access and change individual HTML elements.
You can use the DOM’s built-in functions to make changes to HTML elements after
they have been drawn on your screen. This is important if you want to make an
interactive web page or web-based app that responds to the user.
To access the DOM you have to type the document keyword. You also have to use
dot (.) notation. Each new instruction for the DOM has to be separated by a dot.
You can use DOM methods and properties to make changes to your HTML elements.
getElementById is a DOM method that allows you to find a HTML element on your
page by its id attribute.
innerHTML is a DOM property. You can set the innerHTML
of any HTML element. Using innerHTML is a good way to set
or change the contents of a HTML element.
createElement is a DOM method that lets you create a new HTML
element. You have to tell your browser what type of element
you want to create.
appendChild is a DOM method that The DOM saves you
lets you add a new HTML element to lots of time and
an existing HTML element. makes it much easier
to create a dynamic
web page!

115

GC3_p94-133_9781406366846_PI_UK.indd 115 16/02/2016 10:45

 CODE SKILLS BUILDING THE BASIC APP

Let’s build a basic app. The app should have a text box and a button that Professor
Bairstone can use to add his tasks to the list. Use the DOM and JavaScript so that
when the button is clicked the task in the box will be added to the list.

1. Open up your text-editing program. Create a new HTML file called basicapp.html. Then copy and
paste your code from app.html into your new file. Modify your code so that the text box has an id
attribute of your choice, like this:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
Don’t forget
</head> to set the id
<body> attribute!
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item"/>
<br/>
</body>
</html>

2. Add an empty <div>

at the bottom of your <input type="button" value="Add item"/>
<body>. Give your <div> <br/>
an id attribute of your <div id="list"></div>
choice, like this:

3. Now add an onclick attribute to your button <input/> tag. Set your onclick to call a JavaScript
function. Your code will look like this:

<input type="button" value="Add item" onclick="addItem();"/>

116

GC3_p94-133_9781406366846_PI_UK.indd 116 16/02/2016 10:45

 3
4. Add an empty JavaScript <head>
function to your <head>. <title>To-Do List App</title>
Your <script> block <script>
needs to look like this: function addItem() {
}
</script>
</head

5. Now use the DOM to code a function called addItem that will create a new <div> when the button is
clicked. The function will then use innerHTML to set the value of the <div> to the value in the text box.
Finally the function will use appendChild to add the new HTML element to the <div> in your <body>.
Your code will look like this:

<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
</script>

6. Save your HTML file and To-Do List A

open it in your browser.

You will now be able to
replace the text in the text box with an item for Special Exhibition To-Do List
the list. When you click on the button, the item
typed into the text box will be added to the list.
Velvet cushion
Add item
Glass display case
Great work! I can
add all my tasks to
the list now!

s
biscuit
dog
117

GC3_p94-133_9781406366846_PI_UK.indd 117 16/02/2016 10:45

 Removing from the app using the DOM
You know how to use the DOM to find and
add HTML elements to your web page.
But what happens if Professor Bairstone Imagine if I added
makes a mistake and adds the wrong item that new pair of
to the to-do list? Or if he completes a task woolly socks I need to
and wants to remove it from the list? the list! Terrible!
We need to learn how to remove HTML
elements from our app using the DOM.

The removeChild method

The removeChild method does the opposite to the appendChild method. Rather than adding a HTML
element to another HTML element, it takes away a HTML element from another HTML element. You use it
just like appendChild. Select the HTML element you want to remove using the id attribute and then tell your
browser to remove it, like this:

Find parent HTML Remove child HTML

element element

document.getElementById("list").removeChild(this);

As you know already, HTML tags can be nested In the document object all elements are connected,
inside other HTML tags. When you like in a family tree. Any HTML element that is inside
use the removeChild method, another is called a child of that element. The HTML
you remove the HTML element element on the outside is called the parent. When
inside the HTML element you you use removeChild, you remove the child HTML
selected using the id attribute. element from the parent HTML element.
When you use the removeChild method you also
have to use a handy JavaScript keyword called
These new pieces “this“. The this keyword points to whichever HTML
of code are making element was used to call the function. Let’s take a
our app more and look at an example:
more interactive.

118

GC3_p94-133_9781406366846_PI_UK.indd 118 16/02/2016 10:45

 3
<!DOCTYPE html>
<html>
<head>
<title>Things To Buy</title>
<script> Argument
function removeItem(item) {
document.getElementById("list").removeChild(item);
}
</script>
</head>
<body>
<div id="list"> this keyword
Parent <div>
Velvet cushion for diamond
<div onclick="removeItem(this);">
Child <div>
Woolly socks
</div>
</div>
</body>
</html>

Things To
In this example, the first <div>, with the id attribute
“list“, is the parent element. The <div> nested
inside it, with the woolly socks text, is the child
Velvet cushion for diamond
element. When we click on the woolly socks text,
we’re using getElementById to find the <div> Woolly socks
called list.
Then we’re using the removeChild method
and the this keyword to remove this piece of text.
Just like we learnt in Mission 2, we have to pass
an argument for our function to work. We use
Things To
the argument “item“ and the “this“ keyword to
keep track of the HTML element we are trying
to remove. Professor Bairstone can now remove
things from the list by clicking on them. Velvet cushion for diamond

Silly Professor
Bairstone!
119

GC3_p94-133_9781406366846_PI_UK.indd 119 16/02/2016 10:45

 CODE SKILLS REMOVING A HTML ELEMENT

Let’s have a go at using the removeChild method and this keyword to remove
a HTML element.

1. Open up your text-editing program. Create <!DOCTYPE html>

a new HTML file called remove.html. Code a <html>
parent and a child <div> in your <body>. Set <head>
the id attribute of the parent <div>, like this: <title>Remove Items</title>
</head>
<body>
<div id="list">
Security to protect Mr Volkov
2. Now add a JavaScript function to your <head> <div>
that will remove the child <div> from your Woolly socks
page. The function will find the parent <div> </div>
using the getElementById method. It will then </div>
use removeChild to remove the <div> nested </body>
inside it. Your code will look like this: </html>

<script>
function removeItem(item) {
document.getElementById("list").removeChild(item);
}
</script>

3. Finally add an onclick attribute to the child 4. Save your HTML file and open it
<div>, so that when the text inside it is clicked, in your browser. When you click on
it will be removed from the list. The onclick the second item, it will vanish from
should call your function and use the this the screen.
keyword, like this:

<div onclick="removeItem(this);">
Woolly socks
</div>

120

GC3_p94-133_9781406366846_PI_UK.indd 120 16/02/2016 10:45

 3
Removing more than one HTML element
You’re making great progress! Now you can remove a HTML element using the removeChild method.
But what happens if Professor Bairstone wants to remove more than one item from his list? We need to use
the DOM and JavaScript so that all the items can be removed from the list when they’re clicked. To do this
we need to add an onclick attribute every time we use the createElement method. You can use a DOM
method to set the onclick by using the onclick keyword:
.onclick
We can then set our onclick to call a function that will
remove the item when it is clicked, like this:

<!DOCTYPE html>
<html> We need to get all
<head> these tasks checked
<title>To-Do List App</title> off the list!
<script>
function addItem() {
var newItem = document.createElement("div");
Onclick newItem.innerHTML = document.getElementById("box").value;
attribute set
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
}
function removeItem() {
document.getElementById("list").removeChild(this);
}
</script> removeItem
</head> function called
<body>
<p>Special Exhibition To-Do List</p>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<div id="list"></div>
</body>
</html>

In this example, we’ve created a new <div> using createElement. We’ve stored the <div> in a variable so
we can set its innerHTML to whatever item has been typed into the text box. We then use the DOM to set
the onclick attribute of the new item. When this item is clicked, it will call the removeItem function and the
item will be removed from the list.
121

GC3_p94-133_9781406366846_PI_UK.indd 121 16/02/2016 10:45

 CODE SKILLS REMOVING MORE THAN
ONE HTML ELEMENT
Use your new knowledge to make an app where more than one HTML
element can be removed when it’s clicked. Every new skill you learn is making
your app more advanced.
I've got a bone to pick
1. Open up your text-editing program. Create a with those Bond Brothers!
new HTML file called removemore.html. Copy All this planning!
and paste your code from basicapp.html. Your
code will look like this:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
</script>
</head>
<body>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
<div id="list"></div>
</body>
</html>

122

GC3_p94-133_9781406366846_PI_UK.indd 122 16/02/2016 10:45

 3
2. Now modify your addItem function in your <head> by setting up the onclick attribute in your function.
Add an onclick to every new HTML element. Make your onclick call a new function when it is clicked.
Add this new line of code to your <script> block:

<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
}
</script>

3. Code a second function in your <script> block called removeItem. The function needs to use
getElementById to find the <div> in your <body>. Then it should use removeChild and the this
keyword to remove any item the function calls. Type out this function so your <script> block
now looks like this:

<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
}
function removeItem() {
document.getElementById("list").removeChild(this);
}
</script>

I'm Viktor Volkov. It's great

to meet you. I can't tell you
how grateful I am for your
help. Your coding skills are
very impressive.
PTO

123

GC3_p94-133_9781406366846_PI_UK.indd 123 16/02/2016 10:45

 CODE SKILLS CONTINUED

4. Your finished code block for your app will look like this:

<!DOCTYPE html>
<html> This special
<head> exhibition is going
<title>To-Do List App</title> to be a blast!
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
}
function removeItem() {
document.getElementById("list").removeChild(this);
}
</script>
</head>
<body>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
<div id="list"></div> To-Do Li To-Do Li

</body>
</html> Special Exhibition To-Do List Special Exhibition To-Do List

Save your HTML file

Add item Add item
and open it in your Glass display case Glass display case
browser. You can now Velvet cushion Velvet cushion
Hire private security Hire private security
add and remove items Woolly socks Snacks and lemonade
Snacks and lemonade
from the list.

124

GC3_p94-133_9781406366846_PI_UK.indd 124 16/02/2016 10:45

 3
SAVING YOUR TO-DO LIST ITEMS
Professor Bairstone can now add and remove as many items as he needs from the list. But you might have
noticed that if you refresh your page, your to-do list disappears. This is because so far we’ve just added or
removed HTML elements from our screen. We haven’t saved the list or changed our HTML file. If we want
our browser to save and remember our list, we need to use localStorage, a handy API that’s available in
HTML5 (the fifth version of the HTML programming language).
This API lets you save information in your browser, so even if your page is refreshed or closed you
can still access the data. Like the DOM, localStorage is a collection of functions, and it’s simple to use.
All you have to do is tell your browser you want to use localStorage by typing the localStorage
keyword (written in camelCase) and giving a name to the information you want to store. Set the value
of the information you want to store using an equals sign (=) and double quotes (" "), like this:

localStorage keyword localStorage name Information stored

localStorage.storageName = "information"; Information

removed

If you want to remove a piece of information

from localStorage, you just leave an empty localStorage.storageName = "";
value, like this:
The Monk

Viewing the information you save using

localStorage is simple. All you have to do is use
the keyword and the localStorage name, like this:
The Monk Diamond
<!DOCTYPE html>
<html>
<head>
OK
<title>The Monk Diamond</title>
</head>
<body>
<script>
localStorage.valuableDiamond = "The Monk Diamond";
amond";
";
alert(localStorage.valuableDiamond);
</script>
</body> Keyword Name
</html>

125

GC3_p94-133_9781406366846_PI_UK.indd 125 16/02/2016 10:45

 CODE SKILLS USING THE LOCALSTORAGE API

Let’s have a go at using localStorage to store information in our web browser.

This way the list in Professor Bairstone’s app will be safely stored.
1. Open up your text-editing program. Create a new HTML file called storage.html. Type this code into
the <body> of your new file:

<!DOCTYPE html>
<html>
<head>
<title>Storage</title>
</head>
<body>
<input type="text" id="box" value="Type here to add task"/><br/>
<input type="button" id="save" value="Save" onclick="save();"/><br/>
<input type="button" id="load" value="Load" onclick="load();"/><br/>
Saved item: <div id="savedList"></div>
</body>
</html>

2. Now code a function in your <head> that uses localStorage to save the value typed into the text box in
your browser. Don’t forget to use camelCase when you write the localStorage keyword. Your code will
look like this:

<script>
function save() {
var newItem = document.getElementById("box").value;
localStorage.box = newItem;
}
</script> Don't forget to use
Google Chrome or
Mozilla Firefox for
this exercise.

126

GC3_p94-133_9781406366846_PI_UK.indd 126 16/02/2016 10:45

 3
3. Now code a second function in your <script> block that uses the getElementById method to find
your empty <div>. Use innerHTML to set the value of your empty <div> to the information you saved
using localStorage. Make sure your function looks like this:

<script>
function save() {
var newItem = document.getElementById("box").value;
localStorage.box = newItem;
}
function load() {
var savedDiv = document.getElementById("savedList");
savedDiv.innerHTML = localStorage.box;
}
</script>

4. Save your HTML file and open it in your browser.

Type something into the text box and click Save.

5. Now click Load. The value you typed into the text box will appear on-screen. Then refresh your page.
The item will disappear from your screen. But when you press Load, the text you saved using
localStorage will be loaded in your browser.
Storage Now that
is useful!

Invite guests
Save
Load Storage

Saved item:

Type here to add task

Save
Did you Load
notice? Saved item:
When writing the localStorage keyword we use Invite guests
camelCase. The first letter is lower-case and the
second word starts with an upper-case letter.

127

GC3_p94-133_9781406366846_PI_UK.indd 127 16/02/2016 10:45

 Saving and loading using localStorage
Now you know about localStorage, let’s look at how we can use it to save and load Professor Bairstone’s
app. Every time Professor Bairstone changes the to-do list, it needs to save in localStorage. We also need to
write code that will load the to-do list from localStorage when Professor Bairstone opens it in his browser.
Let’s take a look at the changes we need to make to our <script> block to use localStorage like this:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
saveList();
Save list function call
}
function removeItem() {
document.getElementById("list").removeChild(this);
Save list saveList(); List saved to
Save list function call
function } localStorage
function saveList() {
localStorage.storedList = document.getElementById("list").innerHTML;
Load list }
function function loadList() {
document.getElementById("list").innerHTML = localStorage.storedList;
}
</script>
</head>
<body>
<p>Special Exhibition To-Do List</p>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<div id="list"></div>
</body>
</html>

128

GC3_p94-133_9781406366846_PI_UK.indd 128 16/02/2016 10:45

 3
Saving the list

To save the list we need to create a new saveList to get the contents of the <div>. Everything in our
function that will save it using localStorage. To do <div> will now be saved in localStorage.
this, we have to choose a variable name to assign We want to save our list every time an item is
the information we want to store in localStorage. added or removed, so we also need to make sure
We then use getElementById to find the <div> in the addItem and removeItem functions call the
the <body> of our page. Finally we use innerHTML saveList function after they have run.

Loading the list

To load the list we need to create a second function. Whenever the loadList function is called, it will set
the innerHTML of the <div> with the id “list“ to whatever has been saved in localStorage.
We need to call our loadList function so that when our browser finishes loading, it loads our list too.
To make sure we don’t try to load a list that hasn’t been saved, we have to use an if statement before we
try to use localStorage. The if statement we need looks like this:

<div id="list"></div> The if statement checks if there is a list saved in

<script> localStorage before trying to load it. When we
if(localStorage.storedList) { save our complete code block and run our app
loadList(); in our browser, items we add to the list are now
} Load list saved even if we close and then reopen our file.
</script> function call

To-Do List A

Special Exhibition To-Do List

Without this
Invite guests
if statement our
saved list Add item

won't load. Glass display case

Velvet cushion
Hire private security

129

GC3_p94-133_9781406366846_PI_UK.indd 129 16/02/2016 10:45

 Removing from localStorage
There’s just one more thing we have to do to make our loadList function work properly. At the moment
when you use the to-do list app, you’ll be able to add and remove items by clicking on an item. But if you
load your saved list from localStorage, you won’t be able to remove an item when you click on it.
This is because we’re only saving the HTML elements into localStorage, not the onclick attribute that we
add when each element is created. We need to add the onclick attribute back to each of our list items, so
that the removeItem function still works after we load our list from localStorage. We need to add one final
piece of code to our loadList function in our <head>, so it looks like this:

function loadList() {
Code that document.getElementById("list").innerHTML = localStorage.storedList;
starts the for(var i = 0; i < list.children.length; i++) {
loop list.children[i].onclick = removeItem;
} Condition
} Code to run for loop
in loop

We’ve now added a loop to our loadList function.

This loop adds our onclick attribute to our WORD
A LOOP is a special piece of
CODE

removeItem function on every item that we load SJavaScript that runs the same
from localStorage. It counts up through each new piece of code again and again.
HTML element that we’ve added to our to-do list Programmers use them so they don’t
and sets the onclick attribute for each new element. have to type the same piece of code over
You will learn more about loops in Mission 5, and over.
but for now you should know that loops are split
into three parts.

A loop needs:
That's very
The code that starts the loop clever coding!
The condition to check if the loop
is allowed to run
Code that runs every time the
loop runs.

130

GC3_p94-133_9781406366846_PI_UK.indd 130 16/02/2016 10:45

 3
o
ssi n DO IT YOURSELF TASK
Mi

3 BUILD A TO-DO LIST APP

Now use all the new skills you’ve learnt in this mission to build the to-do list
app Professor Bairstone needs for the Monk Diamond special exhibition.
Use JavaScript with the DOM and localStorage APIs to make a to-do-list that
Professor Bairstone can add items to. Make sure that when he completes a
task he can click on the item to remove it from the list.

The To-Do List App Brief

When you code your app use HTML and JavaScript and the new APIs.
Make sure you include these things:

A function that adds an item to the list, using the DOM

A function that removes an item from the list, using the DOM
A function that saves the list, using localStorage
A function that loads the list, using localStorage
A text box the user can type the items into
A button that the user can click to add an item to the list
Save your file in your Coding folder and call it listapp.html.

Don't forget to
Turn over to see use the Get Coding!
the entire code website if you
block you need need help.
for your app !
131

GC3_p94-133_9781406366846_PI_UK.indd 131 16/02/2016 10:45

 <!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
saveList();
}
function removeItem() {
document.getElementById("list").removeChild(this);
saveList();
}
function saveList() {
localStorage.storedList = document.getElementById("list").innerHTML;
}
function loadList() {
document.getElementById("list").innerHTML = localStorage.storedList;
for(var i = 0; i < list.children.length; i++) {
list.children[i].onclick = removeItem;
}
}
</script>
</head>

This special exhibition

is going to be
fantastic. I can't wait!

132

GC3_p94-133_9781406366846_PI_UK.indd 132 16/02/2016 10:45

 3
<body>
<p>The House of Volkov</p>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
<div id="list"></div> To-Do List A

<script>
if(localStorage.storedList) {
loadList();
}
The House of Volkov
</script>
</body>
</html> Special Exhibition To-Do List
Dog biscuits
Add item

Glass display case

Now use CSS to Velvet cushion
change the design of Hire private security
Hire bodyguard
your app so it looks Invite guests
like this! Snacks and lemonade

FUTURE CODE SKILLS

Using APIs like the DOM and localStorage when you’re coding
with HTML, CSS and JavaScript allows you to create more complex
and interactive web pages or web-based apps. Now you can use
the DOM to access some powerful features in your browser.
It allows you to dynamically make changes to the HTML as your
user interacts with your page or app. Great work!

133

GC3_p94-133_9781406366846_PI_UK.indd 133 16/02/2016 10:45

 4
M ission Brief

Dear Coder,

You will be pleased to hear that

we have finally made it to Moscow
journey. We are currently lying low after a long train
at a secret location, as we want
Mr Volkov to know we’ve arrived no one but
in the city with the Monk Diamond
came to see us – he’s a charming . Mr Volkov
man. I’m so happy we’ve found his
lost jewel.
He and Professor Bairstone have
been extremely busy getting eve
for the exhibition. Your app has rything ready
been very helpful and so far eve
according to plan. There is only one rything is going
thing that Professor Bairstone and
haven’t thought of: how do we safe Mr Volkov
ly transport the diamond from our
to the House of Volkov? secret location

The Bond Brothers have been kno

wn to ambush and rob courier van
expensive jewellery in daring heis s transporting
ts. I’m sending you an entry from
Encyclopedia so you can see wha the Explorer’s
t I mean. We could deliver the diam
ourselves, but Professor Bairston ond to the shop
e is such a famous figure I’m wor
attention to ourselves and therefor ried we will draw
e the exhibition plans.
We’ve decided that the best thin
g to do would be for me to take
nearby Gorky Park. Mr Volkov’s the diamond to the
head of security will be waiting for
we will take the diamond to the me and together
House of Volkov, which is right nex
Cathedral. Would you be able to t to St Basil’s
help us by planning a route thro
be really helpful to have a web pag ugh the city? It will
e with a map embedded in it. It wou
we got lost or were duped by the ld be terrible if
Bond Brothers into going the wro
lost the Monk Diamond now! ng way. Imagine if we

Thank you for helping us again. Ever

ything is so nearly ready. We’ve
invitations for the exhibition prin just had the
ted and they are now ready to be
I’m sending you one too! sent to the guests.

Very best wishes from our city hide

away,
Dr Ruby Day

GC4_p134-151_9781406366846_PI_UK.indd 135 25/02/2016 15:51

 4
M ission Brief

Dear Coder,

You will be pleased to hear that

we have finally made it to Moscow
journey. We are currently lying low after a long train
at a secret location, as we want
Mr Volkov to know we’ve arrived no one but
in the city with the Monk Diamond
came to see us – he’s a charming . Mr Volkov
man. I’m so happy we’ve found his
lost jewel.
He and Professor Bairstone have
been extremely busy getting eve
for the exhibition. Your app has rything ready
been very helpful and so far eve
according to plan. There is only one rything is going
thing that Professor Bairstone and
haven’t thought of: how do we safe Mr Volkov
ly transport the diamond from our
to the House of Volkov? secret location

The Bond Brothers have been kno

wn to ambush and rob courier van
expensive jewellery in daring heis s transporting
ts. I’m sending you an entry from
Encyclopedia so you can see wha the Explorer’s
t I mean. We could deliver the diam
ourselves, but Professor Bairston ond to the shop
e is such a famous figure I’m wor
attention to ourselves and therefor ried we will draw
e the exhibition plans.
We’ve decided that the best thin
g to do would be for me to take
nearby Gorky Park. Mr Volkov’s the diamond to the
head of security will be waiting for
we will take the diamond to the me and together
House of Volkov, which is right nex
Cathedral. Would you be able to t to St Basil’s
help us by planning a route thro
be really helpful to have a web pag ugh the city? It will
e with a map embedded in it. It wou
we got lost or were duped by the ld be terrible if
Bond Brothers into going the wro
lost the Monk Diamond now! ng way. Imagine if we

Thank you for helping us again. Ever

ything is so nearly ready. We’ve
invitations for the exhibition prin just had the
ted and they are now ready to be
I’m sending you one too! sent to the guests.

Very best wishes from our city hide

away,
Dr Ruby Day

GC4_p134-151_9781406366846_PI_UK.indd 135 25/02/2016 16:06

 The Bond Brothers’ Robberies
From the Explorer’s Encyclopedia, the guide to every adventure

T HE E XPLORER ’ S For other jewel thieves, see Famous Jewel Thieves.

ENCYCLOPEDIA
The Guide to Every Adventure
The Bond Brothers’ Robberies are the audacious jewel thefts carried out by the
Home page gang of jewel thieves known as the Bond Brothers. The majority of the jewels taken
Contents
in their raids have never been seen again. Normally stolen jewellery is sold on the
Featured discoveries
Famous explorers black market soon after a theft, but the Bond Brothers are thought to have a top
Historical expeditions secret hiding place for their loot.

GC4_p134-151_9781406366846_PI_UK.indd 136 15/02/2016 16:37

 4

Mr V. Volkov requests the pleasure

of your company
at a very special exhibition hosted by
the House of Volkov
on 21 June at 7.00 p.m. at
the House of Volkov, near to
St Basil’s Cathedral, Moscow.
You are invited to meet guests of honour
Professor Bairstone, Dr Day
and Ernest
and to hear about the sensational discovery
made on their recent expedition.
U
RSVP

Interpol know that the gang has three core members, who are known only by their aliases: Light Fingers,
Gemma the Gem and Tony Twinkles. The three members are aided by other smaller crooks, who help them
choose their targets, make their escapes and hide the stolen jewels.
One of the gang is a skilled cyber-criminal, with access to government databases. In all their robberies the CCTV
cameras in the area surrounding the target are disabled during the period of the crime.
As well as stealing from expensive boutiques in smash-and-grab raids, the Bond Brothers have held up courier
vans or motorcycles delivering jewellery. They have disguised themselves as road workers and then used fake
road signs to direct the drivers into dead-end roads, before robbing them.
Their success seems to be due to the way they vary their tactics. No raid is ever the same, making it very hard
for the authorities to predict what they will do next.

GC4_p134-151_9781406366846_PI_UK.indd 137 15/02/2016 16:38

 ADDING CONTENT USING A WEB API
Now you’ve read the Mission Brief and know what Dr Day needs you to do, let’s get coding! This will
be a bit different to what you’ve done in the other three missions, but don’t worry. The great thing about
learning how to build web pages or apps that use the Internet is that you don’t always have to do the hard
work yourself.
It might sound a challenge to create a web
page with a map embedded in it, but we don’t
have to code the map from scratch. All we have to
do is write some code to call a URL on the Internet WORD When a new piece of

CODE
that has the map we need. Programmers call this

S
content is inserted into
integrating one web page with another.
an existing web page, we
When we want to integrate our web page with
say it has been EMBEDDED
another website, we have to write some code that
in the page. The embedded content
will connect our page to the web server that stores
becomes part of the page.
the other website. We can then access the data and
content on that server that we need.

Web APIs
You already know what an API is and have You can use web APIs for lots of different things
used two of them in Mission 3: the DOM and when you’re building a website. You might have
localStorage APIs. Those APIs let you access some come across some of these web APIs on websites,
handy built-in functions. APIs come in all shapes which help you do these things:
and sizes and the API that we need to embed a
map in this mission is slightly different to those we Add maps
have used already.
APIs used to integrate with other websites are Add Like or Share buttons for
sometimes called “web APIs” or “web services”. Facebook
They let you access a website’s built-in features and
Share videos on YouTube and Twitch
functions, so you can add extra content to your
page without having to write lots of code.

138

GC4_p134-151_9781406366846_PI_UK.indd 138 15/02/2016 16:38

 4
Web APIs let everyone build better and more Maps, which are run by Google and Microsoft.
complex websites quickly and easily. To embed a We’re going to learn how you can use Google
map and plan a route we are going to use a map Maps to find the best route for Dr Day and
web API. the House of Volkov’s head of security. You’ve
There are several websites on the Internet that probably used Google Maps before to look up an
let you embed their maps on your web pages. Most address, but this time you are going to learn how to
of them even let you do it for free. The most popular program your very own map and then embed it in
free map web APIs are Google Maps and Bing your web page.

Map web APIs

To use the Google Maps web API you have to register with Google and get a special piece of code
called an API key. An API key is a special password that your web page uses to access the Google Maps
API on the Google server. If you don’t use an API key you won’t be able to embed a map. You can get a
Google Maps API key by visiting:

https://developers.google.com/maps/documentation/embed/

An API key is a long piece of code made up

of letters and numbers. Every one is different,
but will look something like this:

Did you
know?
You need a Google account to get a Google
Maps API key. You have to be over 13 years old
to have a Google account. If you are under 13, Turn over to find
ask an adult if you can use their account with
out how to get your
their supervision, or if they can sign up on your
behalf. Make sure you, or the adult helping you,
own API key.
have read the terms and conditions. Go to
www.support.google.com to find out more.

139

Google and the Google logo are registered trademarks of Google Inc., used with permission.

GC4_p134-151_9781406366846_PI_UK.indd 139 15/02/2016 16:38

 CODE SKILLS GETTING A GOOGLE MAPS
API KEY
Let’s learn how you can get a Google Maps API key. You’ll need it later
in the mission to create the route for Dr Day.
1. Start by going to the Google Maps API website. Type this link into your browser:

https://developers.google.com/maps/documentation/embed/

2. Find the GET A KEY button. Click on it. Google Maps

3. You’ll see a pop-up with three options.

Click CONTINUE.

Google Maps

Google Maps

4. Now sign into a Google account. Remember

if you are under 13 you need to get an adult
to help you. You will be sent to the Google
Developers Console. Make sure you (if you are
over the age requirement), or the adult helping
you, have read the terms and conditions. You
need to agree to them in order to proceed. Then
select Create a new project from the drop-down
list and click Continue.

140

GC4_p134-151_9781406366846_PI_UK.indd 140 15/02/2016 16:38

 4
5. You will then be asked to create Google Maps

an API key. Don’t fill anything

in – just click Create.

Google and the Google logo are registered trademarks of Google Inc., used with permission.
6. Your API key will be displayed. It will
be a long code made up of numbers
and letters. They are all unique but it
will look a bit like this:
Google Maps

7. Now copy and paste your

API key into your text-editing
program. Save your file in
your Coding folder as a text file
(use the extension .txt). Call your
new file APIkey.txt.

Keep your API

key safe as you’ll
need it later in
the mission!
Coder, take note!
Some of these steps
might change as Google
updates its software.

141

GC4_p134-151_9781406366846_PI_UK.indd 141 15/02/2016 16:38

 HOW TO EMBED CONTENT
Now you know what embedding is and you’ve got an API key for Google Maps, we can start making
our web page for Dr Day. We first need to learn how to embed content from another website in our web
page. To do this we need to learn some new HTML tags and attributes.

The <iframe> tag: <iframe> and </iframe>

To add a Google Map to our page, we need to The first attribute you have to include is the
use a new HTML tag called the <iframe> tag. source (src) attribute, which we used in Mission 1.
The opening tag is <iframe> and the closing tag The source attribute tells your browser which piece
is </iframe>. The tag is used to create an inline of content you want to embed and is in the form of
frame, which is a really useful way of embedding a URL. When you are integrating your website the
content from another website in your page. You can information in the URL is very important for your
also use several attributes with the tag to change browser. Let’s take a look at an example with the
the way your embedded content displays. Monk Diamond Discovery page:

<!DOCTYPE html>
<html>
<head>
<title>Diamond Discovery</title>
</head> Source attribute
<body>
<iframe> <iframe src="https://www.monkdiamonddiscovery.com">
</iframe>
</body> URL
</html>
Diamond

The Monk Diamond Discovery

co
ov
v A small section of the Monk Diamond Discovery web page
Stolen Diamond Discovered in Siberia
beeria
that we provided as a URL will appear embedded in your
Professor Bairstone and Dr Day have made a sensational discovery.
They have discovered the Monk Diamond in a remote cave in Siberia.
page. However it’s quite hard to see the embedded page at
this small size. You need to include some other attributes inside
your opening <iframe> tag to change the size, shape and
The Monk Diamond

Fact File
Carats: 300
Colour: Green
Value Over £10 million
appearance of the embedded page. Let’s take a look at all the
attributes you can use:

142

GC4_p134-151_9781406366846_PI_UK.indd 142 15/02/2016 16:38

 4
Attribute name What does it do? Example values

Provides the URL for the piece of content

src http://www.bing.com
you want to embed

width Sets the maximum width of the <iframe> 600px; 20%

Sets the maximum height of the

height 600px; 20%
<iframe>
Sets the width of the border around the
frameborder 0px; 4px
<iframe>
Sets the style of the <iframe> using
style border: 0px
a CSS property and value

Now let’s see how we can use all these attributes to change the appearance of our <iframe> and
embedded content. Remember you always have to add attributes inside your opening tag, like this:
Diamond

<!DOCTYPE html>
<html>
The Monk Diamond Discovery
vee
<head>
<title>Diamond Discovery</title> Stolen Diamond Discovered in Siberia!!

Professor Bairstone and Dr Day have made a sensational discovery.

</head> They have discovered the Monk Diamond in a remote cave in Siberia.
Professor Bairstone's dog, Ernest, sniffed out the diamond.

The jewel was stolen three years ago from the House of Volkov.
The prime suspects in the theft were the Bond Brothers.

<body> The team thinks the diamond had been hidden by the thieves.
They sent this photo from their camp:

Width attribute The

Th Monk Diamond

<iframe V
Fact File
Carats: 300
Colour: Green
Value Over £10 million

width="350px" Frameborder
attribute
Height height="350px"
attribute frameborder="0px" Here we’ve set the width and height
Style attribute
style="border: 0px" attributes to the same number of
src="https://www.monkdiamonddiscovery.com"> pixels to make our <iframe> into
</iframe> a square. The frameborder attribute
</body> and the CSS border property have
</html> both been set to 0 pixels. This is so
the <iframe> will blend into the
Useful thing, this page. You normally do this with an
<iframe> tag!
<iframe>, so that the embedded
content looks like it is part of
your page.

143

GC4_p134-151_9781406366846_PI_UK.indd 143 15/02/2016 16:38

 CODE SKILLS USING THE < IFRAME > TAG

Now you’ve read about the <iframe> tag and how it works, let’s have a go
at using the tag and its attributes to change the way a piece of embedded
content displays in a web page.

1. Open up your text-editing program. Create a 3. Finally add the source attribute. Set its value to
new HTML file called iframe.html. Add the the URL of your favourite website, like this:
opening and closing <iframe> tags to the
<body> of your page, so the code in your new <iframe
file looks like this: width="350px"
height="350px"
<!DOCTYPE html> frameborder="0px"
<html> style="border: 0px"
<head> src="https://www.bing.com">
<title>iFrames</title> </iframe>
</head>
<body> 4. Save your HTML file and open it in your
<iframe> browser. Your chosen site will be
</iframe> embedded in your web page.
</body> Now try changing the height and
</html> width of your <iframe> and seeing what
it does to the embedded content.
2. Now set the attributes of your <iframe>. Include
the width, height, frameborder and style attribute
inside your opening <iframe> tag, like this:

<body>
<iframe I really like this
width="350px" way of embedding
height="350px" new content in
frameborder="0px" our page.
style="border: 0px">
</iframe>
</body>

144

GC4_p134-151_9781406366846_PI_UK.indd 144 15/02/2016 16:38

 4
EMBEDDING A GOOGLE MAP
As you can see, the <iframe> tag is really useful. search. You use a Google API called the Google
Let’s learn now how we can integrate a Google Maps Embed API. When the user gives the API a
Map into our page using it. The simplest kind of keyword, such as the name of a country, city or
Google Map you can add is called an embedded street, it will produce a map based on that keyword.

URLs
The Google Maps Embed API needs you to provide it with a URL in the source attribute of your
<iframe>. The URL has to contain several important pieces of information so the correct map is
embedded. Let’s have a look at exactly what information we need to include in a URL if we want
to embed a map of Moscow in our web page: API key

https://www.google.com/maps/embed/v1/search?q=Moscow&key=API-KEY

Path Search API function Query string parameters

WORD A STRING is a piece of data

The first part of the URL is the path to the Google
CODE

Maps Embed API. You then have to tell that API in the form of a sequence of
what built-in function you want to use. We want to characters. Strings can be made
use the search API function on the Google server, up of words and numbers.
so we add that to the URL. The next piece of A PARAMETER is another name for a piece of
information is the specific part of our request, information, or an argument, that is passed
called the query string parameters. to a function so it can perform an action.

string parameters

The string parameters are the parts of a URL that in a certain way, so the Google server is able to
contain variables – the pieces of information that access information stored in our variables. The two
depend on the user. In our example there are two parts of the query string parameters are the key
parameters. The two variables are the map we are and the value. You need both of these parts for
searching for (Moscow) and our unique API key. your parameters to work. Turn over to see the URL
We have to structure our query string parameters for the map of Moscow.

145

GC4_p134-151_9781406366846_PI_UK.indd 145 15/02/2016 16:38

 https://www.google.com/maps/embed/v1/search?q=Moscow&key=API-KEY

Key Value Key Value

In this URL the two parameters are separated by an ampersand (&). The first is the query key and the
second is the API key. Your browser needs them both because they contain this important information:

Parameter key What does it do? Example value

q Gives the location you want to search for Moscow; London

Gives the API key needed to access the

key API-KEY
Google server

The Google Maps Embed API needs these two

Moscow
parameters to find the map we want to embed and
then to integrate it into our page. Let’s see what
happens if we use these two parameters in our URL
and set it as the source attribute for our <iframe>.
When we save our file and open it in our browser, we
will see a map of Moscow embedded in our page.

<!DOCTYPE html>
<html>
<head>
<title>Moscow</title>
</head>
<body>
<iframe
width="450px"
height="450px"
frameborder="0px"
style="border: 0px"
src="https://www.google.com/maps/embed/v1/search?q=Moscow&key=API-KEY">
</iframe>
</body>
</html>

146

GC4_p134-151_9781406366846_PI_UK.indd 146 15/02/2016 16:38

 4
CODE SKILLS EMBED A GOOGLE MAP

Let’s embed a Google Map for Moscow in a page. It’s an important skill to
master before we plan our route for Dr Day and the head of security.
1. Open up your text-editing program. Create a 2. Now add the width, height, frameborder and
new HTML file called citymap.html. Then copy style attributes inside your opening <iframe>
and paste your code from iframe.html into tag. Set the values, like this:
your new file. Modify it so that it looks like this:
<body>
<!DOCTYPE html> <iframe
<html> width="450px"
<head> height="450px"
<title>City Map</title> frameborder="0px"
</head> style="border: 0px">
<body> </iframe>
<iframe> </body>
</iframe>
</body>
</html>

3. Add the source attribute inside your opening <iframe> tag. Use the Google Maps Embed API URL and
add the two parameters. Set the parameter “q“ to the location you want for your map and the parameter
“key“ to your unique API key that you got earlier in the mission. Your source attribute will look like this:
city Map
<iframe
width="450px"
height="450px"
frameborder="0px"
style="border: 0px"
src="https://www.google.com/maps/embed/
v1/search?q=Moscow&key=API-KEY">
</iframe>

4. Save your HTML file and open it in your browser.

You will see your map embedded in your page.

147

GC4_p134-151_9781406366846_PI_UK.indd 147 15/02/2016 16:38

 PLAN A ROUTE USING GOOGLE MAPS
Now we know how to embed a map in our page, We need to use the directions function, rather
we can start planning the route Dr Day and the than the search function. The directions function will
head of security need to take through Moscow. create a map that gives a route from a specified
To do this, we need to build a new URL and use a location to another specified location. Dr Day needs
new function in the Google Maps Embed API. We to take the Monk Diamond from Gorky Park to St
have to create our URL in a slightly different way. Basil’s Cathedral, so our new URL will look like this:

Directions API function

Path
String parameters
https://www.google.com/maps/embed/v1/directions?
origin=GorkyPark,Moscow&destination=StBasil,Moscow&key=API-KEY

Like before, the first part of our URL is the path to the Google Maps Embed API. We then request to use
the directions API function. Then we use three parameters: the origin, destination and API key. For the
origin and destination you can put lots of different values, but the simplest thing to do is put the place
name followed by the city name. These two new keys are important for your browser as they provide the
following information:

Parameter key What does it do? Example value

Gives the place you want your

origin GorkyPark,Moscow
route to start
Gives the place you want your
destination StBasil,Moscow
route to end

Did you
notice?
We’ve included the name of the I can't wait to
site and the city, separated by a see St Basil's
comma (,). There is no space after Cathedral!
the comma.

148

GC4_p134-151_9781406366846_PI_UK.indd 148 15/02/2016 16:38

 4
Let’s add our new URL to our source attribute and see the route Dr Day and the head of security need
to take through Moscow:

<!DOCTYPE html>
<html>
<head>
<title>Top Secret Route</title>
</head>
<body>
<iframe
width="650px"
height="650px"
frameborder="0px"
style="border: 0px"
src="https://www.google.com/maps/embed/v1/directions?
origin=GorkyPark,Moscow&destination=StBasil,Moscow&key=
API-KEY">
</iframe>
</body>
Top Secret
</html>

This is exactly
what Dr Day needs
to get the Monk
Diamond safely
to the House of
Volkov!

149

GC4_p134-151_9781406366846_PI_UK.indd 149 15/02/2016 16:38

 o
ssi n DO IT YOURSELF TASK
Mi

4 PLAN A ROUTE

Great work! You’ve learnt how to use a web API and Google Maps to embed
content in your page. Now use your new knowledge to plan a route through
Moscow, from Gorky Park to St Basil’s Cathedral. Having a route will help
Dr Day keep the Monk Diamond safe.

Moscow Route Planning Brief

When you plan your route, use your new Code Skills to do the following things:

Use an API key: use the Google Maps Embed API to get an API key.
Create an <iframe>: use this new HTML tag so you can embed content
in your page.
Change the way your <iframe> displays: use attributes to change the
height, width and borders of your <iframe>.
Use the source attribute: embed a URL that will connect to the web API
you need.
Use the Google Maps Embed API: create a Google Map using the
Google API.
Use the built-in direction function: plot a route using this function.
Set query string parameters: give the destination function the origin and
destination for your route.
Save your file in your Coding folder and call it route.html.

150

GC4_p134-151_9781406366846_PI_UK.indd 150 15/02/2016 16:38

 4

<!DOCTYPE html> Don’t forget to

<html>
use your saved
<head>
<title>Top Secret Route</title>
API key.
</head>
<body>
<iframe
width="1000px"
height="1000px"
frameborder="0px"
style="border: 0px"
src="https://www.google.com/maps/embed/v1/directions?
origin=GorkyPark,Moscow&destination=StBasil,Moscow&key=API-KEY">
</iframe>
</body>
</html>
FUTURE CODE SKILLS
Knowing how to use web APIs means you can easily include
features from other apps or websites in your code. You can use
them to build pages and apps that use big web services, such
This is what your as social networks like Facebook or Instagram, or utilities like
finished code will Google Maps or Dropbox. This will save you time and stop
look like! you having to code functions from scratch.

This route will stop

the Bond Brothers
and keep the Monk
Diamond safe!

151

GC4_p134-151_9781406366846_PI_UK.indd 151 15/02/2016 16:38

 o
Mi ssi n
5 MAKE A GAME

USE TIMERS IN JAVASCRIPT

LEARN WHAT GAME LOOPS ARE
AND HOW THEY WORK
LEARN HOW TO ANIMATE HTML
ELEMENTS WITH JAVASCRIPT
BUILD A GAME THAT TESTS
REACTION TIMES

GC5_p152-p187_9781406366846_PI_UK.indd 152 15/02/2016 16:26

 5
M ission Brief

Dear Coder,

The Monk Diamond arrived at the

House of Volkov yesterday. Dr Day
both so grateful for your help with and I are
planning the route. All seemed to
although Dr Day did think a bearded go smoothly,
man, wearing a large hat, might
following them. He vanished quic have been
kly, but she was slightly alarmed
the diamond arrived safely. . Thank goodness

It’s been positioned in its new glas

s case, on its new cushion, and it
We’ve just been arranging the snac looks dazzling!
ks on silver platters, which was the
our list. Everything is now ready final task on
for the grand opening of the exh
ibition tonight.
Between you and me, ever since
the incident with the boulder I have
about our security arrangements. been worried
I know we have been very careful
the discovery of the Monk Diam to keep
ond a secret and you did a great
password for our web page. But job creating a
I am worried the Bond Brothers
our trail (don’t forget we think one might still be on
of them is a skilled cyber-criminal).
fear is that they could sabotage My biggest
the exhibition by stealing the diam
ond again.
An old pal in London, who works
for one of the city’s most famous
recently told me she has trained museums,
a superb new security team usin
game. I didn’t believe her until she g a computer
showed me the data. The game
team’s reaction times significant sharpened the
ly, and they responded to suspiciou
at the museum far more quickly s circumstances
than they had before they played
the game.
I was wondering if you could help
me by building a game that will test
times of the House of Volkov’s secu the reaction
rity team? I’m tied up this afterno
need to buy Ernest a new collar, on, as I still
so I was really hoping you could
one of my private entries on the help. I’ve attached
Explorer’s Encyclopedia. It contain
information about the exhibition, s sensitive
so please don’t share it with anyo
ne.
Thank you again for your excellen
t help. Warmest wishes from bust
Professor Harry Bairstone ling Moscow,

GC5_p152-p187_9781406366846_PI_UK.indd 153 15/02/2016 16:27

 Security Training
Game Results

The House of Volkov’s Security Team

From the Explorer’s Encyclopedia, the guide to every adventure

T HE E XPLORER ’ S This is a private entry with restricted access. To view the public entry for the
ENCYCLOPEDIA House of Volkov click here.
The Guide to Every Adventure

Home page The House of Volkov’s Security Team is responsible for protecting the highly
Contents valuable jewels on display in the House of Volkov’s private collection.
Featured discoveries
Famous explorers Since the theft of the Monk Diamond, the jewels on display in the shop are kept in
Historical expeditions locked cases. The reinforced glass is 200 times stronger than normal glass.

GC5_p152-p187_9781406366846_PI_UK.indd 154 15/02/2016 16:27

 5

The security Tra

ining
Game Rules
Every second, 6
people will
be shown on-scre
en
5 will be guests
1 will be a thief

If you click on th
e thief,
you gain 1 point

If you click on a
guest,
you lose 2 poin
ts
This happens 6
times in total
The aim of the g
ame is to spot
all 6 thieves an
d score 6 points

In light of the theft, the owner Viktor Volkov has trained his security team to be on the alert for any customers
behaving suspiciously. In the last year several petty crooks have been caught trying to unlock the display cases
with skeleton keys.
The special exhibition Mr Volkov is hosting for the Monk Diamond will be the most high-profile event ever held by
the House of Volkov. Mr Volkov decided to consult Professor Bairstone about the security strategy for the opening
night of the exhibition.
The Bond Brothers have used disguises in past robberies and Mr Volkov and Professor Bairstone are worried that
members of the gang, or their associates, might try to infiltrate the exhibition by posing as guests.
The agreed strategy is to use the method developed for museums in London by Professor Li. A computer game
with a simple set of rules has proved to be an effective way of sharpening the reaction times of members of a
security team.
The game needs to be built urgently so the team are properly trained before the opening of the special exhibition.

GC5_p152-p187_9781406366846_PI_UK.indd 155 15/02/2016 16:27

 BUILDING A GAME
It's going to be a rush
Now you’ve read the brief for Mission 5 you’re to get the game built
ready to start building your game. This mission in time, so start coding
works in a slightly different way to the missions you quickly!
have completed so far. You are going to build the
game as you work through the mission. Follow
the step-by-step instructions and copy the code
and you’ll have the game ready for Professor
Bairstone in no time.

1. Create a HTML file

Just like in all the other missions, the first thing we
need to do is create a new HTML file. Call your new <!DOCTYPE html>
HTML file securitygame.html. Copy this code into <html>
your text-editing program: <head>
<title>Security Game</title>
</head>
Save your HTML file in your <body>
Coding folder on your desktop. </body>
</html>

2. Build the game board

Now we need to build the basic structure of our game. We need to code a game board in our web page.
The game board will be the area in our browser where the game will work. When the security team play
the game, the guests and thief will appear on the game board.
Add your game board by coding an empty
<div> in the <body> of your page. Add an <body>
id attribute to your <div>. Your <body> code <div id="board">
will look like this: </div>
</body>
Id attribute

156

GC5_p152-p187_9781406366846_PI_UK.indd 156 15/02/2016 16:27

 5
Then in your <head> add a CSS class that will
change the look of your <div>. Use a CSS selector, The game board needs:
called the id selector, to find your <div> by its id
attribute. CSS selectors are an easy way to select A 1px solid black border
various groups of elements to style. Using the CSS
A grey background
id selector is simple. All you have to do is create a
class name using a hash (#) and the id attribute of A height of 350px
the HTML element you want to change.
A width of 650px
Create a CSS class called board that sets the CSS
properties and values of your <div> to these things.
The code for the CSS class in your <head>
needs to look like this:
This is like the CSS
<head> element selector in
<title>Security Game</title> Mission 1 or the CSS
<style> type attribute selector
#board { in Mission 3.
CSS id border: 1px solid black;
selector
background-color: gray;
height: 350px;
width: 650px;
}
</style>
</head>

Save your HTML file and open

it in your browser. You will
Security Ga
see your empty game board
displayed on-screen.

Great work!

157

GC5_p152-p187_9781406366846_PI_UK.indd 157 15/02/2016 16:27

 3. Add a button
Now we have a game board, we should add a button to our page. When the player clicks the button,
the code for our game will run and the game will start.
Add your button above the <div> in your <body>. Create the button like you did in Mission 3, using
the <input/> tag and type and value attributes. Set the onclick attribute of your <input/> tag to call a
JavaScript function called startGame that will start the game. The code for your button will look like this:

<input type="button" value="Play" onclick="startGame()";/>

Now create the startGame function that your button <script>

will call when it’s clicked. Add the function underneath function startGame() {
the <div> in your <body>. Your <script> block will }
look like this: </script>

The complete code

block in your text- <!DOCTYPE html>
editing program will <html>
now look like this: <head>
<title>Security Game</title>
<style>
#board {
border: 1px solid black;
You're becoming background-color: gray;
a real coding height: 350px;
whiz! width: 650px;
}
</style>
</head> Button Function call
<body>
<input type="button" value="Play" onclick="startGame()";/>
<div id="board">
</div> JavaScript function
<script>
function startGame() {
}
</script>
</body>
</html>

158

GC5_p152-p187_9781406366846_PI_UK.indd 158 15/02/2016 16:27

 5
Save your code and open it in your Security Ga

browser. You will see your button on-screen.

At the moment when you click
Play
it, nothing will happen.
We need to add
some code to our
startGame function.

Let's get that

button working!

4. Create a JavaScript timer

Our game is going to test the reaction times of the security team at the House of Volkov. For our game
to work, we need to learn how we can use JavaScript to run a piece of code again and again, after a
certain period of time has passed. This is called a timer.
JavaScript has a built-in timer function called setTimeout, which allows you to call a function after
a given amount of time has passed. All you have to do is give the setTimeout function the name of the
function you want to call and the amount of time as arguments. As you know from Mission 2, you pass
a function an argument by putting the argument in brackets. This time we are passing the function two
arguments. Let’s take a look at how you would use setTimeout to call a function after a certain time.
In this example the
Function to call Amount of time to
gameTimer function will be call it after
setTimeout
called after 1 second, or function
1,000 milliseconds. setTimeout(gameTimer, 1000);

Did you
notice?
Turn over to
You have to use milliseconds with the setTimeout function. practise using
There are 1,000 milliseconds in a second. To work out the the setTimeout
number of milliseconds you need, multiply the number of function!
seconds by 1,000. So if you wanted your function to be
called after 3 seconds, you would multiply 3 by 1,000.

159

GC5_p152-p187_9781406366846_PI_UK.indd 159 15/02/2016 16:27

 CODE SKILLS USING THE SET TIMEOUT FUNCTION

JavaScript timers, such as the setTimeout function, are very useful for building
games. Let’s have a go at using the setTimeout function, so you know how it
works and can add it to your game later in the mission. Let’s code a program
that counts up a number every second.
1. Open up your text-editing program. <!DOCTYPE html>
Create a new HTML file called <html>
timers.html. Type out this code: <head>
<title>Timers</title>
</head>
<body>
<div id="number">
</div>
</body>
2. Now add the <script> tag to your </html>
<head>. Inside your <script> block create
a variable and set its value to 0 using the
assignment (=) operator, like this: <head>
<title>Timers</title>
<script>
3. Now create a function called updateCount. var count = 0;
Every time the function is called it will use the </script>
addition operator (+) to add 1 to the value </head>
of your variable. Then use getElementById
and innerHTML to find
your empty <div> and <script>
set the contents to the var count = 0;
variable. Your code will function updateCount() {
Add 1 Update screen
look like this: count = count + 1;
document.getElementById("number").innerHTML = count;
}
</script> Find <div>

160

GC5_p152-p187_9781406366846_PI_UK.indd 160 15/02/2016 16:27

 5
4. Now we need to add a function <body>
call to our <body>. Add the <div id="number">
function call like this: </div>
<script>
updateCount();
</script>
</body>

5. Finally we have to add a timer that will call our function every second to our <script> block.
We need to use the setTimeout function. We have to pass the function name and the number of
milliseconds to the setTimeout function as arguments. Our <script> block will look like this:

<script>
var count = 0;
function updateCount() {
count = count + 1;
document.getElementById("number").innerHTML = count;
setTimeout(updateCount, 1000);
}
</script> Call updateCount
in 1 second

Save your HTML file and open it in your browser. You will see your timer in action. The setTimeout
function will call your updateCount function every second. The function will run and every second
1 will be added to the value of your variable. The number in your browser will update automatically.

Timers

How are we going

20 to use this skill to
build the game?

Timers

21

That's rather clever.

I'm impressed!

161

GC5_p152-p187_9781406366846_PI_UK.indd 161 15/02/2016 16:27

 5. Create a game loop
Games are one of the most difficult things you can player has done something, draw a HTML element
code and there are many different ways you can on your screen and run the code for the game.
build them. A popular way is to use a game loop. We can use the setTimeout built-in function
You used a loop in Mission 3 and we are going to to create a game loop. We need to add a new
need to learn more about them to build our game. function to our <script> block that pops up an alert
A game loop is a JavaScript function that gets every 3 seconds. Let’s call this function gameLoop.
called over and over again while your game is This new function will be called when our button is
running. You can use a game loop to check if a clicked. Let’s take a look at our code block:

<!DOCTYPE html>
<html>
<head> I wonder if I could sniff
<title>Security Game</title> out the Bond Brothers?
<style> I've got a very good nose.
#board {
border: 1px solid black;
background-color: gray;
height: 350px;
width: 650px;
}
</style>
</head>
<body>
<input type="button" value="Play" onclick="startGame()";/>
<div id="board">
</div>
<script>
function startGame() {
gameLoop(); Function call
Function }
function gameLoop() {
Alert
alert("Game over!");
setTimeout(gameLoop, 3000);
}
Timer
</script> Number of
milliseconds
</body>
</html>

162

GC5_p152-p187_9781406366846_PI_UK.indd 162 15/02/2016 16:27

 5
Once you have made these changes, save Security Ga

your code and open it in your browser.

When you click your button and call your
Play
startGame function, the game loop will
start to run. Your gameLoop Game over!
function will be called every
3 seconds and every time an
alert will pop up. Every OK

time it pops up, press OK

so it keeps popping up.

Great start to the

mission! But where’s
the thief?

6. Add the guests and thief to the game board

Now you’ve coded your game board, button and
game loop, we need to add the characters to our
game. We want six different characters to flash on- Let's get these
screen in different places every second. Five of the characters coded!
characters will be guests; one character will be
a thief. The security team will test their reaction
times by trying to click on the thief when he
flashes on-screen. <div id="board">
Let’s start creating the characters on our game <div>1</div>
board. Each character needs its own <div>. Create <div>2</div>
six <div> tags nested inside your game board <div>3</div>
<div> and number them 1 to 6, like this: <div>4</div>
<div>5</div>
<div>6</div>
</div>

163

GC5_p152-p187_9781406366846_PI_UK.indd 163 15/02/2016 16:27

 Save your code and refresh your
Security Ga
page. You will see your six <div>
tags on your game board,
like this: Play

1
2
3
Now let’s use CSS to change the design and 4
layout of our <div> tags. Let’s create a CSS class 5
6
called character that will make our <div> tags
square blue boxes. In your text-editing program,
add this new CSS class to the <style> tag in
your <head>. Your complete <style> block will
now look like this:

<!DOCTYPE html>
<html>
Did you
<head> notice?
<title>Security Game</title>
<style> We have used the float CSS property.
#board { This will make our <div> tags align
border: 1px solid black; with one another.
background-color: gray;
height: 350px;
width: 650px;
}
.character {
New CSS
class background-color: lightblue;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
}
</style>
</head>

164

GC5_p152-p187_9781406366846_PI_UK.indd 164 15/02/2016 16:27

 5
Then apply your new character CSS class to each of your six <div> tags using the class
attribute, like you did in Mission 1. Your <body> will look like this:

<body>
<input type="button" value="Play" onclick="startGame()";/>
<div id="board">
<div class="character">1</div>
<div class="character">2</div>
<div class="character">3</div>
<div class="character">4</div>
<div class="character">5</div>
<div class="character">6</div>
</div> Class attribute
<script>
function startGame() {
gameLoop();
}
function gameLoop() {
It's starting to
alert("Game over!");
look more like a
setTimeout(gameLoop, 3000); game now!
}
</script>
</body>
</html>

Save your code and Security Ga

refresh your page.

You will see the CSS properties
applied to your <div> tags. Play

1 2 3 4

Something's making
my nose itch.
5 6

165

GC5_p152-p187_9781406366846_PI_UK.indd 165 15/02/2016 16:27

 7. Use the game loop to stop the game
Now we’ve added our characters to the game
board, we need to make some changes to our
game loop. At the moment it pops up an alert every <script>
3 seconds. We need to change our loop so it will function startGame() {
stop after a certain period of time. We’re going gameLoop();
to do this by keeping count of how many times we } Variable
loop. When our loop has run a certain number of var loops = 0;
times, our game will end. function gameLoop() {
To keep count of our loops, let’s create a alert("Game over!");
variable that will increase in value every time it’s setTimeout(gameLoop, 3000);
called. To do that we should code a variable called }
loops that is set to the value 0. Add this variable </script>
to your <script> block before your
gameLoop function, like this:

We need to use this variable in our gameLoop

function. We want to add 1 to its value every time the loops = loops + 1;
function is called. To do this, we could code like this:

However we can actually use a new JavaScript

operator to write the same instruction in a simpler Increment
and shorter way. It’s called the increment operator operator
(++) and it’s just like the operators we learnt about loops++;
in Mission 2. We can use the increment operator
(++) to add 1 to the value of our variable. All we
have to write is this:

We can use the increment operator (++) in our function gameLoop() {

gameLoop function to count how many times our loops++;
loop has been called. Remove the alert from your setTimeout(gameLoop, 3000);
gameLoop function and replace it with your new }
piece of code, like this:

This gives me paws

for thought!

166

GC5_p152-p187_9781406366846_PI_UK.indd 166 15/02/2016 16:27

 5
Now we want to make sure that our game
loops for a fixed number of times before
the game ends. We do this by adding an <script>
if statement and an else statement to our function startGame() {
gameLoop function, which will check how gameLoop();
many times our loop has run. }
We need to make sure that when the loop var loops = 0;
has run for a certain number of times, the function gameLoop() {
setTimeout function calling the loop will stop loops++; Timer
and an alert will pop up. We want our loop If statement if(loops < 12) {
to run 12 times. It will run every 3 seconds setTimeout(gameLoop, 3000);
until the twelfth loop, when the game will end. }
Our game will last for a total of 33 seconds else {
(11 multiplied by 3) before it ends on the Else alert("Game over!");
statement
twelfth loop. Let’s have a look at our whole }
<script> block with the new variable, if }
statement and else statement: </script>

Security Ga
The if statement checks how many times our
loop has run. If it is less than (<) 12 times, it
keeps running by calling setTimeout again.
If it is more than 12 times, the else statement Play

runs and an alert pops up. 1

Game over!
Save your new code and refresh
your page. Press the play button
and wait until the alert pops up. 5 OK
Your game will now end after a certain
period of time.

Don’t forget you have to

wait for 33 seconds before
the alert will pop up!

167

GC5_p152-p187_9781406366846_PI_UK.indd 167 15/02/2016 16:27

 8. Use CSS to show and hide the characters
During our game the guest and thief characters will flash up on-screen. The House of Volkov security team
will have to spot and click on the thief before he disappears. We need to use CSS to make the characters
appear and disappear as the game loop runs. To do this we have to learn a new CSS property that makes
a HTML element appear or disappear from our browser. We can then use JavaScript to apply the property
to our characters.

CSS property name What does it do? Example values

display Changes how a HTML element appears block; none;

on-screen

The display CSS property has lots of <style>

different values. The two values we need #board {
for our game are “block“ and “none“. border: 1px solid black;
If you set the display property of a HTML background-color: gray;
element to none, the element will not height: 350px;
appear on your screen. If you set the width: 650px;
display property to block, the HTML }
element will display as a square. .character {
background-color: lightblue;
In your text-editing program, add two width: 120px;
new CSS classes called hidden and height: 120px;
visible. Use the display property so padding: 10px;
your <style> block looks like this: margin: 10px;
float: left;
Save your code. } Display CSS
.hidden { property
display: none;
}
Let’s have a quick .visible {
go at using this display: block;
new CSS property! }
</style>

168

GC5_p152-p187_9781406366846_PI_UK.indd 168 15/02/2016 16:27

 5
CODE SKILLS USING THE DISPLAY CSS PROPERTY

Try using the CSS display property to make HTML elements appear and
disappear on your screen. You’ll need this to make your characters display
correctly in your game.

1. Open up your text-editing program. Create a new HTML file called display.html. Type out the
code below, then save your HTML file and open it in your browser. Your page will look like this:

<!DOCTYPE html> Display

<html>
<head>
Security
<title>Display</title> Thief
</head> Guest
<body>
<div>Security</div>
<div>Thief</div>
<div>Guest</div>
</body>
</html>

2. Reopen your file in your text-editing

program. Modify your second <div> <body>
by adding the display CSS property, <div>Security</div>
so it looks like this: <div style="display: none;">Thief</div>
<div>Guest</div>
</body>

3. Save your file and Display

refresh your page.

The display CSS
Security
property and none value Guest Where did that
will make your second
<div> disappear from
element go?
your screen.

169

GC5_p152-p187_9781406366846_PI_UK.indd 169 15/02/2016 16:27

 9. Animate the characters
We now need to apply our two new CSS classes (hidden and visible) to our game loop so the character
<div> tags become animated. To do this we need our game loop to add and remove the new CSS classes
to and from our character <div> tags.
When our game runs, we want our characters to flash on and off the screen. We’re currently looping
around 12 times, so the character <div> tags need to be visible for 6 loops and invisible for 6 loops
to create the flashing effect. The first thing we need is a new variable called peopleVisible to store this
information. We need to set this variable to the value false, like this:

var peopleVisible = false

We need our variable to be set to false at

the start so that the character <div> tags <script>
start off hidden on our screen. Then when function startGame() {
the variable is set to true, the characters gameLoop();
will appear on our screen. } Variable
When the game loop runs, we want var loops = 0;
the value stored in our new variable to var peopleVisible = false;
alternate between true and false. To do function gameLoop() {
this we have to use another JavaScript peopleVisible = !peopleVisible;
operator, called the not operator (!). You loops++; Not operator
can use the not operator (!) to change the if(loops < 12) {
value of your variable. setTimeout(gameLoop, 3000);
Let’s have a look at how we use the }
not operator (!) in our <script> block. else {
Type these new pieces of code alert("Game over!");
into your text-editing program }
and save your file. }
</script>

170

GC5_p152-p187_9781406366846_PI_UK.indd 170 15/02/2016 16:27

 5
We have used the not operator (!) to alternate
the value of our new variable. If the value of our Loop number Variable value
variable is false, when the variable runs in our
gameLoop function the not operator (!) will change 1 True
its value to true. And if the value of our variable is 2 False
true, when the variable runs the not operator (!) will
3 True
change its value to false.
Every time our loop runs, the loops variable 4 False
will go up by one and the peopleVisible variable 5 True
will alternate between true and false. As we loop 6 False
round, our variables will look like this:
7 True
8 False
Now we need to add a new function called 9 True
flashCharacters to our <script> block that will 10 False
make our character <div> tags appear on-screen
11 True
when the variable value is true. We do this using
our two new CSS classes. When the value is true 12 False
we want to use the visible CSS class, and when Game over
the value is false we want to use the hidden CSS
class. Turn over to find out exactly how to code this
flashCharacters function.

I like using
loops!

This new function

sounds complicated!

171

GC5_p152-p187_9781406366846_PI_UK.indd 171 15/02/2016 16:27

 10. Apply CSS using JavaScript
We need a new function that will apply a CSS variable to an empty string. This empty string
class to the character <div> tags depending is filled as the if and else statements run. If our
on the value of our variable. We should call this peopleVisible variable is true, our classToSet
function flashCharacters. The function must find variable will be set to the visible CSS class. If our
our game board, using getElementById, and store peopleVisible variable is false, the else statement
it in a variable called board. Then the function will change our classToSet variable to the hidden
needs to pick a CSS class to apply to the character CSS class.
<div> tags. This will depend on the value of our We then need to code a loop which counts the 6
peopleVisible variable. character <div> tags. As the loop counts the <div>
To decide the CSS classes we create a second tags it assigns the value of our classToSet variable
variable called classToSet that will store the two to each <div>. We do this using the className
names of the CSS classes we need to set. We method. The className method lets you set a CSS
choose the CSS classes using an if and else class on a HTML element in JavaScript.
statement. We set the value of our classToSet Our complete function now looks like this:

Variable
function flashCharacters() {
var board = document.getElementById("board");
Variable var classToSet = "";
Empty string
if(peopleVisible) { Id attribute
If statement
classToSet = "character visible";
} CSS class name
CSS class name
Else else {
statement classToSet = "character hidden";
} Loop
for(var index = 0; index < 6; index++) {
board.children[index].className = classToSet;
}
} Class name method

Did you WORD

notice? An EMPTY STRING is
CODE

a piece of data, in the

In the variable called index inside our loop we have stored form of a sequence of
more than one piece of information. This kind of variable is characters, that has the
called a collection. We have to use square brackets ([ ]) to value of 0. In JavaScript an
get a value out of the collection to use in our code. empty string is represented as " ".

172

GC5_p152-p187_9781406366846_PI_UK.indd 172 25/02/2016 16:00

 5
11. Simplify the conditional statements
This function looks quite complicated, so we should now try to simplify it. You can use another operator in
JavaScript, called a conditional operator (?), to simplify the if and else statements. You use the conditional
operator (?) like this:
Conditional operator

var variableName = condition ? value1 : value2;

This tells our browser that if the condition of our variable is true it should use value1, and if it is false use
value2. So we can rewrite the code in our function like this:

Conditional operator CSS class name CSS class name

var classToSet = peopleVisible ? "character visible" : "character hidden";

Add your new flashCharacters function with the simplified if and else statements to your <script>
block. Make sure your gameLoop function calls your new function too. Save your code and open it
in your browser. Every 3 seconds your blue boxes will appear and disappear on your screen.

Security G
Turn over to see what
our whole code block
Play now looks like!
1 2 3 4

Security G
5 6

Play

173

GC5_p152-p187_9781406366846_PI_UK.indd 173 25/02/2016 16:00

 Don't forget you
can view the code
Get ding! on the Get Coding!
Co
website too!

Check your code in your text-editing program. The code you need
for your game will look like the block below. You have to refresh your
page between each play of the game. Make any changes you need
and save your file.

<!DOCTYPE html>
<html>
<head>
<title>Security Game</title>
<style>
#board {
border: 1px solid black;
background-color: gray;
height: 350px;
width: 650px;
}
.character {
background-color: lightblue;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
}
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
</head>

174

GC5_p152-p187_9781406366846_PI_UK.indd 174 16/02/2016 10:55

 5
<body>
<input type="button" value="Play" onclick="startGame()";/>
<div id="board">
<div class="character">1</div>
<div class="character">2</div>
<div class="character">3</div>
<div class="character">4</div>
<div class="character">5</div>
<div class="character">6</div>
</div>
<script> But which characters
function startGame() { are the guests and
gameLoop(); which is the thief?
}
var loops = 0;
var peopleVisible = false;
function gameLoop() {
peopleVisible = !peopleVisible;
flashCharacters();
Function call
loops++;
if(loops < 12) {
setTimeout(gameLoop, 3000);
}
else {
alert("Game over!");
}
} Simplified if
function flashCharacters() { statement
var board = document.getElementById("board");
var classToSet = peopleVisible ? "character visible" : "character hidden";
for(var index = 0; index < 6; index++) {
board.children[index].className = classToSet;
} Turn over to
} create the
</script> characters!
</body>
</html>

175

GC5_p152-p187_9781406366846_PI_UK.indd 175 15/02/2016 16:27

 12. Create the thief
At the moment in our game, every 3 seconds our function gameLoop() {
characters flash on and off the screen. What we peopleVisible = !peopleVisible;
need to do now is change the position of our createCharacters();
characters on-screen every time our game loop runs. flashCharacters();
Function call
Every 3 seconds the characters need to move to a loops++;
different place on the game board. And we need to if(loops < 12) {
make one of the characters the thief. setTimeout(gameLoop, 3000);
We first need to add a function that creates a }
new set of characters, in different positions, every else {
time our game loop runs. Let’s call this function alert("Game over!");
createCharacters. Start by adding the function call }
in your gameLoop function, like this: }

Then code the new createCharacters function before your flashCharacters function:

function createCharacters() {
var board = document.getElementById("board");
for(var index = 0; index < 6; index ++) {
board.children[index].innerHTML = "Guest";
} Security G

}
Play
This is very similar to the function we coded earlier to set the
Guest Guest Guest Guest
CSS class of each character <div>. But this time we’ve used
innerHTML, like we used in Mission 3, to set the value of each
of the characters to “Guest”. Guest Guest

Save your HTML file and refresh your page.

Now when you press Play, you’ll see that each
of the character <div> tags is labelled “Guest”.

Now we need to add some code to our createCharacters function that will randomly pick one of the 6
character <div> tags to be the thief, every time the game loop runs. We need to write code that will pick
a random number. There isn’t an easy way of picking a random number using JavaScript, so the next piece
of code you need is quite complicated. Carefully type this new code at the end of your createCharacters
function, so that it looks like this:

176

GC5_p152-p187_9781406366846_PI_UK.indd 176 15/02/2016 16:27

 5
function createCharacters() {
var board = document.getElementById("board");
for(var index = 0; index < 6; index ++) {
board.children[index].innerHTML = "Guest";
} Math API
var randomNumber = Math.floor(Math.random() * 6) + 1;
board.children[randomNumber–1].innerHTML = "Thief";
}

Here we are using a new API called the Math API. It works in exactly the same way as the DOM and
localStorage APIs that we used in Mission 3. Using the Math API lets you access handy maths functions
that have been built in to your web browser. To find a random number you have to do the following
calculation:

Math.floor(Math.random() * BIGGEST_NUMBER) + SMALLEST_NUMBER;

We have 6 characters in our game, so our biggest number is 6

and our smallest number is 1. We need to code: We must get
the diamond
Math.floor(Math.random() * 6) + 1; back!
We then store the result of our calculation in a variable. Then we can use this variable in our next line of
code. We use innerHTML to set the value of whichever <div> matches our random number, like this:

board.children[randomNumber–1].innerHTML = "Thief"

Because our numbers in JavaScript Security G

count up from 0, we’re going to

subtract 1 from our random number, Play

so we’ll only ever get the numbers 0, Guest Thief Guest Guest

1, 2, 3, 4 and 5.
Security G

Guest Guest

Play
Save your code. Your new
Guest Guest Guest Guest
createCharacter function will
have added a thief to your
game. Now when you press Play, every time your game loop Thief Guest

runs a random character on your game board will become

the thief.

177

GC5_p152-p187_9781406366846_PI_UK.indd 177 15/02/2016 16:27

 13. Create a score
Now we have a game board that shows us a on the thief. When the user clicks, they catch the
different set of characters every 3 seconds. One thief and score a point.
of those characters is the thief that the House of We first have to add a variable called gameScore,
Volkov’s security team need to catch. What we to keep track of the score. It goes underneath the
need to do now is create a way for the user to click startGame function at the top of our <script> block:

var loops = 0;
var peopleVisible = false;
var gameScore = 0;

Every time the player clicks on the thief, we need to add 1 point to their score. And to make sure the player
is paying attention, every time they click on a guest we should take away 2 points. To create our scoring
system we need to add an onclick to every character, every time our game loop runs. Add this new code
to your createCharacter function:

function createCharacters() {
var board = document.getElementById("board");
for(var index = 0; index < 6; index ++) {
board.children[index].innerHTML = "Guest";
board.children[index].onclick = function() {
Variable gameScore += –2;
} Onclick
} Operator
var randomNumber = Math.floor(Math.random() * 6) + 1;
board.children[randomNumber–1].innerHTML = "Thief";
Variable board.children[randomNumber–1].onclick = function() {
gameScore++;
} Onclick
} Operator

We’re using the onclick just like we did in Mission 3. When a guest or thief is created, an onclick is
added. We’re using two new arithmetic operators to change the value of our gameScore variable. If the
user clicks on a guest, the += operator means the value that follows is added to the value in the variable.
In this case, since the value that follows is –2, it means that 2 is subtracted from the gameScore value.
If the user clicks on a thief, the increment operator (++) means 1 is added to the value in the variable.

178

GC5_p152-p187_9781406366846_PI_UK.indd 178 15/02/2016 16:27

 5
We also need to change the alert message when the game ends, so that it tells the user their score.
Change the else statement in your gameLoop function so it uses the gameScore variable value, like this:

function gameLoop() {
peopleVisible = !peopleVisible;
createCharacters();
flashCharacters();
loops++;
Did you
if(loops < 12) { notice?
setTimeout(gameLoop, 3000);
} Variable We leave a space at the end
else { of our alert text, so the message
alert("You scored " + gameScore); displays correctly with the
} gameScore value.
}

Save your HTML file and refresh Security Ga

your page. Try clicking on the thief

every time it flashes on-screen. See how many
Play
points you score at the end of the game. Remember
you need to refresh your page between each play Guest
You scored 3
of the game.

Guest OK

Hurray! The
diamond will surely
be safe now!

14. Simplify the code

Our game now works and the House of Volkov’s class to them. We can now combine these functions
security team can soon begin their training. But you to make our code simpler. Simplifying your code
might have noticed that our createCharacters and as you work through a problem is a really common
flashCharacters functions are quite similar. One thing to do when you’re coding. It makes it much
creates our characters and the other adds a CSS easier to understand your code.

179

GC5_p152-p187_9781406366846_PI_UK.indd 179 15/02/2016 16:27

 We should change our createCharacters function so it adds the CSS class as well as creating the
characters. Change the function so it looks like this:

function createCharacters() {
var board = document.getElementById("board");
var classToSet = peopleVisible ? "character visible" : "character hidden";
for(var index = 0; index < 6; index ++) {
CSS classes
board.children[index].className = classToSet;
added
board.children[index].innerHTML = "Guest";
board.children[index].onclick = function() {
gameScore += –2;
}
}
var randomNumber = Math.floor(Math.random() * 6) + 1;
board.children[randomNumber–1].innerHTML = "Thief";
board.children[randomNumber–1].onclick = function() {
gameScore++;
}
}

This function now does everything. Every time the game loop runs, it picks up the correct CSS class, creates
the characters and then sets the onclick for each character. We no longer need the flashCharacters
function, so we can delete it. Also delete the function call from your gameLoop function so it looks like this:

function gameLoop() { Save your code.

peopleVisible = !peopleVisible; Your game will work in
createCharacters(); Function call for exactly the same way.
loops++; flashCharacters removed
if(loops < 12) {
setTimeout(gameLoop, 3000);
} Smart coding,
else { my friend!
alert("You scored " + gameScore);
}
}

180

GC5_p152-p187_9781406366846_PI_UK.indd 180 15/02/2016 16:28

 5
15. Designing the game with CSS
We’ve got the basic structure of our game working
now, but it doesn’t look very fun on-screen. Let’s use .character {
our CSS skills from Mission 1 to design it. First let’s background-color: lightblue;
see if we can make our thief look more distinctive width: 120px;
when he flashes up on-screen. Let’s add a new CSS height: 120px;
class called thief to our <style> block, like this: padding: 10px;
margin: 10px;
float: left;
}
Then we need to apply this CSS class to our .thief {
JavaScript. Every time the thief is added we need to background-color: red;
add this new CSS class. To do that we need to make }
this change to our code:

var randomNumber = Math.floor(Math.random() * 6) + 1;

board.children[randomNumber–1].innerHTML = "Thief";
board.children[randomNumber–1].onclick = function() {
gameScore++;
}
board.children[randomNumber–1].className = classToSet + " thief";

Every time our game loop runs, this will

apply our thief CSS class to our thief Security Ga

<div> and make it red. Save your HTML

file. Your thief will now be different to the guest.
Play

Guest Guest Guest Guest

Did you
notice?
There is a space in the code " thief ". Guest Thief
This space is essential because we are
using two CSS class names: the CSS
class we’ve picked using our classToSet
variable (hidden or visible), and the
CSS class thief. We need the space so it
doesn’t end up as "hiddenthief".

181

GC5_p152-p187_9781406366846_PI_UK.indd 181 15/02/2016 16:28

 16. Use images for the characters
If we want to make our character <div> tags look a
bit more exciting, we’re going to have to learn some
new CSS properties. The new properties are very
simple and work in exactly the same way as the
ones you learnt in Mission 1.
First of all, go to the Get Coding!
website and find these two images:
Save these images with all your other HTML
files in your Coding folder on your desktop. You’ve
done this before in Mission 1, so go back to pages Guest Thief
28–30 if you need a reminder.
Now we’re going to change the CSS classes in our <style> block. We’re going to use two new CSS
properties: the background and background-size CSS properties.

CSS property What does it do? Example values

Sets the background of a HTML

background url('image.jpg'); none;
element to an image
Sets the size of the background
background-size cover; 650px;
image in a HTML element

We can use these two new CSS .character {

properties in our character and thief background: url('guest.jpg');
CSS classes, like this: background-size: cover;
width: 120px; Background
height: 120px; property
padding: 10px;
margin: 10px;
That thief's float: left;
got an ugly }
mug! .thief {
background: url('thief.jpg');
background-size: cover;
Background-size
} property

182

GC5_p152-p187_9781406366846_PI_UK.indd 182 15/02/2016 16:28

 5
Using the background CSS property, we ask our
browser to use saved images as the background Security Ga

for our <div> tags. Then using the background-size

CSS property, we ask our browser to make sure that
the image file is set to a big enough size to cover Play

the whole background of each <div>. Guest Guest Guest Guest

Save your HTML file and see what the new

CSS properties have done to your game.
Thief Guest

Now we have the images set as

the background of the character <div> tags,
let’s remove the guest and thief labels. After all,
we don’t want it to be too easy for the House
of Volkov’s security team. Remove the text by The game is
changing these two lines in your <script> block: looking great!
board.children[index].innerHTML = "Guest";

board.children[randomNumber–1].innerHTML = "Thief";

Change them to empty strings, like this:

board.children[index].innerHTML = "";

board.children[randomNumber–1].innerHTML = "";

Security Ga
Save your HTML file. Now
your game will just be made
up of pictures. Play

I don't like the

look of that thief.

183

GC5_p152-p187_9781406366846_PI_UK.indd 183 15/02/2016 16:28

 17. Change the game board
Now we know how to use the background and
background-size CSS properties, we can easily #board {
change our game board from the grey colour to an background: url('background.jpg');
image. Go to the Get Coding! website and find the background-size: cover;
background image. Save it in your Coding folder. border: 1px solid black;
All we then have to do is add the new height: 350px;
background and background-size properties to the width: 650px;
board CSS class in our <style> block. Don’t }
forget to delete the background-color CSS
class, as it is no longer needed.
Your code will look like this: .character {
background: url('guest.jpg');
We should also make sure that at the start of the background-size: cover;
game, when it loads in our browser, we just see width: 120px;
the game board. Then when we press play, we see height: 120px;
the characters. To do this we need to add the CSS padding: 10px;
display property to the character CSS margin: 10px;
class in our <style> block, like this: float: left;
display: none;
Save your HTML file. When your game }
loads, you will see the new background for
your game board. When you press Play
your characters will load on-screen and your game
will begin. Game screen
Security Ga

Start screen
Security Ga

Play

Play

184

GC5_p152-p187_9781406366846_PI_UK.indd 184 15/02/2016 16:28

 5
18. Make the game harder
You might have noticed that the 3 second delay makes it easy to click on the thief. We now need to make
the game harder so it’s more of a challenge. The characters need to flash on-screen for a much shorter
time so there will be less time to click on the thief. To do this we need to change the setTimeout call, like this:

setTimeout(gameLoop, peopleVisible ? 1000 : 3000);

We’re using a simplified if statement, like we did earlier in the mission. We’ve changed our setTimeout call
so that if peopleVisible is true, our gameLoop function will be called in 1 second. If peopleVisible is false,
our gameLoop function will be called in 3 seconds. So now our characters will only flash on-screen for 1
second, but when they’re invisible they will be hidden for 3 seconds.
Save your code and start playing your finished game. Can you score 6 points?

o
ssi n DO IT YOURSELF TASK
Mi

5 YOUR FINISHED GAME

Coding a game is challenging and you’ve mastered it in this mission. Professor

Bairstone will be delighted. The game will test the security team’s reaction times.

Security Training Game Brief

Check that you have correctly coded all the things below in your securitygame.html file
and that it’s saved in your Coding folder. Don’t forget you can change the speed of your
game, making it faster and even harder for the user.
Turn over to see
A game board A play button the full code block
5 guests A score alert for the game.
1 thief

185

GC5_p152-p187_9781406366846_PI_UK.indd 185 15/02/2016 16:28

 <!DOCTYPE html>
<html>
<head>
<title>Security Game</title>
<style>
#board {
background: url('background.jpg');
background-size: cover;
border: 1px solid black;
height: 350px;
width: 650px;
}
.character {
background: url('guest.jpg');
background-size: cover;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px; Mission 5 completed!
float: left; Amazing work!
display: none;
}
.thief {
background: url('thief.jpg');
background-size: cover;
}
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
</head>
<body>
<input type="button" value="Play" onclick="startGame()";/>
<div id="board">
<div class="character">1</div>
<div class="character">2</div>
<div class="character">3</div>
<div class="character">4</div>

186

GC5_p152-p187_9781406366846_PI_UK.indd 186 15/02/2016 16:28

 5
<div class="character">5</div>
<div class="character">6</div>
</div> FUTURE CODE SKILLS
<script>
function startGame() { This mission was an important step in learning
gameLoop(); about JavaScript game programming. You
} used a game loop, an essential part of nearly
var loops = 0; all computer games, to power your game and
var peopleVisible = false;
create an interactive experience for the user.
var gameScore = 0;
This isn’t an easy thing to do, so well done!
function gameLoop() {
peopleVisible = !peopleVisible;
You can now use your knowledge about game
createCharacters(); loops to build more complicated games that will
loops++; respond to your user in different ways.
if(loops < 12) {
setTimeout(gameLoop, peopleVisible ? 1000 : 3000);
}
else {
alert("You scored " + gameScore);
}
}
function createCharacters() {
var board = document.getElementById("board");
var classToSet = peopleVisible ? "character visible" : "character hidden";
for(var index = 0; index < 6; index ++) {
board.children[index].className = classToSet;
board.children[index].innerHTML = "";
board.children[index].onclick = function() {
gameScore += –2;
}
}
var randomNumber = Math.floor(Math.random() * 6) + 1;
board.children[randomNumber–1].innerHTML = "";
board.children[randomNumber–1].onclick = function() {
gameScore++;
}
board.children[randomNumber–1].className = classToSet + " thief";
}
</script>
</body>
</html>

187

GC5_p152-p187_9781406366846_PI_UK.indd 187 15/02/2016 16:28

 o
Mi ssi n
6 YOUR FINISHED
WEBSITE
LEARN HOW TO USE WIREFRAMES
BUILD A WEBSITE USING HTML
AND CSS
LINK YOUR WEB PAGES TOGETHER
MAKE YOUR WEBSITE LIVE

GC6_p188-p208_9781406366846_PI_UK.indd 188 15/02/2016 16:19

 6
M ission Brief

Dear Coder,

We think you’ll be pleased to hea

r that the special exhibition at the
Volkov was a resounding success! House of
We want to thank you for all you
work. When Mr Volkov unveiled r help and hard
the Monk Diamond to the guests
amazed. It was the proudest mom everyone was
ent of our careers.
The evening was not without dram
a though. As we feared, the Bon
found out about the diamond. The d Brothers had
y disguised themselves as guests
invitations to gain access to the and used false
exhibition. Luckily, once they got
of the security team immediately inside a member
noticed that they were behaving
near the diamond’s glass case. Mr suspiciously
Volkov intervened and the police
in time. Thanks to you, the Bond were called just
Brothers are now behind bars.
The news about the Monk Diam
ond has spread quickly and caus
in Moscow and around the world. ed quite a stir, both
Mr Volkov is so delighted to have
rightful home, he wants to open it back in its
the special exhibition to the pub
the security team is up to the chal lic. Now we know
lenge, we think it’ll be a jolly goo
people in Moscow like the exhibiti d show. And if
on, Mr Volkov is thinking about taki
around the world. The House of ng it on a tour
Volkov has a very exciting future
ahead.
There’s only one thing left to do
and we thought you would like to
needs to build a whole website (not help. Mr Volkov
just a web page) that will tell eve
the world, about the exhibition. ryone, all over
We hope we can rely on you one
knows, perhaps you’ll be able to last time! Who
come and see the Monk Diamond
love to meet you and thank you one day? We’d
in person.
Warmest celebratory wishes from
the House of Volkov,
Professor Harry Bairstone, Dr Rub
y Day and Ernest
PS Attached is Professor Bairston
e’s latest entry on the Explorer’s
and a note from Mr Volkov. Encyclopedia

GC6_p188-p208_9781406366846_PI_UK.indd 189 15/02/2016 16:19

 The Discovery of the Monk Diamond
From the Explorer’s Encyclopedia, the guide to every adventure

T HE E XPLORER ’ S This entry is about the discovery of the stolen jewel. For the entry about the
ENCYCLOPEDIA diamond’s history, see here.
The Guide to Every Adventure

Home page The Discovery of the Monk Diamond was the discovery of the stolen Monk
Contents Diamond, made by Professor Bairstone and Dr Day in Siberia. Professor Bairstone had
Featured discoveries
long believed that the Bond Brothers were responsible for the theft and that they had
Famous explorers
Historical expeditions hidden the jewel far away from the House of Volkov in Moscow, where it was stolen.

GC6_p188-p208_9781406366846_PI_UK.indd 190 15/02/2016 16:19

 6
VIKTOR VOLKOV
The House of Volkov, near to St Basil’s
Cathedral, Moscow

Dear Coder,
I just wanted to write you a short note to say
thank you so much
for all you have done to bring the Monk Diam
ond back to the
House of Volkov. I was heartbroken when it was
stolen and in my
darker moments I thought I would have to sell
the business. The
House of Volkov has been run by my family for
generations and
it would have been devastating. But thanks to
you, Professor
Bairstone, Dr Day and Ernest, the Monk Diam
ond has been
returned. I am so delighted to be hosting the
exhibition and have
the jewel on display in the shop.
As you know, a reward was offered for its safe
return or the
capture of the Bond Brothers. Professor Bairstone
and Dr Day
have taken their share and are going to use it
to fund another
expedition together. I want you to know that
I also have a token of
gratitude to give to you. It will be waiting for
you when you come
to Moscow to see the Monk Diamond for yourself.
With very warm and kind regards,
Viktor Volkov

Professor Bairstone is an explorer, known for discovering ancient artefacts around the world. He is always
accompanied on his expeditions by Ernest, his dog. Before finding the Monk Diamond, his most notable
discovery was the Hoy Hoard of Viking treasure, which he unearthed on the Orkney Islands in Scotland.
Dr Day is a scientist who studies fossils. She is currently researching a new species of feathered dinosaur. She
has been on several different expeditions in the hope of discovering fossils to prove that this species had feathers.
The news that the Monk Diamond had been found in Siberia and returned to the House of Volkov made
headlines all over the world. The team were interviewed for lots of different TV stations and have featured in
many newspapers and magazines. Professor Bairstone has been invited to give lectures about the discovery
and his biography will be published next year. Dr Day has been made a senior fellow at her university.
The special exhibition at the House of Volkov has been very popular. Mr Volkov told reporters he was “delighted
by the return of the diamond and the success of the exhibition”. Queues of up to two hours were reported
outside the House of Volkov and sales of jewellery have more than doubled.

GC6_p188-p208_9781406366846_PI_UK.indd 191 15/02/2016 16:19

 BUILD A WEBSITE
You’ve done some great work in the last five to build a website that can be accessed by anyone,
missions. You can now code using HTML, CSS anywhere in the world.
and JavaScript and know how to use APIs to Building a website is not that different from
build more complex programs. You’ve built a web building a web page, as we did in Mission 1.
page, created a password, built a web-based app, After all, a website is just a group of connected
planned a route and built a game. Now there is web pages. In this mission we are going to work
one final challenge: to build a website. in a slightly different way though. This time we are
So far all the pages and programs you’ve built going to build our web pages using a tool called
have been stored in your computer’s web browser a wireframe. There will be five wireframes in this
and have only been for Professor Bairstone and Dr mission, and you will code a web page from
Day to use. What we need to do now is learn how each one.

Wireframes Menu
bar A big
Wireframes are a useful way of planning the image
content and layout of a website before you Wireframe

start coding. A wireframe is just a very simple

drawing, like the example on the right, that
shows the different elements of your page. Home / Discovery / Exhibition / The House of Volkov

They help you plan out the design of each

web page and make important decisions
about how a page will be structured.
Wireframes also help you decide how
your user will interact with the page and move The Monk Diamond is one of the rarest and most valuable diamonds in Europe. It has a
fascinating history. It was owned by Russian nobility, stolen by a famous criminal gang
and then found hidden in remote mountains in one of the most sensational discoveries of
between the other pages on the website. the century. Find out more about the Monk Diamond in this website or come and see it for
yourself at the House of Volkov in Moscow.

Once you are happy with your wireframe you

can then start coding, using it as a plan that
shows you exactly what needs coding where
on your page.
In this mission we are going to code a
Contact Professor Bairstone: profbairstone@intrepidexplorer.com
website made up of five web pages. Each
of the five pages will link together and tell a
different part of the diamond’s exciting story. Text
Image
We are going to look at a possible wireframe
for each page of the Monk Diamond website. Footer

192

GC6_p188-p208_9781406366846_PI_UK.indd 192 15/02/2016 16:19

 6
Let’s take a look at the five web pages we’re going to code to make the Monk Diamond website:

Web page Content

index.html Our home page, explaining about the discovery and exhibition
diamond.html The history of the Monk Diamond, including the theft
discovery.html The story of Professor Bairstone and Dr Day’s discovery
exhibition.html The details of the exhibition, including opening times
volkov.html How to get to the House of Volkov in Moscow

As we work through this mission, we’ll look at a wireframe for each page of our website. You can then
code each web page in your text-editing program using the HTML, CSS and JavaScript skills you’ve learnt
in all the other missions.

MORE CSS PROPERTIES

In Mission 1 you learnt that CSS is a programming language that lets you change the look of a HTML web
page. Before we start looking at wireframes, we need to learn about a few more CSS properties and values.

Using images
When you add images to your pages, you can change the size of them in lots of different ways. The best
way to do it is to add a style attribute to your <img/> tag and set the width CSS property to a value in
pixels (px) or a percentage (%), like this: Style attribute Pixels

<img src="diamond.jpg" alt="The Jewel" style="width: 150px"/>

<img src="ernest.jpg" alt="Dog" style="height: 50%"/>

Percentage
Your browser will then automatically work out what height your image should be. If you want to stretch an
image out and stop it being in proportion, you can use both the width and height CSS properties in your
style attribute, like this: Width property Height property

<img src="profB.jpg" alt="Explorer" style="width: 50px; height: 50px"/>

193

GC6_p188-p208_9781406366846_PI_UK.indd 193 15/02/2016 16:19

 Making an image fill a <div>

A good way to create an interesting layout is to use <div> tags to divide your page into different sections.
If you want to use an image as the background for a <div> and create a banner, you should use the
background and background-size CSS properties like you did in Mission 5. There are different ways to
scale your images using CSS properties.

CSS property What does it do? Example values

Sets the background image for
background url(filename.jpg);
a HTML element
Sets the size of the background
background-size contain; cover; auto;
of a HTML element

In Mission 5 you used the cover value with <style>

the background-size CSS property. The cover .team {
value scales the background image so it is big width: 600px;
enough to completely fill your <div>. Some of the height: 600px;
image might be cropped to make it fit the size of background: url(team.jpg);
the <div>. background-size: contain;
As well as the cover value, you can also use }
the contain value. The contain value makes the </style> Contain value
background image as big as possible without
stretching it out of shape. Depending on the size
CSS
of your image, it might not fill your whole <div>.
If the image doesn’t fill the space, your browser
will repeat it.
If you use auto as the value for the background-
size CSS property, it will also repeat the image as
many times as it needs to fill up the <div>.

WORD When we SCALE an image we resize

CODE

it by making it bigger, smaller or

giving it different proportions. When
we CROP an image we cut its edges
off, making the image smaller.

194

GC6_p188-p208_9781406366846_PI_UK.indd 194 15/02/2016 16:19

 6
Aligning text and images

You can make images and text line up in two simple ways, which we looked at in Mission 1. You can use
the text-align CSS property on the <div> that has the text and image inside it. Or you can use the float
CSS property in a style attribute inside your <img/> tag, like this: Float property

<img src="team.jpg" alt="The Team" style="float: right;"/>

CSS

More CSS colour values

So far you have been using colour names as the
values for your CSS colour properties. By default,
your browser supports about 140 colour names. In
addition to these names, you can create your own
colours using a HEX code. You use a HEX code in
exactly the same way as you use a colour name.
They look like this:
HEX code
<body>
<div style="background-color: #0BFF54;">
Professor Bairstone, Dr Day and Ernest were on the expedition.
</div>
</body> CSS

Luckily you don’t need to remember HEX

codes. There are plenty of websites that help Professor Bairstone, Dr Day and Ernest were on the expedition.
you work them out. You can mix your own colours
and make your own HEX codes using the Colour
Wheel at www.color.adobe.com. Just
copy the HEX value from the page into
your code and remember to
start your HEX code colour with
a hash (#).

I can't wait to see

your finished website!
195

GC6_p188-p208_9781406366846_PI_UK.indd 195 15/02/2016 16:20

 1. The home page: index.html
The home page (index.html) is the most important We can put a title in the banner too. Then let’s
page of your website because it’s the page your have a menu bar that contains links to all the other
user will see first. A good home page will make pages on our site. Then we should have a short
the purpose of the website obvious and engage piece of text that explains a little bit about the Monk
the user’s interest. It should be clear that it is only a Diamond’s discovery. Underneath the text let’s have
home page and that there are other web pages on a button that links to the House of Volkov page
the site for the user to discover. on the website. Finally, we can have a footer with
On our home page, let’s use a big image of the contact details for Professor Bairstone. Let’s take a
Monk Diamond as the header banner for our page. look at a wireframe of this page:

Home

Header
banner

Title
The Monk Diamond
An extraordinary exhibition

Menu
bar The Diamond / Discovery / Exhibition / The House of Volkov

The Monk Diamond is one of the rarest and most valuable diamonds in Europe. It has a
fascinating history. It was owned by Russian nobility, stolen by a famous criminal gang
and then found hidden in remote mountains in one of the most sensational discoveries of
the century. Find out more about the Monk Diamond in this website or come and see it for
yourself at the House of Volkov in Moscow.
Text
Button
Visit the House of Volkov

Contact Professor Bairstone: profbairstone@intrepidexplorer.com

My email address is Footer

profbairstone@intrepidexplorer.com
196

GC6_p188-p208_9781406366846_PI_UK.indd 196 15/02/2016 16:20

 6
Code this page using the HTML and CSS
Find images of the
skills you’ve mastered in earlier missions. Monk Diamond on the
Get Coding! website.

Header banner Text

In your <style> block, create a CSS class Create a third <div>, using the style attribute
with the width property set to 100%, the height to set the width to 100% and the padding
set to 400px and the padding set to 0px. Use to 50px.
the background and background-size CSS Add your text, using the <p> and <br/> tags
properties to add an image. to divide the text into sections.
Apply this CSS class to a <div> in the <body>
Button
of your page.
Create a button by putting a link inside a
Add title text to your <div>. Use a style
<div>. Use a style attribute with the width,
attribute to change the font-size and color
height, padding and background-color CSS
CSS properties.
properties to make it look like a button.
Menu bar
Footer
Create a second <div> in the <body> of your
Create a final <div> and use the style attribute
page. Add a style attribute to your <div> tag
to set the width to 100%.
and set the width, padding and background-
Add text inside the <div> with contact
color CSS properties.
information for Professor Bairstone.
Add four hyperlinks, using the anchor <a> tag
and href attribute.
You could also create a <div> for each link
and set them to float to the right of each other.

You can find the code for this

wireframe and all the others in the
mission on the Get Coding! website.

When you’ve finished coding

your page, save your HTML file in
your Coding folder. Call your file
index.html.

197

GC6_p188-p208_9781406366846_PI_UK.indd 197 15/02/2016 16:20

 2. The diamond page: diamond.html
The diamond page (diamond.html) is the second web page in our website and will tell the user all about
the fascinating history of the Monk Diamond. Let’s take a look at the wireframe we need to build this page:

Menu bar
Create a <div> in the <body> of your page. Menu
Add a style attribute to your <div> tag and bar Big
set the width, padding and background-color image
CSS properties. Add four hyperlinks, using The Diamond

the anchor <a> tag and href attribute.

You could also create a <div> for each
link and set them to float to the right of Home / Discovery / Exhibition / The House of Volkov

each other.
Big image
In your <style> block, create a CSS
class with the width property set to 100%, The Monk Diamond is famous for its distinctive green colour. A Russian nobleman bought
the diamond for his wife in 1889, but it was stolen during the Russian Revolution. For

the height set to 200px and the padding the next 30 years, the Monk Diamond’s whereabouts were unknown. In 1947 it was
discovered during a police raid on a gang of petty criminals in Moscow. It was returned
to the nobleman’s family. The nobleman’s son decided the Monk Diamond was unlucky
set to 0px. Use the background and and sold it to the House of Volkov, Moscow’s oldest jewellery house. The House of Volkov
paid an undisclosed sum for the jewel, but it was rumoured to be the most expensive
diamond sale ever.
background-size CSS properties to add an
image. Apply this CSS class to a second
<div> in the <body>.

Text Contact Professor Bairstone: profbairstone@intrepidexplorer.com

Create a third <div>, using the style attribute
to set the width to 100% and the padding
to 50px. Add your text, using the <p> and Text
Image
<br/> tags to divide the text into sections.
Footer
Image
Add an image inside your text <div>. Use
the style attribute with the width, height and
text-align CSS properties to centre it.
Footer When you’ve finished coding
Make this the same as the home page. your page, save your HTML file in
your Coding folder. Call your file
diamond.html.

198

GC6_p188-p208_9781406366846_PI_UK.indd 198 15/02/2016 16:20

 6
3. The discovery page: discovery.html
The discovery page (discovery.html) is the third page and will tell the user how Professor Bairstone and
Dr Day found the Monk Diamond. Let’s create a wireframe with a slightly different layout to our previous
page, like this:

Menu bar
This should be the same as the menu bar Menu
on the diamond page. Remember to update bar Big
the links. image
Discovery

Big image
In your <style> block, create a CSS class
with the width property set to 100%, the Home / The Diamond / Exhibition / The House of Volkov
height set to 200px and the padding set to
0px. Use the background and background-
size CSS properties to add an image.
Apply this CSS class to a second <div>
in the <body>. Professor Bairstone and Dr Day, along with Ernest the dog, were on an
expedition in Siberia when they discovered the Monk Diamond. It had
been hidden in a remote mountain cave. The Bond Brothers attempted to

Text column sabotage the expedition and reclaim the diamond but were unsuccessful.
The team returned to Moscow with the diamond and a special exhibition is
being held at the House of Volkov to celebrate their discovery.

Create a <div>, using the style attribute

to set the width to 80% and the padding
to 50px. Add your text, using the <p> and
<br/> tags to divide the text into sections.
Contact Professor Bairstone: profbairstone@intrepidexplorer.com
Image column
Create another <div> and use the style
attribute to set the width CSS property to Text
20%. Float this <div> to the right of the column Image
<div> with your text in. column
Footer
Add an image inside your <div>. Use the
style attribute with the width, height and text-
align CSS properties to centre it.
Footer
Make this the same as When you’ve finished coding
the home page. your page, save your HTML file in
Monk
The your Coding folder. Call your file
ond
Diam
discovery.html.

199

GC6_p188-p208_9781406366846_PI_UK.indd 199 15/02/2016 16:20

 4. The exhibition page: exhibition.html
The exhibition page (exhibition.html) will have all the details about the exhibition at the House of Volkov.
As it contains important information, we want to keep the layout simple so the information is easy to see
and understand. Let’s take a look at the wireframe:

Menu bar
This should be the same as the menu bar Menu
on the diamond and discovery pages. Just bar Big
remember to update the links. image
Exhibition

Big image
This should also be the same as the diamond
and discovery pages. Home / The Diamond / Discovery / The House of Volkov

Text
Create a <div> for each section of
information.
You can indent pieces of text using the style The Special Exhibition
attribute and setting the CSS margin property The House of Volkov
Opening times
to 10px. Monday to Friday
9.30–6.00
Last admission 5.30
Footer Saturdays and Sundays
Make this the same as the home page. 11.00–4.00
Last admission 3.30
Admission: Free
Please note cameras are not allowed inside the House of Volkov.

Contact Professor Bairstone: profbairstone@intrepidexplorer.com

Text

Footer

Using <div> tags

to create different
layouts works
really well! When you’ve finished coding
your page, save your HTML file in
your Coding folder. Call your file
exhibition.html.

200

GC6_p188-p208_9781406366846_PI_UK.indd 200 15/02/2016 16:20

 6
5. The House of Volkov page: volkov.html
For the final page of our website (volkov.html) we need to give directions to the House of Volkov, so
people know where to find it. We should give the address and also embed a map from Google, using the
Google Maps Embed API like we did in Mission 4. Let’s take a look at the wireframe:

Menu bar
This should be the same as the menu bar Menu
on the diamond, discovery and exhibition bar Big
pages. Just remember to update the links. image
The House of

Big image
This should also be the same as the diamond,
discovery and exhibition pages. Home / The Diamond / Discovery / Exhibition

Text column
Create a <div>, using the style attribute
to set the width to 80% and the padding
to 50px. Add your text using the <p> and The House of Volkov
<br/> tags to divide the text into sections. The House of Volkov is the oldest jewellery
house in Moscow.
Please come and visit us.
Map column We are near to St Basil’s Cathedral.
Address:
Create another <div> and use the style The House of Volkov
attribute to set the width CSS property to St Basil’s Cathedral
Moscow
20%. Float this <div> to the right of the
<div> with your text in.
Contact Professor Bairstone: profbairstone@intrepidexplorer.com
Add an <iframe> and set the width, height
and border attributes. Then add a source
attribute with a URL that links to the Google Text
Map
Maps Embed API. Use the search API column
column
function and embed a map showing St Basil’s Footer
Cathedral in Moscow.
Footer
Make this the same as the home page.

When you’ve finished coding

your page, save your HTML file in
your Coding folder. Call your file
volkov.html.

201

GC6_p188-p208_9781406366846_PI_UK.indd 201 15/02/2016 16:20

 YOUR FINISHED WEBSITE
Now you’ve built your five web pages, the final thing you need to do is check that all your links are
correct and your pages connect in the way that you had planned. Check the menu bar on each of your
web pages has the correct file names in each of the links. If your links aren’t right your website won’t work,
as the user won’t be able to navigate between the pages. Your code for each link will look like this:

<a href="index.html">Home</a>
<a href="diamond.html">The Diamond</a>
<a href="discovery.html">Discovery</a>
<a href="exhibition.html">Exhibition</a>
<a href="volkov.html">The House of Volkov</a>

Making your own wireframes

Making your own wireframes is very easy. Lots of
people just use a pencil, piece of paper and sticky WORD A PROTOTYPE is the first version
CODE

S
notes to do it, drawing a wireframe that shows what of an object. The prototype is
their website will look like before they start to code. used to see what needs to be
This is sometimes called paper prototyping. It’s a changed and improved in later
really quick way to experiment with your layouts versions and the finished object.
before you spend time coding them up.
If you want to make wireframes like the
ones we’ve used here, there are plenty of tools
available. You can use Microsoft Visio on a PC,
Gliffy and Balsamiq mock-ups in a web browser, or That's the
OmniGraffle if you’re on a Mac. All these programs final mission
come with pre-made graphics that you can use to accomplished!
quickly sketch out your pages on a computer.

202

GC6_p188-p208_9781406366846_PI_UK.indd 202 15/02/2016 16:20

 6
Making your website live
If you want other people to see your finished
WORD When a web server stores a
website, you need to upload it to a web server.

CODE

S
At the start of the book we learnt about web website so web browsers can
servers. They can be hardware or software and access it we say the server
they store websites so your web browser can HOSTS the website. When files

access them. For people to be able to see your are hosted by a server, they’ll have
website, you need to host it on a web server on a URL (web address) just like all the
the Internet. Setting up your own web server is other websites on the Internet.
complicated, so luckily there are lots of online
companies that will let you use their servers to
host your files. If you want to find a free web server to host your
website, you will be able to find lots to choose
from on the Internet. Just search for “free web
Did you
know? hosting”. Sometimes home Internet connections
come with web space that you can use. Once you
If you want to host your files, you should have a web host, you’ll have to copy your files
ask an adult for help to look for web to their server. Carefully read the instructions and
space on a server. Just like with a Google terms and conditions that your web host gives you.
account, you have to be a certain age to
sign up.

Great work! We beat the

Bond Brothers and we
safely returned the Monk
Diamond to Mr Volkov!

And we're
famous!

203

GC6_p188-p208_9781406366846_PI_UK.indd 203 15/02/2016 16:20

 WHAT NEXT?
YOUR CODING FUTURE
Over the six missions in this book, you have not only kept the Monk Diamond
safe from the Bond Brothers, but have also learnt all about HTML, CSS and
JavaScript. You’ve coded a web page, made a password, built a web-based
app, planned a route and mastered some very complicated code to build
a game. And now you can add creating a website to your achievements.
Congratulations!

We hope Get Coding! has shown you how fun The W3Schools HTML site, which can be found
and interesting coding can be. You’ve learnt a truly at www.w3schools.com/html, will guide you
impressive number of new Code Skills and built through plenty of examples so you can expand your
some exciting projects of your own. And there’s still knowledge and make even more exciting websites.
much, much more to learn. If you enjoyed coding If you enjoyed coding in JavaScript, why not
in HTML and CSS, there are plenty of other HTML sharpen up your skills by working through some of
tags and CSS attributes that you can learn from lots the exercises available on sites like Codecademy at
of excellent websites on the Internet. www.codecademy.com/learn/javascript?
Or you could start learning new programming
languages for coding programs that run outside
your browser. Why not try learning C#, Java
or Ruby? Or try your hand at coding your own web
g servers? Take a look at www.code.org/learn for
u r c odin more ideas.
Yo re
futu ere! And finally, don’t forget to join the Young
ts h Rewired State community. We will help you to
star keep developing your coding skills and be a
technology star of the future!
The Get Coding! missions have been a great
success. It’s now up to you where you go next.

204

GC6_p188-p208_9781406366846_PI_UK.indd 204 15/02/2016 16:20

 Joining Young Rewired State
Join Young Rewired State and we will introduce you to like-minded people and expert
mentors at free events all over the world, like our Festival of Code. Through us you will
learn how to build apps, websites and algorithms and be inspired to use your skills to
solve real world challenges.

Find out more about Young Rewired State:

www.yrs.io www.getcodingkids.com

Thank you for

all your help!

Keep on
coding!

We’ve loved
meeting you !

205

GC6_p188-p208_9781406366846_PI_UK.indd 205 15/02/2016 16:20

 INDEX
a measurements 41–2
alternative (alt) attribute 28 properties 34–45, 168–9, 182–3, 193–5
anchor <a> tag 62–3 using with JavaScript 172
appendChild method 108–111 values 34, 193–5
Application Program Interfaces (APIs) 103
API key 139–141 d
math API 177 display property 168–9
web APIs 138–141 division <div> tag 32–3
apps (applications) 7 Do It Yourself Tasks 55, 91, 131, 150, 185
web-based 98–133 <!DOCTYPE> declaration 21
attributes 27–8, 32, 34, 48, 82–5, 88, 101–2 142–4 Document Object Model (DOM) 103–124
methods and properties 104–111, 118–120
b
background property 182–3, 194 e
background-color property 36–7 element selector 53–4
background-size property 182–3, 194 else statements 75–6
body <body> tag 21 embedded content 138, 142–7
border property 43 empty string 172
button 98–100, 112–3
f
c float property 40
camelCase 67
class attribute 48 g
code blocks 56–7, 92, 132–3, 151, 174–5, 186–7 game building 156–187
Code Skills 23, 26, 29–30, 33, 37, 44–5, 50–2, 63, 65, getElementById method 105–7
70–1, 74, 76, 81, 85, 100, 102, 107, 110–1, 116–7, Google Maps 139–141, 145–9
120, 122–4, 126–7, 140–1, 144, 147, 160–1, 169
color property 39, 195 h
computers 6 head <head> tag 21, 46
createElement method 108–111 height property 41–2
crop 194 HEX codes 195
CSS (Cascading Style Sheets) 10 href attribute 62–3
classes 46–8, 50–4 home page 196–7
coding 34–54 hosting 203

206

GC6_p188-p208_9781406366846_PI_UK.indd 206 15/02/2016 16:20

 HTML (HyperText Markup Language) 10 pixels 38, 41
coding 20–33 points 41
document 9 programming languages 7, 10
elements 9, 10, 103, 104–111, 118–124 programs 6
tags 10, 20–30, 142–144 prototype 202
using with JavaScript 82–90
HTML5 localStorage 125–130 r
hyperlinks 62–5, 84 removeChild method 118–120
reserved words 83
i
id attribute 87 s
id selector 157 scale 194
if statements 72–4 script <script> tag 66
inline frame <iframe> tag 142–4 self-closing tag 25
image <img/> tag 27–30, 193–4 software 6
innerHTML property 105–7 source (src) attribute 27
input <input/> tag 87–8, 98–102 string parameter 145–6
Internet 8–9 style attribute 32, 34
style <style> tag 47
j syntax 35
JavaScript 10
coding 66–93 t
functions 78–81, 101–2, 159–161 text box 98–100, 112–4
operators 69–72, 166 text-align property 39
statements 67, 72–6 text-editing programs 14
using with CSS 172 title <title> tag 21
using with HTML 82–90 type attribute 88
variables 68, 70–1 type attribute selector 99
JPEG 27
u
l URL 9
line break <br/> tag 25, 26 image URL 28
loop 130, 162–3, 166–7, 170–1, 176
w
m web address – see URL
margin property 43 web browser 8–9
web page 8, 9, 23, 55–7 <!DO
<ht CTYPE

o linking between 64–5

m
<he l>
ad
<tit >
le>T
h
htm
l>

onclick attribute 82–5, 101–2 web server 9, 203 e

<bo ad>
D
</h iamo e Mon
nd<
/tit
k
dy le>
website 8, 64–5, 192–203 As >
tole

p width property 41–2

has
b
rip
var t>
ale diam
n dia
<sc een f mond
oun
d!

padding property 43 wireframes 192, 202 </s rt(dia ond =

</b cript m 3
o > o nd) 00;
</h dy> ;
paragraph <p> tag 24, 26 World Wide Web 8 tml>

password 86–93
percentages 42

207

GC6_p188-p208_9781406366846_PI_UK.indd 207 15/02/2016 16:20

 With thanks to
David Whitney, Ruth Nicholls,
Emma Mulqueeny and the
Young Rewired State ambassadors:
Alexander Craggs, Michael Cullum,
Chloe Gutteridge, Ross Kelso,
Stephen Mount, James Thompson,
Hugh Wells

First published 2016 by Walker Books Ltd

87 Vauxhall Walk, London SE11 5HJ

Written by David Whitney

Text © 2016 Young Rewired State

Illustrations © 2016 Duncan Beedie

The right of Young Rewired State and Duncan Beedie to be identified as author and illustrator respectively of this work has been asserted
by them in accordance with the Copyright, Designs and Patents Act 1988

All rights reserved. No part of this book may be reproduced, transmitted or stored in an information retrieval system in any form or by any means,
graphic, electronic or mechanical, including photocopying, taping and recording, without prior written permission from the publisher.

British Library Cataloguing in Publication Data:

a catalogue record for this book is available from the British Library

ISBN 978-1-4063-6945-8 (PDF)

www.walker.co.uk
www.getcodingkids.com