Another week, another language! This is in some ways a ridiculous way to learn about programming, and you may not remember all you learn. The most important thing is to get some sense of the types of operations that take place when programming languages interact with web pages, so you can change the code you are given to get it to do exactly what you want. But in order to do this it wil lbe very helpful to know just a little bit about programming in general.

What is Javascript and why do we learn it?

You’ll remember that I made a a very general division early in the semester:

Structure

Style

Dynamic Content & Effects

HTML

CSS

Javascript

In contemporary web pages, a lot of the work that runs the page is done by javascript. This is easy to see, e.g., in the “Network” or “profiler” tabs of the developer tools in Chrome or Firefox. In general, if you want to make changes to a web page after it’s written, javascript is the easiest way to do it (except for CSS animations, I guess).

Javascript also has uses outside the browser – the Atom editor is written in Javascript, for instance.

Running Javascript

Because we use javascript mostly to manipulate web pages, it can be a little hard to run javascript programs. Here are a couple of ways to try javascript form inside your browser:

Run in Atom Editor

This might be the easiest (though eventually you will need to run in a browser, e.g., if you want to practice manipulating DOM elements). Install the script-runner package, or one off the alternatives like run in atom or script, and follow directions to run code directly in the editor.

Console

Scratchpad

The FF console is a little awkward to use for multi-line programming, so they have also provided a “Scratchpad” tool (Shift-F4), which I find helpful.

Accessing the console

When you run code in the browser, the easiest way to print something is with the console.log function. This prints text to the console so you will have to open the console to see if your code is working.

In almost all programming languages, there are many variable “types”; javascript variables are “dynamically typed”, which means that the type is determined only when the variable is actually being used. This is very handy, but can sometimes lead to confusion, e.g., compare:

this is number: 1
this is number: 2
this is number: 3
this is number: 4
this is number: 5
this is number: 6
this is number: 7
this is number: 8
this is number: 9
this is number: 10
carrot
potato
pea
carrot
potato
pea

Flow Control

You’ll learn a few more in the homework (notably switch/case and try/catch); but these two do the two basic operations you need to understand: repeat and test.

Accessing the DOM

Javascript uses something called the Document Object Model to understand the web page. As far as Javascript is concerned, the DOM is a big complex object, whose parts can be identified, manipulated, and used as input for complex functions. Here’s a relatively simple operation you can try in the Firefox scratchpad with a :