JavaScript is the language of the web and is growing ever more important in the world of software. In this introductory workshop you will use JavaScript, HTML, and CSS to deploy a small application from your laptop to the cloud using the command line, Node.js, Heroku, and Github.
JavaScript was invented (in 1995) to allow "scripting" on web pages
Prior to JavaScript, any input was sent to a web server via a form, and the user had to wait for a new web page to download before seeing any results or changes
JavaScript allows a web page to respond immediately and interactively
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
to open your Terminal:
Mac OS: launch the "Terminal" application
Windows: launch the "Cmder" application (pronounced "Commander"), make a new console (Ctrl-T) and select
Startup command: {bash::bash}
Startup directory: C:\Users\yourname
Windows (alternate): Launch the Windows Command Prompt (cmd.exe or PowerShell) -- but beware, the commands are slightly different than in bash
Important: make your terminal as tall as possible and don't overlap windows
when reading a program's output you want to start reading at the top...
...and if your window is too short then the top lines will scroll away and you will miss them
Make it look like this:
Lab: Interactive Calculator
open a terminal
look at the prompt -- it should end with a $ or > symbol
type node -- that's you commanding the computer to launch node
press the Return key (also called Enter)
see the > prompt
type 1 + 1
press the Return key again
see the 2
Yay! Your computer is an expensive calculator!
Bonus: what other math can you do?
Node is a JavaScript Engine
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!
the shell is the lowest level command line
its prompt usually looks like this:
Davids-Macbook-Pro:~ David$ (Mac)
david@davidspc:~$ (Ubuntu Linux)
C:\Users\david> (Windows)
node is a command-line program that is launched from the shell
its prompt is usually just a greater-than > character
From inside node, if you want to get back to the shell...
type Ctrl-C twice
or type .exit and Enter
Basic Commands (Mac / Unix / Bash)
pwd ("print working dir") -- shows the name of the current directory
ls ("list") -- shows the contents of the current directory
mkdir ("make dir") -- creates a new subdirectory inside the current directory
cd ("change dir") -- move into a different directory
Windows shells have slightly different commands; if these commands don't work for you, ask a TA how to use "bash" instead.
Home Directory
the shell is always "inside" a directory
To find out which directory you are in, type pwd
This stands for "print working directory"
Most of the time the prompt also shows the current directory
when you first open the Terminal you are in your home directory
if you store files directly in your home directory, it will soon get cluttered
for this class, we recommend:
create a code directory inside your home directory
create a new directory inside code for each project
LAB: make a subdirectory and then enter it
Open Terminal or Command Prompt
Confirm that you are in your home directory
Make a new subdirectory using mkdir code
Change into that directory using cd code
Make sure you're really there using pwd
On Windows use cd
List its contents using ls (and note that it's empty)
On Windows use dir
Source File
source code is the essence of a program
source files are text files that contain source code
to run a JavaScript program you type node and then the name of the source file, like this:
$ node hello.js
Hello, World!
The Recipe Metaphor
source file ≈ recipe
running a program ≈ cooking
LAB: Hello, World
Make sure you are in your code subdirectory using pwd and/or cd
Open this directory in your text editor
Create a file named hello.js using the File > New menu
Inside this file, put the following source code:
console.log("Hello, World!");
Save the file
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)
Run this file using node hello.js
What happens? Is this what you expected?
LAB: Countdown
Inside your code directory, create a file named countdown.js
Inside this file, put the following source code:
let count = 10;
while (count > 0) {
console.log(count + '...');
count = count - 1;
}
console.log('Blastoff!');
Save the file
In your terminal, run node countdown.js
Analyzing Countdown
LAB: Changing Ingredients
Remember the cooking analogy? The code is the instructions; now let's allow the user (you!) to change the ingredients
Change line 1 to the following:
let count = parseInt(process.argv[2])
run the program with new inputs from the command line like this:
node countdown 5
node countdown 100
ARGV
process is a built-in library object provided by NodeJS
process.argv is an array containing the command-line arguments
For example, on my system, if I type node countdown 99, argv contains...
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'
Computers (usually) start counting at zero, so process.argv[2] gets the third item from the array process.argv
