CHAPTER 1

An Inside Look at JavaScript

Anyone who has built a web page has quickly realized the limitations of Hypertext Markup Language (HTML). It doesn't offer the control that you need to create sophisticated web pages, and you can't use it to create interactive web pages. Using the JavaScript scripting language, however, you can build interactive web pages and features that are found on many professional web sites.

You probably already know how to put together a web page using HTML. Java-Script is still new to you—otherwise you wouldn't be reading this book. In this book, you'll learn JavaScript from the ground up to gain the skills you need to build classy interactive web pages. If you're anxious to get started writing your first JavaScript, hold on; you'll do this a little later in the chapter. Before jumping in over your head, let's take a moment and explore the basic concepts of JavaScript.

Answers to Common Questions About JavaScript

Many developers who are new to JavaScript are puzzled by the name because of confusing information they've read about scripting languages, programming languages, JavaScript, Java, VBScript, and JScript. Let's answer three of the most frequently asked questions about JavaScript before getting down to the nuts and bolts of using it.

Is JavaScript a scripting language or a programming language?

This is the first question many web developers ask when learning JavaScript. Fact is, JavaScript is both a scripting and a programming language, since a scripting language and a programming language fundamentally do the same things—that is, they enable developers to instruct a browser to perform some action, such as validating information a user enters into a form. However, they differ in one important aspect: a scripting language usually doesn't care about data types, while a programming language does care about data types. A data type is a definition of the type of data values that can be used in a program and the type of operations that can be performed on those values, and it specifies the size and kind of information that can be placed into a specific location in computer memory.

Is JavaScript the same as Java?

Typically the second question asked by web developers, the simple answer is no. Originally, Netscape developed a scripting language called LiveScript to enhance the abilities of Netscape Navigator. The buzz in the industry was that Sun Microsystems' new programming language, Java, was going to revolutionize the computer industry, because, among other things, Java could be used to create small programs called applets that could run inside Java-enabled web browsers. Netscape soon released a version of Navigator called Navigator 2 that was Java-enabled. Live-Script was renamed JavaScript, with hopes that developers would adopt JavaScript along with Java.

Java is a full-featured programming language (like C++) that is used to build client-side and server-side applications. A client-side application is a program that you interact with directly on your computer—for example, Microsoft Internet Explorer. A server-side application is a program that your client-side application interacts with, typically on a distant computer or server—for example, a Java applet or Perl script.

For example, your browser is a client-side application that you use to request web pages from the web server. The web server is a server-side application that talks to your browser.

A Java application can run on different kinds of computers without having to be modified. This is called cross-platform compatibility. Simply said, a Java program that runs on Windows will also run on a Mac and Sun computers without your having to modify the program.

You might be familiar with a Java applet if you've built web pages. A Java applet is a Java program that resides on a web server and is run by using the or

In contrast to Java, JavaScript is a limited-featured programming language. (See the next section, JavaScript: A Limited-Featured Programming Language.) Java Script programs called scripts are included in a web page within the

Is JavaScript the same as VBScript and JScript?

The simple answer is no. VBScript and JScript were developed by Microsoft to create interactive web pages. JavaScript is a Netscape creation.

JavaScript: A Limited-Featured Programming Language

You can do many things using JavaScript that you can't do by simply using HTML.

Here are a few of them:

• Build dynamic web pages

• Display alert boxes

• Write messages to the browser status bar

• Control features of the browser

• Open new browser windows

• Customize reactions to mouse actions and keystrokes

• Validate information in forms

• Perform calculations

• Display messages when the cursor rolls over an object on the screen

• Create interactive forms

• Set date and time

• Identify browsers and browser plug-ins such as Flash

Although JavaScript is more powerful than HTML, JavaScript can't do everything. Here are some common things that JavaScript can't do:

• Write files to your hard disk

• Read files from your hard disk—except for cookies

• Close windows other than those the JavaScript application opened

• Write server-side applications, called Common Gateway Interface (CGI) applications, which must be written using languages such as Java, ASP, Perl, and PHP.

• Read information from a web page that resides on a domain different from the domain where the JavaScript resides

Getting Down to JavaScript

Now that the preliminaries are out of the way, let's get started learning the nuts and bolts of JavaScript, beginning with an introduction to JavaScript objects. You might have heard the term object-oriented programming language and wondered what this means in plain English. An object-oriented programming language is a programming language that is used to build programs using objects.

An object, of course, is a thing, such as a document, a computer, a pencil, or a car. Nearly everything around us is an object. JavaScript is an object-oriented programming language that is used to build programs using objects. In programming, the objects most commonly used by JavaScript are documents, forms, fields, radio buttons, and other elements that you find on a form or user interface. A window is also an object used by a JavaScript program. You'll become very familiar with objects as you begin writing JavaScript programs. Let's explore objects in greater detail.

Object Name

A typical web page contains many objects, some of which are the same kind of object. For example, a web page might contain two forms. But even though the forms are the same kind of object, they can be uniquely different based on the fields, buttons, and other interface elements that appear in the forms.

Each object must be uniquely identified by a name or ID that you assign to the object to reference it from your JavaScript. Forms, for example, could be named form1 and form2. Alternatively, you could assign forms names that identify the purpose of each form, such as OrderEntryForm and OrderDisplayForm, which more clearly identify each form in your JavaScript.

Sometimes your JavaScript needs to access many objects quickly, such as when displaying multiple pictures in a slideshow. In this case, you use an array to name each object. You'll learn about arrays in the next chapter. For now, think of an array as a list of objects. The first object on the list is called object 0, the next is object 1, and so on. You access each object by using its number. You'll see how this is done in Chapter 4.

Let's move on to the next part of an object, which is an object's property.

Property

A property is a value that is associated with an object. Objects can have many values, depending on the type of object used. For example, a form object has a title, a width, and a height—to mention a few properties. A window has a background color, a width, and height. These are all properties of an object. Each kind of object has its own set of properties. You'll learn about these properties throughout this book as you are introduced to each object.

Methods

A method is a process performed by an object when it receives a message. Some JavaScript developers like to think of a method as a verb, because it is basically an action. (On the other hand, an object is like a noun.) For example, a Submit button on a form is an object. Its Submit label and the dimensions of the button are properties of the button object. If you click the Submit button, the form is submitted to the server-side application. In other words, clicking the Submit button causes the button to process a method.

The kinds of methods that are used differ, depending on the type of object to which they're attached. You'll learn more about methods when you learn how to use JavaScript objects in your JavaScript application.

The Dot Syntax

You can think of an object as being associated with certain kinds of information (properties) and certain kinds of behaviors (methods). For example, a document is an object that has a certain background color (property) and that can be written to (method).

You access an object's properties and methods by using the dot syntax along with the object name and its property or method. So, for example, here's how you would identify the background color of a document and the write method for a document:

document.bgColor

document.write()

This is pretty straightforward to understand once you understand how the dot syntax works. Each line has two parts: The first part is the name of the object, which is document. The second part is either a property (bgColor) or method (write) of the object. A dot separates the name of the object from the property or method. In this example, the first line says, I want to access the background color of the document object. The second line says, I want to write something to the document object. Write what, you might be asking?

In this example, nothing is being written to the document. To tell JavaScript what information to write to the document, you would type in the information between the parentheses of the write() method. Later in this chapter, you'll use the write() method to write Hello, world! text in your first JavaScript.

The Main Event

Another basic concept that you need to understand is event handling. An event causes your JavaScript to start executing the code—such as when you click the mouse button on a form that your JavaScript displays on the screen. Your JavaScript is told of every event that occurs while your JavaScript is running. Some events are particularly important to your JavaScript, such as when someone clicks a Submit or Cancel button on a form. Other events may not be so important, such as when the mouse is moved onto an area of the form that contains no information. The nature of your application determines whether or not an event is important.

Your job is to make sure that your JavaScript reacts to important events. This is referred to as event handling. You do this by creating an event handler, which is a part of your JavaScript that reacts to important events. For example, the event handler for a Submit button click event will likely contain JavaScript instructions that process information the user entered on the form, and the process instructions will make sure that the user entered all the required information on the form.

That's all you need to know about events and event handling for now. Later on you'll learn everything you need to know to have your JavaScript react to important events.

Writing Your First JavaScript

It is time to write your first JavaScript. In keeping with a long programming tradition, the objective of your first script is to write Hello, world! to a document object. Granted this JavaScript isn't the most exciting to write, but the more exciting JavaScripts are yet to come. For now, it is important that you learn how to write a basic JavaScript.

A JavaScript consists of JavaScript statements that are placed within the

You place the header scripts and scripts placed within the tag body scripts. You'll learn more about the differences between header and body scripts later in this book.

Now for the moment that you've been waiting for. You'll create the web page shown in Figure 1-1.

      -//W3C//DTD XHTML 1.0 Transitional//EN>

http://www.w3.org/1999/xhtml>

   

      

   

   

      Javascript type=text/javascript>

         document.write('Hello, world!')

      

   

No doubt most of this code looks familiar, since you've probably written something similar to it many times before. The first two lines are standard in every web page. Next is the tag that contains the title of the web page. This is followed by the tag.

Figure 1-1 Your first JavaScript displays Hello, world! in a web page.

Within the tag is the ) tag. The

The

Everything between the opening tags is the script and must be written using JavaScript. This example is a one-line script. First, the line is a JavaScript statement. A statement is like a sentence that tells the browser to do something. Next, you notice the dot syntax. This is a clue telling you that the JavaScript statement contains an object, which in this case is named document.

You also notice something on the right side of the dot. Knowing that the left side of the dot is the name of an object, you probably figure that the right side of the dot must be either a property or method of the object. In this example, it's a method. The clue that gives this away are the parentheses—and you read about the write() method previously in this chapter.

The name of the method is write(), which describes what the method does—it writes something to the document. The text 'Hello, world!' appears between the parentheses. This is the information that is written to the document. You must enclose the information within quotation marks; otherwise, the browser will think you are referring to a JavaScript instruction. JavaScript can use single or double quotations.

Save this web page to your hard disk, and then open it in your browser. You've now successfully written your first JavaScript program. If you don't see this message displayed on the web page, one or two things are likely to be the problem: First, make sure that the entire HTML and JavaScript code is written exactly the way that you see it in the preceding listing. Sometimes a typographical error slips into the code and confuses the browser. Second, make sure that the JavaScript option on your browser isn't turned off. If it is, turn it on and reload the web page. Usually, JavaScript is enabled as the default for Microsoft Internet Explorer and Netscape Navigator. You can determine whether JavaScript is enabled and how to enable it if it is disabled.

For Microsoft Internet Explorer, follow these steps:

1. Choose Tools | Internet Options.

2. Select the Security tab.

3. Click the Custom Level button.

4. In the Security Settings dialog box, scroll down to the Scripting area and find Active Scripting.

5. Select Enable.

6. Click the OK button, and then click OK again.

For Netscape, follow these steps:

1. Choose Edit | Preferences.

2. Double-click Advanced Category.

3. Select Scripts & Plug-ins.

4. Select Enable JavaScript options.

5. Click OK.

NOTE If you are using a different version of Netscape Navigator, keep in mind the steps you take may differ somewhat.

Old Timers Don't Like JavaScript

Most browsers today have no problem running a JavaScript, assuming that the JavaScript option is turned on. However, you never know if someone some place on the Internet hasn't upgraded to a new browser or still uses a very old browser.

Microsoft Internet Explorer 3 and earlier versions, Netscape 1.x, and America Online versions 3 and earlier can't run JavaScript because they don't know how to interpret JavaScript code. Instead, these browsers display the JavaScript instead of running it. This means that your JavaScript is displayed for all to see.

You can hide your JavaScript from these old timers by placing your script in an HTML comment section of a web page. You'll recall from when you learned HTML that a browser treats anything between as a comment. Browsers that are JavaScript-enabled recognize and run a JavaScript that is contained within an HTML comment. Older browsers simply ignore the JavaScript, thinking that the script is a comment.

The following listing illustrates how to hide your JavaScript from older browsers. Notice that the HTML comment is placed inside the tags and around the JavaScript code. Some rookie JavaScript developers place the HTML comment outside the

   -//W3C//DTD XHTML 1.0 Transitional//EN>

http://www.w3.org/1999/xhtml>

   

   

      Javascript type=text/javascript>

         

            document.write('Hello, world!')

         -->

      

   

Spicing Up Your JavaScript

Admittedly, your first JavaScript looks a little drab because the text lacks the pizzazz that you expect to see when you display text using a JavaScript. You'll learn techniques the pros use to display text in later chapters. For now, let's add a little polish to your simple Hello, world! JavaScript by displaying the text in an alert dialog box.

An alert dialog box pops on the screen to display a message and stays on the screen until someone clicks the OK button that appears in the dialog box. (You may have seen an alert dialog box displayed if you tried to print something but you forgot to turn on the printer. The alert dialog box gave you a polite reminder.)

You display an alert dialog box by calling the alert function and passing it the text that you want to be displayed. You'll learn about functions in Chapter 5. You insert the following statement in your JavaScript whenever you want to display the alert dialog box.

alert(message)

Replace the word message with the text that you want displayed. The following is a revised Hello, world! JavaScript. Notice that the document.write() statement is replaced with the alert function. You'll see the alert dialog box displayed (Figure 1-2) when you run this script.

    -//W3C//DTD XHTML 1.0 Transitional//EN>

http://www.w3.org/1999/xhtml>

   

   

      Javascript type=text/javascript>

         

            alert('Hello, world!')

         -->

      

   

Figure 1-2 The alert dialog box remains on the screen until the OK button or the close box is clicked.

Looking Ahead

Now you have a pretty good understanding of what JavaScript is and what it isn't. JavaScript is a limited-featured programming language that is used to enhance HTML and give web pages the smarts to make decisions and perform sophisticated features found in professional web sites. JavaScript isn't Java.

JavaScript is an object-oriented programming language that lets you build applications by using objects. An object is a document, button, or another item, that appears on a form. Each object has properties—information about the object, such as size and color. Each object also has methods, which are actions performed by the object such as processing a form when the Submit button is clicked.

You access properties and methods of an object by using the name of the object followed by a dot and the name of the property or method that you want to use in your JavaScript. This is called dot syntax.

A JavaScript application reacts to events that occur while the application is running. An event is usually an action taken by the person who is using your application, such as someone clicking the Submit or Cancel button. You enable your JavaScript to react to events by defining event handlers. An event handler is a portion of your application that is called whenever a specific event occurs while your application is running.

A JavaScript is placed within the

Now that you have a good general understanding of JavaScript and know how to write a simple JavaScript application, it is time to move on to more interesting aspects of JavaScript. In the next chapter you'll learn how to store and use information within a JavaScript.

Quiz

1. JavaScript is a version of

a. Java

b. LiveScript

c. C++

d. VBScript

2. A JavaScript must reside within the

a.

b. tag

c.

d. tag

3. The Submit button is a type of

a. Object

b. Method

c. Property

d. Variable

4. The background color of a document is a type of

a. Object

b. Method

c. Property

d. Variable

5. write() is a type of

a. Object

b. Method

c. Property

d. Variable

6. A dot is used to

a. Identify a JavaScript comment

b. Separate lines of a JavaScript

c. End a JavaScript statement

d. Separate an object name from either a property or a method

7. What is it called when a person clicks a button on a form displayed by your JavaScript?

a. Event

b. Reaction

c. Rollover

d. Mouse rollover

8. What part of your JavaScript reacts to someone clicking a button on a form displayed by your JavaScript?

a. Main

b. Event handler

c. Subscript

d. Superscript

9. How do you prevent your JavaScript from being displayed by older browser?

a. Place the JavaScript within the

b. Place the JavaScript within the header

c. Place the JavaScript within a comment

d. Place the JavaScript within the body

10. JavaScript is

a. A full-featured programming language

b. A limited-featured programming language

c. A version of ASP

d. A version of ASP.NET

CHAPTER 2

Variables, Operators, and Expressions

You've probably seen many sophisticated web pages while surfing the Net and have wondered how they were built. The secret to such sophistication lies with JavaScript's ability to store and manipulate information and its ability to process information on the fly. These are things you can't do with HTML alone.

Before you can build an exciting web page, you'll need to learn the nitty-gritty basics of how to use JavaScript to store and manipulate information. Once you get the basics under your belt, you'll learn how to build those fancy features that you see in popular web sites.

In this chapter, we'll explore the behind-the-scenes part of JavaScript that is the foundation of nearly every eye-catching web page on the Internet. These are values, variables, and expressions that tell your browser how to make decisions while your JavaScript runs. If you know how to add 1 + 1, you will breeze through the information in this chapter.

Values and Variables

Web pages contain a lot of information along with a few pictures sprinkled about to catch your attention. In HTML, you place information you want to display between varieties of HTML tags. You place Hello, world! between the open

and close

tags, which cause that message to be displayed on the web page. Information that you place in the code of a web page or JavaScript is called a value. For example, the Hello, world! script that you wrote in the JavaScript in Chapter 1 is a value. A variable is basically a placeholder that holds a spot for data that can be changed