Jugami

Coding · High school · lesson 1

Your First Program

What code is, and the three ideas almost every program is built from.

Right now, the device you're reading this on is following billions of instructions a second, and someone, somewhere, wrote the program behind every one of them. By the end of this page you'll have written some yourself, and run them right here in your browser.

Here's the plan. First, what code actually is. Then three building blocks: variables (remembering things), loops (repeating things) and if-statements (making choices). Then a challenge, a quick quiz, and the story of the woman who wrote about programming a computer about a hundred years before one was built.

A stylized drawing of Babbage's Analytical Engine: brass columns of stacked number wheels beside a chain of punched cards feeding into the machine 3141592627182818141421351618033957721566 // the Mill the Store: columns of number wheels

01What is code?

A computer is incredibly fast and completely literal. It does exactly what it's told, in order, and nothing else. It can't guess what you meant.

Code is a list of those instructions, written in a form a computer can follow. A finished set of instructions that does a job (a game, a calculator, a web page) is called a program.

We write code in a programming language: a small, strict language with exact rules for spelling and punctuation, called its syntax. Python, Java, C and Scratch are all programming languages.

On this page we use JavaScript. Every web browser can already run it, so you don't need to install anything. It's also one of the most used languages in the world, because it powers interactive websites, including this one.

Your first line

The instruction console.log(...) means "print this." Whatever you put inside the parentheses shows up in the output panel. Text goes inside quotation marks; that's called a string. Lines that start with // are comments: notes for humans that the computer skips.

Press Run. Then change the message to your own name and run it again. You can't break anything; Reset puts the starter code back.

hello.js

Tip: press Ctrl+Enter (or ⌘+Enter) to run. Tab inserts spaces; press Esc, then Tab, to leave the editor.

Output

Press Run to see the output.

Expected output: Hello, world! / 2 + 3 = 5

02Variables: remembering things

Programs need to remember things: your score, your username, how many lives are left. A variable is a named box that holds a value so you can use it later.

In JavaScript you make one with let or const. Use let when the value will change (a score). Use const, short for constant, when it won't (your birthday). Try to change a const and JavaScript will stop with an error.

The single = sign means "store this value in that box," not "is equal to." So age = age + 1 isn't bad math. It means "take what's in age, add one, and put the result back."

Values come in types. The two you'll use most are numbers (17, 3.5) and strings ("Ada"). Using + on two numbers adds them; on strings it glues them together, which is called concatenation.

variables.js

Output

Press Run to see the output.

Expected output: Hi, Ada! / Next year you'll be 18 / string number

Try this: add the line name = "Grace"; at the end and run it. Read the error. That's const protecting you from changing something you said wouldn't change.

03Loops: repeating things

Suppose you need to print the numbers 1 to 1,000. You could write a thousand lines. Or you could write three. A loop runs the same block of code again and again.

The most common kind is the for loop. Its first line has three parts, separated by semicolons:

  1. Start: let i = 1 makes a counter called i.
  2. Keep going while: i <= 5 is checked before every lap. When it's false, the loop stops.
  3. After each lap: i++ adds one to i.

The code inside the curly braces { } is the body: what happens on each lap. Each run through the body is called an iteration.

A while loop is simpler: it just repeats as long as its condition is true. Forget to change the condition and it never stops. That's an infinite loop. Don't worry: this page stops any program that runs too long.

loops.js

Output

Press Run to see the output.

Expected output: Lap 1 … Lap 5, then 3... / 2... / 1... / Liftoff!

Try this: change 5 to 100. Then make the loop count by twos with i = i + 2 instead of i++.

04If-statements: making choices

Programs get interesting when they can decide. An if-statement runs a block of code only when a condition is true. Add else to say what happens otherwise, and else if to check more cases in order.

A condition is a question with a yes-or-no answer. In code, the answer is a boolean: true or false. You build conditions with comparison operators:

  • > greater than, < less than, >= and <= "or equal to"
  • === is equal to, !== is not equal to

Notice the triple equals. Remember, one = stores a value. To compare, JavaScript uses ===. Mixing them up is one of the most common beginner bugs.

grades.js

Output

Press Run to see the output.

Expected output: B: nice work / true / false

Try this: change the score to 95, then 40. Can you add an else if for a C at 70 or above?

05Try it: the 1-to-10 challenge challenge

Time to put loops and if-statements together. Write a program that prints the numbers 1 to 10, one per line, using a loop. When you press Check, the page runs your code and tells you right away whether it worked.

Bonus: for numbers divisible by 3, print "Fizz" instead of the number. (Hint: i % 3 === 0 is true when dividing i by 3 leaves no remainder.) The checker accepts either version.

challenge.js

Output

Write your loop, then press Check.
Show one possible answer 
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

06Quick quiz

Five questions. Pick an answer for each and press Check my answers.

1. Which keyword makes a variable whose value should never change?

2. What does for (let i = 0; i < 3; i++) do?

3. In JavaScript, what does "5" + "5" give you?

4. Which line compares two values?

5. What did Ada Lovelace's Note G describe?

07Ada Lovelace and the first program

Everything you just did, giving a machine exact steps, storing values, repeating, has a surprisingly old history. One of its first chapters was written in 1843, by a 27-year-old mathematician, for a computer that didn't exist.

Who she was

Augusta Ada Byron was born in London on 10 December 1815, the only legitimate child of the poet Lord Byron and Annabella Milbanke.[1][2] Her mother, who had trained in mathematics herself, made sure Ada studied math and science, which was rare for a girl at the time.[2] She later became Countess of Lovelace through marriage, which is why we know her as Ada Lovelace.[1]

The machine

At seventeen, in 1833, she met the inventor Charles Babbage and saw part of his calculating machine at work.[2] Babbage went on to design something far bigger, the Analytical Engine: a steam-powered machine of gears and wheels, to be controlled by punched cards, that could add, subtract, multiply and divide. It is considered the first design for a fully automatic computer, but Babbage never finished it.[3]

The Notes

In 1842 an Italian engineer, Luigi Menabrea, published an article in French about the Analytical Engine. Lovelace translated it into English and, working with Babbage over nine months, added her own Notes, labeled A to G. They ended up about three times as long as the article. They were published in 1843, signed only "A.A.L."[3][4]

A punched card like the ones planned for the Analytical Engine, with a pattern of punched holes and the label Note G, 1843 NOTE G · 1843 · BERNOULLI
  1. 1815 Born 10 December in London
  2. 1833 Meets Charles Babbage, age 17
  3. 1842 Menabrea's French article on the Analytical Engine appears
  4. 1843 Her translation and Notes A–G are published
  5. 1852 Dies 27 November in London, age 36

Note G: an algorithm for a machine

The last Note, Note G, showed step by step how the Engine could calculate the Bernoulli numbers, a tricky sequence of numbers used in advanced math. It laid out every operation, which number went where, and how the steps repeat, much like the loops you wrote above.[3][5]

It is often called the first published computer program, and Lovelace is often called the first programmer.[2][3] Historians add two honest footnotes. Babbage had already sketched similar step lists in his own notebooks, and the collaboration was close, so how much was Ada's alone is still debated.[2][5] And because the Engine was never built, her program was never run in her lifetime.

Beyond numbers

Her most famous leap was not about math at all. Lovelace saw that the Engine's numbers could stand for other things, such as letters, symbols, or musical notes, so the machine might work on anything that could be described by rules.[3][5] In Note A she wrote that if the rules of harmony could be expressed this way,

“the engine might compose elaborate and scientific pieces of music of any degree of complexity or extent.”

Ada Lovelace, Note A, in “Sketch of the Analytical Engine,” Scientific Memoirs vol. 3 (1843)[4]

That's exactly what your phone does today: songs, photos and this sentence are all stored as numbers. Yet she was also careful not to overclaim. In Note G she wrote:

“The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.”

Ada Lovelace, Note G (1843)[4]

Ada Lovelace died on 27 November 1852, aged 36.[1][6] Today she is remembered as a visionary of the computer age.[5]

Talk About It

  1. Lovelace said the Engine could only do "whatever we know how to order it to perform." Do today's AI tools prove her wrong, or do they still follow orders, just very complicated ones?
  2. Note G was never run on a real machine, and Babbage helped. Is it fair to call it "the first computer program"? What would you need to know to decide?
  3. Name three things on your phone that aren't numbers but are stored as numbers. What rules turn them back into a song, a photo or a word?

08Sources and credits

  1. Encyclopaedia Britannica, “Ada Lovelace” (birth and death dates, title, parents). https://www.britannica.com/biography/Ada-Lovelace
  2. Computer History Museum, “Ada Lovelace,” The Babbage Engine (parents, her education, meeting Babbage in 1833, the Notes, the authorship debate). https://www.computerhistory.org/babbage/adalovelace/
  3. Science Museum, “Women in Computing” (the Analytical Engine, the 1843 Notes, Note G and Bernoulli numbers, symbols and music). https://www.sciencemuseum.org.uk/objects-and-stories/women-computing
  4. L. F. Menabrea, “Sketch of the Analytical Engine Invented by Charles Babbage,” translated with Notes by Ada Augusta, Countess of Lovelace, Scientific Memoirs vol. 3 (London, 1843); full text transcribed at Fourmilab (source of both quotations). https://www.fourmilab.ch/babbage/sketch.html
  5. Science Museum Blog, Katherine Platt, “Ada Lovelace: visionary of the computer age” (2015) (first published algorithm; Babbage's earlier sketches; numbers as symbols and musical notes). https://blog.sciencemuseum.org.uk/ada-lovelace-visionary-of-the-computer-age/
  6. MacTutor History of Mathematics, University of St Andrews, “Ada Lovelace” biography. https://mathshistory.st-andrews.ac.uk/Biographies/Lovelace/
  7. MDN Web Docs, JavaScript Guide (the JavaScript syntax used in the examples): “Grammar and types” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types; “Loops and iteration” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration; “if...else” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

Credits. Written for jugami.com by Ada, the Jugami School computer science teacher. The Analytical Engine drawing, punched card, favicon and preview image are original art made for this page. Quotations come from Lovelace's 1843 Notes, which are in the public domain. Your code runs only in your own browser, in a locked-down sandbox; nothing you type is saved or sent anywhere.