We'll learn to use the browser's JavaScript console, and do some fundamental programming.
Access your browser's JavaScript console.
In Chrome, press Ctrl+Shift+J on Windows or Linux, press Command+Opt+J on MacOS. (Hold down the first two keys, then press J. On German keyboards, Ctrl is labeled Strg.)
You can also go to the Chrome's main menu in the upper right corner of
your window, and select More Tools ▸ Developer Tools.
The console window should appear at the right side of your browser window.
Resize it by dragging its left border.
Click through the icons along the top, and enjoy the awesomely complicated-looking graphs and tech-garble. This is your command center now.
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.
Actually type in some JavaScript, and see it run.
Go to the 'Console' 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].
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 the most basic elements that programs are composed of.
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".
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.
Understand how to store values and refer to them by name. Understand what statements are.
Enter the following lines at the console:
var myvalue = 32 * 32; alert(myvalue); myvalue = 10; alert(myvalue);
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.
See how JavaScript programs operate in the context of web pages.
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.
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 top left of the console,
there is a control that says <top>. Click on
this and select the option with the name of the domain that is
shown in the address bar of the browser 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.
Things are about to get a lot more interactive.