Lesson 9

Programming Overview

Breaking down behaviour

It's all well and good having a beautifully designed page (we're certain some of your apps will be more beautiful than others :). But if it doesn't do anything, it's a bit… pointless.

This is where JavaScript comes in. JavaScript is a programming language. It enables us to tell the app to respond to certain events, compute certain calculations, and essentially do the things we want it to do. In our case we want to display a random cycle of images and allow our users to gain points when they match. But you can do anything you can imagine using a programming language. The only limit is the speed of your hardware and your own imagination!

Let's do a quick intro to programming:

All programming languages are made of the same three ideas:

  • Variables –> Data
  • Functions –> Actions
  • Logic –> Decisions

Variables are the bits of information the program is concerned with.

Functions are predefined sections of code that do a certain thing.

Logic is the decisions the code needs to make at any given time.

It's always helpful to break down your desired outcome into the variables, the functions and the bits of logic we'll need to write.

Let's do this together.


We'll need to know where the images we're using are stored, and we'll also need a way to make the images random. For the players, we need to define which part of the screen detects a tap for each player and their scores. Finally, to stop them both gaining a point, we will need a variable to define if a snap has been correctly made.


We will need to:

  • run a looping function which randomly changes the images
  • detect if a user has tapped the screen
  • check if the images match
  • change the scores if there was a winner


What logical decisions might we make?

  • if a user taps the screen when the images match, increment their score and prevent further wins. If the user taps the screen when the images do not match, reduce their score.

Note how logic makes use of our functions and variables. Logic is the glue that holds a program together.

Let's get cracking.

Go to the next lesson
Next Lesson