By the end of this lesson you will be able to
- run, change and reset a program on the AI workbench
- print messages with
console.log() - load one of the practice datasets with
loadData()and show it as a table - draw a scatter chart, a line chart and a bar chart, and show a small picture
- read the workbench's error messages and fix a simple mistake
Henry Wren opens a laptop in the workshop. “Before we teach Bramble anything,” he says, “you need somewhere to try things out. This is the workbench. Nothing you do here can reach the real robot or the museum's records, so you can experiment as much as you like. Getting things wrong here is how you learn.”
The workbench
Every lesson from here on has boxes like the one below. Each box holds a short program written in JavaScript. When you press Run, the program runs inside this page, on your own device. Nothing is sent over the internet, and you cannot break anything.
When the program finishes you see its output: any messages it printed, and any tables, charts and pictures it asked for. You can change the program and run it again as often as you like, and Reset puts the original program back.
console.log() prints whatever is inside its round brackets. Text goes inside double quotes, "like this", so the computer knows it is text. A calculation such as 2 + 3 has no quotes, and the computer works it out and prints the answer, 5. Each instruction ends with a semicolon (;), much as a full stop ends a sentence. Try changing the text, or the sum, and run it again.
You can print several things on one line by separating them with commas. The workbench puts a space between them:
The practice datasets
A dataset is a collection of examples, usually arranged as a table with one row for each example. The workbench has a set of practice datasets built in, all invented for this course: the café's fruit, Bramble's battery records, the museum's visitor numbers and more. You load one with loadData(), giving its name in quotes, and show it with showTable().
The first line loads the fruit dataset and gives it a name, fruit, so that the program can use it again (Lesson 2.1 explains names properly). The second line shows it as a table. Each row is one fruit, and each column is one fact about it: its weight in grams, its width in centimetres, and its kind. The table shows the first 40 rows and tells you how many more there are.
These are the datasets you will meet in the course. You do not need to remember them: each lesson says which one it uses.
| Name | What it holds |
|---|---|
| "exhibits" | Eight museum exhibits: name, room, year made, visitors last month |
| "fruit" | 60 fruits from the café: weight (g), width (cm) and kind |
| "battery" | 30 of Bramble's walks: minutes walked and battery charge used (%) |
| "museum" | 60 days: temperature, rain, weekend or not, and number of visitors |
| "weather" | 80 days of air pressure and humidity, and whether it rained next day |
| "digits" | Handwritten digits 0 to 9, each an 8 by 8 picture |
| "messages" | Messages to the museum, marked genuine or spam |
A few more appear later in the course, each introduced where it is needed.
Charts
A table shows the exact values; a chart shows the pattern. The workbench can draw three kinds of chart.
A scatter chart draws one dot for each row, placed by two of its columns. You give it the rows and the names of the two columns, in quotes: the first goes along the bottom, the second up the side. A third name, if you give one, colours the dots by that column.
Each dot is one of Bramble's walks: how many minutes it walked, and how much of its battery that used. The dots rise from left to right, roughly in a straight line: longer walks use more charge. In Module 4 you will teach the workbench to find that line and use it to make predictions.
A line chart joins a list of numbers with a line, which suits things that change step by step. A bar chart compares a few amounts, given as a list of labels and a list of numbers. Lists are written in square brackets, with commas between the items.
The line chart shows a number falling quickly and then levelling off. You will see many charts like this one: they show a model making fewer mistakes as it learns.
Pictures
Some of the datasets hold small pictures. showImage() draws one: an 8 by 8 grid of squares, each one a shade between white and black. The words after the comma are a caption shown under the picture.
A computer sees this picture as nothing more than a list of 64 numbers, one for each square, where 0 is white and 1 is black. In Module 6 you will build a model that learns to read these digits.
All the workbench commands in one place
| Command | What it does |
|---|---|
| console.log(a, b, …) | Prints the things in the brackets on one line. |
| loadData("fruit") | Loads a practice dataset: a list of rows. |
| showTable(rows) | Shows rows as a table. |
| scatter(rows, "x", "y") | A scatter chart of two columns. Add a third name to colour the dots by that column. |
| lineChart(numbers, "name") | A line chart of a list of numbers. Several in a row share one chart. |
| barChart(labels, numbers) | A bar chart comparing amounts. |
| showImage(pixels, "caption") | Draws an 8 by 8 picture from 64 numbers. |
Later lessons add a few more, such as round() and mean() in Module 2, and the ml toolbox of ready-made models once you have seen how each one works.
When something goes wrong
If a program has a mistake, the output explains it. Messages that start Workbench: come from the workbench: the program was written correctly, but asked for something the workbench cannot do, such as a dataset that does not exist. Other messages come from JavaScript itself, when it cannot understand how the program is written. In both cases a note in plain words explains the message, and tells you which line to look at. The program below has a mistake. Run it, read the message, and fix it.
The dataset is called "fruit", all in small letters. To a computer, "Fruit" and "fruit" are different names, so capital letters matter everywhere in JavaScript.
JavaScript needs straight quotes ("), not the curly ones (“ ”) that phones and word processors often type. If you paste code from a document and it will not run, this is often why. The workbench notices curly quotes and offers to fix them.
Exercises
Each exercise has a starting program. Change it to do what the task asks, run it to see the result, and press Check my answer when you are happy. The checker runs your program and looks at what it printed and what it showed.
Exercise 1 · Your first message
Change the program so that it prints exactly the line shown below.
Expected output
Exercise 2 · A sum and a label
The café received 60 fruits on Monday and 45 on Tuesday. Print the line below, letting the computer work out the total: write the sum 60 + 45 in your program, not the answer.
Expected output
Exercise 3 · Show the exhibits
Load the "exhibits" dataset and show it as a table.
Exercise 4 · Fruit by colour
Draw a scatter chart of the fruit with weight along the bottom and width up the side, and colour the dots by kind.
Exercise 5 · Fix the mistakes
This program should show a bar chart of the three rooms. It has two mistakes. Run it, read the messages, and fix them one at a time.
Quick check
Four questions to confirm the main ideas. Choose an answer to see the explanation.
What does console.log("5 + 5") print?
Because of the quotes, 5 + 5 is text, and text is printed exactly as it is, without the quotes. Without quotes, console.log(5 + 5) would print 10.
Which command would you use to see how visitor numbers fall and rise from one day to the next?
A line chart joins a list of numbers in order, which shows how something changes step by step. A table shows the exact values, but the pattern is much harder to see.
A program says loadData("Battery") and the workbench replies that there is no such dataset. Why?
Capital letters matter everywhere in JavaScript. "Battery" and "battery" are different names to the computer.
How does a computer “see” one of the 8 by 8 digit pictures?
To a computer a picture is only numbers. Recognising the digit means finding patterns in those 64 numbers, which is what the network in Module 6 learns to do.
Summary
- Write a program in a workbench box, press Run, and read the output: messages, tables, charts and pictures. Reset puts the original program back.
console.log()prints; text goes in straight double quotes, and calculations are worked out.loadData("name")loads a practice dataset, andshowTable()shows it.scatter(),lineChart()andbarChart()draw charts;showImage()draws an 8 by 8 picture.- Capital letters and quotes must be exactly right. Messages starting “Workbench:” explain a request the workbench cannot carry out.
Found a mistake on this page, or something unclear? Report a problem and mention “AI Lesson 1.2”.