Introduction to Computers and Code

< Code In The Browser

In this first section we'll look at the essential nature of computers and play with computer code a little. (The development of this work has been supported by Google and Stanford.)

The Essential Nature of Computers

The fundamental equation of computers is:

computer = powerful + stupid

What is a program? What is code?

Since the computer is totally mechanical and stupid -- how do they manage to do so many useful things? The gap between the computer and doing something useful is where the human programmer creates solutions. Programming is about a person using their insight about what would be useful and how it could be done, and writing the solution out for the computer, composed out of the tiny, mechanical little operations that the computer can do.

"Code" refers to the language of simple instructions the computer can understand. For these lectures, we'll write and run short snippets of code to understand what the essential qualities of computers, and especially their strengths and limitations.

Experimenting with code, the nature of computers will come through very clearly ... powerful in their own way, but with a limited, mechanical quality. IMHO, this mixed nature of computers is something everyone should understand, to use them well, to not be intimidated by them.

Before Coding - Patience

Patience We're going to start by learning a few programming elements, and later we'll recombine these few elements to solve many problems. These first elements are simple, so they are not much to look at on their own. Be patient, soon we'll put these elements together -- like lego bricks -- to make pretty neat projects.

First Coding -- Print, Number, String

For this class, we'll use a variant of the language known as "Javascript", with some added features for this course. The Javascript language works in the web browser, so all of our experiments can live right in the browser with nothing else required.

Here is code which calls the "print" function. Click the Run button below, and your computer will run this code.

How does the code work? This line -- print(2, "hi"); -- calls the print function, passing in the number 2 and the word "hi". The print function prints these items out in the display on one horizontal line.

A number is just written plain, e.g. 6

A "string" is a sequence of letters written within quotes, e.g. "like this". Strings can also be written within single quotes 'for example'.

A comment begins with // and extends through the end of the line. Comments can be use it to temporarily remove a line code -- "commenting out" the code, but placing a "//" to its left.

Print is a "function" which the code "calls" to invoke. We pass values for the function to use within the parentheses. These values are called the "arguments" to the function call. We'll call many other functions as we go, and they will all use this arguments-within-parenthesis pattern. The line of code ends with a semicolon, although the code will often work even if the semicolon is omitted.

Variables and =

The equals sign = takes a value on the right hand side and assigns it into a variable name of our choosing on the left hand side, like this:

Variables work as a shorthand -- we = assign a value into a variable, and then use that variable on later lines to retrieve that value.

Experiments to try with the above code:

Thinking About Syntax and Errors

Syntax The syntax shown above must be rigidly followed or the code will not work: function name, parenthesis, each string has opening and closing quotes, commas separating values for a function call, a variable must be given a value with = before it is used.

The rigidity of the syntax is a reflection of the limitations of computers .. their natural language is fixed and mechanical. This is important to absorb when working with computers, and I think this is where many people get derailed. You write something that any human could understand, but the computer can only understand the code where it fits the computer's mechanical syntax.

When writing for the computer, it is very common to make a trivial, superficial syntax mistakes in the code. The most expert programmers on earth make that sort of error all the time, and think nothing of it. The syntax errors do not reflect some flawed strategy by the author. It's just a natural step in translating our thoughts into the more mechanical language of the computer. As we'll see below, fixing these errors is very fast.

It's important to not be derailed by these little superficial-error cases. To help teach you the patterns, below we have many examples showing typical errors, so you can see what the error messages look like and see how to fix them. For each snippet of code below, what is the error? Sometimes the error message generated by the computer points to the problem accurately, but sometimes the error message just reveals that the error has so deeply confused the computer that it cannot create an accurate error message. (Firefox currently produces the most helpful error messages, but any modern browser should work.)

First Code Exercises

Here are some first code writing exercises to get that first sense of the world of the computer, its code, and its odd limitations. The part where we see the great power of the computer comes in a later section :)

Exercise 1

Write code that prints the following.

Easy does it.
Easy does it. Easy does it.
Easy does it. Easy does it. Easy does it.

Rather than repeat "Easy does it." many times in the code, assign a variable -- x = "Easy does it."; -- then use that variable within the calls to print.

Exercise 2

Write code that prints the following with your name.

Hello, my name is Alice
Alice is in this class
Without a doubt Alice is working on this code

Exercise 3 (optional)

This problem plays around with the meaning of a variable like "x" in and out of a quoted string. This exercise shows how the computer deals code in a literal, mechanical way according to fixed rules. Write code that prints the following with the constraint below. The first line of your code must be x = "x";

x x y
y x x
x x
y y y
By changing only the first line, your code should be able to print something like (a):
chocolate chocolate y
y x chocolate
chocolate x
y y y
or (more tricky) b:
x x x x y
y x x x
x x x
y y y

Exercise 4 (optional)

Suppose the output for this exercise must be exactly this:

banana banana banana
banana banana banana
banana banana banana

Write code to produce the the above output. The code can have any number of variable assignments and exactly three lines that call print(...). However, each of the three print(...) lines must be different from the other two.

This work was created by Nick Parlante and is released under the Creative Commons Share-Alike license 3.0