Chapter 3

Working with Objects and Events

• Using JavaScript Objects
• Using Object Properties
  • Assigning Values to Properties
• Functions and Methods
• Declaring a Function
  • Calling a Function
  • Returning a Value
  • Integrating Functions with HTML
  • Dividing a Task into Functions
  • Communication Between Functions
• Understanding Methods
• Defining Objects and Methods
• Creating Instances of Objects
  • Putting It All Together
• Conditionals and Loops
  • The if...else Construct
  • Conditional Expressions
• Using the for Keyword
• Using while Loops
  • The for...in Construct
  • Infinite Loops
  • The break Statement
  • The continue Statement
• Using Multiple Parameters in Functions
• Events and Event Handlers
  • Types of Events
• Creating an Event Handler
  • How Event Handlers Interact
• Workshop Wrap-Up
  • Next Steps
  • Q&A
    

This chapter continues the discussion of JavaScript programming with some of the more advanced aspects of the language. You will learn some of the tools you can use to create complete, complex JavaScript applications-objects, functions and methods, forms, loops and conditionals, and event handlers.

Using JavaScript Objects

As mentioned in the previous chapter, JavaScript is an object-oriented language. An object is a custom data type that can combine data with functions to act upon it. The data items in an object are its properties, and the functions are its methods.

With some languages, such as C++, the term "object-oriented" sends many people running for cover. Object-oriented programming can be confusing with these languages. However, JavaScript's implementation of objects is very basic and easy to understand-in fact, you've used objects already-every array or string in JavaScript is an object.

Using Object Properties

Recall also that the bits of data stored in an object are called properties of the object. Properties can be numbers, strings, or even other objects. Each property has a name associated with it, which you must use to refer to that property.

To illustrate object properties, let's look at an object you've already used-the String object. Any variable that contains a string in JavaScript is actually a String object. This is an object built into the JavaScript language; you don't have to refer to it explicitly as an object.

The String object has a single property called length. As you might have guessed, the length property indicates the current length of the string. You can use two different types of notation to refer to an object's property. The first and most common method is to separate the object name and property name with a period. For example, the following statement sets the variable len to the length of the address string variable:

len = address.length;

The second method is the one you use to refer to array elements, which are actually properties of an array object. This uses brackets around the property name. This example sets the len variable to the length of the address string, just as the previous example does:

len = address["length"];

Because this method can be used effectively to create an array with names instead of numbers for indices, it is also referred to as an associative array. This is an array with named values, which makes it very easy to deal with things such as database entries.

You can use either the bracket or period syntax interchangeably in most cases. The exception is when you are using a variable to hold the name of a property. For example, the following statements refer in a roundabout way to a string's length property:

x = "length"; len = address[x];

In this case, you have to use brackets for the property name. If you simply used address.x, the interpreter would look for a property called x, resulting in an error.

Assigning Values to Properties

In the previous examples, you've read the properties of the object, rather than writing to them. The string object's length property is a read-only property; you cannot set it to a value. However, other objects enable you to do this.

As another example, let's create an imaginary type of object called Card, which will store business cards. The Card object has the following properties:

• name
• address
• work_phone
• home_phone

Assuming you had created a Card object called card1, you could define its properties using these statements:

card1.name = "Sherlock Holmes"; card1.address = "221B Baker Street"; card1.work_phone = "555-2345"; card1.home_phone = "555-3456";

Later in this chapter, you'll work with the Card object more, and learn how to define and create objects.

Functions and Methods

As you can see, by using objects and properties you can easily store any type of data in JavaScript. Objects aren't just groups of data, though-they can also include ways of using the data, the methods. Methods are functions dedicated to the object.

Declaring a Function

Recall that a function is a set of JavaScript statements that accept one or more parameters and return a value. Even without using objects, you can use a function in JavaScript to perform a specific task. Chapter 2 "Working with Larger Programs and Variables," defined a function to add two numbers. This was a simple function, and a useless one-the addition operator does the same thing.

Let's try a more complex (and more useful) function. One handy use for functions is to avoid repetitive use of complex HTML codes to output information. For example, consider the <TABLE> tag in HTML 3.0. This example shows the HTML code to define a table of names, ages, and birthdays for several people:

<TABLE> <TR> <TD>Fred</TD> <TD>27</TD> <TD>June 17</TD> </TR> <TR> <TD>Tom</TD> <TD>24</TD> <TD>March 13</TD> </TR> <TR> <TD>Rebecca</TD> <TD>25</TD> <TD>November 30</TD> </TR> </TABLE>

The <TABLE> tag is required to start and end the table, the <TR> tag starts and ends table rows, and the <TD> tag starts and ends each cell within the row. As you can see, this can make for some complicated HTML.

If your JavaScript program is producing this information as output, it becomes that much more difficult, because you have to print each of the tags carefully in the right order. Listing 3.1 shows a JavaScript program to print the table shown previously.

Listing 3.1. A JavaScript program to print the table.

document.write("<TABLE>\n"); document.write("<TR> <TD>Fred</TD> <TD>27</TD> <TD>June 17</TD> </TR>\n"); document.write("<TR> <TD>Tom</TD> <TD>24</TD> <TD>March 13</TD> </TR>\n"); document.write("<TR> <TD>Rebecca</TD> <TD>25</TD> <TD>November 30</TD> </ÂTR>\n"); document.write("</TABLE>");

As you can see, this isn't exactly the most readable JavaScript program. A much better method is to use a function to perform the repetitive task-in this case, printing the <TR> and <TD> tags in the right order with each row of data. Listing 3.2 shows the definition for a PrintRow() function to perform this task:

Listing 3.2. The PrintRow function, for printing a table row.

function PrintRow(name, age, birthday) { document.write("<TR> <TD>", name, "</TD> <TD>", age, "</TD> <TD>", birthday, "</TD> </TR>\n"); }

The first line of the function definition includes the function keyword, which is required to begin a function definition. The function name, PrintRow, is then given. The parameters the function will expect are in the parentheses; these are also the names of variables, local to the function, which will be defined to store the parameters passed.

The statements that comprise the function begin with the left brace. In the second line, the document.write function is used to output the parameters, with the proper HTML table tags between them. Because this is the final statement in the function, it ends with a right brace.

Calling a Function

You now have a function that can be used to print a row of the table. In order to use it, you need to call the function. A function call is simply the name of the function and the parameters to send it.

Using function calls to the PrintRow() function defined in Listing 3.2, you can easily create the table of names, ages, and birthdays without unnecessary repetition:

document.write("<TABLE>\n"); PrintRow("Fred", 27, "June 17"); PrintRow("Tom", 24, "March 13"); PrintRow("Rebecca", 25, "November 30"); document.write("</TABLE>\n");

As you can see, although it's a simple one-line function, the PrintRow() function can save quite a bit of typing-especially if the table has more than three rows. It also creates more readable, clear JavaScript code. Compare this to the first program to print the table (Listing 3.1) and you'll see the difference.

Returning a Value

The function used previously accepted parameters, but did not return a value. A function can send a value back to the calling statement with the return keyword. This can be useful for a function that calculates a result; it can also be used to indicate success or failure.

The value returned by a function can be of any type-a number, a string, or even an object. As a simple example of returning values, let's define a function that returns a string. Once again HTML is used as an example. The function in Listing 3.3 provides a quick way to add boldface on/off (<B> and </B>) HTML tags to a piece of text.

Listing 3.3. A simple function to convert text to boldface HTML.

function Bold(text) { var temp = "<B>" + text + "</B>"; return temp; }

This function accepts a string as a parameter and stores it in the text variable. It then creates another variable called temp and concatenates the required tags to text. The temp variable is then returned.

The function call is slightly different for a function that returns a value, because you need to do something with the returned value. For example, you could store it in a variable:

boldtext = Bold("This is a test.");

Because JavaScript considers a function call to be an expression, you can also use it anywhere that type of data (in this case, a string) is expected. For example, you could print it directly:

document.write(Bold("This is a test."));

In this case, the Bold() function is called to produce a result, and the resulting string is used as the parameter of the document.write() function. JavaScript always evaluates expressions like this starting at the innermost level of parentheses.

One final note: You don't actually have to use the value a function returns unless you want to. For example, you have already looked at the eval() built-in function, which executes JavaScript commands from a string. The eval() function returns the result of the commands, but if you don't need to use the result, you can ignore it by simply using a normal function call:

eval("temp = 12");

Integrating Functions with HTML

You should now understand the basics of JavaScript functions and be able to use them in your own programs. At this point, let's look at the best ways of including functions in an HTML document.

First, you should understand one thing: When you declare a function (with the function keyword) the JavaScript interpreter stores it and prepares it for use-but it is not executed. No function is executed until a function call is made for it.

An HTML document consists of two main sections: the header section, contained within the <HEAD> tags, and the body section, contained within <BODY> tags. You can include JavaScript commands and functions in either section.

By convention, the proper place to define a function is in the <HEAD> section. The main reason for this is that browsers do not attempt to display any of the information in this section, so it makes it easy to keep your Web page compatible with older browsers.

Another reason to include function definitions in the header is that it is the first part of the HTML document loaded by the browser. This will ensure that when you make the function call, the function is loaded and ready to execute. You cannot call a function that hasn't been defined yet.

The function call, on the other hand, should be included in the <BODY> of the HTML document so that it can display its results. As an example, Listing 3.4 shows an HTML document that includes the PrintRow function, defined in Listing 3.2, and uses calls to the function in the body to display a table.

Listing 3.4. (TABLE.asp) An HTML document that uses JavaScript to print a table.

<HTML> <HEAD> <TITLE>JavaScript table test</TITLE> <SCRIPT language="JAVASCRIPT"> function PrintRow(name, age, birthday) { document.write("<TR> <TD>", name, "</TD> <TD>", age, "</TD> <TD>", birthday, "</TD> </TR>\n"); } </SCRIPT> </HEAD> <BODY> <H1>Table Test Using JavaScript</H1> <TABLE> <SCRIPT language="JAVASCRIPT"> PrintRow("Fred", 27, "June 17"); PrintRow("Tom", 24, "March 13"); PrintRow("Rebecca", 25, "November 30"); </SCRIPT> </TABLE> End of table. </HTML>

As you can see, the PrintRow function is defined in the <HEAD> section of the document and called where it is needed, in the <TABLE> tags in the document's body. You can see the output of this document, as displayed by Netscape, in Figure 3.1.

Figure 3.1 : Netscape displays the output of the JavaScript table example.

Dividing a Task into Functions

At this point, you should understand the purpose of functions. As you move into more complicated JavaScript programming, you will find there are very few tasks you can do without using at least one function, and splitting a task into functions makes it easy to understand.

When you are writing JavaScript, you may not know exactly what should be a function and what shouldn't. Here are some tips for determining whether you should use a function:

• If you find yourself typing the same (or nearly the same) set of commands repeatedly.
• If you expect to use the same commands again for a different purpose, define a function. It will make your job easier when you need to do it again.
• Even if you won't use a section of code again, you might want to consider using functions to separate the individual tasks within the program.
• If you need to complete a set of statements in a single line-such as in an event handler, described later in this chapter-you'll need to use a function.

In general, any time you end up with more than five to six lines of code, you may want to split parts of it into functions. This makes the main body of code easier to read. As a matter of fact, many programmers use functions almost exclusively, making the main program itself small and very easy to understand.

Communication Between Functions

As you create a large JavaScript program with several functions, you may wonder how the functions will work together. There are two ways to keep track of data between functions.

The first method of passing data to and from a function is the one you've already used-function parameters. You can pass a set of parameters to the function, and the function can return a value.

Although this parameter-passing mechanism works well in most cases, you will run into some situations where it just isn't practical. One reason for this is that functions can return only one value. In cases like this, the answer is to use a variable.

As you learned in Chapter 2 variables you declare in a function with the var keyword are local to that function; they can't be accessed from any other function. In order to keep data between functions, you need to use a global variable.

Defining a global variable is easy: just place the variable definition outside any functions. Once you've defined it, you can then use it in all functions in your program. You can also use global variables in statements outside of functions and in event handlers.

This technique is particularly useful for quantities that concern the whole program. For example, in a game program you might use a global variable for the score. This would enable you to add to the score from any function, without having to pass it back and forth.

Understanding Methods

Now that you understand functions, let's look at how they work with objects. You use a function to define an object, and you can also define methods, or built-in ways of working with the objects.

Methods are simply functions that have been linked to an object and work on the properties of that object. As an example, the built-in string object includes some methods to work with strings. One of them, toLowerCase(), converts the string to all lowercase.

To call a method, you use a period to divide the string name and the method name, as with properties. However, because a method is a function, you must include parentheses for the parameters. In the case of the toLowerCase() method, there are no parameters. The following JavaScript code demonstrates the use of this method:

var text = "THIS IS UPPERCASE"; var ltext = text.toLowerCase();

In this example, the ltext variable is used to hold the lowercase version of the text string. The toLowerCase() method does not modify the string itself; instead, it returns a lowercase version.

Defining Objects and Methods

To further illustrate methods and objects, let's return to the business card example. As you may recall, the Card object you worked with earlier has the following properties:

• name
• address
• work_phone
• home_phone

To define and use this object in a JavaScript program, you need to create a function to create new Card objects. This function is referred to as the object definition for an object, or the constructor. Here is an object definition for the Card object:

function Card(name,address,work,home) { this.name = name; this.address = address; this.work_phone = work; this.home_phone = home; }

The object definition is a simple function that accepts parameters to initialize a new object and assigns those to the corresponding properties. One thing you haven't seen before is the this keyword; this is required for object definitions and refers to the current object-the one that is being created by the function.

Next, let's create a method to work with the Card object. Because all Card objects will have the same properties, it might be handy to have a function that prints the properties out in a neat format. Let's call this function PrintCard().

Because your PrintCard() function will be used as a method for Card objects, you don't need to ask for parameters. Instead, you can use the this keyword again to refer to the current object's properties. Here is a function definition for the PrintCard() function:

function PrintCard() { document.write("Name: ", this.name, "\n"); document.write("Address: ", this.address, "\n"); document.write("Work Phone: ", this.work_phone, "\n"); document.write("Home Phone: ", this.home_phone, "\n"); }

This function simply reads the properties from the current object (this), prints each one with a caption, and skips to a new line. The last thing you need to do is make PrintCard() part of the function definition for Card objects. Here is the modified function definition:

function Card(name,address,work,home) { this.name = name; this.address = address; this.work_phone = work; this.home_phone = home; this.PrintCard = PrintCard;

}

The added statement looks just like another property definition, but it refers to the PrintCard() function. This will work so long as the PrintCard() function is defined with its own function definition.

Creating Instances of Objects

Now let's try using the object definition and method. In order to use an object definition, you create a new object. This is done with the new keyword. The following statement creates a new Card object called tom:

tom = new Card("Tom Jones", "123 Elm Street", "555-1234", "555-9876");

As you can see, creating an object is easy. All you do is call the Card() function (the object definition) and give it the required attributes, in the same order as the definition.

Once this statement executes, a new object is created to hold Tom's information. This is called an instance of the Card object; just as there can be several string variables in a program, there can be several instances of an object you define.

Now that you've created an instance of the card object, you can use the PrintCard() method to print it out:

tom.PrintCard();

Putting It All Together

Now you've created a new object to store business cards and a method to print them out. As a final demonstration of objects, properties, functions, and methods, let's use this object in a Web page to print data for several cards.

The HTML document will need to include the function definition for PrintCard() along with the function definition for the Card object. You will then create three cards and print them out in the body of the document. Listing 3.5 shows the complete HTML document.

Listing 3.5. (ADDRESS.asp) An HTML document that uses the Card object.

<HTML> <HEAD> <TITLE>JavaScript Business Cards</TITLE> <SCRIPT LANGUAGE="JavaScript"> function PrintCard() { document.write("<B>Name:</B> ", this.name, "<BR>"); document.write("<B>Address:</B> ", this.address, "<BR>"); document.write("<B>Work Phone:</B> ", this.work_phone, "<BR>"); document.write("<B>Home Phone:</B> ", this.home_phone, "<HR>"); } function Card(name,address,work,home) { this.name = name; this.address = address; this.work_phone = work; this.home_phone = home; this.PrintCard = PrintCard; } </SCRIPT> </HEAD> <BODY> <H1>JavaScript Business Card Test</H1> Script begins here.<HR> <SCRIPT LANGUAGE="JavaScript"> // Create the objects sue = new Card("Sue Suthers", "123 Elm Street", "555-1234", "555-9876"); phred = new Card("Phred Madsen", "233 Oak Lane", "555-2222", "555-4444"); henry = new Card("Henry Tillman", "233 Walnut Circle", "555-1299", "555-1344"); // And print them sue.PrintCard(); phred.PrintCard(); henry.PrintCard(); </SCRIPT> End of script. </BODY> </HTML>

Notice that I have modified the PrintCard() function slightly to make things look good with HTML line breaks, boldface, and horizontal rules. The Netscape output of this document is shown in Figure 3.2.

Figure 3.2 : Netscape displays the output of the business card example.

Conditionals and Loops

Next, let's look at two types of statements you'll need in just about any large program: conditionals, which enable you to test data, and loops, which execute a block of code multiple times.

The if...else Construct

The if statement is the main conditional statement in JavaScript. You can use it to check for certain values and act accordingly. You will find that just about every large program uses conditionals, whether to act on data the user enters or to check for errors. Here is an example of a basic if statement:

if (a == 1) document.write("Found a 1!");

This statement checks the variable a, and if it has a value of 1, prints a message. Otherwise, it does nothing. You can also use multiple statements by enclosing them in braces:

if (a == 1) { document.write("Found a 1!"); a = 0; }

This block of statements checks the variable a once again. If it finds a value of 1, it prints a message and sets a back to zero.

The if statement has an optional else keyword, which can specify a block of statements to execute if the condition is not true. You could modify Listing 3.5 to print an alternative message if the value of a is not 1:

if (a == 1) { document.write("Found a 1!"); a = 0; } else { document.write("Incorrect value: " + a); a = 0; }

As you can see, you can follow the block of statements after the if keyword with an else keyword and a second block of statements. Only one of the blocks will be executed, depending on the condition.

You can use any of the conditional expressions and operators introduced in Chapter 2as the conditional in the if statement. You can also use a nonconditional expression, such as a variable assignment; the condition will be true if the assignment is successful.

Conditional Expressions

In addition to the if statement, JavaScript provides a shorthand type of conditional expression that you can use to make quick decisions. This uses a peculiar syntax, which is also found in other languages, such as C. Here is an example of a conditional expression:

value = (a == 1) ? 1: 0;

This statement may look confusing, but it is equivalent to this if statement:

if (a == 1) value = 1; else value = 0;

In other words, the value after the question mark (?) will be used if the condition is true, and the value after the colon (:) will be used if the condition is false. The colon represents the else portion of the statement, and like the else portion of the if statement, is optional.

These shorthand expressions can be used anywhere JavaScript is expecting a value. They provide an easy way to make simple decisions about values. As an example, here's an easy way to display a grammatically correct message about the counter variable:

document.write("Found ", counter, (counter == 1) ? " word.": " words.");

This will print the message "Found 1 word" if the counter has a value of 1, and "Found 2 words" with a value of 2 or greater. This is one of the most common uses for a conditional expression.

Using the for Keyword