<script></script> element introduced in Hour 1.
<script> element to include that file by name using the
src (source) attribute:
The previous example includes a file
You’re not limited to using a single
script element—you can have as many of them on your page as you need.
You sometimes see HTML-style comment notation
This is for the benefit of ancient browsers that didn’t recognize the
this is statement 1
this is statement 2
or combined in the same line by terminating each with a semicolon:
this is statement 1; this is statement 2;
To ease the readability of your code, and to help prevent hard-to-find syntax errors, it’s good practice to combine both methods by giving each statement its own line and terminating the statement with a semicolon too:
this is statement 1;
this is statement 2;
A comment that occupies just a single line of code can be written by placing a double forward slash before the content of the line:
// This is a comment
<!-- this is a comment -->
To add a multiline comment in this way, we need to prefix every line of the comment:
// This is a comment
// spanning multiple lines
A more convenient way of entering multiline comments to your code is to prefix your comment with
/* and terminate it with
*/. A comment written using this syntax can span multiple lines:
/* This comment can span
to mark up every line */
A variable can be thought of as a named “pigeon-hole” where we keep a particular piece of data. Such data can take many different forms—an integer or decimal number, a string of characters, or various other data types discussed later in this hour or in those that follow. Our variables can be called pretty much anything we want, so long as we only use alphanumeric characters, the dollar sign $, or underscores in the name.
Let’s suppose we have a variable called
netPrice. We can set the value stored in
netPrice with a simple statement:
netPrice = 8.99;
mypetcat is a different variable from
var keyword and in most cases is good programming practice:
netPrice = 8.99;
Alternatively we can combine these two statements conveniently and readably into one:
var netPrice = 8.99;
To assign a character string as the value of a variable, we need to include the string in single or double quotes:
var productName = "Leather wallet";
We could then, for example, write a line of code sending the value contained in that variable to the
The generated dialog would evaluate the variable and display it as in Figure 2.1.
Choose readable variable names. Having variable names such as
netPrice makes code much easier to read and maintain than if the same variables were called
myothervar49, even though the latter names are entirely valid.
The values we have stored in our variables aren’t going to be much use to us unless we can manipulate them in calculations.
var theSum = 4 + 3;
As you’ll have guessed, after this statement has been executed, the variable
theSum will contain a value of 7. We can use variable names in our operations too:
var productCount = 2;
var subtotal = 14.98;
var shipping = 2.75;
var total = subtotal + shipping;
subtotal = total – shipping;
var salesTax = total * 0.15;
var productPrice = subtotal / productCount;
var itemsPerBox = 12;
var itemsToBeBoxed = 40;
var itemsInLastBox = itemsToBeBoxed % itemsPerBox;
In this example, the variable
itemsInLastBox would contain the number 4 after the last statement completes.
is equivalent to the statement
productCount = productCount + 1;
is just the same as
items = items – 1;
= operator, for example,
The following two lines of code are equivalent:
total = total + 5;
total += 5;
So are these two:
counter = counter - step;
counter -= step;
We can use this notation for other arithmetic operators such as multiplication and division too:
price = price * uplift;
price *= uplift;
var average = a + b + c / 3;
If, as the variable’s name implies, you’re trying to calculate an average, this would not give the desired result; the division operation would be carried out on
c before adding the values of
b to the result. To calculate the average correctly, we would have to add parentheses to our statement, like this:
var average = (a + b + c) / 3;
If you have doubts about the precedence rules, I would recommend that you always use parentheses liberally. There is no cost to doing so, it makes your code easier to read (both for you and for anyone else who later has to edit or decipher it), and it ensures that precedence issues don’t spoil your calculations.
Arithmetic operators don’t make much sense if the variables they operate on contain strings rather than numeric values. The exception is the
var firstname = "John";
var surname = "Doe";
var fullname = firstname + " " + surname;
// the variable fullname now contains the value "John Doe"
If you try to use the
var name = "David";
var age = 45;
alert(name + age);
Figure 2.2 shows the result of using the
+ operator on a string and a numeric value.
While adding event handlers directly into HTML elements is perfectly valid, it’s not regarded these days as good programming practice. It serves us well for the examples in Part I of this book, but later in the book you learn more powerful and elegant ways to use event handlers.
onClick event handler can be applied to nearly all HTML elements visible on a page. One way we can implement it is to add one more attribute to the HTML element:
Let’s see an example; have a look at Listing 2.3.
The HTML code adds a button to the
<body> element of the page and supplies that button with an
onclick attribute. The value given to the
In this case, there’s just one statement:
alert('You clicked the button!')
Figure 2.4 shows the result of clicking the button.
You may have noticed that we call the handler
onClick but that we write this in lowercase as
onclick when adding it to an HTML element. This convention has arisen because although HTML is case insensitive, XHTML is case sensitive and requires all HTML elements and attribute names to be written in lowercase.
When we simply want to detect where the mouse pointer is on the screen with reference to a particular page element,
onMouseOut can help us to do that.
onMouseOver event is fired when the user’s mouse cursor enters the region of the screen occupied by the element in question. The
onMouseOut event, as I’m sure you’ve already guessed, is fired when the cursor leaves that same region.
Listing 2.4 gives a simple example of the
onMouseOver event in action:
The result of running the script is shown in Figure 2.5. Replacing
onmouseout in Listing 2.4 will, of course, simply fire the event handler—and therefore pop up the alert dialog—as the mouse leaves the image, rather than doing so as it enters.
You covered quite a lot of ground this hour.
Q. Some of the listings and code snippets list opening and closing <script> tags are on the same line; other times they are on separate lines. Does it matter?
A. No. If you use the
</script>—this region must be left empty.
Starting with Listing 2.4, remove the
onMouseOut handlers from the
<img> element. Instead, add an
onClick handler to set the
title property of the image to
My New Title. [Hint: You can access the image title using
Can you think of an easy way to test whether your script has correctly set the new image title?