List of Figures

Chapter 1: Getting Started

Figure 1-1: A program, such as a racing game, interacts with both a computer and users and makes sure that the computer takes the steps requested by the users.

Figure 1-2: The HTML scaffolding appears as an empty document in a Web browser.

Figure 1-3: You know that the one-line program has run because you can see the text displayed in the browser.

Figure 1-4: Click the Don’t Append button to save your HTML file.

Chapter 2: Understanding Types, Variables, and Statements

Figure 2-1: By storing values in variables, each operation doesn’t have to be written in code.

Figure 2-2: Concatenation appends the string on the right of the string concatenation operator to the end of the string on the left of the operator.

Figure 2-3: The contents of the trekQuote variable is displayed.

Figure 2-4: It’s easy to display quotations using escape sequences.

Figure 2-5: You can include HTML tags in JavaScript strings.

Figure 2-6: JavaScript implicitly converts numbers to strings rather than the other way around.

Figure 2-7: The modulo operator combines remainder arithmetic with assignment.

Figure 2-8: Results of the increment operations

Chapter 3: Using Conditional Statements

Figure 3-1: The JavaScript alert statement displays a message box when executed.

Figure 3-2: The alert message box displays the results based on the default values of the HTML form elements.

Figure 3-3: When you enter new values in the HTML form, they’re evaluated using the conditional expression.

Figure 3-4: Using an if statement to test how JavaScript orders lowercase and uppercase strings

Figure 3-5: A high-level flow chart of the Rock, Scissors, and Paper game

Figure 3-6: The Web page (user interface) for Rock, Scissors, and Paper

Figure 3-7: The computer played rock and the human played scissors—a win for the computer!

Figure 3-8: Both players chose rock; it’s a tie.

Figure 3-9: The computer played paper, and the human chose scissors and wins!

Figure 3-10: This simple demonstration shows how switch statements work.

Figure 3-11: Flow chart of the whoWon function

Figure 3-12: The computer wins again.

Chapter 4: Working with Loops

Figure 4-1: The prompt function displays a box that accepts user input.

Figure 4-2: The string that will be reversed is entered in a prompt box.

Figure 4-3: The reverse text is displayed in the browser.

Figure 4-4: The while loop decrements from 10 to 1.

Figure 4-5: The user is prompted for a text string to reverse.

Figure 4-6: The reversed text string is displayed.

Figure 4-7: If you try to assign the length property of an empty object, you’ll get a syntax error.

Figure 4-8: The Web browser provides an explanation of JavaScript errors and the line number in the program where they occurred.

Figure 4-9: If the user enters an empty string, the browser display looks kind of weird.

Figure 4-10: Nested loops are used to draw a tree using Xs and Os.

Chapter 5: Understanding Functions

Figure 5-1: In an HTML document, the <br> tag is used to create a line break.

Figure 5-2: The function adds a line break to the text passed to it.

Figure 5-3: The user can enter a number in each of the text boxes.

Figure 5-4: The sum of the three numbers is displayed.

Figure 5-5: The function can be used with four boxes (or any number of boxes).

Figure 5-6: The sum of the numbers passed to the function is displayed.

Figure 5-7: The user enters the number of Fibonacci numbers to display.

Figure 5-8: By the eighteenth generation, there starts to be plenty of rabbits!

Figure 5-9: The text entered by the user is displayed in the message box.

Figure 5-10: The confirm method displays a box with text and OK and Cancel buttons.

Figure 5-11: The return value of the confirm method is either true or false , and you can branch depending on the value (in the figure, the text message displayed depends on the button clicked).

Figure 5-12: The default text in the prompt box depends on the argument sent to the prompt method.

Figure 5-13: The user enters text in the prompt box.

Figure 5-14: The text entered by the user in the prompt box is displayed in the Web page.

Chapter 6: Programming with Arrays

Figure 6-1: The text value in the array element is displayed.

Figure 6-2: The defined elements of the sparse array

Figure 6-3: The undefined values of the array

Figure 6-4: The value of the elements of an array are displayed as a text string.

Figure 6-5: The contents of the stack (the top two items) are displayed.

Figure 6-6: The HTML page lets you push a text item onto the stack, displays the current state of the stack, and lets you pop the stack.

Figure 6-7: Enter an item in the leftmost text box and click Push to push it onto the stack.

Figure 6-8: The contents of the stack are displayed in the select list.

Figure 6-9: When the user pops an item from the stack by clicking the Pop button, the popped item is displayed in the rightmost text box.

Figure 6-10: If you attempt to pop a stack with nothing on it, an appropriate message is displayed.

Figure 6-11: The values contained in the array of arrays are displayed.

Figure 6-12: Reversing, sorting, and concatenating an array

Figure 6-13: Default sort comparison and custom numeric comparison

Figure 6-14: Default sort comparison and case-insensitive comparison

Figure 6-15: An alert box shows that the box was checked.

Figure 6-16: When the Check All button is clicked, the form elements array is used to check all the check boxes.

Figure 6-17: When the check box is unchecked, an alert box is displayed.

Figure 6-18: When the Clear Checks button is clicked, the form elements array is used to uncheck all the check boxes.

Chapter 7: Working with Objects

Figure 7-1: Each human society is implemented as an object using a general class as a template.

Figure 7-2: The user enters a string in a prompt box.

Figure 7-3: The length of the string the user entered is displayed.

Figure 7-4: The user is asked to confirm the URL.

Figure 7-5: The document.location property is set to open the URL.

Figure 7-6: The window.close() method is used to close the browser window following a confirmation from the user.

Figure 7-7: The value of the HREF attribute (the URL that the link points to) changes when the onMouseOver event is fired.

Figure 7-8: The associative array of the properties of the window object is displayed.

Figure 7-9: The navigator object associative array

Figure 7-10: The document object associative array (shown partially)

Figure 7-11: The object instance’s values of its height and width properties and the return value for its calcArea method are displayed in the browser.

Figure 7-12: The properties of a Rectangle instance shown using its associative array

Figure 7-13: The custom toString method of the Rectangle object returns some cute text.

Figure 7-14: The Tchatshke Gulch user interface

Figure 7-15: The Auction object contains an array of Bid objects.

Figure 7-16: The Tchatshke Gulch user interface (with no values)

Figure 7-17: Creating an auction at the Tchatshke Gulch

Figure 7-18: Placing a bid at the Tchatshke Gulch

Figure 7-19: The bid value is shown in the Tchatshke Gulch user interface.

Figure 7-20: Bids are shown together with the associated maximum proxy bid.

Figure 7-21: And the winner is...

Chapter 8: Understanding Events and Event-Driven Programming

Figure 8-1: The Visual Studio .NET development environment loaded with a Visual Basic .NET project

Figure 8-2: The letter entered by the user in the text box is displayed in an alert box.

Figure 8-3: The letter t is singled out for unfair treatment.

Figure 8-4: The confirmation box asks the user whether they want to submit the form.

Figure 8-5: The cross-browser version of the application uses a button onClick event as a “faux” form onSubmit event.

Figure 8-6: The action specified in the form tag takes place when the user clicks OK.

Figure 8-7: Watching events fired by the text boxes in Mozilla

Figure 8-8: Watching events fired by the text boxes in Netscape

Figure 8-9: Watching events fired by the text boxes in Internet Explorer

Figure 8-10: The custom onSame event is fired when the two text strings entered by the user are the same.

Figure 8-11: The setInterval method is used to display the time at one-second intervals.

Figure 8-12: The setInterval method is used to automatically update proxy bids.

Chapter 9: Manipulating Strings

Figure 9-1: The String object’s link method is a quick way to create a hyperlink.

Figure 9-2: No lawyer will make it past Saint Peter by varying the case in a text string!

Figure 9-3: The Playing with Strings user interface is shown with the words in a string capitalized.

Figure 9-4: The function counts the number of words in a string.

Figure 9-5: The words in the text string are reversed.

Figure 9-6: The string has been reversed.

Figure 9-7: The first letters of the words in the reversed string have been capitalized.

Figure 9-8: Using the regular expression pattern shows that the user input isn’t in date format.

Figure 9-9: It’s easy to use regular expressions to make sure that user input is in the proper format.

Figure 9-10: Regular expressions can be used to trim a string.

Chapter 10: Debugging and Exceptions

Figure 10-1: In JavaScript, anything divided by zero is the special value Infinity.

Figure 10-2: If there are syntax errors on the page, an error icon appears on the status bar in Internet Explorer.

Figure 10-3: Double-clicking the error icon opens a message box that describes the error and provides a location.

Figure 10-4: The JavaScript console provides information about syntax errors in Netscape and Mozilla.

Figure 10-5: The error message in Internet Explorer provides a location for the error and a somewhat opaque description.

Figure 10-6: The JavaScript console in Netscape provides a helpful description of the error.

Figure 10-7: The count of words is one less than the actual number of words entered.

Figure 10-8: The alert box shows that the problem is a one-off error in the loop iteration variable.

Figure 10-9: You can use a separate diagnostic window to review values without interrupting program execution.

Figure 10-10: The “Object expected” error is caught and handled.

Figure 10-11: The “Alas, I loved and lost!” error has been thrown and caught.

Figure 10-12: Error number 42 has been caught.

Figure 10-13: The non-42 error is caught by the general handler.

Chapter 11: Programming with JavaScript

Figure 11-1: The user enters the password in a prompt box.

Figure 11-2: If the file pointed to by the password input isn’t found, an HTTP 404 error is generated.

Figure 11-3: The password is LearnToProgram.

Figure 11-4: When the password (the name of the destination page) is correctly entered, the page will open.

Figure 11-5: The butterfly has no pattern.

Figure 11-6: The butterfly is “filled in” with the first pattern.

Figure 11-7: The butterfly is now “dressed” using the plaid pattern.

Figure 11-8: The slide show page loads showing a single, static image.

Figure 11-9: The slide show displays images in index order or at random; in either case, the index value of the image is displayed on the status bar.