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 ▸
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.
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.
Go to the 'Console' tab in the browser console.
Type random junk next to the > sign and press enter.
1 + 1 and press enter.
alert("This computer does what [name] tells it to
do"). Mind the double quotes and parentheses. Substitute your
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
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
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).
1 + 1 * 10 and then
(1 + 1) * 10.
Note the different results.
"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
alert(1 + 1) combines a call
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
* (operators), the meaning is not always
entirely obvious. The
* operator, used for
multiplication, is applied before the
Parentheses are used to explicitly indicate how the expressions are
Every expression has a value. The most basic expressions
are numbers (
1) and strings (
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
+ 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
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
= operator can be used at any time to give it a new
value, as in the third line of the example.
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.
<script> tag. In this case, there is a tiny
program embedded that just defines a variable
myMessage and calls the
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
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.
associated with it through an
name="value" pairs that are specified in
HTML tags. Because the button and the
live on the same page, the
alert(myMessage);) can refer to it.
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.
→ Continue with the second page.