Chapter 2: How to code a JavaScript application

This chapter presents a subset of JavaScript and DOM scripting that will soon have you writing significant applications. If you don't have any programming experience, this chapter also makes a great aptitude test. If you read it and can do the exercises at the end of the chapter, you're ready for the rest of this book.

How to get and display data with a Textbox object

The Textbox object is one of the DOM objects. It represents a text box in the web page that can be used to get input from the user or display output to the user. In figure 2-13, the first set of examples shows the XHTML for two text boxes that have "rate" and "salesTax" as the ids. As you can see, the disabled attribute for the salesTax text box is turned on. That prevents the user from typing in the text box.

The next examples show how to use the value property of a Textbox object to get the value from a text box and store it in a variable. First, the examples show how to do that in two statements. Then, the examples show how to do that in a single statement.

When you use two statements, the first statement uses the getElementById method of the document object to get a Textbox object. Here, this object is assigned to a variable named rateTextbox. Then, the second statement uses the value property of the Textbox object to get the value that has been entered into the text box. In this case, the second statement also uses the parseFloat method to convert the string that's returned by the value property to a decimal value. This decimal value is then stored in a variable named rate.

Unless you're going to use the Textbox object again, though, you don't need to use two statements to do this. Instead, you can use object chaining as shown by the one-statement example. Here, the statement uses the getElementById method to get the Textbox object, the value property to get the value of that object, and the ParseFloat method to convert the string that's returned to a decimal value.

The next example shows how you can change the disabled attribute of a text box from your JavaScript code. To do that, you set the disabled property to true or false. In this example, object chaining is used to access the disabled property of the XHTML element with "salesTax" as its id, and the value false is assigned to that property.

The next examples show how to assign values to text boxes so they are displayed by the browser. Here, the first statement assigns an empty string to a text box so it won't display anything. The second statement assigns the value of a variable named salesTax.

The last example in this figure shows how to use the focus method of a Textbox object. This method moves the cursor into the text box so the user can start typing in that text box. When an application is loaded, the cursor is commonly moved into the first input box on the page as a convenience for the user.

Common properties of the Textbox object

Property	Type	Description
value	String	The contents of the text box.
disabled	Boolean	Controls whether the text box is disabled.

Two XHTML <input> tags that create text boxes

<input type="text" id="rate" />
<input type="text" id="salesTax" disabled="disabled" />

How to use the value property to get the value in a text box

In two statements
// Store a reference to the text box
var rateTextbox = document.getElementById("rate");
// Get the value and convert it to a number
var rate = parseFloat( rateTextbox.value );

In one statement with object chaining
var rate = parseFloat(document.getElementById("rate").value);

How to use the disabled property to enable a text box

document.getElementById("salesTax").disabled = false;

How to use the value property to display a value in a text box

// Assign an empty string to a text box
document.getElementById("salesTax").value = "";
// Assign the value of a variable named salesTax to a text box
document.getElementById("salesTax").value = salesTax.toFixed(2);

One method of the Textbox object

Method	Returns	Description
focus()	Nothing	Moves the cursor into the text box.

How to use the focus method to move the cursor to a text box

document.getElementById("investment").focus();

Description

• When you use a text box to get numeric data that you're going to use in calculations, you need to use either the parseInt or parseFloat method to convert the string data to numeric data.
• To place the cursor in a text box, you use the focus method of the Textbox object.

Figure 2-13 How to get and display data with a Textbox object