The trigger that runs the script

The script in this page needs to have the div element in place before it can run so that the script can
point
to that element and insert some HTML into that space. Therefore, the script needs a trigger
something to
get it going when the time is right. That time, it turns out, is after the entire HTML document has
loaded.
As you learn in Chapter 8, the browser fires what is known as an event immediately upon completion
of
loading the page and whatever content it may contain. For example, an image in the page is
downloaded
separately from the HTML page, but the pages onload event fires only after the HTML text and
image(s)
have arrived in the browser.
To get the script to run after the page has loaded, the script includes one statement that instructs the
browser to run a specific routine whenever the page receives that event. For this page, the script will
run
some JavaScript code grouped together in a routine named showBrowserType.

Inserting some text

Now well look briefly at the rest of the JavaScript code lines inside the <script>...</script> tag pair.
All JavaScript routines are defined as functions. Therefore, the first line of the routine simply alerts the
browser that all the stuff between the curly braces ({}) belongs to the function named showBrowserType.
Despite the four indented lines shown in Listing 3-1, the code is actually just one statement divided
into
lines for the convenience of printing in this book. Dividing a long statement into lines has to follow
some
rules, which you will learn in Chapter 6. Therefore, when you enter the script, divide the lines precisely
as
shown in Listing 3-1.
The basic operation of this routine is to plug some new HTML content inside the div element in the
documents
body. To do that, we need three key ingredients:
1. A way to refer to the div element
2. A way to insert some new text inside the element
3. The new HTML text that is to go inside the element
In plain language, the routine in the script forces the HTML inside the element (whose ID is readout) to
become whatever new stuff arrives from the right side of the equal ( =) sign. To refer to the readout div,
the script uses the industry standard way to refer to any HTML element that has an ID attribute:
document.getElementById()

To specify which element in the document you mean, include the elements ID (in quotes) inside the
parentheses:
document.getElementById(readout)

That points to the element. Now go one step further to point to the property of the element of interest
to
you: the innerHTML property here. Anything you assign to this property replaces whatever is inside the
elements
tag pair. Because the readout div element is empty when the page initially loads, youre simply
replacing an empty space with whatever is to the right of the equal sign.
Now lets look at the stuff to the right of the equal sign.
The plus (+) signs in the series of lines after the equal sign are the JavaScript way of stringing together
batches of textlike stringing beads on a necklace. By placing the combined sequence of text (which
includes an HTML <span> tag) to the right of the reference to the element and its innerHTML property,
the
text is said to be assigned to the innerHTML property of the readout element.

24

Part I

Getting Started with JavaScript