Coding for Kids

Jonathan Ackerman

Draft/WIP

This book is still a work in progress. Please subscribe to the newsletter to receive news about updates and improvements to the book. Thanks.

Introduction

This book was put together to teach my six year old son a bit about computer programming.

When I was six, my father brought home a Commodore Vic-20. It had a great user manual with lots of code listings which, I slavishly typed in to see what happened. It didn't take me long to get hooked!

So when my son asked me what the thing was called that I typed programs into and how could he run it so that he too could ask the computer to do things, I seized the opportunely to pass on the programming torch (hopefully).

The beauty of the early micro-computers, such as the Commodore Vic-20, was that they turned on pretty much instantly, printed out some version information and then displayed a command prompt waiting for you to type something in.

Pretty crude by today's standards but a perfect environment for tinkering in without the complications of windows, menus, icons etc.

So to recapture that I settled on using JSBeeb, a program which emulates the BBC Micro computer, for this book. As such the programming language in this book is BASIC II or Beginner's All-purpose Symbolic Instruction Code version 2.

Getting set up

JSBeeb is an awesome application written by Matt Godbolt, it emulates a BBC Model B microcomputer and runs in a web browser. It requires a modern web browser such as Firefox or Chrome to work correctly.

I have provided a stripped down version of JSBeeb on this book's web site. It hides all the menus and options so that kids do not get distracted or confused. This version can be found at http://c4k.rabidgremlin.com/jsbeep/

The BBC Model B had a UK keyboard layout and JSBeeb uses this by default. If you have a US keyboard layout (there is an @ symbol above the 2 on your keyboard) then you need to use this link for JSBeeb http://c4k.rabidgremlin.com/jsbeep/us/ instead so that your keys work as expected.

Alternatively you can install another BBC Model B emulator on your PC called BeepEm. See Appendix A for instructions on how to do this.

Using this book

This book is split into a number of chapters. The early chapters are design to allow kids to type in simple programs and have something interesting happen. Later chapters explore specific areas in depth and are probably for older kids.

It is intended that an adult (you) sit alongside the kid as they progress through the book.

Commands and programs to be typed in are shown in gray boxes. For example:

PRINT "HELLO"
PRINT 1 + 2

Each line of the text in a gray box should be submitted to the computer by pressing the Enter key. If a mistake is made the Backspace key can be used to correct it or if Enter has already been pressed then the line can simply be retyped.

Computers are pretty picky so make sure commands are typed exactly as shown. Take special note spaces and the use of upper-case letters.

The Esc key can be used to stop a program from running. If things go really wrong you can refresh your browser to start over.

In addition to the commands/program boxes, there are two other boxes. The first is the "exercise" box. This box has a light-bulb icon in it and contains an exercise for the kid to try.

This is an example of an exercise box.

The second box is the "more details" box. This box (with a wretch icon) explains what is going on in more detail. It's targeted at you, the adult, so that you can explain what is going on to the kid.

This is an example of a more details box.

With that all out of the way, start up JSBeep and let's get going..

Getting started

Type:

PRINT "HELLO"

Then press Enter

If you get a * when you try type a " then you are not running JSBeeb with a US keyboard setup. Restart JSBeeb by browsing to http://c4k.rabidgremlin.com/jsbeep/us/ and try again.

Now try these:

PRINT "ABC"
PRINT 2 + 2
PRINT 5 - 1

Can you get the computer to add 6 and 4 ?


PRINT is known as a command. It instructs the computer to write (or print) something to the screen.

Computers typically deal with two types of information:

  • Strings, pieces of text made up of letters, numbers and other symbols and
  • Numbers

Anything in-between double quotes (") is recognised by the computer as a string. So "ABC" or "HELLO" are strings. Numbers are just typed as numbers without any quotes. For example 2 or 1974. Numbers can also be decimals for example 2.5 or 3.14159265359.

The PRINT command prints out strings exactly as they are typed. So PRINT "2 + 2" would print out 2 + 2 not 4 !

Besides + for addition and - for subtraction, you can also use * for multiplication and / for division.

Lots of Hellos

Type:

10 PRINT "HELLO"
20 GOTO 10
RUN

Press Esc to stop the program

The numbers 10 and 20 in the program above are known as instruction numbers or line numbers. You might have noticed that when the first line was typed in, the computer did not immediately print HELLO. This is because the line started with an instruction number (10) so the computer stored the instruction into its memory rather then executing it.

When the RUN command is given the computer will execute each of the stored instructions in order of their instruction numbers, from lowest to highest.

The GOTO command tells the computer to "go to" the specified instruction number and carry on executing from that point.

So when the RUN command is given the computer will:

  1. Execute line 10 and print HELLO to the screen
  2. Move onto line 20 and execute the GOTO 10 command (which tells the computer to go back to line 10)

This program will never stop by itself (which is why you need to press the ESC key to stop it) and is known as an endless loop

Type:

10 PRINT "HELLO";
RUN

Remember to press Esc to stop the program

Can you get the computer to say something different from HELLO ?


If you type in an instruction with an existing line number then it will replace the existing instruction. In this case we are replacing line 10 with a new one, leaving the previous line 20 alone.

The only difference with our new line 10 is the addition of the ; on the end. Normally the PRINT command prints out on the next line. If you add a ; then the next PRINT command will print from where this one ended. So each HELLO will be printed next to each other.

If there isn't enough space on the current line, then the rest of the text will be printed on the next line. The default screen has 40 columns and 32 rows. If you print more then 32 rows of text, the screen will "scroll up", adding a new line at the bottom of the screen.

Type:

CLS

CLS tells the computer to clear the screen

Type:

LIST

LIST tells the computer to print out the current list of commands it is has remembered

What is your name?

Type:

10 PRINT "WHAT IS YOUR NAME";
20 INPUT YOURNAME$
30 PRINT "HELLO "; YOURNAME$
40 GOTO 10 
RUN

Press Esc to stop the program

The INPUT command gets the computer to ask for some text (input) to be typed in. The INPUT command will collect everything that is typed until the ENTER key is pressed.

YOURNAME$ is a variable. A variable can be thought of as box in the computer's memory in which we can store things. In this case we are creating a box called YOURNAME$ and the INPUT command will take whatever was typed and store it into this box.

In line 30 we print out HELLO followed by the value of YOURNAME$. So if JONATHAN was typed in, line 30 would print HELLO JONATHAN.

The $ in YOURNAME$ indicates that variable will store a string. If you needed to store a number you would the leave $ off. For example YOURAGE would be used to store a number.

Loop de Loop

Type:

NEW
10 FOR NUM = 1 TO 5
20 PRINT NUM
30 NEXT NUM
RUN

Can you get the computer to count to 10?

Can you make it count even higher?

Blast off!

NEW
10 FOR NUM = 5 TO 1 STEP -1
20 PRINT NUM
30 NEXT NUM
40 PRINT "BLAST OFF"
RUN

Can you get the countdown to start at 3?

Flashing sign

NEW
10 CLS
20 PRINT "HELLO"
30 FOR T = 1 TO 1000 : NEXT T
40 CLS
50 PRINT "THERE"
60 FOR T = 1 TO 1000 : NEXT T
70 GOTO 10
RUN

Remember you can press ESC to stop the program

Can you make the sign say something else ?

Can you make the change more slowly ?

Can you make the sign display 3 different words ?

And now for some music...

Type:

SOUND 1,-15,52,10

Then press Enter

Now try this:

SOUND 1,-15,52,100

What happens if you make 100 a even bigger number?

A little tune

Type:

NEW
10 SOUND 1,-15,96,10
20 SOUND 1,-15,104,10
30 SOUND 1,-15,88,10
40 SOUND 1,-15,40,10
50 SOUND 1,-15,68,20
RUN

What do you think the numbers 96, 104, 88, 40 and 68 mean?

Getting some keys

Type:

NEW
10 PRINT "PRESS A KEY"
20 KEY$ = GET$
30 PRINT "YOU PRESSED ", KEY$
40 GOTO 10
RUN

Play me a song

Type:

NEW
10 PRINT "PRESS A KEY 1 to 7"
20 KEY$ = GET$
25 SOUND 1,-15,88,0
30 IF KEY$ = "1" THEN SOUND 1,-15,52,10
40 IF KEY$ = "2" THEN SOUND 1,-15,60,10
50 IF KEY$ = "3" THEN SOUND 1,-15,68,10
60 IF KEY$ = "4" THEN SOUND 1,-15,72,10
70 IF KEY$ = "5" THEN SOUND 1,-15,80,10
80 IF KEY$ = "6" THEN SOUND 1,-15,88,10
90 IF KEY$ = "7" THEN SOUND 1,-15,96,10
100 GOTO 20
RUN

Try press the following numbers:

11 55 66 5
44 33 22 1
55 44 33 2
55 44 33 2
11 55 66 5
44 33 22 1
Can you guess the song?

Credits

JSBeeb was created by Matt Godbolt under the GPL V3 license. See https://github.com/mattgodbolt/jsbeeb

Idea icon designed by Stefano Vetere from the Noun Project

Wrench designed by Pham Thi Dieu Linh from the Noun Project

Appendix A - Setting up BeebEm

The following steps should get you up and running with BeebEm. The steps assume you are running Windows but BeebEm is available for other platforms to.

Install BeebEm

  1. Download the installer from http://www.mkw.me.uk/beebem/
  2. Run the installer and install the application

Configure the keyboard

The original BBC Micro had a UK keyboard layout and BeebEm emulates that. If you are using a US keyboard (there is an @ symbol above the 2 on your keyboard) then you need to do the following steps to configure BeepEm to use a US keyboard.

  1. Run BeepEm
  2. From the Options menu select Load User Key Mapping
  3. Select USLogical.kmap from the file dialog which opens
  4. From the Options menu select User Defined Mapping
  5. From the Options menu select Save Preferences so that the keyboard settings are saved for when you next start BeebEm