Technical requirements

See the Installfest project for more instructions.

Software:

Accounts:

If you do not have these, RAISE YOUR HAND!

A Taste of JavaScript

You may never have coded before. Today you will.

What will we learn?

In this class, you will learn about:

Follow along online! Put a browser pointed at this site on one side of your screen, and Terminal on the other.

What if I know some of this already?

The best way to learn is to teach.
- Latin proverb

What is code?

Generally, code is something that stands for something else.

Specifically, source code is a series of instructions that tell a computer what to do.

With computers, "code" is not about secrets -- it's about symbols.

What is coding?

What is coding NOT?

"The only perfect program is an empty file." - Alex

A Program Is Like A Recipe

Grandma's Cookie Recipe

When you are coding, you are not baking cookies; you are writing a recipe for how to make cookies.

Writing a recipe involves trying out the recipe (baking a test batch), then tweaking the recipe and trying again and again until you get it right.

(recipe from popcornpottery.com)

Languages

Errors Are Awesome

If your code is a two-year-old child, then an error is a temper tantrum.

(It can take effort to figure out the underlying reason why they're upset and fix it.)

See also: What went wrong? from MDN

JavaScript, child of the World Wide Web

For example:

<button onclick='clicked()'>Click Me!</button>
<script>
let clicks = 0;
function clicked() {
  clicks = clicks + 1;
  event.target.textContent = clicks;
}
</script>

The Command Line

Historical Terminal

Computers used to not have screens! They were connected to devices like this:

tty

The Terminal app is a direct descendant of a TeleType printer or TTY.

When you type into the console and hit Enter you are pretending to type a line onto a TTY; the scrolling terminal is like a roll of printer paper.

See this twitter thread for more history and TTY pix.

picture of Teletype Corporation ASR-33 on display at the Computer History Museum by ArnoldReinhold [CC BY-SA 3.0] via Wikimedia

Lab: Opening the Terminal

terminal next to browser

Lab: Interactive Calculator

  1. open a terminal
  2. look at the prompt -- it should end with a $ or > symbol
  3. type node -- that's you commanding the computer to launch node
  4. press the Return key (also called Enter)
  5. see the > prompt
  6. type 1 + 1
  7. press the Return key again
  8. see the 2

Node is a JavaScript Engine

Diagram: Node Train: Command Line

An "engine" is a type of program that either executes or empowers other programs.

NodeJS (aka node) is an engine that runs JavaScript programs -- either from files, or interactively from the command line.

A Tale of Two Prompts

WARNING: Before you start typing, look at the prompt!

From inside node, if you want to get back to the shell...

Basic Commands (Mac / Unix / Bash)

Windows shells have slightly different commands; if these commands don't work for you, ask a TA how to use "bash" instead.

Home Directory

LAB: make a subdirectory and then enter it

  1. Open Terminal or Command Prompt
  2. Confirm that you are in your home directory
  3. Make a new subdirectory using mkdir code
  4. Change into that directory using cd code
  5. Make sure you're really there using pwd
    • On Windows use cd
  6. List its contents using ls (and note that it's empty)
    • On Windows use dir

Source File

$ node hello.js
Hello, World!

LAB: Hello, World

  1. Make sure you are in your code subdirectory using pwd and/or cd
  2. Open this directory in your text editor
  3. Create a file named hello.js using the File > New menu
  4. Inside this file, put the following source code:

    console.log("Hello, World!");
    
  5. Save the file

  6. Switch back to the terminal (using Alt-Tab or Cmd-Tab or clicking)
    (If you are using VS Code, you can click Terminal → New Terminal for the built-in terminal panel)

  7. Run this file using node hello.js

What happens? Is this what you expected?

LAB: Countdown

  1. Inside your code directory, create a file named countdown.js
  2. Inside this file, put the following source code:

    let count = 10;
    
    while (count > 0) {
      console.log(count + '...');
      count = count - 1;
    }
    
    console.log('Blastoff!');
    
  3. Save the file

  4. In your terminal, run node countdown.js

Analyzing Countdown

Countdown Breakdown

LAB: Changing Ingredients

ARGV

index meaning value
0 location of the NodeJS engine '/usr/local/Cellar/node/11.10.0/bin/node'
1 location of the current program '/Users/alex/code/countdown'
2 "first" command-line argument '99'

Next Lesson 

Outline

[menu]

/