We can put the <script> tags inside the header (between the <head> and </head> tags), or inside the body (between the <body> and </body> tags) of the HTML page. However, although we can put them outside these areas, for example, before the <html> tag or after the </html> tag, this is not permitted in the web standards and so is considered bad practice.
However, older browsers do not support the type attribute, so for compatibility it's best to include both, as shown here:
Save the page as ch1_examp1.htm to a convenient place on your hard drive. Now load it into your web browser. You should see a red web page with the text Paragraph 1 in the top left-hand corner. But wait—didn't we set the <body> tag's BGCOLOR attribute to white? OK, let's look at what's going on here.
The page is contained within <html> and </html> tags. This then contains a <body> element. When we define the opening <body> tag, we use HTML to set the page's background color to white.
document.bgColor = "RED";
What we might call the page is known as the document when scripting in a web page. The document has lots of properties, including its background color, bgColor. We can reference properties of the document by writing document, then putting a dot, then the property name. Don't worry about the use of the document at the moment; we'll be looking at it in depth later in the book.
Let's extend the previous example to demonstrate the parsing of a web page in action. Type the following into your text editor:
Save the file to your hard drive as ch1_examp2.htm, and then load it into your browser. When you load the page you should see the first paragraph, Paragraph 1, appear followed by a message box displayed by the first script block. The browser halts its parsing until you click the OK button. As you can see in Figure 1-1, the page background is white, as set in the <body> tag, and only the first paragraph is currently displayed.
Click the OK button, and the parsing continues. The browser displays the second paragraph, and the second script block is reached, which changes the background color to red. Another message box is displayed by the second script block, as shown in Figure 1-2.
Click OK, and again the parsing continues, with the third paragraph, Paragraph 3, being displayed. The web page is complete, as shown in Figure 1-3.
The first part of the page is the same as in our earlier example. The background color for the page is set to white in the definition of the <body> tag, and then a paragraph is written to the page.
<html> <body BGCOLOR="WHITE"> <p>Paragraph 1</p>
The first new section is contained in the first script block.
This script block contains two lines, both of which are new to us. The first line
// Script block 1
is just a comment, solely for our benefit. The browser recognizes anything on a line after a double forward slash (//) to be a comment and does not do anything with it. It is useful for us as programmers, because we can add explanations to our code that make it easier for us to remember what we were doing when we come back to our code at a later date.
The alert() function in the second line of code is also new to us. Before we can explain what it does, we need to explain what a function is.
In particular, the alert() function enables us to alert or inform the user about something, by displaying a message box. The message to be given in the message box is specified inside the parentheses of the alert() function and is known as the function's parameter.
The message box that's displayed by the alert() function is modal. This is an important concept, which we'll come across again. It simply means that the message box won't go away until the user closes it by clicking the OK button. In fact, parsing of the page stops at the line where the alert() function is used and doesn't restart until the user closes the message box. This is quite useful for this example, because it allows us to demonstrate the results of what has been parsed so far: The page color has been set to white, and the first paragraph has been displayed.
Once you click OK, the browser carries on parsing down the page through the following lines:
When we close the message box, the browser moves on to the next lines of code in the page, displaying the third paragraph and finally ending our web page.
<p>Paragraph 3</p> </body> </html>