Curriculum: page 1, the basics

We'll learn to use the browser's JavaScript console, and do some fundamental programming.

Open the console

Goal

Access your browser's JavaScript console.

Instructions

In Chrome, press Ctrl+Shift+J on Windows or Linux, press Command+Option+J on OS X. (Hold down the first two keys, then press J. On German keyboards, Ctrl is labeled Strg.)

You can also go to the wrench menu in the upper right corner of your window, and select ToolsJavaScript Console.

The console window should appear at the bottom of your browser window.

Resize it by dragging its top border.

Click through the icons along the top, and enjoy the awesomely complicated-looking graphs and tech-garble. This is your command center now.

Explanation

The console is a powerful, convenient interface to the innards of a web page. It allows you to step through the atoms from which a page is built (the 'Elements' tab), to see which files it is composed of, to diagnose problems, and, most importantly for us, to play with the JavaScript environment in the current page.

Don't feel obliged to understand any of its functionality right now. Most of it, we will not need for this course, and the part that you need will be explained as we go on.

Enter your first code

Goal

Actually type in some JavaScript, and see it run.

Instructions

Go to the 'Console' (rightmost) tab in the browser console.

Type random junk next to the > sign and press enter.

Now type 1 + 1 and press enter.

Next, type alert("This computer does what [name] tells it to do"). Mind the double quotes and parentheses. Substitute your name for [name].

Explanation

This part is the essence of the JavaScript console: you get to type in a one-line program, and the browser will run it for you, and tell you what the result was. If you write something that is not a valid program, it will try to tell you what went wrong.

The first program, 1 + 1, won't look too foreign. You should read it as a series of commands to the computer: give me the number one, now give me another one, now add them both together. I.e. JavaScript programs do not refer to abstract concepts (addition of one and one), but to a series of very pedestrian steps that the computer is instructed to take.

The second program (alert(…)) is a function call. Functions are operations that can be invoked. The function available under the name alert is an operation for showing a little dialog window on the screen. The parentheses are the notation for invoking a function, and the values in between them are given to the function as further info. In this case, it told the alert function which text to display.

Understand expressions

Goal

Understand the most basic elements that programs are composed of.

Instructions

Combine the two programs from the previous step: alert(1 + 1).

Enter 1 + 1 * 10 and then (1 + 1) * 10. Note the different results.

Enter "hey" + "ho".

Explanation

The kind of program fragment we have been writing so far is called an expression. Expressions are like Lego blocks, in that you can combine them into bigger, more interesting expressions. For example alert(1 + 1) combines a call to alert with the computation of 1 + 1, and does what you'd expect: show the number two in a dialog.

When combining expressions by using things like + and * (operators), the meaning is not always entirely obvious. The * operator, used for multiplication, is applied before the + operator. Parentheses are used to explicitly indicate how the expressions are grouped.

Every expression has a value. The most basic expressions are numbers (1) and strings ("hey"). They simply describe a value directly. Strings are used to represent text, and numbers to represent numeric values. These are two different types of values. We'll see a few more types later.

When + is applied to number values, it means addition. When it is applied to string values, it glues the text in the strings together, producing a new string value.

Variables

Goal

Understand how to store values and refer to them by name. Understand what statements are.

Instructions

Enter the following lines at the console:

var myvalue = 32 * 32;
alert(myvalue);
myvalue = 10;
alert(myvalue);

Explanation

The above program introduces three new concepts: the semicolons, the use of var, and the = operator.

The first is the easiest to explain. A program is a series of statements. An expression with a semicolon after it is a statement. There are other kinds of statements. The statements in a program are, as you'd expect, executed from top to bottom.

One special form of statement is a variable declaration. This introduces a name and associates a value with it. Afterwards, the name (myvalue, in this case) can be used as an expression that refers to the current value of the variable by that name.

A variable's value is not constant over the execution of a program (in this JavaScript variables differ from mathematical variables). The = operator can be used at any time to give it a new value, as in the third line of the example.

A web page

Goal

See how JavaScript programs operate in the context of web pages.

Instructions

Open the example page.

You will see the source for a very simple HTML page below, with the actual page shown above it. Read the source.

Try changing something, and clicking the 'Render' button above the source code. Open the JavaScript console in the new tab.

Explanation

What the sandbox page (which is itself a web page written in JavaScript) allows us to do is to write and try out web pages.

Pieces of JavaScript can be embedded in HTML documents with the <script> tag. In this case, there is a tiny program embedded that just defines a variable called myMessage and calls the console.log function on it.

When entering expressions directly into the console, the result will be displayed automatically. This does not happen for programs running as part of a web page. When you want to explicitly show something in the console, use the console.log function.

If you want to inspect the environment of a page shown in the sandbox, you have to take an extra step. If you open a console on that tab, and you type myMessage into it, it won't find that variable. This is because the console is connected to the sandbox page itself, not the page shown inside of it. At the bottom of the console, there is a control that says <top frame>. Click on this and select the other option to connect the console to the actual page we wrote.

The button in the example page has a snippet of JavaScript associated with it through an onclick attribute. Attributes are name="value" pairs that are specified in HTML tags. Because the button and the myMessage variable live on the same page, the onclick program (alert(myMessage);) can refer to it. The myvalue variable we defined earlier (on this tab) is not available on the other tab. Each page is its own little world, with its own set of variables.

And now

Things are about to get a lot more interactive.

→ Continue with the second page.