StanfordCS101: Code writing Lecture 2

 

Code Writing

• In this section, write some code and run it
• Every action in the computer comes down to code
• To understand the nature of computers...
• You have to play with code a little

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, to use them well, to not be intimidated by them.

Before Coding - Patience

• We'll start with some simple coding below
• First code examples are not flashy
• 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 writing simple visual effect code with the monkey, moon, and banana:
  

But for now we just have print()

Patience We're going to start by learning a few programming elements, and later we will 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" is a popular computer language
• CS101 coding: Javascript + some CS101 specific features
• Not the whole Javascript language, just bits
• Just enough code to experiment with key ideas

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 look at just the 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 bottom.

print(6);

print(1 , 2);

output:

6
1 2

 

• Run executes each line once, running from top to bottom
• print is a function -- like a verb in the code
• Numbers within the parenthesis ( ... ) are passed in to the print function
• Multiple values 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 our output will get much more interesting!
• Syntax the code is not free form
  -Syntax of the code is very limited and strict
  -A reflection of the inner, mechanical/dumb nature of the computer
  -Don't be put off - "When in Rome..."
  -We're visiting the world of the computer
• Note "print" is not a normal part of Javascript, I added it for CS101
• Reminder: Video + Document - pause the video and try it yourself

2. Print String

print(6, "hi");

print("hello", 2, "bye");

Output:

6 hi
hello 2 bye

 

• Thus far we have numbers, e.g. 6
• A string is a sequence of letters written within quotes to be used as data within the code
  -e.g. "hello"
  -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.
• A comment begins with // and extends through the end of the line. A way to write notes about the code, ignored by the computer.
• Experiments:
  -Edit the text within a string
  -Add more strings separated by commas
  -Add the string "print" - inside of string is just data, not treated as code
• Code vs. Data
• Code = instructions that are Run
• Data = passive numbers, strings, handled by the code
• Note that print is recognised 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

  Thinking About Syntax and Errors (key message!)

  • Syntax - code text structured for the computer
  • Very common error - you 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 author flaw
  • Professionals get syntax errors all the time
  • Beginners can be derailed by syntax errors, thinking they are making some big error
  • Examples below to inoculate you: a bunch of typical syntax errors + fixing them
  • Fixing these little errors is a small, normal step

  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 .. 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.

  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 often pointing to the specific line with problems.

  Syntax Error Examples

  The code examples below should print, the following, but they all have syntax errors. These should be quick to fix.

  a
  b b
  c c c
  

  print("a");

  prlnt("b", "b");

  print("c", "c", "c");

  a
  Error:prlnt is not defined
  

   

  print("a");

  print("b", "b);// here the ending quotes is not there in b

  print("c", "c", "c");

  Error:Invalid or unexpected token
  

   

  print("a");

  print("b", "b");

  print("c", "c", "c";

  Error:missing ) after argument list
  

   

  print("a");

  print("b" "b");

  print("c", "c", "c");

  Error:missing ) after argument list
  

   

  // This one has two syntax errors

  print("a");

  pront("b", "b");

  print("c", "c", "c";

  a
  Error:pront is not defined
  

   

  print("a");

  print(, "b");

  print("c", "c", "c");

   

  Example Problem

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

  1 2 buckle
  3 4 knock
  

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

  1 2 buckle
  3 4 knock
  

   

  For the example problems shown in lecture, the solutions are available as shown below. So you can revisit the problem, practice with it, and still see the solution if you like.

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

  Next: We've seen some basic print code and the Run button and how to fix syntax errors, so now try it yourself with the exercises.