12.2 JavaScript and HTML

< Day Day Up >

Most client-side interactivity in Web pages involves the use of a scripting language, such as JavaScript or VBScript, to control the browser and modify its contents. In this section, we provide some simple examples of using JavaScript in combination with HTML controls to dynamically update the contents of a Web page. This is a basic technique that is common to many of the examples discussed in the rest of this chapter.

JavaScript is a scripting language that is widely used to implement interactive behavior in Web browsers. You can directly embed JavaScript code in a Web page to be executed by the browser either when the page is displayed or when the user performs some action, such as moving the mouse or pressing a button. JavaScript is supported by most modern Web browsers, including recent versions of IE and Netscape. However, the details of implementation differ slightly from one browser to another.

Example 12.1 shows a simple HTML document that contains some JavaScript code.

Example 12.1: An HTML document that contains JavaScript code.

    <html>       <head>          <title>JavaScript example</title>       </head>       <body>          <h1>JavaScript example</h1>          <script language="javascript">            document.write("This text was written by            JavaScript.")          </script>       </body>    </html>

The JavaScript code is enclosed in an HTML script tag with the attribute language set to javascript. The command document.write is a JavaScript function that writes the text specified as its argument into a Web page when that Web page is loaded into a browser. Figure 12.1 shows the result of viewing the above HTML document in IE.

click to expand
Figure 12.1: An HTML document viewed in IE that contains JavaScript.

Objects and Methods

JavaScript is an object-oriented language. It defines a set of objects that represent various aspects of a document or the browser. For example, the document object represents the entire document currently displayed in the browser. Some other important objects defined in JavaScript are window, which represents the current browser window; history, which keeps a record of the pages viewed in the browser before the current page; and navigator, which represents the specific browser application being used.

Each object has a set of methods that are functions for performing specific actions. For example, the document.write command used in Example 12.1 represents the write method associated with the document object. Each object also has a set of properties associated with it. For example, the document.fgcolor and document.bgcolor commands represent the foreground color and background color properties of the current document, respectively.

Forms and Controls

The most common way for users to interact with Web pages is through HTML forms and controls. Forms allow users to enter some input and send it to the Web server for processing. Each form is represented in HTML using a form element. A form can contain interactive items called controls for specifying input. There are many different types of controls such as buttons, checkboxes, radio buttons, menus, and text boxes. These are represented by HTML elements such as input, selection, and textarea.

JavaScript includes objects that correspond to each form or control in a Web page. You can use these objects and the methods and properties associated with them to control the behavior of the browser or change various properties of a Web page. Hence, using JavaScript programs in combination with HTML forms and controls allows you to implement many different types of interactivity.

Example 12.2 illustrates how a JavaScript function can receive input from and change the content of HTML forms. It shows an HTML document that contains three different controls; that is, two text boxes and a button, each represented by an input element. The input element has two important attributes: type, which specifies the type of control, and name, which assigns a name that a JavaScript function can use to refer to the control.

Example 12.2: An HTML document that contains controls.

    <html>       <head>       <title>JavaScript Example</title>       <script language="javascript">         function displayText() {           document.form2.text2.value =           document.form1.text1.value         }         </script>       </head>    <body>    <h1>Using controls with JavaScript</h1>    <p>Enter some text here:       <form name="form1">       <input type="text" name="text1" size=50></input>       </form>       <p><input type="button" name="button1"          value="Click" onclick="displayText()">       <p>The text you typed appears here:       <form name="form2">       <input type="text" name="text2" size=50></input>       </form>       </body>    </html>

When the above HTML document is first loaded into a browser, two blank text boxes are displayed with a button in between them. If you type some text into the first text box and then click the button, the same text is displayed in the second text box, as shown in Figure 12.2 The process by which this happens is as follows. When the user clicks the button, the onclick attribute of the input element for the button causes the JavaScript function displayText to be executed. This function sets the value attribute of the second text box to have the same value as the value attribute of the first text box. The value attribute determines the text displayed in the text box. Hence, the net effect of the function is to cause the same text to be displayed in the second text box.

click to expand
Figure 12.2: Using JavaScript with HTML forms and controls.

This section reviewed some general principles involved in using JavaScript with forms and controls to add interactive behavior in Web pages. We shall apply these principles to the special case of creating interactive mathematical content by combining the techniques discussed here with the additional MathML-specific functionality provided by MathML tools such as WebEQ, techexplorer, and webMathematica.

< Day Day Up >