JavaScript Application Cookbook

Overview

There is a serious information gap for Webmasters learning client-side JavaScript skills and trying to solve common Web-related problems. Knowing the syntax is one thing, being able to build a useful application is another. And while there are dozens of "how- to" JavaScript books available, few literally hand the Webmaster a set of ready-to-go, client-side JavaScript applications with thorough documentation that enable the reader to fully understand and extend those applications. By providing such a set of ...

See more details below
Paperback (1 ED)
$41.24
BN.com price
(Save 25%)$54.99 List Price
Other sellers (Paperback)
  • All (32) from $1.99   
  • New (5) from $7.99   
  • Used (27) from $1.99   
Sending request ...

Overview

There is a serious information gap for Webmasters learning client-side JavaScript skills and trying to solve common Web-related problems. Knowing the syntax is one thing, being able to build a useful application is another. And while there are dozens of "how- to" JavaScript books available, few literally hand the Webmaster a set of ready-to-go, client-side JavaScript applications with thorough documentation that enable the reader to fully understand and extend those applications. By providing such a set of applications, JavaScript Application Cookbook allows Webmasters to immediately add extra functionality to their Web sites.

This book targets readers with two different skill sets. The primary target is JavaScript-knowledgeable Webmasters and designers who can immediately begin constructing their own versions of the applications. The secondary target is those with little or no JavaScript experience. The included applications are ready for immediate use and require little customization.

This book explores both the code and the techniques that are centered around core JavaScript functionality, a functionality that will not become incompatible or obsolete. The source file design of most applications and libraries will help modularize reader Web sites and facilitate easier site management and coding practices.

Chapters are organized by application. Among the included applications are:

  • A client-side search engine that will show coders how to build their own search engine and get excellent results, all with a client-side tool
  • A drag-and-drop greeting application that lets users custom build and send DHTML email greetings
  • A GUI image rollover tool that generates cross-browser image rollover code for all versions of JavaScript
  • A robust client-side shopping cart application that lets shoppers browse and shop, while the application keeps a tab of the shopper's selections and a running bill, including tax and shipping
  • An online test application that auto-administers, grades, and displays answers to online exams or surveys

An additional value to this book is an online resource (http://www.serve.com/hotsyte/) that discusses the applications and points to other resources. With its focus on providing practical real-world solutions for Webmasters, JavaScript Application Cookbook is destined to become a staple for every JavaScript developer, regardless of experience.

"JavaScript Cookbook" literally hands the Webmaster a set of ready-to-go, client-side JavaScript applications with thorough documentation to help them understand and extend those applications. By providing such a set of applications, this guide allows Webmasters to immediately add extra functionality to their Web sites.

Read More Show Less

Product Details

  • ISBN-13: 9781565925779
  • Publisher: O'Reilly Media, Incorporated
  • Publication date: 10/18/1999
  • Edition description: 1 ED
  • Edition number: 1
  • Pages: 482
  • Product dimensions: 7.05 (w) x 9.19 (h) x 0.96 (d)

Meet the Author

Jerry Bradenbaugh is a senior Web application developer and technical lead in Los Angeles, California. His Web site, HotSyte-The JavaScript Resource, has been around since the early days of JavaScript, making it one of the oldest JavaScript resources on the Net. He has contributed in developing enterprise applications for Netscape and First Union National Bank.

Read More Show Less

Read an Excerpt


Chapter 5: ImageMachine

genJavScript( )

If any of the inspected fields is empty, the user is alerted, and the function returns. If each has at least some text, ImageMachine calls function <tt>genJavaScript( )</tt>, passing in <tt>imgTemplate</tt> and the as-of-yet unexamined Boolean value contained in <tt>mimeType</tt>. As you can surely guess, <tt>genJavaScript( )</tt> is responsible for creating the JavaScript code of the web page to the screen. The function is very long, but performs identical work to that of <tt>generateEntryForm( )</tt>. See lines 138-306.<p>

<b>JavaScript Technique: JavaScripting A La Defensiva</b> It's no accident that there are <SCRIPT> tags in the generated code with several different LANGUAGE attribute settings. You'll see some code within the <SCRIPT LANGUAGE= "JavaScript"> </SCRIPT> tags at line 185, Other code within the <SCRIPT LANGUAGE= "JavaScript1.1"> </SCRIPT> tags at line 189, and finally yet more code between within the <SCRIPT LANGUAGE= "JavaScriptl.2"></SCRIPT> tags at line 193.

This keeps browsers of varying JavaScript compatibility from executing code that they won't support, and hence, causing application-stopping errors. For example. the Image( ) object isn't supported in JavaScript 1.0. Therefore, you won't see any Image( ) object code unless it is embedded in a <SCRIPT> tag with "JavaScript1.1" (or higher) as the LANGUAGE attribute.

You can code defensively like this by using control variables, setting their values according to the <SCRIPT> tag in which it resides. When it comes time to run a function with questionably supported code, run only that code if the conditions of the control variables are met. You can see this in variables canRollover for the Image( ) object code and variable canClickDown for the onMouseDown event handler code.

Notice also that scripting this way can also reduce download times. For example, browsers that don't Support JavaScript 1.2 won't execute any code within the <SCRIPT LANGUAGE= "JavaScript1.2"> </SCRIPT> tags. That's good news because the browser won't have to request images used for the rollovers associated with the onMouseDown event.

Wow. Double wow. And you thought generateEntryForm( ) was long. I've seen shorter insurance policies. It's still the same deal, though. genJavaScript( ) performs a single task: it generates the rollover code, which is mostly JavaScript.

The first thing that genJavaScript( ) does is to reset global variable imageLinks. More on these code-holding globals in a moment. Next up, genJavaScript( ) sets a handful of global "specification" variables according to the value of mimeType. Here are lines 141-154.

 if (mimeType) { else {

If mimeType is true, the globals will be set to string values that force the code to be printed. Variables lt and gt are set to < and > respectively. Variable br is then set to the string value of <BR>. HTML is a Boolean variable, indicating that the user wants the code interpreted. This will come into play shortly when generating the code. Variable nbsp is set to a string of HTML non-breaking spaces. nbsp is used for the HTML equivalent of emulating the Tab key.

If mimeType proves false, the globals will be set to force the code to be interpreted. Variables lt and gt are set to < and > respectively. Variable br is then set to the string value of lb. The value of lb was set all the way back in lines 6-8. Here it is.

 var platform = navigator.platform; var lb = (platform.index0f("Win" != -1) ? "\n\r" :

As you can see, variables platform and lb, work together. platform contains a string of the value of the operating system for which the browser was compiled. Variable lb is set according to the value of platform. Windows (DOS) represents the newline character, equivalent to pressing the Enter or RETURN key, by \n\r. Macintosh does so with \r, and Unix operating systems use \n. This use of newline characters keeps the generated code from being jammed into two or three mile-long lines. This isn't vital to the application, but when ImageMachine prints the HTML and JavaScript, viewing the source code will be much easier.

JavaScript Technique: The Power of Global Variables

This application reaps the benefits of global variables. ImageMachine generates printed code or executable code. You look at one and run the other. However, both types of code are almost the same except that the executed code utilizes HTML brackets < and >, whereas the printed code utilizes the character entities of HTML brackets, < and >. Global variables lt and gt are set to one either the HTML brackets or the character entities, depending whether you choose the Generate button or the Preview button.

Variables br and nbsp are assigned similarly. This is the power of global variables: simply changing their value yields strings that perform distinctly different but useful purposes.

Moving on, HTML, set to false, is a Boolean variable, indicating that the user wants to have the code interpreted. This will come into play shortly when generating the code. Variable nbsp is set to a string of whitespace.

Now ImageMachine has the information from the text field in the template, and whether the user has selected if he or she wants printed code or interpreted code. Generating the JavaScript truly begins at line 185 and works until the end of the function.

As you scan the code, you'll see several calls to function pathPrep( ) This function reformats the image path string if the path appears to be an absolute local path on a Windows machine (see Chapter 3 for facts about paths). Why all the fuss? Remember that Windows uses backslash notation (\) to separate directories.

Browsers use the forward slash (/). So do Unix machines. Therefore it will be necessary to convert backslashes to forward slashes. Actually some browsers will make the conversion on the fly.

The catch is, JavaScript interprets the backslash character as part of an escaped character. Therefore, JavaScript would perceive C:\My_Directory\My.File as C:My_DirectoryMy.File. pathPrep( ) takes care of that. Here are lines 310-317.

 function pathPrep(path) {   if (path.index0f(":\\") != -1) {   else { return path; }

Browsers also open local documents with the file protocol, which means we'll need file:/// attached to the front of the URL and a I in place of the : to conform to the specification.

Decision time

Good deal. Things are set up to generate code according to a printed or interpreted specification. Before ImageMachine builds the code, though, it needs to "know" whether to generate code based on new data from the image template or use information already stored in the arrays. According to our user cycle described before, the user just finished entering information in the image template. The other situation arises when the user has already generated code and is toggling back and forth between Generate and Preview. We'll cover that shortly.

If the information will be coming from the image template (in our case), genJavaScript( ) resets all img arrays by calling setArrays( ) so the new information from the image template can be assigned. ImageMachine determines whether to call setArrays( ) and reassign values by evaluating imgTemplate. Here's how. genJavaScript( ) can be called in one of three ways, from buttons Generate, Preview, and Change Info. The Change Info button call passes a null value to imgTemplate. Therefore, if imgTemplate is not equal to null, genJavaScript( ) knows to clear the arrays and make way for new information. Otherwise, the elements in the img arrays won't be modified. Study lines 156-170 carefully and see how this checks out.

 if (imgTemplate != null) {

If the arrays elements are modified, the string values assigned to them go through a quick dangerous character removal process by way of function purify( ) at line 308. Here you go.

function purify(txt) { return txt.replace(/\'I\"/g, ""); }

This removes all single and double quotes from your values. They certainly aren't illegal, but JavaScript has to use both single and double quotes to generate the code. Unless they're properly escaped with a backslash, this will mean trouble for your generated code. purify( ) removes them from the string it is passed, then returns the fresh new string....

Read More Show Less

Table of Contents

Editor’s Note;
Preface;
What You Should Know;
Font Conventions;
Book Structure;
About the Code;
Development and Testing;
We’d Like to Hear From You;
Acknowledgments;
Introduction;
JavaScript Pros;
Basic JavaScript Programming Strategy;
JavaScript Approaches in These Applications;
Moving On;
Chapter 1: The Client-Side Search Engine;
1.1 Execution Requirements;
1.2 The Syntax Breakdown;
1.3 nav.html;
1.4 Building Your Own JavaScript Database;
1.5 Potential Extensions;
Chapter 2: The Online Test;
2.1 Execution Requirements;
2.2 The Syntax Breakdown;
2.3 index.html—The Frameset;
2.4 questions.js—The JavaScript Source File;
2.5 administer.html;
2.6 Potential Extensions;
Chapter 3: The Interactive Slideshow;
3.1 Execution Requirements;
3.2 The Syntax Breakdown;
3.3 Application Variables;
3.4 The Application Functions;
3.5 Potential Extensions;
Chapter 4: The Multiple Search Engine Interface;
4.1 Execution Requirements;
4.2 The Syntax Breakdown;
4.3 Potential Extension: Adding User Control;
Chapter 5: ImageMachine;
5.1 Execution Requirements;
5.2 The Syntax Breakdown;
5.3 Potential Extension: Adding Attributes to the Template;
Chapter 6: Implementing JavaScript Source Files;
6.1 arrays.js;
6.2 cookies.js;
6.3 dhtml.js;
6.4 events.js;
6.5 frames.js;
6.6 images.js;
6.7 navbar.js;
6.8 numbers.js;
6.9 objects.js;
6.10 strings.js;
6.11 Potential Extensions;
Chapter 7: Cookie-Based User Preferences;
7.1 Execution Requirements;
7.2 Syntax Breakdown;
7.3 prefs.html;
7.4 dive.html;
7.5 Potential Extensions;
Chapter 8: The JavaScript Shopping Cart;
8.1 Shopping Bag Walk-Through;
8.2 Execution Requirements;
8.3 Syntax Breakdown;
8.4 Step 1: Loading Shopping Bag;
8.5 Step 2: Displaying Products;
8.6 Step 3: Showing All the Categories;
8.7 Step 4: Adding Products to the Shopping Bag;
8.8 Step 5: Changing the Order/Checking Out;
8.9 Potential Extensions;
Chapter 9: Ciphers in JavaScript;
9.1 How Ciphers Work;
9.2 Execution Requirements;
9.3 The Syntax Breakdown;
9.4 Potential Extensions;
Chapter 10: Cyber Greetings: Drag-and-Drop Email;
10.1 Execution Requirements;
10.2 Syntax Breakdown;
10.3 The Server Side;
10.4 Potential Extensions;
Chapter 11: Context-Sensitive Help;
11.1 Execution Requirements;
11.2 Syntax Breakdown;
11.3 Potential Extensions;
Chapter 12: Epilogue;
JavaScript Reference;
Browser Compatibility;
Objects, Methods, and Properties;
Top-Level Properties and Functions;
Event Handlers;
Web Resources;
Cool JavaScript Sites;
JavaScript Reference;
JavaScript FAQs;
DHTML Reference;
Document Object Model Reference;
Perl/CGI Reference;
Graphics Resources;
Similar Applications;
Using Perl Scripts;
A Perl/CGI Overview;
Getting Perl;
The Shopping Bag Script—bag.pl;
The CyberGreeting Script—greet.pl;
Colophon;

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)