Section 1.3. Client-Side JavaScript | JavaScript: The Definitive Guide

1.3. Client-Side JavaScript

When a JavaScript interpreter is embedded in a web browser, the result is client-side JavaScript. This is by far the most common variant of JavaScript; when most people refer to JavaScript, they usually mean client-side JavaScript. This book documents client-side JavaScript, along with the core JavaScript language that client-side JavaScript incorporates.

Client-side JavaScript combines the scripting ability of a JavaScript interpreter with the Document Object Model (DOM) defined by a web browser. Documents may contain JavaScript scripts, and those scripts can use the DOM to modify the document or control the web browser that displays the document. Put another way, we can say that client-side JavaScript adds behavior to otherwise static web content. Client-side JavaScript is at the heart of web development techniques such as DHTML (see Chapter 16) and architectures such as Ajax (see Chapter 20). The introduction to Chapter 13 includes an overview of the many capabilities of client-side JavaScript.

Just as the ECMA-262 specification defines a standard version of the core JavaScript language, the World Wide Web Consortium (W3C) has published a DOM specification that standardizes the features a browser must support in its DOM. (You'll learn much more about this standard in Chapters 15, 16, and 17.) The core portions of the W3C DOM standard are well supported in all major web browsers. One notable exception is Microsoft Internet Explorer, which does not support the W3C standard for event handling.

1.3.1. Client-Side JavaScript Examples

When a web browser is augmented with a JavaScript interpreter, it allows executable content to be distributed over the Internet in the form of JavaScript scripts. Example 1-1 shows what this looks like: it is a simple JavaScript program, or script, embedded in an HTML file.

Example 1-1. A simple JavaScript program

 <html> <head><title>Factorials</title></head> <body> <h2>Table of Factorials</h2> <script> var fact = 1; for(i = 1; i < 10; i++) {     fact = fact*i;     document.write(i + "! = " + fact + "<br>"); } </script> </body> </html>

When loaded into a JavaScript-enabled browser, this script produces the output shown in Figure 1-1.

Figure 1-1. A web page generated with JavaScript

As you can see in this example, the <script> and </script> tags are used to embed JavaScript code in an HTML file. I'll describe the <script> tag further in Chapter 13. The main feature of JavaScript demonstrated by this example is the use of the document.write() method.^[*] This method is used to dynamically output HTML text into an HTML document while it is being loaded into the browser.

^[*] "Method" is the OO term for function or procedure; you'll see it used throughout this book.

JavaScript can control not only the content of HTML documents but also the behavior of those documents. That is, a JavaScript program might respond in some way when you enter a value in an input field or hover the mouse over an image in a document. JavaScript does this by defining event handlers for the documentpieces of JavaScript code that are executed when a particular event occurs, such as when the user clicks on a button. Example 1-2 shows a simple HTML fragment that includes an event handler executed in response to a button click.

Example 1-2. An HTML button with a JavaScript event handler defined

 <button onclick="alert('You clicked the button');"> Click here </button>

Figure 1-2 illustrates the result of clicking the button.

Figure 1-2. The JavaScript response to an event

The onclick attribute shown in Example 1-2 holds a string of JavaScript code that's executed when the user clicks the button. In this case, the onclick event handler calls the alert() function. As you can see in Figure 1-2, alert() pops up a dialog box to display the specified message.

Example 1-1 and 1-2 highlight only the simplest features of client-side JavaScript. The real power of JavaScript on the client side is that scripts have access to the content of HTML documents. Example 1-3 contains a complete, nontrivial JavaScript program. The program computes the monthly payment on a home mortgage or other loan, given the amount of the loan, the interest rate, and the repayment period. It reads user input from HTML form fields, performs computations on that input, and then alters the document to display the results of the computation.

Figure 1-3 shows what the program looks like when displayed in a web browser. As you can see, it consists of an HTML form and some other text. But the figure captures only a static snapshot of the program. The addition of JavaScript code makes it dynamic: whenever the user changes the amount of the loan, the interest rate, or the number of payments, the JavaScript code recomputes the monthly payment, the total of all payments, and the total interest paid over the lifetime of the loan.

Figure 1-3. A JavaScript loan payment calculator

The first half of Example 1-3 is a simple CSS stylesheet and an HTML form, formatted within an HTML table. Note that the form elements define onchange or onclick event handlers. The web browser triggers these event handlers when the user changes the input or clicks on the Compute button displayed in the form, respectively. In each case, the value of the event handler attribute is a string of JavaScript code: calculate(). When the event handler is triggered, it executes this code, which calls the function calculate().

The calculate() function is defined in the second half of the example, inside a <script> tag. The function reads the user's input from the form, does the math required to compute the loan payments, and inserts the results of these calculations into the document within <span> tags that are specially named with id attributes.

Example 1-3 is not a short example, but it is straightforward, and it is worth taking the time to look at it carefully. You shouldn't expect to understand all the code at this point, but the HTML, CSS, and JavaScript are all commented, and studying this example will give you the feel for client-side JavaScript.^[*]

^[*] If your intuition tells you that it is a bad idea to intermingle HTML markup, CSS styles, and JavaScript code like this, you are not alone. The trend in JavaScript programming and web design circles is to keep content, presentation, and behavior in separate files. Section 13.1.5 in Chapter 13 explains how to do this.

Example 1-3. Computing loan payments with JavaScript

 <html> <head> <title>JavaScript Loan Calculator</title> <style> /* This is a CSS style sheet: it adds style to the program output */ .result { font-weight: bold; }  /* For elements with  */ #payment { text-decoration: underline; } /* For element with  */ </style> </head> <body> <!--   This is an HTML form that allows the user to enter data and allows   JavaScript to display the results it computes back to the user. The   form elements are embedded in a table to improve their appearance.   The form itself is given the name "loandata", and the fields within   the form are given names such as "interest" and "years". These   field names are used in the JavaScript code that follows the form.   Note that some of the form elements define "onchange" or "onclick"   event handlers. These specify strings of JavaScript code to be   executed when the user enters data or clicks on a button. --> <form name="loandata">   <table>     <tr><td><b>Enter Loan Information:</b></td></tr>     <tr>       <td>1) Amount of the loan (any currency):</td>       <td><input type="text" name="principal" onchange="calculate();"></td>     </tr>     <tr>       <td>2) Annual percentage rate of interest:</td>       <td><input type="text" name="interest" onchange="calculate();"></td>     </tr>     <tr>       <td>3) Repayment period in years:</td>       <td><input type="text" name="years" onchange="calculate();"></td>     </tr>     <tr><td></td>       <td><input type="button" value="Compute" onclick="calculate();"></td>     </tr>     <tr><td><b>Payment Information:</b></td></tr>     <tr>       <td>4) Your monthly payment:</td>       <td>$<span  ></span></td>     </tr>     <tr>       <td>5) Your total payment:</td>       <td>$<span  ></span></td>     </tr>     <tr>       <td>6) Your total interest payments:</td>       <td>$<span  ></span></td>     </tr>   </table> </form> <script language="JavaScript"> /*  * This is the JavaScript function that makes the example work. Note that  * this script defines the calculate() function called by the event  * handlers in the form. The function reads values from the form  * <input> fields using the names defined in the previous HTML code.  It outputs  * its results into the named <span> elements.  */ function calculate() {     // Get the user's input from the form. Assume it is all valid.     // Convert interest from a percentage to a decimal, and convert from     // an annual rate to a monthly rate. Convert payment period in years     // to the number of monthly payments.     var principal = document.loandata.principal.value;     var interest = document.loandata.interest.value / 100 / 12;     var payments = document.loandata.years.value * 12;     // Now compute the monthly payment figure, using esoteric math.     var x = Math.pow(1 + interest, payments);     var monthly = (principal*x*interest)/(x-1);     // Get named <span> elements from the form.     var payment = document.getElementById("payment");     var total = document.getElementById("total");     var totalinterest = document.getElementById("totalinterest");     // Check that the result is a finite number. If so, display the     // results by setting the HTML content of each <span> element.     if (isFinite(monthly)) {         payment.innerHTML = monthly.toFixed(2);         total.innerHTML = (monthly * payments).toFixed(2);         totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);     }     // Otherwise, the user's input was probably invalid, so display nothing.     else {         payment.innerHTML = "";         total.innerHTML = ""         totalinterest.innerHTML = "";     } } </script> </body> </html>