Description

1305F-7

With JavaScript, you can build sites that look hotter and work smarter than ever before! Now, learn JavaScript by example, from two leading Fortune 500 Web developers! You'll learn all you need to get results as you build real-world practice sites that sell products, educate visitors, offer subscriptions, and display ads. Best of all, the finished sites are on the Web—so you can reuse the code and see exactly how your pages should look and work!

Write JavaScript to do all this, and much more!

• Detect browsers and platforms
• Create content dynamically
• Create image rollovers
• Enhance navigation
• Provide error handling
• Generate windows
• Communicate between frames Rely on Essential Guides for ALL the Web Skills You Need!

All these books share the same great format, and the same dynamic website. . .

so once you've used one, they're all a piece of cake!

• Essential CSS & DHTML for Web Professionals
• Essential PERL 5 for Web Professionals
• Essential Photoshop 5 for Web Professionals
• Essential JavaScript for Web Professionals
• With more to come!

Sample Content

Downloadable Sample Chapter

Click here for a sample chapter for this book: 0130130567.pdf

Table of Contents

1. Dynamism and Detection.

Project I: Generating Platform-Specific Content. Inserting a Script into Your HTML. JavaScript Hierarchies. Platform/Browser Detection. Creating Dynamic HTML from within JavaScript. Project II: Printing Copyright Information and Last-Modified Date. Introduction of the Last-Modified Property. Dynamically Printing Nonstring Data.

Project I: Rollover Script. Creating the IMAGE Objects. Image Rollover Functions. Inserting the Event Handlers. Project II: Adding Advanced Functionality to Our Rollovers. Inserting the Event Handlers. Creating the IMAGE Objects. Inserting the Rollover Functions. Rollover Quirks.

Project I: JavaScript and Pull-Down Menus. Creating the Navigation Function. Inserting the Event Handler. Using on Change for Instant Gratification. Project II: Using Multiple Pull-Down Menus for Navigation. Creating the Arrays. Creating the Drill-Down Menu Function. Creating the Navigation Function. Inserting the Event Handlers. Project III: Using JavaScript on a Log-in Page. Inserting the Event Handler.

Project I: Checking for Empty Form Fields. Checking Forms for Empty Text Box Fields. Making Sure a Pull-Down Menu Option Was Chosen. Project II: Checking for Erroneous Data in Form Fields. Checking E-mail Addresses for Valid Characters. Checking for Area Codes in Phone Numbers. Making Sure Zip Codes Have Only Numbers. Project III: Letting the User Know What's Wrong.

A Look at the WINDOW Object. Project I: Creating, Populating, and Closing Windows. Creating and Defining the Arrays. Creating the Function. Inserting the Event Handlers. Project II: Using JavaScript to Talk between Frames. Figuring Out Your Frame Hierarchy. Creating a Function to Check Which Section You're In. Inserting the Event Handler.

Project I: Create Submenus for the Stitch Secondary Pages. Functional Specification. Creating and Populating the Arrays to Store Data. Creating the Functions to Run the Submenu System. Inserting the Event Handlers.

Preface

Introduction

Welcome! This book is something we wish we had when we were first starting out with JavaScript. At that time, there were basically two types of instructional books on the market: 1200-page tomes of seemingly arcane knowledge, and books that were overly simplified and lacking in practical information. Unfortunately, there were no books that were informative and at the same time provided instruction that could be used quickly and effectively in real-world situations.

This book will guide you through JavaScript using examples taken straight from situations that are faced every day during Web site construction. It starts off with simple examples and becomes quite sophisticated with the scripting toward the end of the book. With that said, let's look a little more closely at how this book is laid out and a brief summary of scripting, as well as what JavaScript can and can't do for you.

How This Book Is Laid Out

Chances are that at least some of you picked up this book when your boss called you into his or her office and showed you a Web site that made use of JavaScript. You were then told in no uncertain terms that it was your job to implement the same, or similar, feature on your Web site. "No problem," you respond, while saying to yourself, "I better learnJavaScript and fast!"

This is often how we expand our skills: We are given a job, and if we don't know exactly how to do it, we quickly learn how. In keeping with this real-world model, this book is split into two main projects. For each of the main projects, we will be responsible for creating and/or upgrading the Web site for a fictitious company.

For the first three chapters, we will revamp the homepage for Shelley Biotechnologies, a fast-growing bio-tech startup. In each chapter we have at least one project that consists of commonly used JavaScript solutions that range from easy to moderately difficult. At the end of each chapter there are more advanced exercises that you can complete on your own to expand your skills. In the second half of the book we will make some much-needed additions to Stitch Magazine's Web site. The examples will be more advanced than those found in the first project, and they will demonstrate some of the powerful things you can do using JavaScript.

The exercises in the chapters are designed to give you a solid foundation in JavaScript on which you can build as you continue to use it. You will find that more often than not there is more than one way to do things in JavaScript — there really are no right or wrong ways to accomplish tasks.

For all of the examples in the book you can go to the companion Web site located at http://www.phptr.com/essential and download the HTML and images needed to follow along with the exercises.

An Introduction to JavaScript

What Is JavaScript?

For those of you who are new to the world of Web development and may be learning JavaScript in conjunction with HTML, a quick introduction to JavaScript may be in order. JavaScript is Netscape's built-in, cross-platform scripting language. Like HTML, it will work on all platforms. JavaScript allows you to enhance the functionality of your Web pages by embedding applications directly into your HTML. You can use JavaScript to bu ld appl cat ons that range from adding interactivity to your pages to applications that interact with databases. Although Netscape created JavaScript, it will work on most modern browsers, including Microsoft's Internet Explorer (IE). However, IE doesn't directly support JavaScript. IE has its own scripting language — JScript — that supports most of the features found in JavaScript. In the few instances in which the languages differ, those differences are pointed out and a workaround is presented. As these are the two main browsers on the market, the scripts we will be writing will focus on them.

There are two methods that you can use to include JavaScript in your Web pages — client-side and server-side. Both methods share the same basic language sets. This core language defines a base set of objects and features that will work in both client-side and server-side applications. Each method also has its own extended object and feature sets.

Client-Side JavaScript: How It Works

Client-side JavaScript applications are scripts that are embedded directly into your HTML pages and are executed by the user's browser as it loads the page. At least 90% of all the scripts you encounter on the Web fall into this category. Therefore, this is the method that we will use throughout this book.

When the user's browser calls up an HTML page with JavaScript embedded in it, the browser's JavaScript runtime engine interprets the script from the top down, executing statements as it goes.

One of the advantages of using client-side scripting is that the script can detect and make use of user-initiated events, such as changes to a form or the mouse rolling over a particular graphic. The script is then able to use that information to call other parts of the script, and all of this can be done without going back to the Web server and grabbing any more information. Because our scripts are dependent on being interpreted by the user's browser, a few words on the different browsers and how they differ in handling JavaScript are in order.

Browsers and Versions

As stated earlier, IE and Navigator differ slightly in the implementation of their scripting languages. As a programmer, this makes your life a little more difficult: There will be times when a solution will work differently or not at all on different browsers. Wait — it gets worse: As Netscape and Microsoft come out with newer versions of their browsers, the versions of their scripting languages are changing as well. This means that scripts written using new features may not work in an older browser. But don't get too upset — it's not as bad as it seems. All this means is that you will have to take a little extra care in writing and checking your scripts. There are many techniques that you can use to make sure your scripts will work across the board — we will be exploring these techniques and the appropriate times to use them. However, as this book has JavaScript in its title instead of JScript, we will be concentrating mainly on Netscape's scripting language.

What JavaScript Can and Can't Do

While the applications that you can create using JavaScript are only limited by your imagination, there are several things that you cannot do such as access or control the user's machine. For security reasons, writing to a user's computer is severely limited. You can store data on the user's machine only through the use of a cookie, and even then you are limited to a simple text file. This protects users from scripts that might harm their computers or allow unscrupulous programmers access to personal information.

A security feature called the "Same Origin Policy" also restricts the access of scripts from one origin access to certain properties or files from other locations. For example, if you have a script located at http://www.yoursite.com/test.html and it tries to access certain properties of an HTML page located at http://www.theirsite.com/ test.html, the Same Origin Policy will deny your script access. The properties that the Same Origin Policy restricts are show

Updates

Errata

Sorry for the trouble that you are having with the Form Validation project in Chapter 4 of the book. This was a problem that I thought I had corrected, but it must have slipped by our final tech checks. There are two places that need slight modifications, first in the script and secondly in the HTML for the pulldown menu. In the script the line in question that needs fixing is following (it should be around line 52).

     if (document.forms['promotion'].elements['whatTheyWant'].value == 'default')

We need to first add a new line of code right before this one:

     var selectPos =
document.forms['promotion'].elements['whatTheyWant'].selectedIndex;

What this line does is to create a variable called "selectPos" and assigns it the value of whichever item is selected from the pull-down menu. Next we need to modify our IF statement to use this new variable.

     var selectPos =
document.forms['promotion'].elements['whatTheyWant'].selectedIndex;

     if
(document.forms['promotion'].elements['whatTheyWant'].options[selectPos].value == 'default')

In this newly modified IF condition we are checking to see if the value of the option for the selected menu item is equal to "default." If this is the case then we go ahead and execute the code that is contained within the IF statement. Now that we have the script fixed we need to change a line in the HTML (around line 249).

This is the existing piece of code:

     <OPTION VALUE="">Please choose a category

Here is what we need to change it to:

     <OPTION VALUE="default">Please choose a category

All we are doing here is assigning the value "default" to this initial menu item. This lets us test for our IF statement up in the script.

Submit Errata