JavaScript Application Cookbook

JavaScript Application Cookbook

by Jerry Bradenbaugh
Released October 1999
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781565925779

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon
Start your free trial

Book description

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.

Visit the catalog page for JavaScript Application CookbookVisit the errata page for JavaScript Application CookbookDownload the supplemental content for JavaScript Application Cookbook

Publisher resources

View/Submit Errata

Table of contents

  1. JavaScript Application Cookbook
    1. Editor’s Note
    2. Preface
      1. What You Should Know
      2. Font Conventions
      3. Book Structure
        1. Execution Requirements
        2. Syntax Breakdown
        3. JavaScript Techniques
        4. Potential Extensions
      4. About the Code
      5. Development and Testing
      6. We’d Like to Hear From You
      7. Acknowledgments
    3. Introduction
      1. JavaScript Pros
        1. Easy to Learn, Quick, and Powerful
        2. Ubiquity
        3. Reducing the Server Load
        4. JavaScript Is Growing
        5. Maybe You Have No Choice
        6. There Are Probably More
      2. Basic JavaScript Programming Strategy
        1. What Are the Application Features?
        2. Who Is Your Audience?
        3. How Can You Get Around the Obstacles?
          1. Try the cross-browser approach
          2. Elegantly degrade or change performance
          3. Aim low
          4. Aim high
          5. Offer multiple versions of the same app
      3. JavaScript Approaches in These Applications
        1. Reuse as Much Code as Possible
        2. Isolate the JavaScript
        3. Declare Global Variables and Arrays near the Top
        4. Declare Constructor Functions After the Global Variables
        5. Define Functions from Top to Bottom in “Chronological” Order
        6. Each Function Performs a Single Operation
        7. Use as Many Local Variables as Possible
      4. Moving On
    4. 1. The Client-Side Search Engine
      1. Execution Requirements
      2. The Syntax Breakdown
      3. nav.html
        1. > records.js
        2. The Global Variables
        3. The Functions
          1. validate( )
          2. convertString( )
          3. allowAny( )
          4. requireAll( )
          5. verifyManage( )
          6. noMatch( )
          7. formatResults( )
          8. The HTML head and title
          9. Displaying document titles, descriptions, and linked URLs
          10. Adding “Previous” and “Next” buttons
          11. prevNextResults( )
        4. The HTML
      4. Building Your Own JavaScript Database
      5. Potential Extensions
        1. JavaScript 1.0 Compatibility
        2. TANSTAAFL
        3. Make It Harder to Break
        4. Display Banner Ads
        5. Add Refined Search Capabilities
        6. Cluster Sets
    5. 2. The Online Test
      1. Execution Requirements
      2. The Syntax Breakdown
      3. index.html—The Frameset
      4. questions.js—The JavaScript Source File
      5. administer.html
        1. HTML Body
        2. Global Variables
        3. Functions
          1. itemReset( )
          2. shuffle( )
          3. buildQuestion( )
          4. gradeTest( )
          5. printResults( )
          6. chickenOut( )
      6. Potential Extensions
        1. Making It Cheat-Proof
          1. Removing the answers from the array logic
          2. Removing gradeTest( ) and modifying buildQuestion( )
          3. Modifying printResults( )
        2. Converting to a Survey
    6. 3. The Interactive Slideshow
      1. Execution Requirements
      2. The Syntax Breakdown
      3. Application Variables
        1. DHTML Layer Defaults
        2. Browser-Determined Variables
        3. Image-Related Variables
        4. Automated Slideshow Variables
      4. The Application Functions
        1. Layer-Related Functions
          1. genLayer( )
          2. slide()
          3. genScreen( )
          4. The elements of slideShow
        2. Image-Related Functions
          1. preLoadImages( )
          2. imageSwap( )
        3. Navigational Functions
          1. refSlide( ), hideSlide( ), showSlide( ), and menuManager( )
          2. changeSlide( )
          3. setSlide( )
          4. autoPilot( )
          5. automate( )
      5. Potential Extensions
        1. Change Random Slides in AutoPilot
        2. Animated GIFs or Image Rollovers in the Slides
        3. Animate the Slides Themselves
    7. 4. The Multiple Search Engine Interface
      1. Execution Requirements
      2. The Syntax Breakdown
        1. Strolling down Memory Lane
        2. Dynamically Preloading Images
        3. Start Your Engines
        4. engineLinks( )
          1. Managing layers
          2. Preloading images
          3. Building the link
        5. imageSwap( )
        6. callSearch( )
      3. Potential Extension: Adding User Control
    8. 5. ImageMachine
      1. Execution Requirements
      2. The Syntax Breakdown
        1. Step 1: The Pages Load
        2. Step 2: Entering the Image Pairs and Defaults
        3. Step 3: Filling in Image Paths, HREF Attributes, and More
          1. captureDefaultProfile( )
          2. generateEntryForm( )
          3. genJavaScript( )
          4. Decision time
          5. Generate the code
        4. Step 4: Choosing “Preview” to Watch the Code in Action
        5. Step 5: Choosing “Change Info” to Make Changes
      3. Potential Extension: Adding Attributes to the Template
        1. Step 1: Adding the Fields
        2. Step 2: Creating Arrays in setArrays( )
        3. Step 3: Capturing the New Default Values
        4. Step 4: Adding Text Fields in generateEntryForm( )
        5. Step 5: Referencing and Assigning the New Values in genJavaScript( )
        6. Step 6: Generating the Additional HTML in genJavaScript( )
    9. 6. Implementing JavaScript Source Files
      1. arrays.js
      2. cookies.js
      3. dhtml.js
      4. events.js
      5. frames.js
      6. images.js
      7. navbar.js
      8. numbers.js
      9. objects.js
      10. strings.js
      11. Potential Extensions
    10. 7. Cookie-Based User Preferences
      1. Execution Requirements
      2. Syntax Breakdown
      3. prefs.html
        1. Preferences Form
        2. Loading Stored Preferences
        3. Laying Out Images
        4. Making Changes
          1. Step 1: Iterating through formObj
          2. Step 2: Writing the information to the cookie file(s)
          3. Step 3: Offering users a peek at new choices
        5. Resetting the Form
      4. dive.html
        1. Parse That Cookie
        2. Dealing with the Unknown
      5. Potential Extensions
        1. More Choices for the Layout Look
        2. Adding Themes
        3. Letting Users Create Their Own Links
        4. Direct Banner Ad Marketing
    11. 8. The JavaScript Shopping Cart
      1. Shopping Bag Walk-Through
        1. Step 1: Loading the Application
        2. Step 2: Product Browsing and Selection
        3. Step 3: Viewing and Changing the Order
        4. Step 4: Check Out
      2. Execution Requirements
      3. Syntax Breakdown
      4. Step 1: Loading Shopping Bag
        1. Top-Level Members
        2. inventory.js
          1. Product properties
          2. Product category properties
          3. Creating products and categories
          4. Creating the shopping bag
      5. Step 2: Displaying Products
        1. manager.html
          1. Variables
          2. display( )
          3. Exceptions to the Rule
          4. Building the display page
      6. Step 3: Showing All the Categories
        1. Displaying the First Product
          1. Where’s the DHTML?
      7. Step 4: Adding Products to the Shopping Bag
        1. Searching for Products
        2. Mapping the Products and Categories
        3. Searching the Existing Database
        4. Supporting Product/Category Navigation
        5. The Code in the Link
      8. Step 5: Changing the Order/Checking Out
        1. Making Select Lists
        2. Keeping Track of the Bill
        3. Wrapping Up showbag(): Displaying the Totals and More
          1. The “Check Out” button
        4. Finishing the Display
        5. What About the Server Side?
          1. “Reset Qtys”
          2. “Change Bag”
        6. The Forgotten Functions
      9. Potential Extensions
        1. Making Smarter Products
        2. Add Refined Search Capabilities
        3. Adding Cookies
    12. 9. Ciphers in JavaScript
      1. How Ciphers Work
        1. A Few Words on Cracking the Code
        2. The Caesar Cipher
        3. The Vigenere Cipher
      2. Execution Requirements
      3. The Syntax Breakdown
        1. Defining a Cipher
        2. Defining a Substitution Cipher
        3. Performing Basic Substitution
        4. Different Substitutions for Different Ciphers
          1. Caesar algorithm
          2. Vigenere Algorithm
        5. How shiftIdx Changes
        6. Each SubstitutionCipher Is Also a Cipher
        7. Creating Each Instance of SubstitutionCipher
        8. Choosing the Right Cipher
        9. A Final Thought
      4. Potential Extensions
    13. 10. Cyber Greetings: Drag-and-Drop Email
      1. Execution Requirements
      2. Syntax Breakdown
        1. The Other Two Documents
        2. Walking on Familiar Ground
        3. Places Everyone!
        4. Tracking the Mouse Location
        5. Calling All Icons
        6. Moving the Icons
        7. After the Documents Load
        8. Meet the Variables
        9. Displaying the Greetings
        10. Moving Through All the Images
        11. Keeping Dragged Icons in Place
        12. Testing the Work
        13. Creating the Actual Greeting
        14. Sending It Off
        15. Note
      3. The Server Side
      4. Potential Extensions
        1. Add a Link Back to Cyber Greetings
        2. Add Image Themes
        3. Banner Ad Campaigns
        4. Make the Greetings More Interactive
    14. 11. Context-Sensitive Help
      1. Execution Requirements
      2. Syntax Breakdown
        1. Context-Sensitive Help
        2. Showing and Hiding Extra Information
        3. Creating the Layers
        4. Showing the Info
        5. Managing the Link Location
      3. Potential Extensions
        1. Table of Contents
        2. Searchable Help Files
        3. Ask a Pro
        4. Phone Directory
    15. 12. Epilogue
    16. A. JavaScript Reference
      1. Browser Compatibility
      2. Objects, Methods, and Properties
        1. Anchor
        2. Applet
        3. Area
        4. Array
        5. Boolean
        6. Button
        7. Checkbox
        8. Date
        9. Document
        10. Event
        11. FileUpload
        12. Form
        13. Frame
        14. Function
        15. Hidden
        16. History
        17. Image
        18. Java
        19. JavaArray
        20. JavaClass
        21. JavaObject
        22. JavaPackage
        23. Layer
        24. Link
        25. Location
        26. Math
        27. MimeType
        28. Navigator
        29. Netscape
        30. Number
        31. Object
        32. Option
        33. Packages
        34. Password
        35. Plugin
        36. Radio
        37. RegExp
        38. Reset
        39. Screen
        40. Select
        41. String
        42. Submit
        43. sun
        44. Text
        45. Textarea
        46. Window
      3. Top-Level Properties and Functions
      4. Event Handlers
        1. onAbort
        2. onBlur
        3. onChange
        4. onClick
        5. onDblClick
        6. onDragDrop
        7. onError
        8. onFocus
        9. onKeyDown
        10. onKeyPress
        11. onKeyUp
        12. onLoad
        13. onMouseDown
        14. onMouseMove
        15. onMouseOut
        16. onMouseOver
        17. onMouseUp
        18. onMove
        19. onReset
        20. onResize
        21. onSelect
        22. onSubmit
        23. onUnload
    17. B. Web Resources
      1. Cool JavaScript Sites
      2. JavaScript Reference
      3. JavaScript FAQs
      4. DHTML Reference
      5. Document Object Model Reference
      6. Perl/CGI Reference
      7. Graphics Resources
      8. Similar Applications
        1. Client-Side Search Engines
        2. Online Tests
        3. Slideshows
        4. Multiple Search Engine Interfaces
        5. Rollover Generators
        6. Libraries
        7. Cookies
        8. Shopping Carts
        9. Ciphers
        10. Drag-and-Drop Concepts
        11. Context-Sensitive Help
    18. C. Using Perl Scripts
      1. A Perl/CGI Overview
        1. What’s So Good About Perl?
        2. What’s Not So Good About Perl?
          1. Perl and CGI
          2. Why use CGI?
      2. Getting Perl
      3. The Shopping Bag Script—bag.pl
        1. Getting the Product Information
        2. Saving the Information to a File on the Web Server
        3. Returning a Confirmation Page to the Shopper
        4. Setting Up the Script
      4. The CyberGreeting Script—greet.pl
        1. Setting Up the Script
        2. Getting the Greeting Info
        3. Saving the Greeting to a Uniquely Named File
        4. Printing a Confirmation Page
    19. Index
    20. Colophon

Product information

  • Title: JavaScript Application Cookbook
  • Author(s): Jerry Bradenbaugh
  • Release date: October 1999
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781565925779