[Page 531 (continued)]16.2. JavaScript Inside of Web Pages JavaScript sits inside of HTML pagesthere is no Program Area, nor separate JavaScript files.[1] You use the tags <script>...</script> to embed the JavaScript into the HTML. <script> tags can go in two places in the HTML document. Inside of the heading (<head>...</head>), <script> tags usually are used to define functions that will be used elsewhere. In the body of the HTML document, <script> tags are used to actually execute JavaScript. [1] It is possible to have JavaScript in separate files, but we're not going to go into how to do that.
Figure 16.1 shows our simple Web page from the HTML chapter (Chapter 13), with an embedded JavaScript function. The function is defined in <script> tags in the heading, and then is called down in the body (Figure 16.2). All that this function does is insert the words "This is a test" into the document, at the same place where the function call (test()) appears in the document, just below the picture.
[Page 532] Figure 16.1. Simple JavaScript function. (This item is displayed on page 531 in the print version) 
Figure 16.2. Showing the parts of the simple JavaScript function. 
JavaScript functions don't have to just insert plain text. They can also insert HTML (Figure 16.3). The HTML, like the text, will be inserted where the JavaScript function is called. The interesting thing about this is that it means that the JavaScript function is called before the HTML is formatted. Thus, it's possible to insert headings and other formatting commands into the document. Figure 16.3. Using JavaScript to insert HTML. 
Of course, it's not too useful to simply insert text into the document that we could have simply typed ourselves. JavaScript, with extensions, can actually do database searches and insert the results into the Web pagethat means that you can have Web pages that automatically get updated from a database when the page is served to the user (client). We can show a little bit of that flexibility here. Imagine that you had something you wanted to put into a Web page that's computable, like a list from 1 to 10. Sure you could type it all in, but it's a little tedious. We could ask JavaScript to compute it for us (Figure 16.4).
[Page 533] Figure 16.4. Using JavaScript to compute a loop. 
Let's take apart that function in a little detail (Figure 16.5). The function countToTen() starts out by writing the unordered list opening <ul>, then each of the list items <li>, and then finally the list closing tag </ul>. Figure 16.5. Computing a list that counts to ten. 
As we started to explain earlier, for loops in JavaScript are the same as Java's for loops. for (i=1; i<= 10; i++) { document.write("<li>Item number: " + i + "</li>"); }
[Page 534]for loops have three parts, separated by semicolons. The first part is what to do when the loop first starts. Here, it's set the variable i to 1. Next comes how to decide when to stop. Here it's when i becomes greater than 10. Finally, there's what to do each time through the loop. Here it's increment i by one, using a special notation i++ (which means i = i + 1). This notation was invented for the programming language C, and has been adopted by many languages since then. Most of the operators in JavaScript are the same ones you know from Java: +, -, *, /, <, >, <=, <=, ==, <>, !=, and even ! for logical not. (Like Java, + works in JavaScript to merge two strings together, as well as addition.) You might be wondering at this point, "Okay, but can we insert anything useful with JavaScript?" Sureanything that you can compute. There are lots of built-in methods that give you all kinds of useful information. You don't even have to write a functionyou can just list a script line in the middle of your HTML. In Figure 16.6 you can see a Web page that tells you the time when the page script was being executed. Figure 16.6. Inserting the date and time into a Web page. 
| 