JavaScript Everywhere

If you want to write and run JavaScript programs, you have options.

About JavaScript

JavaScript is only one of many thousands of languages out there, though by some measures it is the most popular. JavaScript:

was designed by Brendan Eich in 1995.
has evolved incredibly over the years—new versions have several features that old versions do not have.
is expressive and powerful.
is still evolving; the current version is ES2020.

JavaScript Evolves Very Rapidly

Some JavaScript engines out there do not fully support the most recent version of JavaScript. Most will at least fully support the JavaScript version of 2015, called ES2015, but there are still some in use out there that are stuck at the version from 2009, called ES5. If you find code that doesn’t seem to work, you may be using a browser or other application that isn’t keeping up with the times. On the flip side, you will often find example code online that uses dreadfully ancient versions of the language. That is a tradeoff of being so popular.

JavaScript Runs Everywhere

JavaScript runs:

In every web browser
In iOS and Android phones and tablets
In a computer’s terminal (command line scripts)
In high-powered server computers

You can do anything with JavaScript. There are libraries for Data Science, Machine Learning, Graphics, High Performance Games, Large-scale Networking, Simulations, Natural Language Processing, and so much more. JavaScript may be the most universal language there is.

Exercise: Browse the p5.js libraries. Which ones interest you?

All you need to run JavaScript, for now, just a web browser.

That right there is what makes JavaScript special, and why a lot of people like it as a first programming language. Your browser already speaks JavaScript.

Even if your program is to run in a browser, you have the option of running JavaScript programs:

In the browser’s JavaScript Console.
In a cloud project, e.g. Glitch, CodeSandbox, Repl.it, or the p5.js Web Editor.
From files stored on your local machine.

To make native desktop applications, you can write a program as if it would run in a browser, then convert it to a native application with Electron. Native mobile apps can be written in JavaScript with the help of tools like React Native, NativeScript, or Cordova. The point is, you don’t have to write your Android apps only in Java or Kotlin, and you don’t have to write iOS apps in Obejctive C or Swift. JavaScript has you covered.

To run command line scripts or “headless” servers, you will need a JavaScript Runtime, such as Node or Deno.

Let’s start with browser-based programs.

The Browser Console

In every modern web browser you will find a JavaScript Console. In it, you type a code snippet, hit the Enter key, and watch your code run. For example, you type 2 + 2 and the console responds with 4. Look for a menu item called “JavaScript Console”, “Developer Tools” or something similar. Here’s a little shell session using the Console in the Google Chrome Developer Tools:

Exercise: Locate the Console on your browser and compute 2 + 2.

Practice! Try the following expressions on your own:

1 + 2 + 3
"1" + "2" + "3"
Math.acos(-1)
"hello".toUpperCase()
`5 factorial is ${1 * 2 * 3 * 4 * 5}`

When we interact with a system by sending it lines to evaluate like this, the tool we are using is sometimes called a shell or a REPL. Programmers frequently use these things to help answer those "I wonder what this does..." questions. They are used a lot. Really.

Want more practice? Here are some suggestions.

1 + 2 * 3
(1 + 2) * 3
7 + 2
7 === 2
7 > 2
Math.hypot(3, 4)
5 > 2 ? 'happy' : 'sad'
5 > 20 ? 'wut' : 'makes sense'

The console can deal with variables and statements, and even functions:

By the way, the browser’s console is more than a simple little REPL. It also lets you modify an existing website.

Exercise: Open up the browser console on the web page you are viewing now. Scroll to the top of page. Enter the following command: document.querySelector('h1').textContent = 'Hacked'. Cool, right?

Cloud-Based Projects

There are many online services on which you can write and run (and store and even deploy) your own projects! Some of the more popular ones for JavaScript are Glitch, CodeSandbox, Repl.it, CodePen, and the P5 Web Editor. These services are free for small programs, but you do have to log in to save your work.

The p5.js Web Editor

This is the one we’ve been using. This screenshot should look familiar.

This tool allows you to create, build, and save projects made up of a number of files. In addition to HTML, CSS, and JavaScript files, you can add images and sounds.

Glitch

Glitch is a cloud devleopment environment application that has some nice support for writing web servers as well as simple browser-side only applications.

CodeSandbox

Repl.it

Repl.it is similar to the previous systems, though one nice thing about is that it supports dozens of different programs (not just JavaScript).

CodePen

CodePen allows you to create projects made up of HTML files, CSS files, JavaScript files, and images and sounds, just like the other cloud project products above. It also let’s you make very simple stripped-down projects called pens, where you drop code into text windows rather than files.

See the Pen Datetimes by Ray Toal (@rtoal) on CodePen.

We’ll walk through this example in class.

CLASSWORK

Pick any two of the platforms mentioned above (p5.js, Glitch, CodeSandbox, Repl.it, CodePen) and create a project of your own with at least one HTML, one CSS, and one JS file. Take note of the deployed URL and have one classmate try out your creation.

Writing Programs on Your Own Computer

You actually don’t have to use a program-development system on the cloud: you can actually create and edit files directly on your own, private computer. You can build your apps locally and test them locally. When it is time to deploy your application, you will have to ship those files to a hosting service. It sounds like a ton more work, but for really big projects, working locally has some advantages:

You don’t require an Internet connection
Typing and saving files and testing is so much faster
You can take advantage of a version control system

Programs that create and manage and run your local files are called text editors or IDEs depending on how much support they give you to run (and debug) your programs. There certainly exist bare-bones text editors (that simply allow the creation and editing of files with no understanding of what those files contain) and full-fledged IDEs that assist you with everything about programming, but most products like somewhere in-between.

Geenrally getting a good editor with language-specific packages or plug-ins are just fine. Here are some good choices:

Sublime used to be the coolest back in the day:

Sublime Text is even cooler than ultralight bicycles.— Hipster Hacker (@hipsterhacker) May 14, 2013

But Atom took over as being hotter and it now seems VSCode is the hottest. If you are old-school, you might use one of:

These date from teh 1970s but they keep improving and a lot of people love them. Not sure how many people use both.

Code-Along

Installing an editor and organizing files on your local machine is a lot of work if you’ve not done such things before. That’s why it’s time to work on this together in a code-along. We will:

Install VS Code
Allow it to run from the Command Line
Create a folder to work in (using the command line)
Create HTML, CSS, and JS files from scratch (and save them)
Build a basic web app
Run it locally in the browser (open file)

Version Control

It can be quite efficient to work locally, but you really should store your code safely on the cloud, in case you drop your laptop into a storm drain, or it just gets too old and stops working. But you need more than to just store your code on the cloud, you will want to work with a version control system. It not only saves your work, it (1) saves snapshots of your work through time, and (2) allows multiple people to work well together.

Exercise: Read Chapter 1 of the Git Book.

Formatting and Linting

It is crucial to avoid writing code with inconsistent spacing and inconsistent indentation. Doing so:

Shows you don’t care (about yourself or the people that have to read your code—it’s cringey!)
Is like building a bridge without a good foundation; it’s messy, sloppy, and you’re asking for trouble.

Almost every editor, whether online or local, as a mechanism to format code. USE IT. Glitch and CodeSandbox use the extremely popular Prettier formatter. Most local editors will let you use Prettier as well. It’s recommended.

Formatters can check structural style, but there are a lot of semantic and higher-level checks on your code that they don’t do. For that you need a linter. One of the most popular linters is ESLint.

No notes here

Formatting and linting will be demoed in class.

JavaScript and the Command Line

Time to get Node.js. This is a program you will have to install on your machine. Fortunately, it’s pretty easy to do; just follow the instructions. Once you have it, bring up your terminal application, and run node. This brings up a REPL. Try it!

$ node
> 801 / 2
400.5
> m = {one: 'один', two: 'два', three: 'три'}
{ one: 'один', two: 'два', three: 'три' }
> m.two
'два'
> 'abcdefghij'[3]
'd'
> 5.0 / 0
Infinity

You can also store programs in files, then run them with Node. Might as well start with hello world:

helloworld.js

console.log('Hello, world')

Run it:

$ node helloworld.js
Hello, world

With Node, you can write programs with command line arguments. Let’s just see what this looks like; by all means google or ask people how (and why) it works:

multiplicationtable.js

const size = Number(process.argv[2])

if (size > 20) {
  console.error('Argument is too large')
  process.exit(1)
}
for (let x = 1; x <= size; x += 1) {
  let line = ''
  for (let y = 1; y <= size; y += 1) {
    line += String(x * y).padStart(4, ' ')
  }
  console.log(line)
}

Here are some sample runs:

$ node multiplicationtable.js 7
   1   2   3   4   5   6   7
   2   4   6   8  10  12  14
   3   6   9  12  15  18  21
   4   8  12  16  20  24  28
   5  10  15  20  25  30  35
   6  12  18  24  30  36  42
   7  14  21  28  35  42  49
$ node multiplicationtable.js 70
Argument is too large

Writing Servers in JavaScript

This is such a huge topic we’re going to do only the briefest of code-alongs, just to show you at this point what web servers look like.

This will be an in-class code-along.

Summary

We’ve covered:

The ubiquity of JavaScript
The Browser Console
Working with Cloud Development Systems
Building programs locally
Formatting, linting, and version control
Command line JavaScript