BEGINNER’S

STEP-BY-STEP
CODING
COURSE
LEARN COMPUTER PROGRAMMING THE EASY WAY
 DK DELHI
Senior editor Suefa Lee
Project art editor Sanjay Chauhan
Project editor Tina Jindal
Art editors Rabia Ahmad, Simar Dhamija,
Sonakshi Singh
Assistant editor Sonali Jindal
Jacket designer Tanya Mehrotra
DTP designer Jaypal Chauhan
Pre-production manager Balwant Singh
Senior managing editor Rohan Sinha
Managing art editor Sudakshina Basu

DK LONDON
Project editor Miezan van Zyl
Project art editor Francis Wong
Managing editor Angeles Gavira Guerrero
Managing art editor Michael Duffy
Associate publishing director Liz Wheeler
Publishing director Jonathan Metcalf
Art director Karen Self
Jacket design development manager Sophia MTT
Producer (pre-production) Gillian Reid
Senior producer Meskerem Berhane

First published in Great Britain in 2020

by Dorling Kindersley Limited,
80 Strand, London, WC2R 0RL

Copyright © 2020 Dorling Kindersley Limited

A Penguin Random House Company
10 9 8 7 6 5 4 3 2 1
001–311582–Jan/2020

All rights reserved.

No part of this publication may be reproduced,
stored in a retrieval system, or transmitted
in any form or by any means, electronic,
mechanical, photocopying, recording
or otherwise, without the prior written
permission of the copyright owner.

A CIP catalogue record for this book is

available from the British Library.

ISBN: 978–0–2413–5873–3

Printed in China

A WORLD OF IDEAS:
SEE ALL THERE IS TO KNOW

www.dk.com
CONTRIBUTORS

Clif Kussmaul is Principal Consultant at Green Mango Dr Tammy Pirmann is a computer science professor
Associates, LLC, where he designs and implements at the College of Computing and Informatics at Drexel
research projects, faculty development workshops, and University in Philadelphia, Pennsylvania. She is an
classroom activities. Formerly, he taught for 20 years at award-winning educator, recognized for her focus on
college level and worked full and part time in software equity in computer science education and for promoting
development and consulting. Craig was a Fulbright guided inquiry in secondary computing education. She
Specialist at Ashesi University and a Fulbright-Nehru was the co-chair of the Computer Science Teachers
Scholar at the University of Kerala. He has received Association’s Standards Committee and an advisor on
multiple grants from the US National Science Foundation, the K12 CS Framework.
Google, and other sources to support his work with
Process Oriented Guided Inquiry Learning (POGIL), Dr Martin Goodfellow is a Lecturer in the
Free and Open Source Software (FOSS), and other topics Computer and Information Sciences department
in computer science education. at the University of Strathclyde. He has also developed
educational computer science content and workshops
Sean McManus writes and co-writes inspiring coding for other organizations worldwide, including Google,
books, including Mission Python, Scratch Programming Oracle, CoderDojo Scotland, Glasgow Life, Makeblock,
in Easy Steps, Cool Scratch Projects in Easy Steps, and the BBC.
and Raspberry Pi For Dummies.
Jonathan Hogg is an audiovisual artist who has
Craig Steele is a specialist in computer science spent the last decade constructing works out of
education who helps people develop digital skills in combinations of software, electronics, sound,
a fun and creative environment. He runs Digital Skills light, wood, plastic, and metal. He often works
Education, and is a founder of CoderDojo in Scotland, with young people, running creative and technical
which runs free coding clubs for young people. Craig workshops. Prior to art, Jonathan designed and
has run digital workshops with the Raspberry Pi developed software in the London finance industry.
Foundation, Glasgow Science Centre, Glasgow School He began his career researching and teaching
of Art, and the BBC micro:bit project. Computing at the University of Glasgow. The
only constant in all of this has been Python.
Dr Claire Quigley studied Computing Science at
Glasgow University, where she obtained a BSc and David Krowitz learnt to program in the early
PhD. She has worked in the Computer Laboratory at 1980’s on a Commodore VIC-20 plugged into a
Cambridge University and at Glasgow Science Centre. portable black-and-white TV set. He has been studying
She is currently STEM Co-ordinator with Glasgow Life, and practising computer programming ever since.
and lectures part-time at the Royal Conservatoire of Nowadays, Dave spends his time building microservice
Scotland, working with BEd Music students. Claire architecture for businesses, whilst expounding his love
has been involved in running CoderDojo Scotland since for object-oriented design patterns and software
its initial session in 2012. architecture. See dotpusher.com for more info.
CONTENTS FOREWORD

About this book

INTRODUCTION
10

12

What is programming? 16

Coding in the real world 18

Working as a software developer 20

Programming languages 22
SCRATCH
What is Scratch? 28 Logic and decisions 44

Scratch interface 30 Input 46

Sprites 32 Sending messages 48

Coloured blocks and scripts 34 Using functions 50

Output using movement 36 PROJECT: Travel translator 52

Output using looks and sounds 38 PROJECT: Logic puzzle 64

Managing program flow 40 PROJECT: Asteroid dodge 80

Manipulating data 42
PYTHON
What is Python? 94 Libraries 116

Installing Python 96 PROJECT: Team allocator 118

Using IDLE 98 Debugging 130

Variables in Python 100 PROJECT: Project planner 134

Data in Python 102 Objects and classes 156

Logic operators and branching 104 PROJECT: Budget manager 158

Input and output 106 Pygame Zero 176

Loops in Python 108 PROJECT: Knight’s quest 178

Functions 112
WEB TECHNOLOGIES
How the Web works 206 JavaScript debugging 280

Code editors 208 Object-oriented JavaScript 282

Exploring basic HTML 210 Libraries and frameworks 284

HTML forms and hyperlinks 212 Graphic user interfaces 286

Build a better website 214 PROJECT: Animating the web page 288

PROJECT: Build a web page 216 PROJECT: Responsive website 304

Cascading Style Sheets 234

CSS selectors 236 Other programming languages 344

CSS styling 238 GLOSSARY 348

Responsive layouts 240 INDEX 352

PROJECT: Styling the web page 242 ACKNOWLEDGMENTS 360

What is JavaScript? 264

Variables and data types 266

Logic and branching 270

Input and output 272

Loops in JavaScript 274

Functions in JavaScript 278

 10 11

Foreword
If you’ve ever asked a teenager for help with your Starting at the absolute beginning, this guide will
computer, you’ll probably have felt the crushing introduce the jargon and tools you’ll need to get
weight of self-doubt as you realize you understood programming in the most popular and versatile
less than half of what they just said. That same software languages. The pages are also peppered
“helpful teen” would most likely scoff at the idea of a with interesting facts about coding and careers,
book – made out of honest-to-goodness old-fashioned together with step-by-step projects to get you going.
paper – on the subject of learning to code. “Just Even if you decide not to become the next Mark
Google it, there are loads of tutorials on Youtube!” Zuckerberg, the skills you’ll learn will be a great
they might say. asset when talking to technology professionals
But not everyone is high-bandwidth, multi-screen and will also help develop your own logic and
ready. Plus, when you are carefully stepping through problem-solving abilities.
the creation of your first lines of code, a physical page It was an ancient Greek philosopher who first noted
with your fingertip planted firmly on the next step can the irony “the only constant in life is change”, and
act as a valuable lifeline to the tangible world. this has never been more true than in the world of
If you’re reading this as a teenager yourself, computing. Maybe you’re looking for a different career
congratulations on discovering life beyond YouTube! or want to learn a new skill to support a hobby or
You’re about to find out that the creators of this guide passion project? Or perhaps you just want to be able
are exactly the kind of industry-defining professionals to talk to your tech-obsessed teenager in a language
whose content channels, blogs, and social media posts that will impress them!
you’d end up on if you did decide to Google “learning For those curious about coding, this guide is full of
to code”. straightforward information, in easily digestible bites,
As a life-long gamer and computing enthusiast written by some of the leading educators and experts
I’ve been reporting on technology for almost a quarter in their field. There is jargon, but it’s jargon you’ll
of a century. In that time, I’ve witnessed seismic understand as you get to it. Is learning about coding
changes in the way we interact with the world. A.I., essential? No. Will it help you understand and feel
big data, automation, e-commerce – all now intrinsic more comfortable in the world we now live? I think so.
parts of our daily routines even if we aren’t always Could it lead to a new and amazing career direction?
aware of them. Definitely, if that’s what you want.
Technology is no longer a niche topic. In fact, There is still a desperate shortage of technology
today, every industry could be considered a tech professionals in the workforce. Opportunities exist,
industry, which leads to a simple choice: get with but they are not going to come looking for you unless
it or get left behind. you speak at least a bit of their language.

Kate Russell
Technology reporter,
author, and gamer
About this book
How this book works grouped under Web Technologies. The book defines
Divided into three chapters, this book teaches the the basic concepts of each programming language and
fundamentals of five programming languages: Scratch, builds on them with the help of detailed projects that
Python, HTML, CSS, and JavaScript; the last three are you can try on your own.

Concepts
Each chapter contains the basic
programming concepts of the language.
These are explained with the help of
practical code examples that you can try
out to understand the concept better.

Illustrations help
you understand
and learn concepts

Projects
The projects in this book teach you how to YOU WILL LEARN
create games, planners, apps, and websites. Indicates the estimated
Each project starts with a brief overview of Time: time it will take to create
what you will learn in the project, how to 1 hour a project
plan the project, and what you will need to
create it. Simple step-by-step instructions Lines of code: 58 Indicates the estimated lines
guide you through the project and explain of code in a project. This
Difficulty level may vary depending on the
every aspect of the code, with the help of
detailed annotations. code editor being used

YOU WILL LEARN

This box highlights the concepts Indicates the difficulty level of a
being used in a project project, with one being the easiest

1.2
Projects are broken down into 1.1
smaller sections with clear steps
to make learning easier

available = 2500.00
budgets = {}

STEP-BY-STEP

Hacks and tweaks

The “Hacks and tweaks” section at the end
of each project provides tips on how to Hacks and tweaks
tweak existing bits of code, or add new
functionalities to it.
 12 13
Coding elements in the book Icons
The “Save” icon will remind you to save the program at a
Icons, colour-coded windows with grids, and particular point in the project. The “HTML”, “CSS”, and “JS”
flowcharts that explain the program structure icons indicate which web file you need to write the code in.
help you work your way through the projects.

Python code windows

SAVE HTML CSS JS
Python uses two different windows – the shell window
and the editor window – for writing code. To differentiate
between the two, this book uses different colours. This will Each block of the grid represents
help you know which window you should type the code in. a single space in the code

>>> input = 2 def reset_game():

>>> score = input * 3 global score, charms
>>> print(score) score = 0
6 charms = 0

SHELL WINDOW EDITOR WINDOW

These chevrons appear only in Every indent (spaces at the start of a line)
the shell window. Type in the equals four empty grid blocks. All subsequent
code at the >>> prompt indents will be in multiples of four

Web languages code window

The code for all the Web languages ...<ul id="topMenu" class="navbar-nav mr-auto">
is written in green-coloured windows
in this book. A special visual element, <li class="nav-item">
a turnover arrow, is used to indicate
code being split over two lines. This <a class="nav-link" href=
element is not part of the actual code
and has only been introduced in the "index.html">Home</a>
book to help explain the flow of code
in a block. </li>

In this book, ellipses are used at the Grey code indicates an CODE WINDOW FOR The placement of the arrow
start of a line of code to indicate an existing line of code in WEB LANGUAGES indicates if a space needs to
extended indent, usually more than the program. It is used be added before it. In instances
eight grid blocks to identify the line below where there will be no space,
or above which the new no empty grid blocks are left
code must be added between the arrow and the code

DK website for code DK

The resource pack for the projects in this book (except the
“Hacks and tweaks” sections and the projects created in www.dk.com/coding-course
Scratch) have been hosted on www.dk.com/coding-course.
This includes code in its original format (.py, .html, .css, .js)
and images for all the games and websites. Go to this url to download the
Coding Course Resource Pack
INTRODUCTION
What is
programming?
Computers and electronic devices need
software (or programs) to tell them what
to do. Programming, or coding, is the art BECOMING A CODER
of writing these instructions. Though some After learning the basics of programming,
people are professional programmers, these tips can be used to develop coding
skills further.
coding can also be a hobby. • Practice: Write and experiment with code
• Read code: A lot can be learned by
studying other people’s programs
• Learn multiple languages: Learning
Computer programs are everywhere the different ideas and concepts of other
Programming is not just about conventional computer languages can help programmers choose
systems anymore. The world has become increasingly the most suitable language for each project
• Publish projects: Putting work online and
digital, and almost everything runs on software.
getting feedback on it from other coders
Programs are now incorporated into devices such as helps you to write better code
mobile phones and tablets, labour-saving equipment
around the home, and even in transportation systems.

Data centre
A data centre is similar to an
industrial-scale computing facility.
Its many servers may be accessed
over the Internet to store data or
run software “in the cloud”. The
“cloud” is a global network of Desktop computer
remote servers that can provide Computers are widely used in
services through the Internet. offices and homes for managing
administrative and creative activities,
such as music, design, writing,
Car banking, and many more.
Software can be used to Washing machine
monitor a car’s systems and Many household appliances run
performance, including its embedded programs to perform
speed, temperature, and a function. Inside the casing of a
fuel. The global positioning washing machine, software runs
system (GPS) used to manage its wash cycles, water
for navigation also temperature, and timings.
requires programs.
 INTRODUCTION
What is programming? 16 17
What is a computer program? Thinking like a computer
A program is a set of instructions that a computer To write a program it is necessary to
follows to perform a task. Programs can be extremely understand how a computer processes
complex, and there can be several different layers of instructions. This means that tasks need to
programs working together. Microsoft Windows, for be broken down into smaller chunks so that
example, is made up of millions of lines of instructions. the computer can understand the instructions.
For example, a robot cannot simply be asked to
Applications software, “make some toast”. It is necessary to program
such as word processors,
run on top of the
precise and detailed instructions for each step.
operating system
Instead of repeating
Operating systems, such 1. Open breadbin the same instruction
as Microsoft Windows 2. Remove loaf twice, it will be
and macOS manage the 3. Open bag shorter and clearer
hardware and software to say “Do this twice:
4. Remove slice
remove slice, insert in
5. Insert in toaster toaster” in a program
Firmware is software that
6. Remove slice
is coded into the hardware,
including the Basic Input/ 7. Insert in toaster
Output System (BIOS) 8. Push down plunger
9. Wait until toast
Hardware includes the physical pops up
elements of a computer, such
as the monitor

Games console
Consoles such as the Sony
PlayStation, Microsoft Xbox,
and Nintendo Switch are Camera
computers designed to offer Modern cameras use
a great gaming experience. software to change settings,
capture images digitally,
and enable users to review
and delete photographs.

Factory equipment
Factories can be highly automated. Assembly
line robots, planning and control systems,
and quality-control cameras all require
programs to operate.
 Managers and office workers
Many businesses create and use specialized software.
Software engineers develop complex software systems,
but managers and office workers often write short
programs to solve problems or automate tasks that
might take hours or days by hand. For example,
they might write code to query databases,
format information, analyse data, control
equipment, customize websites, or add features
to word processors and spreadsheets. Some
programming languages are specifically
designed for these purposes (see pp.344–47).

Artists and hobbyists

Coding can support many forms of
creativity. Artists can create software to
make music or visual art that changes as
people interact with it. Hobbyists might
create software for games, interactive
stories, to direct simple robots, control
lighting, or do tasks around the home.

Coding in
the real world
Coding is used in nearly every aspect of modern life
and work. Basic knowledge of coding helps people to
use software more effectively, create simple programs,
and communicate with other software developers.
 INTRODUCTION
Coding in the real world 18 19
Software engineers and web developers
Software developers work for many different businesses
and organizations. Businesses require software to
track inventory and place orders with suppliers,
to schedule employees and track work hours,
and to send mailings to customers. Insurance
companies use software to set pricing based
on the number and cost of events, and to
review and approve policies. Websites
often combine existing programs with
custom coding for special features.
Software engineers play key roles
in developing systems that suit
a client’s needs.

Scientists and researchers

Code can also be used to create
experiments, analyse data, and
create medical reports. For example,
brain scientists might use software
to display shapes or words to a
patient, to record brain activity, and
to analyse the data to learn what parts
of the brain are most active.

25,000,000
WORKERS ACROSS
THE WORLD ARE
SOFTWARE DEVELOPERS
Working as a
software developer
Writing a simple program might seem straightforward, but it can be
surprisingly difficult. Developing large, reliable software systems is
even more complex, and requires teams of software developers with
a variety of specialized skills and roles.

Analyse
In this phase, developers decide what the
software must do. They might study existing
systems, design new processes, or interview
people to understand how they will use the
system. This also defines other constraints
or requirements. For example, how much
data must the system handle, how quickly
must it respond, and what should it do when
problems occur? The resulting documents could
range from a few pages to hundreds or more.

Test
Developers check whether the
software works correctly, and fix
any problems they find during
the testing phase. This is often the
longest and least predictable phase,
and a common reason for delays
and extra costs. There are many
types of tests – unit tests check if
individual functions are correct,
functional tests check individual
components, integration tests
check if components work together,
and system tests check the
entire system.
 INTRODUCTION
Working as a software developer 20 21
Overview
Software development involves four phases: analyse, design and
plan, build, and test. These phases, however, can be structured in
a variety of ways. A waterfall model steps through each phase once,
which seems simple, but often leads to problems. An iterative model
cycles through the phases several times, building part of the system
in each cycle. An agile model cycles through each phase many times,
adding different features in each cycle.

Design and plan pieces, and specifying the files and even the individual
In this phase, developers decide how the software functions to be created. Developers also need to
will work and how it will be created. This can include estimate the time, effort, materials, and cost to create
deciding on which language to use, sketching user the system, and a schedule for who will do which tasks
interfaces, designing databases, subdividing it into at what time.

Build
In the build phase developers
create the software, including
user interfaces, databases, code,
and documentation for users and
programmers. This means that
coding is just one part of one
phase of software development,
and in some ways the easiest and
most predictable. As each piece is
built, developers might inspect or
review the code to see how well
it is written, and then integrate it
into the larger system.
Programming
languages
A programming language is a set of words and symbols that
allows people to write instructions for a computer. There is
sometimes a compromise between how easy the language
is to use and how powerful it is.

High- and low-level languages program can run on different hardware if it is written
High-level programming languages are designed to be in a high-level language. By contrast, low-level
easy to use without needing a detailed understanding languages give programmers granular control over
of the computer hardware. They often use words that the computer, but also require a deeper understanding
are similar to human language, and manage some of how it works. Programs written in a low-level
aspects of the computer automatically. Often, the same language might not work on other hardware.

Instruction to
HIGH-LEVEL LANGUAGES display some text
• Relatively fast to write
• Relatively easy to understand
• Usually fast enough in execution print("Hello!")
• Programs can be used on different
hardware Python
• No need to understand hardware A popular high-level language,
Python is easy to read and write.
This instruction puts the message
“Hello!” on the screen.

This is hexadecimal,
a common counting
system in computing
LOW-LEVEL LANGUAGES
• Direct control of hardware features
• Can increase speed of highly MOV AX, 66H
performance-sensitive code
• Requires an understanding of Assembly language
the hardware Assembly language more
• Program only works on the closely reflects the processor's
same or similar processor machine code. This example
takes a number and places it
into the part of the processor
called the accumulator.
 INTRODUCTION
Programming languages 22 23
Machine code How the computer understands
Low-level code that represents how the computer a programming language
hardware and processor understand instructions Ultimately, all programs end up as machine
is called machine code. It is a collection of binary code. Most programs are written in more
digits – 1s and 0s – that the processor reads and human-friendly languages and need to be
interprets. Machine code instructions are comprised translated into raw bits so that they can
of an opcode and one or more operands. The opcode be executed by a processor. An interpreter
tells the computer what to do and the operand tells translates and executes the instructions as
the computer what data to use. the program is running, while compilers
translate the program in one go before it runs.

Microprocessor
The microprocessor is the “brain”
of a computer and controls most
of the machine’s operations. It
carries out commands and runs
01101000
the machine code instructions. 01101001
00001101
00001010
HUMAN- CONVERT TO RUN
FRIENDLY COMPUTER INSTRUCTIONS
CODE INSTRUCTIONS

Using an integrated development

environment (IDE) APPLICATIONS
An IDE is a set of tools that helps programmers. It
has a code editor for writing programs, and may Once you have learned how to program, these
skills can be used for a wide range of creatively
include productivity features, such as autocomplete
fulfilling and useful projects.
for instructions and colour coding to help readability. • Home automation: To control things such
Some IDEs also include a debugger to help find as lights or curtains remotely
errors, and a compiler or interpreter to test and • Games: A great way to experiment with
run the programs. coding, games are easy to share and to
Code area to write
get feedback on (see pp.80–91, 178–203)
and edit programs • Robots: Using Arduino or Raspberry Pi boards
along with kits or electronic components,
people can program their own robots
• Websites and web apps: Programs that can run
File explorer anywhere in a web browser can be created using
for project files HTML, CSS, and JavaScript (see pp.210–343)

An example IDE layout

IDEs sometimes enable users to configure
their set-up. Here is one configuration that
allows the programmer to browse the
project files on the left, code and edit
on the right, and debug at the bottom.
Debugger to find
errors in the program
TYPES OF PROGRAMMING LANGUAGE

Types of programming language

Many different philosophies or paradigms have been used to design
programming languages over the years. Since they are not mutually
exclusive, programming languages often embody several core ideas. They
can also be used in different ways depending on the programmer’s preferred
approach. Python, for example, can be used for both object-oriented and
procedural programming. JavaScript can be used for event-driven and
object-oriented programming. The best approach or the best programming
language to use often depends on the programmer’s preference. Below are
some of the ways that programming languages can be defined and classified.

IMPERATIVE PROGRAMMING DECLARATIVE PROGRAMMING

These languages require a list of instructions for the In declarative programming, programmers tell the computer
computer to carry out. The programmer has to first what result they want, without needing to say how it will be
work out how the task can be completed, and then achieved. In the Wolfram Language, for example, a word cloud
provide step-by-step instructions to the computer. based on the words in Wikipedia’s Music page can be created
Imperative languages are common and include using a single line. Other declarative languages include SQL,
Python (see pp.94–95), C, C++, and Java. which is used for databases.

user = input("What's your name? ") WordCloud[WikipediaData["music"]]

print("Hello", user) INPUT IN WOLFRAM

INPUT IN PYTHON Python program

to greet a user
by name western musicians
classical work
styles
pop bass blues history

What's your name? Sean genres pitch

study Music styles
art
songs melody traditional period
Hello Sean culture
note era theory instruments
OUTPUT IN PYTHON
OUTPUT IN WOLFRAM

EVENT-DRIVEN PROGRAMMING
The event-driven programming concept is
Creates a
one where the program listens for certain
web page button
things to happen, and then starts the
appropriate program sequence when they
do. For example, a program might react <input type="button" value="Click me!"
to user actions, sensor input, or messages
from other computer systems. JavaScript
(see pp.264–65) and Scratch (see pp.28–29),
onClick="showMessage();">
among others, can be used to write
event-driven programs.
Runs the showMessage() This icon has been used in
JavaScript instructions when the book to indicate code
the button is clicked being split into two lines
 INTRODUCTION
Programming languages 24 25
CHOOSING A LANGUAGE
Sometimes, programmers’ choice PYTHON SCRATCH
of language may be dictated by the
A flexible language, it emphasizes A great first programming language,
hardware they are using, the team ease of understanding in the code. Scratch is perfect for simple games.
they are programming with, or the
kind of application they want to
JAVA JAVASCRIPT
create. Often, they will have a choice.
Here are some popular languages Widely used in financial services, The language used by web
that can be considered. small devices, and Android phones. pages for interactivity.

PROCEDURAL PROGRAMMING OBJECT-ORIENTED PROGRAMMING

This type of programming is based on functions, In object-oriented programming, the idea is that data and the
which contain reusable chunks of program. instructions related to it are stored together in “objects”. Objects can
Functions can start other functions at any time, interact with each other to achieve the program’s objectives. The
and can even start themselves again. They make aim is to make code more modular, so it is easier to manage, and
programs easier to develop, test, and manage. is more reusable. Many popular programming languages, such as
Many popular programming languages, such C++, JavaScript, and Python support object-oriented programming.
as Java and Python (see pp.94–95) support
procedural programming.
OBJECT

MAIN PROGRAM
Data for this object

Instructions for this object

Interfaces for communicating

FUNCTION 1

FUNCTION 3

VISUAL PROGRAMMING LANGUAGES

These languages make it easier to develop software using drag-and-drop
FUNCTION 2 interfaces, so a programmer can create software more quickly and with
fewer errors. Visual Basic, for example, includes tools to design user
interfaces visually. Scratch (see pp.28–29) is another highly visual language,
often used to learn programming.

A Scratch program to react

when a button is clicked
when this sprite clicked

say Button was clicked! for 2 seconds

SCRATCH
What is Scratch?
Scratch is a visual programming language that does not require
users to type code. Instead, they build programs using coloured
blocks that represent instructions. Scratch focuses on the creative
aspect of coding, and allows users to create interactive games,
stories, and other visual applications.

Features
Scratch has a number of features that
make it an ideal programming language
for beginners. The use of ready-made
blocks of code sets it apart from most
Com
other programming languages. Scra munity
t
othe ch allow
com rs throu s users t
m g o
prog unit y. h a buil conne
U t c
mod rams for sers ca -in Scrat t with
n
learn if y, and others t share t ch
by st remix o pla
y
heir
ud y i .
ng o They can with,
t h er
s’ pr also
ojec
t s.

drop
Drag and cks can be
h b lo
Scratc ped in
and drop
dragged rea to build
A
the Code here is very
T
programs. , so users are
g
little typin make errors.
to
less likely

uage
Power ful lang use,
h is ea sy to
Scratc
core concepts
but includes
sional
used in profes s. It
ng la ng ua ge
codi
ides a good
therefore prov uction
in trod
all-round
ing.
to programm

Jigsaw de
sig
Instruction n
b
like jigsaw locks snap together
pie
cannot con ces, so users
nect them
ways. Non in wrong
sensical co
are typical mbination
ly s
errors in lo impossible, so
gic are min
imized.
 SCRATCH
What is Scratch? 28 29
Learning to program with Scratch used in education. Scratch has a highly
Scratch was created by the Lifelong Kindergarten visual interface with coloured blocks of
group at the Massachusetts Institute of Technology code that join together to form scripts,
(MIT) in the US. It was first launched in 2007. which can include images and sounds
Scratch was designed to be fun and easy to use to create action on screen. Scratch provides
for beginners, and to help them understand basic a powerful platform (see pp.30–31) for
concepts and avoid errors. It is therefore widely exploring programming.

Hardware support
The latest version of Scratch works on computers
with Windows, macOS, and Linux. It can even
Built-in assets be used on tablets. Scratch projects can use
th a pre-installed
Scratch comes wi d extensions to interact with hardware devices.
so un ds and images (calle
librar y of 3) th at ma kes it
.32–3
sprites – see pp r
g right away. Othe
easy to start codin es lac k in this
guag Raspberry Pi
programming lan d
need to be create . Scratch can use a Raspberry Pi to connect
regard as images itin g a program
be for e wr to other sensors or motors.
or uploaded

micro:bit
Scratch can be used with a BBC micro:bit,
which has a built-in LED display, buttons,
and tilt sensors.

Lego®
Scratch can connect to Lego® WeDo and
Lego® Mindstorms™ to work with motors,
sensors, and robots.

Webcam
Scratch can access a webcam to layer images on
a live video feed to create simple augmented
reality applications.

GETTING SCRATCH
The Scratch developer environment is required
Colou
Instru r coding
for using Scratch. It can be accessed both online
c
move tion blocks and offline.
m
and se ent, sound for
are co nsing (amo , control, In your browser
lo n
be ea ur coded, g others) Visit the Scratch website at
s s
when ily identifie o they can https://scratch.mit.edu/ and click
creatin da
g a p r nd re ad Join Scratch to create an account.
og r a m
.
Offline
Scratch can be downloaded and used
without an Internet connection at
https://scratch.mit.edu/download.
Scratch interface
The screen layout, or interface, in Scratch can be used to build
programs, edit them, and view the output in the same screen. The
interface is divided into several sections, each serving a particular
purpose. This book uses Scratch 3.0 – the latest version of Scratch.
Create new projects, Use the Sounds tab to
Understanding the screen layout Change upload or save work Edit existing add music and sound
The Scratch interface is divided into the language to the computer projects effects to sprites
following sections:
• Blocks Palette: This contains the instructions,
SCRATCH File Edit Tutorials
or code blocks, required to build a program
• Code Area: The instruction blocks are Code Costumes Sounds
assembled here to create a script
• Stage: Allows the user to interact with Use the Costumes
Motion tab to change
the program Motion the appearance of
• Sprite List: Displays and manages all the move 10 steps a sprite
images, or sprites, used in a program
• Stage Info: Manages the background images Looks
turn 15 degrees

Sound turn 15 degrees

Events
go to random position
STAGE
BLOCKS CODE
Control go to x: 0 y: 0
PALETTE AREA
glide 1 secs to random position
SPRITE Sensing
LIST
glide 1 secs to x: 0 y: 0
Operators
STAGE INFO
point in direction 90
Variables
VERSIONS OF SCRATCH
point towards mouse-pointer
My Blocks
There have been three versions of Scratch so far,
Select instruction blocks and
each with a different screen layout. New features drag them into the Code Area
and instruction blocks were added at each update to build a program
of the interface. These features may not work on
earlier versions. Contains the instruction
• Scratch 1.4: The interface was similar to Scratch blocks that can be used
3.0, but the Code Area was called Scripts Area.
• Scratch 2.0: The Stage was on the left of the
screen. Introduced sprite cloning and reorganized
some blocks into the Events category. Backpack
• Scratch 3.0: Introduced Blocks Palette
extensions, and moved the Pen blocks into them. Use the “Add Extension” Store useful code, sprites, costumes,
button to add new categories and sounds in the Backpack so that
of blocks to the Blocks Palette they can be used in other projects
 SCRATCH
Scratch interface 30 31

The Stage shows Click or tap a

the sprites moving sprite on the
Share projects and interacting with Stage or in the Edit profile
Name of with the Scratch Access the community each other when Sprite List to and access
the project community page of a project a project is run select it saved projects

Untitled Share See Project Page scratch-cat

Changes the size
Stop the
of the Stage and
Run the program program
Code Area

when clicked

forever
glide 3 secs to x: 0 y: –150
glide 3 secs to x: 200 y: 100
glide 3 secs to x: –200 y: 100

Blocks snap together – use the

mouse to move them around

Stage
Sprite Sprite1 x -90 y -10

Show Size 100 Direction 90

This panel gives Backdrops

information about the 2
selected sprite

Sprite 1 Cactus

Drag instruction blocks into the A blue box This panel shows the sprites used Add new sprites Change the
Code Area and join them together highlights the in a program. Select one to see to the project backdrop
to build a script for a sprite selected sprite its code in the Code Area
Sprites
Sprites are the basic components of Scratch. Similar to characters
in a video game, they can move around the Stage, change their
appearance, and interact with other sprites. Each sprite uses one
or more images and is controlled by scripts.

How do sprites work?

Most sprites have multiple images, called costumes,
which can be used to animate them in a program. The Cat
sprite, for example, has two costumes that show its legs
in different positions. Switching between the costumes
makes it look like the cat is walking on the Stage. Scratch Default sprite
Every project starts with the Cat
comes with a preloaded library of sprites that can be sprite. Delete it by clicking the “x” Sprite1
used and modified in a program. on its thumbnail in the Sprite List.

Creating a sprite
Scratch allows its users to add or create their own images. The Choose
a Sprite button on the bottom right of the Sprite List reveals options to
add, create, or upload sprites in a project.

Upload Surprise
Users can include their own Scratch also has an option
images and upload them to the to add a random sprite from
Scratch interface to be used as the Sprite library. It can be a
sprites. This includes images, such quick way to add sprites to
as photographs, which may be experiment with, or to generate
required to create or new game ideas.
personalize games.

Choose a Sprite Paint

Scratch contains a large Users can create their own
library of sprites that can be images in Scratch’s Paint Editor
used. The sprites are divided into (shown on the right). This editor
categories such as Animals, is quite versatile and can be used
People, and Fantasy. Hovering to edit the costumes of existing
over a sprite in the library sprites in the Sprite library.
cycles through its costumes.
 SCRATCH
What is a sprite? 32 33
Painting a sprite’s costume
The Paint Editor in Scratch can be used to make new sprites or create
additional costumes. By default, the editor uses the vector mode, which
stores images as shapes and lines, making them easier to edit. The
user can switch to the bitmap mode, which stores the colour of every
bit in the image. The Paint Editor shown below is in the vector mode.

Select this tab to Name the costume

open the editor Undo / Redo
Control which
Combine or elements are in
Code Costumes Sounds split shapes front of others

1 Costume Costume1
Group Ungroup Forward Backward Front Back

Fill Outline 2
costume1 Copy Paste Delete Flip horizontal Flip vertical
239 x 315
Choose which
costume to edit Select an Line thickness Flip selected
Select a
outline colour elements
fill colour
horizontally
2 or vertically
Select tool

Eraser tool deletes

costume 2 a selected element
239 x 315
Text tool adds
Brush tool draws text elements
a shape in to an image
freehand
Fill tool adds
colour to a
shape

Use the Line,

Circle, and
Rectangle tools
to draw shapes

Convert to Bitmap

Add a Switch between vector Use the canvas to Zoom controls

costume and bitmap modes draw an image
Coloured blocks
and scripts
Scratch instructions come in colour-coded blocks that can be
assembled into chunks of program called “scripts”. These
blocks can be used for collecting input, processing information,
and displaying the output on screen.

Program flow computer systems, or sensors. Output, on the other

A program can receive information (input), do hand, can be given on the screen, by a printer, or by
something with it (process it), and then deliver the sending information to another system.
result (output). In a game, the input can be the player’s In Scratch, instructions in a program are built
key presses, and the output is the movement on screen. through code blocks. These instructions always run
A program may receive input from users, other from top to bottom, unless told otherwise.

Input blocks Processing blocks

touching mouse-pointer ? when backdrop switches to backdrop1

Sensing blocks Events blocks

These blocks check whether sprites or The hat-shaped Events blocks (see p.40) can also be
colours are touching each other, whether used to start processing scripts when something
keys are pressed, or are used to ask the happens, such as when the user presses a key or a
user to enter text (among other things). sprite sends a particular message to other sprites.

wait until

Control blocks
Control blocks are used to make decisions
about what to do next. They also dictate how
often a set of blocks should repeat, and when
the script should pause.

when this sprite clicked

Events blocks
These blocks detect when the green
flag is clicked, a key is pressed, or a
sprite is clicked.
 SCRATCH
Coloured blocks and scripts 34 35
Using the Blocks Palette Select this tab to begin

The Blocks Palette can be found on the Code Costumes Sounds

extreme left of the Scratch interface. It Motion Select a block and drag
contains nine different types of blocks Motion
move 10 steps it to the Code Area
and an “Add Extension” button that can
Looks
be used to add more blocks to the palette. turn 15 degrees
The blocks can be accessed by switching Sound when clicked
between the coloured categories and turn 15 degrees
scrolling through the list of blocks move 10 steps
Events
that appear. go to random position
Control Join the blocks
together
go to x: 0 y: 0
Sensing
Creating scripts
To create a script, click or press a block and Operators
drag it into the Code Area. Drop the block Click on a coloured
below another block and they will snap Variables category to see the
together to make a script. If the blocks fail to list of blocks in it
snap together, it means they cannot be used
that way, or they are not close enough to attach. My Blocks

Output blocks

+ move 10 steps

Operators blocks Motion blocks

These blocks are used for maths, and comparing numbers Motion blocks display the output of a
and pieces of text, as well as analysing text. They can also program by moving and controlling
be used to generate random numbers, and are great for the sprites on the Stage.
adding surprises to a game.

change my variable by 1 switch costume to costume 1

Variables blocks Looks blocks

Variables blocks are used to store information, such as These blocks can alter a sprite’s costume, change
the current score of a game. They can also be used to the background image, and display information in
store text. Certain blocks in this category can increase a speech bubble. They can also change a sprite’s
or decrease a variable’s number. size and visibility, and apply special effects.

start sound Meow

Sound blocks
Sound blocks are used to add sound
effects to a program. They provide audio
output by replaying recorded sounds.
Output using
movement
Scratch is an ideal language for programming simple games and
applications that move images around the screen. It has a set of
blue Motion blocks that can be used to control a sprite’s movement.
x axis
–240 0 240
Coordinates 180 x and y grid
The Stage here has
In Scratch, any position on the Stage can be been marked with grid
(x=180, y=120)
pinpointed using the x and y coordinates. The x lines every 60 steps. Try
axis runs from -240 on the left to 240 on the right, (x=–120, y=60) these positions in the

y axis
0 Motion blocks (below)
and the y axis runs from -180 at the bottom to 180 for moving a
at the top. When writing a program, coordinates sprite using
(x=–180, y=60) coordinates.
can be used to place a sprite in a particular position.
(x=60 y=-120)
–180

Moving sprites using

coordinates
These Motion blocks can be used to
move a sprite to a particular position change x by 10 set y to 0
on the Stage using coordinates. The
Alter x position Change y position
go to x: y: block and set x to and set y to Changes the x position by the Moves the sprite to a particular
blocks are often used to set a sprite’s number in the block, without y position, without changing its
starting position. changing the y position. It is x position. As with the similar x block,
used to move a sprite sideways. the sprite jumps straight there.

go to x: 0 y: 0 set x to 0 x position

Set sprite position Change x position Show x position

Makes a sprite jump to a particular Moves the sprite to a particular This block does not move a sprite,
point on the Stage. The numbers in x position, without changing its but shows the sprite’s x position when
the block can be edited to choose y position. The sprite will jump clicked. Drop it into other blocks to
different coordinates. straight there. use this coordinate in a script.

glide 1 secs to x: 0 y: 0 change y by 10 y position

Move sprite in given time Alter y position Show y position

This block smoothly moves the sprite Changes the y position Does not move a sprite, but shows its
to a particular point. The time taken by the specified number, y position. It can also be used with
for this journey can be specified in without changing the other blocks. For example, a sprite can
the input area for seconds. x position. be made to say its y position (see p.38).
 SCRATCH
Output using movement 36 37
0
Moving sprites using directions
-45 45
Scratch calls each position on the Stage a step. A sprite can be
moved by pointing it in a particular direction and then making -90 90
it walk forwards. The direction 90 degrees will make a sprite
face right. This is the default direction for most sprites. -135 135
180

move 10 steps turn 15 degrees

Move sprite Rotate sprite anticlockwise

This block moves the sprite 10 steps across the This block changes the sprite’s direction by 15
Stage. However, since this is just one movement, degrees the other way. The value in the degrees
the sprite will appear to jump, not walk. input can be changed by the user.

turn 15 degrees point in direction 90

Rotate sprite clockwise Change sprite’s direction

Changes the sprite’s direction by 15 degrees Sets the sprite’s direction to a specific number. The
clockwise. As with all blocks with input areas, the direction numbers are measured from 0 at the top
number of degrees can be changed as required. to 180 going clockwise, and -180 going anticlockwise.

Stops the sprite

drawing as it moves
to the start position

Drawing with pen blocks pen up

Each sprite has a pen, which it can use
go to random position
to draw a line as it moves around the Stage.
The thickness (or size) and colour of the Turns the
pen down pen on
line can be changed as required. The
pen down block is used to draw, while change pen color by 10
the pen up block turns off the pen. The
Pen blocks are an extension in Scratch 3.0. move 100 steps The script
changes the
They can be found under the Add Extension pen colour each
section of the Blocks Palette. turn 120 degrees time it runs

move 100 steps 100 is the

length of
the side
turn 120 degrees
Drawing a triangle
Try this script to draw a triangle using
the pen and movement blocks. Click
move 100 steps 120 is the
on the script to run it. The erase all angle to turn
block in the Blocks Palette can be turn 120 degrees for a triangle
used to wipe the Stage.
Output using
looks and sounds
In a game, sprites often mutate or play sound effects to tell players
what is going on. Changing a sprite’s appearance or playing sounds
can be useful in other programs as well. It can be used to warn
users or get their attention to look at something important.

Displaying messages say Hello! say Hello! for 2 seconds

In Scratch, sprites can display
messages through speech and Speech bubble Timed speech bubble
This block displays a speech bubble Using this block, a message can be displayed for two
thought bubbles. These are containing “Hello!” until a new say seconds before it disappears. Both the message and
created using the say and think or think block is used. its duration can be changed.
blocks from the Looks section
of the Blocks Palette. The holes think Hmm... think Hmm... for 2 seconds
in these blocks can be used to
change the message to be Thought bubble Timed thought bubble
This block uses a thought bubble to This displays a thought bubble that disappears after
displayed, or to drop another display a message until a new say or two seconds. Again, it is possible to change both the
round-ended block in it. think block is used. message and its duration.

Changing a sprite’s appearance clear graphic effects

The Looks blocks can be used to show a sprite’s reaction to
a game event by giving it special effects. They can also help Remove effects
In Scratch, each sprite can have its
to display a message. There are even blocks to make a sprite own special effects. This block removes
visible or invisible on the Stage. all special effects applied to a sprite.

switch costume to costume1 set size to 100 % hide

Change costume Change size Hide sprite

This block changes a sprite’s costume to a Makes the sprite’s size a particular Makes a sprite invisible on the Stage.
particular image. The menu can be used percentage, considering its default It can still move around using the
to choose which costume to display. size to be at 100 per cent. Motion blocks.

next costume change color effect by 25 show

Show next costume Change effect Show sprite

Useful for animation, it switches to a sprite’s Increases (or decreases) a special effect using Makes a sprite visible on the Stage if
next costume or goes back to the first one, a positive (or negative) number. Both the it has previously been made invisible
depending on the sprite’s current costume. number and special effect can be changed. with the hide block.

change size by 10 set color effect to 0

Alter size Set effect

Changes the sprite’s size by the percentage Used to give special effects a particular
entered in the block. Using a negative number value, no matter what the current value
shrinks the sprite. is. Used with 0, this turns off the effect.
 SCRATCH
Output using looks and sounds 38 39

MUSIC BLOCKS
The Music blocks in Scratch are an extension,
set tempo to 120
and need to be added using the Add
Extension button on the bottom left of the set instrument to (20) Synth Lead
Blocks Palette. They make it possible for
programmers to use blocks to play musical play note 60 for 0.25 beats
notes. It is not necessary to know the number
for each note, since clicking the hole for the play note 62 for 0.25 beats
note number will display a piano keyboard to
help enter the required music. play note 64 for 0.25 beats

Scratch’s set play note 62 for 0.25 beats

instrument block has
21 built-in instruments play note 67 for 1 beats

Playing sounds play sound Meow until done change pitch effect by 10
Sounds are a great way to
provide feedback in a game Pause script to play sound Alter pitch
Sets a sound to play, and then pauses Changes the pitch of a sound effect. Positive
or as an alert in a program. the script until it is finished. The menu numbers make the pitch higher and negative
Before a sound can be used, in the block can be used to choose a ones make it lower. The stereo setting can
it has to be added to the different sound. be adjusted as well.
sprite from the Choose
a Sound button under the start sound Meow set pitch effect to 100
Sounds tab. Programmers
Play sound in background Reset pitch
can either use a sound from Starts playing a sound, but does not Resets the pitch or changes it to a value
the Scratch Sound library, pause the script. The sound plays in specified by the programmer. It can also be
the background while the script runs. used to adjust the stereo left/right setting.
or can record or upload a
sound of their own.
stop all sounds clear sound effects

Stop all sounds Remove sound effects

This block stops all the sounds, no This block resets all of the sound
matter which sprite started them, effects previously applied to sprites
or how many sounds are playing. or backdrops.
Managing
program flow
When writing code, programmers not only have to tell the computer
what to do, but also when to do it. In Scratch, the Control and Events
blocks are used to manage when an instruction is carried out.

Event-driven programming
In event-driven programming, the program’s actions are started by events,
such as user input, sensor input (see pp.46–47), or messages sent by other when clicked
programs or parts of the program. The Events section of the Blocks Palette
contains blocks that can start scripts when something happens. Also Use green flag to start
Provides an easy way for users to start the
called hat blocks due to their shape, these Events blocks provide many program. Copies of this block can be used to
more ways to start scripts than simply clicking on them. start multiple scripts simultaneously.

when this sprite clicked when loudness > 10 when I receive message1

Use mouse click to start Use sounds to start Use message to start
This block starts the attached script when When the microphone detects a volume Scripts can send messages to each other
the sprite is clicked. It is ideal for creating more than 10 (on a scale of 0 to 100), the (see pp.48–49). This block starts a script
on-screen buttons for users to click on. script can be activated. when a particular message is received.

when space key pressed when backdrop switches to backdrop 1

Use key press to start Use background to start

Starts a script when a key is pressed. The This block is particularly useful in story-based
menu in the block can be used to select projects. It enables scripts to start when
the required key. the scene (or background image) changes.

Making a clickable drum 2 Add the script

This example uses an Events block to make a simple Select the Code tab and add the following
script to the Drum Kit sprite. The sprite already
clickable drum. When the drum is clicked or tapped has the required sound. Click the sprite on the
on the Stage, the script plays a sound and briefly changes Stage to hear it play, and see its playing costume
the image (or costume) to show that it is playing. for half a second.

This costume
The blue highlight indicates indicates that the
this is the selected sprite Drum Kit is playing
when this sprite clicked

1 Add the Drum Kit sprite

Hover over the Choose a Sprite switch costume to drum-kit-b
icon in the Sprite List and select the
magnifying glass to see the library. Sprites start sound drum bass1
are listed alphabetically. Scroll down to
find the Drum Kit sprite and click or tap wait 0.5 seconds Reverts to
on it to add it. the original
Drum Kit switch costume to drum-kit costume
 SCRATCH
Managing program flow 40 41
Using loops to repeat Repeating forever
A loop is a part of a program that needs to be Sometimes a program needs to repeat
repeated. In Scratch, these blocks are placed forever, until explicitly stopped. For example,
within the bracket of a repeat block, so that a simple animation or game can play
Scratch knows where the repeating section starts indefinitely. The forever block repeats a set
and ends. The bracket automatically stretches to of instructions without ending. This block
make room for longer sets of instructions. has no nub to join other blocks underneath it,
since it never ends. To end the script, click
repeat 10 It is possible the red Stop button. A stop all block may
to change the also be used to stop the script.
number of
repetitions

when clicked Encloses the blocks

that will repeat
forever without end

when clicked go to random position

go to random position pen down These Motion
blocks draw
pen down Starts the sprite repeat 3 the triangle
drawing
repeat 3 The movement move 100 steps
instructions draw
move 100 steps one side and turn turn 120 degrees
turn 120 degrees

This marks the end pen up Stops the program from

of the repeating drawing while it moves to
pen up section the next starting position

Drawing a triangle Drawing infinite triangles

In the previous example of drawing a triangle (see p.37), This script will draw triangles in random positions
three copies of the instructions for moving and turning were forever. As shown above, a repeat loop can be
added. The script above, however, uses a loop, which is much placed within a forever loop. A loop inside a loop
easier to read and write. is called a nested loop.

INTRODUCING DELAY
It is not always desirable to have
a program run as fast as possible.
In many cases, a program may when clicked
need to be slowed down so that
when clicked move 10 steps
users can easily see what is going
on and have time to respond. move 10 steps wait 1 seconds
Games are often artificially
slowed down in order to ensure move –10 steps move –10 steps
that players can keep up.
Normal movement Delayed movement
In this example, the program runs so Introducing a wait block makes
fast that the sprite’s movements are it possible to see the sprite move
not visible. Nothing seems to happen. from right to left and back again.
Manipulating data
Programs are often used to manage and process data. This data
is either provided by the user or collected from other computer
systems. In Scratch, the Operator blocks are used to manipulate
numbers and text stored in variables.

Variables
Many programming languages use variables Strings
to store information. A variable can store one Programmers often call a piece of text in a
piece of information, either text or a number. program a “string”. For example, a string can
In a game, for example, two variables might be a name, an answer to a question, or an entire
be used to store the player’s name and score. sentence. In Scratch, any variable can store a
number or a string, and it can store different
Make a variable
1 To create a variable in Scratch, select Variables in the Blocks values at different times.
Palette and click on the Make a Variable button. Give the new
variable a meaningful name, such as score, so that the code is easy banana
join apple
to understand. Usually, variables need to be created for all sprites,
which means that all sprites can see and change the variable. Join strings
This block can be used to join two strings. The strings are
joined without a space, so the result for this example will be
“applebanana”. Variable blocks can also be used in place of
Make a Variable words typed into the block.

my variable The new letter 1 of apple

variable will be
score displayed here Extract letters
This block extracts one letter from a string. In this
example, the first letter of the string “apple” is extracted.

Use blocks with your variable

2 Use the set [variable name] block to reset
length of apple
the variable’s value. For example, set score to 0. The Count a string
change [variable name] by block can be used to The number of characters in a string can be counted using this
increase or decrease the value. block. The result for the block can be viewed by clicking on it.
It can also be dropped into other blocks to use in a script.
set score to 0 change score by 1 apple contains a ?

Check strings
This block checks whether the second string input is in the first
one, and gives the answer as true or false. It is also possible to
check for more than one letter: apple contains app?
 SCRATCH
Manipulating data 42 43
LISTS
A list is used to store similar pieces of information,
such as a list of names. In Scratch, a list can be created
from the Variables section of the Blocks Palette. List
positions are used for inserting and deleting items. For
example, the delete 2 of [list name] block can be used
to remove the second item from a list.

Length of the shape’s sides

Numbers clicked is randomly chosen,
when
Operator blocks are a core part between 10 and 100 The angle to turn is set at
of Scratch, and can be used for go to x: 0 y: 0 360 degrees divided by
the number of sides
arithmetic operations, comparisons, erase all
and to pick random numbers.
set length of sides to pick random 10 to 100
Some operator blocks even work
with strings. pick random 3 to 8
set number of sides to
Used for Used for
subtraction to 360 / number of sides
addition set angle to turn
7 + 2 7 – 2 This repeats the
pen down code to draw
number of sides each side
repeat

length of sides steps

7 * 2 7 / 2 move

angle to turn degrees

Computers use Computers use turn
the symbol * for the symbol / for
multiplication division
Moves the sprite Drop the variable
pen up
out of the way block s into hole in
move 150 steps after drawing the Motion block
pick random 1 to 10
Drawing random shapes
Chooses a random number each time the green
The program above draws a random shape
between 1 and 10
clicke d. Start by making the variab les length of sides,
flag is
, and angle to turn. Click the green flag
number of sides
several times to create random art.
Making decisions
Decisions in Scratch can be made using the if-then block or the
if-then-else block. The required Boolean expression is placed
in the diamond-shaped hole. If the expression is true, the blocks
inside the if block’s bracket will run; otherwise, they are ignored.

Make a high score recorder

This script checks whether the if score > high score then
player’s score is more than the high
score. If it is, the high score variable set high score to score
is changed to the player’s score. These blocks
say New high score! for 2 seconds only run if the
variable score
is more than
high score

Using the if-then-else block

The if-then-else block can be used if score > high score then This block only runs
to add instructions that are run when if the variable score
the Boolean expression is false. This set high score to score is less than or equal
extends the example above with a to high score
message if the player’s score is not say New high score! for 2 seconds
more than the high score.
else

say You didn’t beat the high score this time! for 2 seconds

Boolean expressions 15 < 50

Used for making decisions in
programs, a Boolean expression
true
returns a value that is either
“true” or “false”. For example, the
< operator block checks whether 15 > 50
the number on the left is less
than the one on its right.
false

Logic and
decisions
Programs can be made more flexible and useful
if they are coded to make decisions about what to
do next. They can use variables to control which
instruction to run, and when to run them.
 SCRATCH
Logic and decisions 44 45
Combining expressions
Boolean expressions can be combined to make decisions
based on more than one factor. Here are some examples
using the current year Sensing block. It has a menu in it
to change the year to other time periods.

Using the and block

The and block has spaces for two Boolean expressions, and it checks
whether both expressions are true. In this example, the program
checks the month and date to give a special Valentine’s Day message.

if current month = 2 and current date = 14 then

say Happy Valentine’s Day! for 2 seconds

Find this block under the Looks

Using the or block section of the Blocks Palette
The or block checks whether either expression is true. In Scratch,
the week starts with day 1 being Sunday. This example checks the
day and displays a message if it is Saturday or Sunday.

if current day of week = 1 or current day of week = 7 then

say Hurrah! It’s the weekend for 2 seconds

Using the not block

The not block can be used to run instructions if if not current month = 12 then
an expression is not true. This example displays
a message if the month is not December. say It’s too early to talk about Christmas for 2 seconds

USING BOOLEANS
Boolean expressions can Using Booleans with loops
be used in other ways as The repeat until block repeats repeat until lives left = 0
well. Clicking on them in one or more instructions until
the Code Area allows users an expression is true. In this case,
the loop will keep going until the
to see their results while player has no lives left.
programming. They can also
be combined with repeat
Waiting using a Boolean
and wait blocks to make a Using a wait until block will pause wait until score = 50
program repeat or pause a script until an expression is true.
until something changes. However, it is often better to use a The program takes no
broadcast (see pp.48–49). action till the score is 50
Input
Sometimes programs need to receive information in order
to deliver a result, or output. Scratch has several ways
of getting input, including through key presses,
by sensing on-screen interactions, and by
asking users to type in information.
User interactions
Users can type information into
the computer, or use the keyboard
Types of input or mouse to provide movement or
There are a lot of different ways in which positioning instructions.
information can be entered into a computer
system for processing. In Scratch, input to a script
External information
is usually in the shape of a rounded block that Scratch can detect the username of the
contains some information, or a pointed block logged-in user, the current date and time,
that contains a Boolean expression (see p.44). and can get translations from Google
Translate using an extension.

Sensor input Information for processing

Some computer systems can sense the outside Sometimes programs are given some
world. In Scratch, it is possible to detect the information to work with. For example,
loudness of sounds and video camera a program might have a list of items to
movements. Sprites can detect each other. add up for a shopping checkout.

Moving under keyboard control If the up arrow is pressed,

In many games and other programs, the user when clicked
the sprite’s y position goes
presses keys on the keyboard to move objects or pen down up by 10
make things happen. Scratch has an Events block
forever
that starts a script when a key is pressed. However,
for smoother movement, a script can use a loop that if key up arrow pressed ? then
continuously checks for key presses. change y by 10

if key down arrow pressed ? then

This block change y by -10
moves the
sprite down

if key left arrow pressed ? then

change x by -10
Movement script
This script illustrates
how to move a sprite if key right arrow pressed ? then
under keyboard control,
using the arrow keys. It change x by 10
uses the pen to draw a
line as it goes, so it can
also be used as a simple
art program.
 SCRATCH
Input 46 47
Collision detection
touching mouse-pointer ?
Video games often need to detect when two
objects touch each other, which can require tricky This block can be
calculations. However, Scratch has this capability mouse-pointer found under Sensing
in the Blocks Palette
built in. The touching mouse-pointer block has a
edge
drop-down menu that can be used to detect if a
sprite is touching the mouse-pointer, the edge of Sprite1 The drop-down menu lists
the screen, or another sprite. the available options

Making the Dodge Ball game Add the cat’s code

Here is a simple game to demonstrate collision 2 Add these two scripts to the Cat sprite. The first
detection in Scratch. Start a new project and add script checks whether the ball has hit the cat. If so, it uses
the keyboard control script from the previous page a broadcast (see pp.48–49) to trigger the second script to
to the Cat sprite. show a message.

when clicked Senses whether the ball

Add the Soccer Ball sprite
1 Select the Soccer Ball sprite from the Sprite
is touching the cat
forever
library and add it to the project. Then click on the
sprite in the Sprite List and give it this script:
if touching Soccer ball ? then

broadcast ouch
Adds a random delay
when clicked before moving

forever

wait pick random 1 to 3 seconds Displays a message

when the cat is hit
glide 0.5 seconds to Sprite1
when I receive ouch
Zooms towards say Ouch! for 2 seconds
the player’s sprite

Colliding with colours

Scratch also has the ability to detect whether a sprite touching color ?
is touching a particular colour. This can be used, for
example, to detect when a ball has crossed a goal line
Detects whether a sprite
by making the line a certain colour that does not appear
is touching a colour
anywhere else on the screen.

Checks whether one colour

color is touching ?
is touching another

Text input from users This block stores the

information entered
The ask block can be used to get users to type in
when clicked
information. The question inside the block appears
in the sprite’s speech bubble. Whatever the user ask what’s your name? and wait
types goes into an answer block. This program say Join Hello answer for 2 seconds
greets the user by name.
Sending messages
One of the ways that programs, or parts of a program,
can interact with each other is by sending messages.
Scratch has a dedicated Events block – the broadcast
block – for this purpose. 1. All sprites listen
for any broadcasts
all the time
Understanding broadcasts
Broadcast blocks make it possible to
send a message from a script that can
be seen by all other scripts for all other
sprites in a program. Scripts can be
set to start when they receive the
broadcast message, either for the
same sprite (see p.47), or for different
sprites. The when I receive block is
triggered in response to an incoming
message, while the broadcast block
allows sprites to send messages to
other sprites.

Using broadcasts 2 Send the broadcast

In Scratch, a single broadcast can trigger multiple Click Speaker in the Sprite List and add the following script
to it. Find the broadcast blocks in the Events section of the Blocks
sprites to run their scripts. In the example below, Palette and click the menu to enter a new broadcast message.
when the Speaker sprite is clicked, it starts playing
music and also broadcasts a message. This message
then triggers the other sprites. When the music ends, when this sprite clicked
another message is sent, which makes the Ballerina broadcast music on
The default sound
sprite stop dancing.
effect for the sprite
repeat 3

play sound Drive Around until done

1 Add new sprites

Start a new project and delete the default Cat sprite.
Then choose the Ballerina, Butterfly 2, and Speaker sprites from broadcast music off Sends a message when
the library. Click the Choose a Sprite icon and use the Search the music ends
box in the Sprite library to find them.
Trigger the Butterfly 2 sprite
3 Next, click and drag the Butterfly 2 sprite on the Stage to
move it away from the speaker. Add this script to Butterfly 2. When
it receives the message indicating the music has started, the butterfly
will fly towards the speaker.

Moves the
when I receive music on Butterfly
Ballerina Butterfly 2 Speaker sprite to the
glide 3 secs to Speaker Speaker
 SCRATCH
Sending messages 48 49
2. When one sprite sends a
broadcast, it is picked up by
any sprite that may be
listening for that message

3. The sprites can use that

incoming message to start
their own scripts

SENSIBLE MESSAGES
The default name for a broadcast message
in Scratch is message1, but this can be
renamed by the user. To make a program
easier to understand, it is advisable to change
the message to something relevant. The menu
in the broadcast blocks can be used to choose
a new message name.

Trigger the Ballerina sprite

4 Select the Ballerina sprite in the Sprite List and add WHY BROADCAST?
these two scripts. A variable is used to store whether the
Ballerina should be dancing or not. When the music begins, Broadcasts can be used for several purposes
this variable is set to “yes” and the ballerina starts dancing.
The dance moves repeat until the dancing variable is set in Scratch programs. Here are some of the
to “no”. This happens when the Speaker broadcasts the most popular uses of broadcasting:
“music off” message. The outcome is that the ballerina starts
dancing when the music starts, and stops when it ends. • Synchronization: Broadcasts can be
used to trigger several scripts across several
The ballerina sprites to start at the same time, so that they
keeps dancing
when I receive music on can be synchronized as a group.
until this variable
stores “no” • Making other sprites move: Though a
set dancing to yes sprite can only move itself, it can also tell
other sprites when it is time for them to move.
repeat 3 dancing = no
For example, clicking the Speaker sprite also
next costume triggers the other sprites to move.
Adds a pause between
each costume change
• Enforcing a sequence: It is possible to make
wait 0.25 seconds sure scripts run in the right order by using
broadcasts to trigger them. The broadcast
and wait block sends a message, but the script
does not continue until every script that receives
the message is finished.
when I receive music off When the music
stops, the variable
set dancing to no is set to “no”
Using functions
A function is part of a program that performs a particular task and
can be reused. Functions make code easier to read, write, and test.
In Scratch, each block is a function, and users can define new blocks.

How the program flows

When a script is run, Scratch carries out one in the function. When the function ends, Scratch
instruction block at a time, from top to bottom. When picks up the main script where it left off. Functions
the instruction is a function, Scratch remembers its can be used by multiple scripts, and can accept
place in the script, and switches to run the instructions information for processing.

MAIN SCRIPT
RUNS

OTHER SCRIPTS
CAN ALSO USE
THE FUNCTION
AT ANY TIME

SCRIPT
CALLS THE
FUNCTION

THE
FUNCTION
BLOCKS RUN

WHEN THE
FUNCTION ENDS,
THE MAIN SCRIPT
PICKS UP AT ITS
NEXT BLOCK
 SCRATCH
Using functions 50 51
Define your own blocks instructions. The example below illustrates how to
To avoid repeating chunks of code multiple times, create a function to draw a triangle, and then use it to
Scratch allows users to create their own blocks. draw triangles of three different sizes, stacked on top
Each new block can be made up of several of each other. The end result looks like a fir tree.

Make a new block Add and name an input

1 Go to the My Blocks section of the Blocks Palette 2 Select the option to add a text input. A new
and select the Make a Block button. Name the block input area will appear in the block. Name this “length”
“draw a triangle of size”. and click OK.

My Blocks
draw a triangle of size length
Make a Block Button to make
a new block

Define your script Using the new block

3 Add the following instructions to the define block. 4 The new block can now be used in a
The number the function receives goes into the length program. Add this script to the Code Area,
block. To use it in the script, drag this variable block from and when the green flag is clicked, Scratch
the define block into the move 10 steps block. will draw three triangles.
Program starts
when the green
define draw a triangle of size length when clicked flag is clicked

erase all
pen down Pen blocks can be found
under the Add Extension set pen color to Select a green
repeat 3 section of the Blocks Palette colour here
go to x: -75 y: -140
move length steps
draw a triangle of size 150
turn 120 degrees
go to x: -50 y: -10 100 goes into
the function’s
Turns at the
draw a triangle of size 100 length variable

pen up triangle’s corner

go to x: -25 y: 75 This block
positions
Stops drawing after This block makes the
draw a triangle of size 50 the triangle
the triangle is made three sides of the triangle

WHY USE FUNCTIONS ?

Nearly all programming languages use functions in some • It is easier to write and test many small functions
way. Here are some advantages of using functions: rather than one large program.
• Once a function is written, it can be reused in The example above would be longer, more
other programs. complicated, and harder to understand if each
• When each function has a meaningful name, programs instance of “draw a triangle” were replaced by all
are easier to read. of the blocks in the function.
• When functions are reused, programs tend to be shorter.
Travel translator
Travellers like to use translation apps to help them communicate
in foreign languages. Using Scratch’s extension blocks, this project
will create a simple text translator. You can use it to translate any
text into dozens of different languages. This can be the perfect app
for your next holiday.

How the app works Translating languages

This project uses the Scratch’s Translate
To use this app, users first need to select a language extension to convert one language into
they want to translate the text into. The program then another. The blocks in this extension use
prompts the user to type in the phrase to be translated. the Google Translate API for the translations,
so make sure you are connected to the
Once the user enters a phrase, the app displays the Internet when using the app.
translated text in the chosen language on the screen.
Using the say block,
Click here to Click here to translations can be displayed Click this icon to exit
run the project stop the project on screen in a speech bubble the full-screen mode

This indicates the chosen language German

language you will
be translating
the text into

Press the buttons French German Russian

to choose the
language you
want to translate
the text into
Wie geht es dir?

You can change this

sprite to anything
you like from the
Sprite library

You can choose any

backdrop from the
Backdrop library
 SCRATCH
Travel translator 52 53
YOU WILL LEARN WHERE THIS IS USED
❯ How to add and code sprites Time: Good translation apps need to be accurate with
15–20 mins their translations. The code used in this project
❯ How to use the Paint Editor
to change a costume Difficulty level can be reused to translate from a list of languages
available in Scratch. You can also experiment by
❯ How to add Scratch extensions
adding blocks that speak the translation out loud so
to a project
you don’t need to worry about your pronunciation.

Program design
Programmers often use flowcharts – a graphical
START
representation of an algorithm – to structure their
programs and to show how they work. Each step
is shown in a box, with an arrow leading to the
next step. Sometimes, a step could have multiple
arrows leading onwards, depending on the
answer to that step. Wait for user to
select language

FRENCH RUSSIAN
BUTTON GERMAN BUTTON BUTTON
PRESSED PRESSED PRESSED

Set language Set language Set language

to French to German to Russian

Get phrase
to translate

Translate phrase to
chosen language

Display translation

Travel translator flowchart

First, this program waits for the user to
choose a language. It then waits for the
user to enter the phrase that needs to
be translated into the selected language, END
before displaying the translation on screen.
SETTING THE SCENE

Setting the scene

1 To begin coding this project you
1.1 START A BLANK PROJECT
Let us start with a fresh, blank project. Choose
first need to create an account on Scratch New from the File menu at the top left of the Scratch
interface. This creates a brand-new project.
by clicking on “Join Scratch”. Then start a
new project and add the sprite and backdrop
required to create the app. You can then build File Edit Tutorials
the code by joining together coloured blocks. New Select this option to
start a new project
Save Now

1.2 DELETE THE CAT

Scratch’s mascot is the Scratch
Sprites can also be deleted
cat. The cat is automatically added to every
by clicking the blue cross at
new project. You will not need it for this
the top right of their icon
app, so delete it by right clicking on it in
the Sprite List and choosing “delete”.
duplicate
Sprite1
export Click here
A selected sprite is to delete
always highlighted in blue a sprite
delete

1.3 ADD A NEW SPRITE

Scratch comes preloaded with a lot of
sprites that you can use in your projects. These Devin All Animals
include characters and other objects. For this
project, add a sprite named Devin. At the bottom
right of the Sprite List, select the Choose a Sprite Type in the name of Sprites are grouped
icon to open the Sprite library. You can scroll the sprite you want under several
through the sprites, or type “Devin” in the search to search for categories for
bar to locate it quickly. Then select the sprite to easy access
add it to the project. You can also create your own
sprite (see pp.32–33). Devin

SPRITE LIBRARY

Sprite Devin x 20 y -21

This menu is at
the bottom right Show Size 100 Direction 90
of the interface

Devin
Choose a Sprite

SPRITE LIST
 SCRATCH
Travel translator 54 55
1.4 CHANGE THE BACKDROP
It is now time to set the stage. Scratch uses
backdrops to set the scene for each project. Like the Sprite
library, the Backdrop library comes with a collection of
backdrops you can use. You can even create backdrops if Create your own
you like. Click the Choose a Backdrop icon at the bottom backdrop using
right of the screen. Type “Theater2” to search for the the Paint Editor
backdrop, and then select it to add it to the project.

Select this icon

All the action happens in the to open the
Stage area, which serves as a Choose a Backdrop Backdrop library
miniature screen

Now it looks like Devin is

standing on a stage. You
can reposition the sprite by
dragging it around the stage

1.5 A SIMPLE PROGRAM When the project starts, it asks the

Next, add some code. Click user to type a message. This message
on Devin in the Sprite List and add is then displayed on the screen
these blocks by dragging and dropping when clicked
them from the Blocks Palette on the
left-hand side of the interface. The
blocks are organized by colour, making ask What shall I say? and wait
them easy to find.
say answer
SETTING THE SCENE

1.6 TRY IT OUT

Now run the code and see what happens. Click the
green flag on the top left corner of the Stage to start the code. Devin will say
The red stop sign next to it will stop the code. whatever you
have typed in

What shall I say? Testing, testing

Type in a phrase and

press the tick icon to
test the project

Testing, testing

Adding a language
2 At the moment Devin can only speak in English – the
default language. To proceed with the program, you need to
add another language that Devin can translate the text into.
The next few steps will help you create a button for the language,
and will then add the Translate blocks to begin translating.

2.1 ADD A BUTTON

Start by adding a button to select a different language. drag it to the top left of the Stage. Rename the sprite by
Click the Choose a Sprite icon in the Sprite List and find the clicking the text box in the information panel and typing
sprite called “Button2”. Select it to add it to the project, then the word “French”.

Type here to rename the

sprite, so you know which This gives the position Drag the button to a
language it is for of a sprite on the Stage corner on the Stage

Sprite French x -164 y 103

Show Size 100 Direction 90

The new sprite

appears in the
Sprite List
Devin French
 SCRATCH
Travel translator 56 57
2.2 EDIT THE BUTTON SPRITE’S COSTUME
You can change the way a sprite looks by changing its tool lets you add text to an image. Select the Text tool
costume. Select the Button2 sprite to modify it, and then click icon and click inside the button. Then type “French”.
on the Costumes tab at the top left of the interface. This will This creates a label for the button. You can change
open Scratch’s Paint Editor. You can use this editor to draw your the font using the drop-down menu, or the colour
own costumes for the sprites, or edit the selected ones. The Text of the text using the Fill option, if you want.

Click here to open the

Paint Editor for editing
a costume

Code Costumes Sounds

Costume button2-a
1 Group Ungroup Forward

Fill Outline 0 Sans Serif

button2-a
121 x 54

Open the drop-down

Fill tool menu to select a font
2

Text tool

button2-b
121 x 54

French
All the
costumes of
a sprite are
listed here

Centre the text

on the button

Convert to Bitmap

This changes the mode

from vector to bitmap and
vice versa. You are currently
working in the vector mode
ADDING A LANGUAGE

2.3 CREATE A VARIABLE

You can now add some more code to the New Variable
project. Select the French sprite and then click on
the Code tab at the top left of the interface. Go to
Variables in the Blocks Palette and click the Make New variable name:
a Variable button. A dialogue box will pop up to This creates a
create a new variable. Name this variable “chosen chosen language new variable that
language” and select OK. will be used to
store the name of
For all sprites For this sprite only the language you
want to translate
Make sure this option is Cancel OK the text into
selected, so Devin can use
this variable

2.4 SET CHOSEN LANGUAGE TO FRENCH

Next, add these blocks of code to the French sprite. Type in the
When the user clicks on the sprite, it will set the chosen name of the
language variable to French. This will help keep track of language here
when this sprite clicked
the language you want to translate the text into later.

You can find these blocks set chosen language to French

in the yellow and orange
sections of the Blocks Palette

2.5 ADD AN EXTENSION BLOCK

It is now time to start translating.
Code Costumes Sounds
You will need to add some extra blocks to
do this. Select the Add Extension button
at the bottom of the Blocks Palette. You Translate
will see a selection of extra extensions Motion
that you can add to your projects. Choose
translate hello to French
the extension called “Translate”. This will Looks
add some extra blocks to your palette
in a section called Translate. language
Sound

Events
This block translates one
language into another
Control

Sensing

Operators

Variables

Every new section is

added at the bottom My Blocks
of the Blocks Palette

Translate
Click here to open the
Scratch extensions
 SCRATCH
Travel translator 58 59
EXTENSION BLOCKS
Scratch’s extension blocks allow projects to communicate Makey Makey
with hardware or software outside of the Scratch This lets you connect everyday objects to
your computer. These blocks allow you to
environment. Selecting an extension will add more use connected objects to control your games.
blocks to the Palette for you to use.

Music micro:bit
Use these extension blocks to make The micro:bit is a palm-sized gadget that
music using a variety of instruments you can control with the code blocks in
and drum sound effects. this extension.

Pen LEGO® BOOST

This extension enables a sprite to draw These blocks are designed to make it easy
across the screen like a pen. It could be for children (or people new to coding) to
used to create a painting app. build a set of interactive robots.

Video sensing LEGO® Education WeDo 2.0

These blocks let you connect Scratch to The WeDo extension blocks are used
your webcam. They can be used to detect to control simple robotic projects
movement in front of the camera. built with LEGO blocks.

Text to speech LEGO® MINDSTORMS™ EV3

Use this extension to make your projects These extension blocks are used to make
talk. These blocks use Amazon Web Services projects that control more advanced
(an online tool) to read text out loud. robots built with LEGO blocks.

Translate GoDirect Force & Acceleration

These blocks let you translate text into a lot This extension lets you use an external sensor
of different languages – this is the extension to record forces and acceleration and send
you are using in the current project. the information to your Scratch project.

2.6 UPDATE DEVIN’S CODE

You can now use the new Translate blocks.
Click on Devin and change the code to look like this.
If the chosen language is set to French, then Devin
will translate the text into French.
Find this block in the Operators section,
then drag and drop the chosen language
variable in the first hole, and type French
in the second hole
when clicked

ask What shall I say? and wait

if chosen language = French then

Update the purple
block with this
say translate answer to French Translate block
ADDING A LANGUAGE

2.7 TRY IT OUT

Test the code. Press the
French button, and then click the
green flag to run the project. Next,
type a phrase you want to translate
and click the tick icon to enter it. chosen language French

Reposition the button to

French
Le temps est magnifique
avoid overlapping with other
elements on the Stage

Devin will give the French

translation of the text you
enter. Here you can see the
French translation of “The
weather is beautiful”

Adding more languages

3 You can increase the complexity of the app and
make it more useful by adding more languages to the project.
Start by creating buttons for each new language and then
adding the Translate blocks, just like before. You can add
as many languages as you like.

3.1 CREATE MORE BUTTONS

In this step you will make a few
more buttons so you can translate into Sprite German x 143 y 104
other languages. Scratch makes it easy to
do this. Right click on the French sprite in Show Size 100 90
Direction
the Sprite List and choose “duplicate”. This
creates a copy of the sprite and all the code
associated with it. Create two duplicates Select this option
and rename them German and Russian. to duplicate a sprite
You can choose other languages if you like. French German

Devin French German

duplicate
Remember to rename
the new sprite German
export

delete
 SCRATCH
Travel translator 60 61
3.2 EDIT THE NEW BUTTONS
You now need to make some
changes to the code for each of these
new sprites. Edit the code for the when this sprite clicked
German and Russian buttons to look
like this. set chosen language to German

Type this for the

German sprite

when this sprite clicked

set chosen language to Russian

Type this for the

Russian sprite

3.3 UPDATE THE COSTUMES

Next, you will also need to edit the costumes
for these new sprites so their label reads German and
Russian, and not French. Remember to click on the
Costumes tab to open the Paint Editor and then use
the Text tool. Make sure you are in the vector mode.

chosen language Russian

French German Russian Drag the buttons

to the top of the
Stage and align
with the button
for French
ADDING MORE LANGUAGES

3.4 UPDATE DEVIN’S CODE

Finally, click on Devin in the Sprite List and edit the
code to get the correct translations. You can duplicate the
original code by right clicking on it and selecting “duplicate”.
Then just make the edits so it matches the code shown here.

when clicked

ask What shall I say? and wait

if chosen language = French then

say translate answer to French Duplicate these

blocks of code
to save time

if chosen language = German then

say translate answer to German

Edit these code

blocks to show the
if chosen language = Russian then correct language

say translate answer to Russian

3.5 TRANSLATE NOW

Congratulations! You have
now successfully created your first HELLO
app. Just click on the green flag and BONJOUR
start translating.
HOLA

AHOJ
 SCRATCH
Travel translator 62 63

Hacks and tweaks

Multilingual
translate hello to French
Create additional buttons and code blocks so you
can translate more languages. Scratch’s Translate
blocks allow you to choose from dozens of different
languages. Which ones would you like to add?
Scroll through Albanian
the list in the
drop-down
Arabic
menu to choose
a language
Armenian

Common phrases
“Hello”, “How are you?”, “How
much is this?” – these common when this sprite clicked
phrases are useful all over the
world. Can you adapt your code
and use the Translate blocks to see say translate hello to chosen language
the translations for these useful
phrases without having to type
them in? You might want to add
some dedicated buttons to do this. Add the phrase to
be translated here

Speak it
There is another Scratch extension called “Text to Text to Speech
Speech” that can be used to read text out loud. Tweak
your code so that the phrases are read out loud. You
can then listen and learn how to pronounce the words.
speak hello

Scratch has five different voices set voice to alto

that you can choose from

when clicked set language to French

ask What shall I say? and wait

then This will read

if chosen language = French the translation
out loud
set voice to tenor Use the drop-down menu to
select a voice for your sprite

speak translate answer to French

Logic puzzle
Puzzles are a great way to stimulate your brain and help
develop logical thinking and cognitive skills. This project
uses loops and Scratch’s Operators blocks to create a
complex logic puzzle. The program checks the code each
time a sprite moves.

What is the puzzle?

The aim of the puzzle is to transport a lion, a donut, and a rooster
from one side of a river to the other. You can only fit one sprite
in the boat at a time. However, if left unattended together, the Complex logic
lion will eat the rooster, and the rooster will eat the donut. The The complexity in the puzzle arises from
the restrictions on what sprites can be
challenge is to work out the logic and get everything over to transported at the same time, or what
the other side of the river, safely. sprites may be safely left together.

Click here to start

the program

Click on a sprite
to make it sit in
the boat

Click on the boat

to make it move
across the river

Create your own

backdrop using
the Paint Editor
 SCRATCH
Logic puzzle 64 65
YOU WILL LEARN WHERE THIS IS USED
❯ How to use the Paint Editor to Time: Computer programs can simulate real-world
create backdrops and sprites 20–25 mins problems and situations. By using code, it is
❯ How to create a simulation Difficulty level possible to investigate and test different ways of
solving a problem, often much more quickly than
❯ How to add complex logic
it would be to test it in the real world.
to a project

Program design
The program waits for the user to select a sprite. START
Once the selection has been made, the user
attempts to move the sprite across the river. The
program then checks to see if any of the rules
have been broken using one continuous loop. If
a rule is broken then it is game over. If the user
gets all the sprites across the river correctly, then
the puzzle is solved. Place all the sprites on the
left side of the river

Wait for the user to move a

sprite across the river

SPRITE
IS MOVED
ACROSS RIVER

YES
Have any of the puzzle
Game over
rules been broken?

NO

YES NO
Puzzle solved. Are all the sprites on the
User wins! right side of the river?
GETTING STARTED

Getting started
1 Starting a project usually involves picking
sprites and backdrops from the Scratch library. In
this project, however, you will create your own
backdrop and even a sprite using the Paint Editor.
You will then add some code to make the sprite
move across the screen.

1.1 START A NEW PROJECT

Create a new project You can also click this
and delete the default Cat sprite. icon to delete the sprite
Remember you can do this by right
clicking on the sprite in the Sprite
List and choosing “delete”. duplicate
Sprite1
export
Select this
option from the
delete
drop-down menu

1.2 DESIGN THE BACKDROP

Now create a background for
the puzzle. Click on Backdrops, under the
Stage section at the right-hand side of
the interface. Then, select the Backdrops Find this tab at the top of
tab to open the Paint Editor. the Scratch interface

Stage Code Backdrops Sounds

Costume backdrop1
1 Group Ungroup

Fill Outline 4
Copy Paste
backdrop1
Backdrops 2x2
1

Click anywhere in this section

to highlight the backdrops
 SCRATCH
Logic puzzle 66 67
1.3 START DRAWING
You need to draw a backdrop
that has a river in the middle and two
grassy banks on each side. First, select the
Convert to Bitmap button, then use the
Brush tool to draw the edges of the river.
Make sure there are no gaps in the lines;
they need to go from the very bottom
to the very top. It does not matter if the
lines are not straight.
Convert to Bitmap

Click this button to switch from

vector mode to bitmap mode

Code Backdrops Sounds

Costume backdrop1
1
Increase or decrease
this value to adjust the
10 thickness of the brush
Fill
backdrop1
239 x 360
Select black from the
colour palette
The Brush tool
is used to draw
lines freehand

Convert to Vector

Draw the lines in

the painting area
GETTING STARTED

1.4 FILL IT IN
Next, use the Fill tool to
colour each section of the backdrop.
Select the Fill icon (it looks like a paint
pot), then choose a colour from the
Fill menu at the top left of the Paint FILL TOOL
Editor. Just click on a section to fill it.

Make the grassy sections green, and

pick a shade of blue to fill in the river.
You can add more details if you want
the backdrop to look more realistic

1.5 MAKE THE BOAT

The stage is ready, so let’s add the first sprite. Scratch does use the tools to create a boat. Name this sprite “Boat” and
not have a boat sprite, so you need to create it using the Paint Editor. size it correctly. You can also choose the Bowl sprite from
Click on Choose a Sprite and select the paintbrush from the Sprite the Sprite library, if you like. Just make sure to change its
menu. This will open the Paint Editor. Select the bitmap mode and name to “Boat” and its size to “200” in the information panel.

Costume costume1

Fill

Choose a colour of
your choice from
the colour palette

Convert to Vector

Make sure the boat is sized

correctly on the backdrop
 SCRATCH
Logic puzzle 68 69
1.6 CREATE SOME VARIABLES
Now you are ready to write the
code. Click on the Code tab on the top left Variables
of the interface. Make sure the Boat sprite
is selected. Then, in the Variables section, Make a Variable This will be true or
click on Make a Variable button to create false depending on
three new variables. Name them “boat side”, the presence of an
“boat capacity”, and “boat moving”. boat capacity object in the boat

boat moving This will be true when

the boat is currently
moving across the river
Make sure these boxes are boat side This will be used to
unchecked to avoid making these track which side of the
variables appear on the Stage river the boat is on

1.7 GET READY TO SAIL

Next, add these code blocks to the
Boat sprite. When the project starts, this will
place the empty boat at the left side of the river. when clicked
You might need to adjust the x and y values so
that the boat sits correctly on the backdrop you go to x: -60 y: 0
created. You can drag the boat to place it where
you want and then copy the x and y position The boat starts
set boat side to left on the left side
from the sprite information panel into the script.
of the river
The boat is empty set boat capacity to empty
when the project starts

set boat moving to false

The boat is currently

not moving

Press the green flag

to run the project

The boat should

be sitting on the
left side of the river
GETTING STARTED

1.8 START SAILING

Now add this code to make the boat move to
the other side of the river when you click on it. Try it out
by running the project and clicking on the boat. The boat
should automatically move to the other side of the river.

This script will

run when the user
when this sprite clicked clicks on the boat

The boat is now moving,

set boat moving to true
so set this variable to true

if boat side = left then

broadcast boat is moving

If the boat is on the
glide 1 secs to x: 80 y: 0 The x and y values may
left, this moves it
need to be changed
to the right and
depending on the way
set boat side to right you have drawn the river
updates the variables

set boat moving to false

else

broadcast boat is moving Create a new message

by clicking on the
glide 1 secs to x: -60 y: 0 drop-down menu and If the boat is on the
choosing “New message” right, this moves it to
the left hand side and
set boat side to left updates the variables

set boat moving to false

Click on the boat to move

it across the river. Click on it
again to move it back to its
original position
 SCRATCH
Logic puzzle 70 71
Add a new sprite
2 The boat is ready to set sail. Now you
need to add another character to the puzzle.
Add the next sprite, then program it to move
along with the boat.

2.1 ADD THE LION Change this number to

Go to the Sprite library change the size of the sprite
and look for the Lion sprite.
Select it to add it to the project,
then change its size to 80 in
the sprite information panel.
Sprite Lion x -19 y 60

Show Size 80 Direction 90

Boat Lion Click here

to add a
new sprite

The selected sprite is

highlighted in blue

The Lion sprite

appears on the screen
at its updated size
ADD A NEW SPRITE

2.2 CREATE THE VARIABLES

With the Lion sprite still Variables
highlighted, go to the Variables section
of the Blocks Palette and create two
new variables for this sprite. Call them Make a Variable
“lion side” and “lion onboard”. If you
need to rename or delete a variable, boat capacity
right click or Ctrl + click on it.

boat moving

boat side
This will be true if the
Make sure these lion onboard lion is on the boat
boxes are unchecked

lion side This will be used to track

which side of the river
the lion is on

2.3 PLACE THE LION

Next, add these code blocks
to the Lion sprite to position it on the
left-hand side of the river when the when clicked Places the lion at the
project starts. Remember, you might top left of the Stage
need to adjust the x and y values to go to x: -180 y: 140 when the puzzle starts
suit your backdrop.
set lion onboard to false This means the lion
is not on the boat
Puts the lion on the set lion side to left
left-hand side of the river

2.4 GET ON THE BOAT

When the user clicks the
lion, it must move onto the boat.
Add this code to do that. Click on
the green flag to try it out.
when this sprite clicked
These blocks are run only if the
boat is empty. This prevents more if boat capacity = empty then
than one object from being inside
the boat at the same time
go to Boat This moves the
lion into the boat
Find this block in the go to front layer
Looks section of the Blocks The boat
Palette. It ensures that the Lion set boat capacity to full is full
sprite stays in front of the boat
set lion onboard to true

This means the

lion is on the boat
 SCRATCH
Logic puzzle 72 73
2.5 MOVE THE LION WITH THE BOAT
When the boat moves across the river, the
lion needs to move with it. This will make it seem
like the lion is sailing to the other side of the river.
Add the following code to the Lion sprite to do this,
then run the code. See if you can move the lion across
the river in the boat and then back again.

Click on the lion

to move it along
These blocks are run with the boat
when the user clicks
on the Boat sprite

When I receive boat is moving

This loop runs only if

if lion onboard = true then
the lion is on the boat

repeat until boat moving = false

go to Boat The lion moves along

with the boat until
go to front layer the boat stops

if boat side = right then

If the boat ends up on the
go to x: 165 y: 99 right, this moves the lion
to the grassy area on the
set lion side to right right-hand side of the river
and updates the variables
else

go to x: -180 y: 140
If the boat ends up on the
left, this moves the lion
set lion side to left to the grassy area on the
left-hand side of the river
and updates the variables

set boat capacity to empty Ensures the boat

is empty
set lion onboard to false

This means the lion is

no longer on the boat
ADD MORE SPRITES

Add more sprites

3 The next step is to add more characters to
3.1 ADD A DONUT
Go to the Sprite library
increase the complexity of the project. You need and look for the Donut sprite.
Select it to add it to the project.
to code the new sprites in exactly the same way It is a big sprite, so change its
as the lion in the previous steps. Then you can add size to 50 in the information panel.
some rules that will constantly check if the correct
Donut
logic has been applied to solve the puzzle.

3.2 COPY CODE FROM THE LION

Sprite List. This will create a copy of all the blocks for the
The code for the donut is very similar to the code for the
lion. Luckily, Scratch makes it easy to reuse code. Click on the Lion Donut sprite. The blocks may get copied on top of each
sprite and find the blocks of code you made in steps 2.3, 2.4, and other, but you can right click in the Code Area and select
2.5. Drag and drop all of those blocks onto the Donut sprite in the Clean up Blocks to set them in order.

Sprite Lion x 165 y 99

Dragging and dropping
Show Size 80 Direction 90 code blocks onto other
sprites is a quick and
useful way to reuse code

Boat Lion Donut when this sprite clicked

boat capacity = empty then

if

go to Boat

go to front layer

set boat capacity to full

set lion onboard to true

3.3 UPDATE THE CODE

Now select the Donut sprite. You
will see the blocks you just copied across.
Update the code to make it work for the donut. when clicked This places the
First, create two new variables, donut side and donut below the
donut onboard, then edit the code blocks go to x: -180 y: 40 lion on the Stage
to look like this. Make sure you uncheck the
boxes next to the new variables. set donut onboard to false This means the
donut is not on
the boat
set donut side to left
 SCRATCH
Logic puzzle 74 75

when this sprite clicked

if boat capacity = empty then

go to Boat

go to front layer

set boat capacity to full Update this block with

the correct variable
set donut onboard to true for the donut

When I receive boat is moving

This loop runs only if the
if donut onboard = true then donut is on the boat

repeat until boat moving = false

go to Boat

go to front layer

if boat side = right then

If the boat ends up on the
go to x: 190 y: 0 right, this moves the donut
to the grassy area on the
set donut side to right right-hand side of the river
and updates the variables
else

go to x: -180 y: 40 Update these coordinates If the boat ends up on the

for the donut left, this moves the donut
to the grassy area on the
set donut side to left left-hand side of the river
and updates the variables

set boat capacity to empty

set donut onboard to false

ADD MORE SPRITES

3.4 ADD THE ROOSTER

Now add the final sprite to the
program. Go to the Sprite library and look rooster All Animals
for the “Rooster” sprite. Select it and make
sure you reduce its size to 50 in the sprite
information panel.

For a quick search, type Rooster

the name of the sprite
you are looking for

3.5 COPY CODE FROM THE LION

Next, add code to the Rooster. Just like you This will make a copy of all the blocks. Right click
did for the Donut, drag and drop all the code blocks anywhere in the Code Area and select Clean up
from the Lion sprite onto the Rooster in the Sprite List. Blocks to view the code blocks in an order.

Sprite Lion x -180 y 140

Show Size 80 Direction 90

Drag and drop all the blocks of

code from the Lion sprite, just
like you did with the Donut

Boat Lion Donut Rooster

when clicked

go to x: -180 y: 140

set lion onboard to false

set lion side to left

3.6 UPDATE THE CODE

Now you will need to edit the
code you just copied. Remember to
create two new variables rooster side when clicked Update the coordinates to
and rooster onboard, and make sure place the rooster below
you uncheck the boxes next to the go to x: -195 y: -100 the donut on the Stage
variables. The edited code for the
Rooster sprite should look like this. set rooster onboard to false

set rooster side to left

This puts the rooster on the

left-hand side of the river
 SCRATCH
Logic puzzle 76 77

when this sprite clicked

if boat capacity = empty then

go to Boat

go to front layer

set boat capacity to full

set rooster onboard to true Update this block with

the correct variable
for the rooster

When I receive boat is moving

This loop runs only if the
if rooster onboard = true then rooster is on the boat

repeat until boat moving = false

go to Boat

go to front layer

if boat side = right then

go to x: 165 y: -100

set rooster side to right

else

go to x: -195 y: -100
Update these blocks
for the rooster
set rooster side to left

set boat capacity to empty

set rooster onboard to false

ADD MORE SPRITES

3.7 ADD THE RULES Click on the drop-down menu

At this point, you and choose “New message” to
should be able to move when I receive check sides create this message
the objects back and forth
across the river. Now it is
time to introduce the rules if lion side = right and donut side = right and rooster side
of the puzzle. Add these
code blocks to the Boat say Win: Everything is on the right side of the river
sprite. They will check the
sides to see if any of the
rules are being broken, or
if the user has successfully
if lion side = left and donut side = right and rooster side
solved the puzzle.

say Lose: The Lion eats the rooster

If the lion and rooster are

left alone on the left-hand
side then it is game over if lion side = right and donut side = left and rooster side

say Lose: The Lion eats the rooster

If the lion and rooster are
left alone on the right-hand
side then it is game over
if lion side = right and donut side = left and rooster side

say Lose: The rooster eats the donut

If the rooster and donut
are left alone on the
left-hand side it will be
against the rules
if lion side = left and donut side = right and rooster side

If the rooster has been say Lose: The rooster eats the donut
left alone with the donut
on the right-hand side, it
will be against the rules

Hacks and tweaks

Design your own scenario
Use the Paint Editor to change the sprites’
costumes and the project’s backdrop to create
a whole new scenario for this puzzle. Maybe
it could be set in space, and you need to
transport aliens from one space station
to another, but you cannot leave certain
types of alien together. Use the Sprite and
Backdrop library to come up with more ideas.
Experiment with
other sprites and
backdrops to create
different scenarios
 SCRATCH
Logic puzzle 78 79
If every sprite is on the 3.8 ENFORCE THE RULES
right-hand side of the river then Finally, these rules need to be
the puzzle has been solved checked at all times. Just update the blocks
of code you added in step 1.7 with a few new
blocks. Then run the code and test the logic.
= right and boat side = right then

Find these blocks of

code in the Boat sprite

= left and boat side = right then

when clicked

go to x: -60 y: 0

set boat side to left

= right and boat side = left then
set boat capacity to empty

set boat moving to false

forever

= left and boat side = right then

broadcast check sides

= right and boat side = left then

The forever loop will

constantly check the
sides to see if any of the
rules have been broken

Count the moves Background music

Can you add a variable that counts how Many puzzle games have simple background music to help the player
many “moves” the player has made so far? focus. To add music, select the Backdrops icon at the bottom right of
You will need to add a new variable called the screen, then click the Sounds tab. Go to the Choose a sound icon
moves and set it to increase by one every at the bottom left and look for “Dance Chill Out”. Then add this code
time someone clicks on the boat. to make the sound play forever.

You can pick any sound

when clicked of your choice from the
Add this block to the code Sound library
created in step 1.8 to increase
forever
the number of moves

play sound Dance Chill Out until done

change moves by 1
 Asteroid dodge
In this Scratch project, you will create a side-scrolling
game with animated sprites. This is a great way to
get started with game development. The finished
game will test your concentration and the speed
of your reflexes.

How the game works Moving obstacles

The project creates an illusion of
The game lets a player use the up and down arrow keys to navigate motion by moving the obstacles
a rocketship around asteroids. The “Warp Speed” slider controls the along the x-axis and making them
speed of the game, and the rate at which asteroids appear increases appear at random intervals.
as the game progresses. Any contact between the rocketship and an
asteroid ends the game. Use the slider to Click here to exit the
increase the speed full-screen mode

Click here to
run the project

Blaster 3

Score 0

Warp Speed 5

Press the
space-bar to make
the rocketship
fire lasers and
destroy asteroids

Choose from
a selection of
space themed
backdrops in
the library
 SCRATCH
Asteroid dodge 80 81
YOU WILL LEARN WHERE THIS IS USED
❯ How to create a side-scrolling game Time: In this game, the background and other objects
20–25 mins move across the screen to make it seem like the
❯ How to use loops to create
continuous game play Difficulty level player is moving. This popular approach is called
a side-scrolling game, and can be adapted for racing
❯ How to create a game that increases
or shooting games.
in difficulty as it progresses

Program design
The program uses one main loop to check which key is being
pressed to move the rocket up or down the screen. It fires a
laser to destroy asteroids if the space-bar is pressed. Using
this main loop, the code continually checks if any rocks have START
touched the rocket to end the game.

Move rocketship Up arrow

up screen key pressed?
YES

NO

Move rocketship Down arrow

down screen key pressed?
YES

NO

Fire laser and

Pressed space-bar?
destroy asteroids
YES

NO

Game over Touched rock?

YES NO
PREPARE FOR LAUNCH

Prepare for launch

1 This project requires a few basic elements to get started.
The sprites and backdrop will create the space setting for the
game, and variables will add functionality.

1.1 ADD SPRITES

Start a new project and delete the default
Cat sprite. Then add the two new sprites required for
The Rocks sprite
this game: Rocketship and Rocks. You can find them
will be an asteroid
in the Sprite library.
that will try and hit
the Rocketship
Rocketship Rocks

1.2 PREPARE THE BACKDROPS

You will need two backdrops for this game.
First, click on Choose a Backdrop in the Stage section 1
at the bottom right of Scratch. Then select Space to
add the first backdrop for this game. You can pick any
other backdrop from the “Space” category if you want. backdrop 1
2x2

Click here to add Space

Choose a Backdrop The new backdrop
a new backdrop 480 x 380 can be viewed under
the Backdrops tab

1.3 PAINT IT RED

To create the second
backdrop, go to the Backdrops Costume backdrop1
1
tab and click on the original
backdrop1. Click on the Convert Fill Click here to select
to Bitmap button, and use the Fill the colour
tool to paint the backdrop red.
Finally, click the Space backdrop backdrop1
again so it will be selected as the 480 x 360
default background.

Space
480 x 360
Click here to Fill tool
make Space the
default backdrop

Convert to Vector
 SCRATCH
Asteroid dodge 82 83
1.4 CREATE VARIABLES
Use the Make a Variable button Variables
in the Variables section to create all the
This variable counts
variables required for this project. Make Make a Variable the number of asteroids
sure the check-boxes for the variables
that have been
Blaster, Score, and Warp Speed are
successfully dodged
ticked so that they show on screen. Avoided

Blaster

Gap Time The gap in seconds

between new asteroids
Stores the number
appearing; it gets smaller
of shots left in the my variable as the game goes on
laser blaster

Score

Warp Speed The speed at which

Stores the the rocket travels
player’s score

Code the rocketship

2 Now that the basic elements required for
the project are ready, you can begin coding. Start by
adding code for the Rocketship sprite. The next few
steps will add steering controls for the rocket, make
it move through space, and also add a blaster gun for
firing the laser.

2.1 PREPARE THE ROCKET

Select the Rocketship sprite
in the Sprite List and then add these
code blocks for it. This will set up the when clicked
rocketship for the game. Makes the sprite
set size to 50 %
half its usual size

Places the rocketship on go to x: -200 y: 0

the left of the Stage and
points it towards the right point in direction 180

set Warp Speed to 5

set Avoided to 0
There are three
set Score to 0
shots in the laser
This block will make blaster, but you can
the asteroids appear
set Gap Time to 2 change this number
every two seconds to make the game
set Blaster to 3 easier or harder
CODE THE ROCKETSHIP

2.2 SET UP THE CONTROLS

FOR STEERING
Next, update the code added in
the previous step by adding these when clicked
blocks of code at the bottom. They
will be used to steer the rocketship set size to 50 %
up and down the screen.
go to x: -200 y: 0

point in direction 180

set Warp Speed to 5

set Avoided to 0

set Score to 0

set Gap Time to 2

set Blaster to 3

The forever block ensures forever

continuous game play by
repeating this part of the if
program in a loop (see p.41) key up arrow pressed? then

When the up arrow key is

change y by 10
pressed, the rocket moves
higher up the screen

if key down arrow pressed? then

Pressing the down arrow

change y by -10
key moves the rocket
lower down the screen

2.3 TEST FLIGHT

Click here to
Click on the green flag
above the Stage to run the code run the code
and test the rocket. See if you
can make the rocketship move Before running the
up and down the screen using code, drag and drop
the arrow keys. these icons to the
top right corner to
Pressing the up and keep them out of
down arrow keys the playing area
controls the rocket

Do not worry about

the asteroid. This
will be coded later
 SCRATCH
Asteroid dodge 84 85
2.4 ANIMATE THE ROCKET 2.5 AVOID THE ASTEROIDS
Without the flame, it may look like the The next step is to add in some logic. Add these blocks
rocket has stopped. To avoid this, click on the to the Rocketship sprite. This will tell the rocketship what to do
Costumes tab and then right click on costume if it touches the asteroids that will be added later.
number five and choose delete. Next, add the
code given below to make the rocket appear as
if it is soaring through space. Test the code before If the rocketship touches
going on to the next step. the Rocks sprite then
when clicked it will be game over

forever
3
if touching Rocks ? then

broadcast Game Over

rocketship-c
128 x 184

4 Create this broadcast message

using the drop-down menu

rocketship-d
131 x 181 You can also
2.6 PREPARE THE BLASTER GUN
Now you will write the code that controls the blaster gun.
delete a costume When the space key is pressed, if there are shots left in the blaster
by clicking on the then the laser fires. To achieve this effect, the background quickly
5 small blue cross flashes to the red backdrop, which makes it look like the laser has
been shot. Add this code to the Rocketship sprite and test the code.

Checks if there are Plays a laser blaster

rocketship-e shots left in the blaster gun sound effect
143 x 159
duplicate when space key pressed
export
if Blaster > 0 then
delete
start sound laser2 Reduces the
number of laser
change Blaster by -1 shots left by one

when clicked switch backdrop to backdrop1

forever wait 0.05 seconds

wait 0.20 seconds switch backdrop to Space

next costume broadcast Blaster Fired

Create a new Quickly changes the

This loop changes the rocketship’s broadcast message background to red then back
costume every 0.20 seconds, making called Blaster Fired to Space, making it look like a
it look as if it is spinning shot has been fired
CODE THE ROCKETSHIP

2.7 UPDATE THE SCORE

Now add these blocks of code. This will
increase the score by one each time five asteroids
are avoided. Then, it reduces the Gap Time – this
means new asteroids will appear more often.
This operator block divides
the number of asteroids
avoided by five
when I receive Update Score

if Avoided mod 5 = 0 then

Increasing this number will
change Score by 1 make the game last longer

if Gap Time > 0.5 then The Gap Time is only reduced
if it is currently more than 0.5
seconds. This means the game
set Gap Time to 0.90 * Gap Time
never gets so difficult that it
cannot be played

This reduces the current

gap time by 10 per cent

Code the asteroids

3 Once the rocketship is prepared, you need to program
the asteroids. The code in the next few steps will make a
stream of asteroids move across the screen, making them fly
across space. An explosion will also be added to indicate the
asteroids being hit by the blaster gun.

3.1 CREATE THE ASTEROIDS

To write the code for the asteroids, click on
the Rocks sprite and add this code. The forever loop
means that once the game is started, asteroids keep
getting created. when clicked
Sets the size of
set size to 22 % the asteroids

This block hides the hide Once the game starts,

original sprite, so you
the forever loop keeps
only see the clones
forever creating new asteroids

create clone of myself

The Rocks sprite is
highlighted in blue wait Gap Time seconds
to indicate it is the
Rocks selected sprite
 SCRATCH
Asteroid dodge 86 87
3.2 MAKE THE ASTEROIDS MOVE
To create the illusion of the rocketship moving, of the screen. This way the player cannot guess
the rocks will move across the screen. Once they reach the where the next one will appear, making the game
left side, they vanish. The random blocks are used so that more challenging. Add this code to the Rocks sprite
each asteroid starts at different positions at the right side to make this happen.

when I start as a clone

set size to pick random 20 to 50 % The size of the asteroid is

chosen randomly

forever Makes the clone visible on

the Stage while the original
show Rocks sprite stays hidden

go to x: 200 y: Places the asteroid at the

pick random -240 to 240
right side of the screen at
a random position
forever

turn 15 degrees Makes the asteroids

spin as they move
through space
change x by -1 * Warp Speed

if x position < -240 then

If the asteroid reaches
the left side of the screen,
change Avoided by 1 increases the number of
avoided asteroids by one
broadcast Update Score
Removes the
delete this clone
asteroid

The rocks will appear on the

right edge of the screen at a random
y position, and move towards the left

Rocks will be of
random sizes
CODE THE ASTEROIDS

3.3 REMOVE ASTEROIDS 3.4 CREATE AN EXPLOSION SPRITE

Now it is time to add some code to fire the Next, add one more sprite to create an explosion
blaster gun. When this program is run it will destroy the when the asteroids hit the rocketship. Choose “Paint” from
asteroids when the blaster is fired. Add these blocks to the Choose a Sprite menu at the bottom right of the Sprite
the Rocks sprite and then test it out. Remember that you List, and name the sprite “Explosion”.
only have three shots.

Sprite Explosion x 36 y 28
when I receive Blaster Fired
Show Size 100 Direction 90
delete this clone

Rocketship Rocks Explosion

Removes rocks when
they are hit with the laser

3.5 PAINT THE EXPLOSION

Use the Paint Editor to draw a large fireball
effect. You can use the Brush, Fill, and Text tools to
create a large, colourful explosion.

Costume costume1
Group Ungroup Forward Backward Front Back

Fill Outline 0 Marker

Use the Text tool

or the Brush to
write the words Make the
explosion large

BOOM Using two

colours makes the
explosion look
more impressive

Convert to Bitmap
 SCRATCH
Asteroid dodge 88 89
3.6 HIDE EXPLOSION
When the game starts, you do
not want the explosion to be visible on
the screen. Add this code to the Explosion when clicked
sprite to hide it.
hide Hides the explosion
when the game starts

3.7 GAME OVER

Next, add these blocks of code to the
Explosion sprite. This will make the explosion This message is
appear in the middle of the screen when the
when I receive Game Over
broadcast when
Game Over message is broadcast and then the Rocketship
stops the game. go to x: 0 y: 0 sprite touches
an asteroid
This is the opposite of show
the hide block, so it
These points are the
displays the explosion
stop all middle of the screen

This stops all the

code from running,
ending the game

3.8 WARP SPEED SLIDER

One final touch is to right
click on the Warp Speed variable
at the top right of the screen and
choose “slider”. This means that
the player can now adjust the Blaster 3
speed of the game by moving
the slider left and right. The game Score 0
is now ready to play. See how far
you can guide the rocketship, and
do not forget to use the blaster Warp Speed 5
when you need to. You can even
adjust the Warp Speed slider and normal readout
see how fast you can go.
large readout

slider

Choose the slider

option from the
drop-down menu
HACKS AND TWEAKS

Hacks and tweaks

Add a cheat code to refill your blaster gun
Adding your own cheat codes is a fun way to
personalize a project. Add this code to the when x key pressed
Rocketship sprite so that when you press
the x key, the blaster is refilled with three Change this number to
more shots. You can also try to create a
set Blaster to 3
increase or decrease the
sprite that appears every 20 asteroids, and number of shots to be refilled
increases the number of blaster shots by
one if it touches the spaceship.

Deep space spectrum

Add this code to the backdrop and
it will make the background cycle when clicked
through a spectrum of colours, creating
a fantastic intergalactic light show.
forever

change color effect by 5 Increasing this number

will make the colours
flash quickly

Blaster 3

Score 0

Warp Speed 5

Run the code to see

the changing colours
of the backdrop
 SCRATCH
Asteroid dodge 90 91

Unidentified flying objects

You can easily add other objects for the rocketship
to dodge. Just add a new costume to the Rocks sprite
and then amend the code as shown here. This will
make dogs fly through space.

when I start as a clone

set size to pick random 20 to 50 %

switch costume to rocks

if pick random 1 to 10 = 1 then

These new blocks will change

the Rocks costume into flying
switch costume to dot-c
space dogs once every 10 times
the code is run

forever

show

go to x: 200 y: pick random -240 to 240

forever
1 turn 15 degrees

change x by -1 * Warp Speed

rocks
125 x 78
if x position < -240 then

change Avoided by 1
2
broadcast Update Score

dot-c delete this clone

104 x 139

The space dog

is added to the
Rocks costumes
PYTHON
What is Python?
Python is one of the world’s most popular programming
languages. It is extremely versatile, and can be used in
many real-world situations. A text-based language, the
readability and clear layout of its code makes Python
less daunting for beginners.

Why use Python? The syntax (arrangement of words and symbols

Created by Dutch programmer Guido van Rossum, forming the code) in Python is close to English
Python was released in 1991. It was designed syntax, which supports its goal of producing readable
as a high-level language that would appeal to code. In addition, Python also forces programmers
programmers familiar with the C language (see p.347) to lay out their code in a structured way. This is a
and the Unix operating system. Python lends itself to useful skill to develop as it makes it easier for the
writing a wide range of programs, and is used by programmer to debug the code, and also improves
many schools and universities to teach programming. readability for other users.

Features of Python
Python is a simple and minimalistic
programming language. It has a Free and open source
number of features that make it An example of a free/libre and
a popular choice for new as well open source software (FLOSS),
as experienced programmers. Python can be freely distributed.
Its source code can be read and
changed, and pieces of its code
can also be used in new programs.

Extensive libraries
One of Python’s greatest
strength are its libraries,
which contain code for
performing specialized
tasks. They make building
programs easier and quicker.

Portable
Python is extremely
flexible, and can be run
on a variety of different
platforms, such as macOS,
Windows, and PlayStation.
 PYTHON
What is Python? 94 95
How it works
A Python program, usually called a script, is a text APPLICATIONS
file containing words, numbers, and punctuation that
correspond to instructions. These instructions are Python is a general-purpose programming
language that can be used to create systems
formed of certain fixed patterns of words and symbols,
for a variety of purposes. This, along with
which the programmer types in. IDLE (Integrated its many specialist libraries, makes it useful
Development and Learning Environment) is a free app in fields as diverse as business, medicine,
that is installed with Python. Designed for beginners, science, and media.
it includes a basic text editor that allows the user to
write, edit, and save code before running a program. Game development
Python has various modules
and libraries that support
game development.
These include pygame,
for 2D games, and
PySoy, a cloud-based
3D game engine.

ENTER CODE SAVE RUN

Space
Software engineers
have used Python to create
tools for NASA’s Mission
Control Centre. These tools
help the crew prepare for
and monitor the progress
of each mission.
Embeddable
Python scripts can be
included in programs Business
written in other languages, Python’s easy syntax
such as C or C++. This makes it ideal for building
allows programmers to large applications. It has
enhance their code. become especially popular
with the rise of Fintech
(financial technology).

Simple and easy to learn Scientific computing

Extremely user-friendly, Python has libraries that
Python code uses can be used in specific
fewer punctuation areas of science, such
symbols than most other as PyBrain for machine
programming languages. learning and pandas
for data analysis.

Web development
Python is used by
Great support software developers for
Python has well-written automated tasks, such as
documentation, including build control and testing.
guides for getting started, It can also be used to
a reference section, and create web applications.
lots of example code.
Installing Python
It is important to download the right version of Python.
This book uses the current version: Python 3. It is free and
can be easily downloaded from the Python website. Follow
the instructions that match your operating system.

Python on Windows
Before you install Python, you need to find out if FLYING CIRCUS
your system has a 32-bit or 64-bit architecture. To
do that, click the Start menu, right-click This PC, Python is not named after the snake, as many people
think, but after the British television series Monty
and choose Properties. A computer’s architecture
Python’s Flying Circus. Guido van Rossum, who created
indicates how its microprocessor handles data the language, was a big fan of the programme, and
at the lowest level. A 64-bit processor provides Python was a title that stuck. There are numerous
higher performance, as it can handle more data references to Monty Python’s sketches in Python’s
at once than a 32-bit processor. official documentation.

1 Go to the Python website 4 Open IDLE

Go to www.python.org and click on Downloads in the Once the installation process is complete, go to the
menu bar on top. A list of operating systems will appear on Applications folder and find IDLE inside the Python folder. You
screen. Select Windows. can also search for it in the Start menu. Double-click on IDLE
to open Python’s shell window. You will see IDLE’s menu at
the top of the window.
https://www.python.org

2 Download an installer 3 Run the installer

Find the most recent Python installer, which should start Once downloaded, double-click the installer file
with 3. Be sure to select an x86 installer for 32-bit machines and follow the instructions that appear on screen.
and x86-64 installer for 64-bit machines. Either the web-based Remember to tick the box on the initial prompt that
or executable installer will work. says “Add Python to Path”.
The website could have a more
recent version of Python Python 3.7.3 (64-bit) Setup
Setup Progress
Python 3.7.3 - 2019-03-25
Download Windows x86-64 web-based installer
Download Windows x86 web-based installer Installing:
Initializing...
python
for Cancel
windows
Installation can be
cancelled at any point
 PYTHON
Installing Python 96 97
Python on a Mac
Before you install Python, you need to check which operating system
your Mac uses. This will tell if your system has a 32-bit or 64-bit
architecture. To find out, click the Apple icon in the top left of the screen
and select About this Mac from the drop-down menu. If the processor is
an Intel Core Solo or Intel Core Duo it means your system has a 32-bit
architecture, otherwise it has a 64-bit architecture.

1 Go to the Python website 4 Open IDLE

Go to www.python.org. Hover the cursor over the Once the installation is complete, open the
Downloads tab in the menu bar on top to generate a list Applications folder from the Finder window’s sidebar and
of operating systems. Select the macOS option to find find IDLE in the Python folder that appears. Double-click
the installers suited to Mac computers. on IDLE to open Python’s shell window and check that
installation has been successful.
https://www.python.org

2 Download an installer
Find the most recent Python 3 installer that matches
your operating system and select it. The Python.pkg file
will download to your system automatically.
3 Run the installer
Choose this installer Once downloaded, double-click the .pkg file
for 64-bit machines and follow the instructions that appear. The installation
process on a Mac computer is very straightforward.
It will only ask you to agree to the licencing requirements
Python 3.7.3 - 2019-03-25 and confirm the installation location (usually the
Download macOS 64-bit installer Macintosh Hard Disk).
Download macOS 64-bit/32-bit installer
Install Python
Choose this installer
Welcome to the Python Installer
for 32-bit machines

Go Back Continue

Select Continue to proceed

with the installation
Shell window
The shell window is opened as soon as IDLE is launched. It can be
very useful to try out ideas in this window as it gives instant feedback. The shell window
However, as the shell cannot save code it is not practical to use this shows the version of
window to evaluate more than a few lines of code at a time. Python it is running

Python 3.7.0 Shell

Python 3.7.0 (v3.7.0:1bf9cc5093, Jan 26 2019, 23:26:24 This information depends

on the operating system
[Clang 6.0 (clang-600.057)] on darwin being used

Type "copyright", "credits" or "license()" for more information

>>>

Editor window
The editor window can be opened COLOURS IN THE CODE
by selecting New File or Open from
IDLE’s File menu. This window allows To make code easier to read and errors easier to spot, IDLE
displays the text in the editor and shell windows using
programmers to type in much longer and
different colours. The colour used for each word depends
more complex series of instructions and save on its role in the code.
them in files. Python file names are easy to
identify as they end with .py.
COLOURS IN THE CODE
Code Colour Example

A Python file displayed Built-in commands Purple print()

in the editor window
Symbols, names,
Black 25
and numbers

helloworld.py Text within quotes Green “Hello world!”

print("Hello world!") Errors Red pront()

Keywords Orange if, else

Output Blue Hello world!

Using IDLE
Python’s Integrated Development and Learning Environment (IDLE)
interface has two windows for carrying out different tasks. The shell
evaluates short commands immediately, while the editor window
allows programmers to enter and save longer programs in files.
Running a program using IDLE
To run a program from IDLE, the file containing it must first be
opened in the editor window. If it runs successfully, the shell
window displays the output of the code, otherwise the relevant error
message appears.

Python 3.7.0 Shell

Python 3.7.0 (v3.7.0:1bf9cc5093, Jan 26 2019, 23:26:24

[Clang 6.0 (clang-600.057)] on darwin
Type "copyright", "credits" or "license()" for more information
>>>
======== RESTART: /Users/tinajind/Desktop/helloworld.py ========
Hello world!
>>>

Common errors
num = 4 Here “num” has
As well as being case-sensitive, accidentally been
Python is also very strict about if (nut == 5): typed as “nut”
the layout and spelling of code.
It requires sections of code to print("Hello world!") The mistake in code results
in this error message
be indented by four spaces from
the line above, in order to
make the code more readable. Traceback (most recent call last):
These features often trip up
new programmers. IDLE helps File "/Users/tinajind/Desktop/helloworld.py",
spot and fix errors with pop-up line 2, in <module>
information boxes and error
messages (see pp.130–33) in if (nut == 5):
the shell window. NameError: name 'nut' is not defined
>>>
Variables in Python
Variables are one of the most basic programming tools used
for storing and manipulating data. Similar to a box, they are
a storage mechanism that can hold values used in a program.

Creating variables This also allows the code to work in a variety of

In order to create a variable in Python, it must be different situations and for a lot of different inputs. The
given a name and a value. The value can be one of alternative to this is known as “hard-coding”, where
various types, such as a number or a string (see p.103). each calculation and expression contains a specific
However, as the name suggests, variables do not have value. This, however, would result in a situation where
a fixed value. Once data is stored in them, they can be the programmer has to write multiple programs to
updated to different values throughout the program. cover every possible value that might be encountered.

Assign a string
In this example, a new variable, box_name,
is declared and the value "Milk" is stored
in it. The quotes around the word “milk”
indicate that the value is a string.

>>> box_name = "Milk"

CRISPS JUICE

LENTILS COOKIES
SPICES

Assign a number
Here the command is declaring a variable
called water and storing the integer value
8 in it. In Python, this is also described as
assigning 8 to water.

>>> water = 8
WATER
Type in code at
the >>> prompt
 PYTHON
Variables in Python 100 101
DECLARING VARIABLES
DIFFERENT Creating a new variable is also called “declaring” it. In some
PROGRAMMING programming languages, a special keyword is used to show that
a new variable is being created. In Python, however, a variable
LANGUAGES HAVE is created as soon as a value is assigned to it. There is no need
to state what sort of data will be stored in the variable. Python
DIFFERENT WAYS OF will work this out from the value being assigned to it. Using a
CREATING variable without assigning a value to it is a common error.

VARIABLES
INSIDE A
PROGRAM Using variables
Once a variable holds a value it can be used in various ways.
The variable’s current value can be used in a calculation, or
the value stored can be changed to a new value.

Simple calculation
This code carries out simple >>> input = 2
multiplication. It stores the
integer 2 in variable input, >>> score = input * 3
then retrieves that value
MILK and multiplies it by 3. >>> print(score)
The result is stored in the
variable score and then 6
displayed on screen.

The result of Prints the value

the calculation assigned to score

Changing a value Changes the value of input

COFFEE TEA To change the value of a
variable, a new value can
be assigned to it. Typing >>> input = 5
this code into the shell
window below the >>> print(score)
Naming a variable previously written code
Giving a suitable name to a variable, will have no effect on the 6
helps make a program easier to value stored in score, it
understand. Here are some rules will only change the value
that have to be followed when naming of the variable input.
a variable: The result will not change
• Start the variable name with a letter
• Symbols such as -, /, #, or @ are Updating a value
not allowed To get the correct result, >>> input = 5
• Uppercase and lowercase letters are the value of the variable
different. Python will treat “Milk” and score needs to be updated >>> score = input * 3
“milk” as two different variables explicitly, as done in the
• Avoid using Python commands, such example here. >>> print(score)
as “print”, in the name
15
Adding this line assigns a
The output is new value to score after
updated input has been changed
Data in Python
Python programs work with various data types. These
types determine what can be done with different data
items, and how they are input, output, and stored. Errors
in Python code are often the result of forgetting to consider
a value’s type and what it allows.

PYTHON USES
THE SAME
RULES OF
ARITHMETIC
Integers and floats
Numbers in Python programs can be one of AS HUMANS TO CARRY
two data types: integer or float. An integer OUT CALCULATIONS
is a whole number with no decimal point,
while a float – short for floating point – has
a decimal point and numbers after it. Floats
are often used for measurements or as the Arithmetic oper
ators
result of a calculation. Numbers and va
riables containin
addition, subtract g numbers can be
ion, multiplicatio combined using
these processes ar n, and division. Th
pets is an integer variable e called arithmet e symbols for
subtraction use fa ic operators. Whi
and contains the value 2 miliar symbols, m le addition and
slightly different ul
and are shown as tiplication and division are
* and / respectively
.
>>> pets = 2
ARITHMETIC OP
ERATORS
>>> print(pets) Symbol
Meaning
2 + Addition

INTEGER - Subtrac tion

>>> temperature = 37.5 * Multiplication

>>> print(temperature)
/ Division
37.5
This variable co
ntains
FLOAT price as a float The result will be
The variable temperature stored
Calculations in the variable ta
contains a float x
These Py thon
commands >>> price =
8.00
use arithmetic
operators to >>> tax = pr
ice * (20/10
calculate the ta x 0)
owed on an item >>> print(ta
costing £ 8.00.
x)
1.6 The output is th
e value
stored in the va
riable tax
 PYTHON
Data in Python 102 103
Characters and strings
The data type Python uses for text is known as THE LEN() FUNCTION
string. Made up of individual letters, numbers,
or symbols called characters, strings must always In a lot of programs it can be very useful
to know the length of a string or a list.
have quotation marks at the beginning and the
Python has a built in len() function that
end. Python allows both single and double quotation can be used for both tasks. Remember that
marks in its code. the length of a string will also count spaces
and punctuation.
Strings
The variable forename >>> forename = "Alan" >>> len("Hello Alan")
contains a string made up
of the characters of the >>> forename 10
word Alan.
'Alan'

Combining strings
Combining two or more strings to make a new one is
called concatenation. Python uses the + symbol to do Lists
this. It is important to change any values with different It is often useful to be able to group items
data types into strings before concatenating them.
together in a program. Python provides the list
data type for this. A list can contain items that
have the same data type or a variety of data
>>> happy = "happy birthday to you "
types. To create a list, the values are enclosed in
>>> name = "Emma " square brackets and are separated by commas.

>>> song = happy + happy + "happy \ The string "two" enclosed

in double quotes
birthday dear " + name + happy
>>> song >>> my_list = [1, "two", \

'happy birthday to you happy 3, 5, 7.4]

birthday to you happy birthday >>> my_list

dear Emma happy birthday to you' [1, 'two', 3, 5, 7.4]

The variable song now Single quotes do Backslash splits code

contains a personalized not affect the value over two lines
version of “Happy Birthday”
Accessing items
Casting To allow programmers to access items in a list, Python
It is sometimes necessary to change the data type of a value numbers each one. Typing the name of the list
for a particular task, for example, when combining an integer followed by the item number inside square brackets
and string. This is called casting, and Python provides retrieves the relevant item. Python numbers the items
functions, such as str() and int(), to allow it. in a list starting at 0.

Change integer
to string >>> my_list[0] First item in the
list my_list
>>> age = 25 1
>>> print ("Your age is " + str(age)) >>> my_list[2]
Your age is 25 3
Logical operators = AND ==

and branching It is important to distinguish

between Python’s two different
equals signs. A single equals “=”
means that a value is being
Booleans, another data type in Python, assigned to a variable. A double
have only two possible values: True or equals sign “==” is a logical
comparison to see whether or
False. Booleans allow programmers to not the values on either side
write branching statements that control of it are equal.
which parts of a program are run.
Checks if the values on
Logical operators each side are equal
Logical operators are symbols that allow a Equality
A Boolean expression containing a >>> 3 == 9
program to make comparisons between values. double equals sign is True if the values
Any comparison that uses logical operators is on either side of it are equal. False
called a Boolean expression and the result is a
Boolean value. Logical operators are similar to
arithmetic operators (see p.102), but produce Checks if the value
on the left is smaller
Boolean values rather than numbers.
Less than
An expression containing the < symbol >>> 3 < 5
is True if the value on the left is less
LOGICAL OPERATORS
than the value on the right. True
Symbol Meaning

Less than >>> oranges = 5 Stores the value

< 5 in the variable
oranges
>>> apples = 7
> Greater than
>>> oranges != apples Values in
oranges and
True apples are
== Equal value not equal

Not equal
Logical operators also work with variables. This
!= Not equal value example stores values in two variables then checks
for the stored values being unequal.

Boolean operators
Boolean expressions can be combined
>>> (oranges < 10) and (apples > 2)
using the Boolean operators “and”, “or”, True For this to be True, both
expressions must be True
and “not”. They allow programmers to
build more complex expressions that can >>> (oranges < 10) or (apples == 3)
deal with several different variables. True Only one expression has to be
True for this statement to be True
>>> not(apples == 7)
Putting “not” in front of a
True expression results in False
the value False
 PYTHON
Logical operators and branching 104 105
This comparison is If the first condition is
the first condition True this is printed

More than
two branches quiz_score = 9
When there are more
than two possible paths if quiz_score > 8:
through the code, the
elif command – short print("You're a quiz champion!") This is the
for else-if – is used. second
It is possible to have elif quiz_score > 5: condition
several elif branches
between the if branch If the second
print("Could do better!") condition is
and the else branch.
True this line
else: is printed

print("Were you actually awake?")

If both conditions
are False this line
is the output

One branch
The most straightforward branching command has
only a single branch that the computer takes if the
condition is True. This is called an if statement. Two branches
A situation where a program should
temperature = 25 do one thing if a condition is True, and
This comparison another if it is False needs a command with
if temperature > 20: is the condition two branches. This is an if-else statement.

print("Switch off heating") age = 15

The comparison is
if age > 17: the first condition
If the condition is
True the code runs print("You can vote")
If the condition is True,
else: this line is printed

print("You are not old \

enough to vote")
Branching
Computer programs often contain
code that should only be run in certain
situations. To allow for this programmers
create branches in the code. The decision
about which branch to take depends
on the result of a Boolean expression.
This helps programmers tailor a A backslash is used to
If the condition split a long line of code
program’s behavior to different inputs is False this over two lines without
or environments. line is printed affecting the output
User input
To get user input from the keyboard, Python uses
the input() function. This function normally takes a
string as a parameter, which it displays to prompt
the user to enter the required data. The function
echoes the user’s input to the screen as a string, but
does not save it. It therefore makes sense to assign
the result of the input function to a variable so that
it can be used later in the code.
This string is displayed on screen
asking the user for an input
Output on screen
The print() function is used to display
>>> input("Enter your name: ")
a value on the screen. It is a versatile
Enter your name: Claire function that prints the value of any
variable or expression, regardless of its
'Claire'
data type. Programmers often use it to
debug code if their editor does not include
The user enters a name,
a debugger (see pp.130–33). Printing
but the value is not saved
so cannot be used later The user’s response is saved, out the value of variables at different
and the program can use it
to do something else
points in the code can be useful, but it
can also make the code untidy.

>>> name = input("Enter your name: ")

Enter your name: Claire
>>> print("Hello " + name)
Hello Claire
The program prints the string “Hello”
followed by the user’s name

Input and
output
There is no point writing a program
unless it produces an output that can
be read and understood. In Python,
programs often require some input,
either from a user interacting with
the program as it runs, or from a file.
 Input from file
Python has the ability to input data directly from a file.
This is especially useful in programs that require a lot of
data, and where it would not be feasible to have a user
type in the required information every time the program
runs. In Python, opening a file creates a file object. This
file object can be saved in a variable and used to carry
out various operations on the file’s contents.
Opens the file and saves the
file object in the variable file

>>> print("hello world!") >>> file = open("/Desktop/List.txt")

hello world! Prints a string

>>> file.read() Reads the data from the file

'High Street\nCastle Street\nBrown \

Street\n\n' “\n” prints each
>>> print(4)
output on a new line
4 Prints an integer >>> file.close() Closes the file

Prints a float
stored in a variable >>> file = open("/Desktop/List.txt")
>>> metres = 4.3 >>> file.readline()
>>> print(metres) 'High Street\n' Opens the file and reads
one line at a time
4.3 >>> file.readline()
'Castle Street\n'
>>> cats = ["Coco", "Hops"]
>>> print(cats) Prints a list
Output to file
['Coco', 'Hops']
In Python, it is also possible to output data to a file. This is
useful if a program produces a lot of data, or if it is updating
or adding to an existing input file. When opening the file, the
programmer must indicate that data will be added to it, and
whether it should be written before or after existing data.

The number of Opens the file for data to This means

characters written be appended to the end “append”
to the file
>>> file = open("/Desktop/List.txt", "a")
>>> file.write("Queen Street")
Writes the new value
12 “Queen Street” to the file
>>> file.close()
Loops in Python
Programs often contain blocks of code that are repeated
several times. Rather than typing the same lines over
and over again, programmers use loops. The type of loop
they choose depends on a number of factors.

For loop execution is called an iteration. The body is always

If a programmer knows the number of times a block of indented from the for statement and begins exactly
code will be repeated, a for loop is used. The code that four spaces from the start of the next line. Indentation
gets repeated is called the body of the loop and each can also be done manually.

Loop variable
This is like a list
This example loop counts from one to three, for counter in range(1,4):
that has the
printing each number on a new line, followed by
values 1, 2, 3
a line saying “Go!”. The loop variable keeps track print(counter)
of loop iterations. It takes the value of each item
in range(1,4) in a set order, starting with the print("Go!") This statement
first value for the first iteration. is the loop body

red_team = ["Sue", "Anna", "Emily", "Simar"]

For loop with a list print("The Red Team members are:")

To process a list using for loop there is no need to
use the range() function. Python can simply set for player in red_team:
the value of the loop counter to each item in the list player is the
in turn. In this example, the loop prints out each print(player) temporary loop counter
name in the list red_team.

While loops This question will appear,

asking for user input
Another type of loop in Python
is the while loop. It is used when
a programmer does not know
answer = input("Should I keep going? (y/n)")
how many times a loop will run
and cannot use a for loop. The while answer == "y":
number of iterations in this
answer = input("Should I keep going? (y/n)")
loop depends on user input.
Loop condition
A while loop includes a question called a loop
The question
condition, the answer to which is either True or
is asked again
False. The body of the loop is executed only if
the loop condition on that iteration is True. If the
loop condition is False, the while loop ends.
 PYTHON
Loops in Python 108 109

Infinite loops
While loops are also used in situations where the loop
is supposed to run as long as the program is running.
This is called an infinite loop and is commonly used
in programs for games. To create an infinite loop, the
user needs to set the loop condition to True.

while True:
print("There’s no stopping me now!")
Getting stuck
Unintentional infinite loops are Prints the line repeatedly
the coding equivalent of a black
hole. Program execution gets stuck,
making the computer unresponsive.

Emergency escape
Sometimes programmers create infinite loops by
INDENT THE BODY accident. This can happen if the loop condition
never becomes False in any iteration. An infinite
Similar to a for loop, the body of a while loop loop can be easily stopped from Python’s shell
is also indented four spaces from the while window by holding down the
keyword. If this indentation is missing, Python “Control” key and pressing “C”.
produces an error message saying “expected
an indented block”.

Missing indentation Sets the variable

produces this error number to 1

Variable value
The loop condition will number = 1
expected an indented block always be True if there
is no instruction to while number < 10:
increase the value of
OK the variable number print(number)
in the loop body.
 Nested loops
The body of a loop can contain another loop within itself. This loop
inside a loop is called a nested loop. In Python, any type of loop can
be contained inside any other type of loop – so a while loop can
contain another while loop or a for loop, and vice versa. In this
example, every time the body of the outer loop runs, the body of the
nested loop is executed 10 times, printing out a countdown to launch.

The answer = input("Launch another spacerocket? (y/n)")

nested
loop while answer == "y":
for count in range(10, 0, -1): This contains the
list 10, 9, 8, 7, 6, 5, 4,
print(count) 3, 2, 1, and counts
down from 10
print("LIFT OFF!")
answer = input("Launch another spacerocket? (y/n)")

This line updates the variable answer The loop stops if

during each iteration, making it possible to user input is n
exit the loop when required

Escaping loops sensor_readings = [3, 5, 4, -1, 6, 7]

While coding, a programmer might want to
exit a loop early, or may decide to abandon the total = 0
current iteration of the loop body and move
onto the next one. In such scenarios, there are
two related commands, break and continue, for sensor_reading in sensor_readings:
that can be used to escape the loop.
if sensor_reading < 0: Gives a total of all
sensor_readings up
Break break until the negative reading
The break command abandons the loop completely and
the code continues to execute from the instruction after the total = total + sensor_reading
loop. In this example, the loop stops when a negative value
is encountered in the list sensor_readings. The code print("total is: " +str(total))
discards this negative value and any values following it.
 PYTHON
Loops in Python 110 111
Lists of lists list, which is ["Red Team", "Adam", "Anjali",
Nested loops are often used when processing "Colin", "Anne"]. The loop variable name in the
lists within lists. The example below prints the inner loop then takes the values in team one
names of team members for three different after the other, until every name in the red team
teams. When the code runs, the loop variable has been printed. Each team listing is separated
team in the outer loop takes the value of the first by an empty line.

teams = [["Red Team", "Adam", "Anjali", "Colin", "Anne"], \

["Blue Team", "Greg", "Sophie", "June", "Sara"], \ The list teams
contains three
different lists
["Green Team", "Chloe", "Hamid", "Jia", "Jane"]] enclosed within
square brackets

Selects a team
for team in teams: to process
for name in team:
print(name)
print("\n")

Prints an empty line Prints the names in a

between each team listing team one after the other

readings = [3, 5, 4, -1, 6, 7] Initializes the variable

total by setting
total = 0 its value to 0

Triggers the continue

command after reading
for reading in readings: a negative value
if reading < 0:
Continue
continue The continue command is less drastic and only
abandons the current iteration of a loop. The
total = total + reading Gives a sum of all loop then skips to the next iteration. In this
the non-negative example, if a negative value is encountered, it is
print("total is: " +str(total)) readings simply ignored and the loop jumps to the next
value in the list.
Functions
Pieces of code that carry out a specific task are called functions.
If the task is executed often, it is possible to separate it from the
main code to avoid typing identical instructions multiple times.
Breaking the code into sections this way also makes it easier to
read and test the program.

Using functions Defining a function

Using a function is also known as “calling”
When a function is defined def greeting():
(see pp.114–15), it always has
it. Most of the time, this is as simple as typing the keyword “def” and the print("Hello!")
the function’s name followed by a pair of function’s name at the start
of the code block.
brackets. If the function takes a parameter
it goes inside the brackets. A parameter is a The keyword def
tells Python that
variable or value that is given to the function this block of code The parameter
to allow it to carry out its task. is a function of the function

POST OFFICE

A METHOD IS A
FUNCTION THAT
CONTAINS SOME
CODE TO CARRY
OUT A TASK
 PYTHON
Functions 112 113
Built-in functions
Python includes a range of built-in functions that enable the
completion of basic tasks. These include getting input from
the user, displaying output on screen, simple arithmetic, and
determining the length of a string or list. The examples below
can all be tried in IDLE’s shell window.

Number to be rounded
input() function’s parameter is a
question that prompts the user for input >>> pi = 22/7
>>> name = input("What is your name? ") >>> pi
What is your name? Tina User inputs 3.142857142857143
response
>>> print("Hello " + name) >>> round(pi, 2)
Hello Tina 3.14 Decimal places

input() and print() print() function’s round()

The input() function gets data from the user, parameter is a string that This function rounds off a float to a specific
and the print() function displays it as output is displayed on screen number of decimal places. It takes two
on the screen. The parameter for input() is parameters – the number to be rounded, and
displayed on screen to prompt the user. the number of decimal places to shorten it to.

Calling another way

Built-in functions, such as print() or len(), can be easily called because they
accept parameters of various types. A method is a function associated with a
particular object, and can only be used on that object (see pp.156–57). Calling
a method is different from calling a built-in function. A method call has the
object’s name, a dot, and the method name followed by a pair of brackets.

Object name
upper() method
This method transforms all >>> city = "London"
the lowercase letters in a
string to uppercase letters. >>> city.upper() The bracket
The upper() method can may take a
only be used with strings. 'LONDON' parameter

Method name

Adding to a list
The list method append() >>> mylist = [1,2,3,4]
adds a value to the end of a
list. It has one parameter – >>> mylist.append(5)
the value that needs to be
appended to the list. >>> print(mylist) The new value
is added to the
[1, 2, 3, 4, 5] end of the list
Creating functions
Python has a Standard Library that contains a lot of ready-made Defines a function that
functions. Most programs, however, include functions that have takes a temperature in This formula
Celsius and prints it converts Celsius
to be specifically made for them. In Python, creating a function in Fahrenheit to Fahrenheit
is known as “defining” it.

def print_temperature_in_Fahrenheit(temperature_in_Celsius):
temperature_in_Fahrenheit = temperature_in_Celsius * 1.8 + 32
print(temperature_in_Fahrenheit)

A function that completes a task

Prints the Some functions simply carry out a task without
temperature returning any information to the code that called
in Fahrenheit them. This is similar to sending a letter by normal
post. A postal worker delivers the letter and
completes his task, but does not inform the
sender that it has been delivered.

Top-down coding
In Python, functions are normally defined at NAMING FUNCTIONS
the top of the program, before the main code.
This is because it is important to define a Similar to the rules for naming variables, Python
also has a number of rules for naming functions.
function before it is called, either by another
Just as it is important for a function to have a
function or by the main part of the code. clear task or purpose, it is also important for the
function to have a name that clearly describes
what it does. So get_number() is not as good
def function_a(): a name as get_number_of_winners() for a
function that returns the value of the number of
return 25 function_a is people who have won in a competition. If there
called from inside
function_b
are several words in a name, they should be
typed in lowercase and separated by underscores.
def function_b():
answer = 2 * function_a()
return answer This runs because both
function_a and function_b Order of definition
have already been defined Since the main part of the code calls
both function_a and function_b,
number = function_a() + function_b() they must be defined at the start of the
program. As function_a relies on
print(number) function_b, function_a must be
defined before function_b.
 def count_letter_e(word): Defines a function that counts and
returns the number of times the letter
total_e = 0 “e” appears in a particular word

for letter in word: This loop examines

each letter in the word
if letter == "e": being investigated

total_letter_e = total_letter_e + 1
return total_letter_e
Asks users to enter their
name, and then stores it in
user_name = input("Enter your name: ") the variable user_name

total_es_in_name = count_letter_e(user_name)
print("There are " + str(total_es_in_name) + "E's in your name")

A function that returns a value

There are also functions that carry out a task and
produce a value, which is then returned to the code
that called them. This enables the calling code to store
the value in a variable, if necessary.

Local and global variables visible to other people in that submarine. Global
A global variable is declared in the main part of variables can be read by other functions in the
the code and is visible everywhere. A local variable, code, but local variables cannot. The code will
on the other hand, is declared inside a function and return an error message if a local variable is
is only visible there. For example, global variables used outside of its function. A function must
are like divers, visible to everyone under the sea, declare the global variable it intends to use
including people in submarines. Local variables, or else Python will create a new local variable
however, are like people in the submarines: only with the same name.

def reset_game():
global score, charms, skills
score = 0
charms = 0
skills = 0

reset_game() Declares the global

This function resets a game by variables that this
setting the value of the global function will be using
variables score, charms, and
skills back to 0.
Libraries
A Python library is a collection of files, known as modules,
that are available for other programmers to use. These modules
contain code for common programming tasks, ranging from
interacting with hardware to accessing web pages.

Built-in modules
The library that comes with every installation of
Python is called the Python Standard Library. It turtle
This Python module recreates the turtle-shaped
contains modules, such as Tkinter and turtle,
robot from the programming language Logo.
which are available without the need to download The robot draws on the screen as it moves around.
or install any additional code.

random
This module enables programs to
include calculations or outputs based
on random numbers. This can be useful socket
when a programmer wants to create an The socket module allows programs to communicate
element of chance. across networks and the Internet. This module allows
programs to create their own sockets.

datetime
The datetime module allows a program to time
work with calendar dates and functions that The functions in this module deal with time, such as
can calculate the time between dates. those relating to time measured by the computer’s
processor and time zones for different countries.

webbrowser Tkinter
The webbrowser module allows a Python The Tkinter module allows programmers to create a
program to open a browser on the user’s graphical user interface (GUI) for their code, including
computer and display links. elements such as buttons and menus.
 PYTHON
Libraries 116 117
Importing and using modules
The process of adding a module to a program so that its functions and
definitions can be used is called “importing”. In Python, it is possible
to import either an entire module or just certain functions of a module.
The method used for carrying out the import depends on the requirement
of the program. The examples below illustrate the different methods
for importing and the required syntax in each case.

import ...
The keyword import followed by the import time
module’s name makes all of the module’s
code available to the program. To access
the module’s functions, it is necessary Calls the timezone function
to type the imported module’s name offset = time.timezone of the time module
followed by a dot before the function
name in order to call that function. print("Your offset in hours from \
Prints the value in
UTC time is: ", offset) the variable offset

from … import …
If a program only needs to use one or two from random import randint
functions from a module it is considered The randint()
better just to import these, and not the function produces a
whole module. When functions are random integer
imported in this way it is not necessary dice_roll = randint(1,6) between 1 and 6
to include the name of the module
before the function name. print("You threw a", dice_roll)

from … import … as …
If the name of a function in the module from webbrowser import open as show_me
is too long or is similar to other names
in the code it can be useful to rename
it. Just as in “from ... import ...”, this
allows the programmer to refer to the url = input("enter a URL: ")
function simply by its new name, without Displays the user's
preceding it with the name of the module. show_me(url) choice of web page

PYGAME
The pygame library contains a huge number of useful
modules for coding games. Since pygame is not part of
the Standard Library, programmers have to download
and install it before they can import it to their code.
pygame is very powerful, but can be challenging for
new programmers. One solution to this is the Pygame
Zero tool (see pp.176–77), which makes the functions in
pygame easier to use.
Team allocator
When playing team sports, the first thing you have to do is to pick
the teams. One way of doing this is to choose team captains and let
them choose the players for their teams. However, it might be fairer
to pick people randomly. In this project, you’ll automate this process
by building a tool in Python that picks teams randomly.

How it works Random allocation

This project will use Python’s random module to form This project will pick two teams and a
captain for each team. When you run the
teams, with randomly selected players. You will use program, it will display the chosen teams
lists (see p.103) to store the player’s names. The random and captains on the screen.
module will then shuffle this list into a different order.
Loops will be used to iterate through the list and display
the players. Finally, an if statement (see p.105) checks to
see if the user is happy with the selection.

Python 3.7.0 shell

Welcome to Team Allocator!

Team 1 captain: Rose
Team 1:
Jean
Ada
Sue
Claire
The list of players
Martin is displayed in the
shell window
Harry
Alice
Craig
Rose
James
 PYTHON
Team allocator 118 119
YOU WILL LEARN WHERE THIS IS USED
❯ How to use the random module Time: The code in this project can be reused for tasks
❯ How to use lists 15–20 mins that require random allocations. This includes staff
shift scheduling, assigning tasks in the workplace,
❯ How to use loops Lines of code: 24
matching people to projects, selecting teams for a
❯ How to use branching Difficulty level quiz, and many more. This can be a quick and fair
statements way of allocating people to teams/tasks.

Program design
The program begins by shuffling the player list. team. The steps are then repeated for the
It then allocates the first half as Team 1, randomly second half of the list – forming Team 2. If you
selects a captain, and displays the name of the want to pick the teams again, the program
captain along with the names of the rest of the repeats the steps, otherwise, the program ends.

START

Shuffle players

Assign players from

Randomly pick Display captain and
the first half of the
captain for Team 1 players for Team 1
player list to Team 1

Assign players from

Display captain and Randomly pick
the second half of the
players for Team 2 captain for Team 2
player list to Team 2

YES
Pick again?

NO

END
CREATE A TEAM

Create a team
1 This program will simplify the process of picking,
or allocating, teams. In this section, you will create the
file that will contain the code, import a module, and then
make a list of players.

1.1 CREATE A NEW FILE 1.2 ADD THE MODULE

The first step is to open IDLE. A shell window will appear. Now, import the random module. Type this line at
Ignore it and click on File in the IDLE menu. Then, choose New the top of your file, so that you can use the module later. This
File and save the file as “team_selector.py”. This will create an module contains functions that will allow you to pick players
empty editor window where you can write your program. randomly from a list.

File Edit Shell import random

New File N Click here
Open... O to create
Open Module... a new file The random module can pick
Recent Files random numbers or shuffle a
Module Browser B list in a random order

1.3 WELCOME THE USER

Next, create a message to
welcome the user to the program.
print("Welcome to Team Allocator!")
This will show a message to the user
when the program executes. Save This phrase will appear as the welcome SAVE
the file and then run the program message in the shell window
to ensure your code works. From the
Run menu, choose Run Module. If you
have typed in the code successfully Welcome to Team Allocator!
the welcome message should appear
in the shell window. >>>

WELCOME TO TEAM ALLOCATOR!

 PYTHON
Team allocator 120 121
RANDOM NUMBERS
Random numbers can be used to simulate
9
anything that can be random or is meant
to be random. For example, rolling a dice, 6 4 7
3 2
tossing a coin, or picking a card from a deck. 8
Python’s random module helps add an

5
1
element of chance to a program. You can
6

read more about how to use this module

in the Docs section of IDLE’s Help menu.

5
1.4 MAKE A NAME LIST
You will need names for all the players to generate your
teams randomly. In Python, you can keep groups of related items
together in a list (see p.103). First, create the variable players to
store the list by typing this new block of code below the import
statement. Put the list contents in square brackets, and separate
each item in the list with a comma.

import random
The list is assigned to
players = ["Martin", "Craig", "Sue", the variable players

"Claire", "Dave", "Alice", You do not need to use a

backslash (\) to split a list
"Sonakshi", "Harry", "Jack", across two lines. Pressing
return or Enter indents
"Rose", "Lexi", "Maria", the next line in a list

"Thomas", "James", "William", Each item in the list

is a string enclosed
in quotation marks
"Ada", "Grace", "Jean",
"Marissa", "Alan"]

This project has 20 players in the

list. You can change the number
of players if you like (see p. 127)

1.5 SHUFFLE THE PLAYERS

There are a few ways in which the players can be randomly and assign the first half of the list to “Team 1”
randomly selected. You could randomly keep picking players and the second half to “Team 2”. To do this, the first thing
and assign them to the two teams until you run out of players. you have to do is to shuffle the players. Use the shuffle()
This program assumes the number of players is even. However, function from the random module. Type this code below
an even simpler way would be to just shuffle the list of players the print command.

print("Welcome to Team Allocator!")

random.shuffle(players) This will shuffle the list of
players just like you would
shuffle a deck of cards
PICK TEAMS

Pick teams
2 Now that the list of players is SPLITTING LISTS
ready, you can split the players into
two teams. You will then assign In Python, when splitting or taking subsets of a list you need to provide two
arguments: the start index (position) and the index after the last item in the
the team captains. The teams
new list. Remember, indexes start from 0 in Python (see p.103). For example,
and the names of their captains will players[1:3] would take the players from index 1 up to index 2. The
be displayed on screen when the first index is inclusive (it is included in the new list) and the second index
program is executed. is exclusive (it is included up to the item before it in the new list). If you are
splitting the list from the first position up to the last position, then you can
leave those indexes blank as Python will understand this. For example,
players[:3] will take the first three players from the list and players[4:]
will take the players from index 4 up to the end of the list.

2.1 SELECT THE FIRST TEAM

You now need to split the list into two equal parts. code at the end of the file for welcoming the
To do this, take the items in the list from position 0 up to the user. This will create a new list with the first half
last item in the list and divide it by two. Add the following of the players list.

team1 = players[:len(players)//2] This new list will be assigned

to the variable team1

2.2 SELECT TEAM 1 CAPTAIN

Once you have allocated the first team, you need choice() function to pick a player randomly from team1.
to choose the team captain. To make it a fair selection, Type this code at the end of the file. The captain is randomly
this will also be done randomly. A player from team1 will selected from the team1 list using the choice() function
be picked and assigned to be the team captain. Use the and appended to the string to be displayed.

Prints the message

print("Team 1 captain: " + random.choice(team1)) stating who the
team captain is

2.3 DISPLAY TEAM 1

After the captain is assigned, you need to display
all the players from “Team 1” on screen. Remember you can
use a for loop (see p.108) to iterate through a list. Type the
following code at the end of the file.

Prints a message to tell the user that the

players for Team 1 are being displayed

print("Team 1:")
for player in team1:
print(player)

This loop iterates Prints the current

through team1 player’s name SAVE
 PYTHON
Team allocator 122 123
2.4 TEST THE PROGRAM
This is a good point to test your code. Run
the code and look in the shell window to see the
Welcome to Team Allocator!
result. Does it display the players for Team 1? Does
it display the number you expected? Is it randomly Team 1 captain: Claire
selecting a team captain that is actually part of
Team 1? Run the code a few times to ensure it is Team 1:
random. If you have any errors, look back over
your code carefully to spot any mistakes. Maria
Jean
William
Alice
Claire
Jack
Lexi
Craig
James
Alan

C >>>

2.5 SELECT THE SECOND TEAM Assigns the second half of the
Now you can allocate players for the list to the variable team2.
second team by repeating steps 2.1–2.3. Type The players in this list will
the following code at the end of the file. be part of the second team

team2 = players[len(players)//2:]
print("\nTeam 2 captain: " + random.choice(team2)) “\n” prints
the name
of the team
print("Team 2:")
captain for
Team 2 on
for player in team2: a new line
print(player)

This loop iterates

through team2
SAVE
PICK TEAMS

2.6 TEST THE PROGRAM

Run the code to test the program
again. Ensure that it is working as expected
Welcome to Team Allocator!
for both teams. You should be able to see
the list of players for both the teams along Team 1 captain: Marissa The name of the
captain will be
with the names of their captains.
Team 1: displayed before
the list of players
Harry
Claire
Jack
Sue
Dave
Craig
Marissa
Grace
Alan
Maria

Team 2 captain: James

Team 2:
Martin
Jean
Alice
Ada
William
Rose
Lexi
James
Sonakshi
Thomas
>>>
 PYTHON
Team allocator 124 125
3 PICK NEW TEAMS
You can now use a while loop to keep selecting teams
until you are happy with them. Add a new line of code below the
welcome message and remember to add indents for all the lines
of code following this new line, as shown below. This will ensure
that the existing code is part of the while loop.

print("Welcome to Team Selector!")

while True: Adds the loop
that allows
random.shuffle(players) selecting the
teams again
team1 = players[:len(players)//2]
print("Team 1 captain: "+random.choice(team1))
print("Team 1:")
for player in team1:
print(player) Add indents to
these lines of
team2 = players[:len(players)//2:] code to make
them part of
the loop
print("\n Team 2 captain: "+random.choice(team2))
print("Team 2:")
for player in team2:
print(player)

3.1 REDRAW PLAYERS

Finally, add the following code to
ask users if they would like to pick teams
again. Store the reply in a variable called Displays a message to ask
response. If you choose to redraw the users if they would like
players, the main loop will run again and to redraw the players
display the new teams.

response = input("Pick teams again? Type y or n: ")

if response == "n":
break

Breaks out of the main

loop if the response is n

SAVE
PICK NEW TEAMS

3.2 RUN THE CODE

The program is now ready. Test the program again.
You will see the list of both teams with the team captains, and a
message at the end asking if you would like to redraw the players.

Welcome to Team Allocator!

Team 1 captain: Rose
Team 1:
Jean TEAM 1

Ada
James
Claire
Martin
Harry
Alice
Craig
Rose TEAM 2

Sonakshi

Team 2 captain: William

Team 2:
Jack
Maria
Sue
RESHUFFLED TEAM 1
Alan
Dave
Grace
Marissa
Lexi
Thomas
William
Pick teams again? Type y or n:
RESHUFFLED TEAM 2
 PYTHON
Team allocator 126 127

Hacks and tweaks

Add more players
EXTRA PLAYERS
The program has a list of 20 names. To add
more players to the team selector, try adding
some more names to the list. Keep the total
number of players even, so that the teams
have equal numbers of players on them.

More teams
Different sports have different numbers of players in their teams. the user for the number of players they want in each
The code in this project assumes that there will be two teams. team. You can then split the number of players into the
However, if you have a longer list of players, you can even have number of teams they can equally be split into. If a team
three or more teams. Update the code in the program to ask is short of players, make sure to inform the user of this.

while True:
random.shuffle(players)
Splits the
team1 = players[:len(players)//3] number of
players into
print("Team 1 captain: " + random.choice(team1)) three equal
parts and
print("Team 1:") assigns the
first part of
for player in team1: the players
list to team1
print(player)
team2 = players[len(players)//3:(len(players)//3)*2] Assigns the
second part
of the
print("\nTeam 2 captain: " + random.choice(team2)) players list
to team2
print("Team 2:")
for player in team2:
print(player)
team3 = players[(len(players)//3)*2:]
print("\nTeam 3 captain: " + random.choice(team2))
print("Team 3:") Assigns the
third team
with its
for player in team3: own list of
players and
print(player) the team
captain
HACKS AND TWEAKS

Team or tournament
Currently the program assumes that the code is for a sport. If you pick team, the code should run as you have
team sport. If you want to create a program for individual already tested. However, if you pick “individual”, the code
sports, change the code as shown below. This will ask the will split the players into random pairs to play against
user if the players need to be split for an individual or team each other.

print("Welcome to Team/Player Allocator!")

while True:
Displays a
random.shuffle(players) message to ask
the user if it is
response = input("Is it a team or individual sport? \ a team or an
individual sport
\nType team or individual: ")
if response == "team": Checks for the
user’s response
team1 = players[:len(players)//2]

for player in team2:

print(player) Range will take the value
0-19 and will increment by
else: 2 each time. This is so we go
through the list two players Prints the name
for i in range(0, 20, 2): at a time to put them in pairs of players that
will play against
print(players[i] + " vs " + players[i+1]) each other

Who starts?
For both team and print(players[i] + " vs " + players[i+1])
individual sports there
is usually a method to start = random.randrange(i, i+2)
determine who will go
first. Add this extra code
to the program from the
print(players[start] + " starts")
previous hack to do this
for individual sports.

Welcome to Team/Player Selector!

Is it a team or individual sport?
Type team or individual: individual
James vs Harry
The shell window
James starts displays who starts
JAMES HARRY
 PYTHON
Team allocator 128 129
Change to list of numbers
The current program is only import random
a good solution if you always
play with the same people.
However, if this is not the
case, you can replace the players = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
player names with numbers
to make it a more general 11, 12, 13, 14, 15, 16, 17, 18, Update the
solution. Remember to code to
assign the numbers to the 19, 20] replace the
players before you use it. names with
numbers

print("Welcome to Team Allocator!")

Number of players
Instead of having to change the size of the list each time you have more
or fewer players, you can update the code to ask the user for the total
number of players. This will create the number list, as well as create two
equal teams. Update the program as shown here.

import random
players = []
print("Welcome to Team Allocator!")
number_of_players = int(input("How many players \
Displays a message for
are there? ")) the user to enter the
number of players
for i in range(1, number_of_players + 1):
players.append(i)

team1 = players[:len(players)//2]
print("Team 1 captain: " + str(random.choice(team1)))
print("Team 1:") Updates code for team1

team2 = players[len(players)//2:]
print("\nTeam 2 captain: " + str(random.choice(team2)))
print("Team 2:") Updates code for team2
Debugging
The process of finding and fixing errors in a program is called
debugging. Also known as bugs, errors can range from simple
mistakes in spellings to problems with the logic of the code.
Python has various tools that highlight and help fix these errors.

Syntax errors
Syntax is the term used to describe the arrangement
temperature = 25
and spelling of words and symbols that make up
the code. Syntax errors are the most common and
easily fixed errors. They are equivalent to the sort
of spelling and grammar mistakes that most word- if temperature > 20: This line in the
code should
processing programs highlight. IDLE displays syntax print("Weather is warm") be indented
errors in code in a pop-up window.

Indentation errors expected an indented block This error

Indentation is a way of making a program more readable by message indicates
using space to reflect its structure. The body of a function, an indentation
loop, or conditional statement should be placed four spaces error in the code
to the right of the line introducing it. Python makes
indentation compulsory in the code.
OK

Runtime errors
These errors affect the fundamental features of a program. They can
include accessing a nonexistent file, using an identifier that has not
been defined, or performing an operation on incompatible types of
values. Runtime errors cannot be found by checking a program’s syntax.
The Python interpreter discovers them while running the code and
displays an error message called a “traceback” in the shell window.

Type errors
These errors occur when a function or operator is used
with the wrong type of value. The “+” operator can either
concatenate two strings, or add two numbers. It cannot,
however, concatenate a string and a number, which is
what causes the error in this example.

>>> "temperature" + 5
Traceback (most recent call last):
pyshell refers to
File "<pyshell#3", line 1, in <module> the shell window

"temperature" + 5
TypeError: can only concatenate str (not "int") to str
 PYTHON
Debugging 130 131
CHECK MODULE
IDLE’s “Check Module” command can be
Run Options Window
found in the Run menu. It checks a program
Select this
file for syntax errors, allowing programmers Python Shell option from
to identify and eliminate them before the Check Module the Run menu
program is run. This tool does not display Run Module
any message unless it finds an error.

Details of where and Location of the

what the error is error in the file

Name errors
Misspelling the name of a variable or >>> pront ("Hello world")
function can cause a name error. It can
also be a result of using a variable before Traceback (most recent call last):
a value is assigned to it, or calling a
function before it is defined. In this File "<pyshell#0>", line 1, in module>
example, the typographical error is
only found at run time, so the message pront("Hello world") The command that
is displayed in the shell window. caused the error
NameError: name 'pront' is not defined

Logic errors Infinite results

In this example an infinite loop prints count = 1 The variable count
Logic errors are usually the trickiest the word “counting” indefinitely. is set to the value 1
to spot. The program may run Since the value in the variable count
without crashing, but it produces is never updated, the loop condition
an unexpected result. These errors
will never be False. while count < 5:
can be caused by a number of print("counting")
issues, including the use of the
wrong variable in an expression.
This statement will print("finished")
never be reached
ERROR MESSAGES

Error messages ERROR MESSAGES

While they are the most obvious Error message Meaning
tools to help programmers with EOL found while scanning Closing quotation mark missing
debugging, Python’s error messages string literal for a string on that line
tend to be slightly cryptic, and can
unsupported operand type(s) The + operator expects the values on
appear to add to the mystery of for +: 'int' and 'str' either side of it to be of the same type
debugging rather than clearing it
up. This table lists some of the most The body of a loop or conditional
Expected an indented block
is not indented
common error messages along with
their meaning. Programmers tend Unexpected indent This line is indented too much
to become familiar with these errors
and their solutions quickly. Unexpected EOF while Missing bracket just before
parsing the end of the program

Name [name of variable or Usually caused by misspelling the name

function] is not defined of the variable or function

Text colouring “if” are orange and strings are green (see p.98). A part
Like most other IDEs (see pp.208–209) and dedicated of the code not appearing in the correct colour can be a
code editing programs, IDLE colours the text of a sign that there is a syntax error. And several lines of code
Python program. This makes it easier to spot errors. suddenly being coloured green is usually the sign of a
For example, keywords such as “for”, “while”, and missing closing quotation mark on a string.
Missing a quotation
mark at the start

Wrong colour
There are four errors in this example. The keyword answer = input(Pick a number")
The missing quotation marks and “while” has been
misspelling of the keyword “while” spelled incorrectly whle answer != 7:
mean that the code will not be
coloured correctly. Misspelling of pritn(Not the right number")
keyword and missing
quote mark answer = input("Pick a number")
 PYTHON
Debugging 132 133
Debugger
CHECK THE ERROR IDLE also contains a tool called a debugger. This allows
programmers to “step through” the execution of their
A common issue when debugging is program, running one line at a time. It also shows the
that the actual error may be located just
contents of variables at each step in the program. The
before the place indicated by the error
message. It is therefore worth checking debugger can be started from the shell window, which
for the error earlier in the indicated line, includes a Debug menu. Selecting Debugger from this
or on the line above it. menu will start the debugging process the next time
a program is run. Choosing it again will turn it off.
print(hello " + "world")
Click the shell
Debug Options Window
to produce the
Produces an “Invalid Go to File/Line screen-top
syntax” error due to Debug menu
Debugger
a missing quote
Stack Viewer
Auto-open Stack Viewer

The level of detail The information

Debugging checklist to examine to display
When an error appears but its cause is not
immediately clear, there are a few things
that can be checked. This might not solve
every problem, but many errors are caused Debug Control
by trivial mistakes that can be easily fixed.
Go Step Over Out Quit Stack Source
Here is a list of things to look out for: Locals Globals

Locals
_annotations_ {}
_builtins_ <module 'builtins' (built-in)>
Everything is spelled correctly _doc_ None
_file_ '/Users/code/debug4.py'
Upper- and lowercase letters are
_loader_ <class '_frozen_improtlib.Builtinimporter'>
not used interchangeably
_name_ '_main_'
Strings have a quotation mark _package_ None
at the beginning and end
_spec_ None
An opening bracket has a count 1
matching closing one
The code has been saved since
changes were last made
No letters are confused with
numbers, e.g. O and 0, or I and 1
There are no unnecessary spaces
at the start of a line
Variables and functions are
declared before they are used
IDLE debugger
When a program is run, the debugger will
display information about it, including current
values of variables. Clicking on the option “Step”
will expose the code running behind the scenes,
which is normally hidden from programmers.
Project planner
Time management tools can be very useful, both at home and
at work. There are several applications that help in tracking
the progress of daily chores and activities. This project will
use Python’s tuples, sets, and graphical modules to create a
planner for developing a small gaming app.

How it works
This planner will create a schedule to help users plan their work. The
program will display a window with a button that a user can press Gantt chart
A Gantt chart is a type of bar chart that is
to choose a project file. It will then read a list of tasks from the file used to illustrate the schedule of a project.
and sort them in the order of their starting time, based on certain The tasks to be performed are listed on the
prerequisites. The resulting data will be converted into a chart that y axis and the time periods are listed on
the x axis. Horizontal bars on the graph
will display when each task starts and ends. display the duration of each activity.

Weekly distribution
of tasks

Project Planner

Open project...
The width of this bar gives
the duration of an activity
Week 1 Week 2 Week 3 Week 4 Week 5

Design game functionality

Draw basic images

Break functionality into steps

Implement basic functionality

Test and review

Draw better images

Implement advanced
functionality

Test and review

Release onto app store

 PYTHON
Project planner 134 135
YOU WILL LEARN WHERE THIS IS USED
❯ How to extract data from a file Time: Reading data from files and processing it is common
1.5 hours to almost all programs, even the ones that do not
❯ How to use Python sets
Lines of code: 76
use documents in an obvious manner: for example,
❯ How to use namedtuples
games. The basic tasks of opening windows, laying
❯ How to create a simple Tk UI app Difficulty level out buttons, and drawing custom elements are the
❯ How to draw using Tk Canvas building blocks of any desktop application.

Program design
START
This project uses one continuous loop to
check if users have pressed the Open
project... button. If they have, the program
opens a CSV file to read and order its
contents before they are displayed as a Show
chart. The chart will display the amount window
of work to be done in the allotted time.

YES
Show file open Open project...
dialogue to user button pressed?

Read the CSV

file of tasks

NO

Order tasks by
start day

NO
Draw Gantt chart Window closed?

CSV file
The tasks in this project are stored as a file of YES
comma-separated values, known as a CSV file.
Using this file is a common way of representing
tabular data, as it can be read and modified by END
spreadsheet applications.
CREATING AND READING THE CSV FILE

Creating and reading the CSV file

1 To draw the planner in your app, you
need to create a CSV file that lists all the tasks
that have to be completed. Then, you will write
the code in a Python file to read the CSV file.

6 1
4 5 7
2

TASKS CSV FILE

1.1 CREATE A NEW FILE

The first step is to create a new file for the Python File Edit Shell
code. Create a folder called “ProjectPlanner” on your
computer. Then, open IDLE and select New File from the New File N Select this option
File menu. Choose Save As from the same menu and save Open... O to create a new file
the file as “planner.py” inside the ProjectPlanner folder. Open Module...
Recent Files
Module Browser B

1.2 CREATE A CSV FILE

Python has a library called csv that makes it easy to read
and write CSV files. Now add a line of code at the top of your Python
import csv Type this line in the
“planner.py” file
file to read the new CSV file. However, before you can read a CSV file,
you will need to create one. This can be done with a spreadsheet
application, but since a CSV file is a simple text file you can create it
in IDLE. Select New File from the File menu, choose Save As and save
the file in the ProjectPlanner folder. Name this file “project.csv”. You
may get a warning message when you do this, as “.csv” is not a
standard Python extension, but you should use it anyway.

PLANNER.PY PROJECT.CSV
You have used the extension “.csv” at the end
of the name. The standard extension is “.py”.
You can choose to use the standard extension instead.

Use .py Cancel Use .csv Click here to

continue using
PROJECT
the .csv extension
PLANNER
WARNING MESSAGE
 PYTHON
Project planner 136 137
1.3 WRITE A SIMPLE PROJECT
Now you can write a simple plan for a project to develop line of text in the file will represent one row of the table and
a small gaming app. Type the following lines into the CSV file each element in the row will represent one column value.
with a list of tasks to be completed to create the gaming app. There For example, the second row has four column values. Save
should be no blank lines at the beginning or end of the file. Each and close the file once you have typed in the tasks correctly.

The first column The second column The third column value
value represents the value gives a title to gives the number of days
task number the task the task is expected to take
The values in each
column are separated
1,Design game functionality,2, by commas

2,Draw basic images,1,1

Each line represents
3,Break functionality into steps,2,1 one row of the table

4,Implement basic functionality,5,2 3

The fourth column value
5,Test and review,2,4 gives the prerequisites of
the task as task numbers
with spaces in between
6,Draw better images,3,5
7,Implement advanced functionality,7,5
8,Test and review,4,6 7 This row is task 8 with the title Test
and review. It is expected to finish
9,Release onto app store,1,8 in 4 days and requires tasks 6 and 7
to be completed before it can start

PYTHON TUPLE
A tuple is a data structure like a list, but its length
cannot be changed after it has been created and the >>> numbers = (1, 2, 3, 4, 5)
items inside it cannot be updated. Lists are mostly
used to store a sequence of values of the same kind, >>> print(numbers[3]) numbers is
such as a list of numbers representing the height of a tuple with
a group of people. Tuples, on the other hand, are 4 five values
used when the values are related, but of different
kinds, such as one person’s name, age, and height. The value at index Index numbers are enclosed
position 3 in the tuple within square brackets

>>> numbers[0] = 4 Try changing the value at

index position 0 in the tuple
Traceback (most recent call last):
Returns an error since
File "<pyshell>", line 1, in <module> the values inside a tuple
cannot be updated
numbers[0] = 4
TypeError: 'tuple' object does not support item assignment
CREATING AND READING THE CSV FILE

1.4 READ DATA FROM THE FILE

The functionality in Python’s csv library makes it easy column) as the key (see p.160). This will allow you to look up
to read data from the CSV file. Once the data is read, the values a particular task quickly by its number. Now, add this code to
are stored in a Python tuple. The tuple is then stored into a your .py file after the import statement from step 1.2. It will
“dictionary” (a data structure, where each item has two parts – a open the CSV file, read the rows of data from it, and place
key and a value), using the task number (the value from the first the results into a dictionary.

def read_tasks(filename): The name of the file is given as

the argument to this function
Sets tasks to an
tasks = {}
empty dictionary
Opens the file for reading, uses a
for row in csv.reader(open(filename)): reader object from the csv library
to interpret the file as CSV data,
number = row[0] and then iterates over each row
with a for loop
title = row[1]
duration = row[2]
Extracts the four values
prerequisites = row[3] from the row. The row
is indexed by a column
tasks[number] = (title, duration, \ number (counting from 0)
to obtain a particular value
prerequisites)
return tasks

The function returns the The values are stored as a tuple in the
complete dictionary tasks dictionary by task number SAVE

1.5 TEST THE CODE

Now test the code to make sure you have typed in the The function will return a dictionary containing the information
instructions correctly. Choose Run Module from the Run menu from the file. However, all of the values will be read as Python
and switch to the shell window. Type the code below to call the strings as the csv.reader object does not know how to interpret
function with the name of the CSV file you created in step 1.2. the data that it is reading from a file.

Type this line Reads the data

at the prompt in this CSV file

>>> read_tasks("project.csv")
{'1': ('Design game functionality', '2', ''), '2': ('Draw
Numbers are also
basic images', '1', '1'), '3': ('Break functionality into read as strings

steps', '2', '1'), '4': ('Implement basic functionality',

'5', '2 3'), '5': ('Test and review', '2', '4'), '6': ('Draw
better images', '3', '5'), '7': ('Implement advanced
functionality', '7', '5'), '8': ('Test and review', '4',
'6 7'), '9': ('Release onto app store', '1', '8')}
 PYTHON
Project planner 138 139
1.6 CONVERT TO OTHER DATA TYPES
The “task number” and “task duration” values are numbers number will always be an integer (whole) number, but the
in the CSV file. Since these are currently read as strings, it will be task duration will be a float (decimal) value as it can take a
better if they can be converted into Python number values instead. non-whole number (like 2.5) of days to finish a task. Save
Update the read_tasks() function as shown below. The task the file and then run the module again to test this.

def read_tasks(filename):
tasks = {}
for row in csv.reader(open(filename)):
number = int(row[0]) Converts the task
number from a string
title = row[1] into an integer number

duration = float(row[2]) Converts the task

duration from a string into
a floating point number
prerequisites = row[3]
SAVE

>>> read_tasks("project.csv")
{1: ('Design game functionality', 2.0, ''), 2: ('Draw basic
Task numbers
images', 1.0, '1'), 3: ('Break functionality into steps', 2.0, are read as
integer values
'1'), 4: ('Implement basic functionality', 5.0, '2 3'), 5:
('Test and review', 2.0, '4'), 6: ('Draw better images', 3.0,
Task duration
'5'), 7: ('Implement advanced functionality', 7.0, '5'), 8: is read as
a floating
('Test and review', 4.0, '6 7'), 9: ('Release onto app store', point value

1.0, '8')}

Converting data types

In Python’s csv library, it is the standard
behaviour of the csv.reader object to read
every value as a string. You need to specify which
values are “numbers” manually to ensure they
are read as integers or floating point numbers.
UPDATE CODE

"2" "TEST" 2.0 "TEST"

CREATING AND READING THE CSV FILE

PYTHON SETS
A Python set is another data type that is similar to a
list, but it can only contain unique values. This makes Adds the number
“4” to the set
it similar to the keys of a dictionary. The syntax for
writing a set is similar to that of a dictionary. A set
can be assigned to a variable in several ways. Try >>> numbers.add(4)
these examples in the shell window.
>>> numbers

Just like a dictionary,

{1, 2, 3, 4}
Python sets are also written
inside curly brackets
>>> numbers.add(3)
>>> numbers The number “3” is already
>>> numbers = {1, 2, 3} in the set, so the value
{1, 2, 3, 4} inside it does not change
Defining a set
The variable numbers is defined as a set containing the numbers Adding values to a set
1, 2, and 3. You should never write an empty set as “numbers = {}”, You can add values to a set with the add method.
as Python will read it as an empty dictionary. To avoid this, create Since a set only contains unique values, adding a
an empty set by calling the set() constructor function. value that is already in the set will do nothing.

Removes the value >>> numbers.remove(3)

“3” from the set
>>> numbers
Removing values from a set
Similarly, you can also remove items {1, 2, 4}
from a set using the remove method.

1.7 PREREQUISITES AS SETS OF NUMBERS

So far, you have converted the task number and task SET()
duration into integers, but the prerequisites are still a string (“1”
or “2 3”). To read the prerequisites as a collection of task numbers, MAP()
first split the string into individual values using Python’s built-in INT
split method. Then use the int() and map() functions, as
shown here, to turn the string values into a set. .SPLIT()

Items separated by spaces will

>>> value = "2 3" be split into separate values VALUE

>>> value.split() The split method takes

one string and turns it
['2', '3'] into a list of strings

map() calls the int() function

on every string in the list

>>> set(map(int, value.split())) Combining functions

int() converts a string This illustration demonstrates how to combine simple
{2, 3} value into an integer functions to create complex logic. It starts with the original
string value and splits it into string parts. The int() function
Converts the values returned by is then called on each of these parts using the map()
map() into a (set) data structure function. set() turns the result into a Python set.
 PYTHON
Project planner 140 141
1.8 MAKE THE PREREQUISITE CHANGES
Now incorporate the code from the previous step Converts the prerequisite
into the read_tasks() function as shown below. Run the values from strings into
module again and switch to the shell window to test it. sets of integers

import csv
def read_tasks(filename):
tasks = {}
for row in csv.reader(open(filename)):
number = int(row[0])
title = row[1]
duration = float(row[2])
prerequisites = set(map(int, row[3].split()))
tasks[number] = (title, duration, prerequisites)
return tasks
SAVE

>>> read_tasks("project.csv")
{1: ('Design game functionality', 2.0, set()),
2: ('Draw basic images', 1.0, {1}), 3: ('Break
functionality into steps', 2.0, {1}), 4:
('Implement basic functionality', 5.0, {2, 3}),
5: ('Test and review', 2.0, {4}), 6: ('Draw All numeric values are
now converted into
better images', 3.0, {5}), 7: ('Implement the correct data type

advanced functionality', 7.0, {5}), 8: ('Test

and review', 4.0, {6, 7}), 9: ('Release onto app
store', 1.0, {8})}

DESIGN DRAW TEST

CREATING AND READING THE CSV FILE

1.9 TEST THE PROGRAM

The data is now ready and you can try to pull out some specific
bits to test it. Run the module again and switch to the shell window. Then
type the lines of code shown below. This time you will store the resulting
dictionary in a temporary variable so that it can be manipulated.

Assigns the data to a

>>> tasks = read_tasks("project.csv") temporary variable tasks

Pulls out the data for a specific

task by indexing tasks with
the task number
>>> tasks[3]
('Break functionality into steps', 2.0, {1}) Data is returned as a tuple
of three values with specific
index positions
Title is at index Duration is at index Prerequisites are
position 0 position 1 at index position 2

Extracts the duration of this task by

>>> tasks[3][1] indexing again with the value 1

2.0 Returns the value (duration) at index

position [1] in task number [3]

1.10 USE NAMED TUPLES

Getting task values by their index positions is not named tuples that will allow you to extract the values
an ideal way to extract them. It will be better if they can be within them by name instead of position. Add this
referred to by a proper name, such as “title” or “duration”. code at the top of your file to create a named tuple
Python provides a standard way of doing this. You can create type and store it in a variable.

import csv
Imports the namedtuple() function
from collections import namedtuple from the collections module

Task = namedtuple("Task", ["title", "duration", "prerequisites"])

def read_tasks(filename):
Defines a named The value names
tuple called Task are given as a list
of strings

PREREQUISITES

TASK
NAMED TUPLE

DURATION TITLE
 PYTHON
Project planner 142 143
1.11 CALL THE NAMED TUPLE TYPE
The named tuple type created in the previous step is stored in the
variable Task. You can create new values of this type by calling Task like a
function. Update the read_task() function in your code to call Task instead
of creating a tuple in the normal way. Then, run the module and switch to the shell The named tuple
window to test the code. First, you will display the values in the shell (output 1), Task is stored in
and then you will try to extract one of these values by using its name (output 2). the tasks dictionary

def read_tasks(filename):
tasks = {}
for row in csv.reader(open(filename)):
number = int(row[0])
title = row[1]
duration = float(row[2])
prerequisites = set(map(int, row[3].split()))
tasks[number] = Task(title, duration, prerequisites)
return tasks
SAVE

>>> tasks = read_tasks("project.csv")

>>> tasks[3] Names are displayed
in the shell for each
Task(title="Break functionality into steps", duration=2.0, of the values in the
named tuple
prerequisites={1})

OUTPUT 1

>>> tasks[1].title Extracts the title of

task[1] by name
"Design game functionality"
>>> tasks[3].duration Extracts the
duration of
2.0 task[3] by name

>>> tasks[4].prerequisites
{2, 3}
OUTPUT 2
Extracts the
prerequisites of
task[4] by name
ORDERING THE TASKS

Ordering the tasks

2 Now that the tasks have
START

been read in and converted into a

useful format, you need to consider
how to order them and determine
when each task can begin after the
Mark all tasks
project starts. You will do this by as incomplete
creating a function that computes
the starting point of a task based
on the status of its prerequisites.

NO
Are there any
incomplete tasks left? END

YES

Look at the first/next

incomplete task

NO Are all of the task’s

prerequisites
complete?

YES

Set task’s start day to the latest day

of completion (start day + duration)
of the prerequisite tasks

Flowchart for task ordering logic

A task cannot start until its prerequisite
tasks have been completed. The
program repeatedly loops over all the
tasks that are still to be completed, picks
an incomplete one, and then calculates
Mark task as complete when this task can start by computing
the starting points and durations of
each of its prerequisite tasks.
 PYTHON
Project planner 144 145
2.1 IMPLEMENT THE LOGIC
You can now implement the logic for ordering the a start day, expressed as a number of days from
tasks. Add the following function at the end of the file. This the start of the entire project. So the first task(s)
will return a dictionary that will map each task number to will begin at 0 days.

return tasks
def order_tasks(tasks):
Gets the task and checks
incomplete = set(tasks) Starts with all the
tasks incomplete if its prerequisites have
been completed
completed = set() and no start days

start_days = {} Loops over the

incomplete task
while incomplete: numbers while there
Computes the
are still any left
earliest this
for task_number in incomplete: task can start
based on the
task = tasks[task_number] end days of its
prerequisites
if task.prerequisites.issubset(completed):
earliest_start_day = 0
for prereq_number in task.prerequisites:
prereq_end_day = start_days[prereq_number] + \
tasks[prereq_number].duration
if prereq_end_day > earliest_start_day:
earliest_start_day = prereq_end_day
Breaks out of the start_days[task_number] = earliest_start_day
for loop. The loop
will start again if incomplete.remove(task_number) Stores the
there are still some start date and
incomplete tasks left remembers that
completed.add(task_number)
this task has
been completed
break
Returns the
return start_days computed dictionary

ISSUBSET SET METHOD

The issubset set method checks whether one set is completed yet. The earliest_start_day is
contained within another set. An empty set is a subset set to 0 before looping over a task’s prerequisites.
of any set, including another empty set. This means If there are no prerequisites, then this task will
that task.prerequisites.issubset(completed) use 0 as its start day. Once this task is added to
will be true for a task with no prerequisites and will the completed set, it will allow the tasks that
begin immediately, even when no tasks have been depend on it to begin.
ORDERING THE TASKS

2.2 TEST THE CODE

Save the code and run the module to test the order_tasks()
function at the prompt. You will see that task 1 can begin immediately
(after 0 days) and task 9 is the last task to start, 22 days after the project
begins. Tasks 2 and 3 will both start at the same time, as will tasks 6 and 7. These tasks start at the same
It is assumed that the user will be able to do both tasks at the same time. time because they have the
same prerequisites

>>> tasks = read_tasks("project.csv")

>>> order_tasks(tasks)
{1: 0, 2: 2.0, 3: 2.0, 4: 4.0, 5: 9.0, 6: 11.0, 7: 11.0,
8: 18.0, 9: 22.0}

Drawing the chart

3 Now that you have read the CSV file and
ordered the tasks inside it, it is time to draw
a chart for the project. Python has a built-in,
cross-platform toolkit for graphical applications
called Tk. You will use this to open a window
and draw inside it. Week 1 Week 2 Week 3

Design game
Release onto functionality
app store

Break functionality Draw basic

into steps images

Test and review Draw better images

3.1 IMPORT THE TOOLKIT

Start by importing the Tk functionality into
your program. It is found in Python’s standard library
import csv
called tkinter – short for Tk Interface. Add this code
at the top of the .py file. By convention, the import import tkinter
statements are ordered alphabetically at the top of
the file, but it does not matter if they are arranged
in a different order. Imports the Tk
functionality
 PYTHON
Project planner 146 147
THE Tk GUI
Visual elements in Tk are called “widgets”. The root List widget packed on
Widgets are placed inside one another to create a window widget top of root window
hierarchy of graphical elements. The “root” (first)
My Application
widget created in this hierarchy is the top-level
window widget. Widgets are created by calling
their Tk constructors with the parent widget as Thing 1
the first argument, followed by a set of keyword Thing 2
arguments specifying different attributes of the Thing 3
widget, such as its size and colour. Widgets
are visually packed within their parent widgets.
Tk module’s mainloop() function draws the
widgets on screen and handles events such as
mouse clicks and key presses. This function does
not return while the window is open. If you want Press me! No, Press me!
to do anything after the window opens, you will
have to define functions that will be called by
mainloop() when specific events happen, such
as a button being pressed. Button widget Button widget Frame container widget
packed at the left packed at the packed at the bottom of
side of frame right side of frame the root window

3.2 CREATE A WINDOW

Next, add this code at the end of the .py file to create a
window. It will contain a button and a canvas widget. The button Creates a button
will display some text as a label, and the canvas widget will define widget and places
an area that you can draw into. You need to specify the size and Creates a Tk top-level window it at the top edge
background colour of the canvas widget. widget (see box, above) of the window

return start_days
root = tkinter.Tk()
Gives the
root.title("Project Planner") window a title

open_button = tkinter.Button(root, text="Open project...", \

command=open_project) Creates
a canvas
open_button.pack(side="top") widget and
places it at
canvas = tkinter.Canvas(root, width=800, \ the bottom
edge of the
height=400, bg="white") window

canvas.pack(side="bottom")
tkinter.mainloop()

Runs the Tk main

event-handling function SAVE
DRAWING THE CHART

3.3 RUN THE CODE

If you run the code at this point, you will see a
blank white window with no button inside it. You will also
get an error message in the shell window. This is because
the open_project() function has not been defined as
yet. You will need to close this window to continue.

====== RESTART: /Users/tina/ProjectPlanner/planner.py ======

Traceback (most recent call last):
File "/Users/tina/ProjectPlanner/planner.py", line 35, in <module>
open_button = tkinter.Button(root, text="Open project...",
command=open_project)
NameError: name 'open_project' is not defined
>>>

The program will crash and display

this error in the shell window

3.4 ACTIVATE THE BUTTON

The button you created in step 3.2 should allow you to open_project() function just below the order_tasks()
select a .csv project file that will then be drawn into a chart. To do function from step 2.1. If you run the program now you will get
this, use a Tk file dialogue found in a sub-module of tkinter. Add the another error message as the draw_chart() function has
import statement at the top of your file as shown. Then add a new not been defined yet.

import tkinter Imports a single function from

tkinter.filedialog rather
from tkinter.filedialog import askopenfilename than importing the entire module

Calls the function to open a Specifies the “.” is a special directory name for
file dialogue for choosing a CSV file dialogue title the “current” directory

return start_days
def open_project():
filename = askopenfilename(title="Open Project", initialdir=".", \
filetypes=[("CSV Document", "*.csv")])
tasks = read_tasks(filename)
draw_chart(tasks, canvas)

Draws a chart of the tasks Reads the tasks from the .csv Specifies the
in the canvas widget file returned by the dialogue acceptable file format
 PYTHON
Project planner 148 149
3.5 DRAW THE CHART
It is time to draw the project as a Gantt chart. function and gives default values to some of its
Before drawing the chart, you will first need to decide what arguments. Only the first two arguments (tasks and
you want it to look like and what visual elements you need canvas) are actually required to call the function. The
to draw it. Add this code below the code from step 2.1 (above arguments with default values are optional and will
the open_project() function) to draw the headers and take the values that you have specified, creating some
dividers of the chart. This will define a draw_chart() local “constants” in the function.

Task title Header divider

Column header for

Week 1 Week 2 Week 3 Week 4 the week number

TASK 1
Column
divider
TASK 2

Task start/
TASK 3 duration bar

Arguments with default values specify Default value of

where to draw the elements and how an argument
much space they will take on the canvas

def draw_chart(tasks, canvas, row_height=40, title_width=300, \

line_height=40, day_width=20, bar_height=20, \
title_indent=20, font_size=-16): Draws a horizontal
line for the header,
height = canvas["height"] one row down and
Defines the height and width across the entire
width = canvas["width"] of the canvas as local variables width of the chart

week_width = 5 * day_width
canvas.create_line(0, row_height, width, li ne_height, \
fill="grey")
Loops through the number
Sets x to the width of the title
for week_number in range(5): of weeks from 0 to 4
plus the week width times the
number of the week
x = title_width + week_number * week_width
canvas.create_line(x, 0, x, height, fill="grey")
canvas.create_text(x + week_width / 2, row_height / 2, \
Draws a vertical line text=f"Week {week_number+1}", \
at x down the entire
height of the chart font=("Helvetica", font_size, "bold"))
def open_project():

Draws a text string at a point half a week

width past x and half a row down
DRAWING THE CHART

3.6 RUN THE CODE

Your Gantt chart is now ready. Row
Save the file and run the code. You will Week 1 Week 2 Week 3 Week 4 Week 5
height
now be able to click on the button,
choose a CSV file, and see the headers
Week
and dividers being drawn.
width

Height Title width

THE Tk CANVAS WIDGET

The Canvas widget provides a space on screen inside (0,0) X
which you can add elements, such as lines, rectangles,
and text. You need to call methods on the canvas
object to create the elements. These methods take

CANVAS[“HEIGHT”]
one or more coordinates as arguments, followed by
a number of optional keyword arguments that allow
the user to specify styling information, such as colours, CANVAS
line thicknesses, or fonts (see tables, below). Canvas
coordinates are specified in pixels from the top-left Y
corner of the drawing area. Colours can be specified
either by their names, such as “red” or “yellow”, or by
their hex code, such as “#FF0000”. Text is drawn centred
on the given coordinates by default. The anchor CANVAS[“WIDTH”]
keyword argument can be set to a “compass point”
constant (tkinter.N, tkinter.NE and tkinter.E) to draw
the text with a corner or edge at the coordinates instead.

BASIC METHODS ADDITIONAL STYLING ARGUMENTS

Method Description Argument Description
create_line(x1, y1, x2, y2, …) Adds a line from (x1, y1) width Line width
to (x2, y2)

fill Fill colour of a shape or the

create_rectangle(x1, y1, x2, y2, …) Adds a rectangle from colour of lines and text
(x1, y1) to (x2, y2)

outline Outline colour of shapes

create_oval(x1, y1, x2, y2, …) Adds an oval with a

bounding box from
(x1, y1) to (x2, y2) font Font used for text, either a tuple of
(name, size) or (name, size, style)

create_text(x1, y1, text=t, …) Adds a text label anchored

at (x1, y1) showing string t anchor Anchor point of the text used when
drawing at the specified coordinates
 PYTHON
Project planner 150 151
3.7 DRAWING THE TASKS
Finally, add this code to draw the task title and the task
duration bar for each task. Type these lines at the end of the Draws the task title anchored at the
draw_chart() function. Then, save the file and run the code to centre-left of the text, half a row below
see the complete Gantt chart when you open the “project.csv” file. y and title_indent in from the left

...canvas.create_text(x + week_width / 2, row_height / 2, \

text=f"Week {week_number+1}", \
font=("Helvetica", font_size, "bold"))
Orders the tasks to
start_days = order_tasks(tasks) get the start days

y = row_height Begins with y, one row down Loops over the task numbers
from the top of the canvas in the order that they occur in
for task_number in start_days: the start_days dictionary

task = tasks[task_number]
canvas.create_text(title_indent, y + row_height / 2, \
text=task.title, anchor=tkinter.W, \
font=("Helvetica", font_size))
bar_x = title_width + start_days[task_number] \
* day_width
Calculates
bar_y = y + (row_height - bar_height) / 2 the coordinates
of the top-left
corner of the bar
bar_width = task.duration * day_width and its width
canvas.create_rectangle(bar_x, bar_y, bar_x + \
bar_width, bar_y + \
bar_height, fill="red")
y += row_height

Adds a vertical space of row_height Draws a red-coloured

into the original y bar using these values

Week 1 Week 2 Week 3 Week 4 Week 5

Design game
functionality

Implement
basic Draw basic images
functionalit
y
 Hacks and tweaks
Stop the window from resizing
At the moment the user can manually resize the window of the Gantt chart.
However, this causes the contents to move around or be cut off. Drawing the Prevents the root
window properly when it is resized is quite complicated, but you can stop it from window from resizing
being resized instead. Add this line of code to the program to make this change. in any direction

root.title("Project Planner")
root.resizable(width=False, height=False)
open_button = tkinter.Button(root, text="Open project...", \
command=open_project)

You will not be able to

resize the window anymore

Project Planner

Open project...

Week 1 Week 2 Week 3 Week 4 Week 5

Design game functionality

Draw basic images

Break functionality into steps

Implement basic functionality

Test and review

Draw better images

Implement advanced
functionality

Test and review

Release onto app store

 PYTHON
Project planner 152 153

Use a frame to layout the button

You can use a Tk Frame widget to change the position of the
Open Project… button. Currently it is stuck in the middle of the
window at the top. You can place it in the top-left corner and add
a bit of space around it. Add the following lines of code at the Creates a frame at the root
bottom of the .py file to create the button_frame and then of the window, with a small
update the open_button so it sits inside this widget. amount of x and y padding

root = tkinter.Tk()
root.title("Project Planner")
root.resizable(width=False, height=False)
button_frame = tkinter.Frame(root, padx=5, pady=5) Places the frame at the
top of the window, filling
button_frame.pack(side="top", fill="x") the entire width of x

open_button = tkinter.Button(button_frame, text="Open project...", \

command=open_project)
open_button.pack(side="left") Places the button at
the left of the frame
canvas = tkinter.Canvas(root, width=800, height=400, bg="white")

Creates the open_button inside the

button_frame instead of the root

Open project...
HACKS AND TWEAKS

Add a filename label

You can also place a label inside the window with the name of the file that
you are looking at. Add the following lines to the code as shown. The config
method used in the code will allow you to reconfigure a widget after it has
been created. It takes the same named keyword as the original widget-
creation function. This will allow you to specify the text attribute of the
Label widget after you have opened the file.

def open_project():
filename = askopenfilename(title="Open Project", initialdir=".", \
filetypes=[("CSV Document","*.csv")])
tasks = read_tasks(filename)
draw_chart(tasks, canvas)
filename_label.config(text=filename) Updates the text
attribute of the label
root = tkinter.Tk() with the name of the file

root.title("Project Planner")
root.resizable(width=False, height=False)
button_frame = tkinter.Frame(root, padx=5, pady=5)
button_frame.pack(side=”top”, fill=”x”)
open_button = tkinter.Button(button_frame, text="Open project...", \
command=open_project)
open_button.pack(side="left")
Creates a new label
filename_label = tkinter.Label(button_frame) inside button_frame

Places the label to the

filename_label.pack(side="right")
right of the frame
canvas = tkinter.Canvas(root, width=800, height=400, bg="white")

Project Planner

Open project... Desktop/ProjectPlanner/project.csv The name of the

file will appear
to the right of the
Open project...
Week 1 Week 2 Week 3 Week 4 Week 5 button

Design game functionality

Draw basic images

 PYTHON
Project planner 154 155
Add a clear button
You can also add another button to your program that will Updates the text
clear all the items from the window and erase the chart. attribute of the label
Add the following lines to the code to create it. to an empty string

draw_chart(tasks, canvas)
filename_label.config(text=filename)
def clear_canvas():
filename_label.config(text="")
Creates a new button inside
canvas.delete(tkinter.ALL) Deletes all the the window that will call the
existing items on clear_canvas() function
root = tkinter.Tk() the drawing canvas when pressed

root.title("Project Planner")
open_button = tkinter.Button(root, text="Open project...", \
command=open_project)
open_button.pack(side="left")
clear_button = tkinter.Button(button_frame, text="Clear", \
command=clear_canvas)
clear_button.pack(side="left") Places the new
button on the left
side of the window
filename_label = tkinter.Label(button_frame)
canvas = tkinter.Canvas(root, width=800, height=400, bg="white")
canvas.pack(side="bottom")

Open project... Clear

Objects and classes
One of Python’s most important features is that it is
an object-oriented language (see p.25). This means that
data in Python can be arranged in terms of classes and
objects, which allows users to have one blueprint from
which multiple objects can be created.

SELECT

Class
Programmers use classes to classify related
things together. This is done using the
keyword “class”, which is a grouping of
object-oriented constructs. Here, the class
Car defines the form the objects below
should have.
CAR BICYCLE

Object
An object is an instance of a class, just like
a real car is an instance of the concept of a
car. A car object’s fields and methods would
contain data and code for a particular instance
of the class Car. So the object named “sports”
would have a higher “max_speed” than the
“sedan” object. SEDAN SPORTS

Fields current_speed
Fields contain data about an object.
In this example, fields are likely
to include values that might feature max_speed
in a car simulator program, such
as current_speed, max_speed, and
fuel_level.
fuel_level
 PYTHON
Objects and classes 156 157
What are objects and classes?
An object is a data type that is modelled after a real-world item, such
as a car, allowing programmers to create a computer representation
of it. Objects usually consists of two parts: fields, containing data, and
methods, containing code. A class, on the other hand, defines the form a
particular object should have. It is like the “idea” of an object and lays out
the types of field that object would have, and what its methods would do.

Describes the
attributes common Fields of the
to any car class Car

class Car:
current_speed = 0
max_speed = 0
TRUCK
fuel_level = 0
def accelerate(self):
print("speeding up")
def break(self):
print("slowing down")

Methods of
the class Car
SUV my_car = Car()
my_car.current_speed = 4.5
my_car.max_speed = 8.5
my_car.fuel_level = 4.5
Methods
Accelerate
Methods define an
object’s behaviour, so
Sets the fields of the my_car
a car object’s methods
object to specific values
would be likely to include Brake
actions that could be
done to, or with, a car. Instantiating a class
For example, accelerate, A program that allows users to model the functioning
Turn of a car might include the class Car, with attributes
brake, and turn.
common to all cars. A user’s car (here, a sports model)
would then be an object, with fields containing values
related to that particular car, and methods defining
the actions done with the car.
Budget manager
Managing money can be a tedious task, which can be made
easier with a computer. There are various apps for tracking
what you spend, based on setting budgets for different
kinds of expenses. This project will create a simple budget
manager using Python dictionaries and classes.

What the program does Budget planner

This budget manager will allow users to keep track of their expenditure Rather than directly creating a program,
this project will create a set of functions
against an overall budget of 2500. To start, a budget is allocated for that can be called from the Python
different kinds of expenditure, such as groceries and household bills. shell. These functions can also be
The expenses can then be compared against their allocated budget. imported and used in other programs.
A summary is displayed to get a quick overview of the finances.

Python 3.7.0 Shell

>>> add_budget("Groceries", 500)

2000.00
Allocates spend
>>> add_budget("Rent", 900) against budget

1100.00
>>> spend("Groceries", 35)
Returns the
budget left
465.00
>>> spend("Groceries", 15)
450.00
>>> print_summary()
Budget Budgeted Spent Remaining
--------------- ---------- ---------- ----------
Groceries 500.00 50.00 450.00
Rent 900.00 0.00 900.00
--------------- ---------- ---------- ----------
Total 1400.00 50.00 1350.00

The summary gives

an overview of all
the expenses
 PYTHON
Budget manager 158 159
YOU WILL LEARN WHERE THIS IS USED
❯ How to use Python dictionaries Time: The library developed in this project, with the
1 hour addition of a user interface, can be used in a
❯ How to raise exceptions for errors
Lines of code: 43
simple financial-planning application. Splitting up a
❯ How to format strings for output
program into multiple modules and encapsulating
❯ How to create a Python class Difficulty level code and data in classes are both techniques that
are used extensively in programming.

Function calls Program design

The functions written in this program will allow you In this project, functions are added
to allocate an amount of income to different named
budgets. The functions will then track spending against sequentially to create the budget library.
these budgets to see the total amount spent compared Then, a summary of all the expenses is
to the amount that was budgeted. The diagram below printed. In the end, all the code is converted
shows an example of making a series of function calls.
into a Python class to make it more useful.

LIBRARY BUDGET
USER LIBRARY START

add_budget
("Groceries", 500)

Add budget
2000

add_budget
("Rent", 900)
Add expenditure

1100

spend
("Groceries", 35) Print summary

465

Convert the
code to a class
spend
("Groceries", 15)

450
END
SETTING UP

Setting up
1 To create this budget manager, you will need a new
Python file. You can then add some basic code to the file and
build on it later. The use of Python dictionaries will allow you
to save the amount budgeted and spent.

1.1 CREATE A NEW FILE

The first step is to create a new file that will
contain the code for this project. Open IDLE and select
New File from the File menu. Create a new folder on your
desktop called BudgetManager, and save this empty file
inside it. Name the file “budget.py”. BUDGET
BUDGET.PY MANAGER

1.2 SET UP THE VARIABLES

Now create some global variables that will Sets the variable
track the amount of money available, the amount available = 2500.00
available to
you have budgeted, and the amount spent. You an example
will use Python dictionaries (see box, below) for budgets = {} starting amount
the budgets and expenditure that will map from a
name, such as “Groceries”, to an amount of money. expenditure = {}
Type this code into the new file.
Curly brackets are used to
create a dictionary – an empty
dictionary in this instance

DICTIONARIES
When deciding what Python data structure to use, another, such as an amount of money. In the table
think about how you would write the information to be below, the first column contains the keys of the
stored. Often, the obvious way to write something down dictionary and the second contains the values. If
is similar to the table shown below. If the information in the table has multiple value columns, then these
the first column is unique (the items in it are not repeated), can be stored in separate dictionaries using the
then using Python dictionaries might be the answer. same keys. You can, therefore, have one dictionary
A dictionary is a data structure that consists of multiple for budgets and another for expenditure.
key:value pairs. It maps one value, such as a name, to

DICTIONARY FORMAT
Budget name Budget amount
Groceries 500

Bills 200

Entertainment 50

{"Groceries": 500, "Bills": 200, "Entertainment": 50} The table information

above as a Python
dictionary
 PYTHON
Budget manager 160 161
Adding a budget
2 In this section, you will create budgets for
the various expenses. First, you will add code to
enable the user to add these budgets, and then
ensure that the code prevents users from making
some common budgeting errors.

CLOTHES RENT GROCERIES

2.1 ADD A BUDGET FUNCTION

available
Write a function to add a
budget. The function will take the
def add_budget(name, amount): will be global
when set in
name of the budget and the amount
of money to be budgeted. It will then global available this function
store these in the budgets dictionary Stores the
and deduct the amount from the budgets[name] = amount budgeted
amount available. The function then amount in
returns the new available amount available -= amount the budgets
to show how much is still left to dictionary
budget. Add this code below the expenditure[name] = 0
global variables.
return available
Deducts the budgeted
amount from the Returns the new Sets the spent amount
available amount available amount for this budget to 0 SAVE

2.2 RUN FILE

Save and then run the file
by selecting Run Module from the
>>> add_budget("Groceries", 500) Type this line
and press Enter
Run menu. This will open the IDLE Returned value of
Python shell window. You can test 2000.0
the function call
the function by typing an example
call in the shell. You will see >>> in the >>> budgets
window, which is the Python shell
prompt. You can type small pieces {'Groceries': 500}
of Python code next to this and they
will be executed when you press >>> expenditure
Enter or return.
{'Groceries': 0}
Typing the name of
variables at the prompt
will show their values
ADDING A BUDGET

2.3 ERROR CHECKING

To see what happens if you add a budget twice,
type this code in the shell window. You will notice that the
budgets dictionary will be updated with the new value, but
the available amount is reduced by both. To avoid this, you BUDGET PLANNER
need to add some code to check if the same budget name has
been used twice. Add the code shown in the editor window
below to make changes to the add_budget() function. Rent 900
Groceries 500
Rent 400
>>> add_budget("Rent", 900) Clothes 300

1100.0
>>> add_budget("Rent", 400)
The available amount
700.0 is deducted twice
>>> budgets
{'Groceries': 500, 'Rent': 400}

def add_budget(name, amount):

global available Checks if name already
exists as a key in the
if name in budgets: budgets dictionary

Leaves the function immediately

raise ValueError("Budget exists") with an exception if a budget
name appears more than once
budgets[name] = amount

EXCEPTIONS
In Python, errors are indicated by raising exceptions. There are a number of standard exception types in
These exceptions interrupt the normal execution of Python. Each of these accept a string value giving an error
code. Unless the exception is caught, the program message that can be displayed to the user to explain what
will immediately exit and display the exception that has gone wrong. The table below lists a few standard
has been raised and the line of code it occurred at. exception types and when they should be used.

TYPES OF EXCEPTIONS
Name Use when
TypeError A value is not of the expected type: for example, using a string where
a number was expected

ValueError A value is invalid in some way: for example, too large or too small

RuntimeError Some other unexpected error has occurred in the program

 PYTHON
Budget manager 162 163
2.4 RUN THE MODULE
Test the code again to
check if the error has now been
>>> add_budget("Groceries", 500)
fixed. When you run the code,
the three global variables will 2000.0
be set back to their initial
values. Type this code in the >>> add_budget("Rent", 900)
shell window. You will now
get an error message if you 1100.0
try adding the same budget
twice. If you check the variables >>> add_budget("Rent", 400)
budgets and available, you
will see that they have not been Traceback (most recent call last):
updated with the wrong values.
File "<pyshell>", line 1, in <module>
add_budget("Rent", 400)
Error message
displayed on screen File "budget.py", line 7, in add_budget
raise ValueError("Budget exists")
ValueError: Budget exists

>>> budgets
{'Groceries': 500, 'Rent': 900}
The variables will
not be updated >>> available
with wrong values
1100.0

2.5 MORE ERROR CHECKING

Continue in the shell window to see what happens if Update the code in the editor window. Then save
you budget an amount of money that is more than what is available. the file and run the code once again to test if the
This is clearly an error, since you should not be able to over-budget. new error message is displayed, and over-budgeting
Add another check into the add_budget() function to fix this. is prevented.

>>> add_budget("Clothes", 2000)

-900.0 A negative value
indicates over-budgeting

if name in budgets:
raise ValueError("Budget exists") Checks if the amount being
budgeted is more than the
if amount > available: amount available

Raises an
raise ValueError("Insufficient funds") exception and
leaves the function
budgets[name] = amount immediately
SAVE
ADDING A BUDGET

>>> add_budget("Groceries", 500)

2000.0
>>> add_budget("Rent", 900)
1100.0
>>> add_budget("Clothes", 2000)
Traceback (most recent call last):
File "<pyshell>", line 1, in <module>
add_budget("Clothes", 2000)
Error message for
File "budget.py", line 9, in add_budget over-budgeting
is displayed
raise ValueError("Insufficient funds")
ValueError: Insufficient funds

Tracking expenditure
3 Next, you need to add a way to track
all the expenditure. To do this, you will first
add a function that allows you to enter
the money that has been spent,
and then add another function to
display the summary. This will
indicate the total money spent
and the amount remaining. RENT CLOTHES
GROCERIES MONEY LEFT

3.1 ADD SPEND FUNCTION

Add a function to note the
amount you have spent and the name of return available Raises an exception if the value
of name is not a key in the
the budget that you want to track it against. expenditure dictionary
Add a new spend() function below the def spend(name, amount):
add_budget() function. The Python
“+=” operator is used to add an amount to if name not in expenditure:
a variable. Save the file and then run the
module to try using this new function. raise ValueError("No such budget")
Adds amount to the corresponding key expenditure[name] += amount
in the expenditure dictionary
 PYTHON
Budget manager 164 165
3.2 RETURNING THE REMAINING AMOUNT
It will also be useful to track the amount left in
the budget. Add this code to the end of the spend() function
>>> add_budget("Groceries", 500)
you just created, then save and run the file to test the code.
You will notice that you can spend more than the budgeted 2000.0
amount. You do not need an exception for this, as you will
want to track overspending. >>> spend("Groceries", 35)
Gets the budgeted
amount for name 465
budgeted = budgets[name] >>> spend("Groceries", 15)
spent = expenditure[name] 450
return budgeted - spent >>> spend("Groceries", 500)
Negative value indicates that
Returns the amount Gets the total -50 spending exceeds the budget
left in the budget amount spent

3.3 PRINT A SUMMARY

In this step, you will add a function that will display an code at the bottom of the file. Then, save the changes
overview of each budget name, the amount originally budgeted, and run the file in the shell window. The summary will
the amount spent, and the amount left to spend (if any). Add this display the figures for every category.

def print_summary():
Loops through all the keys
for name in budgets: in the budgets dictionary
Gets the budgeted amount
budgeted = budgets[name] for the name key
Gets the amount spent
spent = expenditure[name] for the name key
Calculates the remaining amount
remaining = budgeted - spent by deducting budgeted from spent

print(name, budgeted, spent, remaining) Prints a single line

summary for this budget

>>> add_budget("Groceries", 500)

2000.0
>>> add_budget("Rent", 900)
1100.0
>>> spend("Groceries", 35)
465
>>> spend("Groceries", 15)
450
>>> print_summary()
Groceries 500 50 450
Groceries 500 50 450
Rent 900 0 900
Rent 900 0 900
TRACKING EXPENDITURE

3.4 FORMAT THE SUMMARY

At this stage, the summary will be a bit hard to the print_summary() function as shown below.
read with the numbers squeezed together. To fix this, This will create a string from the values, formatting
you can line them up in a proper table by using “string each to a specific width and number of decimal
formatting” (see box, below). Change the print line in places. It will then print that string.

remaining = budgeted - spent

print(f'{name:15s} {budgeted:10.2f} {spent:10.2f} '
f'{remaining:10.2f}')
The amount will be displayed
with two decimal places

>>> add_budget("Groceries", 500)

2000
>>> add_budget("Rent", 900)
1100
>>> spend("Groceries", 35)
465
>>> spend("Groceries", 15)
450
>>> print_summary() The values will have two
decimal places and will
Groceries 500.00 50.00 450.00 be lined up in columns,
similar to a table
Rent 900.00 0.00 900.00

FORMAT STRINGS
In Python, formatted strings can be created from values EXAMPLES OF FORMAT STRINGS
with special format strings. These are written like normal
Example Result
strings, but have an “f” character before the opening
quotation mark. Inside the string, you can place code f'{greeting} World!' 'Hello World!'
expressions within curly brackets. These will be executed
and replaced with their values. The most common f'{greeting:10s}' 'Hello '
expressions used are variable names, but arithmetic
f'{cost:5.2f}' ' 3.47'
calculations can also be used. Any part of the string outside
the brackets is used without change. Detailed formatting f'{cost:5.1f}' ' 3.5'
instructions can be added after a colon. This includes
a letter specifying how to format the value. Placing a f'The answer is {a * b}' 'The answer is 42'
number before this letter allows a width to be specified.
 PYTHON
Budget manager 166 167
3.5 ADD A TABLE HEADER
Now, add a header to the
table so that the numbers within each
category can be easily distinguished.
Add two print statements in the BUDGETED SPENT REMAINING
print_summary() function. It may
be easier to type the line with dashes
-------------- --------- ------------------
first – 15 dashes followed by three lots
of 10 dashes, with spaces in between. 500.00 50.00 450.00
You can then line up the titles against
the dashes. 900.00 0.00 900.00

def print_summary():
print("Budget Budgeted Spent Remaining")
print("--------------- ---------- ---------- ----------")
for name in budgets:
The titles have been aligned
budgeted = budgets[name] against the dashes

spent = expenditure[name]

3.6 ADD A TABLE FOOTER

To complete the summary table, you can add a footer for printing the totals that you used for the budget.
to it. This will add up the contents of the various columns and However, remember to use “Total” instead of the budget
display their total value. Update the print_summary() name, and total_budgeted, total_spent, and
function as shown below. Use the same format instructions total_remaining for the other variables.

def print_summary():
print("Budget Budgeted Spent Remaining")
print("--------------- ---------- ---------- ----------")
total_budgeted = 0
total_spent = 0 Sets the total
variables to 0
total_remaining = 0
for name in budgets:
TRACKING EXPENDITURE

budgeted = budgets[name]
spent = expenditure[name]
remaining = budgeted - spent
print(f'{name:15s} {budgeted:10.2f} {spent :10.2f} '
f'{remaining:10.2f}')
total_budgeted += budgeted
total_spent += spent Adds the amount
to the totals
total_remaining += remaining
print("--------------- ---------- ---------- ----------")
print(f'{"Total":15s} {total_budgeted:10.2f} {total_spent:10.2f} '
f'{total_budgeted - total_spent:10.2f}')

Prints another
separator line
and the summary
>>> add_budget("Groceries", 500) with the totals
below it
2000.0
>>> add_budget("Rent", 900)
1100.0
>>> spend("Groceries", 35)
465
>>> spend("Groceries", 15)
450
>>> print_summary()
Budget Budgeted Spent Remaining
--------------- ---------- ---------- ----------
Groceries 500.00 50.00 450.00
Final summary
Rent 900.00 0.00 900.00 table printed with
a header and footer
--------------- ---------- ---------- ----------
Total 1400.00 50.00 1350.00
 PYTHON
Budget manager 168 169
Converting the
4 code into a class
In this section, you will take all the
code written so far and turn it into
a Python class (see pp.156–57).
This will allow the user to track
multiple budgets simultaneously.

4.1 INDENT THE CODE

Click here to
Since Python is structured using Format Run Options
indentation, you need to indent the entire add indents to
code to convert it into a class. Select all Indent Region the entire file
the code in the file and then choose “Indent Dedent Region
Region” from the Format menu. Next, add Comment Out Region
a new class header at the top of the file,
before the variables.

Defines the class BudgetManager:

new class
available = 2500
The variables will now budgets = {}
appear indented
expenditure = {}

4.2 ADD INITIALIZER

Indent the three variables again and add a function values for the instance variables. The first argument of the
header to them. Functions inside a class are known as methods. initializer is the new instance, called self by convention.
The _ _init_ _ method is called when a new instance of a class You can also add additional arguments that will allow you
is created. This method is called the “initializer” as it sets the initial to provide useful values, such as amount here.

class BudgetManager:
Arguments
within the
def __init__(self, amount): initializer
available = 2500
budgets = {}
expenditure = {}
CONVERTING THE CODE INTO A CLASS

4.3 CREATE INSTANCE VARIABLES

Next, convert the three variables into instance
variables. This is done by adding “self.” before each of
class BudgetManager:
the variable names. Use the argument amount instead of
2500 as the initial value for the available instance variable. def __init__(self, amount):
self.available = amount
Converts the self.budgets = {}
variables to
instance variables self.expenditure = {}

4.4 TURN THE FUNCTIONS INTO METHODS

Now you need to turn all the other functions in the code into
methods. Just like with the initializer, you can do this by adding self as the
first argument of every function, and then adding self. before each use of
the instance variables. Modify the add_budget() function as shown below. Remove the line
Delete the global available line from the add_budget method, as global available
available is now an instance variable. from between these
two lines of code

def add_budget(self, name, amount):

if name in self.budgets:
raise ValueError("Budget exists")
if amount > self.available:
raise ValueError("Insufficient funds")
self.budgets[name] = amount
self.available -= amount
self.expenditure[name] = 0
return self.available
def spend(self, name, amount):
if name not in self.expenditure:
raise ValueError("No such budget")
self.expenditure[name] += amount
budgeted = self.budgets[name]
spent = self.expenditure[name]
return budgeted - spent
Adds an argument
def print_summary(self): to the function
 PYTHON
Budget manager 170 171

print("Budget Budgeted Spent Remaining")

print("--------------- ---------- ---------- ----------")
total_budgeted = 0
total_spent = 0
total_remaining = 0
for name in self.budgets:
budgeted = self.budgets[name]
spent = self.expenditure[name]

Add self. before

each use of the
instance variable
SAVE

4.5 RUN THE MODULE

Save and run the module. Type these lines in the shell window to
test the code. This will add a newly created instance of the BudgetManager
class. The code inspects the instance variables by putting outgoings. Sets the variable outgoings
before their name. You can call methods in a similar way, by putting the to an instance of the
variable name before the function name with a full stop. BudgetManager class

>>> outgoings = BudgetManager(2000)

>>> outgoings.available
2000
>>> outgoings.budgets
{}
>>> outgoings.expenditure
{}
>>> outgoings.add_budget("Rent", 700)
1300
>>> outgoings.add_budget("Groceries", 400)
900
CONVERTING THE CODE INTO A CLASS

>>> outgoings.add_budget("Bills", 300)

600
>>> outgoings.add_budget("Entertainment", 100)
500
>>> outgoings.budgets
{'Rent': 700, 'Groceries': 400, 'Bills': 300, 'Entertainment': 100}
>>> outgoings.spend("Groceries", 35)
365
>>> outgoings.print_summary()
Budget Budgeted Spent Remaining
--------------- ---------- ---------- ----------
Rent 700.00 0.00 700.00
Groceries 400.00 35.00 365.00
Bills 300.00 0.00 300.00
Entertainment 100.00 0.00 100.00
--------------- ---------- ---------- ----------
Total 1500.00 35.00 1465.00

5 TRACKING MULTIPLE BUDGETS

It is possible to reset the budget by simply creating a budget called holiday. As the available, budgets, and
new instance of the BudgetManager class, by typing this code in expenditure variables are stored within each instance,
the shell window. You can even have multiple BudgetManager they are distinct from each other and can have different
instances for tracking separate budgets. To test this, create a new values for the different instances.

Creates a new instance of

the BudgetManager class

>>> outgoings = BudgetManager(2500)

>>> outgoings.add_budget("Groceries", 500)
Prints the summary
2000 for the new instance

>>> outgoings.print_summary()
 PYTHON
Budget manager 172 173

Budget Budgeted Spent Remaining

--------------- ---------- ---------- ----------
Groceries 500.00 0.00 500.00
--------------- ---------- ---------- ----------
Total 500.00 0.00 500.00
>>> holiday = BudgetManager(1000) Adds another
new instance of
>>> holiday.add_budget("Flights", 250) BudgetManager

750
>>> holiday.add_budget("Hotel", 300)
450
>>> holiday.spend("Flights", 240)
10
>>> holiday.print_summary()
Budget Budgeted Spent Remaining
--------------- ---------- ---------- ----------
Flights 250.00 240.00 10.00
Hotel 300.00 0.00 300.00
--------------- ---------- ---------- ----------
Total 550.00 240.00 310.00

5.1 USING THE CODE

The code written in this project is a module that can new file and save it in the BudgetManager folder you
be used in other programs. This module can be imported and created earlier. Name this new file “test.py”. Now add
used like any other Python library (see pp.116–17). Try this out this code to create an instance of the BudgetManager
by creating a new module that will import this one. Open a class that calls methods on it.

Imports the module

import budget budget into this new one

outgoings = budget.BudgetManager(2500) The BudgetManager

class is referenced by
adding the budget
outgoings.add_budget("Groceries", 500) module name before
it with a full stop
outgoings.print_summary()
HACKS AND TWEAKS

Hacks and tweaks

Changing your mind
In the project, you modified the add_budget method to stop below the existing add_budget method. You
the same budget from being added twice. However, it would may need to look at this code carefully to follow
also be useful to have a way to change a budget later. You can the logic. Add a line in the test.py module to call
add a new method to do this. Add the following new method this new method so that you can see it working.

def change_budget(self, name, new_amount): Checks if the

budget to be
if name not in self.budgets: changed exists

raise ValueError("Budget does not exist") Gets the old

amount of
old_amount = self.budgets[name] the budget

if new_amount > old_amount + self.available: Checks if the old

amount added
raise ValueError("Insufficient funds") to the available
amount covers
Updates the the new amount
self.budgets[name] = new_amount
budget
self.available -= new_amount - old_amount
return self.available

Reduces available by
the difference between the
old and the new amounts

Record expenditure details

So far, the project tracks the total expenditure against each budget.
However, in a more advanced program you would want to keep
track of each particular item of expenditure. You can do this by
using lists of amounts spent inside the expenditure dictionary
and then adding these together whenever you need the total.

1 CREATE AN EXPENDITURE LIST

Start by modifying the expenditure
dictionary in the add_budget method. You
self.budgets[name] = amount
need to store an empty list inside expenditure,
instead of 0. This allows multiple values to be self.expenditure[name] = []
stored in it.
self.available -= amount

Stores an
return self.available
empty list
 PYTHON
Budget manager 174 175

2 ADD EXPENSES TO LIST

Now in the spend method, change the expenditure
variable so that each new expense is added to the list. Since
expenditure no longer sums up the amounts spent
automatically, you will have to modify the spent variable to
perform the calculations and get the total spent so far.

raise ValueError("No such budget")

self.expenditure[name].append(amount) Appends the
amount to the list
budgeted = self.budgets[name]
spent = sum(self.expenditure[name])
return budgeted - spent

3 GET TOTAL EXPENDITURE

You now need to sum up the items in the print_summary
method. Modify the spent variable as shown below. You will find
that the code functions identically if you run the “test.py” module
again, with a record for each item of expenditure.

for name in self.budgets:

budgeted = self.budgets[name]
Gets the amount spent
spent = sum(self.expenditure[name]) for each budget

remaining = budgeted - spent

FOOD

EL
ELECTRIC
IT Y TRAV
 Pygame Zero
Pygame Zero is a tool that enables programmers to
build games using Python. It provides a simplified
way to create programs using the powerful functions
and data types in the pygame library.

Installing Pygame Zero on Windows

The latest versions of pygame and Pygame
Zero can be installed on a Windows computer
by following the steps given below. An active
Internet connection is required for this. Install a package manager
2 The easiest way to install or update Python libraries
START and modules on a system is to use a package manager
called “pip”. Type the following command in the Command
Prompt and press Enter.
Open the
1 Command Prompt
On a Windows 10 operating c:\
system, click Start and open the
Command Prompt by typing python -m pip install -U pip
“Cmd” into the Search field. If
you have an older version of The Command
Windows, find the Command Prompt thumbnail
Prompt in the Systems folder. looks like this

Installing Pygame Zero on a Mac

The latest versions of pygame and Pygame Zero
can be installed on a computer with macOS
using the “Homebrew package manager”.
Internet connectivity is essential for this.
Install Python 3
2 Next, use “Homebrew” to check if Python 3
is already installed on the system, and install it if
not. Type the following command in the Terminal
window and then press Enter.
Open the Terminal and install a package manager
1 Use the Terminal app to install the modules. It can be found
in the “Utilities” folder under “Applications”. Type the following
START command and then press Enter to install “Homebrew”. The installation brew install python3
process will ask for a user login password to continue, and may take
some time to complete.

ruby -e "$(curl -fsSL https://raw.

githubusercontent.com/Homebrew/
install/master/install)"
 PYTHON
Pygame Zero 176 177
UPDATES
Occasionally, programmers may experience problems while
running Pygame Zero programs after updating to a new
version of their operating system. To fix this, the tools added
during Pygame Zero installation can be uninstalled, then
reinstalled using the instructions here. FINISH

Install Pygame
3 Once the “pip” package manager is Install Pygame Zero
installed, type the command shown below 4 Finally, type the following
and then press Enter. This will use “pip” to command and then press Enter. This
install the pygame library. will install Pygame Zero.

pip install pygame pip install pgzero

FINISH
Install extra tools
3 To install some extra tools that the system requires Install Pygame Zero
to run Pygame Zero, use “Homebrew” and type this
5 Finally, this last command
command into the Terminal window followed by Enter. will install Pygame Zero.

brew install sdl sdl_mixer sdl_sound pip3 install pgzero

sdl_ttf

Install pygame
4 Now type this
command to install the pip3 install pygame
pygame library and
press Enter.
Knight’s quest
This fast-paced, two-dimensional game will put your reflexes
to the test. It uses coordinates to create a two-dimensional
playing area, and Pygame Zero’s Actor class to introduce the
characters and collectable items in the game. An event loop
program makes the game run smoothly.

How to play this game Dungeon crawl

This project is an example of a style of
The aim of this game is to navigate the knight around the dungeon – game called dungeon crawl. In such games,
a two-dimensional playing area – with the arrow keys, but you cannot the player usually navigates a labyrinthine
move through walls or the locked door. Collect the keys by moving environment, collecting items and battling
or avoiding enemies. This game will use the
over them. However, you need to avoid the guards as they try to move classic top-down 2D view, where the player
towards the knight. Any contact with the guards ends the game. You appears to be looking down at the play area
win if you can get to the door after picking up all of the keys. from above.

Pygame Zero Game

Chequered
tiles are
created and
used as the
background

Cracks make
the dungeon
look more
realistic

Create the
door anywhere
along the
circumference
of the dungeon
 PYTHON
Knight’s quest 178 179
YOU WILL LEARN WHERE THIS IS USED
❯ How to use lists Time: The concepts in this project are applicable to all kinds
2 hours of 2D computer games, especially ones that are played
❯ How to index strings
Lines of code: on mobile phones. Apart from in dungeon-crawl
❯ How to use nested loops 151 games, image tile grids are also used in colour- and
❯ How to use Pygame Zero Difficulty level shape-matching games. The logic applied in this game
to make a simple game could also be adapted to simple robotics projects.

The Pygame Zero game loop

A Pygame Zero program is an example of an event loop program. An
event loop runs continuously, calling other parts of the program when
an event occurs so that actions can be taken. The code necessary to
manage this loop is part of Pygame Zero, so you only need to write
the handler functions that deal with these events.

START
The scenery
The game is based on a simple grid
on which square images called
“tiles” are placed. The scenery of the
game consists of a background of Set up game
floor tiles, with additional tiles Top-level statements in the Python file will be
executed first and can be used to initialize the Set up game
representing the walls and the door.
game state and configure Pygame Zero itself.
Pygame Zero will then open a window and
repeat the event loop continuously.

Handle input events

Pygame Zero will check for input events, Handle input
such as key presses, mouse movements, and events
button presses each time through the loop.
GUARD It will call the appropriate handler function
(see p.185) when one of these events occurs.

Handle clock events

The Pygame Zero clock allows users to Handle clock
schedule calls to handler functions in the events
future. These delayed function calls will
KNIGHT be made during this part of the event loop.

Update game state

At this point, Pygame Zero allows the user
KEY Update game
to do any work that they want done on every
state
loop iteration by calling the update handler
The actors
function. This is an optional function.
The movable or collectable items in
the game are called actors. In this
game, the actors are the same size
as the tiles so that each is contained Draw interface
within one grid square. They are Finally, Pygame Zero calls the draw Draw
drawn on top of the scenery so that handler function, which will redraw the interface
the background can be seen behind contents of the game window to reflect
and through them. the current game state.
SETTING UP

Setting up
1 To get started with this project, you will
first need to create the folders to hold all the files.
The next step will be to write some code to draw
the background and the players on screen.

1.1 CREATE THE GAME FILE 1.2 SET UP THE IMAGES FOLDER
First, create a new folder on your desktop and You now need a folder to hold the images
name it “KnightsQuest”. Then, open IDLE and create a new required for this project. Go to the KnightsQuest
file by choosing the New File option from the File menu. folder and create a new folder inside it called “images”.
Save this file in the KnightsQuest folder by choosing Save Go to www.dk.com/coding-course and download the
As… from the same menu. Name the file “quest.py”. resource pack for this book. Then copy the image files
for this project into the new “images” folder.

IDLE

File Edit Shell

New File N Select this option

Open... O to create a new file
IMAGES
Open Module...
Recent Files
Module Browser B

1.3 INITIALIZE PYGAME ZERO Imports the Pygame

Go to the “quest.py” file you Zero functionality
created earlier and type these lines of
code into it to define the dimensions
of the game grid. This will create a
working Pygame Zero program. Save import pgzrun
the file, then choose Run Module from
the Run menu (or press the F5 key on
your keyboard) to execute the code.
You will only see a black window at this GRID_WIDTH = 16
point. Close this window and continue.
GRID_HEIGHT = 12 These define the width and
height of the game grid
and the size of each tile
GRID_SIZE = 50

WIDTH = GRID_WIDTH * GRID_SIZE

WIDTH and HEIGHT These define
are special Pygame HEIGHT = GRID_HEIGHT * GRID_SIZE the size of the
Zero variable names game window

Starts Pygame Zero pgzrun.go()

SAVE
 PYTHON
Knight’s quest 180 181
AGILE SOFTWARE DEVELOPMENT
Each step in this project will describe a new piece of run and try out. This process of evolving a
functionality that makes the program more useful program by iteratively describing, developing,
or interesting, and will then show you the code you and testing small pieces of new functionality
need to add to implement this. At the end of each is part of a style of programming called Agile
step you will have a working program that you can Software Development.

ELOPING ELOPING
DE V DE V

DESCRIBING
DESCRIBING
TING

G
ITERATION 1 ITERATION 2

TIN
TES

TES

1.4 DRAW THE BACKGROUND

In this step, you will draw the floor of the
dungeon as a grid of floor tiles filling the game window.
Add the following lines of code to your program.

This function
HEIGHT = GRID_HEIGHT * GRID_SIZE converts a grid
position to screen
def screen_coords(x, y): coordinates

return (x * GRID_SIZE, y * GRID_SIZE)

def draw_background():
Loops over
for y in range(GRID_HEIGHT): each grid row

for x in range(GRID_WIDTH): Loops over each

grid column
screen.blit("floor1", screen_coords(x, y))
def draw():
draw_background()
pgzrun.go()

The draw handler function Draws the dungeon screen.blit() draws

is called automatically from floor as a background the named image at the
the game loop (see p.179) on screen given screen position
SETTING UP

GRID AND SCREEN COORDINATES

The playing area in this project is a grid that is 16 0 50 100 150
squares wide and 12 squares high. Each of these squares 0
is 50 x 50 pixels. The position of a square is denoted by
x and y coordinates, written as a pair in brackets (x, y). (0, 0) (1, 0) (2, 0)
The x coordinate refers to a column number and the y
coordinate refers to a row number. In programming, 50
counting starts at the number 0, so the top left grid
position for this project is (0, 0) and the bottom right
(0, 1) (1, 1) (2, 1)
grid position is (15, 11). In Python, range(n) iterates over
the numbers 0 to n-1, so range(GRID_HEIGHT) is 0…11
and range(GRID_WIDTH) is 0…15. 100
Nesting one loop inside another allows the program
to iterate across every grid position. Multiplying the (0, 2) (1, 2) (2, 2)
grid coordinates by the size of the grid squares gives
the coordinate of the top left corner of that grid square 150
relative to the top left corner of the game window.
Pygame Zero refers to this as the screen.

1.5 DEFINE THE SCENERY

You can now draw the walls of the
dungeon, add a door, and define the map of
the game. Add the following code below the
constants in your IDLE file to do this. The map is HEIGHT = GRID_HEIGHT * GRID_SIZE
defined as a list of 12 strings, each representing a W represents
row of the grid. Each string is 16 characters wide, MAP = ["WWWWWWWWWWWWWWWW",
a wall tile
with each character describing a single grid square.
"W W",
Spaces represent
K is a key, and "W W", empty squares
G is a guard
The dungeon has 12 rows
and 16 columns of wall tiles "W W KG W",
"W WWWWWWWWWW W",
"W W",
"W P W",
P is the player
"W WWWWWWWWWW W",
"W GK W W",
"W W",
"W D",
"WWWWWWWWWWWWWWWW"]

D is the
OUTPUT ON THE SCREEN door
 PYTHON
Knight’s quest 182 183
1.6 ADD A FUNCTION TO DRAW THE SCENERY
Next, add a new draw_scenery() function above the y (counting from 0). Subscripting this string with [x] selects
draw() function. This will draw the background of each square on the character representing the square in the column
the map. Since the map is a list of strings, subscripting it as MAP[y] specified by x (also counting from 0). The second subscript
selects the string representing the row of the grid specified by is written immediately after the first as MAP[y][x].

screen.blit("floor1", screen_coords(x, y)
Loops over each
def draw_scenery(): grid position

for y in range(GRID_HEIGHT):
Extracts the
for x in range(GRID_WIDTH): character from the
map represented
square = MAP[y][x] by this grid position

if square == "W": Draws a wall tile at

the screen position
screen.blit("wall", screen_coords(x, y)) represented by W

elif square == "D": Draws a door tile

at position D
screen.blit("door", screen_coords(x, y))
def draw():
draw_background()
Draws the scenery after (on top of)
draw_scenery() the background has been drawn

THE ACTOR CLASS

Pygame Zero provides a class called Actor to represent on the image the pos coordinates refer to. It
the actors, or the movable items, in games. You can is a pair of strings where the first gives the x
create an Actor object with the name of the image anchor point – “left”, “middle”, or “right” – and
that should be used when drawing it, and then keyword the second gives the y anchor point – “top”,
arguments that specify other properties of the object, “middle”, or “bottom”. You will anchor the
if required. The most important property is pos, which actors’ pos to the top left of the image, as
specifies the screen coordinates that the image should this matches the coordinates returned by
be drawn at. The anchor property specifies what point the screen_coords() function.

LEFT MIDDLE RIGHT

TOP

MIDDLE Dots and

labels mark the
anchor points

THE ACTORS BOTTOM

SETTING UP

1.7 INITIALIZE THE PLAYER

Create an actor for the player and set its starting
position on the map. Add a new setup function below the
screen_coords() function to do this.

def screen_coords(x, y):

return (x * GRID_SIZE, y * GRID_SIZE)
def setup_game():
Defines player as
global player a global variable

player = Actor("player", anchor=("left", "top")) Creates a new Actor object

and sets its anchor position
for y in range(GRID_HEIGHT): Loops over each
grid position
Extracts the character from
for x in range(GRID_WIDTH): the map representing this
grid position
square = MAP[y][x]
Checks if this grid
if square == "P": position is the player Sets the position of player
to the screen coordinates
player.pos = screen_coords(x, y) of this grid position

1.8 DRAW THE PLAYER

After initializing the player, you need to draw it
on screen. Add a draw_actors() function above the draw()
function in the code. Then, add a call to it at the end of the
draw() function. Finally, call the setup_game() function
just before Pygame Zero runs.

screen.blit("door", screen_coords(x, y))

def draw_actors():
Draws the player
player.draw()
actor on screen at
its current position
def draw():
draw_background()
draw_scenery()
draw_actors()
setup_game()
pgzrun.go()

Draws the actors after

(on top of) the background
and scenery have been drawn SAVE
 PYTHON
Knight’s quest 184 185
Moving the player
2 Now that you have created the player,
it is time to write code to move it on the screen.
You will use an event-handler function, which
reacts to key presses, to do this.

Get current grid Add distance to move

START
(x, y) position on x axis

Get map square Add distance to move

at new (x, y) on y axis

YES
Is square a wall?

NO

YES
Is square the door?

NO

Flowchart for the “move” logic

When the user presses an arrow key, the Set position to
player actor moves in that direction by END
new (x, y)
one grid square on the screen, unless that
square is occupied by a wall or the door.
MOVING THE PLAYER

2.1 ADD A UTILITY FUNCTION

First you need to define a function to determine which built-in round() function to make sure that the result is the
grid square the actor is in. You can do this by dividing the actor’s nearest whole number. Add this function below the existing
x and y coordinates by the size of a grid square and then using the screen_coords() function.

return (x * GRID_SIZE, y * GRID_SIZE) Determines the position

of an actor on the grid
def grid_coords(actor):
return (round(actor.x / GRID_SIZE), round(actor.y / GRID_SIZE))

2.2 ADD KEY HANDLER Last line of the

Now add an event
handler function that will react
draw_actors() draw() function

when the user presses an arrow

key. This function ensures the def on_key_down(key): Reacts when the
user presses down
player moves in the right direction
when any of the four arrow keys if key == keys.LEFT: on a key

are pressed. Add this new function

below the draw() function. move_player(-1, 0) Player moves left
by one grid square
elif key == keys.UP:
move_player(0, -1) Player moves up
by one grid square
elif key == keys.RIGHT:
move_player(1, 0) Player moves right
by one grid square
elif key == keys.DOWN:
move_player(0, 1) Player moves down
by one grid square

2.3 MOVE THE ACTOR

Next, define the def move_player(dx, dy): Gets the current
move_player() function. This grid position
function takes the distance in grid (x, y) = grid_coords(player) of player
squares that a player moves on the
x and y axes, respectively. Add this
function immediately after the
x += dx Adds the x axis
distance to x
on_key_down() function. Adds the y axis
y += dy distance to y
Gives the tile at
square = MAP[y][x]
this position
Stops the execution of the if square == "W":
move_player() function, if
the player touches the wall return
elif square == "D":
Updates position return Returns
of player to the immediately
if it is a door
new coordinates player.pos = screen_coords(x, y)
 PYTHON
Knight’s quest 186 187
MOVING ON THE GRID
As the grid and screen coordinates start
at the top left corner, moving left on the
grid represents a negative change on (0, -1)
the x axis and moving right represents
a positive change. Similarly, moving up
is a negative change on the y axis and (-1, 0) (1, 0)
moving down is a positive change.

(0, 1)

3 ADD THE KEYS

You now need to add more actors to the game.
Add some keys for the player to collect. For each key
marked on the map, create an actor with the key image
and set its position to the screen coordinates of that grid
position. Add this code to the setup_game() function
to create the key actors. Keys will
appear at the
coordinates
set in the code

Defines keys_to_collect
as a global variable

def setup_game():
global player, keys_to_collect
player = Actor("player", anchor=("left", "top"))
keys_to_collect = [] Sets keys_to_collect
to an empty list initially
for y in range(GRID_HEIGHT):
for x in range(GRID_WIDTH):
square = MAP[y][x]
if square == "P":
player.pos = screen_coords(x, y)
Creates a key if
elif square == "K": the square is K
Creates the key
key = Actor("key", anchor=("left", "top"), \ actor with an
image, anchor,
and position
pos=screen_coords(x, y))
Adds this actor
keys_to_collect.append(key) to the list of keys
created above
ADD THE KEYS

SPECIAL NAMES 3.1 DRAW NEW KEY ACTORS

Make the game more interesting by adding
multiple keys for the player to collect. Draw the new
It would have seemed natural to name the key actors by adding the following lines to the
global variable with the list of key actors, draw_actors() function.
keys. However, you need to be careful when
choosing names for your variables to avoid
confusion with either built-in function names def draw_actors():
Draws all the actors in the
or names that are special to Pygame Zero. list keys_to_collect
player.draw()
You may remember from the last step
that keys is a special object with items for key in keys_to_collect:
representing all of the keys on the keyboard.
key.draw()

3.2 PICK UP THE KEYS

When the player actor moves into a grid square
containing a key, the program will remove that key from
the list of keys to be collected and stop drawing it on
screen. When there are no more keys to be collected,
the player actor will be allowed to move into the grid
square containing the door. Make the following changes
to the move_player() function to do this. Then, save
the code and try running the program to check if you
can move around and pick up the keys. You should be
able to go into the door square once you pick up all the
keys, but see what happens if you try moving further –
we will fix this problem in the next few steps.

Move the player over

the key to pick it up

Checks if the
keys_to_collect
list is not empty

elif square == "D":

Loops over each of the
if len(keys_to_collect) > 0: key actors in the list

return Returns immediately if

the list is not empty Gets the grid position
for key in keys_to_collect: of a key actor

Checks if the new player position

(key_x, key_y) = grid_coords(key) matches the key position

if x == key_x and y == key_y: Removes this key from the

list if player position matches
keys_to_collect.remove(key) key position

break Breaks out of the for

loop, as each square can
player.pos = screen_coords(x, y) only contain one key
SAVE
 PYTHON
Knight’s quest 188 189
3.3 GAME OVER!
If the player actor moves into the grid square that
contains the door (after having picked up all of the keys) then
the game should come to an end and the player should no longer
be allowed to move. To do this, update the setup_game()
function to define a new global variable that checks whether the Defines game_over
game is over or not. as a global variable

def setup_game():
global game_over, player, keys_to_collect
game_over = False Sets the
variable to
player = Actor("player", anchor=("left", "top")) False initially

keys_to_collect = []
for y in range(GRID_HEIGHT):

3.4 TRIGGER GAME OVER

Now set the game to
be over when the player gets
to the door. Make the following
changes to the move_player() def move_player(dx, dy):
function. Run the program to try
it out. You should not be able to global game_over
move when you get to the door
if game_over: Checks if game_over
so the program will not crash.
is set
return Returns
immediately,
(x, y) = grid_coords(player) without
moving
x += dx
y += dy
square = MAP[y][x]
if square == "W":
return
elif square == "D": Sets game_
over to True
if len(keys_to_collect) > 0: and continues
the move
return Checks if all
the keys have
been picked
else:
game_over = True
for key in keys_to_collect:
SAVE
ADD THE KEYS

3.5 GAME OVER MESSAGE

When the player gets to the door, the program stops,
but it is not clear to the user that the game is over. You need
to add a GAME OVER message to your code that is displayed
on screen when the game ends. Define a new function,
draw_game_over(), to draw a GAME OVER overlay on
the screen. Add the code above the draw() function. GAME OVER

Sets the position

of the GAME OVER
message on screen

def draw_game_over(): Anchors the

text by its Draws the text
screen_middle = (WIDTH / 2, HEIGHT / 2) bottom edge at this location

screen.draw.text("GAME OVER", midbottom=screen_middle, \

fontsize=GRID_SIZE, color="cyan", owidth=1)
def draw():
draw_background() Draws the text
at this location
draw_scenery()
draw_actors()
if game_over:
draw_game_over()

DRAWING TEXT WITH PYGAME ZERO

The screen.draw.text() KEYWORD ARGUMENTS
function allows you to draw Property name Description
a piece of text on screen.
This function takes a string fontsize The font size in pixels
with the text to be drawn and
then some optional keyword A string giving a colour name or an HTML-style “#FF00FF”
color
arguments, as shown here. colour, or an (r, g, b) “tuple” such as (255, 0, 255)
See the Pygame Zero
online documentation A number giving a relative width of an outline to draw around
for other keywords. owidth each character; defaults to 0 if not specified; 1 represents a
reasonable outline width

The colour for the outline (in the same format as color),
ocolor
defaults to “black” if not specified

topleft, bottomleft, topright,

Use one of these with a pair of numbers to give the x and y
bottomright, midtop, midleft,
screen coordinates relative to an anchor point
midbottom, midright, center
 PYTHON
Knight’s quest 190 191
3.6 CREATE THE GUARD ACTORS
The game is pretty easy to win so far. To make
it more difficult, add some guards as obstacles. For each
guard on the map, create an actor with a guard image
and set its position to the screen coordinates of that grid Defines guards
position. Update the setup_game() function to do this. as a global variable

def setup_game():
global game_over, player, keys_to_collect, guards
game_over = False
player = Actor("player", anchor=("left", "top"))
keys_to_collect = []
Sets guards to an
guards = [] empty list initially

for y in range(GRID_HEIGHT):
for x in range(GRID_WIDTH):
square = MAP[y][x]
if square == "P":
player.pos = screen_coords(x, y)
elif square == "K":
key = Actor("key", anchor=("left", "top"), \
pos=screen_coords(x, y))
keys_to_collect.append(key) Creates the
guard actor
elif square == "G":
guard = Actor("guard", anchor=("left", "top"), \
pos=screen_coords(x, y))
guards.append(guard)

Creates a guard if Adds this actor to the list

the square is G of guards created above

3.7 DRAW THE GUARDS

To add another guard to the game,
add this code to the draw_actors() function.
key.draw()
Save the code and then run the program to
check if the guards appear on screen. for guard in guards: Draws all the
actors in the
guard.draw() list guards
SAVE
MOVING THE GUARDS

Moving the guards

4 Once the guards are in place, they will attempt START

to move one grid square closer to the player along either

the x or y axis every half-second, unless they move into
a square occupied by a wall. If the move takes the guard
into the same grid position as the player, then the game Move guard
is over. Like the player, the guards should not move
if the game is over. Add the code in this section to
make the guards move.

YES
Is game over?

NO

Get guard grid position

Get player grid position

Find square adjacent to guard,

closer to player and not a wall

Move guard actor

to new grid position

YES
Is guard in same
position as player?

Set game over

NO

END
 PYTHON
Knight’s quest 192 193
4.1 ADD A FUNCTION TO MOVE A GUARD
Start by adding a new function, move_guard(), to Checks if the player is
move a single guard. The code will work for any guard actor, Gets the grid to the right of the guard,
so pass an argument for the guard you want to move. Add the position of the and whether the square
following code immediately after the move_player() function. player actor to the right is a wall

break
player.pos = screen_coords(x, y)
def move_guard(guard):
Defines game_over
global game_over as a global variable

if game_over: Returns immediately,

without moving, if
return the game is over

(player_x, player_y) = grid_coords(player) Gets the grid

position of this
(guard_x, guard_y) = grid_coords(guard) guard actor

if player_x > guard_x and MAP[guard_y][guard_x + 1] != "W":

Increases the guard’s x grid position
guard_x += 1 by 1 if the above condition is true

elif player_x < guard_x and MAP[guard_y][guard_x - 1] != "W":

guard_x -= 1 Checks if the player is
to the left of the guard
elif player_y > guard_y and MAP[guard_y + 1][guard_x] != "W":
guard_y += 1
elif player_y < guard_y and MAP[guard_y - 1][guard_x] != "W":
guard_y -= 1
guard.pos = screen_coords(guard_x, guard_y) Updates the guard actor’s
position to the screen
coordinates of the (possibly
if guard_x == player_x and guard_y == player_y:
updated) grid position
game_over = True

Ends the game if the guard’s

grid position is the same as
the player’s grid position

4.2 MOVE ALL THE GUARDS

Next, add a function to move Loops through
each of the guards in turn. Add this
def move_guards():
each guard actor
code just below the lines you typed in guards list
in the previous step. for guard in guards:
move_guard(guard) Moves all the guard
actors in the list
MOVING THE GUARDS

4.3 CALL THE FUNCTION

Finally, add this code to call
the move_guards() function every
GRID_SIZE = 50 Sets the time interval
for a guard to move
half-second. You need to add a new
constant at the top of the file to specify GUARD_MOVE_INTERVAL = 0.5 on screen

this interval.

4.4 SCHEDULE THE CALL

To ensure that the guards move smoothly after GUARD_MOVE_INTERVAL seconds. Run the program and
every half-second, you need to add a timer that calls the check if the guards chase the player. You should be able to see
move_guards() function repeatedly during the course the GAME OVER message if a guard catches the player. Try
of the program. Add the following code at the bottom of changing the value of GUARD_MOVE_INTERVAL to make the
the file. This calls the move_guards() function after every game easier or harder.

setup_game()
clock.schedule_interval(move_guards, GUARD_MOVE_INTERVAL)
pgzrun.go()

Schedules regular calls to the

move_guards() function SAVE

THE CLOCK OBJECT

The clock object has methods for scheduling function only schedule calls to functions that take
calls in a program. Some of them are given here. When no arguments as there is no way to specify what
calling a function, make sure you use the name of the arguments would be used when the call is made
function without the brackets. This is because you can in the future.

METHODS FOR SCHEDULING FUNCTION CALLS

Method Description

Call the function in delay seconds – multiple calls to this will

clock.schedule(function, delay)
schedule multiple future calls to the function, even if the
previous ones have not yet happened

clock.schedule_unique(function, delay) Similar to clock.schedule(), except that multiple calls to this will
cancel any previously scheduled calls that have not yet happened

clock.schedule_interval(function, interval) Call the function every interval seconds

clock.unschedule(function) Cancel any previously scheduled calls to the function

 PYTHON
Knight’s quest 194 195
5 TRACK THE RESULT
When the game finishes and the GAME OVER
message is displayed, you can show an additional message to
indicate whether the player unlocked the door and won, or
was caught by a guard and lost. Create a new global variable
to track whether the player won or lost. Add this code to the Defines player_won
setup_game() function. as a global variable

def setup_game():
global game_over, player_won, player, keys_to_collect, guards
game_over = False
player_won = False Sets the variable to
False initially
player = Actor("player", anchor=("left", "top"))

5.1 SET A VARIABLE

Now set the global
variable when the game finishes
def move_player(dx, dy):
because the player reached the
door with all of the keys. Add this global game_over, player_won
code to the move_player()
function to do this. if game_over:
return
(x, y) = grid_coords(player)
x += dx
y += dy
square = MAP[y][x]
if square == "W":
return
elif square == "D":
if len(keys_to_collect) > 0:
return
else:
game_over = True
Sets it to True when the player_won = True
player wins the game
for key in keys_to_collect:
TRACK THE RESULT

5.2 ADD THE MESSAGES

Collecting all of the keys and reaching the door is the new message. This anchors the top edge of the message
the only way that the player can win the game, so it is safe to to the centre of the screen. As the GAME OVER message is
assume that if the game finishes any other way, the player has anchored by its bottom edge, this new message will appear
lost. You need to display an appropriate message in each case. centred below it. Try running the game and deliberately
Add the following code to the draw_game_over() function. losing. Now close the window and run it again, but try to
You will be using the midtop property to set the location of win this time. It should not be too hard.

screen.draw.text("GAME OVER", midbottom=screen_middle, \

fontsize=GRID_SIZE, color="cyan", owidth=1)
if player_won:
screen.draw.text("You won!", midtop=screen_middle, \
fontsize=GRID_SIZE, color="green", owidth=1)
Draws the message
else: on screen

screen.draw.text("You lost!", midtop=screen_middle, \

fontsize=GRID_SIZE, color="red", owidth=1)

Use different colours

to emphasize the
different outcomes

The new message

GAME OVER GAME OVER appears here
YOU WON! YOU LOST!

SAVE

5.3 REPLAY THE GAME

At the moment, the only way to have another go just need to call the setup_game() function
at the game is to close the window and run the program again. It contains all the code that is necessary
again. Add the following code after the draw() function to initialize the game, and will recreate all of
to allow the user to press the space-bar when the game the actors in their starting positions. It will also
ends to play again. To reset the game to the beginning, you reset the variables that track game progress.

if game_over:
draw_game_over()
Checks if the space-bar
def on_key_up(key):
has been pressed once
the game is over
if key == keys.SPACE and game_over:
setup_game() Calls setup_game()
to reset the game
 PYTHON
Knight’s quest 196 197
5.4 ADD ANOTHER MESSAGE
It will be useful to tell the player that they
can press the space-bar to restart. To do this, add a new
message at the end of the draw_game_over() function.
You need to use midtop anchoring again to position the
text GRID_SIZE pixels below the centre of the screen.
Run the game. You should be able to replay it now. GAME OVER
YOU LOST!
Press SPACE to play again

else:
screen.draw.text("You lost!", midtop=screen_middle, \
fontsize=GRID_SIZE, color="red", owidth=1)
screen.draw.text("Press SPACE to play again", midtop=(WIDTH / 2, \
HEIGHT / 2 + GRID_SIZE), fontsize=GRID_SIZE / 2, \
Draws the new
message on screen color="cyan", owidth=1)

Animating the actors

6 The game feels a little odd at the moment as the actors jump
from one square to another in the grid. It would be much better if
they looked more like they were moving on the screen. You can make
that happen by using Pygame Zero’s animate() function.

6.1 ANIMATE THE GUARDS

Start by animating the guards. The animate() function animate (guard), the property that you want to
creates animations that run automatically on each iteration of the change (pos), and how long the animation will run
game loop to update the properties of actors. Make the following (duration). If you save and run the code now, you
change to the move_guard() function to animate the guards. The will see the guards moving smoothly across the screen
parameters of the animate() function will include the actor to towards the player.

elif player_y < guard_y and MAP[guard_y - 1][guard_x] != "W":

guard_y -= 1
animate(guard, pos=screen_coords(guard_x, guard_y), \
duration=GUARD_MOVE_INTERVAL) Moves the actor
smoothly instead
if guard_x == player_x and guard_y == player_y: of changing its
position suddenly
game_over = True
ANIMATING THE ACTORS

ANIMATIONS
The animate() function can take two other allows you to specify the name of a function you
optional keyword arguments – tween, which want to call after the animation is complete.
specifies how to animate the in-between values The value of tween should be one of the
of the property, and on_finished, which strings mentioned below.

VALUE OF THE TWEEN KEYWORD ARGUMENT

Value Description
Animate evenly from the current property value to the new;
"linear"
this is the default

"accelerate" Start slowly and speed up

"decelerate" Start quickly and slow down

"accel_decel" Speed up and then slow down again

"end_elastic" Wobble (as if attached to an elastic band) at the end

"start_elastic" Wobble at the start

"both_elastic" Wobble at the start and the end

"bounce_end" Bounce (as a ball would) at the end

"bounce_start" Bounce at the start

"bounce_start_end" Bounce at the start and the end

6.2 ANIMATE THE PLAYER

Now it is time to animate the player actor. duration the user will take to tap the movement keys to
Unlike the guards, the player does not have a particular quickly evade the guards. Update the move_player()
rate at which it moves, so you need to define how quickly function as shown below. Try the game again and
a move should be completed. Add a new constant at check if the player actor slides quickly from square
the top of your file to do this. Choose 0.1 seconds as the to square.

GUARD_MOVE_INTERVAL = 0.5
PLAYER_MOVE_INTERVAL = 0.1 Time it takes for the player
actor to move from one
position to another

keys_to_collect.remove(key)
break
animate(player, pos=screen_coords(x, y), \ Updates the
player’s position
duration=PLAYER_MOVE_INTERVAL) after 0.1 seconds
SAVE
 PYTHON
Knight’s quest 198 199
Make a chequerboard background
7 Now return to some of the earlier graphical
elements and see if you can make the game look a little
more interesting. At the moment, the background is just
a single tile repeated across the entire floor. Add a
chequerboard pattern to break things up a little and
make the floor look more “tiled”.

7.1 UPDATE THE BACKGROUND FUNCTION

For a chequerboard pattern, on the first row, all of the odd then the second colour for the other squares. You can
squares should be one colour and the even squares another; on the determine if a number is odd or even by using Python’s
second row the colours need to be swapped. The following rows modulo operator (see box below). Make the following
should repeat this pattern. You can do this by using the first colour changes to the draw_background() function to
on either odd columns of odd rows or even columns of even rows, select a different floor tile image for alternate squares.

def draw_background():
for y in range(GRID_HEIGHT):
for x in range(GRID_WIDTH): Checks if the x and y Draws the floor1 tile
values are either both at this position if the
if x % 2 == y % 2: odd or both even above condition is true

screen.blit("floor1", screen_coords(x, y))

else:
screen.blit("floor2", screen_coords(x, y))

Draws the floor2 tile

if either of the x and y
values are odd and even

THE MODULO (REMAINDER) OPERATOR

An odd or even number can be determined by N N % 2 N % 3 N % 4 N % 5
dividing the number by two and then looking to see 0 0 0 0 0
if there is a remainder or not. Python has an arithmetic 1 1 1 1 1
operator, called the modulo operator, that returns the 2 0 2 2 2
remainder from a division. It is written as a % b, which 3 1 0 3 3
gives the remainder of dividing a by b. Take a look at 0 4
4 0 1
the remainders after dividing the x and y coordinates
5 1 2 1 0
by two. If the remainders are the same, then either
6 0 0 2 1
the row and column are both odd or they are both
even. Shown here are some examples of how the 7 1 1 3 2
modulo operator works. 8 0 2 0 3
9 1 0 1 4
MAKE A CHEQUERBOARD BACKGROUND

7.2 CRACKING UP!

Finally, make the dungeon look more realistic by adding returns a random whole number between a and b (see box, right).
some cracks in the floor tiles. You can do this by drawing the cracks You will choose random numbers in the draw_background()
on top of the floor tile images. Make sure to add cracks on only a function and decide when to draw a crack based on them. Since
few tiles; you can choose these tiles at random. Start by importing the same squares need to be picked for the cracks every time the
Python’s random module and add it to the top of your file. You draw_background() function is called, set the “seed value”
need to use the randint(a, b) function from this module, which (see box, right) to a specific number at the start of the function.

import pgzrun PLAYER_MOVE_INTERVAL = 0.1

import random BACKGROUND_SEED = 123456

Makes the functionality in the Adds a new constant

random module available for the seed value at
the top of the file

Tells the program to pick random numbers

starting from BACKGROUND_SEED

def draw_background():
random.seed(BACKGROUND_SEED)
for y in range(GRID_HEIGHT):
for x in range(GRID_WIDTH):
if x % 2 == y % 2:
screen.blit("floor1", screen_coords(x, y))
else:
screen.blit("floor2", screen_coords(x, y)) Picks a random
number between
n = random.randint(0, 99) 0 and 99

Checks if n is
if n < 5: less than 5

screen.blit("crack1", screen_coords(x, y)) Draws crack1 on

top of the floor tile
at this position if n
elif n < 10: is less than 5
screen.blit("crack2", screen_coords(x, y))

Checks if n is Draws crack2 on top of the

less than 10 floor tile at this position if n is
less than 10, but not less than 5
 PYTHON
Knight’s quest 200 201
RANDOM NUMBERS AND PROBABILITY
The randint() function returns a number in a specific get the numbers 0 to 4 about 5% of the time. If you
range. Repeated calls will return numbers that are roughly look at the example below, you will see that if n is a
distributed across this range. To be more precise, this number between 0 and 4, crack1 image will be
function actually returns a pseudo-random number. drawn. So you can expect this to happen for about
These are numbers that appear random – in that the five per cent of the floor tiles. If n is greater than 5
numbers are evenly distributed across the range and the and lies between 5 and 9, crack2 image will be
sequence does not look obviously predictable – but are drawn, which should also happen for about five per
actually generated by an algorithm that will always cent of the tiles. If you look carefully at the map,
generate the same sequence of numbers from a given you will be able to count 118 exposed floor tiles, so
starting point. You can call the starting point for a you should expect to see about six of each types of
pseudo-random sequence the “seed”. If you repeatedly cracks (five per cent of 118).
pick random numbers between 0 and 99, then you should

Tells the code to pick

n = random.randint(0, 99)
a random number
between 0 and 99
if n < 5:
screen.blit("crack1", screen_coords(x, y)) Draws crack1 if n
is between 0 and 4
elif n < 10:
screen.blit("crack2", screen_coords(x, y)) Draws crack2 if n
is between 5 and 9

7.3 TIME TO PLAY

The game should now be ready to play.
Run the program to make sure it is working properly.
If there is a problem, carefully check your code for
bugs (see pp.130–33) and run it again.

Move the player

quickly to collect
all the keys. Watch
out for the guards

SAVE
 Hacks and tweaks
Opening the door
While users may immediately realize that they need to collect is to only draw the door when there are no keys
the keys, it may not be obvious when they can leave the dungeon. left to be collected. In the draw_scenery()
If you can visually open the door when the last key has been function, change the logic for deciding when
collected, it will be obvious what to do. The easiest way to do this to draw the door as shown here.

screen.blit("wall", screen_coords(x, y))

elif square == "D" and len(keys_to_collect) > 0: Checks if there
are any keys left
to be collected
screen.blit("door", screen_coords(x, y))

Keep moving
It would help if the player could move continuously in one repeat_player_move() function below the move_player()
direction by holding down an arrow key instead of repeatedly function. It uses members of Pygame Zero’s keyboard object to
pressing it. To do this, you can use the on_finished argument of check if a particular key is pressed. You might find that the game is
animate() function. This allows the user to specify a function to now too easy. You can change the PLAYER_MOVE_INTERVAL
be called when the actor has finished moving. Make a change in constant at the top of the file to slow the player down and make
the move_player() function, as shown here. Then add a new the game more challenging.

Checks if the arrow

break key is still pressed and
repeats the move
animate(player, pos=screen_coords(x, y), \
duration=PLAYER_MOVE_INTERVAL, \ Set this to half the
guard’s move interval,
on_finished=repeat_player_move) giving the player less of
an advantage

def repeat_player_move(): GUARD_MOVE_INTERVAL = 0.5

if keyboard.left: Checks if the PLAYER_MOVE_INTERVAL = 0.25
left arrow key
is still pressed
move_player(-1, 0)
elif keyboard.up:
move_player(0, -1) Calls move_player()
again to repeat
elif keyboard.right: the move

move_player(1, 0)
The player will now
elif keyboard.down: move continuously in
the chosen direction
move_player(0, 1)
 PYTHON
Knight’s quest 202 203

Make a bit more room

You can make the game more interesting by designing a file. Then carefully edit the MAP constant as
larger, more complicated map. You can design your own, shown here. You can add as many guards or
but try this one to get the idea. First, change the size of the keys as you want because of the way you have
grid by editing the values of the constants at the top of the written the code.

GRID_WIDTH = 20 MAP = ["WWWWWWWWWWWWWWWWWWWW",

GRID_HEIGHT = 15 "W w W",
"W W W",
Increase the value This dungeon has "W W W D",
of these variables 20 columns, so
there should be 20 W "W W G K W W",
characters in this line
"W WWWWWWWWWWWW W",
Remember to add
the door in this line "W W",
"W W",
"W WWWWW WWWWW W",
"W W W KW W",
"W W P WG W W",
"W WWWWWWWW W W",
"W G W",
"W K W",
"WWWWWWWWWWWWWWWWWWWW"]

This dungeon has 15

rows, so there should
LARGE PLAYING AREA be 15 lines in total

Upload new characters

You can upload your own images
to add different characters to the
game, or set it up in a completely
new background. Copy the new
images into the “images” folder
you created earlier. Then, update
the code so that the actor image
names match the new file names.

ENEMY PLAYER ITEM

WEB
TECHNOLOGIES
How the Web works
The World Wide Web is a set of technologies that work
together to allow information to be shared between computers
via the Internet. The Web is characterized by its combination
of text, images, video, and audio to deliver an interactive
multimedia experience.

Connecting to a website 2 Request

The Web is based on a client/server The web browser sends a request
message to a router, which sends the
model. A browser is a client that message to the destination web server
requests a web page from a server. via the Internet. The web server will
The server then responds to the then send a response message back to
the computer that requested the url.
request by sending an HTML file.
The content of each request is
determined by the communication INTERNET SERVICE
User types in the PROVIDER (ISP)
protocol being used. Hypertext url for a website
Transfer Protocol (HTTP) is the
most common protocol used over
the Internet – a global network
created from connections between www.dk.com

billions of devices.

Enter web page URL ROUTER

1 The process begins when a user enters a
Uniform Resource Locator (URL) into the address
bar of an Internet browser. This url contains the The router and the
address of the requested web page and can be used ISP connect the user
to locate the web server that hosts the website. to the Internet

Packets and IP routing The file is

All communication over the Web divided into
packets
is done by dividing the request into
smaller segments of data called
packets. These packets are routed
from the source to the destination,
where they are reassembled into
the original message. The networks
that convey data in packets are Each packet travels
called “packet switched networks”. independently, often
along different paths
Packets consist of two parts:
information and data. Information
defines where and how to send the User selects the
file to be sent
data, while data is the content that
the packet is trying to deliver.
 WEB TECHNOLOGIES
How the Web works 206 207
Protocols
A protocol is a set of rules that governs
the communication between two entities.
Protocols on the Web exist to manage the
Finding the communication between the client browser
3 website and the web server. Network protocols are
The Domain Name structured as a series of layers. Each layer is
Systems (DNS) protocol
allows the browser to designed for a specific purpose, and exists
convert the human- on both the sending and receiving hosts.
friendly text into an IP
DNS address. This address is
then used by the routers
to find a path to the web Application layer protocol
server. The request may Defines how an application must format
be passed along many its data so that it can communicate with
routers before it arrives at other applications. For example, HTTP
the destination web server. and File Transfer Protocol (FTP) define
how a web browser can communicate
The website is with a web server.
displayed on the
user’s hardware
Link layer protocol
Defines how data can be sent from
one network to another by using routers
to find the destination computer and
deliver the message.
www.dk.com View the page
4 The web server
receives the request Transport layer protocol
and returns an HTML Defines how to manage communications
file as a response to by maintaining sessions between the
the browser. The source and destination computers and
browser reads the combining the received packets back
contents of the HTML into the correct order.
document and renders
the text, images, and Web protocols
data on screen. Transmission Control Protocol (TCP)
manages the sessions and ordering of the
packets received by the browser. Internet
Protocol (IP) handles routing of data
Why packets? between the client and the server. HTTP/
To allow communication FTP/UDP (User Datagram Protocol) defines
channels to be used more the messages being sent between the
efficiently, images, text, and even browser and the server.
basic HTTP requests are broken
down and transferred piece by
piece. Each piece of data has a HTTP
packet sequence, which tells
the receiving server how to
reassemble the information. HTTP is an application level protocol that
describes how a client can format and
send a request message to a server, and
The reassembled how the server can format and reply with
file can be viewed a response message.
by the receiver
• The GET method retrieves data
• The POST method updates data
• The PUT method creates data
The file is
reassembled in • The DELETE method removes data
the right order
Code editors
One of the most important tools for programmers, code editors are
specifically designed for editing the source code of computer programs.
They can be stand-alone applications or part of any IDE (see p.23)
or web browser. A number of code editors are available online, all
customized to fit specific work situations or programming languages.

Code editor tools that simplify and accelerate the process of editing.
Simple text editors, such as Notepad, can be used to These elements automate common repetitive tasks
write code, but they cannot enhance or ease the process and assist the programmer to write better software
of code editing. The code editors available online have by identifying problems and debugging code. Some
specialized functionalities, or certain built-in features, of the most useful code editor tools are listed here.

Syntax highlighting Multiview

Displays different parts of the code in Allows the programmer to view
different colours, making the code easier multiple files side by side. Some
to read. For example, HTML tags are code editors even allow two
highlighted in one colour and comments instances of the same file to be
are highlighted in another colour. viewed alongside each other.

Printing Preview window

Enables the programmer to print a Allows the programmer to see a
hard copy of the code. The output quick representation of how the
can then be shared and used as a HTML code will render without
tool to facilitate communication having to start a web server to
and problem solving. execute the code.

Types of code editors LIGHTWEIGHT EDITORS

There are two types of code Code editors Features
editors most commonly used by Brackets An open source code editor that focuses on web development
programmers – lightweight editors languages, such as HTML, CSS, and JavaScript. It has lots of
and IDEs. The choice of editor useful extensions and plugins. (http://brackets.io/)
to be used depends on the
programming language and the
Atom A hackable open source code editor that supports many
type of program to be edited. languages and is designed primarily for web development. Atom
is well integrated with Git (a free system for tracking changes in
source code) and has lots of custom plugins. (https://atom.io/)

Sublime Text A small but powerful code editor that works with
several languages and has many tools and shortcuts
to aid coding. (https://www.sublimetext.com/)

Lightweight editors
These editors are used to open and edit a file Visual Studio Code Smaller and simpler than the Community edition
instantly. They have basic features and are fast (see right), Code is a very popular editor that can work
and simple to use. Lightweight editors can with many languages and has advanced features.
only be used when working on a single file. (https://visualstudio.microsoft.com/)
This table lists some of the most commonly
used lightweight editors.
 WEB TECHNOLOGIES
Code editors 208 209
CLIENT-SIDE AND SERVER-SIDE SCRIPTING
In client-side scripting, processing takes
place in a web browser. The code is Client-side code
transferred from a web server to the runs in the browser
user’s browser over the Internet.
In server-side scripting, processing
takes place on a web server. The user INTERNET
sends a request to the web server over
the Internet, which is fulfilled when the Server-side code runs
server generates dynamic HTML pages on the web server
in response and sends them to the user’s
browser through the same channel. CLIENT SIDE SERVER SIDE

Tabs Zoom
Tabs provide an easy way to arrange Zooming in makes a part of the
and manage multiple open files in text larger and easier to read,
a code editor. Each tab displays the while zooming out offers a quick
name of a file, and clicking the name way to view the entire document
displays the file in a code window. on the screen in one go.

Plugins Error and warning marks

Many code editors allow programmers These indicate the presence of
to write plugins to extend the features a spelling mistake or a syntax
of a code editor. For example, adding error that could cause the
a spell checker or a plugin to program to stop executing
format HTML. or behave unexpectedly.

INTEGRATED DEVELOPMENT ENVIRONMENT

Code editors Features
WebStorm A fully featured IDE for web development that uses client-side
JavaScript frameworks (see pp.284–85), such as Angular, TypeScript,
Vue, and React, and server-side development applications, such as
Node.js. (https://www.jetbrains.com/webstorm/)

NetBeans Can be used for developing web and desktop applications

using open source languages, such as Java and PHP, and web
development languages, such as HTML, CSS, and JavaScript.
(https://netbeans.org/)

CodePen An online code editor that can be used for testing and sharing
HTML, CSS, and JavaScript code snippets. It is very useful for
finding important components to use on websites. IDEs
(https://codepen.io/) IDEs are powerful editors that work
with many languages and have
Visual Studio Community Used to create web and desktop applications for Microsoft, advanced features that enable a
Apple, and Linux environments. It helps programmers build programmer to integrate several
large-scale systems using multiple languages and frameworks. languages into a single solution.
(https://visualstudio.microsoft.com/) IDEs are used when working on the
entire project. This table lists a few
commonly used IDEs.
Exploring basic HTML
HTML is the most basic building block of the Web. An HTML file
contains all the text, images, and data that is displayed on the
browser. It also includes a list of any other files, such as fonts, styles,
and scripts that are required to render the HTML elements correctly.

HTML tags set of brackets, but some tags do not require a closing
An HTML tag is a keyword, or a set of characters, that tag and include a closing slash to indicate that they
defines the format of a web page and determines how are single tags.
its content is displayed on screen. The combination Element
and order of the HTML tags determine the structure
and design of the HTML document. A client browser <div> Parent tag
uses the information in each tag to understand the
nature of the tags’ content and how to display them
<span>content</span> Indented
child tag
correctly. The combination of a tag and its content is </div>
known as an element. Some tags, called parent tags,
can contain other tags, called children tags. Most
tags must have an opening and closing tag, like a Opening tag Content Closing tag

<img/>
is used to
The <img/> tag
</div> ag e on the page.
<body></b <div> > tag describe an im
The <body> dy>
o <p></p> contains the url
This tag contains the d iv
The < er for all Its “src” at tribute location of
tag ain int s to th e
contains al t that po
l th text that should appear
is a c o n ments the image file.
data, and im e text, ML ele nd
that are dis ages
as a paragraph on the HT be st yled a p.
played screen. The browser at c a n a g ro u
when the th n ed as lays
starts a new line sit io
document HTML po g disp
is open and adds margins This ta ents on
in a browse ed for spacing around elem line.
r.
the paragraph. a ne w
l>
<html></htm apply to
e ar e ou te r tags that
Thes The
L document.
<a></a> the entire HTM cates the markup
g indi
The <a> (anchor) tag describes a first <html> ta for the document,
hyperlink, which is used to link one language used tag marks the end
ml>
page to another. This tag contains and the </ht web page.
of the
the “href” attribute (see p.211), which
holds the link’s destination.

<h1></h1>
The <h1/h2/h3/h4/h <br/>
tags indicate that the 5/h6>
tex t is a header. The <br/> tag tells the
<h1> is usually used
for
of the page, while the the title browser to start a new line. It
others are is a single tag, with the closing
used to style smalle
r headings slash included before the closing
on the document. greater-than sign.
 WEB TECHNOLOGIES
Exploring basic HTML 210 211
Attributes
INDENTING TAGS Most HTML tags have attributes that
provide additional information about the
Good programming includes using visual aids to make HTML element. An attribute describes a
code more readable. One of the easiest ways to improve
property or characteristic of the element.
the readability of code is to indent child tags inside their
parent tags. To help with the indentation, a “Tidy HTML” It always appears inside the element’s
or “Format HTML” tool can be used to format the code opening tag in a key=“value” format. Some
and indent the children tags. attributes may be required by the tag
type to render correctly, while other
attributes may be optional.

<head></head> <img/> tag attributes

The <head> tag <title></title> Apart from “src”, the “width” and “height”
contains the metad the attributes define the dimensions of an
ata This tag contains
that is required to as image, and the “alt” attribute provides
tex t that appears
describe the styles le of a do cu me nt an alternative text description for
, the tit e
fonts, linked files, ow se r. Th er images that cannot be displayed.
page in the br
title, and scripts us than
ed cannot be more
by the HTML docu nt in
ment. one <title> eleme <a> tag attributes
HT M L do cu me nt.
an
The “href” attribute contains a url that
points to the hyperlink’s destination,
and the “target” attribute instructs
<span></span> s the browser to open the hyperlink in
contain
The <span> tag a new browser tab or the same tab.
te xt an d ot he r HTML
the
th at sh ou ld appear
elements e.
on the sa m e lin “id” attribute
The “id” attribute describes the identity
of an element. It can be added to any
kind of tag and is specific to it. This
<!doctype HTML> Document type
attribute can also be used to select
declaration
the element in CSS and JavaScript.

<html> The header tag “name” attribute

This attribute is used by input elements
<head> Opening <title> tag to define the name of the property, or
characteristic of the element, that is
<title> </title> sent to the server. This attribute must
be unique to each element in a form.
</head> Closing </title> tag

“class” attribute
<body> The <body> tag
The “class” attribute describes the
name of a group that the element
<p></p> is a part of. Many elements on the
same page can be members of
</body> the same class.
The outer
</html> </html> tag
“style” attribute
HTML document structure The “style” attribute describes the
Every HTML document requires a minimum number visual characteristics of an element.
of tags. Recognizing the importance of tags in code, It defines a list of key-value pairs.
most code editors today automatically add these to Each key-value style definition is
a blank HTML document. separated by a semicolon (see p.234).
HTML forms
and hyperlinks
Web pages are connected by hyperlinks and forms. While hyperlinks
send requests for a specific url, forms send a request that includes
data from the current web page. This data is then used by the server
to process the request.

HTML forms server. Every input field must have a “name” attribute.
An HTML <form> tag contains input elements that This identifier is used as the key for the data value. A
allow the user to enter data to be sent to the server. form can include various elements for inputting data,
When a user clicks the submit button, the browser will including text fields, text areas, labels, checkboxes,
send the values of all the input fields in the form to the radio buttons, select drop-down lists, and hidden fields.

Labels
The <label> tag adds a text label to an <label for="Name">Name:</label>
input control. When the label is clicked,
the cursor jumps to the input control. <input type="text" id="Name" name="Name"
The “for” attribute in the <label> tag must
point to the “id” attribute (see p.211) of placeholder="Enter name" />
the input control.

Checkboxes
This is used for indicating a true or <input type="checkbox" name="hasDrivingLicense"
false value. If the checkbox is ticked,
the browser submits the value in the value="true"> Do you have a driving license?
“value” attribute.

Select drop-down lists

Select elements allow the user to <select name="city">
choose an input from a list of possible
values. This selected value is included <option value="delhi">Delhi</option>
in the form data sent to the server.
<option value="cairo">Cairo</option>
</select>

Radio buttons
Radio buttons are used to select one <input type="radio" name"gender" value="male"
of a group of possible values. Each
radio button’s “name” attribute will checked/> Male<br/>
contain the same value. This indicates
that they are possible answers for the <input type="radio" name"gender" value="female"
same field.
/> Female
 WEB TECHNOLOGIES
HTML forms and hyperlinks 212 213
Hyperlinks and URLs simply scroll to the required area. In HTML,
Hyperlinks are text hotspots that, when clicked, hyperlinks are indicated by an anchor <a> tag.
navigate the browser to a new HTML document. This tag contains an “href” attribute (see p.211)
They can also refer to another element on the that stores a url. This url is the address to the
same web page, in which case the browser will new HTML document.

External hyperlink
These are hyperlinks to an <a href="http://www.dkp.com/otherPage.html">link</a>
HTML document on another
website. It requires a complete External hyperlinks begin with
url to navigate. the “http://” prefix

Text field Input validation

Text fields are used to enter an alphanumeric Modern browsers use the “type” attribute to help ensure that the
value. It is placed on a web page using the <input> correct data is entered in a text input field. Since users can easily
tag. The “placeholder” attribute adds a hint enter an invalid value in the browser, input validation must be
to the input text field. applied at the server level. Here, the browser will not accept an
input unless it is in fact an email address.

<input type="text" name="name" <label for="email">Email</label>

placeholder="Enter name"/> <input name="emailaddress"
type="email" />

65%

REGISTER Hidden fields

These fields do not appear on
screen, but will be included in the
data sent to the server when the
Name: Enter name form is submitted. Here the hidden
field could be a unique identity
number assigned to the user.

Do you have a Email:

driving license? Text area
These are text boxes that can
accept more than one line of
City: Message: input. Text areas are used to input
data that naturally spans multiple
London lines, such as a paragraph of text
Enter text or a home address.
Delhi
Cairo <textarea rows="5"
cols="40">Enter
Gender:
Male Female text</textarea>
Build a better website
A well-built website should be easy to read and navigate through.
It should be programmed to allow the largest-possible number
of clients to view it, and should be thoroughly indexed by search
engines to draw traffic to the site.

Accessibility these alternative clients. This requires including additional

Not all clients are web browsers. An HTML document attributes in the HTML tags (see pp.210–11) and adding
might also be read on a device that converts text into alternative methods of navigating the site to ensure
braille for the blind, or reads the text out loud for people that it can be accessed by users with special needs.
with a hearing disability. An HTML document can be Programmers should think about the topics mentioned
programmed to ensure that it is correctly rendered by below to improve the accessibility of their website.

Readable content Travel Home

Ensure there is enough contrast between
http://www.traveltheworld.com/home
the background and the text colour to
make the content easy to read. A dark
coloured font will be easier to read on
a light background, and vice versa.
Travel
Flights Hotels Cabs
HELLO WORLD!
From To

Content organization Departure Return

The content of a website should be arranged
in a logical and intuitive way. There should be
buttons and hyperlinks to suggest the next
page the user should visit on their journey Search
through the site. Breadcrumb links show the
user where they are in the context of the
site and allow them to go back to a previous
page if necessary.
Beach Historical
resorts monuments

Keyboard alternatives
Some users may prefer using a keyboard
rather than a mouse, so websites should
provide for keyboard alternatives for actions,
such as scrolling, that usually rely on a mouse.
Text alternatives
Non-browser clients require text alternatives for non-text items.
Include an “alt” attribute in an <img/> tag to ensure that such Describes the
clients can display a text value if they cannot display images. image in text

<img src="image.jpg" alt="Eiffel Tower"/>

 WEB TECHNOLOGIES
Build a better website 214 215
Semantics Specifies the header
for a document Defines other content,
One of the key concepts in HTML is that the tags, or such as a sidebar
semantic elements, should express the meaning of Defines the
the text, data, and images contained within them. For navigation links
<header>
example, it is expected that an <h1> tag contains the Defines the
<nav>
main page header, a <p> tag contains text that should section in a
document
appear in a paragraph style, and a <ul> tag contains <section>
items that are all part of a list. Using the correct tag Specifies
independent, <aside>
and tag attributes allows browsers and other types of
self-contained <article>
web clients to understand the programmer’s intention content
and correctly render the content in the output format <footer>
Specifies the
for that client, be it as a web page on a screen or a footer for a
ticker tape on a braille terminal. document
SEMANTIC ELEMENTS

Responsive layout
Hosting considerations
In the past, when the Web was primarily Web hosting is a service that makes websites
viewed in a browser running on a desktop, accessible over the World Wide Web. Although
the width of HTML documents was
commonly defined by a fixed number
it is possible to host a website from a personal
of pixels. Since many users today view computer, it is better to do so from a server
websites on a range of devices, such as that is designed to be online 24/7 and can
smartphones and tablets, it is necessary
to code the HTML so that the website can
provide backup and security to protect the site.
fit on any size screen. The ability to stretch
and shape the HTML to fit different screens
is known as being “responsive”. Shared hosting
In shared hosting, the web server hosts
many different websites and databases.
Each user can rent enough disk space,
bandwidth, and database access to
provide hosting for a single website.
Travel
Virtual Private Server (VPS) hosting
This involves a single server being divided
into multiple virtual machines. Each
Travel website being hosted rents a machine,
which is managed as a standalone server,
but actually shares resources with all other
Tourist virtual machines on that server.
spots

Dedicated server
TABLET PHONE A single server is used to host the website,
and there is no sharing of resources.
The user is responsible for installing and
configuring all software and security
Compliance with guidelines on the server.
All the code should comply with the
Web Content Accessibility Guidelines to
ensure that users with disabilities are able Elastic cloud computing
to enjoy the website. More information This system can adapt so that the needs of
can be found at https://www.w3.org/WAI/ the system match the resources available
standards-guidelines/wcag/ to it. It provides the most functionality and
flexibility, but comes at a higher cost than
other hosting options.
Build a web page
A modern website is built using more than one programming
language. In this project you will learn to create a basic web page,
in this instance a pet store. You will need to combine HTML, CSS,
and JavaScript, but the project is made up of three parts. First you
will learn how to build an HTML framework.

How it works The HTML stage

The use of elements from HTML, You will create all the HTML elements of the web page
CSS, and JavaScript will make in the first part of this project. This will include all
the website structured, intuitive the text, information, and data that need to appear
to navigate, and interactive. on the website.

Pet Shop START Pet Shop

file:///PetShop/index.html file:///PetShop/index.html
Free shipping
Free shipping
PET SHOP Home About Shop Contact
• Home
• About
• Shop
• Contact
Create the
HTML document, PET SHOP

PET SHOP
which will PET SHOP
include all text,
images, and data SHOP NOW
SHOP NOW

LOVE FISH

LOVE FISH THE WIDEST RANGE OF FISHES

THE WIDEST RANGE OF FISHES
Indoor and outdoor, we’ve got them all!
Indoor and outdoor,
we’ve got them all!
CLICK FOR FISH
Web page
CLICK FOR FISH will display
unformatted
elements
without any
styles

Final website HTML document

The website will be the home page of a pet At the end of the first stage you will see a
supplies retail store. CSS (see pp.242–63) will long vertical web page. The HTML file will
add the visual styles and layout definitions, while END contain the minimum amount of code
JavaScript (see pp.288–303) will add interactive required for a valid website. This file
behaviours to enrich user experience on the page. PROGRAM DESIGN defines the basic structure of the website.
 WEB TECHNOLOGIES
Build a web page 216 217
YOU WILL LEARN WHERE THIS IS USED
❯ How to structure a page Time: HTML is the backbone of all websites, even the most
❯ How to create feature boxes 2–3 hours complicated ones. The HTML code used in this project
Lines of code: can be reused to create different types of web pages.
❯ How to use HTML tags
182 Any web browsers can be used to read the HTML
and attributes Difficulty level document as a web page, including Google Chrome,
Internet Explorer, and Safari.

Program requirements Installing an IDE

You will need a few programming elements
1 To write the code for the website you
to build this website. You may also have to will first need a development environment. Follow
download and install certain components the steps given below to install “Microsoft Visual
before you can start writing the code. Studio Community 2019” on your computer.

Development environment
The IDE (see pp.208–209) 1.1 DOWNLOAD VISUAL STUDIO
“Microsoft Visual Studio Open a browser, go to the website mentioned below and
Community 2019” will be used in download the Community edition of Visual Studio. The browser
this project. It is a free software will download a .dmg file to the Downloads folder on a Mac. If
available for both Windows and it does not run automatically, go to the folder and double-click
macOS, and supports various the file to run it. On a Windows computer, save the installation
programming languages. .exe file to your hard drive and then run it.

www.visualstudio.com/downloads

Browser
This project uses the
Google Chrome browser
to run and debug the code. 1.2 INSTALL COMPONENTS
The Visual Studio Installer will display a list of languages
You are welcome to use a
you can program in. This project only requires languages for web
different browser if you are
development, so make sure to select the component .Net Core or
more comfortable with it.
ASP.net and web development. The installer will then download
and install the necessary components.

Visual Studio for Mac 8.1

Create apps andgames across web, and
Images
You will need to download desktop with .NET. Unity, Azure, and Docker
the images folder from support is included by default.
www.dk.com/coding-course. A
.NET Core 2.1
copy of this folder is required
to create the home page of The open source, cross-platform .NET
the website. You can also use framework and runtime.
your own images if you like.
MAC

ASP.NET and web development

Build web applications using ASP.NET,
ASP.NET Core, HTML/JavaScript, and
Containers including Docker support

WINDOWS
INSTALLING AN IDE

1.3 OPEN VISUAL STUDIO

REMEMBER
Allow any updates and
then open Visual Studio. On a Mac,
you can open Visual Studio by clicking HTML, JavaScript, and CSS files are just text files.
its icon in the Applications folder, Their code can be written in a simple text editor,
taskbar, or the desktop. To open it in
Windows, click the icon on the startup
such as Notepad or TextEdit. However, a dedicated
menu, taskbar, or desktop. development environment, such as Visual Studio,
offers tools to improve the coding experience.
VISUAL STUDIO

Getting started
2 After installing an IDE, it is important to get
2.1 CREATE ROOT FOLDER
You will need a folder to hold
the basic elements required for coding the website. all the files for the website. Use Finder
to navigate to the “Users/[user account
The next few steps will teach you how to create the name]” folder on a Mac, or use File
root folder for the website, as well as the solution explorer to navigate to the “C“ drive on
and index file required for writing the HTML code. a Windows computer. Then right-click
and choose New Folder to create the PETSHOP
website folder. Name it “PetShop”.

2.2 GET THE IMAGES FOLDER

Paste the previously
downloaded “images” folder (see p.217)
into the root folder of the website. This
contains all the images required to
create the home page. The full path
to the folder on a Mac should be
“Users/[user account name]/PetShop/ IMAGES
images”, and in Windows it should
Images in the be “C:/PetShop/images”.
website folder
will appear on
the web page

IMAGE
PROJECT

PETSHOP
 WEB TECHNOLOGIES
Build a web page 218 219
2.3 OPEN A NEW PROJECT
The next step is to open a website project in Visual and then Blank Solution. In Windows, open the File menu,
Studio. On a Mac, open Visual Studio, go to the File menu, and select Open, and then select Web Site. Choose the PetShop
select New Solution. In the Other section, select Miscellaneous folder that was created in the previous step.

Click here to open Select this option to Click here to open a new
a new project create the project project on Windows

Other File Edit View Website Build Team

NET Generic
New
Miscellaneous Blank Solution Open Project/Solution...
Workspace Folder...
Generic Project Web Site...

MAC WINDOWS

2.4 CREATE A SOLUTION FILE 2.5 ADD AN INDEX FILE

You now need a solution file to keep track of the Next, add an “index.html” file to the root folder of the
project preferences. On a Mac, enter the solution name website. In the Solution Explorer, right-click on the project
“PetShop” in the “Configure your new solution” window, and name “PetShop” and select Add, then select New File on a
then enter the location of the website folder. Click Create to Mac or Add New Item in Windows. Now choose HTML Page,
save a file called “PetShop.sln” to this folder. In Windows, save and name it “index.html”. Visual Studio will add a file called
the project to create a .sln file. Click the File menu and choose “index.html” to the website folder.
Save All. This will open a dialogue box to save a file called
“PetShop.sln”. Save this file in the website folder.
Click on the project name
Solution to add the index file
PetShop
Build PetShop
Rebuild PetShop
Clean PetShop
Unload
PETSHOP.SLN PETSHOP
View Archive

Run Item
Start Debugging Item
LOOK FOR THE Add
Add New Project...
“VIEW” MENU Add Existing Project...
TO DISPLAY THE Add Solution Folder
“SOLUTION EXPLORER” IF IT This will add a new file
inside the website folder
New File...
Add Files...
IS NOT VISIBLE

SOLUTIONS

The solution file

tracks the project’s
preferences
GETTING STARTED

2.6 HTML PAGE

Visual Studio will create the “index.html” file
with the minimum code required for a valid HTML page.
<!DOCTYPE html> Document type
declaration
If you are using another development environment,
type the code shown here into the new index file. <html>
<head>
The “charset” attribute specifies the <meta charset="utf-8" />
character encoding for the HTML document. A
character encoding tells the computer how to <title></title>
interpret binary data into real characters
</head>
This tag contains all the <body> This tag is a container for the text
text, data, and images that will appear as the page title
visible on the web page in the browser

</body>
Outer tag for the </html>
HTML document

Structure the
3 home page
Pet Shop

In HTML, the home page will be file:///PetShop/index.html

a series of horizontal layers one
above the other. The first layer PROMOTIONAL MESSAGES
will contain an animated line of
promotional messages. This will This is a line of menu
TOP MENU
be followed by the “Top Menu”, items with hyperlinks to
a banner with a large picture, other pages in the site
company logo, and a call-to-action BANNER
button. The next element will be a
feature box and then a large image. Feature boxes have a short
FEATURE BOX 1
More layers repeating this pattern description, a picture, and
a call-to-action link
of alternating feature boxes and
large images will be included. The IMAGE 1
layers at the bottom will contain
contact details, a subscription link,
CONTACT US
hyperlinks, and a copyright notice. This button will help
the user navigate
We will also add a “Scroll to top”
button to help the user navigate SUBSCRIBE
back to the top of the page easily.
SCROLL TO
FOOTER
TOP BUTTON

COPYRIGHT
 WEB TECHNOLOGIES
Build a web page 220 221
3.1 ADD THE WEBSITE NAME
Before adding the text,
images, and data to the page, add
<head> This text will appear
the website name into the <head> as the tab title in
tag by adding the page title definition <meta charset="utf-8" /> the browser
into the <title> tag.

The <head> tag loads the <title>Pet Shop</title>

metadata before the
page is displayed </head>

3.2 ADD THE FAVICON DEFINITION

FAVICON
Next, add the favicon <link> tag below the
<title> tag to add the icon for the website. The “href”
attribute points to the icon file in the images folder The favicon is a small image that appears
of the website. in the browser tab next to the page title.
It is a square image that makes it easier
for a user to find the tab for the web page
<title>Pet Shop</title> in a browser. The favicon can have a solid
or a transparent background, and must
<link rel="icon" type="image/png"
have a .png or .ico file format.
href="images/favicon.png">
Pet Shop
This icon has been used in the book
to split code across two lines

3.3 ADDING TEXT

You can now start adding the text, data, and the messages. All the message divs, except the first, must
images inside the <body> tag. This will make these have a style attribute instructing the browser not to display
elements visible when the HTML document opens in them. For now we will only show a single promotional
the browser. To add the promotional messages, add message. JavaScript will be added later to the project to
an outer <div> tag, followed by the child tags to contain cycle through the promotional messages.

This tag will contain the elements Child tags are indented under The promotional
that can be styled as a group the parent “promo” <div> tag messages

<body>
<div id="promo" >
<div>Free shipping</div>
<div style="display:none;">New toys for puppies</div>
<div style="display:none;">Buy 5 toys and save 30%</div>
<div style="display:none;">Same day dispatch</div>
</div>
</body>
STRUCTURE THE HOME PAGE

3.4 VIEW THE PAGE

DEVELOPER TOOLS
You can now view this HTML page inside a
browser. Save the HTML file, then in the Solution
Explorer window, right-click on “index.html” and To see what is happening on an HTML page inside the browser,
select “View in Browser”. You can also open a web open its Developer tools. The Developer tools allow you to
browser and type the url into the address bar. On select individual HTML elements and see what CSS styles are
a Windows computer, the url will be “file:///C:/ being applied to them.
PetShop/index.html”. On Mac, the url will be “file:///
Users/[user account name]/PetShop/index.html”.
You will now be able to view the page title in the KEYBOARD SHORTCUT TO OPEN DEVELOPER TOOLS
tab name, the url in the address bar, and the text “Free
shipping” in the browser window. Keyboard shortcut Keyboard shortcut
Browser
macOS Windows

Chrome Cmd+Option+J Ctrl+Shift+J

Pet Shop

file:///C:/PetShop/index.html Opera Cmd+Option+I Ctrl+Shift+I

Free shipping Safari Cmd+Option+C n/a

url to the website
Internet Explorer n/a F12

Edge n/a F12

GOOGLE CHROME BROWSER

3.5 ADD THE TOP MENU SECTION

Next, it is time to add the Top Menu section. Under to instruct the browser to display the Top Menu in the
the “promo” div, add a new div with id =“topMenu”. To make centre of the page. Inside the “topMenu” div, add a div with
the Top Menu run across the full screen with the text inside class=“wrap”, and then inside the “wrap” div, add another
centred on the page, surround it with a “wrap” div. This “wrap” div with id=”topLinks”. This div will contain the list of hyperlinks
class will be defined later in the CSS project “Styling the website” in the Top Menu.

<div style="display:none;">Same day dispatch</div>

</div> The “class” attribute describes
the name of a group that the
<div id="topMenu"> element is a member of

<div class="wrap">
<div id="topLinks">
</div> The “id” attribute describes the identity
of the element, and can be used to select
</div> the element in CSS and JavaScript

</div>

Closing tag for Closing tag for Closing tag for the
the “topMenu” div the “wrap” div “topLinks” div
 WEB TECHNOLOGIES
Build a web page 222 223
3.6 ADD THE
HYPERLINK LIST ...<div id="topLinks">
Inside the “topLinks” div, add
an unordered list that will Tag for unordered list
contain the actual hyperlinks in
<ul>
the Top Menu for the HTML The <a> anchor tag is used
pages: Home, About, Shop,
<li>
to describe a hyperlink
and Contact. Then add a small
link, which appears as <a href="/">Home</a>
the company name, back
to the home page. Just below </li> The <li> tag is placed inside
a <ul> tag to represent each
the “topLinks” div, add another
anchor tag to contain the <li> individual item within a list
name of the website. This will
hyperlink to the home page. <a href="/">About</a>
</li> The “href” attribute contains the url that
points to the hyperlink destination
<li>
<a href="/">Shop</a>
</li> The <li> tag represents a
list item in an ordered or
<li> unordered list

<a href="/">Contact</a>
</li>
</ul>
</div>
<a class="logo" href="/">PET SHOP</a>

This anchor tag contains

the name of the website

Pet Shop
SAVE
file:///C:/PetShop/index.html
The Top Menu Free shipping
list appears as
• Home
hyperlinks • About
• Shop
• Contact

PET SHOP

View the website

Save the HTML file and then refresh the page in the
browser. You will see the promotional message on
top, with the Top Menu list below it, followed by the
hyperlink to the home page with the company logo.
STRUCTURE THE HOME PAGE

3.7 ADD THE BANNER

The “topMenu” Add a div with id=“banner” inside
Next, add the banner
div closing tag the <div> tag with class=”wrap”
section that will contain a large
company logo and a call-to-action
button to visit the shopping page. </div>
This banner image and heading
should appear centred in the page, <div class="wrap">
so it needs to be surrounded by a
div with class=“wrap”. <div id="banner">
<h1 class="logo">PET SHOP</h1>
This contains the
<div id="action"> call-to-action button

The <h1> tag contains <a href="/Shop">SHOP NOW</a>

the company logo
</div>
</div>
</div>
Closing tag for the This is the hyperlink
“banner” div to the url “/Shop”

3.8 ADD VERTICAL SPACE

Below the “banner” div, add
another div with class=“spacer clear v80”.
</div>
The “spacer v80” classes will be used in
Styling the web page (see pp.242–63) <div class="clear spacer v80"></div>
to define a standard vertical spacer
between the elements. The “clear” class </div>
will be used later to instruct the browser
to add the next element on a new line.

Feature box control

4 The next step is to add a feature box control
to advertise the fish department. This feature box
control can be reused a few more times on the page,
each time alternating the side of the page that has
the image and text.

HEADING

SUBHEADING

HORIZONTAL RULE
Feature box structure
The left half of the feature box will contain DESCRIPTION
a heading, subheading, a text description,
and a link to the category on the website. LINK IMAGE
The right half will hold an image.
 WEB TECHNOLOGIES
Build a web page 224 225
4.1 USING THE CLASS ATTRIBUTE
Add this code below the “spacer” div to define the left and
right columns of the feature box for the fish department. The “class”
attribute is used instead of the “id” attribute to style the HTML tag
because the feature box will be used multiple times on the same page.

<div id="fishFeature" class="feature">

<div class="leftColumn"> This will contain
elements for the
</div> left column

<div class="rightColumn"> This will contain

elements for the
right column
</div>
</div>

4.2 DEFINE THE LEFT COLUMN ELEMENTS

Inside the “leftColumn” div, add a div class=”text” to
contain the text elements. This code will add the heading, the
subheading, a horizontal rule, and a description of the feature
box in the left column. Add a div class=“spacer” to define the This text will appear
vertical space between the elements, and then add an anchor as the subheading This icon has been used to
tag to hyperlink to the page. of the feature box split code over two lines

<div class="leftColumn">
<div class="text">
This tag contains the <h2>LOVE FISH</h2>
feature box heading
<div class="subHeading">THE WIDEST RANGE OF
FISHES</div>
Adds a <hr />
horizontal rule
<p>Indoor and outdoor, we’ve
got them all!</p>
<div class="spacer v40"></div>
<a href="">CLICK FOR FISH</a>
</div>
</div>

This appears as the This text will appear as a

description text hyperlink to the page
FEATURE BOX CONTROL

4.3 RIGHT COLUMN ELEMENTS

Now add this code to define the elements for the right column. In the
“rightColumn” div, add an anchor tag and inside the <a> tag add an <img/> with
the picture for the fish department. Then, add a vertical spacer that can be reused
throughout the website to give consistent vertical height between elements.

<div class="rightColumn">
The <a> tag
<a class="featureImage" src="/Fish">
describes a
hyperlink
<img src="images/fish_feature_1.jpg" />
</a>
The “src” attribute contains
</div> the url to the image file

</div> Closing tag for the

“fishFeature” div This is the name
of the picture in
<div class="clear spacer v20"></div> the images folder

Adds a vertical space

between elements

4.4 ADD A NEW DIV

Below the “spacer” div, add a new div with
id=“fishImage” and class=“middleImage”. This will contain
the second image for the fish department, and will appear
under the main fish feature box. These “middleImage”
containers will be used again later in this page. Defines the middle image
for the fish department

<div id="fishImage" class="middleImage">

This points to the
<img src="images/fish_feature_2.jpg" /> image file location
</div>
<div class="spacer v80"></div> Adds another
vertical space after
the middle image
</div> Closing tag for the “wrap” div

ON SALE

$4 $4
$15 $10 $10
 WEB TECHNOLOGIES
Build a web page 226 227
Advertising the dog category
5 It is now time to add a second category to
the website to advertise the dog department. This
feature box will appear below the fish department,
and will have the image on the left and all the text
elements on the right.

5.1 DOG FEATURE

To create the dog feature control box, add a div beneath
the “spacer” div. Inside this new “dogFeature” div, add the “leftColumn”
and “rightColumn” divs with all the text and image elements required File name of the dog image
for the dog department. in the images folder

<div id="dogFeature" class="feature">

<div class="leftColumn">
<a class="featureImage">
<img src="images/dog_feature_1.jpg" />
</a>
</div>
<div class="rightColumn">
<div class="text"> This text will appear
as the subheading
Heading for the <h2>HAPPY DOGS</h2>
dog feature box
<div class="subHeading">EVERYTHING YOUR DOG
NEEDS</div>
<hr />
<p>Make sure your pooch eats well and feels good
with our range of doggie treats.</p>
<div class="spacer v40"></div>
<a href="">CLICK FOR DOGS</a>
</div>
</div>
</div>

The “href” attribute contains This text will appear Description text for
the url that points to the as a hyperlink for the the dog department
hyperlink’s destination dog department
ADVERTISING THE DOG CATEGORY

5.2 MIDDLE IMAGE

Below the
“dogFeature” div, add another
<div class="clear"></div>
div with class=“clear” to
start a new line. Then add <div id="dogImage" class="middleImage">
the second image for the
dog feature box. Next, add <img src="images/dog_feature_2.jpg" />
another vertical spacer under
the image. </div>
<div class="spacer v80"></div>

Adds a vertical space File name for the

below the middle image middle image

Advertising the
6 bird category
The next feature box to be included is
for the bird department. Similar to the
fish feature box, this department will
have the text elements on the left and
the image on the right. The bird category
will appear below the dog category on
the website.

6.1 BIRD FEATURE

Type the following lines of code below the “spacer” div
to add another feature box to advertise the bird department.
This will include the “leftColumn” and “rightColumn” text and Defines the feature box control Subheading for the
image elements for this category. for the bird department bird department

<div id="birdFeature" class="feature">

This is the heading
<div class="leftColumn"> for the bird
department
<div class="text">
<h2>BIRDY NUM NUM</h2>
<div class="subHeading">KEEP YOUR BIRDS
CHIPPER</div>
<hr />
 WEB TECHNOLOGIES
Build a web page 228 229

Description for the <p>Yummy snacks and feeders for

bird department
every kind of bird.</p>
<div class="spacer v40"></div>
<a href="">CLICK FOR BIRDS</a>
</div>
Hyperlink for the
</div> bird department

<div class="rightColumn">
<a class="featureImage" src="/Bird">
<img src="images/bird_feature.jpg" />
</a>
</div>
</div>

Closing tag for the File name for the bird

right column image in the feature box

6.2 ADD ANOTHER IMAGE

Now add another “clear” div to start on
a new line. Next, add the middle image for the
bird department. Inside the “birdImage” div,
add the <img/> tag with the url to the image. Closing tag for the
“birdFeature” div

</div>
<div class="clear"></div>
<div id="birdImage" class="middleImage">
<img src="images/bird_feeder.jpg" /> File name of the
middle image
</div>

The bird image is picked up

from the main images folder Pet Shop
and added to the website file:///C:/PetShop/index.html
Bird Feature

IMAGES
SCROLL TO THE TOP

7 SCROLL TO THE TOP

Add a button to allow the user to scroll back to “tooltip” to the button so that when a user hovers
the top of the page. Create a “scrollToTop” div and then their mouse over the button, a label will appear on
add a <span> tag inside it with an HTML entity (see p.233) top saying “Scroll to top”. Another vertical spacer is
indicating the upwards arrow. The “title” attribute adds a added below the button.

</div> Closing tag for the “birdImage” div

Defines the Scroll
<div id="scrollToTop" title="Scroll to top"> to top button

<span>&uarr;</span> The <span> tag contains

the HTML entity indicating
the upwards arrow
</div> Adds a vertical
space below the
<div class="clear spacer v40"></div> Scroll to top button

8 ADD A CONTACT SECTION

Add the contact section for the website
immediately below the “spacer” div from the previous
step. You can reuse the feature box controls that were
used to split the page into a left and right column. In
the left column, you will add the address and other
contact details.

Defines the TELEPHONE EMAIL ADDRESS

contact section

<div id="contactUs" class="feature">

<div class="leftColumn"> Defines the elements
in the left column of
the feature box
<div class="text">
<h2>CONTACT US</h2> Header for the section

<hr />
The <p> tag makes the <p>
information appear
as a paragraph TEL : 012-345-6789
</p>
<p>
EMAIL : <a href="mailto:[email protected]"
class="emailLink">[email protected]</a>
</p>

This will appear as the

email link to the website
 WEB TECHNOLOGIES
Build a web page 230 231

<p>
The <br /> tag tells
PET SHOP<br />
the browser to start
a new line
80 Strand<br />
This text will appear
as the address of London<br />
the Pet Shop
WC2R 0RL
</p>
</div>
</div>
<div class="rightColumn">
</div>
</div>

Defines the right

column of the feature box

8.1 ADD A MAP TO THE CONTACT SECTION

In the right column, you can now embed a map to show the location
of the Pet Shop. Inside the “rightColumn” div, add an <iframe> tag with the
“src” attribute set to the url of the map on Google Maps. The <iframe> tag is
Link to the map
used to insert content from another web page onto your page.
in Google Maps

<div class="rightColumn">
<iframe src="https://www.google.com/maps/embed?p
b=!1m18!1m12!1m3!1d2483.1688989591494!2d-0.12403078438577886!3d51.510
117279635615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876
04c97bf47a1d%3A0xaf65b3d1a31e2229!2s80+Strand%2C+London+WC2R+0BP%2C+U
K!5e0!3m2!1sen!2sza!4v1539340576969" frameborder="0" style="border:0"
allowfullscreen class="contactMap"></iframe>
</div>
</div> Closing tag for the “contactUs” div

</div> Closing tag for the “wrap” div

Add this line to include a
<div class="clear spacer v80"></div> vertical space after the map
ADD THE SUBSCRIBE SECTION

9 ADD THE SUBSCRIBE SECTION

Next, add the “Subscribe” section for the website. Below and “method” attributes define where the form gets sent when
the “spacer” div add the “subscribe” div to make this section run the user clicks the “submit” button. Then inside the <form> tag,
across the full screen. Inside the “subscribe” div, add a header, a add a text input field to allow the user to enter an email
form with action=”/subscribe” and method=”post”. The “action” address, and a button which says “Join Now”

<div id="subscribe">
Header for the
<h2>SUBSCRIBE TO OUR MAILING LIST</h2> Subscribe section

<form action="/subscribe" method="post">

<input name="email" type="text" placeholder="Enter
your email address" />
<input type="submit" value="Join Now" />
</form> Text for the button

</div>

10 ADD THE FOOTER

Let us now add the “footer” section after the
“subscribe” </div> closing tag. This will contain the
unordered list of footer hyperlinks for the website. The “href” attribute describes This will appear as the
the url of the page to link to first footer hyperlink

<div id="footer">
<ul>
<li>
<a href="/storeFinder">Store Finder</a>
</li>
<li>
<a href="/shipping">Shipping</a> The second
hyperlink
</li>
<li>
<a href="/FAQ">FAQ</a>
</li>
</ul> The <ul> tag is a block element used
to designate an unordered list
</div>
 WEB TECHNOLOGIES
Build a web page 232 233
11 ADD THE COPYRIGHT NOTICE
Then add a copyright notice at the bottom of the page.
This will contain the copyright message and the company logo.
Notice that in the code below, the company logo is contained
in a <span> tag so that it can be styled later in Styling the web
page (see pp.242–63). An HTML entity has also been used for the
copyright symbol. You have now created the basic framework
for your web page. Additional pages can also be created to build
a fully functioning website (see p.303).

© 2020 PET SHOP

Text for the
copyright message

<div id="copyright">
<div>&copy; 2020 <span class="logo">PET SHOP</span>
</div>
HTML entity for the
</div> copyright symbol

</body>
The company logo

ENTITIES
Some characters are not allowed in HTML COMMON ENTITIES
because they are reserved by HTML, CSS, or Symbol Meaning HTML entity
JavaScript. So when you want these restricted
characters to appear on screen, they must be
coded with an HTML entity so that they will render
correctly in the browser.
" Quotation Marks &quot;

Whitespace/spacebar &nbsp;
This HTML entity will
display a © symbol
& Ampersand &amp;

<p>
&copy; DK Books 2020 % Percent &percent;

</p>
$ Dollar &dollar;

Common entities © Copyright &copy;

Here is a list of some of the most

commonly used HTML entities. See
https://dev.w3.org/html5/html-author/
charref for a full list. ' Apostrophe &apos;
Cascading Style Sheets
Cascading Style Sheets (CSS) define how the contents of an
HTML file should appear in a web browser. It allows for the
design of a website to be easily updated by making changes
to the CSS style definitions.

Why CSS? way to define the style of single elements, and to share
Website styling, until 1996, was done inside individual the same styles across multiple elements in an HTML
HTML tags, making code extremely long and cluttered. document. The client web browser reads the CSS files
CSS simplified this by separating style from content. and applies the style definition to each element in the
A CSS file contains a list of rules that provide an easy HTML document.

Adding CSS styles to

an HTML document External CSS file
A CSS style can be defined in three When CSS style definitions are contained in a separate CSS file,
places in an HTML document: in the style definitions can be shared by all the pages in a website.
Use a <link> tag to reference the sheet in an HTML document.
an external CSS file, in a <style> tag
inside the HTML file, and in a “style”
The <link> tag instructs the browser to
attribute inside an HTML tag. <head> import CSS styles from an external file

<link rel="stylesheet" type="text/css"

href="styles.css"> Link to the
style sheet
In a <style> tag
An HTML file can contain CSS definitions inside </head>
a <style> tag, which is usually placed inside the
<head> section. These CSS definitions do not
apply to other pages on the website.

<head> All <h1> headers

on this page will
<style> be blue
Inline CSS
CSS style definitions can be added inline as an attribute to an
h1 { HTML tag. These inline style attributes will override any styles
that are set globally in an external CSS file or in a <style> tag.
Element to color: blue;
be styled
}
<p style="color: red;">Hello world!</p>
p {
color: red; Only this paragraph
text will be red
}
All paragraph
</style> text on this
page will
</head> be red
 WEB TECHNOLOGIES
Cascading Style Sheets 234 235
Style options CSS STYLE OPTIONS
CSS can define various aspects CSS code Output
of an element’s appearance on
screen, including its placement, display:block; The element will appear as
a block element
font, colour, border style, and
special effects such as animation. display:inline; The element will appear as
CSS contains instructions that an inline element
tell the browser how to render
display:none; The element will not appear
an HTML element on screen. on the screen
In order to work on all browsers
CSS expects precise names font-family: "Times New Roman", Specifies the font settings and
for the properties and values. serif; font colour

For example, to make an font-weight: bold;

HTML element invisible the color: red;

“display” property will have padding: 10px 12px 15px 30px; Specifies the spacing settings (see p.245)
the value “none”. margin 40px;

background-color: white; Sets the background colour

How CSS works

CSS works by selecting a set of HTML elements, and then adding styles
to all the elements in the set. Every CSS instruction consists of two parts:
the selector and the style definition. The selector tells the browser which
elements are to be included in the instruction, while the style definition
specifies how to display the elements included in the selector.

CSS instructions
A CSS instruction contains a body {
property and a value that defines
how that property should be padding: 20px; The “padding” property
styled. These instructions are has the value “20px”
grouped together in a style margin: 0;
definition. In this example, the
selector is “body”. The style background-color: gray;
definition is the set of style
instructions contained in the curly font-family: "Open Sans", sans-serif;
brackets. Each style instruction
has a semicolon at the end. font-size: 16px;
}

Specifies the font

name and font type

MARGIN BACKGROUND FONT FONT

PADDING
COLOR FAMILY SIZE
CSS selectors
A CSS selector tells the browser which HTML elements are
to be styled. An element must satisfy the selection criteria
in order to have the style applied to it. Selectors can target
either a single element or a group of elements.

Basic selectors
A CSS selector is a pattern used to identify which HTML GROUPING
elements qualify to have the style applied to them. CSS SELECTORS
selectors allow programmers to target specific HTML
elements with style sheets. There are three basic selectors
MINIMIZES CODE
in CSS: the element selector, id selector, and class selector. IN A STYLE SHEET

Element selector
This is used to target all the HTML <p>This text to be in red</p>
elements of a certain type. For
example, all elements inside the HTML
<p> tag will be coloured red. This text will
implement the style
definition applied to
p {
the <p> tag
Selects all
paragraph
color: red;
elements
}
CSS

Class selector
The dot (.) prefix indicates a class selector. Multiple elements
in an HTML document can share the same class. A class
selector is used to target a group of HTML elements that
all have a certain “class” attribute value. For example, all
elements that have the class “roundedCorners” will be styled.

<div class="roundedCorners"></div>
HTML This div will implement the
“roundedCorner” style definition

.roundedCorners{
border-radius: 20px; Selects all elements
with the class
“roundedCorners”
}
CSS
 WEB TECHNOLOGIES
CSS selectors 236 237
Complex selectors
GROUPING SELECTORS Selectors can also be combined to
provide more specific definitions
If multiple elements are to have the same style, it is not based on the relationships between
necessary to define them separately. Selectors can be
the elements. You can combine the
grouped together using a comma. All grouped selectors
will have the same style applied to them. id, class, or tag type into a complex
selector definition.
<h1>, <h2>,
h1, h2, h3{ and <h3> tags Child selector
are grouped This selector includes all the
font-size: 24px; and will all elements that are children of a
have a font particular element (see p.210). Use
} size of 24px the greater than (>) symbol between
the elements to indicate this selector.
For example, div > p

Descendant selector
Indicated by a space, this defines all
elements that are descendants of a
particular element. This is similar to
the child selector, but will include
children of the child element.
For example, div p

General sibling selector

Defines all the elements that are
Id selector siblings of a particular element.
This selector is used to target a single HTML They will all have the same
element with a specified “id” attribute value parent element. Use the tilde (~)
and is indicated with hash (#) prefix. In an symbol to indicate this selector.
HTML document, an id should be applied For example, p ~ div
to only one element per page.

<div id="header"></div> Next sibling selector

Defines all the elements that are
HTML siblings of and follow on after
This div will implement the a particular element. These
“#header” style definition selectors are indicated by a
Selects
plus (+) symbol between them.
#header{ the single
For example, div + p
element
text-align: center; with the id Multiple classes selector
“header” Defines an element that must
}
contain all the classes in the
selector. The absence of a
CSS
space between the class names
indicates that all classes must
be present. For example,
.roundedCorners.featureBox

221B Combine id and class selector

This defines an element that
must contain the id and all
supplied classes. The absence
of a space between the id and
class name indicates that both
must be present. For example,
#mainContent.minHeight
CSS styling
CSS style definitions are used to set the background colour,
font size, font family, borders, and other elements in a web page.
Styles are said to cascade as they are inherited by child elements
from the parent elements (the elements they are contained in).

Styling colour
CSS allows programmers to define the colour of elements
on a website, including background colours, borders,
and text. The most common colours can be set with a
text value of the colour name. For example, white, red,
or blue. All modern browsers support 140 HTML colour
names. Any other colour value can be described in Hex,
RGB, or RGBA format.

HTML COLOUR CODES

Format Values for the colour blue
Text color : blue;

Hex full color : #0000ff;

Hex shorthand color : #00f;

RGB color : rgb(0, 0, 255);

RGBA color : rgba(0, 0, 255, 1);

color:rgba(0,0,255, 0.5);
RGBA format’s alpha channel parameter
add text
describes the transparency of a colour

Font size options

In CSS, font size can be defined in several different ways. • Percentage: Defines size relative to the parent
• Pixels: This defines the size of the font in pixels. The element’s font size. For example, “200%” implies
number is followed by the letters “px”. twice the parent font’s size.
• Size: Keywords such as “large” or “small” are used to • Em: This method is also relative to the parent
define the size of the font. element’s font size. For example, 2em = 2 x
• Relative size: Defines a font size relative to the parent parent font-size = 200%
element’s font size. Uses keywords such as “larger”.
 WEB TECHNOLOGIES
CSS styling 238 239
CSS HELPS Cascading styles
An HTML element can have multiple
MAINTAIN THE styles applied to it. Many HTML tags
DESIGN ACROSS also inherit properties from the parent
tags that contain them. The browser
A WEBSITE determines which style to apply based
on the rules mentioned below.

Origin
Browsers have built-in default styles
Border styling that they apply to HTML tags. These are
known as user-agent styles. However,
The CSS border properties styles defined by the programmer,
called author styles, will override these
allow programmers to specify user-agent styles.
the style, width, and colour
of an element’s border. These Importance
border styles can be defined A style instruction that is marked with
in several different ways. the “!important” declaration will be
given priority over other instructions.
• Define border settings It will always be applied to an element,
in one line regardless of the placement of the
border: 1px solid black; instruction in the CSS hierarchy.
• Define border settings
in separate lines Specificity
A style that has a more detailed selector
border-width: 1px; will be applied before a style that is
border-style: solid; less specific. This means that the greater
border-color: black; the number of elements in the selector,
the higher the priority that the style
• Define different vertical will receive.
and horizontal borders
border-width: 1px 0px; Instruction order
• Define different width for A style that is defined earlier in a CSS
each side of the border file will be overridden by a style that is
defined later, and a style that is defined
border-width: 1px 0px
in the CSS file will be overridden by
3px 2px; the styles defined inline by a “style”
attribute in an HTML tag.

Animation
!IMPORTANT
The “transition” instruction in CSS
allows programmers to create simple The !important declaration is an easy
way of instructing the browser to prioritize
animations in modern browsers, such
a style definition, but it should only be
as a button changing size or colour used as a last resort. It is preferable to
when a mouse hovers over it. To do this, make the selector more specific, by
the property to be animated and the including additional classes or id values
duration of the animation should be in the selection criteria. CSS will apply
specified in the CSS file (see p.250). the definition with the most specific
selector, avoiding the need to use the
!important declaration.
Responsive layouts
A responsive website has a design that can adapt to display
correctly on any size screen, from desktop monitors and
laptops to smartphones and tablets. This is achieved by
a clever combination of HTML, CSS, and JavaScript.

Viewport
The “viewport” declaration tells a browser that a website has
a responsive layout. The declaration is placed alongside other
metadata. The “content” attribute instructs the browser to set
the page width the same as the screen width. It also sets the
initial zoom level. These meta instructions allow the page
elements to adjust to the maximum width of the screen and MULTIPLE CSS FILES CAN
improves the user experience by displaying the correct styling BE LINKED TO AN HTML
and layout for any screen size. Without these instructions, the
browser will zoom out to show the whole page, rather than
DOCUMENT TO MAKE A
allowing the page elements to reshape to the width of the screen. RESPONSIVE WEB PAGE

<head>
<meta name="viewport" content="width=device-width, The “content”
attribute sets
the page width
initial-scale=1.0"> The “viewport”
declaration is placed and the initial
inside the <head> tag zoom level to 1
</head>

Flexible layouts
Including the
“viewport” declaration
in a responsive design
allows the page HEADER
HEADER
elements to adjust
to fit the screen size.
FEATURE BOX IMAGE
FEATURE BOX IMAGE

FOOTER

FOOTER
 WEB TECHNOLOGIES
Responsive layouts 240 241
Why responsive? with narrow screens forced programmers to
When the Web was first created, almost all users maintain multiple versions of their sites, each
viewed websites on a desktop monitor. Early designed to display correctly on a different size
websites were programmed to be viewed at a fixed of screen. Today, there are many different
width of 800px. This width was gradually increased device sizes that can display web pages. The
over the years as the average user’s screen size solution to this is to have a single flexible
increased. The arrival of browsers on smartphones layout that can adjust to any screen size.

Media query the background colour of elements in the

Media queries are used to switch between “specials” class will change depending
different layout styles, depending on the width on the width of the screen. The default
of the page. This is the primary way to create background colour is red. If the screen is
responsive web pages that can scale to fit correctly more than 993px wide then the background
on any screen size. For example, in the code below, colour will be blue.

.specials { Defines the default

background colour
background-color: blue; of the “specials” class

Sets the minimum

screen width to 993px
@media screen and (min-width: 993px) {
.specials {
background-color: red;
}
HEADER
}

FEATURE BOX IMAGE

Flexible styles
Media queries fine-tune
the CSS styles, so that
each element looks its HEADER
best on any screen size.
FEATURE BOX IMAGE
SPECIALS

SPECIALS CONTACT

CONTACT
FOOTER

FOOTER
Styling the web page
In this part of the project, styling will be applied to the framework created
in HTML. CSS allows programmers to have much better control over the
layout of their website. The look of the site can be kept consistent by using
a single style sheet, which makes the maintenance of a website more
efficient. This also saves time and makes it easy to update the design.

What the program does Project requirements

Use the HTML elements of the web page created in Build a To add styling to your web page,
web page (see pp.216–33). You will use CSS to select and you will need the HTML file
style these HTML elements individually in this second part and images folder from the first
of the project. Each element will be formatted according to part of the project. You can
its role and function, making the web page easier to navigate. continue using Visual Studio as
the development environment.

START Pet Shop

file:///PetShop/index.html

Free shipping

PET SHOP Home About Shop Contact

HTML FILE
Add visual styles
and layout
definitions for
the HTML
elements
PET SHOP
SHOP NOW

LOVE FISH IMAGES FOLDER

THE WIDEST RANGE OF FISHES
Indoor and outdoor,
we’ve got them all!
Check that CLICK FOR FISH
the web page
is easy to read
and follow

DEVELOPMENT
ENVIRONMENT

Styled website
The long vertical web page from the HTML
END part of this project will now appear styled,
with clearly defined sections and formatted
text and images. Adding CSS makes the web
PROGRAM DESIGN page more visual and individual.
 WEB TECHNOLOGIES
Styling the web page 242 243
YOU WILL LEARN WHERE THIS IS USED
❯ How to use CSS style sheets Time: CSS is used in all modern websites where visual
2–3 hours appearance is important. Using CSS, it is possible
❯ How to create buttons
with rollovers Lines of code: 315
to give every element of a website a distinct style.
A well-presented web page will encourage interaction
❯ How to add CSS animations Difficulty level with the user and will be easier to navigate as well.
and transitions

Setting up
1 Before you can start styling the website, it is necessary
to create a special CSS file to contain the code and link it to the
HTML file previously created. The following steps will create
a dedicated “styles” folder and the CSS file inside it.

1.1 CREATE A NEW FOLDER

You will first need to create a new folder in Solution The solution folder
Visual Studio to contain the CSS style sheets. In Windows, named PetShop
PetShop
right-click on the project name “PetShop” in Solution
Explorer. Then, select Add and choose New Folder. Name Build PetShop Adds the styles
this folder “styles”. The full path to this folder should be Rebuild PetShop folder inside the
“C:\PetShop\styles”. Clean PetShop solution folder
On a Mac, open Finder and create a new folder called Unload
“styles” inside the website folder “PetShop”. The full path Add New Project...
should be “Users/[user account name]/PetShop/styles”. View Archive Add Existing Project...
Then, open Visual Studio, right-click on the project name
“PetShop”, select Add, and then choose Add Solution Folder. Run Item Add Solution Folder
Start Debugging Item
New File...
Add Add Files...

1.2 ADD A CSS FILE

LOCATING FOLDERS
The next step is to create a new CSS file inside the
styles folder. Make sure to name the CSS file “global.css”. In
Windows, the full path to the CSS file should be “C:\PetShop\ In Windows, if you would like to see where a
styles\global.css”. On a Mac, the full path to the file should folder has been created from inside Visual
be “Users/[user account name]/PetShop/styles/global.css”.
The website folder PetShop should now contain the images Studio, go to the “Solution Explorer” window,
folder, the styles folder, and the HTML file. right-click on the folder you want to locate and
select Open Folder in File Explorer. This will
open an instance of File Explorer at the location
of the folder.
On a Mac, to see the location of a folder
from inside Visual Studio, go to the “Solution
IMAGES HTML STYLES Explorer” window, command-click on the folder
you would like to locate and select Reveal in
Finder. This will open an instance of Finder at
the folder’s location.
PETSHOP
SETTING UP

1.3 REFERENCE THE CSS FILE

It is necessary to link the newly created CSS file to available in Google Fonts. To do this, you will
the HTML document so that the styles can be applied to all its link the Google Fonts website to “index.html”, and
elements. This reference to “global.css” file must be made using specify the fonts you want to use. The fonts Anton
a <link> tag within the <head> tag of the “index.html” file. The and Open Sans are used here, but you can pick HTML
fonts for this web page will be selected from the options any other font you like.

<head>
<meta charset="utf-8" />
Title to be displayed
<title>Pet Shop</title> in the browser tab

<link rel="icon" type="image/png" href="images/favicon.png">

<link href="styles/global.css" rel="stylesheet" />
Link to the custom
<link href="https://fonts.googleapis.com/css? “global.css” file
where all the
family=Anton|Open+Sans" rel="stylesheet"> styles are defined

</head>

Link to the CSS style sheets

for the Google fonts

1.4 ADD COMMENTS

At the top of the “global.css” style sheet, add a the website and provide an easy reference. Notice that
comment with the names of the fonts and the list of colours the “font-family” definition contains the name of the
to be used in the website. Add this information inside a primary font being employed, and a secondary font
comment block “/* */”. Anything inside a comment block type to use if the first font is not available. You can CSS
will be ignored by the browser. These comments are only also choose a different colour scheme for your website
included to help the programmer standardize the style of if you like.

/* This font will be used

for headings and other
font-family: "Anton", cursive; prominent text elements

font-family: "Open Sans", sans-serif; This font will be used

for normal paragraph
text elements

Text color : #333;

Dark blue : #345995;
Light blue : #4392F1;
Hex codes for the
colours to be used
Red : #D7263D;
Yellow : #EAC435;
Orange : #F46036;
*/
 WEB TECHNOLOGIES
Styling the web page 244 245
Styling the page elements
2 Now that the CSS file is ready to contain all the style definitions,
you can start by adding the styles that affect elements throughout the
page. The next few steps will show you how to do this.

2.1 DEFINE THE HEADERS

Start by defining the “h1”
and “h2” headers used throughout
body {
The <body> tag
the website. The styles specified
here will be applied to each instance } appears by default

of the two headers. Both headers Applies the style

will be styled the same, but with a h1, h2 {
definition to all “h1”
separate font-size definition. and “h2” headers on
margin: 0; the web page
padding: 0;
The “font-family” property font-family: "Anton", cursive; The headers will
defines the preferred font use the Anton
to use and the fallback font font-weight: normal; cursive font
type in case the preferred
font is not available }
h1 {
Only “h1” headers will font-size: 110px;
have the font size 110px
}
h2 {
Only “h2” headers will font-size: 30px;
have the font size 30px
}

MARGIN AND PADDING

Margin is the space measured from the
border, outside of the element. Padding MARGIN STYLES
is the space measured from the border, Code Output
inside the element. There are different ways
to describe the margin and padding styles. 40px on top, bottom,
margin: 40px;
left and right
MARGIN
BORDER 20px on top and bottom
margin: 20px 40px;
PADDING 40px on left and right
CONTENT
10px on top, 20px on right
margin: 10px 20px 30px 40px;
30px on bottom, 40px on left

0 on top and bottom and equal space on

margin: 0 auto;
STRUCTURE OF MARGIN the left and right (same as centre align)
AND PADDING IN A WEBSITE
STYLING THE PAGE ELEMENTS

Page elements
Every website is made up
of various elements serving
different purposes. CSS
can add unique styles to
every element.
PET SHOP

FONT TYPE

FONT FAMILY

FONT WEIGHT

2.2 ADD VERTICAL SPACERS 2.3 ADDING ELEMENTS ON NEW LINES

Each section of the web page can be separated with Now create a style for “clear”. This is required if the
white space to make a website easy to follow. These white previous element does not have a fixed height or is set to
spaces are created through standardized vertical spacers float to one side. The “clear” property is used with values
throughout this website. In CSS, you can use compound style such as “left”, “right”, or “both”. It prevents floating objects
signatures to associate the required style definitions. from appearing on the specified side of the element to
which “clear” is applied.

.spacer.v20 { Compound style

signature with the .clear { Selects all the
classes “spacer” elements with
height: 20px;
and “v20” the class “clear”
clear: both;
}
}
.spacer.v40 {
height: 40px; The height will
be 40px if the This instruction will
} tag has both place the next HTML
“spacer” and element on a new line
“v40” classes
.spacer.v80 {
height: 80px;
} USE MULTIPLE CLASSES
IN THE HTML TAG
The height will be 80px
TO ACHIEVE MORE
if the tag has both “spacer”
and “v80” classes
MEANINGFUL AND
TARGETED STYLING
 WEB TECHNOLOGIES
Styling the web page 246 247
2.4 STYLE THE BODY TAG
Add the style definitions for body {
the <body> tag from step 2.1. The style
signature is “body”. The style definition margin: 0;
will set the values for the margin, padding,
font, background colour, and font colour. padding: 0; No space between
the browser
font-family: "Open Sans", window and
the web page
sans-serif;
The default font-size: 15px; The background
font size for all colour for the
the text on the
background-color: white; web page
web page
color: #333; Hex code for dark
grey, the font colour
} for the body text

Styling the individual elements

3 In this section, you can add styles to the as a horizontal layer, with its own visual style and
individual HTML elements from the top of the web spacing requirements. Start by adding styles to
page down to the bottom. Each section can be seen the first element on the web page – the promo bar.

3.1 DEFINE STYLE SIGNATURES

The Promotional Messages, Subscribe, and Footer
sections share some of the same style definitions. They all
need to be centre aligned, with white text, and a minimum
width of 1000px. Add this code below the code added in
step 2.3 to give all three style signatures the same definition.
PROMO

clear: both;
}
#promo, IMAGE

#subscribe, The selectors apply the

same style definition
#footer { CONTACT US

text-align: center;
color: #fff; Hex code for the SUBSCRIBE
colour white
min-width: 1000px;
} FOOTER

The elements must be

at least 1000px wide COPYRIGHT
STYLING THE INDIVIDUAL ELEMENTS

3.2 BACKGROUND COLOUR FOR PROMO 3.3 ADD PADDING TO THE PROMO DIV
Next, you will add a background colour to the Add padding around the text in the Promotional
Promotional Messages section to make it more visible on Messages to introduce some space from the border. The
the web page. This style only applies to the promo section. style will be applied to all the promotional messages
contained within the “promo” div.

#promo { Selects all <div>

#promo > div { tags within the
background-color: #F46036; <promo> tag
padding: 15px;
}
}

Hex code for orange in The space between the <div>

the colour scheme border and its text content SAVE

3.4 VIEW THE PAGE

View the page by opening a browser and entering the page does not update in the browser when you refresh, the
url into the address bar. In Windows, the url to the file on your local browser may have cached a previous version of the site. Empty
computer will be “file:///C:/PetShop/index.html”. On a Mac, the url the browser cache by going to the history settings and selecting
will be “file:///Users/[user account name]/PetShop/index.html”. If the “Clear browsing data”. This will force the browser to get the latest files.

Pet Shop
file:///PetShop/index.html

Free shipping The promotional messages

will now be displayed with
• Home the styles applied
• About

3.5 DEFINE THE WRAP CLASS

Add style definitions for the “wrap” class created in
HTML. Most of the website’s information is contained in this
class. The “wrap” div has a fixed width of 1000px. The horizontal TOP MENU
margins adjust automatically to keep the <div> in the centre of
the screen if the screen width is more than 1000px wide.

color: #333;
}
.wrap { Add this after the
code from step 2.4
margin: 0 auto; Aligns the
“wrap” element
padding: 0; to the centre
of the page
width: 1000px;
}
HOME ABOUT SHOP CONTACT
 WEB TECHNOLOGIES
Styling the web page 248 249
3.6 DEFINE THE TOP MENU 3.7 DEFINE HORIZONTAL MENU LISTS
Now add the style definitions for the The menu lists in both Top Menu and the Footer are
Top Menu section. This panel will run across horizontal, so you can give them the same style definitions. The
the full screen and will contain the menu items menu items should align left within their container lists, so that
and logo. Set a fixed height for the menu they appear in a horizontal line with the first item on the left.
and add padding in all directions for the list
of menu items contained in the panel. The two selectors share the No bullet points will be
same style definition added to the list items

padding: 15px; #topLinks ul,

} #footer ul {
#topMenu { Add this after the list-style-type: none;
code from step 3.3
height: 60px; margin: 0;
} padding: 0;
#topLinks { overflow: hidden;
float: right; } Hides content that
overflows the
padding-top: 20px; #topLinks li { element’s dimensions

} float: left; The element

floats to the left
of its container
Space between the “topLinks” }
border and the list it contains

3.8 STYLE THE HYPERLINKS

The hyperlinks in the Top Menu will have one style for to make the mouse-over effect smoother. Here, three
their normal state and a different style for when the mouse is versions of the “transition” instruction have been included,
hovering over them. The keyword “:hover” is a pseudo-class and each one intended for a different browser. Including
instructs the browser to apply that style when the mouse is over multiple instructions for different browsers is not very
the element. Add a “transition” instruction in both style definitions common, but is required occasionally.

#topLinks li a {
color: #333;
text-align: center; Centre aligns the
hyperlink contents
padding: 16px;
No underline beneath
text-decoration: none; the hyperlink Transition effect
when a mouse moves
-webkit-transition: all 250ms ease-out; off the hyperlink

-ms-transition: all 250ms ease-out; Transition definition

required by older
transition: all 250ms ease-out; Microsoft browsers,
such as Internet Explorer
}
Transition instruction for
Google Chrome browser
STYLING THE INDIVIDUAL ELEMENTS

#topLinks li a:hover {
Hex code for
color: #4392F1; the colour blue Transition effect
when a mouse moves
-webkit-transition: all 250ms ease-out; over the hyperlink

-ms-transition: all 250ms ease-out;

Underlines the
transition: all 250ms ease-out; hyperlink when
a mouse hovers
text-decoration: underline; over it

TRANSITIONS 3.9 STYLE THE LOGO

The next step is to style the logo in the Top Menu. The logo is
used three times on the page (in the Top Menu, the Banner, and the Footer),
All major web browsers so you can encapsulate the logo font styles in its own class called “logo”.
use different names for the The small logo in the Top Menu is a hyperlink back to the home page,
so you will need to define both its normal and hover state.
“transition” property, so your
CSS style definitions must
include all three versions of the
“transition” instruction to ensure #topMenu .logo {
that the transition effect renders float: left; Places the logo
correctly on the browsers. When on the left of the
a browser is implementing the padding-top: 13px; “topLinks” element
CSS style definition, it will ignore
the instructions intended for font-size: 24px; Sets the font
size to 24px
other browsers and apply the
instructions it understands. A color: #333;
warning message about the
invalid CSS properties may
text-decoration: none;
appear, but these can safely } No underline on
be ignored. the logo hyperlink

#topMenu .logo:hover {
This will make the logo
color: #4392F1; appear blue when the
mouse hovers over it

YLES }
LOGO ST

.logo {
font-family: "Anton", cursive;
PET SHOP
PET SHOP }
The default font
for the logo SAVE
 WEB TECHNOLOGIES
Styling the web page 250 251
3.10 VIEW THE WEBSITE
Save the code and then refresh the page in the The favicon (see p.221)
browser. The Top Menu section will now be laid out with and page title appear
the small logo on the left and the hyperlinks on the right. in the browser tab

Pet Shop

file:///PetShop/index.html
The Top Menu
Free shipping appears as a
horizontal list
Styled logo in the Top
Menu section now PET SHOP Home About Shop Contact of hyperlinks
has a transition effect

3.11 STYLE THE BANNER

The next section to be styled is the Banner, which will
contain the name of the website and an image. First, set the styles
for the “banner” div by defining its width, height, and alignment. Link to the background
It should include a background image as well. image for the banner

#banner {
background-image: url("../images/banner.jpg");
background-repeat: no-repeat; The background
image should not
background-position: center top; repeat vertically
or horizontally
width: 100%;
Centre aligns the
text-align: center; contents of the banner

padding-top: 300px;
color: #333;
}

Hex code for Space between the top

dark grey text border of the banner
and the text inside

3.12 STYLE THE BANNER LOGO

Now you can add styles for the logo Selects the “logo”
appearing inside the Banner section. In the #banner .logo {
elements inside
HTML document, the logo appearing in the banner
the Banner section also has an <h1> tag. So margin-top: 20px;
this logo will receive style instructions from Space between
both “h1” and “logo” style definitions. } the top border of
the logo and the
element above it
STYLING THE INDIVIDUAL ELEMENTS

3.13 ADD STYLES TO THE HYPERLINK

The next step is to add styles for the “action” div and
the “Shop Now” hyperlink. This link style definition will also
contain the “transition” instructions to animate the change in
styles between the normal and mouse-over states.

#banner #action {
font-weight: bold;
width: 200px; Style definitions
for the div that
margin: 20px auto 0 auto; contains the hyperlink

#banner #action a {
-webkit-transition: all 250ms ease-out;
Three versions of the
-ms-transition: all 250ms ease-out; transition instruction

transition: all 250ms ease-out;

padding: 20px;
color: white;
text-decoration: none;
border-radius: 30px;
background-color: #4392F1; Hex code for
light blue
}

Transition effect
#banner #action a:hover { when a mouse
moves over
-webkit-transition: all 250ms ease-out; the hyperlink

-ms-transition: all 250ms ease-out;

transition: all 250ms ease-out;
background-color: #F46036;
padding: 20px 40px;
}

The horizontal padding will Hex code for the

increase to 40px when a mouse colour orange
hovers over the button SAVE
 WEB TECHNOLOGIES
Styling the web page 252 253
3.14 VIEW THE WEBSITE
Refresh and view the page in the
browser. You can now see the background Pet Shop
image in the Banner, and the animated
rollover effect on the “Shop Now” link. file:///PetShop/index.html

Free shipping

PET SHOP Home About Shop Contact

The banner background

image will be displayed
above the banner text

PET SHOP
The banner SHOP NOW
call-to-action button
with transition effect

Feature box styling are defined as classes and are applied to multiple
4 This section will add styles for the “feature elements on the web page. The class definitions
box” control, which splits the page into a left also allow alternating the position of the images
column and a right column. The styles for the control on the page.

4.1 DEFINE THE LEFT COLUMN 4.2 DEFINE THE RIGHT COLUMN
First, you will define the left column of the feature Add the code below to define the right
box. This will take up half of the space available. By default, column. This definition instructs the browser to
every new div occupies a new line. However, since this include a margin on the left of the space available,
element must float left, the next element (the right column) where the left column will sit.
will appear on the same line.
Selects all the elements that
Selects all the elements that have both the “feature” and
have both the “feature” and “rightColumn” classes
“leftColumn” classes

.feature .leftColumn { .feature .rightColumn {

width: 50%; The width of the margin-left: 50%;
left column is set
at 50% of the
float: left; width: 50%;
container’s width
text-align: center; text-align: center;
} }

Aligns the contents Aligns the contents

to the centre of the to the centre of the
left column right column
FEATURE BOX STYLING

4.3 STYLE THE NON-PICTURE

ELEMENTS .feature .leftColumn .text,
Now set styles to define the non-picture Selectors
side of the feature box. In HTML, you .feature .rightColumn .text { for the
used a div with class=“text” (see p.225) to “text” divs
in the left
indicate the non-picture elements. You padding: 80px 20px 20px 20px;
can now define the left and the right text and right
columns with the same definition. columns
min-height: 260px;
}

4.4 DEFINE THE NORMAL AND MOUSE-OVER STATE

Add this code to define the normal and mouse-over state
for the hyperlinks that appear in the “text” divs. Similar to the Shop Selectors for the <a> tags
Now button that you styled earlier, this will also be styled as a in the “text” div in the left
button that changes colour when the mouse hovers over it. and right columns
“ease-out” defines
the speed of the
transition effect
.feature .leftColumn .text a,
.feature .rightColumn .text a {
-webkit-transition: all 250ms ease-out;
-ms-transition: all 250ms ease-out; Transition effect when
a mouse moves off
transition: all 250ms ease-out; the hyperlink

padding: 20px;
background-color: #4392F1;
color: white;
text-decoration: none;
border-radius: 30px; Sets rounded corners
for the border of
} the hyperlink

.feature .leftColumn .text a:hover,

.feature .rightColumn .text a:hover {
-webkit-transition: all 250ms ease-out;
-ms-transition: all 250ms ease-out; Transition effect when
a mouse moves over
transition: all 250ms ease-out; the hyperlink

background-color: #F46036;
text-decoration: none; The text is not
underlined when
padding: 20px 40px; the mouse hovers
over the hyperlink
}
 WEB TECHNOLOGIES
Styling the web page 254 255
4.5 DEFINE THE HORIZONTAL RULE
You will also need to add a style definition .feature hr {
for the horizontal rule appearing in the feature box.
This rule will separate the heading of the column background-color: #333;
from the text below it.
height: 1px;
Sets the colour for the
horizontal rule to dark grey border: 0;
Sets the width of width: 50px;
the horizontal rule
}

4.6 DEFINE THE IMAGES

Selects all <img> tags inside
Now that you have styled the text
the “featureImage” div
columns, it is time to define how the images
in the “featureImage” div will be styled.
.featureImage img {
Resizes the image width to width: 500px;
500px. The height will
adjust automatically }

SAVE

4.7 VIEW THE STYLE DEFINITIONS

BROWSER TEST
Refresh the browser to see the new
style definitions being applied to the web The image will
page. All the feature boxes will now have appear in the New CSS features are constantly being
the correct styling, with images alternately right column with added to browsers. However, there is
appearing on the left and right. the correct width
no point using these features unless
you are sure that your website users
will be able to take advantage of them.
Pet Shop Old browsers will ignore modern CSS
instructions and the styling of the
file:///PetShop/index.html HTML document will not conform to
the expected layout. Fortunately, all
modern browsers accept CSS3, though
there may be small differences in the
LOVE FISH way they process some instructions.
THE WIDEST RANGE OF FISHES It is advisable always to test your web
page in several different browsers to
Indoor and outdoor, find the set of functionality that they
we’ve got them all!
all have in common.
CLICK FOR FISH

The call-to-action button will now be

styled, with transition effect
FEATURE BOX STYLING

4.8 ADD STYLE TO EMAIL HYPERLINK

In the “index.html” file the “feature” class is used not use the “feature” layout definitions to style the Contact
only to advertize the three product categories, but also for the Us section, which includes a hyperlink that opens a
Contact Us section appearing further down. In this step, you will new email in the user’s email program.

.feature .leftColumn .text a.emailLink,

Selects the “emailLink”
.feature .rightColumn .text a.emailLink { hyperlinks in both the
left and right columns
color: white;
text-decoration: none;
transition: none;
padding: 10px;
border: 0;
The “:hover” pseudo-class
background-color: #4392F1; selects the hyperlinks when
a mouse hovers over them
}
.feature .leftColumn .text a.emailLink:hover,
.feature .rightColumn .text a.emailLink:hover {
-webkit-transition: all 250ms ease-out;
-ms-transition: all 250ms ease-out;
transition: all 250ms ease-out;
background-color: #F46036;
}

Hex code for the

colour orange

4.9 DEFINE MIDDLE IMAGES

The next section that needs to be defined .middleImage {
are the images that sit in the middle of the page.
The “middleImage” div containers must align their text-align: center; Aligns the
contents to the centre of the div, to make them “middleImage”
appear in the middle of the page. The <img> tags } contents to
should also display the images with a consistent the centre
maximum width. of the page

Selects all <img> tags .middleImage img {

inside divs with the
“middleImage” class max-width: 1000px;
}
SAVE
 WEB TECHNOLOGIES
Styling a web page 256 257
4.10 VIEW THE IMAGES 4.11 CHECK THE IMAGE STYLING
Save the code and then refresh the browser You will notice that the other instances of the “feature”
in order to see the updated web page. The image will and “middleImage” divs are all styled correctly throughout the
now appear centre aligned on the page, just below page. This is because you defined those styles as classes, so
the feature box. they can be used multiple times on the same page.

Pet Shop Pet Shop

file:///PetShop/index.html file:///PetShop/index.html

LOVE FISH HAPPY DOGS

THE WIDEST RANGE OF FISHES EVERYTHING YOUR DOG NEEDS
Indoor and outdoor, Make sure your pooch
we’ve got them all! eats well and feels good with
our range of doggie treats.
CLICK FOR FISH
CLICK FOR DOGS

The “fishImage” element The “dogImage” element

will be centre aligned will be centre aligned

Styling the remaining elements

5 Now that you have defined the styles for the main elements
of the web page, you can continue adding style definitions for the
remaining sections. In the next few steps, you will style the scroll
button, the map, the subscribe section, and the footer.

5.1 STYLE THE

SCROLL BUTTON #scrollToTop {
Now you need to add style
definitions to the “Scroll to top” display: none; The button is
button. The button should have invisible when
50 per cent opacity in its normal state, opacity: .5; the page opens
and should display at 100 per cent
opacity when the mouse hovers over
it. The “Scroll to top” button should
background-color: #F46036; Sets the colour of the
button to orange
be set to invisible when the page
opens. The button will be activated padding: 0 20px;
in the third part of this project, using
JavaScript (see pp.292–95). color: white;
width: 26px;
Sets the size of the up-arrow
font-size: 40px; text in the button

line-height: 48px;
STYLING THE REMAINING ELEMENTS

position: fixed;
The button stays in right: 10px;
a fixed position in
the bottom-right bottom: 10px;
corner of the page
border: 1px solid white; A white border
around the orange
border-radius: 30px; button makes it
easier to see
}
The hover state is #scrollToTop:hover {
active when a
mouse moves opacity: 1;
over the button
-webkit-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
cursor: pointer; The cursor is
displayed as
} a pointer

5.2 STYLE THE CONTACT US SECTION

The next section of the page that needs
styling is Contact Us. The “feature” div has previously
.contactMap {
defined its two columns. The left column contains The map width
the text elements while the right has an embedded width: 100%;
will be 100%
map from Google Maps. You will need to add an of the space
instruction to format the map’s “iframe” element height: 400px;
available in the
correctly. Then, save the code and refresh the right column
browser to check if the section is displaying correctly. }
SAVE

Pet Shop

file:///PetShop/index.html

CONTACT US
TEL: 012-345-6789

EMAIL: [email protected] A dot on the Google

map shows the
Pet Shop exact location of
The email 80 Strand the address
call-to-action London
button, styled WC2R 0RL
in step 4.8
 WEB TECHNOLOGIES
Styling the web page 258 259
5.3 STYLE THE SUBSCRIBE SECTION
The next element to be styled is the Subscribe section. This will appear
below the Contact Us section on the web page. Add this code to set the style
definitions for the Subscribe panel and the heading appearing inside it.

#subscribe {
Hex code for light blue.
background-color: #4392F1;
Sets the background colour
of the Subscribe section
height: 160px;
padding-top: 40px; Distance between the
text and the top border
} of the Subscribe panel

#subscribe h2 {
margin: 15px 0 20px 0;
color: white; Sets the text
to white
font-size: 24px;
font-family: "Open Sans", sans-serif; Specifies the font used
for the “h2” headers
font-weight: bold;
}

5.4 STYLE THE INPUT FIELD

The Subscribe section has a text field
where users can enter their email address. Add
styles for this text input field to define its size and Ensures that
appearance, as well as the style of the placeholder only text fields
are selected file:///PetShop/index.html
text that will appear inside it.

#subscribe input[type=text] {
border: 0; No border around
SUBSCRIBE TO OUR
the email address
MAILING LIST
width: 250px; text input box

height: 28px; JOIN NOW

font-size: 14px;
padding: 0 10px; Adds space to
the sides of the
border-radius: 30px; text input box

}
STYLING THE REMAINING ELEMENTS

5.5 STYLE THE SUBSCRIBE BUTTON

Add the code below to define styles for the
“subscribe” <input> button and its hover state. The button
will implement a transition on the “background-color”
from dark blue to orange when a mouse moves over it,
and then back to dark blue when the mouse moves off it.

Selects the input button

in the “subscribe” div

#subscribe input[type=submit] {
border: 0;
width: 80px; Sets the button
width to 80px
height: 30px;
font-size: 14px;
background-color: #345995; Hex code for the
colour dark blue
color: white;
border-radius: 30px;
-webkit-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out; Transition
instructions
transition: all 500ms ease-out;
cursor: pointer; The cursor will be
displayed as a pointer
} when the mouse is
over the button

#subscribe input[type=submit]:hover {
background-color: #F46036; Hex code for orange
in the colour scheme
-webkit-transition: all 250ms ease-out;
-ms-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}

Repeat the transition

instructions for the
mouse-over effect
SAVE
 WEB TECHNOLOGIES
Styling the web page 260 261
5.6 VIEW THE WEBSITE
Save the code and refresh the browser to view
the updated web page. Ensure that the panel is appearing
below the Contact Us section and rendering correctly.

Pet Shop
The text is
aligned to the file:///PetShop/index.html
centre of the
left column CONTACT US
TEL: 012-345-6789

EMAIL: [email protected]

Pet Shop
80 Strand
London
WC2R 0RL The button with
A placeholder rounded borders
text hint inside and transition
SUBSCRIBE TO OUR MAILING LIST
the email text effect will be
input box Enter your email address Join Now displayed

5.7 STYLE THE FOOTER

You can now style the footer for the web
page. Start by adding styles for the “footer” div, #footer {
and then add styles for the unordered list and the
list items containing the links. background-color: #F46036;
Sets a fixed height: 80px;
height for the
Footer section }
#footer ul {
Does not show list-style-type: none;
bullet points in the
unordered list margin: 28px 0 0 0;
No space between padding: 0;
the list border and
the list items overflow: hidden;
Displays as an inline-block display: inline-block;
element to allow padding
and margin }

#footer li {
Places the list items float: left;
next to one another
from the left }
STYLING THE REMAINING ELEMENTS

5.8 ADD STYLES TO THE FOOTER HYPERLINKS

Next, you will need to add styles for the hyperlinks that
appear within the Footer section. When the mouse hovers over
them, the colour of the text will change from white to black.

Styles will be applied to all

anchor tags that are inside list
items within the “footer” div

#footer li a {
color: white; The footer
hyperlink text will
text-align: center; appear in white

padding: 20px;
text-decoration: none; The hyperlink text will
not be underlined
font-size: 18px;
-webkit-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}

#footer li a:hover {
color: #333; The text colour
of the footer
-webkit-transition: all 250ms linear; hyperlink will
change to
-ms-transition: all 250ms linear; dark grey

transition: all 250ms linear;

}

STORE FINDER FAQ

SHIPPING
 WEB TECHNOLOGIES
Styling the web page 262 263
5.9 STYLE THE COPYRIGHT SECTION
The last element to style is the Copyright section.
In this step you will add styles for the “copyright” div and the logo Aligns the “copyright”
it contains. Add this code and then refresh the browser to check contents to the centre
if the Footer and Copyright sections are displaying correctly. of the page

Selects the tag

#copyright {
with the id
“copyright”
text-align: center;
background-color: #345995;
color: white; The “copyright” text
will appear in white
height: 40px;
padding-top: 18px; Space between the
top border of the
font-size: 16px; “copyright” section
and its text
}
Selects the tag with
class “logo” inside the
#copyright .logo { tag with id “copyright”

Overrides the font-family: "Open Sans", sans-serif;

default style
definiton for font-weight: bold;
“logo” with a
sans-serif font }
SAVE

Pet Shop

file:///PetShop/index.html

SUBSCRIBE TO OUR MAILING LIST

Enter your email address Join Now

Store Finder Shipping FAQ

© 2020 PET SHOP

The copyright text appears in the

centre of the page with an HTML
entity for the copyright symbol
What is JavaScript?
JavaScript is one of the most popular modern programming
languages for the Web. It is an object-oriented language
that is used to enhance HTML pages by adding dynamic
and interactive elements to websites. Programs written
in JavaScript are called scripts.

Why JavaScript? a cross-platform run time environment like Node.js

JavaScript was invented to implement client-side (see p.284) to run scripts outside of the browser. This
behaviour in web browsers. Today, however, it is allows for a wide variety of server-side applications,
used in many kinds of software and server-side such as generating dynamic HTML pages and sending
web applications. For example, developers can use responses from a Node web server.

Using JavaScript online The program within a browser that executes a

All modern web browsers can read and run JavaScript script is called the JavaScript Engine. This engine
when rendering an HTML page. JavaScript code is is an interpreter that first reads the script and
interpreted and run by the browser in real time, and converts it into machine code, and then executes
does not need to be compiled before it is executed. the machine code.

On an HTML page
To use JavaScript on an HTML page, simply <script type="text/javascript"> The JavaScript
enclose the script in a <script> tag. This tag instruction
must be inside
can be placed either within the <head> tag or var x = "hello world"; a <script> tag
the <body> tag, depending on when the script
is run – before, during, or after the HTML. </script>

The closing </script> tag

On an external file
JavaScript can also be placed in an external file <script src="customScript.js"></script>
and referenced with an “src” attribute in the
<script> tag. The external JavaScript file does
not need to include the <script> tag as this The “src” attribute
has already been declared in the calling file. points to an external
JavaScript file

CUP OF MOCHA INTERACTION

AND FEEDBACK
The language currently known as JavaScript was created
by Brendan Eich for the Netscape browser. It was called
IMPROVES USER
Mocha during the development stage. When it was EXPERIENCE
released, Netscape changed the name of the scripting
language to LiveScript, renaming it JavaScript within AND PROMOTES
the first year. EFFECTIVE NAVIGATION
THROUGH A WEBSITE
 WEB TECHNOLOGIES
What is JavaScript? 264 265
Features of JavaScript employed in customized scripts. Even though
JavaScript allows programmers to perform calculations, JavaScript is a flexible language, there are limits
validate user input, and manipulate and inject HTML to what the JavaScript Engine can do in the
elements on the page. It also has a vast library of browser. For example, it cannot write files to the
advanced features that can be easily imported and hard drive or run programs outside the browser.

Scripting language Web browser

Dedicated code editor
JavaScript is a dynamic While all modern browsers can
JavaScript can be written into
language that is interpreted execute JavaScript, each browser
any standard text file, but it is
each time it is run. When a implements the language slightly
much easier to use a dedicated
user requests an HTML page, differently. This is why
code editor to work with it.
the HTML page and its programmers use libraries such
There are several code editors
JavaScript code is sent to a as JQuery (see p.284) to code
(see pp.208–209) that can
browser where the JavaScript instructions that will be correctly
be used to do this.
is processed and executed. implemented on every browser.

AJAX Document Object Model Community sharing

AJAX, or Asynchronous JavaScript The Document Object Model Programmers can share their
and XML, can be used to do (DOM) is a programming interface projects through online
partial updates of the content in for HTML documents. It structures communities or by adding to
the browser. This prevents the a web page so that programmers JavaScript’s existing libraries.
browser from having to do a full can easily access and manipulate There are several code-sharing
page load, allowing the user to elements on the page. JavaScript websites available online,
stay in the same document while can add, edit, or delete elements in such as Dabblet, JSFiddle,
sending requests and receiving an HTML document by interacting Codeshare, and Github Gist.
responses from the server. with the DOM.
Variables and
data types
Variables are containers that store data. When JavaScript
code runs, these variables can be compared and manipulated.
A variable can contain different types of data, and logical
operations (see pp.270–71) should only be performed with
variables of the same data type.

Primitive data types

A primitive data type is a simple data value that is not an
object or a method. There are three main primitive data
types in JavaScript – numbers, Booleans, and strings. Data
types do not need to be explicitly stated at the time of
declaring a variable (see right); JavaScript automatically
infers them from the code.

GOLD SILVER
$25 $15
0 0

Booleans
Similar to Scratch and Python, Boolean variables
Numbers in JavaScript also contain only two possible
Unlike other programming languages, JavaScript does values – true or false. As the result of every
not distinguish between integers (whole numbers logical operation is a Boolean value, these
without a decimal) and floating point numbers variables determine the flow of a program.
(numbers with a decimal). All numbers in JavaScript
are treated as floating point numbers.
var isThisGold = true
var price = 250;
Boolean values do
not have quotation
Number values do marks around them
not have quotation
marks around them
 WEB TECHNOLOGIES
Variables and data types 266 267
Declaring variables Declares the variable lastName
var lastName = "Smith";
It is important to declare and and sets its value to Smith
initialize a variable before var fullName = firstName + " " + lastName;
it can be used in a script.
Initialization means to assign var firstName = "John";
a value to the variable. It allows console.log(fullName);
JavaScript to determine the data
type that the variable contains Incorrect declaration The variable
In this example, the variable firstName is firstName is used
and access its value. A variable
used before it is declared in the code. Since its before it is declared
should only be declared once value is unclear at the time of use, the output
in a program. displayed will be “undefined Smith”.

string.slice() string.split()
string.length Extracts part of a
Returns the number Divides a string into
string. It takes two an array of substrings.
of characters in parameters, the start
a string, starting from For example, if “a” is the
and end index positions input parameter, new
1. It can be used (beginning at 0), and
by adding .length substrings will be formed
returns the string at every instance of
after the name segment between
of the string. string. string. the letter “a”.
indexOf() them. substr()
Finds the position of Returns a string
a string segment within segment where the
another string. It gives the first input parameter is
index position of the first the start position and the
character of the second is the length of
segment, starting the segment.
from 0.

Strings
Strings are data types that can store a series of characters var myString = "Hello world";
or numbers. They have a number of useful properties and
methods that are described above. String values always have
quotation marks around them

Concatenating strings
As in other programming var myBook = {
languages, strings in
JavaScript can be joined title: "Great Expectations", title is a
together by using the string value
plus (+) symbol. However, format: "paperback", Template literals are enclosed
a better way to join, or within back-tick characters
concatenate, strings is by }; instead of quotation marks
using the template literal
notation ( ` ). This format var myBookDetails = `Title: ${myBook.title}
is easier to read and
maintain than using Format: ${myBook.format}`;
the plus symbol. Template literals can contain
placeholders, indicated by the
console.log(myBookDetails); dollar sign and curly brackets
NON-PRIMITIVE DATA TYPES

Non-primitive data types

Primitive data types in JavaScript can be grouped together to form
composite data types. These non-primitive data types help organize
variables into meaningful data structures that facilitate effective
processing of the data. They are also called “reference variables”,
A JavaScript array value
because they give the location of where the data is stored. is always surrounded
by square brackets
Arrays
An array is a single variable that
contains a list of values. These may
be strings, numbers, and even objects. var jewellery = ["Locket","Earring","Ring"];
Each array item can be accessed by
its index position. Similar to strings,
the index of the first item in an array This array contains Index value of
is 0, the second is 1, and so on. three strings Earring is 1

Sorting items in an array

Arrays contain a method called sort that
arranges the items of an array in alphabetical
order. This method, however, does not order
numbers correctly. To sort numbers, you need to
add a comparison function to the sort method. A B C
For example, array.sort(compareFunction)

1 2 3

Array length
The length of an array returns the
number of items in the array. As in
strings, the length of an array also
starts from 1, and not from 0.

1 2 3

Array index Adding items to an Array

The value of an item in an array can be Items can be added to
obtained by its index, using the syntax an existing array using the
value = array[index]. To update push method. Though it
an array item by its index use the is possible to add an item to
syntax array[index] = newValue an array by directly calling
the array index, it is easier
to use the push method.

Looping through an Array

SPREAD SYNTAX It is possible to access all the items
in an array by using a for loop
(see p.274). The loop counter
The push method adds items to an array one at a time. To loops over every item in
add all the items in one go, use the spread syntax (...). Not the array, starting from 0
only does this allow multiple new items to be added all at to the number of items in
once, it is also possible to decide whether these should be the array.
added before or after the existing array items.
 WEB TECHNOLOGIES
Variables and data types 268 269
VARIABLE SCOPE
Declares firstName firstName and lastName
The scope of a variable describes
with a global scope are available inside the
where in the code the variable can be function because they
accessed from. JavaScript has only two have global scope
kinds of scope – local variables and
global variables. Local variables are var firstName = "John";
declared in a function and can only
be accessed from within that function. var lastName = "Smith";
Global variables are declared outside
a function and have a global scope. function getFullName() {
They can be accessed from anywhere
var result = firstName +
in the HTML document.
" " + lastName;
return result;
Global variable
In this example, the variable firstName }
is declared before the function and has
global scope. It can be accessed from console.log(getFullName());
inside a function as well as outside of it.

JavaScript objects
A JavaScript object is a variable that has a set of properties
made up of primitive data types. This way of packaging data
is known as the Json data format. This format has become
the primary format for packaging and transmitting data in
web applications as it is easy to use and process. Each property is
separated by a comma

The list of properties

is surrounded by
var person =
curly brackets
{
firstName: "John",
lastName: "Smith", The property key
and value are
age: 39, separated by a colon

hasDrivingLicense: true,

Json object with mixed property types education: [

In this example, the Json object contains
properties that have different data types. "Primary School",
The data type of each property is set
when the value is assigned to the variable. "High School", If the value is a
string, it must be
"BA Degree" surrounded by
quotation marks
] If the value is an array,
it must be surrounded
} by square brackets
Logic and
branching
Logic is concerned with determining whether a statement is
true or false. JavaScript uses logical statements to determine
if a variable satisfies a certain condition and then makes
decisions based on whether the statement is true or false.

Boolean values
A Boolean data type only has two Logical operators
possible values: true or false. This Logical operators combine multiple boolean values into a
single Boolean result. The most common logical operators are
means that a logical statement will “And”, “Or”, and “Not”. The “And” operator (&&) demands that
always return one of the two Boolean both Boolean values are true. The “Or” operator (||) demands
values. These values allow an algorithm that any of the Boolean values are true. The “Not” operator (!)
swaps the Boolean value, so true becomes false and false
to execute a particular branch of code to becomes true. For example, “variable1 && !variable2” means,
produce a desired outcome. “Is variable1 true And variable2 false? If so return true.”

COMPARING VALUES
Comparison operators are used in
conditional statements. They compare
different values to decide if a statement
is true or false.

COMPARISON OPERATORS
Symbol Meaning

== is equal value

is equal value and

=== data type

!= is not equal value

is not equal value

!== or data type

> is greater than

is greater than
>= or equal to

< is less than AND OR

Burger AND fries. Both the Meal1 OR Meal2. One of
is less than or statements must be true for the statements must be true
<= equal to the logical statement to for the logical statement to
return a true value. return a true value.
 WEB TECHNOLOGIES
Logic and branching 270 271
Branching in JavaScript
if (amount >= 30) {
The most commonly used conditional statement
is the if-then branching statement. This statement payment = "Card";
instructs the program to execute a block of code
only if a logical condition is true. A program (or }
algorithm) is really a sequence of conditional logical
if-then If the amount is
steps that are designed to transform a given input
The if statement is used to specify greater than or
into a desired output. More steps can be added a block of JavaScript code to be equal to 30, it is
to the conditional logic by using if-then-else and executed if a condition is true. paid by card
else-if branching statements.

if (amount >= 30) {

payment = "Card";
} else {
payment = "Cash";
}

if-then-else If the amount is

The else statement tells the less than 30, it
JavaScript engine to perform an is paid in cash
action if the condition is false.

SWITCH
A better way to express complex conditional logic
is to use the switch statement. A single switch
statement can replace multiple else-if statements.
Each possible state is represented by a case, and if
NOT none of the cases match the condition statement,
Burger and NOT onion or then a default code block will execute. Each code
tomato. Reverses the logical block is separated by a break statement.
state, so true becomes false
and false becomes true.
Input and output
One of the best features of the Web is that it is interactive.
Using JavaScript, it is possible to program a web page to
output information to the user in different forms, as well
as to accept input from the user in various ways.

An alert box can be created The value of the variable

inside a <script> tag to display in the alert box <div id="name">
The document object can be
<script> accessed inside a <script> tag

<script> The value of

var name = "Alice"; the variable
var name = "Alice"; to write to
document.write(name); the screen
alert(name);
</script>
</script>
</div>
The alert method The document.write method
displays an alert box inserts text into the HTML

Show a modal alert box Insert data into the HTML output
An alert box is a modal window that opens above the This allows programmers to execute JavaScript and
normal browser window with a message. Users cannot output some data into the HTML at the exact location
continue until they dismiss the alert box. where they want the output to appear on screen.

User input
There are several ways to capture user input and work with the data
in JavaScript. The choice of input method depends on the degree
of urgency involved in entering the data, whether the input fields
need to conform to the visual style of the page, or whether the user
must answer the questions in a specific order.

Prompt
A prompt is a modal message
box that asks the user for a
single line of input. The user
must answer the question This page says
before doing anything else Please enter your first name
in the browser. Prompts are
helpful in cases where the
user must answer questions
urgently or in a specific order. Cancel OK
 WEB TECHNOLOGIES
Input and output 272 273
Output data on screen alert or question should be displayed in
There are four different ways for JavaScript to a modal window because users must
display data back to the screen. The choice of method acknowledge it before they can proceed.
to employ is based on the type of information being Debugging information, on the other hand,
displayed and whether the output is meant for the is intended for the developer and should be
developer or the end user. For example, an urgent displayed in the JavaScript console log.

The console log can The value of the

be accessed inside variable to display in
a <script> tag the console log
<div id="name"></div>
The value of the
<script> variable to insert
<script> into the HTML
var name = "Alice";
var name = "Alice";
document.getElementById("name").
console.log(name);
innerHTML = name;
</script>
</script>
The console.log method Set the innerHTML property of the
adds a message to the console HTML element to insert the text

Show data in the console Insert data into an HTML element

Information can be output to the JavaScript console log. Allows output to be calculated during the execution
These log messages are very useful when debugging to of a script, and then inserted into the correct location
see what is happening during the execution of the code. via a placeholder HTML element.

Confirmation box
A confirmation box is a modal
dialogue box that is used to
verify a user’s intention. This page says
Users are forced to interact
with the confirmation box Are you enjoying JavaScript?
before they can return to
the main page.
Cancel OK

HTML Input
An HTML <form> tag
(see p.212) is usually used
to send information entered First Name: John
into the input fields back Last Name: Smith
to the server. However, it
is also possible to use this Click me This page says
data in JavaScript code. For
example, using HTML input Hello John Smith
controls to get a user’s first
name and last name. Cancel OK
For loop
for (let loopCounter = 0; loopCounter < 5;
A for loop will repeat a
block of code and each loopCounter++) {
time increment a counter The logical
until the counter no longer console.log(loopCounter); condition appears
before the loop
satisfies a given condition. }
With each increment, the
counter can increase or For loop with positive increments
decrease, allowing the The loopCounter is increased by Displays the value of the
1 each time the loop repeats the block loopCounter variable
loop to run from top to of code. The loop will stop when in the console log
bottom, or vice versa. loopCounter equals 5.

While loop
A while loop will repeat a block of code until a condition Using while loops
returns false. This is similar to the do while loop, This loop is ideal when an instruction
must repeat an unknown number of times.
except that the condition runs before the block of code, However, depending on the condition, the
so it might not run the first time. loop may not qualify to execute even once.

var numberOfDaysCounter = 0;
var numberOfDays = 3;
var daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday", "Sunday"];
while (numberOfDaysCounter < numberOfDays) { The logical condition
defines when the loop is
console.log(daysOfWeek[numberOfDaysCounter]); executed. Here it will run
if the counter is smaller
numberOfDaysCounter++; than the number of days

Loops in JavaScript
In programming, instructions may often need to be repeated a
certain number of times or until a condition has been met. Loops
allow us to control how many times a set of instructions should
be repeated. There are several different kinds of loops, and each
loop has it own way of knowing when to stop.
For in loop
A for in loop repeats a block of code for each property Looping through arrays
of an object. Inside the loop instruction, a variable is This loop is perfect for processing
arrays of data. The code block will
declared that will hold the value of the property as it process each item in the array and
is being processed by the loop. stop when there are no more items.

var myBook = { The myBook variable has three

properties: name, numberOfPages,
name: "Great Expectations", and format

numberOfPages: 250,
The format property has
format: "paperback" a string value “paperback”

}
The property variable
for (let property in myBook) { represents the current property
being processed by the loop
console.log(` ${property} ${myBook[property]}`)
}

Do while loop
Similar to a while loop, a do while loop will also repeat a Using do while loops
block of code until a condition returns false. However, the This loop is used when the block
of code must repeat an unknown
condition appears after the block of code and will only be number of times, but it must be
checked after the code block has run the first time. executed at least once.

var numberOfDaysCounter = 0;
The condition may depend
var numberOfDays = 3; on the state of variables
outside of the loop
var daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday", "Sunday"];
do {
console.log(daysOfWeek[numberOfDaysCounter]);
The block of code
numberOfDaysCounter++; will run before the
condition is checked
} while (numberOfDaysCounter < numberOfDays)
NESTED LOOPS

Nested loops Using nested loops

Loops can be nested, or contained, within other In this example, arrays represent the days of the week
loops. This allows us to iterate sequentially and temperature readings taken during that day.
Nested loops are used to find the highest temperature.
through all the items in a list or multidimensional The outer loop represents the days of the week, while
array (an array containing one or more arrays). the inner loop represents the data for each day.

var daysAndTemperature = [
["Monday", 26,21,24],
Each array has a different
["Tuesday", 24], number of items

["Wednesday", 28,21],
The outerCounter loop
]; iterates through each day

var maxTemperature = 0;
for (let outerCounter = 0; outerCounter < daysAndTemperature.
length; outerCounter++) {
for (let innerCounter = 0; innerCounter < daysAndTemperature
[outerCounter].length; innerCounter++) {
var innerValue = daysAndTemperature[outerCounter]
[innerCounter];
innerValue will represent each array item inside
if (isNaN(innerValue)) { daysAndTemperature[outerCounter]

continue; If innerValue is not a number the The innerCounter

code jumps to, the next iteration loop iterates through
} else { of the innerCounter loop the data for each day

if (maxTemperature < innerValue) {

maxTemperature = innerValue;
} This variable will hold the highest
value found in the array items
}
}
}
console.log(`Max Temperature ${maxTemperature}`);

Displays the value of the highest

temperature in the console log
 WEB TECHNOLOGIES
Loops in JavaScript 276 277
Escaping loops required, you can use the continue
Sometimes the current iteration of the loop is not command to stop the current iteration of
worth running, or programmers may have already the loop and begin the next iteration. The
found the answer they were looking for. To avoid break command can be used to stop
wasting time processing loops that are not running the loop altogether.

Break
The break statement var days = ["Monday", "Tuesday", "Wednesday", "Thursday"];
tells the JavaScript
Engine to stop running var whenIsWednesday = function (days) { This function will return
the loop and jump the index of the array item that
matches the string Wednesday
to the next instruction let result = null;
after the loop. This
is useful as once the for (let i = 0; i < 7; i++) { Each time the loop iterates, the
loop has found what i counter will increase by 1
it is looking for, it can if (days[i] === "Wednesday") {
move on with the rest Checks if the value of the
of the program.
result = i + 1; array item is equivalent to
the string Wednesday
break; Array indexes always start from
0, so often you need to add 1 to
} get a “human friendly” result

} Returns the value of the

result variable after
return result; the loop has been completed

};
console.log(`Wednesday is day ${whenIsWednesday(days)}`);

Displays the result of the

function in the console log;
in this case the result is
Wednesday is day 3

Continue
This statement tells for (let i = 0; i < 7; i++) {
a loop to stop the
current iteration and if (days[i] !== "Wednesday") {
start running the next The whenIsWednesday
iteration. This is useful continue; function using continue
when you know that rather than break
the current iteration }
does not need to be
executed, and you result = i + 1;
can carry on with the
next iteration through
the loop.
Functions in
JavaScript
A function is a block of instructions that performs a task. The
code inside the function usually only executes when the function
is called. To use a function, it must first be defined somewhere
in the scope (local or global) from which it needs to be called. Input parameters
are declared
in parentheses.
There are none
in this example

Declaring functions
var firstName = "John";
A function is declared by providing a
name, a list of input parameters, and a function getFirstName() {
block of code enclosed in curly brackets. Name of the
A value can be returned by the function
function return firstName;
by using the “return” statement. } Code to be
executed
Outputs the result of console.log(getFirstName());
the getFirstName()
function to the console log
Simple function definition
Once a function has been defined,
it can be called many times from
elsewhere in the code.

Function statement vs function expression

In JavaScript, a function will behave differently depending on
how it was declared. Function statements can be called before
the function has been declared, while function expressions Input parameters for the
function getFullName()
must be declared before they can be used.

Function statement
A function statement function getFullName(firstName, lastName) {
begins with the word
“function” followed by return `${firstName} ${lastName}`;
the function name, the
input parameters, and } The template literal notation
then the code block in `${variable}` returns a
curly brackets. console.log(getFullName("John","Smith")); string with the variable value
embedded in place

Function expression
A function expression var fullName = function getFullName(firstName, lastName) {
begins with a variable
declaration and then return `${firstName} ${lastName}`;
assigns a function to
the variable. } Variable declaration

console.log(fullName("John","Smith"));
 WEB TECHNOLOGIES
Functions in JavaScript 278 279
Nested functions A function expression A nested function expression
declaration declared inside the car function
It is also possible to nest a
function within another function.
The inner function, however,
var car = function (carName) {
can only be called by its outer var getCarName = function () {
function. The inner function can
use variables from the outer return carName;
function, but the outer function }
cannot use the variables of the
inner function. return getCarName();
}
Why use nested functions?
Nested functions are only accessible from console.log(car("Toyota"));
inside the parent function. This means
that the inner function contains the scope The nested function getCarName() can access the
of the outer function. variable carName from the parent car function

Self-executing functions
Normally a function needs to be called in order
to execute its code. However, a function that is
surrounded by a self-executing function will
run as soon as it is declared. Self-executing
functions are often used to initialize the
JavaScript application by declaring a global
scope variable counter.

(function getFullName() {
var firstName = "John";
These variables are only
var lastName = "Smith"; accessible within the
self-executing function
function fullName() {
return firstName + " " + lastName;
}
console.log(fullName());
})();

Using self-executing functions

Variables and functions declared in a self-executing
function are only available within that function. In
this example, the nested function fullName() can
access the variables firstName and lastName
from the parent function getFullName().
JavaScript debugging
Programmers spend a lot of time diagnosing and remedying errors and
omissions in their code. Debugging slows down the JavaScript execution
and shows how data is modified line by line. Since JavaScript is
interpreted at run time and executed inside the browser, debugging
is performed with tools built in to the browser.

Errors in JavaScript inside the Console tab. Every Error object has
In JavaScript an error is detected or thrown when a two properties, a “name” and a “message”.
program tries to perform an unexpected or forbidden The name indicates the type of error, while the
action. JavaScript uses an Error object to provide message provides further details about the error,
information about the unexpected event. JavaScript such as the location in the JavaScript file where
errors can be viewed in a browser’s Developer Tools, the error was thrown.

SyntaxError
An error in the way the
code is written causes a RangeError
syntax error. This error occurs TypeError When the code attempts
while the JavaScript Engine This error occurs when the to use a number that is
is interpreting the code wrong data type is used. outside the range of possible
at run time. For example, applying the values, JavaScript detects
string.substring method to a RangeError.
a variable that is a number.

URIError
Some alphanumeric
characters are not allowed
to be used in a url. EvalError
A URIError is thrown This error occurs when
when there is a problem there is a problem with
encoding or decoding a URI the eval() function. Newer
because of the use of a versions of JavaScript do
reserved character. not throw this error.
ReferenceError
This error occurs when
the code refers to a
variable that either does
not exist or is not in scope
(see p.269) for the
executing code.
 WEB TECHNOLOGIES
JavaScript debugging 280 281
Developer tools
All modern browsers contain a set of Developer Tools elements in the browser. To open the Developer
to help programmers work with HTML, CSS, and Tools for the Google Chrome browser, press
JavaScript. The Developer Tools contain functionality Command+Option+I (Mac) or Control+Shift+I
to debug JavaScript and view the state of HTML (Windows, Linux).

The Console JavaScript debugger Scope

Web developers can output messages to the The JavaScript debugger can be In the “Sources” tab, the
console log to make sure their code is executing found under the Sources tab. The window on the right contains
as expected. The “Console” tab contains two areas: debugger makes it possible to step the Scope (see p.269). The local
• Console Output Log: Displays system and user through the code line by line to see and global sections under this
messages from the JavaScript execution. what is happening to the variables show the variables that are
• Console Command Line Interface: Accepts as the code executes. On the left is defined in the current scope.
any JavaScript instructions and executes a list of all the source files used by The Scope pane is only
them immediately. the HTML document. Select the file populated with variables when
to debug from this list. the script is being debugged.

Console Sources
Breakpoints
The JavaScript Engine pauses the execution of code when
it hits a breakpoint. This allows programmers to examine it.
The execution can proceed in one of the following ways:
• Resume Script Execution: Resumes execution until the
program hits another breakpoint or the program ends.
• Step over: Executes the next line of code in a single step and
then pauses on the following line. It steps over a function
without debugging the individual steps of the function.
• Step into: Executes the next line of code and then pauses
on the following line. It will step into a function line by line. Scope
• Step out: Executes the remaining code in the current Breakpoints
function, and pauses when run time returns to the line
of code, after the function was called.
GOOGLE CHROME DEVELOPER TOOLS

Error handling
try {
In JavaScript, the try...catch statement
allows programmers to handle errors in noSuchCommand(); This function
the code. Normally program execution does not exist

stops when an error is thrown by the }

JavaScript Engine. However, if the code catch (err) { The code jumps to the catch block instead
of stopping the program execution
is wrapped in a try block, the execution
will jump to the catch block if an exception console.error(err.message);
is thrown, and the program will continue
}
as normal. It is also possible to manually
raise an error using the “throw” statement. console.log("Script continues to
run after the exception");
The error message is
displayed in the console TRY...CATCH STATEMENT

The throw operator throw("Oops there was an error");

generates an error
THROW STATEMENT
Object-oriented
Properties
Type
Sensor

JavaScript
Methods
Sense()
Move()
ROBOT CLASS

It is common in programming to create many

Class inheritance
objects of the same type. Object-oriented In JavaScript, an object can be declared
as an instance of the class, and it will inherit
programming encapsulates properties and all the properties and methods belonging
methods into classes. Functionality can be to that class. Here, the properties and
methods for the class Robot can be
reused by creating new child classes. inherited by each of its child objects.

Prototypes
let parentObject = function() {
Every JavaScript object Creates a new
comes with a built-in this.title = "123"; parent object
variable called a prototype. Creates a new child object as an
Any properties or functions } instance of the parent object
added to the prototype let childObject = new parentObject();
object will be accessible to Sets the child object’s
a child object. A child object childObject.title = "ABC"; title property

is created as an instance of
parentObject.prototype.getTitle = function(){
the parent object using the
keyword “new”. return this.title;
Adds a new method to the
} parent object’s prototype
Calls the method in the parent console.log(childObject.getTitle());
object’s prototype from the
child object, and returns the child
object’s “title” property, ABC

Functions
function Book(title, numberOfPages) {
Just as in prototypes, an
object can be declared this.title = title;
as an instance of a function
with the new command. this.numberOfPages = numberOfPages;
This command acts as a };
constructor (a method used
for initializing the properties let JaneEyre = new Book("Jane Eyre", 200)
of the class). The child object
console.log(JaneEyre.title); Instantiates
inherits all the properties the new book
and methods defined in Properties and methods
the function. of the function
 WEB TECHNOLOGIES
Object-oriented JavaScript 282 283
Defining objects
in JavaScript
JavaScript is a prototype-based
language, which means that
properties and methods can be
inherited via the “prototype”
property of the object. This differs
to the way that other object-oriented
languages, such as Python,
construct classes (see pp.156–57).
CHILD OBJECT CHILD OBJECT
There are three ways to define and
Properties Methods Properties Methods
instantiate a JavaScript object in
Type: Humanoid Sense() Type: Industrial Sense()
an object-oriented way: prototypes, Sensor: Temperature Move() Sensor: Light Move()
functions, and classes.

Classes is instantiated with the new command, while

A JavaScript class is a special kind of function that getters and setters define how a property should
contains a constructor method and the getter and setter be read and written. Similar to functions, classes
methods. The constructor method runs when the object can be defined in the ways shown below.

Class declaration
A class can be class Book {
declared with the
“class” keyword. constructor(title, numberOfPages, format) {
The constructor
method takes the this.title = title;
input parameters Defines the
necessary to initialize this.numberOfPages = numberOfPages; properties and
the object properties. methods of
the class Book
this.format = format;
}
}
Calls the “title” let JaneEyre = new Book("Jane Eyre", 200, "Paperback")
property of
the object console.log(JaneEyre.title);

Class assigned to
the variable Book

Class expression
A class can also be let Book = class {
assigned to a variable
that can be passed constructor(title, numberOfPages, format) {
around and returned
by a function. this.title = title;
Libraries and
frameworks
JavaScript makes extensive use of libraries of prewritten
functionality that can be called in the code to make
programming easier and faster. Frameworks on the
other hand provide a standard way of programming,
by calling and using the code as needed.

Types of libraries and frameworks

There are various JavaScript libraries to help with all common
programming tasks. For the user interface, there are tools for
responsive layouts, manipulating HTML elements, and managing
graphics on screen. For data processing, there are libraries to keep
data synchronized, to validate user input, and to work with maths,
date, time, and currencies. There are even comprehensive testing
frameworks to ensure that code runs as expected in the future.

JQuery
JQuery is a framework that
contains many useful tools, such
as animation, event handling, and
AJAX (see p.265). It takes complex
JavaScript code and wraps it into
simpler methods that can be
called with a single line of code.
NODE.JS AND NPM
Node.js is a run time environment that is used
to create web server and API applications in
JavaScript. It has a large library of JavaScript files
that perform all the common tasks on a web
server, such as sending requests to a computer’s
file system and returning the content to a client ReactJS
once the file system has read and processed the This library is used for building interactive
user interfaces (UIs). It allows programmers
requests. The JavaScript files that define the to create complex UIs from small pieces of
Node.js environment are interpreted by the code, called “components”. ReactJS uses this
Google JavaScript Engine outside of the browser. component model to maintain state and
Node Package Manager (NPM) is a package data binding in single-page apps.
manager for programs written in JavaScript. It
contains a database of both free and paid-for
applications. You need to install Node.js before
using NPM.
 WEB TECHNOLOGIES
Libraries and frameworks 284 285

RequireJS
This library manages the
loading of JavaScript files and
TypeScript modules. It ensures that the
TypeScript is a scripting language that scripts are loaded in the correct
is used to export simple JavaScript order and are available to other
files that can be run inside the modules that depend on them.
browser. It offers support for the
latest and evolving JavaScript features
to help build powerful components.

Angular Moment.js
This framework is used for building This library makes it easy to work with
dynamic single-page apps. It can dates and time in JavaScript. It helps parse,
implement complex requirements of an manipulate, validate, and display date and
app, such as data binding and navigating time on screen. Moment.js works both in
through “views” and animations. Angular the browser and in Node.js (see opposite).
provides specific guidelines on how to
structure and build apps.

MathJS Bootstrap
MathJS is a library that features extensive This library contains many useful graphical
tools for working with maths. It supports elements and grid layout tools, which are
fractions, matrices, complex numbers, used to create visually appealing websites that
calculus, etc. It is compatible with can scale to fit screens of any size. Bootstrap is
JavaScript’s built-in Math library, a combination of HTML, CSS, and JavaScript.
and runs on any JavaScript engine. When applied to a page, it creates an
attractive graphic user interface.
Graphic user
interfaces
A web page is a graphic user interface (GUI) through which a user
navigates a website. HTML and CSS provide the basis for the graphic
design, while JavaScript adds custom logic and business rules to the
elements on the page to improve the quality of the interaction.

Working with graphics in JavaScript user interaction. The <canvas> HTML element
In an HTML document, <img/> tags are used to allows JavaScript to draw graphics directly to the
display image files and <svg> tags are used to display screen. JavaScript also has an extensive library of
vector images. JavaScript can be used to modify the frameworks (see pp.284–85) that can be imported and
properties of these graphic elements in response to employed to produce complex graphic applications.

Scalable Vector Graphics (SVG)

SVG is a format that describes two-dimensional
graphics in code. These graphics are then drawn by the
browser on the screen. SVGs have a small file size and
can be scaled to any size without losing quality. They
can be drawn and exported from graphic softwares,
such as Adobe Illustrator or Gimp. Graphics in SVG can
also be styled with CSS and indexed by search engines.

Draw a company logo in SVG

In this example, you can draw a rectangle shape for the
background using the <rect> tag. The <text> tag can
be used to draw the logo text. You can modify the final Draws a red-coloured rectangle
drawing with the style attributes. with a grey border

<svg width="200" height="100">

<rect style="stroke:grey;stroke-width:10px;fill:red;"
x="0" y="0" height="100" width="200" />
<text fill="white" font-size="30" font-family="Verdana" x="20"
y="60">SVG LOGO</text>
</svg>
The closing </svg> tag Draws the logo text in Uses CSS style attributes
front of the rectangle to define SVG elements
 WEB TECHNOLOGIES
Graphic user interfaces 286 287
HTML Canvas
The <canvas> element defines a space
on the web page where graphics can be
created using JavaScript. This space is
a two-dimensional grid onto which
JavaScript can draw lines, shapes, and text.
The grid coordinates (0, 0) are measured
from the upper left-hand corner.

Using HTML Canvas

HTML Canvas can be styled using CSS and then
controlled with JavaScript. It can be used to create
complex graphics that are used in gaming applications.

Graphics libraries
JavaScript has several built-in graphic libraries that make
it easier to work with complex graphics on the Web. Each
library has a specific purpose, such as converting numeric
data into graphs, representing statistical data as infographics,
or mapping a virtual world in a computer game.

2018 2019

A220
PEOPLE

A300

A318

A B C A330
CARRIER AIRBUS

D3.js Chart.js
Data-Driven Documents or D3.js is used to This library allows the programmer to add graphs
create colourful, animated, and interactive and charts to a Web document. It is an open-source
representations of data. It is brilliant for library that works well on tablets and mobile phones.
drawing graphs and organizing data in a Bar charts, Doughnut, Line charts, and Area charts
structural manner. are some of the core charts in Chart.js.
Animating the web page
JavaScript is used to extend the functionality of a website
and make it more dynamic. Here it will allow you to add
intelligent and interactive behaviours to the existing
HTML framework, completing the web page project.

What the program does Interactive website

In this part of the project, JavaScript is added to the structured and The web page will now have interactive
elements. The promo bar on top will cycle
styled web page created in Styling a web page (see pp.242–63). through four messages, and the scroll button
The functionalities added in this part of the project will allow the will be visible at the end of the web page.
web page to handle customized user interactions. It will scroll up to the top when clicked.

START
Pet Shop

file:///PetShop/index.html

Same day dispatch

PET SHOP Home About Shop Contact

Add JavaScript
to the HTML
elements

PET SHOP
SHOP NOW
Check that the
web page is
interactive

LOVE FISH
THE WIDEST RANGE OF FISHES

Indoor and outdoor,

we’ve got them all!

END CLICK FOR FISH

PROGRAM DESIGN
 WEB TECHNOLOGIES
Animating the web page 288 289
YOU WILL LEARN WHERE THIS IS USED
❯ How to create JavaScript files Time: JavaScript is used in almost all websites. It helps web
1 hour developers make web pages more attractive and
❯ How to use JQuery
Lines of code: 89
interactive by implementing custom client-side scripts.
❯ How to animate HTML
It even allows the use of cross-platform run time
elements Difficulty level engines, such as Node.js, to write server-side code.

Project requirements Getting started

For this project, you will need
1 To add the interactive functionality of JavaScript
the previously created HTML to the website, you will require multiple JavaScript files.
and CSS files. You can continue You will also link the HTML document to a JavaScript
using the same IDE. framework (see pp.284–85) to make programming easier.

1.1 ADD A FOLDER

Create a new folder, called “scripts”, to contain the JavaScript files.
On a Mac, open Finder and create the folder inside the website folder. Then,
open Visual Studio, right-click on the project name, select Add and choose
Add Solution Folder. In Windows, right-click on the project name in Solution
Explorer, select Add and choose New Folder.

HTML FILE
Solution
PetShop Build PetShop
Rebuild PetShop
Clean PetShop Adds the
Unload new scripts
folder inside the
View Archive solution folder

Run Item
Start Debugging Item
CSS FILE Add Add New Project...
Add Existing Project...

Add Solution Folder

MAC

PetShop Build Web Site

Publish Web App
Scope to this
DEVELOPMENT
ENVIRONMENT New Solution Explorer View
Add
Add new item
Existing item
New folder

WINDOWS
GETTING STARTED

1.2 ADD JQUERY

Before adding the custom JavaScript files, you need to pointing to the online location that you can use to retrieve
add JQuery (see p.284) to the HTML file. You will use JQuery in the JQuery. This online location is called a CDN (content delivery
custom scripts to make it easier to target the HTML elements. In network). You can download these files and host them in
the “index.html” file, add a <script> tag inside the <head> tag, your own site, but it is often easier and quicker to use a CDN. HTML

<link href="https://fonts.googleapis.com/css?family=Anton|
Open+Sans" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>

The “src” attribute points Link to retrieve

to the CDN for JQuery JQuery

2 Adding JavaScript files

The web page in this project needs three custom
JavaScript files. In this section, you will create the first two
files – one to contain the global scope variables and another
to contain functionality for the features of the home page.

APP.JS

HOME.JS
 WEB TECHNOLOGIES
Animating the web page 290 291
2.1 ADD NEW FILE
The first custom script you Solution
need to add is called “app.js”. This
will add an “app” class/function that PetShop
you can instantiate to hold all the Solution items
global scope variables. Right-click Scripts Build PetShop
on the scripts folder, select Add
Rebuild PetShop
and choose New File to create a
JavaScript file. Name this file “app.js”. Clean PetShop
Unload

View Archive

Run Item
Start Debugging Item

Add Add New Project...

Add Existing Project...

Add Solution Folder

Click here to create
a new JavaScript file New File...

2.2 REFERENCE APP.JS

You now need to link the JavaScript file to the HTML you declare the JavaScript files is important, because
file. In the “index.html” file , add a <script> tag that will point to the scripts must be loaded into the JavaScript Engine
the newly created JavaScript file. Place this link inside the <head> (see p.264) before they can be called. For example, JQuery
tag, just below the <script> tag for JQuery. The order in which must be loaded before you can use any of its methods. HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script> Adds a new <script>
tag that points to the
<script src="scripts/app.js"></script> new JavaScript file

2.3 CREATE FUNCTION

Inside “app.js”, declare
a variable called app that is a
var app = (function () {
Round brackets
self-executing function (see p.279).
Then add a property called /* Properties */ instruct the JavaScript
Engine to run that JS
“websiteName” and a method
called “getWebsiteName” inside var websiteName = "PetShop"; function immediately
the function. This is an example
of how to add functionality to /* Methods */
the app class.
return {
Code after double slashes (//) getWebsiteName: function () {
or between /* and */ is treated
as a comment in JavaScript
return websiteName;
}
}
})();
SAVE
ADDING JAVASCRIPT FILES

2.4 ADD ANOTHER FILE 2.5 REFERENCE HOME.JS

Next, add another new custom As before, you will need to reference this new JavaScript
script with all the logic you will need file in the HTML document. In the “index.html” file, add a <script>
for the home page. Follow the same tag that points to the “home.js” file. Ensure that this is placed
steps as before to create a new JavaScript below the reference for “app.js” added in step 2.2. HTML
file inside the scripts folder, and name it
“home.js”.
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>

Indicates that the file is

HOME.JS inside the scripts folder SAVE

2.6 ADD FUNCTIONALITY TO HOME.JS

In “home.js”, create a function called HomeIndex(), page have finished loading before running the code within
which will contain all the functionality required by the it. Inside the on document ready() function, you will
home page. Below this function, add a on document instantiate the HomeIndex() function as a property
ready() function. This is a JQuery command that instructs of the “app” object, which has already been instantiated JS
the JavaScript Engine to wait until all the elements on the in the “app.js” file.

function HomeIndex() {
Makes a function
The dollar sign denotes
} the JQuery function
available after the
document is loaded
$(document).ready(function () {
Comments are ignored,
/* Instantiate new Home class */ and will not be executed

app.homeIndex = new HomeIndex(); Links “home.js”

to “app.js”
});

Managing the Scroll

3 to top button
Pet Shop

In the next few steps, you will add file:///PetShop/index.html

functionality to the Scroll to top button.
You need to add code to control when the
button becomes visible and to make it scroll
SUBSCRIBE TO OUR MAILING LIST
back to the top of the page when clicked.
Enter your email address Join Now

Store Finder Shipping FAQ

© 2020 PET SHOP

 WEB TECHNOLOGIES
Animating the web page 292 293
3.1 DEFINE PROPERTIES
Add a property inside the
HomeIndex() function to set the
function HomeIndex() {
height from the top of the page at
which the Scroll to top button should /* Properties */
become visible.
const heightFromTop = 300;
}

The height will not change,

so it is defined as constant

3.2 DEFINE METHODS

Now add a method to initialize the Scroll to top button. heightFromTop value. The button is then made visible or
This method will control two aspects of the button. It will add hidden accordingly. The method also adds an “on click”
an “on scroll” event handler, so that every time the user scrolls event handler, so that every time the user clicks the Scroll
up or down in the browser, the JavaScript Engine checks if to top button, the page will scroll back to the top. Add this
the scroll distance is more than the amount defined in the code within the HomeIndex() function.

const heightFromTop = 300;

/* Methods */
this.initialiseScrollToTopButton = function () {
}
}

The keyword “this” refers

to the owner object, in this
case the HomeIndex() function

3.3 ADD CALL TO INITIALIZE

In the document ready() function, add this code
below the “app.homeIndex” declaration. This will add the call
to run the initialiseScrollToTopButton method.

$(document).ready(function () {
/* Instantiate new Home class */
app.homeIndex = new HomeIndex();
/* Initialize the Scroll To Top button */
app.homeIndex.initialiseScrollToTopButton(); Initializes the
Scroll to top
}); button
MANAGING THE SCROLL TO TOP BUTTON

3.4 SHOW THE BUTTON

Add the “on scroll” event handler in the JavaScript command scrollTop(). It then compares
initialiseScrollToTopButton() function. This the current scroll distance with the “heightToTop” value
determines the current scroll distance by using the to see if the scroll button needs to fade in or fade out.

/* Methods */
This instruction
this.initialiseScrollToTopButton = function () { tells JQuery to
run the code
/* Window Scroll Event Handler */ block every
time the user
$(window).scroll(function () { scrolls the page

/* Show or Hide Scroll to Top Button based on

JQuery selector
that targets the scroll distance*/
“window” object
var verticalHeight = $(this).scrollTop();
This selector tells
if (verticalHeight > heightFromTop) { JQuery to use the
element that
$("#scrollToTop").fadeIn(); triggered the
This JQuery event: the
selector targets } else { JQuery methods that window object
the HTML automatically animate in this instance
the button
element with $("#scrollToTop").fadeOut();
id=”scrollToTop”
}
});
}

3.5 CLICKING THE BUTTON

Next, you need to add a event handler to that detects when the button is clicked. Use the
manage what happens when the Scroll to top button animate() command to instruct JQuery to animate the
is clicked. To do this, add the JQuery click() function “html” and “body” elements when the button is clicked.

$("#scrollToTop").fadeOut();
}
});
This code runs
/* Scroll to Top Click Event Handler */ every time
the button
$("#scrollToTop").click(function () { is clicked

$("html, body").animate({ scrollTop: 0 },"slow");

}); Stops when the
Animates the “html” scroll reaches the
} and “body” elements top of the page
SAVE
 WEB TECHNOLOGIES
Animating the web page 294 295
3.6 VIEW PAGE
Test the Scroll to top button. Open the browser and enter the url
for the web page into the address bar. In Windows, the url to the file on
your local computer will be “file:///C:/petshop/index.html”. On a Mac, the
url will be “file:///Users/[user account name]/PetShop/index.html”. The Scroll
to top button should be visible now. Click on it and make sure that the page
scrolls back up to the top.

Pet Shop

file:///PetShop/index.html

BIRDY NUM NUM

KEEP YOUR BIRDS CHIPPER

Yummy snacks and feeders

for every kind of bird.

CLICK FOR BIRDS

CONTACT US
TEL: 012-345-6789

EMAIL: [email protected]

Pet Shop
80 Strand
London
WC2R 0RL

SUBSCRIBE TO OUR MAILING LIST

Enter your email address Join Now The Scroll to
top button
will now scroll
to the top
Store Finder Shipping FAQ of the page
when clicked

© 2020 PET SHOP

MANAGING PROMOTIONAL MESSAGES

Managing promotional messages

4 The next element that needs to be managed New toys Free
for puppies shipping
is the promotional bar that appears on top of the
web page. The promo section in HTML contains four
different messages (see p.221). Using JavaScript, you
will program the promo bar to cycle through these
messages, making them appear one at a time.

Buy 5 toys
and save 30%

4.1 ADD A NEW CUSTOM SCRIPT

You will want the Promotional Messages to be visible
on all pages of the website. Create a new JavaScript file called
“common.js”. The code in this file will provide functionality for
the promotional messages section at the top of the web page.
Follow the same steps as earlier to create a new JavaScript file
within the scripts folder.

4.2 REFERENCE FILE

Now use a <script> tag to reference the new
file “common.js” in the “index.html” file. Add this line
of code below the reference for the “home.js” file.
HTML

<script src="scripts/home.js"></script>
<script src="scripts/common.js"></script> Links the JavaScript
file to the HTML file SAVE

4.3 CREATE A FUNCTION

Inside “common.js”, add a new function called Common().
This function will act as a class (see pp.282–83) that can be
instantiated as a property of the “app” object defined previously.
Add an on document ready() function below this to instantiate JS
the “Common” class as a property of the “app” object.

function Common() {
}
$(document).ready(function () {
/* Instantiate new Common class */ Instantiates the “Common”
class as a property
app.common = new Common();
});
 WEB TECHNOLOGIES
Animating the web page 296 297
4.4 ADD PROPERTIES
Next, inside the Common()
function, add a property called
function Common() {
“promoBar”. This is a JavaScript object Creates a reference
(see p.269) that contains all the variables let self = this; to the object that
used by the Promotional Messages can be used later in
section to manage itself. /* Properties */ its methods

this.promoBar =
{ null indicates
This is the list of <div> that the variable
tags with messages promoItems: null, has no value

This is the index of the <div> currentItem: 0,

that is currently visible
numberOfItems: 0, This is the number
of <div> tags
with messages
};
}

4.5 INITIALIZE THE PROMOTIONAL MESSAGES

Add a method to initialize the Promotional Messages
section. This method will set the values of the properties
contained in the “promoBar” object, and will start the loop
to show the next message item.

numberOfItems: 0,
};
/* Methods */
this.initialisePromo = function () {
/* Get all items in promo bar */
let promoItems = $("#promo > div"); This JQuery selector returns
an array of all the divs inside
/* Set values */ an element with id=“promo”

this.promoBar.promoItems = promoItems;
this.promoBar.numberOfItems = promoItems.length;
/* Initiate promo loop to show next item */
this.startDelay();

Returns the number of

elements in this array
MANAGING PROMOTIONAL MESSAGES

}
this.startDelay = function () {
/* Wait 4 seconds then show the next message */
setTimeout(function () { This function instructs
JavaScript to repeat the call
self.showNextPromoItem() every 4,000 milliseconds

}, 4000);
}

This function will fade out the current

promo message and fade in the next message

4.6 CYCLE THROUGH THE PROMOTIONAL MESSAGES

Add a new method below the initialisePromo() function. must be the first message in the list. The array index property
This method will hide the current message, and then determine the (see p.268) will be used here. The value of the variable currentItem
index of the next message before displaying it on screen. If the current indicates the index number of the displayed message. As this value
message is the last item in the message list, then the next message changes, the message being displayed will also change.

This command instructs JQuery

this.showNextPromoItem = function () { to extract the array item with
the given index number
/* Fade out the current item */
$(self.promoBar.promoItems).fadeOut("slow").promise().
done(function () {
/* Increment current promo item counter */
if (self.promoBar.currentItem >= (self.promoBar.
numberOfItems - 1)) {
/* Reset counter to zero */
self.promoBar.currentItem = 0; Ensures that the
currentItem never
} else { exceeds the index number

/* Increase counter by 1 */
self.promoBar.currentItem++; Cycles through the
promotional messages
}
/* Fade in the next item */
 WEB TECHNOLOGIES
Animating the web page 298 299

$(self.promoBar.promoItems).eq(self.promoBar.currentItem).
fadeIn("slow", function () {
/* Delay before showing next item */
self.startDelay();
});
}); Displays the next promotional
message in the list
}
}

4.7 ADD CALL TO INITIALIZE

Finally, add a call to start cycling through the promotional messages.
In “common.js”, in the on document ready() function, add a call to run
the app.common.initialisePromo() function.

$(document).ready(function () {
/* Instantiate new Common class */
app.common = new Common();
/* Initialize the Promo bar */
app.common.initialisePromo();
});
SAVE

4.8 VIEW PAGE

Now go to the browser and refresh the page. Check that The promotional
the orange promotional messages bar on top of the web page is messages appear
cycling through the four messages specified in the HTML file. one at a time

Pet Shop
file:///PetShop/index.html

Buy 5 toys and save 30%

PET SHOP Home About Shop Contact

HACKS AND TWEAKS

Hacks and tweaks

Explore fonts and icons
To make a website unique and personalized, you can This project uses Google Fonts for all the text
change the way it looks by using different images elements on the web page. You can explore and
and fonts. Websites also use icons to distinguish try different font options to enhance the look
between different sections and pages of the site and feel of your web page. You can also search
easily, such as Home, Contact, and Shopping Cart. for other favicon images.

Pet Shop

file:///PetShop/index.html

LOVE FISH
You can change the THE WIDEST RANGE OF FISHES
font of any text element
on your web page, from
the body text to the Indoor and outdoor, we’ve got them all!
headings on the website

CLICK FOR FISH

1 CHOOSE NEW ICONS OR FONTS

You can use the Google Material Icons website to look for Link to the
more options for the favicon. To change the fonts used on the web
https://fonts.google.com/ Google Fonts
page, both the HTML and the CSS files need to be updated. First, website
choose your new font from the Google Fonts website. Then, go
to “index.html” and under the <head> tag, edit the <link> tag that
contains the reference to the fonts. Replace the font name with https://material.io/
the new font you want to work with.

<link href="https://fonts.googleapis.com/css?
Link to the
family=Anton|Oswald" rel="stylesheet"> Google Material
Icons website HTML
The font “Open Sans” has been
replaced with “Oswald”
 WEB TECHNOLOGIES
Animating the web page 300 301
2 APPLY NEW FONTS
Now, go to the “global.css” body {
file. Try changing the font of the body
elements, as shown here. You will margin: 0; Font changed from
have to edit the “font-family” style “Open Sans” to “Oswald” CSS
definitions within the body selector padding: 0;
to do this. Then, save both the files
and test the program. Your text for font-family: "Oswald", sans-serif;
the body elements will appear in the
new font (see opposite).
font-size: 15px;
The other elements background-color: white;
remain the same
color: #333;
}
SAVE

3 LOAD UPDATED FILE

At times, even when the code files have been assigns values to specified parameters – to force
updated, the browser still displays the old web page. This the browser to download the latest version of the
may happen because the browser could be using a saved file. You can use any querystring, as long as it is
version of the file rather than downloading it again. Since different to the previous versions that are already HTML
users may not refresh the page every time they visit the stored. The querystring is added to the <link> tag
site, you can use a querystring – part of a url, which in the HTML file.

<link href="styles/global.css?v=2" rel="stylesheet" />

Add social media

Most websites today find it necessary to is possible for you to add social media links
advertise their social media accounts so that on the web page. Start by adding a button to
users can follow them on various platforms. It encourage users to follow the website on Twitter.

1 LOAD THE WIDGET

To display the Twitter widget on the web page, you will
need to load the “widgets.js” script from Twitter. Open the “index. The new <script> tag can
html” file, then add a <script> tag inside the <head> tag to link the be placed anywhere inside
widget to the web page. the <head> tag HTML

<script src="scripts/app.js"></script>
<script src="scripts/common.js"></script>
<script async src="https://platform.twitter.com/widgets.js"
charset="utf-8"></script>
HACKS AND TWEAKS

2 ADD BUTTON
Now add the Twitter button to the Top Menu. Inside the “topLinks”
div unordered list, add a new list item that contains a hyperlink to the
Twitter page. If you refresh the browser and view the page on screen, you
will see a new social media button in the Top Menu.

...<div id="topLinks">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">About</a>
</li>
<li>
<a href="/">Shop</a>
</li>
Link to the
<li> Twitter page
<a href="/">Contact</a>
</li>
<li>
<a href="https://twitter.com/PetShop"
class="twitter-follow-button" data-show
-count="false"> Follow @PetShop</a>
</li>
</ul>
</div>

Pet Shop

file:///PetShop/index.html

PET SHOP Home About Shop Contact Follow @PetShop The button appears
next to the menu items
 WEB TECHNOLOGIES
Animating the web page 302 303
Page template
This project only includes code for the website contains all the elements that are common
home page. However, other pages, such as About, to every page of the website. This template
Shop, and Contact in the Top Menu, are required will include the meta links to the CSS
to make a fully functioning website. In order to and JavaScript files, along with all the
create these pages you will need a template, which common HTML code.

PET SHOP BUY NOW CONTACT US

ABOUT SHOP CONTACT

1 TEMPLATE HTML FILE

Create a new file called <a href="/Shop">SHOP NOW</a>
“template.html”. Then, copy the
HTML from the home page into
this new file. Insert the code
</div>
shown here into the template file.
Now try creating the other
</div>
pages of the website. Start by
copying the content of “template. </div>
html” and pasting it into a new Replace the
file. Rename the file accordingly; <div class="clear spacer v80"></div> code between
for example, “contact.html”. Then, the Banner
using the instructions given for <div class="wrap"> section and the
the home page (see pp.220–33), Footer section
insert the HTML for the “Contact ## Insert page content here ### with these lines
page” into the placeholder “##
Insert page content here </div> Insert HTML for the
###” given in the template code. new page between the
<div id="footer"> div tag with class =”wrap”

2 SERVER-SIDE TEMPLATE OPTIONS

In order to automatically inject the template into each especially if there are lots of pages in the website. You
page, you will need to use a server-side language, such as C# MVC may want to explore the “layout file” concept in C# MVC
or Python Django. In this project, you repeatedly had to include (https://www.asp.net/mvc) and the “template inheritance”
the links to the CSS and JavaScript files into every HTML page feature in Python Django (https://www.djangoproject.
on the website. This is obviously difficult to update and maintain, com) to solve this problem.
Responsive website
Responsive layouts enable programmers to create and
publish the same content on any digital platform. This is
achieved through a clever use of HTML and CSS. In this
project, you will use HTML, CSS, and JavaScript, as well
as JQuery and Bootstrap, to create a responsive website.

Hamburger button
How it works
TRAVEL-NOW
The focus of this project is to build a responsive website
using JQuery and Bootstrap (see pp.284–85). Each element file:///Travel-now/index.html
of the website will be programmed using HTML, CSS, and
TRAVEL-NOW
JavaScript at the same time, to see how they work together
to achieve a visual effect. You will use JQuery in the custom
scripts to target HTML elements, and then use Bootstrap to
add responsiveness to the website.

START The elements adjust their TRAVEL NOW

size and align vertically when
the screen size is reduced

Final website
The website created in this project will be
divided into several sections, many of which We all dream of a great holiday.
will contain hyperlinks to other pages of the Contact us to make your dream come true!
Build a responsive website. All the elements will be programmed
home page using to make them fit any size of screen. NARROW SCREEN
HTML, CSS,
and JavaScript
TRAVEL-NOW
file:///Travel-now/index.html

TRAVEL-NOW Home Deals Contact Us

Create a
master-page
template and then
duplicate it to
produce the other
pages of the website TRAVEL NOW

We all dream of a great holiday.

END Contact us to make your dream come true!

PROGRAM DESIGN WIDE SCREEN

 WEB TECHNOLOGIES
Responsive website 304 305
YOU WILL LEARN WHERE THIS IS USED
❯ How to use Bootstrap grid layout TIME: Responsive layouts allow the website to be programmed
3–4 hours once and to render correctly on a variety of devices, such
❯ How to use Bootstrap controls
in your website as desktops, tablets, and smartphones. This compatibility
Lines of code: 659
with varying screen sizes means that this technology is
❯ How to use JQuery to target Difficulty level often used by sites to reach a wider audience.
HTML elements

Project requirements Getting started

This project will require several
1 To create this project, you first need to install
programming elements to build Visual Studio (see p.217). You can then add all the essential
the website. folders and files that are required to create the home page
of the website.

Text files
You will need HTML, CSS,
and JavaScript files to
build this website. You can TRAVEL-NOW
either use a simple text
file:///Travel-now/index.html
editor to create them
or a dedicated IDE like the
one used in this project.
NAVIGATION BAR This layer will
contain a company
logo and the Top
Development Menu links to other
environment FEATURE IMAGE AND TITLE pages on the site
The IDE (see pp.208–209)
“Microsoft Visual Studio
Community 2019” is
used in this project. It
PRIMARY MESSAGE
supports a large variety of
programming languages
and paradigms.
This layer will display
QUOTE
a sentence about
Browser travelling that will
The Google Chrome change every
browser is used to run the five seconds
code in this project. Its POPULAR DESTINATIONS
“Developer Tools” can be
used to better understand
what you see in the
browser. However, you can LAST MINUTE DEALS This layer will be
use any browser you are a carousel with
comfortable with. images that will link
to other pages on
the site
COPYRIGHT
Images
Get a copy of the images
folder for this project from
www.dk.com/coding-course. Home page design
These images will be used The elements of a home page can be understood as a series
to build the website. You of horizontal layers that sit one above the other. This home
can also use your own page will have seven layers. Some of its common elements
images if you like. will be repeated on every page of the website.
GETTING STARTED

1.1 CREATE THE FOLDERS 1.2 ADD AN INDEX FILE

The first step is to create a website folder on your computer to Follow the instructions given in Build a web
contain all the files for this website. Name the folder “Travel-now”. Then, page (see p.219) to create an “index.html” file. Add
open a new project in Visual Studio and create a solution file called this file to the website folder. Visual Studio will
“Travel-now.sln” and save it in the website folder. Follow the steps from create the file with the minimum code required for
Build a web page (see pp.218–19), to do this. Paste the previously a valid HTML page (see p.220). If you are using
downloaded images folder inside the website folder. The path to the another development environment, you may need
website folder on your computer should be as shown below. to type the code into the new index file.

Users/[user account name]/Travel-now

MAC

C:/Travel-now

WINDOWS INDEX.HTML

1.3 ADD A STYLE SHEET

Now add a “styles” folder for the website (see p.243). On a Mac, right click on the styles folder and select
Then, add a new CSS file called “global.css” inside the styles Add, then choose New File. Go to Web and select
folder. The styles defined in this file will apply to all the pages Empty CSS File and save it. Now add the colour and
of the website. In Windows, right click on the styles folder and font references for the website at the top of the CSS CSS
select Add. Then, choose Add a new item and select Style Sheet. file. You can refer to these later when you need them.

Comments contained Font used

within these marks are for headings
ignored by the browser and logos

/*
font-family: "Merriweather", serif;
Font used for normal
font-family: "Open Sans", sans-serif; paragraph text

font-family: "Merienda One", cursive; Font used in the

“quote” section
Text color : #000;
Dark blue : #345995;
Light blue : #4392F1;
Red : #D7263D;
Hex codes for the
Yellow : #EAC435; colours used on
the website
Mauve : #BC8796;
Silver : #C0C0C0;
Light gray : #D3D3D3;
*/
 WEB TECHNOLOGIES
Responsive website 306 307
1.4 ADD STYLES TO
THE BODY
Add the style definitions for
body {
Instructs the browser to make
the <body> elements below the
comment section. This will set margin: 0; the <body> element fit the entire
width and height of the screen CSS
the values for the margin and
padding (see p.245), font, font padding: 0;
colour, and background colour.
As these styles are applied to the font-family: "Open Sans", sans-serif;
<body> elements, they will be
used for all the text elements in the font-size: 15px;
document. You can override the
default font styles for the headings, color: #000;
buttons, and hyperlinks later.
background-color: white;
Sets the font and
colour definitions
}

1.5 ADD SPACERS 1.6 STYLE THE HEADERS

Next, add style definitions The next element to be styled are the headers. Define
for the vertical spacers that will the font styles for the “h1”, “h2”, and “h3” headers that will be used
be used throughout the website. throughout the website. All the headers will have the same font,
These will create standardized CSS but a different font-size definition. Add this code just after the CSS
white spaces between the various spacers added in the previous step.
sections of the page.
Compound style signature Font used by
with classes “spacer” and “v80” all the headers

.spacer.v80 { h1, h2, h3 {

height: 80px; font-family: "Merriweather", serif;
} } This property defines the preferred font
to use and a second font type in case the
.spacer.v60 { h1 { preferred font is not available

height: 60px; font-size: 60px; Only “h1” headers

will have the font
} } size 60px

.spacer.v40 { h2 {
height: 40px; font-size: 30px; Only “h2” headers
will have the font
} } size 30px

.spacer.v20 { h3 {
height: 20px; font-size: 20px;
} }

This spacer can only be Only “h3” headers

applied to an element that will have the font
has both “spacer” and “v20” size 20px
in its “class” attribute value
GETTING STARTED

1.7 STYLE THE CORNERS

Many elements of the website
will require rounded corners. Reuse
.roundCorners {
the “roundedCorners” class so this visual
characteristic can be shared by the border-radius: 15px; This definition
applies to all CSS
elements. If only one number is stated the four corners
in the border-radius definition, then all }
four corners will exhibit that property.
Add this code to “global.css” just after .roundCorners.top {
the code from the previous step.
border-radius: 15px 15px 0 0;
These refer
Only the top and } to the four
bottom corners corners
are rounded .roundCorners.bottom { – topLeft,
topRight,
border-radius: 0 0 15px 15px; bottomRight,
and bottomLeft
}

1.8 ADD A SCRIPTS FILE

This file will contain an “app” class
Now add a new folder called
“scripts” to the website folder. This will function that will be instantiated to
hold all the JavaScript files for the project. hold all the global scope variables
In the Solution Explorer window, right
click on the project name Travel-now
to create the folder. Then, create a new
JavaScript file called “app.js” and add
it to the scripts folder. Follow the
instructions given in Animating a web
page (see p.291) to create this file.

APP.JS SCRIPTS TRAVEL-NOW

1.9 MAKE A FUNCTION

Add this code inside the
“app.js” file. This will declare a variable
var app = (function () {
called “app” that is a self-executing
function. Add a property called /* Properties */
JS
“websiteName” and a method called
“getWebsiteName” inside it as an var websiteName = "TRAVEL-NOW"; Name
of the
example of how to add functionality
to the app class. /* Methods */ website

return {
getWebsiteName: function () {
return websiteName;
Round brackets around
the function instruct the }
JavaScript Engine to run that
function immediately }
})();
 WEB TECHNOLOGIES
Responsive website 308 309
Creating the navigation bar
2 The first element to be created is the navigation bar
on the home page. This bar will appear on all the pages of the
website. In this section, you will program the navigation bar
and then add some hyperlinks to it that will connect to all the
other pages of the website.

2.1 ADD THE TITLE AND FAVICON

Go to the “index.html” file. Inside the <head> definition, a browser with a narrow screen will
tag, add a <meta> tag with the “viewport” definition zoom out to try and show the whole page on
as shown. This allows the HTML document to adjust its the screen. Next, add a <title> tag and then the
content to fit the screen. Without the viewport meta favicon (see p.221) definition. HTML

<head> Instructs the browser to

display the HTML document
at the correct resolution
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no"> This text will
appear as the tab
<title>TRAVEL-NOW</title> title in the browser

<link rel="icon" type="image/png" href="images/favicon.png">

</head>

This attribute points to the

“favicon.png” file in the images folder

2.2 ADD THE MODULES

Now add references to the JQuery and Bootstrap
JavaScript files in the HTML file. Inside the <head> tag, add the This <script> tag for Bootstrap
<script> tags and <link> tags just below the <link> tag to the favicon. contains an “integrity” attribute
The “src” attributes in the <script> tags point to the online location that ensures the downloaded HTML
of the modules from where they can be retrieved. file has not been manipulated

<link rel="icon" type="image/png" href="images/favicon.png">

<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/
4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6Ck
vvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" cross
origin="anonymous"></script>

Reference to the JQuery file

CREATING THE NAVIGATION BAR

The “src” attribute in this tag

<script src="scripts/app.js"></script> points to the “scripts/app.js” file

<link rel="stylesheet" href="https://stackpath.bootstrap

cdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity=
Link
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYM to the
Bootstrap
CSS file
j70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/
css?family=Merienda+One|Merriweather|Open Imports
the fonts
+Sans" rel="stylesheet"> used in the
website
<link href="styles/global.css" rel="stylesheet" />

Link to the custom The custom CSS file is added at

CSS file – global.css the end as it must overwrite the
default Bootstrap CSS definitions

ORDER OF TAGS
The order in which you declare the
JavaScript files is important. This is JQUERY
because JavaScript functions must be
loaded into the JavaScript Engine before
they can be called. For example, JQuery BOOTSTRAP
must be loaded before Bootstrap because
Bootstrap uses JQuery to execute its
functions. This is also true for your custom APP.JS
JavaScript files. They must be added to the
HTML after the JQuery and Bootstrap files
in order to call their functions. OTHER CUSTOM JAVASCRIPT FILES

2.3 ADD A BOOTSTRAP Tells the navbar when to collapse

NAVIGATION BAR to a hamburger menu button
Next, inside the <body> tag, add a
<nav> tag to contain all the Bootstrap
navigation bar elements. If the screen <body> HTML
is wide enough, it will display the Top
Menu list horizontally along the top of <nav class="navbar navbar-expand-md
the page. If the screen is narrow, then
the Top Menu will be replaced by a navbar-dark fixed-top bg-mauve">
“hamburger menu” button – a button
resembling a hamburger, used to toggle </nav>
a menu or navigation bar. When this Fixes the navbar Sets the background
button is clicked, the Top Menu will position at the top colour to mauve
</body>
display a vertical list.
 WEB TECHNOLOGIES
Responsive website 310 311
2.4 ADD A BOOTSTRAP CONTAINER
The navbar must run across the full width of the tag. This Bootstrap class defines the margins on the
screen, but the Top Menu logo and hyperlinks must only left and right of the element. Then, inside the “container”
occupy the centre of the page where all the page contents div, add an <a> tag to display the company logo.
will go. Add a <div> with class = “container” inside the <nav> When clicked, this will hyperlink to the home page. HTML

<nav class="navbar navbar-expand-md navbar-dark fixed-top

bg-mauve">
Contains all the HTML elements that
<div class="container"> need to appear centred on the page

<a class="navbar-brand logo" href="index.html">TRAVEL-NOW

</a>
</div>
</nav>

This Bootstrap CSS class specifies This custom CSS class

that the element must appear inline defines the font to be
with some padding and margins used for the logo

2.5 DEFINE THE HAMBURGER BUTTON

Inside the “container” div, below the “navbar-
brand” </a> closing tag, add the “navbar-toggler” <button>
tag. This element will perform the “hamburger menu”
button functionality. When clicked, the button displays the HTML
Top Menu as a vertical drop-down list.
This attribute manages the
state of the drop-down menu

<a class="navbar-brand logo" href="index.html">TRAVEL-NOW

</a>
This class contains
display properties,
such as margin
<button class="navbar-toggler" type="button" data-toggle=
and padding
"collapse" data-target="#navbarCollapse" aria-controls=
"navbarCollapse" aria-expanded="false" aria-label=
"Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>

The “aria” classes are used by

assistive technologies, such as
screen readers for the blind, to
make sense of the complex HTML
CREATING THE NAVIGATION BAR

2.6 ADD HYPERLINKS TO THE NAVBAR

Next, add the “navbarCollapse” div, which will contain an the “container” div, just below the closing tag for the
unordered list of the actual hyperlinks that will appear in the Top “navbar-toggler” </button>. Then add a spacer div after
Menu of the website: Home, Deals, and Contact Us. Place it inside the </nav> closing tag.
HTML

</button> Indicates whether

the navbar is in
<div class="collapse navbar-collapse" id= the “collapse” or
“full-screen” state
"navbarCollapse">
<ul id="topMenu" class="navbar-nav mr-auto">
<li class="nav-item active"> Contains style definitions
for the unordered list
<a class="nav-link" href="index.html">
Home <span class="sr-only">(current)
</span></a>
</li>
Contains style definitions
for the list items that will
<li class="nav-item">
appear as a horizontal
or vertical list, depending
on the width of the screen
<a class="nav-link" href="deals.html">
Deals</a>
</li>
Anchor tags
hyperlink to other <li class="nav-item">
pages on the website
<a class="nav-link" href="contact.html">
Contact Us</a>
</li> Each <a> tag is a member of the “nav-link”
class, which specifies mouse-off and hover
</ul> style definitions for the navbar hyperlinks
Closing tag for the
“navbarCollapse” div
</div>
Closing tag for the
</div> “container” div

Closing tag for Adds a vertical height of

</nav> the “navbar” div 80px between the navbar
and the next element
<div class="spacer v80"></div>
SAVE

2.7 SPECIFY THE BACKGROUND COLOUR

Now go to the “global.css” style sheet to set
the background colour of the navigation bar. Add this
.bg-mauve {
code immediately after the lines added in step 1.7 to
set the style definition for this bar. background-color: #BC8796;
CSS
}
 WEB TECHNOLOGIES
Responsive website 312 313
2.8 STYLE THE LOGO
The next step is to style
the logo that appears in the Top
.logo {
Menu. Add the “logo” class to
specify the font to use for the font-family: "Merriweather", serif;
CSS
company logo. Then add style
definitions for the logo that font-weight: bold;
The default font
appears in the navbar. The navbar
logo is a hyperlink, so you will } for the logo
need to define both its normal
and hover states. If you are unsure .navbar-brand.logo {
what CSS style definitions are
acting on an element, use the color: white; Normal state of
Developer Tools (see p.281) in the hyperlink
Chrome to view the styles. }
Hover state of .navbar-brand.logo:hover {
the hyperlink
color: white; This will ensure the logo
remains white when the
} mouse hovers over it
SAVE

2.9 RUN THE PROGRAM

Now test the code to see if the navigation bar renders
correctly. In the Solution Explorer window, right click on “index.html” TRAVEL-NOW
and open the file in the browser of your choice. You can also open the file:///Travel-now/index.html
browser and type the website’s url into the address bar. In Windows,
the url will be “file:///C:/Travel-now/index.html”. On a Mac, the url will
be “file:///Users/[user account name]/Travel-now/index.html”. TRAVEL-NOW

Home

TRAVEL-NOW Deals
file:///Travel-now/index.html
Contact Us
TRAVEL-NOW Home Deals Contact Us

WIDE SCREEN NARROW SCREEN

Adding a feature image

3 The next element of the home
3.1 CENTRE THE CONTENTS
Go to “index.html”, and after the “spacer
page that needs to be managed is v80” </div> closing tag, add a “container” div so
that all the contents appear centred on the page,
the feature image. Each page on the regardless of the width of the screen. HTML
website will have a “feature image”
banner that will cover the entire width
of the page and contains the page title. <div class="spacer v80"></div>
<div class="container">
</div>
ADDING A FEATURE IMAGE

3.2 ADD THE FEATURE IMAGE BANNER

Now, inside the “container” div, add the feature of the website if you like. The “homeIndex” and
image for the home page and an “h1” header with the title of “featureImage” classes are used to specify the
the page. You can even use a different image on each page background image for the home page.
HTML

<div class="container">
<div class="featureImage roundCorners homeIndex">
<div class="text"> The “featureImage” div The “homeIndex” class specifies
will appear on every page the background image to be
<h1> used for the home page
Text that appears TRAVEL-NOW
in front of the image

Closing tag for the

</h1>
“featureImage” div Closing tag for
</div>
the “text” div
</div>
SAVE

3.3 CENTRE THE IMAGE 3.4 STYLE THE IMAGE TEXT

Open the “global.css” file and add Now add some code to style the text that will
some styles to specify the position of the appear in front of the image. The “text” div defines a
feature image on a page. These styles allow space in the middle of the “featureImage” div, which
the browser to automatically fit the image to CSS will contain the heading. CSS
any size of screen. Add this code to the end
of the CSS file.
.featureImage .text {
.featureImage { Specifies the width margin: 0;
and height of an image Specifies the
width: 100%; color: black; text colour

position: relative; position: absolute;

height: 400px; top: 50%;
background-size: cover; left: 50%; Positions the text to
start in the middle
background-position: width: 80%; of the page

center; color: #000;

Specifies the actual image file
} that will be displayed on the page text-align: center;
.featureImage.homeIndex { -webkit-transform: translate
background-image: url (-50%,-50%);
(../images/ transform: translate
feature.jpg); (-50%,-50%);
Repositions the text so that it
} } fits in the middle of the page
 WEB TECHNOLOGIES
Responsive website 314 315
3.5 ADD RESPONSIVENESS
The name of the website needs to be displayed at different font size,
depending on the width of the screen. Use the “@media screen” instructions to
tell the browser which definitions to apply according to the size of the screen.
CSS

@media screen and (max-width: 400px) {

.featureImage .text h1 {
font-size: 22px; Size of the “h1” header at
the minimum screen width
Instructs the browser to change
} the font size depending on the
width of the screen
}
@media screen and (min-width: 401px) and (max-width: 767px) {
.featureImage .text h1 {
font-size: 32px; Size of the “h1” header when
the screen width is changing
}
}
@media screen and (min-width: 768px) {
.featureImage .text h1 {
font-size: 80px; Size of the “h1” header at
the maximum screen width
}
}
SAVE

3.6 RUN THE PROGRAM

Save all the files and refresh the web page in the browser
to see what the website looks like at this point. The feature image
and its text should resize according to the width of the screen.

TRAVEL-NOW TRAVEL-NOW
file:///Travel-now/index.html file:///Travel-now/index.html

TRAVEL-NOW Home Deals Contact Us TRAVEL-NOW

TRAVEL-NOW TRAVEL-NOW

WIDE SCREEN NARROW SCREEN

ADDING A MESSAGE

Adding a message
4 The next step is to manage the “primary message”
section of the website. This message is a paragraph of text that
will display the main intention of the page in a prominent font.

4.1 ADD THE MESSAGE TEXT

Open “index.html”. Then, within the “container” for the “featureImage” </div>. This will
<div> add another <div> tag with class=“primaryMessage”. contain the paragraph of text you want
Place this new <div> immediately after the closing tag to display on the website.
HTML

Closing tag for the

</div>
“featureImage” div
<div class="primaryMessage">
<p> The paragraph tag

We all dream of a great holiday. Contents of

the primary
<br /> message

Contact us to make your dream come true!

</p>
Closing tag for the
</div> “primaryMessage” div SAVE

4.2 STYLE THE MESSAGE 4.3 ADD RESPONSIVENESS

Now go to the “global.css” file and add The message will be displayed with different
some style definitions to the message. These styles font sizes, depending on the width of the screen. Add
will apply to both wide and narrow screens. this code below the “.primaryMessage” style definition.
CSS CSS

font-size: 80px; @media screen and (max-width:

} 575px) {
} .primaryMessage {
.primaryMessage { font-size: 18px;
color: #000; “auto” sets the } Sets the size of the font
horizontal margins
when the screen width
margin: 0 auto; at equal width } is less than 576px wide

text-align: center; @media screen and (min-width:

padding: 60px 0; 576px) {
max-width: 80%; .primaryMessage {
} font-size: 23px;
} Sets the size of the font
The width of the “primaryMessage” when the screen width
cannot be more than 80% of the is more than 575px wide
parent “container” div }
 WEB TECHNOLOGIES
Responsive website 316 317
4.4 VIEW THE MESSAGE
Save all the files and then refresh the web
page in the browser to see if the message is rendered
correctly. The primary message will be displayed
immediately after the feature image, and its text will
resize according to the width of the screen.

TRAVEL-NOW TRAVEL-NOW
file:///Travel-now/index.html file:///Travel-now/index.html

TRAVEL-NOW Home Deals Contact Us TRAVEL-NOW

We all dream of
We all dream of a great holiday. a great holiday.
Contact us to make your dream come true! Contact us to make your
dream come true!

WIDE SCREEN NARROW SCREEN

Displays the message with The font size changes

the larger font size according to the width
of the screen

Adding a quote
5 The next element to be added is a Quote section. You
will structure the section using HTML, and then add style
definitions in CSS to specify the basic layout properties and
colours. Finally, using JavaScript, you will make this section
cycle through the quotes, making them appear one at a time.

5.1 ADD A SCRIPT TAG

F THE DAY
In the <head> section of the “index.html” file, add a <script> QUOTE O
tag to link a custom JavaScript file to the HTML file. Add this code
ve s y o u
below the closing </script> tag for “app.js”. This instructs the browser g - it lea
“Travellin turns
to include the “home.js” file when the page is loading. The new custom HTML ss , then
file will be created later using JavaScript. speechle ller ”
a stor y te
you into uta
Ibn Batt
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>

The “src” attribute

points to the external
“home.js” file
ADDING A QUOTE

5.2 ADD THE QUOTE TEXT

Now add the “quote” div just after closing </div> tag for items, except the first, will have an inline style
the “primary message”. This will contain the text for all the quotes, definition “display:none”, so that when the page
including names of the people who made them. All the quote loads, only the first quote item is visible.
HTML

</div> Closing tag for the

“primaryMessage” div
<div class="quote roundCorners">
<div class="quoteItem" >
This tag contains
<p> the quote text
The journey not the arrival matters.
</p>
This tag is used for applying
<span>T.S. Eliot</span> styles to inline elements

</div>
The second
<div class="quoteItem" style="display:none;"> “quoteItem”
will not be
<p> visible when
the page
Jobs fill your pocket, but adventures appears

fill your soul.

</p>
<span>Jaime Lyn Beatty</span>
</div>
</div> Adds a vertical height of
40px between the “quote”
<div class="spacer v40"></div> div and the next element
SAVE

5.3 STYLE THE QUOTE

Next, open the “global.css” file and
add the style definitions for the “quote” div.
.quote {
These styles will specify the text alignment,
padding, background colour, and text colour text-align: center; Aligns the contents
to the center of the CSS
of the quotes. Add this code immediately after
the “@media screen” instructions for the padding: 60px 20px; “quote” div

primary message.
background-color: #4392F1;
color: white; Hex code for
light-blue colour
Defines the vertical height: 180px;
space occupied by
the quote section position: relative;
}
 WEB TECHNOLOGIES
Responsive website 318 319
5.4 ADD RESPONSIVENESS
The quote section needs to be
displayed at a different size, depending
position: relative;
on the width of the screen. Add a style
definition for the “quote” div that will }
CSS
only apply when the screen width is
more than 766px wide. @media screen and (min-width: 767px) {
.quote {
Adjusts the vertical height: 220px;
space occupied by
the quote section
}
}

5.5 POSITION THE TEXT

Now add some
style definitions for all the
.quote > .quoteItem {
“quoteItems” elements, below The width of the “quoteItem”
the code for step 5.4. These max-width: 60%; CSS
cannot be more than 60% of the
will define the basic layout width of the parent “quote” div
properties of all the text margin: 0;
elements in the quotes.
color: white;
position: absolute;
top: 50%;
Positions the top-left corner of
left: 50%; the “quoteItem” element in the
middle of the parent “quote” div
text-align: center;
-webkit-transform: translate(-50%,-50%);
Repositions the “quoteItem”
up by 50% of its height and transform: translate(-50%,-50%);
left by 50% of its width, so
that it aligns exactly in the
middle of the “quote” section
}

5.6 DEFINE THE FONTS

AND MARGINS
The <p> element style definition
.quoteItem p {
declares the font styles to be used for
each quote item. It also sets the margin
font-family: "Merienda One", cursive;
CSS
that appears below each paragraph.
Add these lines just below the code font-size: 20px;
from step 5.5.
font-weight: normal;
Vertical space between margin-bottom: 5px;
the paragraph and the
<span> element below it }

Displays the quote

text in a cursive font
ADDING A QUOTE

5.7 INSERT QUOTATION MARKS

Now use CSS selectors to instruct
the browser to insert quotation marks
.quoteItem p:before {
automatically around the <p> element. The
“content” definition specifies which quotation
color: #EAC435;
CSS
mark is to be inserted.
content: open-quote; Instructs the
browser to insert
font-size: 40px; the “open-quote”
character
Specifies the basic line-height: 20px;
layout properties of
the quotation marks margin-right: 5px;
vertical-align: -13px;
}
.quoteItem p:after {
Hex code for the
color: #EAC435; colour yellow

content: close-quote; Instructs the

browser to insert
font-size: 40px; the “close-quote”
character
line-height: 20px;
margin-left: 5px;
vertical-align: -13px; Lowers the
element by
} 13px below
the baseline

5.8 STYLE THE

QUOTE MARKS
You can now add style definitions
@media screen and (max-width: 766px) {
to adjust the font size for the
quote text and the spacing of the .quoteItem p {
CSS
quotation marks, depending on
the width of the screen. Then, font-size: 14px; Adjusts the size
of the quote font
set the styling for the <span> tag
that contains the name of the }
source of the quote.
.quoteItem p:before {
vertical-align: -12px; Adjusts the vertical
alignment of the
} “open-quote” character

.quoteItem p:after {
Adjusts the vertical vertical-align: -17px;
alignment of the
“close-quote” character }
}
 WEB TECHNOLOGIES
Responsive website 320 321

.quoteItem span {
color: #EAC435; Font size of the <span>
text when the width of the
font-size: 18px; screen is more than 766px

}
SAVE

5.9 CREATE A JAVASCRIPT FILE Instantiates the Home() function

You will need a new custom as a property of the “app” object
JavaScript file to contain the functionality
required by the home page. To create this
file, go to the Solution Explorer window, right function Home() {
click on the scripts folder, select Add and
then select Add New Item in Windows, and }
New File on a Mac. Name the file “home.js”. JS
Then, add a Home() function and another $(document).ready(function () {
on document ready() function below
it. This function is a JQuery command that /* Instantiate new Home class */
will tell the JavaScript Engine to wait until
all the elements on the page have finished app.home = new Home();
loading before running the code in the
$(document).ready() function. });

The “app” object has already been

instantiated in the “app.js” file

5.10 APPLY PROPERTIES

TO THE QUOTE
Just below the Home() function, add
function Home() { This object has
four properties
a property called “quoteControl” that
contains all the variables used by the /* Properties */ JS
quote section to manage itself.
this.quoteControl = Contains the list of
<div> tags with quotes
{
Index of the quoteItems: null, Number of <div>
“quoteItem” div that
tags with quotes
is currently visible currentItem: 0,
numberOfItems: 0,
Holds a reference to the JavaScript interval: null,
“setInterval” command, which instructs
the JavaScript Engine to repeatedly call
repeatPeriod: 5000
the function to show the next quote
};
}
ADDING A QUOTE

5.11 INITIALIZE THE QUOTE

Inside the Home() function, add a method below the “quoteControl” declaration
to initialize the quote section. This function can be accessed as a property of the “app.home”
instance declared in te $(document).ready() function.
JS

}; Sets the values of the properties contained

in the “quoteControl” object and starts the
/* Methods */ loop to show the next quote item

this.initialiseQuoteControl = function () {
The variable quoteItems
/* Get all items in quote bar */ is defined as the array of
all the <divs> that have
let quoteItems = $(".quoteItem"); the class “quoteItem”

/* Set values */
this.quoteControl.quoteItems = quoteItems;
this.quoteControl.numberOfItems = quoteItems.length;
/* Initiate quote loop to show next item */ The variable self retains
the reference to the instance
let self = this; of the “Home” class

this.quoteControl.interval = setInterval(function () {
self.showNextQuoteItem(self);
Instructs the JavaScript function
to repeat the call to the
}, this.quoteControl.repeatPeriod); showNextQuoteItem()
function every 5,000 milliseconds
}

5.12 ANIMATE THE QUOTE

Now add the showNextQuoteItem() function below next quote item and make it visible. If the current quote
the code from step 5.11. This method will hide the current quote item is the last item in the list, then the next quote item
item, and when that is complete, it will determine the index of the will be the first quote item in the list.
JS

this.showNextQuoteItem = function (self) {

Hides the current
/* fade out the current item */ quote item

$(self.quoteControl.quoteItems).eq(self.quoteControl.
currentItem).fadeOut("slow", function () {
/* Increment current quote item counter*/ Determines the
index of the next
if (self.quoteControl.currentItem >= (self. quote item

quoteControl.numberOfItems - 1)) {
/* Reset counter to zero */
 WEB TECHNOLOGIES
Responsive website 322 323

self.quoteControl.currentItem = 0; This is the index number

of the current quote item
} else {
/* Increase counter by 1 */
self.quoteControl.currentItem++; Increases the index by
one and moves to the
next quote item
}
/* fade in the next item*/
Gets all the $(self.quoteControl.quoteItems).eq(self.quoteControl.
message items
currentItem).fadeIn("slow");
This command instructs
}); JQuery to target a specific
quote item with the index
} number currentItem

5.13 CALL A FUNCTION

Finally, add a call to the
initialiseQuoteControl()
app.home = new Home();
function to start cycling through
the quote items. Add this code /* Initialize the Quote bar */
inside the on document
ready() function that you app.home.initialiseQuoteControl();
added in step 5.9.
});

Calls the initialiseQuoteControl()

function to animate the quote items SAVE

5.14 VIEW THE QUOTE SECTION

Refresh the web page in the browser to see what
TRAVEL-NOW
is being rendered on screen. The “quote” div will resize
according to the width of the screen, and the quote text file:///Travel-now/index.html
will change every five seconds.
TRAVEL-NOW
TRAVEL-NOW
file:///Travel-now/index.html

TRAVEL-NOW Home Deals Contact Us “The journey not the

arrival matters.”
T.S. Eliot

"The journey not the arrival matters."

T.S. Eliot

WIDE SCREEN NARROW SCREEN

ADDING POPULAR DESTINATIONS

Adding popular destinations screen, Bootstrap’s column definitions will make

6 The next element to be managed is the the section appear as three side-by-side horizontal
“popular destinations” section, which will showcase columns. Columns will appear one on top of the
three featured holiday destinations. Within a wide other when the screen width is narrow.

6.1 ADD THE CONTENT

Go to the “index.html” file. Within the quote section 12 columns across the page, to group the destination
in the “container” div, add the “popularDestinations” div and items in separate columns on the screen. These
all its contents below the closing tag for the “spacer” div. You columns automatically adjust to display correctly
will have to use the Bootstrap grid system, which contains on any screen size. HTML

<div class="spacer v40"></div>

<div class="popularDestinations">
<div class="heading"> “md” is a Bootstrap column
definition that defines how
POPULAR DESTINATIONS the columns behave when the
width of the screen changes
</div>
<div class="row">
<div class="col-md-4 destinationItem">
<a href="deals.html" class="subHeading">
The first “popular <img src="images/France.jpg" The “src”
destinations” item attribute points
to the location
class="image" /><br />France of the image file
on the computer
</a>
</div>
<div class="col-md-4 destinationItem"> The class
“col-md-4” forces
the columns to
<a href="deals.html" class="subHeading">
change from a
horizontal lay
The second “popular <img src="images/Egypt.jpg" out to a vertical
destinations” item
layout when
class="image" /><br />Egypt the screen is of
medium width
</a>
</div>
<div class="col-md-4 destinationItem">
<a href="deals.html" class="subHeading">
The third “popular <img src="images/Africa.jpg"
destinations” item
class="image" /><br />Africa
</a>
 WEB TECHNOLOGIES
Responsive website 324 325

</div>
Closing tag for
</div> the “row” div

Closing tag for the

</div> Adds a vertical height
“popularDestinations” div of 60px between this
<div class="spacer v60"></div> section and the next
SAVE

6.2 ADD RESPONSIVENESS

Now go to the “global.
css” file and add style definitions
font-size: 18px;
for the “destinationItem” divs.
This will require a definition for }
CSS
narrow screens and another
definition for when the screen .popularDestinations .row
size is more than 575px wide.
.destinationItem {
text-align: center; Sets the alignment
of the contents of
destinationItem
}
Defines the size of the @media screen and (max-width: 575px) {
bottom margin for a
destination item depending .popularDestinations .row
on the width of the screen
.destinationItem {
margin-bottom: 20px; Sets the space between
the bottom border of
the destinationItem
} and the element below
it to 20px
}

6.3 DEFINE THE FONTS

Next, add the font style
definitions for the “heading”
.popularDestinations .heading,
and “subHeading” elements just
below the code for step 6.2. .popularDestinations .subHeading {
CSS
font-family: "Merriweather", serif;
} Default font for the
heading and subHeading
.popularDestinations .heading {
font-size: 30px; Specifies the style definitions for
Defines the height between the heading in “normal” state
line-height: 35px;
lines of text, which is
important to specify as the
}
heading can sometimes
appear on multiple lines
ADDING POPULAR DESTINATIONS

6.4 STYLE THE IMAGE

AND SUBHEADING
To set the styles for the
.popularDestinations .subHeading { Specifies the style
definitions for the
“subHeading” hyperlink, you
will require definitions for the font-size: 36px; subHeading in
“normal” state CSS
“normal” and “hover” states. You
will then instruct the browser color: #345995; Hex code for
dark-blue colour
to display the image at the
maximum width available to it. }
.popularDestinations .subHeading:hover {
The text is not underlined text-decoration: none;
when the mouse hovers over it
Sets the colour of color: #D7263D; Defines the “hover” state
the hyperlink to red when a mouse moves
} over the subHeading

.popularDestinations .image {
Displays the image at width: 100%;
100% of the width
available to it }
SAVE

6.5 RUN THE PROGRAM

Save the file and then refresh the page in the browser. The
TRAVEL-NOW
popular destinations section will resize according to the width of
the screen. All the destination items will be displayed horizontally file:///Travel-now/index.html
if the screen is wide, and vertically if the screen is narrow.
TRAVEL-NOW
In a wide screen, the In a narrow screen, the
destinationItems destinationItems POPULAR DESTINATIONS
appear as a horizontal list of appear as a vertical list of
images with hyperlinks images with hyperlinks

TRAVEL-NOW France
file:///Travel-now/index.html

TRAVEL-NOW Home Deals Contact Us

POPULAR DESTINATIONS
Egypt

France Egypt Africa

Africa

WIDE SCREEN NARROW SCREEN

 WEB TECHNOLOGIES
Responsive website 326 327
Adding last minute deals
7 The next element is the “last minute deals” section. This
section will use a carousel to show a slideshow of two images. Each
slide is a hyperlink that will take the user to the “deals.html” page.
Bootstrap contains all the functionality required to create a carousel.

7.1 DEFINE THE ELEMENTS OF THE CAROUSEL

In the “index.html” file, just below the “spacer v60”
</div> closing tag of the popular destinations section, add
the “featuredDeals” div and all its contents. This will include
a header for the section and an ordered list of place markers HTML
that will show users which slide they are currently viewing. The “h2” header contains
the name of the section

<div class="spacer v60"></div>

<div class="featuredDeals">
<h2 class="heading">LAST MINUTE DEALS</h2>
The two <div id="dealsCarousel" class="carousel slide " data-ride=
attributes – “id”
and “data-ride” "carousel"> These classes are
– are used to
used to style the
manage the <ol class="carousel-indicators"> contents of the <div>
behaviour of
the carousel
<li data-target="#dealsCarousel" data-slide-to=
"0" class="active"></li>
These classes are
used to style the <li data-target="#dealsCarousel" data-slide-to=
place-marker indicators
"1"></li>
</ol>
</div>
</div>
ADDING LAST MINUTE DEALS

7.2 ADD THE CONTENTS

Below the “carousel-indicators” closing </ol> tag, will be removed from the first carousel item and will be
add the “carousel-item” content for the slides. Make sure added to the next carousel item. You also need to add
to add the class “active” to the first carousel item. This will two classes –“d-block” and “w-100” – to the <img/> tag to
instruct the JavaScript Engine to start the slideshow on that specify the size of the images. There are two carousel HTML
particular item. When the next slide shows, the “active” class items being added here, but you can add more if you like.

Closing tag for the “carousel- The slideshow starts

indicators” ordered list with this carousel item

...</ol>
<div class="carousel-inner">
<div class="carousel-item active">
Instructs the browser
<a href="deals.html"> to display the image
as a “block” element
<img class="d-block w-100 roundCorners"
src="images/Serengeti_Safari.jpg"
Provides alt="Serengeti Safari">
alternate text for
an image if the <div class="carousel-caption d-block">
image cannot
be displayed
<h3>SERENGETI SAFARI</h3> Defines the header
of the first slide
</div>
</a>
</div>
Contains the second
<div class="carousel-item"> slide of the carousel

<a href="deals.html">
Instructs the browser to
<img class="d-block w-100 roundCorners" scale the image to 100%
of the width available to
it. The size of the slide
src="images/Taj_Mahal.jpg" increases according to
the width of the screen
alt="Taj Mahal">
<div class="carousel-caption d-block"> Adds a caption
to the slide
<h3>TAJ MAHAL</h3>
</div>
</a>
</div>
</div>

Closing tag for the Defines the header

“carousel-inner” div of the second slide
 WEB TECHNOLOGIES
Responsive website 328 329
7.3 CREATE THE BUTTONS
Now add the “next” and “previous” buttons for the
carousel so that the user can move forward and backward
The “href” attribute is used
through the slideshow. Type this code after the “carousel-inner”
by Bootstrap to manage the
</div> closing tag from step 7.2. HTML
carousel button behaviour

The <a> tag defines the

...</div> button as a hyperlink

<a class="carousel-control-prev" href="#dealsCarousel"

role="button" data-slide="prev"> The “sr-only”
class specifies
<span class="carousel-control-prev-icon" that the <span>
element will
aria-hidden="true"></span> only be visible
on a screen-
<span class="sr-only">Previous</span> reader client

</a>
<a class="carousel-control-next" href="#dealsCarousel"
role="button" data-slide="next">
<span class="carousel-control-next-icon" This <span>
element will not
aria-hidden="true"></span> be visible if the
client is a normal
<span class="sr-only">Next</span> web browser

</a>

7.4 ADD A HYPERLINK

Next, within the “featureDeals” div, add a call-to-action hyperlink
below the “dealsCarousel” </div> closing tag. This hyperlink will take the user Name of the call-to-action
to the “deals.html” page. Then, add a “spacer v60” div to include vertical button that links the home
distance before the next element on the web page. page to the deals page HTML

</a>
Closing tag for the
</div> “dealsCarousel” div

<div class="link">
<a href="deals.html">VIEW ALL LAST
MINUTE DEALS</a>
</div>
Closing tag for the
</div> “featureDeals” div Adds a vertical space
of 60px between this
<div class="spacer v60"></div> element and the next
SAVE
ADDING LAST MINUTE DEALS

7.5 ADD RESPONSIVENESS 7.6 STYLE THE TEXT

As the carousel functionality is already built in Next, define the styles for the
to Bootstrap, you will only need to define the font styles “carousel-caption” element that contains the
for the text you want to display. Start by adding the style “h3” header text in the slide. Add this code just
definitions for the “h3” element in the “global.css” file. CSS after the code from step 7.5. CSS

width: 100%; Sets the font size for .carousel-caption {

the header when the
} screen is narrow margin: 0;
@media screen and (max-width: color: black; The “h3” header will
appear in black
575px) { position: absolute;
.carousel-caption h3 { top: 50%;
Positions the top-left corner
font-size: 24px; left: 50%; of the “carousel-caption” to
the middle of the parent
Sets the font size for “carousel-item” div
} the header when the
width: 80%;
screen is wide
} color: #000; Centre aligns
the contents
@media screen and (min-width: text-align: center; on the slide

576px) { -webkit-transform: translate

.carousel-caption h3 { (-50%,-50%);
font-size: 40px; transform: translate
} (-50%,-50%);
Repositions the caption
} } to centre it in the
“carousel-item” div

7.7 STYLE THE HYPERLINK

Finally, add styles for the “View all
last minute deals” hyperlink that appears just
.featuredDeals .link {
after the carousel. This will require definitions
for both “normal” and “hover” states. text-align: right;
CSS
}
.featuredDeals a { Right-aligns
the hyperlink
Sets the “normal” color: #000; contained in
state colour of the the “link” div
hyperlink to black }
.featuredDeals a:hover {
text-decoration: none;
Sets the hyperlink “hover” color: #D7263D;
state colour to red
}
SAVE
 WEB TECHNOLOGIES
Responsive website 330 331
7.8 TEST THE PROGRAM
Save all the files and then refresh the page in the browser to
see the updated website. The carousel will animate the slideshow and
the text will resize according to the width of the screen. You should be
able to move forward and backward through the slideshow using the
next and previous buttons.

TRAVEL-NOW TRAVEL-NOW
file:///Travel-now/index.html file:///Travel-now/index.html

TRAVEL-NOW Home Deals Contact Us TRAVEL-NOW

LAST MINUTE DEALS LAST MINUTE DEALS

SERENGETI SAFARI
SERENGETI SAFARI

VIEW ALL LAST MINUTE DEALS

NARROW SCREEN
VIEW ALL LAST MINUTE DEALS
Click this button to move
WIDE SCREEN through the slideshow

Adding the copyright

8 The last element of the home
8.1 DEFINE THE COPYRIGHT
The “copyright” div simply contains a
page is the “copyright” section. This copyright notice with the specified year. Add Links the footer
this after the “container” </div> closing tag to the index page
will contain a footer with the copyright towards the end of the “index.html” file. of the website HTML
text. Just like the navigation bar, the
footer will also be repeated on every
page of the website. </div> Closing tag for the
“container” div
<div id="copyright">
<div>&copy; 2020 <a href="index.
HTML entity
for the html" class="logo">TRAVEL-NOW
copyright
symbol </a></div>
The company logo
</div>
</body>
ADDING THE COPYRIGHT

8.2 STYLE THE COPYRIGHT

Go to the “global.css” file to
define the “copyright” div. Then, add
color: #D7263D;
styling for the hyperlink that appears in
the “Copyright” section. This will require }
CSS
definitions for the “normal” and “hover”
states. Type this code just below the code #copyright {
added in step 7.7 and save the file.
text-align: center;
background-color: #345995; Sets the
colour of the
Defines the height of color: white; footer to blue
the container with the
copyright information height: 58px;
padding-top: 18px;
Sets the font size of
the copyright text font-size: 16px;
}
#copyright a {
color: white; Sets the
The cursor is colour of the
copyright text
displayed as a pointer cursor: pointer; in “normal”
state
}
#copyright a:hover {
Hex code for
Colour of the hyperlink color: #D7263D; the colour red
in “hover” state
text-decoration: none;
}
SAVE

8.3 RUN THE PROGRAM

Save all the files and then refresh the page in the
TRAVEL-NOW
browser. The “Copyright” section will display at the bottom
of the page for both wide and narrow screens. file:///Travel-now/index.html

TRAVEL-NOW
TRAVEL-NOW
file:///Travel-now/index.html SERENGETI SAFARI

TRAVEL-NOW Home Deals Contact Us

VIEW ALL LAST MINUTE DEALS VIEW ALL LAST MINUTE DEALS

© 2020 TRAVEL-NOW © 2020 TRAVEL-NOW

WIDE SCREEN NARROW SCREEN

 WEB TECHNOLOGIES
Responsive website 332 333
Creating a template and buttons that are used throughout the site.
9 Almost all websites use an HTML template to In order to achieve a standard look and feel for
add CSS, JavaScript, and common graphical elements this project, you will create a “template.html”
to their pages. The template usually includes common file and then modify it for all the subsequent
elements, such as a navigation bar, menus, footers, pages on the website.

9.1 CREATE AN HTML FILE

Start by creating a new HTML file, just as you did <head> tag from the “index.html” file and paste its
in step 1.2 of this project. Name this new file “template. contents into the <head> tag of the “template.html” file.
html”. Visual Studio creates the file with the minimum code Replace the text in the <title> tag with some asterisks
required for a valid HTML page. Now copy the entire (*) and remove the <script> tag for “home.js”. HTML

<meta name="viewport" content="width=device-width,

initial-scale=1, shrink-to-fit=no">
Replace the asterisks with the correct page title
<title>******</title>
when you use the template to make a new page

<script src="scripts/app.js"></script>
Delete this entire line of code
<script src="scripts/home.js"></script> from the “template.html” file

9.2 COPY ELEMENTS TO THE TEMPLATE PAGE

Now copy the entire <nav> tag from the “index.html” “index.html”. Remove the “active” class from the
file and paste its contents into the <body> tag of the “template. <li class=”nav-item”> and the “<span class=”sr-
html” file. Within the <nav> tag, find the <a> hyperlink to only”>(current)</span>” class from the hyperlink.
HTML

...<ul id="topMenu" class="navbar-nav mr-auto">

Remove the “active”
<li class="nav-item"> class from this line

<a class="nav-link" href= Remove the “sr-only” span

from this line as it indicates
"index.html">Home</a> the active menu item for the
screen reader
</li>

9.3 ADD A CONTAINER TAG

Next, add a “spacer” and Closing tag for
a “container” div after the </nav>
</nav> the “navbar” div
closing tag in the “template.html”
file. The spacer will add a vertical <div class="spacer v80"></div>
HTML
gap between the navbar and the
next element in the template. <div class="container">
</div>
Contains all the HTML
elements on the page
CREATING A TEMPLATE

9.4 EDIT THE HEADER 9.5 ADD THE CONTENT

Copy the “featureImage” div from the Within the “container” div, add a “spacer” div
“index.html” file and paste its contents inside the below the “featureImage” </div> closing tag. Then add
“container” div in the “template.html” file. Replace a “pageContent” div with a row of asterisks inside it.
the text in the “h1” header with asterisks. HTML HTML

<div class="spacer v60">

<h1>
</div>
Replace the asterisks
*****
with the correct
header text later on
<div class="pageContent">
</h1>
*****************
</div>
</div>
Closing tag for the
</div>
“featureImage” div
Indicates the location of the content for
each page that is created from the template

9.6 ADD THE COPYRIGHT

Finally, add another “spacer” Closing tag for the
div after the “container” </div> closing
</div>
“container” div
tag. Then, copy the “copyright” div
from the “index.html” file and paste its <div class="spacer v60"></div>
HTML
contents into the “template.html” file.
Save the file. <div id="copyright">
<div>&copy; 2020 <a href="index.
The copyright text is copied html" class="logo">TRAVEL-NOW</a>
onto the template page
</div>
</div>
SAVE

9.7 RUN THE PROGRAM

Now, open the browser and type the url for “template.html”
into the address bar. The url will be “file:///C:/Travel-now/template.
html” in Windows and “file:///Users/[user account name]/Travel-now/ Asterisks will appear in
template.html” on a Mac. place of the page title

***** *****
file:///Travel-now/template.html file:///Travel-now/template.html

TRAVEL-NOW Home Deals Contact Us TRAVEL-NOW

*****
*****

WIDE SCREEN NARROW SCREEN

 WEB TECHNOLOGIES
Responsive website 334 335
Creating a new page
10 In this section, you will create the “last minute
deals” page using the template page created earlier.
The new page will display a table of items that will
be styled using Bootstrap’s column definitions.

10.1 ENTER THE PAGE TITLE

First, you need to make a copy of the template page. In click on this file and select Rename to change
the Solution Explorer window, right click on “template.html” and its name to “deals.html”. Open the “deals.html”
select Copy. Then, right click on Travel-now and choose Paste to page and replace the asterisks in the <title> tag
create a copy of the template page “template(copy).html”. Right with the page title. HTML

<meta name="viewport" content="width=device-width,

Find the <title> tag
initial-scale=1, shrink-to-fit=no"> inside the <head>
tag and enter the
<title>LAST MINUTE DEALS</title> page title

10.2 UPDATE THE CODE

Inside the <nav> tag, find the <a> hyperlink to “deals.html”. Add the
class “active” to the <li> tag that surrounds the “deals.html” hyperlink and
then append <span class=”sr-only”>(current)</span> to the hyperlink content.
HTML

...</li> Add the “active” class

to indicate the current
<li class="nav-item active"> page in the Top Menu

<a class="nav-link" href="deals.html">Deals

<span class="sr-only">(current)</span></a>
The “sr-only” span is
</li> not visible in a normal
web browser. It indicates
the current page for a
screen reader client

10.3 ADD THE CONTENT

In the “featureImage”
div, replace the “homeIndex”
<div class="container">
class with the “deals” class to
display a different feature image <div class="featureImage
HTML
on the deals page. Then, go to
the “text” div and update the roundCorners deals">
content for the “h1” header.
<div class="text"> Replace the
asterisks with
<h1> the header
Replace “homeIndex” text for the
with “deals” in the LAST MINUTE DEALS deals page
“deals.html” file
</h1>
CREATING A NEW PAGE

10.4 UPDATE THE PAGE

CONTENTS This header contains
Go to the “pageContent” div and
<div class="pageContent"> the page title
replace the asterisks inside it with
an “h2” header, a “spacer” div, <h2>LAST MINUTE DEALS</h2>
HTML
and a new “lastMinuteDeals”
div, as shown here. <hr>
Creates a horizontal rule <div class="spacer v20"></div>
between the “h2” header and
the table of “deal” items <div class="lastMinuteDeals">
This <div> contains the various </div>
“deal” items arranged in rows

10.5 ADD THE FIRST DEAL

Now add the first “deal” item inside the Bootstrap “columns”. These columns will appear
“lastMinuteDeals” div. Each “deal” item will be a horizontally when the screen width is wide, and
hyperlink that contains a Bootstrap “row” and four vertically when the screen width is narrow.
HTML

...<div class="lastMinuteDeals">
<div class="deal"> This outer <div> acts as a
container for the hyperlink that
surrounds the row contents of
<a href="deals.html">
the first “deal” item
<div class="row">
There are four Bootstrap
columns in each row
<div class="col-sm name">
Taj Mahal Content in the first
Bootstrap column –
name of the destination
</div>
<div class="col-sm depart"> Content in the second
Bootstrap column –
21 July 2020 date of departure

</div>
Content in the third
<div class="col-sm length">
Bootstrap column –
duration of the trip
10 days
</div>
<div class="col-sm price"> Content in the fourth
Bootstrap column –
$1000 price of the deal

</div>
</div>
</a>
</div>
 WEB TECHNOLOGIES
Responsive website 336 337
10.6 ADD THE SECOND DEAL
Below the first “deal” </div> closing tag, add the second
“deal” item. You can add as many “deal” items to this page as you like,
but make sure to add an equivalent number of “carousel-items” to
the “featuredDeals” div in the “index.html” file (see pp.327–29). HTML
Closing tag for the
first “deal” div
... </div>
Container for the
<div class="deal">
hyperlink that surrounds
the row contents of the
<a href="deals.html"> second “deal” item
<div class="row last">
<div class="col-sm name">
Serengeti Safari
</div>
<div class="col-sm depart">
27 July 2020
Contents of the
</div>
second “deal” item
placed in individual
<div class="col-sm length"> Bootstrap columns
7 days
</div>
<div class="col-sm price">
$800
</div>
</div>
</a>
</div>
Closing tag for the Add a vertical
</div> “lastMinuteDeals” div space between
this item and
<div class="spacer v60"></div> the next
SAVE

10.7 DEFINE THE

BACKGROUND IMAGE
Now go to the “global.css” file and
.featureImage.deals {
define the “featureImage” that will
appear as the background image background-image: url(../images/
CSS
for this section. Type this code just
below the code added in step 8.2. deals.jpg); Sets a new
feature image for
} the deals page
CREATING A NEW PAGE

10.8 STYLE THE ROW

Next, define the styles for
the rows that will apply to each “deal”
.lastMinuteDeals .row {
item. Specify that the row with the
class “last” should have a different padding-bottom: 15px;
CSS
border, and the row should change
colour when the mouse hovers margin: 0;
above it. Add this code below the Sets the width
code added in the previous step. border-width: 1px 0 0 0; of the border
surrounding
border-style: solid; a row

Defines the style of the

border-color: #888; Sets the
border colour
row’s four borders
} to a shade
of grey
.lastMinuteDeals .row.last {
Sets a different border border-width: 1px 0 1px 0;
width for the last row
}
.lastMinuteDeals .row:hover {
Hex code for
background-color: #BC8796;
the colour
mauve
color: white;
}

Changes the text colour from

dark grey to white when the
mouse hovers above the row

10.9 ADD RESPONSIVENESS TO THE ROWS

The rows must appear vertically when
the screen width is narrow. To do this, instruct the Defines a different padding for
browser to apply a different padding definition to the row when the width of the
the “row” divs. screen is less than 576px CSS

color: white;
}
@media screen and (min-width: 1px) and (max-width: 575px) {
.lastMinuteDeals .row {
padding: 0px 15px 20px 15px;
}
}

Adds spacing between the content

and the container boundary
 WEB TECHNOLOGIES
Responsive website 338 339
10.10 STYLE THE HYPERLINK
Now add style definitions
for the “link” div that contains the
.lastMinuteDeals div {
hyperlink for the rows, including
the “normal” and “hover” states text-align: left;
CSS
for the anchor tag.
}
.lastMinuteDeals a { Defines
“normal”
color: #333; state

}
Defines .lastMinuteDeals a:hover {
“hover” state
text-decoration: none;
color: white;
}

10.11 ALTERNATING THE

ROW COLOURS
Make the “deal” items table more
.lastMinuteDeals .deal:nth-child(odd) {
visual by adding styles that alternate Sets the colour
the background colour of the “deal”
background-color: #C0C0C0; of every CSS
div. Use the “nth-child(odd)” and odd-numbered
“nth-child(even)” selectors to specify } row to silver
which deal divs qualify for the
style definition. .lastMinuteDeals .deal:nth-child(even) {
Sets the colour of background-color: #D3D3D3;
every even-numbered
row to light grey }

10.12 ADD RESPONSIVENESS TO THE COLUMNS

Now add styles to define the Bootstrap columns.
Specify the styles for both wide and narrow screen widths, Sets the spacing between
then add a style definition for the name column so that the the content and the
“name” field appears in a bold font. Then, save the file. column boundary CSS

.lastMinuteDeals .col-sm {
padding: 15px 0px 0px 15px; Defines a different padding for
the column when the width of
margin: 0; the screen is less than 575px

}
@media screen and (min-width: 1px) and (max-width:575px) {
CREATING A NEW PAGE

.lastMinuteDeals .col-sm {
padding: 15px 15px 0px 15px;
}
}
.lastMinuteDeals .name { The “name” column text
displays in bold font
font-weight: bold;
}
SAVE

10.13 RUN THE PROGRAM

Open the browser and type the url for “deals.html” into
the address bar. The url will be “file:///C:/Travel-now/deals.html” in
Windows and “file:///Users/[user account name]/Travel-now/deals.
html” on a Mac. You can also refresh the “index.html” page in the
browser and then select “Deals” on the navigation bar to see what
this page looks like.

TRAVEL-NOW TRAVEL-NOW
file:///Travel-now/deals.html file:///Travel-now/deals.html

TRAVEL-NOW Home Deals Contact Us TRAVEL-NOW

LAST MINUTE DEALS

LAST MINUTE DEALS

LAST MINUTE DEALS

Taj Mahal
21 July 2020
10 days
LAST MINUTE DEALS $1000

Taj Mahal 21 July 2020 10 days $1000 Serengeti Safari

27 July 2020
Serengeti Safari 27 July 2020 7 days $800 7 days
$800

© 2020 TRAVEL-NOW © 2020 TRAVEL-NOW

WIDE SCREEN NARROW SCREEN

 WEB TECHNOLOGIES
Responsive website 340 341

Hacks and tweaks

Google fonts
This project uses Google Fonts (https://fonts.google.com/) to provide the
text fonts. You can explore this library and use different fonts and icons Updated line of code
to enhance the look of your website. You can even go to Google Material in the <head> tag with
Icons (https://material.io/) and search for more options for a favicon. the new font names

<link href="https://fonts.googleapis.com/css?family=
Suez+One|Oswald|Niconne" rel="stylesheet">

INDEX.HTML

font-family: "Suez One", serif;

font-family: "Oswald", sans-serif; Update the fonts in the comment
section and use them wherever
font-family: "Niconne", cursive; applicable in the code

GLOBAL.CSS

TRAVEL-NOW
file:///Travel-now/index.html

TRAVEL-NOW HOME DEALS CONTACT US The font “Oswald” is used

for the “navbar” items

TRAVEL-NOW The font “Suez One”

is used for the
“featureImage” text

Bootstrap SASS
This project points to a Content Delivery Network (CDN) version https://getbootstrap.com/
of the CSS file, which contains all the default styles used by Bootstrap. docs/4.0/getting-started/theming/
While programming, you will need to override these default styles
with your own style definitions. To avoid doing this every time, you
can simply modify the default Bootstrap files so that they produce
your custom styles without the need to override them. This can be
achieved by downloading the Bootstrap source files, editing the SASS https://sass-lang.com/
variables (variables that define a value and can be used in multiple
places), and compiling the final CSS file.
HACKS AND TWEAKS

PayPal “Buy Now” buttons

It is quite simple to allow users to make payments on your website. You
can do this by adding a PayPal “Buy Now” button to the deal items on the
“deals.html” page. To receive money via PayPal, it is necessary to open a www.paypal.com
PayPal account and verify your bank account details. The email address that
you register as the login for your PayPal account will be used to identify you
as the intended recipient of the payment. The code below creates a button
that allows users to buy a deal. Clicking on the button will redirect users to This form allows the user
a secure page on the PayPal site, where they can make the payment. to make a payment to the
Travel-Now website via PayPal

...<div class="col-sm price">

$1000
Closing tag for the
</div> “col-sm price” div

Content in the fifth Bootstrap

<div class="col-sm buy">
column – “Buy Now” button
<form method="post" target="_blank" action=
"https://www.paypal.com/cgi-bin/webscr"> Email address
of the PayPal
<input type="hidden" value="_cart" name="cmd" /> account that
receives the
<input type="hidden" value="yourpaypalemailaddress payment

@example.com" name="business" />

<input type="hidden" name="upload" value="1" />
<input type="hidden" name="charsetmm" value="US-ASCII" />
<input type="hidden" value="1" name="quantity_1" />
<input type="hidden" value="Taj Mahal" The name of
the item being
name="item_name_1" /> purchased will
be passed to
the PayPal page
<input type="hidden" value="1000" name="amount_1" />
<input type="hidden" value="0" name="shipping_1" />
<input type="hidden" value="USD" name="currency_code" />
<input type="hidden" value="PP-BuyNowBF" name="bn" />
<input type="submit" value="Buy Now" class="roundCorners" />
</form>
</div>

Clicking this input button submits This class defines the shape
the form data to the PayPal url of the “Buy Now” button
 WEB TECHNOLOGIES
Responsive website 342 343

TRAVEL-NOW
file:///Travel-now/deals.html

TRAVEL-NOW Home Deals Contact Us

The button appears in the fifth

LAST MINUTE DEALS column. Try styling it yourself

Taj Mahal 21 July 2020 10 days $1000 Buy Now

Serengeti Safari 27 July 2020 7 days $800 Buy Now

© 2020 TRAVEL-NOW

Web page templates

A website usually has a common template that is repeated
on every page of the site. This template includes links to the TRAVEL-NOW
CSS files, JavaScript files, and the common HTML elements, file:///Travel-now/index.html
such as the header and footer elements that appear on each
page. Unfortunately, there is no way to employ a template
using only HTML and JavaScript. You would need to use a
TRAVEL-NOW Home Deals Contact Us
server-side language, such as C# MVC or Python Django
to inject the header and footer into each page automatically.
This project also uses a template that is used to create the
other pages of the website. It will be very difficult to maintain
this process if there are a lot of pages. Explore the “layout file”
concept in C# MVC and the “template inheritance” feature CONTACT US
in Python Django to solve this problem.

Try creating this page using the

concepts from a server-side language
CONTACT US
TELEPHONE
https://www.asp.net/mvc
EMAIL

ADDRESS

https://www.djangoproject.com
© 2020 TRAVEL-NOW
Other programming
languages
Every profession has its own vocabulary and ways to
describe common problems and solutions. Programming
languages were developed to help humans communicate
with computers. Most languages are designed for a specific
task or domain, but are often adapted for other purposes.

Grouping programming languages Programming languages are also grouped into families,
Human languages are grouped into families (such and often borrow words and structures from each
as Germanic or Dravidian) that use similar alphabets, other. For example, C, C++, Objective-C, Java, C#, Go,
vocabulary, and structures. If you know one language and Swift are all related, so developers who know one
in a family, it is easier to learn others. of them can learn the other languages more easily.

USER APPLICATION OPERATING HARDWARE

SYSTEM

Languages for scripting Languages for systems Machine and

Scripting languages are usually System languages are usually assembly languages
designed to create “scripts”, or short designed for large, complex At the lowest level, each
programs, often written to software systems, such as central processing unit (CPU)
automate tasks that might otherwise operating systems, compilers, has its own machine language,
be done manually. These languages databases, and office applications, written in binary (1s and 0s)
were designed for a specific where speed, efficiency, and with a small set of operations.
purpose, such as Perl for report reliability are important. These An assembly language
handling and VBA for scripts in languages, however, can seem represents similar operations
Microsoft Office. Popular scripting cumbersome for simple programs. in a form that is easier to read
languages include JavaScript/ Popular systems languages include and write. Programs in other
TypeScript, Perl, PHP, Python, C/C++, Objective-C, Java, C#, languages are converted into
and Ruby. Go, and Swift. assembly before they are run.

101100011010101
010011001010110
OPERATING
SYSTEM 101100011010101
010011001010110
DISK PACKAGE
DEFRAGMENTER MANAGER
 REFERENCE
Other programming languages 344 345
Languages for data
Some languages are designed to work with MATLAB/ APL FOR
large sets of data. The data might come OCTAVE FOR DATA
NUMERICAL HANDLING
from experiments, monitoring systems, COMPUTATION
sales, simulations, and other sources in
science, engineering, business, education,
or other areas. People may want to process
this data to reduce noise, analyse trends
or patterns, and compute statistics.
Languages to manipulate and
analyse data include APL,
MATLAB, and R.

S/R FOR STATISTICAL

COMPUTING

Languages for special purposes other information. SQL is used to manage

Some programming languages are designed to solve databases. Maple and Mathematica are used
specific problems, and might not be useful in other for symbolic mathematics. LISP and Scheme
areas. PostScript, TeX, and HTML describe the are useful for AI (artificial intelligence). Prolog
content and layout of pages with text, images, and is used for logic programming.

/CSS, POSTSC
ML R
HT OR GR APHIC IPT
F S
ABASE
DAT
OR PLE, MATH
MA SYMBO EMA
LF

O R LIC T
F M
SQ

IC TH
A
A
LISP/SCH

PRO
EM

LO

G
FO
EF

R LOGIC
OR

AI
EARLY PROGRAMMING LANGUAGES

Early programming
languages
There are other widely used
languages, some with a long
history. Fortran was created
in the 1950s for scientific and
engineering applications. COBOL
was created around 1960 for
business applications. BASIC was
an easy language created in the
mid-1960s for students. Pascal was
FORTRAN FOR SCIENCE COBOL FOR BUSINESS
created around 1970 to encourage
structured programming practices,
and was widely used in education.
Ada was created around 1980 to
reduce the number of different
languages used across the US
Department of Defense (DoD).

PASCAL FOR EDUCATION ADA FOR MILITARY

Visual languages messages. Such languages are often designed for

In visual (or block-based) languages, programs are non-programmers in specific areas, such as education,
created graphically rather than with text. For example, multimedia, and simulation. Popular visual languages
a user might drag elements into position, connect include Blockly, Alice, and Scratch in education, and
them, and then type in number values or text Kyma, Max, and SynthEdit for music.

BLOCKLY SCRATCH
 REFERENCE
Other programming languages 346 347
Other programming languages their careers. The table below lists some of these
There are hundreds of programming languages, and programming languages, with information on
most developers are proficient in a few, familiar with when they were first developed, the lead creator,
more, and expect to learn new languages throughout and a brief summary of key ideas and major uses.

POPULAR PROGRAMMING LANGUAGES

Language, date, and creator Key ideas and major uses
C (1972) Designed to be concise, portable, and to generate efficient machine code. It is
Dennis Ritchie widely used for operating systems, compilers, interpreters, and large applications.
Many other languages have adapted features and syntax from C.

C++ (1983) Designed to add object-oriented features to C (in C, “C++” adds 1 to the
Bjarne Stroustrup variable c). Widely used for operating systems, compilers, interpreters,
and large applications.

Java (1995) Designed to be an object-oriented language based on C and C++. Java was
James Gosling meant to be a “write once, run anywhere” programming language – code written
on one type of computer can be run on other types. Widely used for desktop
applications and browser-server applications.

Python (1991) Designed for readability, and to support multiple programming styles. Uses
Guido van Rossum a small core language with libraries that add more specialized functions.
Widely used in web applications, scientific computing, and for scripting in
other software products.

PHP (1994) Designed for web development (“PHP” originally meant “Personal Home
Rasmus Lerdorf Page”), where it is widely used.

JavaScript (1995) Designed to create interactive web pages and applications, where is it widely
Brenden Eich used. JavaScript is also used in some web servers, so that a web application
can use the same language in the browser and server.

Fortran (1950s) Designed at IBM (International Business Machines Corporation) for scientific
John Backus and engineering applications, which often involve many numeric calculations.
Named from “FORmula TRANslation”.

COBOL (1959) Designed for data processing, COBOL was based on the earlier work of Grace
Hopper. It was supported by the US Department of Defense, which led to its
wider adoption. Named from “COmmon Business-Oriented Language”.

BASIC (1964) Designed to be easy to use for students in many fields, not just science and
John Kemeny and Thomas Kurtz mathematics. It expanded into Microsoft Basic (1975) and Visual Basic (1991).
Named from “Beginner’s All-purpose Symbolic Instruction Code”.

Ada (1980s) Designed for embedded and real-time systems and to reduce the number
Jean Ichbiah of languages used across the US Department of Defense (DoD). Named after
Ada Lovelace, often described as the first computer programmer.

SQL (1970s) Designed to edit and search databases, especially “relational databases” (when
Donald Chamberlin and Raymond Boyce data is stored in tables that are related to each other in various ways). SQL is
short for “Structured Query Language”.
Glossary
algorithm branching statement phone, and email address, and provide
A sequence of steps or instructions that A program statement that chooses one functions to set or display them. (2) In
complete a task or solve a problem. In of several possible paths or sets of steps, CSS, a style definition that can be added
programming, an algorithm often includes usually based on the value of an expression. to any number of elements.
repeated steps, decisions between two For example, an “if-then-else” statement
or subsequences of steps, and steps that takes the “then” path if an expression is true, cloud
refer to other algorithms to do subtasks and the “else” path if an expression is false. A set of Internet servers that
or solve subproblems. Also called a conditional statement. can be used instead of a local
computer. Cloud storage stores
API (Application Programming Interface) Boolean files and other data, and cloud
A set of definitions that programmers A value that can be either true or false. computing does computation.
can use to access another system without Named after George Boole, who defined
having to understand all of its details. The a logic system based on such values. compiler
definitions might include functions, classes, A program that analyses a computer
data structures, and data values. Originally bug program and converts (compiles) it
named because it defines an interface for A defect, or an error, in a program or into machine code so it runs faster.
programmers to develop applications using other system that prevents it from See also interpreter.
an underlying system. See also library. working correctly. The term was used in
engineering long before computers, but composite data
array is often associated with a story told by Data that is created by combining other
A collection of items stored in adjacent Grace Hopper about a moth stuck in an simpler data. For example, a string of
locations in the system’s memory, using early computer, causing wrong results. characters, an array of numbers, or an
a single name and a numeric index. object. See also primitive data.
The index usually starts at 0. Often, call
all elements in the array have the same A program statement that causes the concatenate
type. For example, all integers, or all computer to run another function, and To combine items, usually character
strings of characters. An array is one return to the original function when done. strings, one after another. For example,
way to store a list. See also list. concatenate “snow” and “ball” to
carousel get “snowball”.
attribute A software component in Bootstrap
A specific piece of information associated that cycles through a set of elements, conditional statement
with a data object. For example, an image like a slideshow. See branching statement
would have attributes for height and width,
and a sound would have attributes for CDN (Content Delivery Network) constructor
length and sampling rate. A network of servers spread across different A special function used to
places that can deliver the same content create new objects of a class.
binary (data or services). For example, when a web Typically, the constructor
A numbering system, used by computers, browser loads content for a page, the CDN allocates memory, initializes
that has only two digits (0 and 1), not the can deliver content from nearby servers, variables, and does other setup.
usual decimal system with ten digits (0 to 9). which reduces the wait time and the
In binary, each position is two times the network traffic. data
position to its right, rather than ten times in Any information stored in
decimal. For example, 101101 = 1*32 + 0*16 + child object or used by a computer.
1*8 + 1*4 + 0*2 + 1*1 = 45. An object created from a prototype in a
parent object. The child shares (inherits) data binding
bit all functions and properties of the parent, Connecting (binding) the
Shortened from “binary digit”, it is the basic but can override them. For example, data values in two or more objects
unit for information or communication. the parent might define functions and or systems so that changing one
The value of a bit can be either 0 or 1. Thus, properties for any book, and each child also changes the others. For example,
an eight bit device mostly uses storage would define the author, title, publisher, binding a GUI element to a data object
elements with 8 bits, which can store and date for a specific book. ensures that changes to the object
2⁸ = (256) different values. appear in the GUI, and GUI changes
class also change the object.
block element (1) A definition or description of a
An HTML element that breaks the flow category, which usually includes data debug
of text and changes the layout of the and functions, and is used to create To remove bugs in a program.
page. For example, paragraphs (<p>), lists (instantiate) objects in that category. For This might involve running the
(<ul>, <ul>, <li>), and tables are all block example, the class for employees might program with different inputs, adding
elements. See also inline element. specify that every employee has a name, statements to print or store values
 348 349
as the program runs, or watching parameters to give information to the index number
memory values and how they change. function, and a result for the code that A number indicating the position (index) of
See also bug. called the function. Also called procedures, an element in an array. Many programming
subroutines, and methods (especially in languages use square brackets with arrays,
directory object-oriented languages). so “myArr[3]” means the element in position
(1) Also called a folder; a structure to “3” of array “myArr”.
store files, and sub-directories with git
other files. (2) A list of resources and A popular version control system, used inline element
how to access them. to track changes in a set of files, so that An HTML element that does not break
users can easily collaborate and access the flow of text or change the layout
ECMAScript different versions of the same file. of the page. See also block element.
The official definition for the scripting See also version control system.
language used in browsers and servers, input control
to provide a standard that could be used global variable A part of a user interface, such as
by JavaScript, JScript, ActionScript, and A variable that can be used anywhere in a a button, checkbox, or text field,
other Web languages. program. See also local variable, variable. that allows a user to provide input
to a program.
element GUI (Graphical User Interface)
(1) A single value in a larger set, such as Often pronounced “gooey”, a user instantiate
an array. (2) In HTML, a part of a document, interface is the name for graphical To create a new object, usually
often with a start tag, content, and a stop elements, such as buttons, menus, using its class definition.
tag. For example, “<em>DANGER</em>” text fields, and checkboxes that make
is an element that shows “DANGER” as up the part of the program that a user integer
emphasized text. can see and interact with. It is different A number without a fractional part,
from a command line interface where also called a whole number. Usually,
event everything is displayed as text. a computer can represent a large, but
A description of something that has not infinite, set of integer values.
happened, often used as a signal to hardware
trigger responses in a program. For The physical parts of a computer interface
example, a mouse-click event could such as the processor, memory, network A boundary between two parts of
submit a form or display a menu. connectors, and display. See also software. a system. Thus, a user interface (UI) is
how a user interacts with the system,
execute hack and an API (Application Programming
Also called run; the command (1) An ingenious change to code Interface) is a set of definitions to help
to start a program. that makes it do something new or programmers develop applications
simplifies it. (2) To break into other using an underlying system.
file object computer systems.
An object that describes or gives access Internet
to a file stored in the system’s memory. hosting The global computer network,
Also called web hosting; providing which is actually a network of
float server and Internet access to clients networks. Shortened from
A number with a decimal point in it. for their own websites. In dedicated “interconnected network”.
It allows a computer to store very large hosting, each client gets their own
and very small numbers more efficiently. server; in shared hosting, many clients interpreter
Also called a floating point number. share a single server. A program that executes computer
programs one statement at a time,
flowchart hover state without first converting (or compiling)
A graphical way to show the steps, The appearance of a GUI element the program to machine code.
branches, and loops in an algorithm. when the cursor or pointer hovers
above it. For example, a button or iterate
framework text field might have a different colour To execute a task or set of statements
A collection of software elements that or border when the mouse hovers repeatedly. Most programming languages
can be combined and customized in above it, to indicate that it is active or have special syntax to make it easier for
various ways, usually to create user ready to use. Also called “mouseover” programs to iterate, either a set number
applications. For example, Angular, state. See also normal state. of times, or until some condition is met.
Django, Express, jQuery, React, and For example, a program might iterate
Ruby on Rails are all frameworks used hyperlink through an array to perform the same
for websites and web applications. A text or graphical element that actions on each element.
can be clicked, tapped, or otherwise
function selected to access other information, iteration
Code that carries out a specific task, often using a url. The other information can The general process of iterating, or the
working like a program within a program. be in the same document, another process of repeatedly going through
Often, a function has a name, a set of input document, or on another website. a set of statements in the code.
GLOSSARY

library metadata parameter

A set of resources that can be reused in Data that describes other bits of data. An input for a function. In most
other projects. These resources might For example, web pages use metadata languages, a function definition
include functions, classes, data structures, to specify the page title, language, and includes a name for each input.
and data values. A library is similar to an HTML version, while music files use For example, the function “sum(x,y)”
API. For example, a math library might metadata to specify the composer, has two formal parameters “x” and “y”.
have a constant value for pi and functions performer, title, date recorded, style
to compute the sin, cosine, and tangent of music, copyright status, and other parent object
of an angle. See also API. information. An object used to create child
objects. The parent has a prototype
literal module with functions and properties that
A fixed value written in source code. A package of ready-made code that can can be used by each child. See also
In most programming languages, be imported into a program, making lots child object.
integer and real number literals are of useful functions available.
written normally, and strings of parse
characters are written between network To take text or other input data and
quotation marks. A set of computers connected together to create a more useful structure out
allow the sharing of data and resources. of it. For example, a browser parses
list a file of characters and creates a data
A set of data values, where each normal state structure (called the Document Object
value has a specific position in the The way a GUI element (for example, Model, or DOM) that shows which
list. One way to store a list is as an a button) appears normally. See also elements contain which other elements.
array. See also array. hover state.
payload
local variable object The actual message within a larger
A variable that can only be used with In object-oriented programming, an communication. For example,
a particular function or other limited object is a component that consists of when a browser loads a web page,
part of a program. See also global data and code to manipulate the data. the payload is the actual HTML that
variable, variable. will be displayed.
object-oriented
loop counter An approach to coding where port
A variable that counts (tracks) the number programs are organized into classes (1) A virtual connection point
of times a loop has been repeated. and objects, which typically contain used to contact a specific service
data values and functions that use or or process. (2) To adapt software
machine code change those values. to run on another operating system
The set of instructions that is or on other hardware.
used by a computer processor. opcode
It is difficult for users to read Part of a machine code instruction that primitive data
or write machine code, so other specifies the operation rather than other The basic data type that is used to build
programming languages are used information (such as the memory locations) more complex data types. For example,
with a compiler or interpreter to to use. Shortened from “operation code”. characters, integers, and real numbers.
convert them to machine code. See also operand. See also composite data.

malware operand primitive variable

Short for “malicious software”; Parts of a machine code instruction that A variable that contains primitive
any software designed to gain do not specify the operation, but other data. See also reference variable.
illegal access to a computer or information such as the memory locations
system. Malware includes viruses, to use. More generally, a parameter passed processor
worms, spyware, and ransomware. to a function. See also opcode. The hardware that actually executes
a program. Also called the central
memory OS (operating system) processing unit or CPU.
Storage used by a computer, The underlying software system that
using a wide range of technologies, manages resources (both hardware protocol
including ROM (read-only memory), and software) and provides services A set of rules that define how something
RAM (random access memory), used by other software. For example, works. For example, HTTP is a high level
solid states drives (SSDs), hard disk Microsoft Windows, Apple’s macOS, protocol that describes how a browser and
drives, and optical drives (e.g., CDs and Linux. a web server communicate using lower
or DVDs). In general, faster technologies level protocols that handle other details.
are much more expensive, so most output
computers use smaller amounts The result of a program, which might prototype
of expensive memory (RAM) and be displayed on a screen, stored in In JavaScript, a built-in variable with
larger amounts of cheaper memory a file, or sent to another program functions and properties that can be
(hard disk drives). or computer. used by each child object.
 350 351
pseudo-class servers, and web servers. A hardware server variable
In CSS, a way to define a special can run more than one software server. The name associated with a value
state of an element. For example, stored in the system’s memory. In
the pseudo-class “:hover” defines software computing, a variable can have
an element’s hover state. A set of instructions or data that tells different values at different times.
a computer what to do, including the
reference variable operating system, libraries, server software, version control system
A variable that does not contain primitive and user applications. See also hardware. A system that keeps track of files, so
data, but refers to a location in the system’s that users can easily collaborate and
memory where the data is stored. Typically source code access different versions of the same
used for arrays, strings, and other composite The set of instructions that is read and file. Often, but not necessarily, used
data. See also primitive variable. written by users. Source code can also be in software development.
intended for an interpreter or a compiler.
run view
See execute state In the Angular framework, a set
The way a GUI element (a button or a of screen elements that control
run time text field) looks, which may change over what the users can see.
(1) The period of time during which a time. For example, a button might be in
program runs. (2) Software that is used its normal state most of the time, but may virus
to help programs run. switch to its hover state when a cursor A type of malware that inserts
or pointer moves over it. its code into other programs,
SASS variable creating more copies of itself.
A variable defined using SASS string
(Syntactically Awesome Style Sheet). A sequence of characters that are stored web page
SASS is an extension to CSS and adds together. This includes letters, numbers, A document that can be accessed
features, including variables, that and punctuation. In most languages, literal over the Internet. It is displayed in
make it easier to develop style sheets. strings are written within quotation marks. a web browser.

scope style definition website

The parts of a program in which the specific In CSS, the definition of a specific style for a A set of related resources, such as
name of a variable, function, or class has category of text. For example, the style web pages, images, sounds, and videos
meaning. For example, a global variable’s definition for a list might include what type that are stored and accessed together
scope is the entire program, while a local of bullets to use and how much to indent. over the Internet using a web browser.
variable’s scope is a single function.
subset
screen reader A group of items taken from another set.
A program that finds text on the
screen and reads it aloud, to assist syntax
users with limited vision. The part of code that is focused on the rules
followed by text rather than its underlying
script meaning (the semantics). For example, the
A program written in a scripting syntax for emphasized text requires an
language, usually intended for an <em> tag, the text, and an </em>.
interpreter rather than a compiler.
Originally, scripts were short programs tag
that performed very specific tasks, In HTML, the text marking the start and end
but over time scripting languages have of an element, usually using angle brackets.
been used for many other purposes. For example, <em> and </em> are tags
used for emphasizing a piece of text.
semantic
The part of code that is focused on the template literal
underlying meaning of text, rather than A way to write a string that can
the rules it follows (the syntax). Most HTML span multiple lines and insert the
tags focus on the meaning and role of the values of other variables.
data, not the appearance. For example,
<h1> marks a heading and <em> marks tuple
emphasized text, but neither describes A short list of items or values; a 2-tuple has
how the text should be displayed. two items, and an n-tuple has n items.

server URL (Uniform Resource Locator)

A hardware or software system that provides A consistent way to refer to the location
services to other systems or clients. Software of some resource and how to access it
servers include database servers, mail via the Internet.
Index animation (CSS) 239
answer blocks (Scratch) 47
APL 345
banner 221, 224
logo 251
styling 251
browsers 217
CSS features 255
Developer Tools 281, 305
Page numbers in bold refer append() (Python) 113 bar charts 134, 287 and screen size 240
to main entries. app.js 290, 291, 308 BASIC 346, 347 transitions 249–50
application layer protocol 207 Basic Input/Output System (BIOS) 17 Brush tool (Scratch) 67, 88
32-bit processors 96, 97 applications software 17 binary digits 23, 344 Budget manager 158–75
64-bit processors 96, 97 architecture, computer 96, 97 BIOS see Basic Input/Output adding a budget 161–64
@media screen 315 Arduino 23 System converting the code into a class
$(document).ready function area charts 287 bitmap mode 33, 57, 67, 68, 82 169–72
(home.js) 293, 321 arithmetic operators 43, 102, blind people 214 hacks and tweaks 174–75
.NET Core + ASP.NET Core 217 104, 199 block-based languages 346 program design 159
!important declaration 239 arrays 268, 298 Blocks Palette (Scratch) 30, 35, 55 setting up 160
and loops 122, 275, 276 Add Extension section 35, 37, 39, tracking expenditure 164–68
arrow keys 80, 84, 178, 185, 186 58–59 tracking multiple budgets 172–73
A artificial intelligence (AI) 345 Events section 40 what the program does 158–59
About Menu 303 artists 18 Looks section 38 building (software development)
accessibility (websites) 214–15 ask blocks (Scratch) 47, 55, 59, Variables section 42, 43, 58, 69, 20
Actor class (Pygame Zero) 179, 183, 62, 63 70, 72 build a web page 216–33
184, 186, 197–98 ASP.net and web development blocks (Scratch) adding a contact section 230–31
Ada 346, 347 217 colour-coded 34–35 adding the copyright notice 233
Adobe Illustrator 286 assembly languages 22, 344 defining your own 51 adding the footer 232
agile model 21 Asteroid dodge (Scratch) 80–91 dragging and dropping 74 adding more feature boxes
Agile Software Development 181 code the rocketship 83–86 Blocky 346 226–29
AI see artificial intelligence create the asteroids 86–89 body, styling 307 adding the subscribe section 232
AJAX (Asynchronous JavaScript) hacks and tweaks 90–91 body tag 247, 310 feature box control 224–26
265 how the game works 80 Boolean expressions 44, 104, 105 getting started 218–20
alert box 272, 273 prepare the launch 82–83 combining 45 how it works 216
algorithms 53, 270 program design 81 using 45 HTML stage 216
Alice 346 Atom (code editor) 208 Boolean operators 104, 270–71 installing an IDE 217–18
analysis (software development) 20 Boolean values 270 program requirements 217
anchor property (Python) 183 Boolean variables (JavaScript) 266 scrolling to the top 230
and (logical operator) 270 B Bootstrap 285, 341 structure the home page 220–24
and block (Scratch) 45 backdrop (Scratch) column definition 305, 335, 336 business
Angular 285 changing 54, 64, 78, 82 container 311 applications 95
animate() command (JQuery) 294 colour cycling 90 creating a carousel 327–31 programming languages 346
animate() function (Pygame Zero) designing 66–68 grid system 324 buttons
197, 198, 202 Sounds tab 79 order of tags 310 button widgets 147, 148
animating the web page 288–303 switching 85 responsive layouts 304, 309 call-to-action 220, 224, 258, 329,
adding JavaScript files 290–92 Backdrop Library (Scratch) 78 SASS 341 330
adding social media 301–2 background colour border styling 239, 245 carousel next/previous 329, 331
exploring fonts and icons canvas widget 147 Boyce, Raymond 347 clear 155
300–301 CSS styling 235, 238, 241, 247, Brackets (code editor) 208 creating in Scratch 56, 60–61
getting started 289–90 307, 339 braille 214, 215 hamburger menu 310, 311
hacks and tweaks 300–303 promo bar 248 branching Open project 135, 153
managing promotional messages specifying 312 JavaScript 271 PayPal “Buy Now” 342
296–99 subscribe section 259 Python 105, 119 radio 212
managing the scroll to top button background images 251, 337 break command (Python) 110 with rollovers 243, 253, 254
292–95 background music (Scratch) 79 breakpoints 281 scroll 257–58
page template 303 background (Pygame Zero) break statement 271 scroll to top 257, 292–95
program design 288 chequerboard 199–201 broadcast blocks (Scratch) 48, 85 Shop Now 253, 254
project requirements 289 drawing 181 broadcasts 48–49 subscribe 260
what the program does 288 Backus, John 347 uses of 49 templates 333
 352 353
C Clean up Blocks (Scratch) 76 container tags 333 Data-Driven Documents see D3.js
C 94, 344, 347 clear property 246 content attribute 240 data types
C# 303, 344 click() function (JQuery) 294 Content Delivery Network see CDN converting 139
C# MVC 303, 343 client/server model 206, 207 content organization (websites) 214 non-primitive 268
C++ 344, 347 client-side scripting 209, 264, 289 continue command (Python) 110, primitive 266–67
calculations 43, 102 clock events 179 111 datetime module (Python) 116
calling (functions) 112, 113, 310 clock object 194 Control blocks (Scratch) 40 deaf people 214
scheduling 194 COBOL 346, 347 coordinates 36, 69, 70, 72 Deals hyperlink 312
call-to-action button 220, 224, 258, Code Area (Scratch) 30, 35 canvas widgets 150 debugging
329, 330 code editors 208–9, 265 grid and screen 182 checklist 133
cameras 17 CodePen 209 copyright 220, 233, 305, 331–32, code editors 208–9
canvas widget, Tk 147, 150 coders 334 debuggers 22, 106, 133, 281
carousels 327–31 becoming a coder 16 styling 263 JavaScript 273, 280–81
cars 16 in the real world 18–19 corners, styling 308 Python 94, 106, 130–33
Cascading Style Sheets see CSS Codeshare 265 costumes (sprites) 30–31, 33, 38, 57, decisions (Scratch) 44–45
case sensitivity 99 code sharing websites 265 61, 78, 85, 91 declarative programming 24
casting 103 collision detection 47 cross-platform run time engines default code block 271
catch block 281 colour 289 delay, introducing 41
CDN (content delivery network) background 235, 238, 241, 247, CSS 23, 234–39 Department of Defense (US) 346,
290 307, 312 animating the web page 288, 289, 347
central processing unit (CPU) font 235, 247 301, 303 descendant selector 237
344 Pygame Zero 190 building a web page 216, 218, design
centring 247, 313 rows 339 222, 233 program 53
Chamberlain, Donald 347 styling 238 debugging 281 software development 20
characters 103 text 262 and graphics design 286, 287 desktop computers 16, 215, 240,
disallowed see entities website style sheet 244 meta links 303 241, 305
Chart.js 287 colour-matching games 179 new features on browsers 255 Developer tools 222, 280, 281,
charts columns responsive layouts 240–41, 304, 305, 313
area 287 adding responsiveness 339–40 306–8, 312–16, 318–21, 325–26, development environment 217, 305
doughnut 287 Bootstrap 305, 335, 336 330, 332, 337–40, 341 dictionaries, Python 138, 145, 158,
flowcharts 53, 144 column headers 149 selectors 236–37 159, 160, 174
Gantt charts 134, 135, 149, 151, column numbers 182 styling 238–39 DNS (Domain Name Systems)
152 column values 137, 138, 160 styling the web page 242–46, 250 protocol 207
JavaScript 287 feature box styling 253 CSV files 135 Document Object Model (DOM)
line 287 combine id and class selector 237 creating and reading 136–43 265
Python 146–51 comma-separated values see CSV Python library 136, 138, 139 DOM see Document Object Model
cheat codes 90 communication protocols 206, csv.reader object 138, 139 Domain Name Systems see DNS
checkboxes 212 207 current year Sensing block (Scratch) doughnut charts 287
Check Module (IDLE) 131 community sharing 265 45 do while loops (JavaScript) 275
child elements 237, 238 company logo 220, 223, 224, 286, drag and drop interfaces 25
child objects 282, 283 305, 311, 313 Scratch 28, 30, 35, 74, 76, 84
child selector 237 comparison operators 270 D draw_actors() function
child tags 210, 211, 221 compilers 23 D3.js (Data-Driven Documents) (Pygame Zero) 184, 188, 191
choice() function (Python) 122 programming languages 344 287 draw_background() function
Chrome see Google Chrome complex logic 64 Dabblet 265 (Pygame Zero) 199, 200
class attribute 225 concatenation 103, 130 data draw_chart function (Python)
classes config method 154 adding to web page 221 149, 151
HTML tags 211, 246 confirmation box 273 programming languages for 345, draw() function (Pygame Zero)
JavaScript 282, 283 console log 273, 281 347 186
Python 156–57, 158, 159, constructor method 282, 283 reading from files 135, 138 draw_game_over() function
168–72, 283 Contact Us 220, 230–31, 256, 300, databases, programming languages (Pygame Zero) 196, 197
class inheritance 182 303, 312 344, 345 draw_handler function
class selector (CSS) 236 styling 258 data centers 16 (Pygame Zero) 179
INDEX

drawing (Scratch) 67 Events blocks (Scratch) 40, 46 fonts continued Gantt charts 134, 135, 149, 151, 152
draw interface 179 exceptions (Python) 162 setting/defining 235, 244, 259, Gap Time 86
draw_scenery() function expenditure, tracking 159–75 319, 325 general sibling selector 237
(Pygame Zero) 183, 202 explosions, painting 88 size 190, 238, 315 getters 283
drop-down lists 212 Extension blocks (Scratch) 35, 37, footer section 220, 232, 247, 249, Gimp 286
vertical 311 39, 58–59 331, 333 Github Gist 265
dungeon crawl games 178, 179 external files 264 styling 261–62 global positioning system see GPS
duplication CSS 234 footers, table 167–68 global variables
code 62 external hyperlinks 213 forever blocks (Scratch) 41, 84, 86 JavaScript 290, 291, 308
sprites 60 external information 46 forever loops 79, 86 Python 115, 160, 163, 189, 195
for loops Go 344
JavaScript 268, 274 GoDirect Force & Acceleration 59
E F Python 108, 110, 122, 145 Google Chrome 217, 222, 281,
ECMA Script 264 factories, automation 17 for in loops (JavaScript) 275 305, 313
Edge 222 false value 270–71 Format menu (Python) 169 Google Fonts 244, 300, 341
editing, code 208–9 favicon 221 format strings (Python) 159, 166 Google Maps 258
editor window (IDLE) 98, 99 definition 221, 309 forms, HTML 212–13 Google Material Icons 341
education, programming languages images 300 Fortran 346, 347 Google Translate API 52
346 feature boxes 220, 224–29 frame container widget 147 Gosling, James 347
Eich, Brenden 347 styling 253–57 frameworks (JavaScript) 284–85, GPS 16
elastic cloud computing 215 feature images 305, 313–15 286, 289 graphics
element selector (CSS) 236 banner 314 FTP (File Transfer Protocol) 207 graphical modules (Python) 134,
elements (HTML tags) 210, 211, fields (objects) 156, 157 functions 51 146–51
234, 235 File Explorer 243 functions (JavaScript) 269, 278–79, graphic user interfaces (GUI)
elif see else-if filename labels 154 282, 283, 291 147, 286–87
else branch (Python) 105 file objects 107 creating 296, 308 programming languages for
else-if branch files declaring 278 345
JavaScript 271 input from 107 function statement vs function graphs and charts 287
Python 105 output to 107 expression 278 grid
email File Transfer Protocol see FTP nested 279 coordinates 182, 185–87
hyperlink 256 Fill tool (Scratch) 57, 68, 82, 88 self-executing 279, 291 HTML Canvas 287
id 259 financial planning 158–75 functions (Python) 112–15, 161, moving on the 187, 192
embeddable scripts 95 Fintech (financial technology) 164–65 width and height 203
engineering, programming 95 built-in 113 GUI see graphic user interfaces
languages 346 firmware 17 calling 112, 113, 117, 159 guidelines, compliance with
entities 233 floats (floating point numbers) creating 114–15 website 215
equality 104 102, 139, 266 defining 112, 114–15
equals signs (Python) 104 FLOSS (free/libre and open importing 117
error messages source software) 94 methods 169, 170 H
code editors 209 flowcharts 53, 144 methods for scheduling calls 194 hamburger menu button 310, 311
Python 99, 132–33, 162, 163–64 folders naming 114, 117 hard-coding 100
errors creating 160, 180, 218, 243, 289, functions (Scratch) 50–51 hardware 17
in JavaScript 280 306, 308 machine and assembly languages
in Python 130–31, 162, 163–64 locating 243 344
see also debugging fonts G headers
escaping loops (Python) 109, canvas widget 150 Game Over message 89, 190, 195, 196 carousels 327
110–11 changing 57, 300, 301 Game_over variable 189 defining 245, 249
EvalError (JavaScript) 280 colour 247, 307 games 23 styling 307
event-driven programming 24, 40 company logo 313 Asteroid dodge (Scratch) 80–91 tables 167–68
event-handler function (Python) default 307 consoles 17 hex code 150
185, 186 Google Fonts 244, 300, 341 development 80, 95 hidden fields (web pages) 213
event handlers (JavaScript) 294 list of website 244 gaming apps 134, 137 high-level programming languages
event loop programs 178, 179 prominent 316 Knight’s quest (Python) 178–203 22
 354 355
hobbyists 18 HTML continued images continued J
home automation 23 template file 303 middle 256, 257 Java 25, 264, 344, 347
Homebrew package manager templates 333–34 styling 257 JavaScript 23, 24, 25, 264–87, 347
176–77 HTML Canvas 287 image tile grids 178, 179 animating the web page
Home() function (home.js) 321 HTTP (Hypertext Transfer Protocol) imperative programming 24 288–303
Home hyperlink 312 206, 207 importing (Python) 117 building a web page 216, 218,
Homeindex() function (home.js) hyperlinks 212–13 indentation 221, 233
292, 293 adding to navigation bar 312 errors 130 debugging 280–81
home.js 290, 292, 317, 321 call-to-action 329, 330 Python 99, 108, 109, 130, 169 features of 265
Home Menu 300 copyright section 332 tags 211 functions in 278–79, 310
home page email 256 indexes (Python) 122 graphic user interfaces 286–87
copyright section 331–32 footer 262 index file 218, 219, 306 input and output 272–73
design 305 home page 220, 304, 309 indexing (search engines) 214 interactive functionality 289
feature image 313–15 list 223, 232 index strings 179 libraries and frameworks
navigation bar 309–13 styling 249–50, 252, 254, 256, infinite loops (Python) 109 284–85, 289
primary message 316–17 330, 339 infographics 287 logic and branching 270–71
quote 317–23 Top Menu 250 information processing 46 loops in 274–77
responsive 304 initialisers (Python) 169 object-oriented 282–83
slideshow 327–31 inline CSS 234 order of tags 310
Hopper, Grace 347 I input responsive layouts 240, 304, 308,
horizontal borders 239 IBM 347 JavaScript 272–73 321–23
horizontal layers 220, 247, 305 Ichbiah, Jean 347 Python 106–7 using online 264
horizontal margins 248, 316 icons 300, 341 Scratch 34, 46–47 variables and data types 266–69
horizontal menu lists 249, 251 IDEs (Integrated Development types of 46 what it is 264–65
horizontal rule 225, 255, 336 Environment) 23, 132, 208, 209, input blocks (Scratch) 34 JavaScript Engine 264, 277, 284,
hosting, web 215 289, 305 input events 179 291, 293, 308, 310, 321, 328
household appliances 16 installing 217–18 input fields 212 JQuery 265, 284, 289, 294, 298, 305
hover state 249, 252, 254, 258, 260, IDLE (Integrated Development styling 259 adding 290
262, 313, 326, 330, 332, 338, 339 and Learning Environment) input() function (Python) 106, 113 order of tags 310
HTML (Hypertext Markup 95, 96, 97, 113, 120, 121, 136, input validation (web pages) 213 responsive layouts 304, 309
Language) 23, 206, 207, 160, 180, 182 instance variables 170 JSFiddle 265
209, 345 Check Module 131 instructions, computer Json data format 269
animating the web page 288, 289, colours in the code 98, 132 programs as 17
290–92, 296, 300–303 creating a CSV file in 136 integers 102, 139, 140, 141, 266
building a better website 214–15 debugging 130, 131, 133 Integrated Development K
building a web page 216–33 editor window 98 Environment see IDEs Kemeny, John 347
colour codes 238 shell window 98 Integrated Development keyboard control 46, 186, 214
common entities 233 using 98–99 and Learning Environment keys 187, 188
and CSS 234–39 id selector (CSS) 237 see IDLE dictionary 138, 140, 160
debugging 281 if branch (Python) 105, 118 integrity attribute (Bootstrap) 309 keywords 210
document structure 211 if-then block (Scratch) 44, 59, 62, interactive behaviours 216, 272, class 156, 283
exploring basic 210–11 63, 72, 73, 74, 75, 77–79, 84–87 273, 288 Pygame Zero keyword arguments
forms and hyperlinks 212–13 if-then branch (JavaScript) 271 Internet 206 198
and graphics design 286, 287 if-then-else block (Scratch) 44, 73, Internet Explorer 217, 222 Knight’s quest 178–203
and JavaScript 264, 265, 272–73, 75, 77 interpreters 23 adding the keys 187–88
286, 288 if-then-else branch (JavaScript) 271 int function (Python) 140 adding messages 196–97
responsive layouts 240, 304, 305, images IP (Internet Protocol) 207 animating the actors 197–98
309–14, 316–18, 324–25, 327–29, adding to web page 221, 228, IP address 207 creating the guard actors 191
331, 333–37 229, 305 IP routing 206 creating the player 184
styling the web page 242, 246, background 227, 251 issubset set method 145 hacks and tweaks 202–3
247–53, 254 centring 314 iterations 108–11, 118, 181, 182, 197, how to play 178–79
tags and attributes 210–11, 214, feature 255, 257, 305, 313–15 276–77 moving the guards 192–94
215, 234, 239 folder 180, 217, 218, 242, 306 iterative model 21 moving the player 185–87
INDEX

Knight’s quest continued logic map() function (Python) 140 move_guard() function
setting up 180–84 errors 131 Maple 345 (Pygame Zero) 193, 194, 197
tracking the result 194–97 JavaScript 270 maps movement
Kurtz, Thomas 347 Python 104–5, 140 Contact Us section 258 illusion of 81, 87
Kyma 346 Scratch 44–45 virtual worlds 287 logic 185
task ordering 144–45 margins 245 move_player() function
logical operators 104, 270–71 setting 247, 307, 311, 319 (Pygame Zero) 186, 188, 189,
L logic programming 345 Mathematica 345 193, 195, 198, 202
labels 212 logic puzzle (Scratch) 64–79 mathematics, symbolic 345 multimedia 206
label widget 154 adding more sprites 74–77 MathJS 285 multiple classes selector 237
labyrinthine environments 178 adding a new sprite 71–73 MATLAB 345 multiview function 208
languages adding the rules 78–79 Max 346 Music blocks (Scratch) 39, 59
foreign 52–63 getting started 66–70 media queries 241 music, programming languages
programming see programming hacks and tweaks 78–79 messages 346
languages program design 65 displaying (Scratch) 38
laptops 240 the puzzle 64 naming 49
layers, horizontal 247, 305 logo primary (websites) 309, 316–17 N
layout styles, different 241 company 220, 223, 224, 286, sending (Scratch) 48–49 named tuples (Python) 135,
left column elements 225 305, 311, 313 metadata 221, 240 142–43
LEGO BOOST 59 styling banner 251 meta links 303 name errors 131
LEGO Education WeDo 2.0 59 styling Top Menu 250, 313 methods NASA, Mission Control Centre
LEGO Mindstorms EV3 59 loops calling (Python) 113 95
len() function (Python) 103, 113 continuous 135, 144, 145 JavaScript 282, 293, 297, 298 navigation bar 305
Lerdorf, Rasmus 347 do while loops 275 Python 113, 157, 169, 170, 174 creating 309–13
less than 104 escaping 109, 110–11, 277 micro:bit 59 templates 333
libraries infinite 109 microprocessors 23 nested functions (JavaScript)
Google fonts and icons 341 JavaScript 274–77 Microsoft Basic 347 279
graphics 287 with a list 108 Microsoft Visual Studio nested loops
JavaScript 265, 284–85, 286, 287 loop conditions 108 Community 2019 see Visual JavaScript 276
Python 94, 95, 114, 116–17, for loops 108, 110, 122, 145, 268, Studio Community 2019 Python 110–11, 179
136, 138, 139, 146, 159, 173 274 Microsoft Windows 17 NetBeans 209
Scratch 39, 54 loop variables 108, 111 locating folders 243 network protocols 207
Lifelong Kindergarten group (MIT) nested 110–11, 179, 276 Pygame Zero 176–77 new projects (Scratch) 54, 66
29 Pygame Zero game loop 179 Python on 96 next sibling selector 237
lightweight editors 208 Python 108–11, 118, 119, 122, 125 Scratch on 29 Node.js 264, 284, 285, 289
line charts 287 Scratch 41, 45, 65, 73, 75, 79, 81 military, programming languages Node Package Manager
link layer protocol 207 while loops 108, 109, 110, 125, 274 for 346 see NPM
Linux 29 Lovelace, Ada 347 modal windows 272, 273 noise reduction 345
LISP 345 low-level programming languages modules non-primitive data types
lists 22 adding 309–10 268
of lists 111 built-in 116 normal state 254
loops with 108 importing and using 117 not (logical operator) 271
Python 103, 111, 113, 118, 119, M Python 116–17 not block (Scratch) 45
121, 122, 129 Mac computers modulo (remainder) operator not equal 104
Scratch 43 locating folders 243 (Python) 199 Notepad 208, 218
sets compared with 140 Pygame Zero 176–77 Moment.js 285 NPM 284
shuffling 121 Python on 97 money, Budget manager project numbers
splitting 122 Scratch on 29 158–75 computation 345
tuples compared with 137 machine code 23, 264, 347 Monty Python’s Flying Circus 96 in JavaScript 266
within lists 111 machine languages 344 Motion blocks (Scratch) 36–37 list of 129
list widget 147 main loop function 147 mouse 214 in Python 102, 129, 139
local variables 115, 269 Makey Makey blocks (Scratch) 59 mouse-over state 230, 249, 252, random 43, 121, 201
location (Contact Us section) 258 managers 18 254, 258, 260, 262 in Scratch 43
 356 357
O Perl 344 Prolog 345 Python continued
Objective-C 344 pet shop website project promo bar 247–48, 287, 288, 296, using IDLE 98–99
object-oriented programming animating the web page 288–303 299 variables 100–101, 115, 121, 125,
25, 156–57, 264, 347 Build a web page 216–33 promotional messages 220, 221, 160, 163, 169, 170, 189, 195
JavaScript 282–83 styling the web page 242–63 296–99 versions 96
objects PHP 209, 344, 347 cycling through 298–99 on Windows 96
JavaScript 269, 282–83, 297 pip package managers 176–77 initializing 297–98 Python Django 303, 343
Python 156–57, 188 pixels 150, 182, 215, 238 styling 247–48 Python Standard Library 116
office applications, programming placeholder text 261 prompts 272
languages 344 place markers 327 protocols 207
office workers 18 planning (software development) prototype-based languages 283 Q
on document ready() function 20 prototypes (JavaScript) 282, 283 quotation marks 103, 320–21
(home.js) 292, 321, 323 plugins 209 push() method (JavaScript) 268 quotes 305, 317–23
on_key_down() function (Python) pos property (Python) 193 puzzles 64–79 animating 322–23
186 PostScript 345 PyBrain 95 applying properties to 321
opcode 23 prerequisites Pygame 117 initializing 322
Opera 222 as sets of numbers 140 Pygame Zero 95, 117, 176–77
operands 23 tasks 134, 141, 144, 145 Actor class 178, 183
operating systems 17 preview windows 208 animations 198 R
installing Python 96–97 primary messages 305, 316–17 drawing text with 190 R 345
programming languages 344 primitive data types 266–67, 268, game loop 179 radio buttons 212
updates 177 269 initializing 180 randint() function (Python) 201
Operator blocks (Scratch) 42–43, print() function (Python) 106, 113 library 117 random allocation 118, 119
44, 64 printing (code editing) 208 updates 177 random blocks (Scratch) 87
or (logical operator) 270 probability 201 PySoy 95 random module (Python) 116, 118,
or block (Scratch) 45 problem-solving 65 Python 22, 24, 25, 92–203, 347 119, 120, 121, 200
outline colour (Pygame Zero) 190 procedural programming 25 applications 95 random numbers 43, 121, 201
output processing blocks (Scratch) 34–35 Budget manager project 158–75 RangeError (JavaScript) 280
JavaScript 272–73 program flow 34–35, 50 common errors 99 range function (Python) 108
Python 106–7 managing 40–41 data in 102–3 Raspberry Pi 23
Scratch 35 programming 16–17 debugging 130–33 ReactJS 284
output blocks (Scratch) 35 programming languages 16, 22–25, dictionaries 160, 174 readability, code 94
344–47 exceptions 162 readable content (websites) 214
choosing 25 features 94–95 read_tasks() function (Python)
P for data 345 format strings 166 141, 143
package managers 176–77 early 346 functions 112–15, 159, 161, ReferenceError (JavaScript) 280
packets 206–7 families of 344 164–65 reference variables 268
packet sequence 207 popular 347 how it works 95 repeat blocks (Scratch) 41, 45, 75
packet switched networks 206 for specific purposes 345 input and output 106–7 repeat until blocks (Scratch) 45
padding 235, 245, 245, 247, 248, types of 24–25 installing 96–97 RequireJS 285
249, 252, 307, 311 visual 346 Knight’s quest project 178–203 researchers 19
page elements, styling 244–53 website construction 216 libraries 94, 95, 114, 116–17, 136, response variable 125
Paint Editor (Scratch) 33, 57, 61, 64, see also JavaScript; Python; 138, 139, 146, 159, 173 responsive layouts (websites) 215,
66–68, 78, 88 Scratch logical operators and branching 240–41, 304
pandas 95 programs 17 104–5 responsive website 304–43
parent elements 237, 238 Project planner 134–55 loops in 108–9 adding the copyright 331–32
parent function 279 creating and reading the CSV file on a Mac 97 adding a feature image 313–15
parent objects 282 136–43 objects and classes 156–57 adding last minute details 327–31
parent tags 210, 211, 239 drawing the chart 146–51 Project planner project 134–55 adding a message 316–17
parent widgets 147 hacks and tweaks 152–55 Pygame Zero 176–77 adding the modules 309–10
Pascal 346 how it works 134 sets 140 adding popular destinations
PayPal 342 ordering the tasks 144–46 Team allocator project 118–29 324–25
pen blocks (Scratch) 37, 59 program design 135 tuples 137 adding a quote 317–23
INDEX

responsive website continued Scratch continued setters 283 sprites continued

adding the title and favicon 309 loops 41, 45, 65, 73, 75 setup_game() function (Python) moving using coordinates 36
creating the navigation bar managing program flow 40–41 187, 189, 191, 195, 196 moving using directions 37
309–13 manipulating data 42–43 shape-matching games 179 naming/renaming 56, 68
creating a new page 335–40 output using looks and sounds shared hosting 215 speech/thought bubbles 38
creating a template 332–33 38–39 shell window (IDLE) 98, 99, 120, SQL 345, 347
getting started 305–8 output using movement 36–37 161, 163 Stage (Scratch) 30
hacks and tweaks 341–43 sending messages 48–49 Shop Menu 303 changing backdrop 55
how it works 304 sprites 32–33 Shop Now link 253, 254 coordinates 36
program design 304 travel translator project 52–63 Shopping Cart 300 designing backdrop 66–68
project requirements 305 using functions 50–51 shuffle() function (Python) 121 Stage Info (Scratch) 30
result, tracking 195 variables 42, 44, 58, 69, 70, 72, shuffling 118, 119, 121 statistical computing 345
right column elements 226 74–77, 79, 83 side-scrolling games 80, 81 steering controls 84
Ritchie, Dennis 347 versions of 30 simulations 65 strings
robotics 23, 179 screen coordinates 182, 183 slideshows 327, 328, 331 combining 103
rollover effect 253 screen_coords() function (Python) smartphones 179, 215, 240, 241, 305 concatenating 267
root folder 218, 219 186 social media, adding to websites format 166
root window widget 147 screen.draw.text() function 301–2 JavaScript 266, 267
rounded corners 308 (Python) 190 socket module (Python) 116 Python 100, 103, 138, 139, 140,
round() function (Python) 113, 186 screen size 215, 240–41, 304, 305, software 16, 18 141, 166, 190, 198
routers 206–7 309, 315, 316, 319, 325, 326, developers 20–21 Scratch 42
rows 338, 339 engineers 19 Stroustrup, Bjarne 347
adding responsiveness 338 adding responsiveness 315, 316, software systems, programming style definitions, CSS 235, 238–39,
changing colours 339 319, 325, 330, 338, 339–40 languages 344 250, 252, 255, 319, 325
row numbers 182 centring contents 313, 314 Solution Explorer 243, 289, 313, styles folder 243
styling 338 scripting, client- and server-side 321, 335 style sheets 242, 243, 306
Ruby 344 209 solution file 218, 219 styling
run time environment 284 scripting languages 344 Solution Folder 243, 289 body elements 307
runtime errors 130 scripts sound, Scratch 39 carousel 330
creating 35, 344 space applications 95 Contact Us section 258
JavaScript 264, 265 spacers 246, 307 copyright 263, 332
S Python 95 spaces, vertical 224, 246 corners 308
Safari 217, 222 Scratch 34, 35 spacing settings 235, 245 CSS 238–39
SASS variables 341 scripts file 308 special effects (Scratch) 38 and ease of navigation 243
Scalable Vector Graphics see SVG scroll button, styling 257–58 specificity 239 email hyperlink 256
scenery (Python) 182–83 scrolling 214 split method (Python) 140 encourages interaction 243
Scheme 345 scroll to top 230, 257, 288, 292–95 sport, team allocator project 118–29 feature box 253–57
science, programming languages search engines 214 spreadsheet applications 135, 136 footer 261–62
for 346 selectors, CSS 235, 236–37 spread syntax 268 headers 307
scientific computing 95 complex 237 Sprite Library (Scratch) 54, 68, 71, hyperlinks 252, 256, 262, 330, 339
scientists 19 grouping 237 74, 76, 78, 82 image and subheading 326
scope, variables 269 self-executing functions Sprite List (Scratch) 30, 54, 83 image text 314
Scratch 25, 26–91, 346 (JavaScript) 279 sprites (Scratch) 32–33 input field 259
Asteroid dodge project 80–91 semantics 215 adding buttons 56, 60–61 logo 313
backdrops 55 sensor input 46 adding new 54, 71–77, 82 margin and padding 245
coloured blocks and scripts 34–35 servers 206–7 broadcasts 48–49 non-picture elements 254
features 28–29 dedicated 215 changing appearance 38 page elements 245–53
getting Scratch 29 server-side scripting 209, 264, 289 collision detection 47 primary message 316
hardware support 29 template options 303, 343 costumes 32, 33, 57, 61, 78, 85, 91 quotation marks 320–21
input 46–47 set() constructor function (Python) creating 32, 54, 68 quote 318
interface 30–31 140 deleting the cat 54, 66 rows 338
logic and decisions 44–45 sets (Python) 134, 140 drawing with pen blocks 37 scroll button 257–58
logic puzzle project 64–79 issubset set method 145 duplicating 60 standardization 244
 358 359
styling continued Team allocator continued tournaments, sporting 128 user input
styling the webpage project pick new teams 125–26 traceback error messages (Python) Java Script 265, 272, 284
242–63 pick teams 122–24 130 Python 106
Subscribe section 259 program design 119 transitions 250 Scratch 40
text 306–8, 314, 330 templates transition instruction 249–50, user interactions 46
Tk canvas widget 150 creating new pages from 305, 252, 254
styling the web page 242–63 333–34, 335 Translate blocks (Scratch) 56, 59,
feature box styling 253–57 literals 267 60, 63 V
program requirements 242 master page 303, 304 translation apps, travel translator value
setting up 243–44 renaming 335 project 52–63 Boolean 270
styling the page elements 245–53 web page 343 transport layer protocol 207 comparing 270
styling the remaining elements testing (software development) travel translator (Scratch) 52–63 functions producing 115
257–63 20 adding a language 56–60 sets 140
what the program does 242 TeX 345 adding more languages 60–62 of variables 100, 101, 109, 268,
sub-elements 210 text hacks and tweaks 63 269
subheadings 325–26 adding to web page 221 how the app works 52 van Rossum, Guido 94, 96, 347
Sublime Text (code editor) 208 drawing with Pygame Zero 190 program design 53 variables
subscribe button 260 feature images 314 setting the scene 54–56 arrays 268
subscription link 220, 232, 247 placeholder 261 travel website project 304–43 and Boolean operators 104, 266
styling 259–60 positioning 319 trend analysis 345 class assigned to 283
subsets 122, 145 quote 318 true value 270–71 declaring 101, 267, 269
substrings 267 styling 253–54, 306–8, 314, 330 try block 281 global 115, 160, 163, 189, 195, 269
SVG 286 text alternatives (website) 214 tuples (Python) 134, 137, 138, initializing 267
Swift 344 text area (web pages) 212, 213 142–43 instance 170
switch statement 271 text-based languages 94 calling 143 JavaScript 266–69, 278, 279,
symbolic mathematics 345 TextEdit 218 turtle module (Python) 116 298, 308
synchronization 49 text editors 208, 305 tween keyword arguments 198 local 115, 269
syntax 94 IDLE 95 Twitter 301–2 naming 101, 188
errors 130, 131, 132 text fields (web pages) 212, 213 two-dimensional games 178, 179 non-primitive data types 268
highlighting 208 text files 305 TypeError (JavaScript) 280 primitive data types 266–67
spread 268 text input, users 47 type errors 130 Python 100–101, 115, 121, 125,
SyntaxError (JavaScript) 280 Text tool (Scratch) 57, 61, 88 TypeScript 285 160, 163, 169, 170, 189, 195
SynthEdit 346 Text to Speech blocks (Scratch) SASS 341
system languages 344 59, 63 scope of 269
throw statement 281 U Scratch 42, 44, 58, 69, 70, 72,
ticker tape 215 UDP (User Datagram Protocol) 74–77, 79, 83
T tiles 179, 199, 200 207 and sets 140
tables time management, Project planner underscores 114 using 101
footers 167 134–55 Uniform Resource Locator values 100, 101, 109, 268, 269
headers 167 time module (Python) 116 see URL VBA 344
tablets 215, 240, 305 TK Canvas widget 147, 150 Unix operating system 94 vector images 286
tabs 209 Tk Frame widget 153 update game state (Pygame Zero) vector mode 33, 57, 61
tags, HTML 210–11, 234 Tk GUI 147 179 vertical alignment 321
attributes 211 tkinter (Python) 116, 146, 148, 150 update handler function vertical borders 239
container 333 TK module (Python) 146–51 (Pygame Zero) 179 vertical lists 311, 312, 326
indenting 211 top-down 2D view 178 updates, Pygame Zero 177 vertical spaces 224, 225, 230, 231,
order of 310 top-down coding 114 upper() method (Python) 113 246, 307, 319, 329, 333
TCP (Transmission Control top-level window widget 147 URIError (JavaScript) 280 video sensing blocks (Scratch) 59
Protocol) 207 Top Menu 220, 222, 223, 303, URL (Uniform Resource Locator) viewport 240
Team allocator 118–29 310, 311 206 viewport meta definition 309
create a team 120–21 styling 249, 250–51 hyperlinks and 213 Virtual Private Server see VPS
hacks and tweaks 127–29 touching mouse-pointer block User Datagram Protocol virtual worlds, mapping 287
how it works 118 (Scratch) 47 see UDP Visual Basic 347
INDEX

visual programming languages web hosting 215 websites continued Windows see Microsoft Windows
25, 348 web pages 215 payments on 342–43 windows, resizing 152
Visual Studio Code 208 animating the web page project responsive website project Wolfram Language 24
Visual Studio Community 2019 288–303 304–43 work schedules 134
209, 217–20, 242, 243, 289, building 216–33 social media 301–2 World Wide Web, working of
305, 306, 333 creating new 335–40 styling 242–63 206–7
voice, choice of (Scratch) 63 hyperlinks and forms 212–13 WebStorm 209 wrap class 248
VPS (Virtual Private Server) hosting responsive 240, 241 welcome message 120
215 styling the web page project when I receive block (Scratch) 48,
242–63 73, 75, 77, 86, 88 XYZ
templates 303, 333–34, 335, 343 while loops x coordinates 182
W web protocol 207 JavaScript 274 XML 265
wait blocks (Scratch) 41, 45 web server 206, 207, 208, 209 Python 108, 109, 110, 125 y coordinates 182
wait until blocks (Scratch) 45 websites 23 widgets zoom function 209
warp speed slider 80, 89 accessibility 214–15 frame container 147
washing machines 16 animating 288–303 label 154
waterfall model 21 basic HTML 210–11 list 147
web apps 23 building better 214–15 parent 147
webbrowser module (Python) 116 building a web page 216–33 root window 147
web browsers 206, 207, 208, 209, connecting to 206–7 Tk canvas widget 147, 150
214, 234, 250, 255, 265 HTML forms and hyperlinks Tk Frame 153
Web Content Accessibility 212–13 Tk GUI 147
Guidelines 215 icons 300 top-level window 147
web development 19, 95 interactive 288 Twitter 301

Acknowledgments Scratch is developed by the Lifelong Kindergarten Group at MIT

Media Lab. See http://scratch.mit.edu
DK would like to thank the following people for help in
preparing this book: Anjali Sachar, Mridushmita Bose, and Python is copyright © 2001–2019 Python Software Foundation.
George Thomas for design assistance; Deepak Negi for picture All Rights Reserved.
research assistance; Nayan Keshan and Kanika Praharaj for code
testing; Helen Peters for indexing; Jamie Ambrose for proofreading; Microsoft Visual Studio 2019
and Harish Aggarwal (Senior DTP Designer), Surabhi Wadhwa-Gandhi
(Jacket Designer), Priyanka Sharma (Jackets Editorial Coordinator) and Blockly is a library from Google for building beginner-friendly
Saloni Singh (Managing Jackets Editor). block-based programming languages.