Introduction to Code

CS101 explores the essential qualities of computers, how they work, what they can and cannot do, and requires no computer background at all. We'll begin by looking at the basic features of computers and get started playing with computer code.

Acknowledgements: Thanks to Nick Parlante for his materials. From Nick: "Thanks to Google for supporting my early research that has helped create this class. Thanks to Mark Guzdial who popularized the idea of using digital media to introduce computers."

Fundamental Equation of Computers

The fundamental equation of computers is:

  Computer = Powerful + Stupid

• Powerful enough to look through masses of a data
  -Billions of "operations" per second
• Stupid because each operation is simple and mechanical.
  -Nothing like "insight" or "thinking" (HAL 9000 video)
• Powerful + Stupid ... will come out in our exercises
• Why are computers useful despite their limitation?
• That's what CS101 is about
  -Visit this funny world of the computer, see how it works
  -Understand what they can do and how humans leverage them
  -Not be intimidated
• Hidden agenda: open eyes for some, more computer science courses

Computers are very powerful at looking through large amounts of data quickly. Computers can literally perform billions of operations per second. However, the individual "operations" that computers can perform are extremely simple and mechanical, nothing like a human thought or insight. Typical "operations" include comparing two numbers or adding two numbers together.

So although the computers are fast at what they do, the operations that they can do are extremely rigid, simple, and mechanical. Or put another way, computers are not like the HAL 9000 from the movie 2001: A Space Odyssey: HAL 9000 video.

A key takeaway is that a computer does not act like a human brain. The computer is a mechanical tool which can do amazing things, but it requires a human to tell it what to do.

High Level - How Does a Computer Work?

• The computer follows a series of "code" instructions
• Each instruction is simple (e.g. add 2 numbers)
• The computer "runs" a long series of instructions
• Purely mechanical

Computers are very useful

• Think of all the useful computer features (phone, camera)
  -Messaging, email
  -MP3 audio
  -Red-eye reduction
• If computers are so stupid... how are they so useful?
• What connects the two sides?

Programmers

• Programmers harness the power of a computer!
• The programmer thinks up a useful feature
  -Requires creativity, insight about human needs, and knowledge of computers
• Programmers break down the steps, writing code for the computer
  - Dumbs it down for the computer!
• Best features of both sides: inexpensive/fast processing of computer + creative insight of the programmer
• CS101 explorations: algorithms and code

Since computers are totally mechanical and stupid, why are they so ubiquitous? The gap between the computer and doing something useful is where the human programmer creates solutions. Programming requires a person to be creative and have insight about a problem as well as the ability to break the solution down into instructions that a computer can follow.

Code refers to the language 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 in order to use them well and to not be intimidated by them.

Before Coding - Patience

• We'll start with some simple coding below
• Code is like lego bricks...
• -Individual pieces are super simple
• -Eventually build up great combinations
• But we have to start small

Foreshadowing

Within a few hours of lecture, we'll be doing special effects with images such as the following:

But for now we just have print()!

Patience We're going to start by learning a few programming elements as well as the different parts of a computer, 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.

Javascript Computer Langauge

• Javascript code plus some extensions just for CS101
• Our code phrases are small...
• -Just big enough to experiment with key ideas
• -Not full, professional programs
• -But big enough to show the real challenges of coding

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. We'll use just the parts of Javascript needed for our experiments, not the full language one would see using Javascript professionally. That said, Javascript is a real language, and our code is real code. Our small programs show the important features of code, while keeping things fast and small.

1. First Code Example - Print

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

• Run executes each line once, running from top to bottom
• print is a function, a verb that represents an action the computer will take.
• Data within the parenthesis are passed in to the print function (nouns)
  -this data is the object of the "verb"
  -data is called the arguments of the function
• Multiple values are separated by commas
• Experiments change the code and run after each change see the new output:
  -Change a number
  -Add more numbers separated by commas inside the print(...)
  -Copy the first line, and paste it in twice after the last line
  -I promise the output will get more interesting!
• Narrow Syntax not free form
  -Allowed syntax is super strict and narrow
  -e.g. cannot leave out the right parenthesis )
  -A reflection of the inner, mechanical nature of the computer
  -Don't be put off - "When in Rome..."
  -We're visiting the world of the computer
• Note this "print" is not a normal part of Javascript, I added it for CS101

2. Print And Strings

• A comment begins with // and extends through the end of the line. A way to write notes about the code, ignored by the computer.
  Why might programmers use comments?
• A string is a sequence of characters written within quotes to be used as data within the code
  -e.g. "hello" or "123"
  -Strings work with the print function, in addition to numbers
  -Strings in the computer store text, such as urls or the text of paragraphs, etc.
• Experiments:
  -Edit the text within a string
  -Add more strings separated by commas
  -Add the string "print" - tricky!
  -Inside the quote marks is just data
• Code = instructions that are run
• Data = numbers or strings; handled by the code

Note that print is recognized as a function in the code vs. the "hello" string which is just passive data (like verbs and nouns). The computer ignores the comments, so they are just a way for you to write notes to yourself about what the code is doing. Comments can be use it to temporarily remove a line of code -- "commenting out" the code by placing a "//" to its left.

Thinking About Syntax and Errors (today's key message!)

• Syntax -- code is structured for the computer
• Very common error -- type in code, with slight syntax problem
• Professional programmers make that sort of "error" all the time
• Fortunately, very easy to fix ... don't worry about it
• Not a reflection of some flaw in the programmer
• Just the nature of typing ideas into the mechanical computer language
• Beginners can be derailed by syntax step, thinking they are making some big error
• Try to make a bunch of typical syntax errors and fix them
• Fixing these little errors is a small, normal step
• Note: Firefox gives you the best error messages

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.

The rigidity of the syntax is a reflection of the limitations of computers, since 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 getting started with computers. You write something that any human could understand, but the computer can only understand the code where it fits the computer's mechanical syntax.

Trivial, superficial syntax mistakes are very common when writing 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 and often will tell you the specific line with problems.

Syntax Error Examples

These syntax problems are quick to fix.

You Try It

Change the code below so, when run, it produces the following output:

1 2 buckle
3 4 knock

For the example problems shown in lecture, the solutions are available as shown below.

print(1, 2, "buckle");
print(3, 4, "knock");