book

Javascript for the World Wide Web: Visual Quickstart Guide, Fifth Edition

by Tom Negrino, Dori Smith

July 2003

Intermediate to advanced

512 pages

13h 8m

English

Peachpit Press

Read now

Unlock full access

Copyright
Dedication:Special Thanks to:
Introduction
We wrote this book for youHow to use this bookYou say browser, we say KumbayaDon't type that code!Time to get started
1. Getting Acquainted with JavaScript
What JavaScript IsJavaScript Isn't JavaWhere JavaScript Came FromWhat JavaScript Can DoWhat JavaScript Can't DoThe Snap-together LanguageObjectsPropertiesMethodsPutting the pieces togetherHandling EventsValues and VariablesOperatorsAssignments and ComparisonsComparisonsWhat Tools to Use?
2. Start Me Up!
Where to Put Your ScriptsTo write your first scriptHiding Scripts from Old BrowsersTo hide JavaScript from old browsersPutting Comments in ScriptsTo comment your scriptAlerting the UserTo alert a userConfirming a User's ChoiceMore about conditionalsTo confirm a choicePrompting the UserTo prompt a user for a responseRedirecting the UserTo redirect a userRedirecting the User with a LinkTo perform a smoother redirectionBrowser DetectionTo discover the user's browser type
3. Language Essentials
Detecting Browser Plug-ins(Netscape and Internet Explorer/Mac)To check for a plug-inAround and Around with Loops(Netscape and Internet Explorer/Mac)More about loopsTo use a loop to check for plug-insWriting with Loops(Netscape and Internet Explorer/Mac)To write a Web page using a loopUsing For/In Loops(Netscape and Internet Explorer/Mac)To use a for/in loopUsing Do/While LoopsTo use a do/while loopChecking if Java Is EnabledTo check if Java is enabledFunctionsCalling a functionPassing information to a functionUsing Multi-level ConditionalsTo use a switch/case statementWorking with Functions That Return Values(Netscape and Internet Explorer/Mac)To return a value from a function:Handling ErrorsTo handle errors gracefullyPutting More than One Script on a PageScrolling Status BarsTo make a scrolling status barStatus Bar MessagesTo put a message in the status bar
4. Image Basics
Creating RolloversTo create a rolloverCreating More Effective RolloversTo create a better rolloverPutting Multiple Rollovers on a PageTo put multiple rollovers on a pageTriggering Rollovers from a LinkTo trigger a rollover from a linkMaking Multiple Links Change a Single RolloverTo make multiple links change a single rolloverWorking with Multiple RolloversTo work with multiple rolloversUsing a Function to Code Multiple Images with a Single RolloverTo use a function with multiple image rolloversUsing a Function to Code Multiple RolloversTo use a function to simplify multiple rollovers
5. More Fun with Images
Creating Cycling BannersTo create cycling bannersCreating Multiple Cycling BannersTo create multiple cycling bannersMaking the Banner Cycling Wait for the UserTo make the cycling wait for the userAdding Links to Cycling BannersTo add links to cycling bannersBuilding SlideshowsTo make a slideshowBuilding Wraparound SlideshowsTo build a wraparound slideshowDisplaying a Random ImageTo display a random imageCycling Images with a Random StartTo start images cycling from a random startDisplaying Multiple Random ImagesTo display multiple random imagesCombining a Rollover with an Image MapTo combine a rollover with an image map
6. Frames, Frames, and More Frames
Keeping a Page out of a FrameTo isolate your pageForcing a Page into a FrameTo force a page into a frameForcing a Site into a FrameTo force a site into a frameLoading a FrameTo load one frame from anotherCreating and Loading a Dynamic FrameTo load a dynamic frame from another frameSharing Functions Between FramesTo use a function on another pageStoring Information in FramesTo keep a count of page visitsLoading Multiple Frames at OnceTo load multiple frames at onceBrowser Detection with FramesTo detect browser capabilities with framesWorking with IframesTo create the content for an iframe
7. Working with Browser Windows
Opening a New WindowTo open a new windowLoading Different Contents into a WindowTo load different contents into a windowOpening a New Window Using an Image LinkTo open new windows using image linksOpening Multiple WindowsTo open multiple windows with a scriptOpening Multiple Windows SimultaneouslyTo open multiple windows at the same timeScrolling a WindowTo scroll a windowUpdating One Window from AnotherTo update one window from anotherCreating New Pages with JavaScriptTo create a new page with JavaScriptClosing a WindowTo close a windowCreating a Control PanelTo create a control panelPositioning a Window on the ScreenTo position a window on the screenDisplaying an Alert when a Window is LoadedTo display an alert when a window is loaded
8. Form Handling
Verifying PasswordsTo verify a password entryUsing Images as Submit ButtonsTo use an image as a submit buttonSelect-and-Go NavigationTo create a select-and-go menuChanging Menus DynamicallyTo change menus dynamicallySelecting Menu ItemsTo require a menu choiceWorking with Radio ButtonsTo make sure that the user picks a radio buttonSetting One Field with AnotherTo check for proper entryTo set a field value automaticallyValidating Zip CodesTo make sure Zip codes are numericValidating Email AddressesTo validate an email address

9. Forms and Regular Expressions
Validating an Email Address with regular ExpressionsTo validate an email address using regular expressionsValidating a File NameTo validate a URL:Extracting StringsTo extract stringsFormatting StringsTo format a stringFormatting and Sorting StringsTo format and sort stringsFormatting and Validating StringsTo format and validate a phone number
10. Making Your Pages Dynamic
Putting the Current Date into a Web PageTo put the current date into a Web pageWorking with DaysTo figure out if it is a weekendCustomizing a Message for the Time of DayTo customize messages for the time of dayDisplaying Dates by Time ZoneTo display dates by time zoneConverting Military Time to AM/PMTo convert military time to AM/PMCreating a CountdownTo create a countdownWorking with Referrer PagesTo display the referrer pageWriting Text into a Document on the FlyTo write text on the flyDate Methods
11. Handling Events
Handling Window EventsThe onload eventThe onunload eventThe onresize eventThe onmove eventThe onabort eventThe onerror eventThe onfocus eventThe onblur eventMouse Event HandlingThe onmousedown eventThe onmouseup eventThe onmousemove eventThe onmouseover eventThe onmouseout eventThe ondblclick eventThe onclick eventForm Event HandlingThe onsubmit eventThe onreset eventThe onchange eventThe onselect eventThe onclick eventThe onblur eventThe onfocus eventKey Event HandlingThe onkeydown eventThe onkeyup eventThe onkeypress event
12. JavaScript and Cookies
Baking Your First CookieTo set a cookieReading a CookieTo read a cookieShowing Your CookiesTo show all your cookiesUsing Cookies as CountersTo use a cookie as a counterDeleting CookiesTo delete cookiesHandling Multiple CookiesTo handle multiple cookiesDisplaying “New to You” MessagesTo display a “New to You” message
13. Introducing CSS
Saying it with StyleTo add a style to your pageStyles with ClassTo format text with CSSChanging Fonts with CSSTo change fonts with CSSChecking Your IDTo add an ID to your style sheetStyles and SpansTo use a <span>Distinguished LinksTo enhance your linksPositioning AbsolutelyTo use absolute positioning
14. Working with DHTML
DHTML Browsers & “Standards”Moving an Object in Two Dimensions(Netscape 4.x only)To move a Netscape DHTML objectMoving an Object in Two Dimensions(Internet Explorer Win/Mac)To move an Internet Explorer DHTML objectMoving an Object in Two Dimensions(Netscape 6+ only)To move a Netscape 6 DHTML objectMoving an Object in Two DimensionsTo move a cross-browser DHTML objectMoving an Object in Three Dimensions(Netscape 4.x only)To move a DHTML object in NetscapeMoving an Object in Three Dimensions(Netscape 6+ only)Moving an Object in Three Dimensions(Cross-browser)To move a cross-browser DHTML objectMoving DHTML TextTo move DHTML text in all browsersModifying a DHTML Drop Shadow(IE Windows)To modify a drop shadowRotating a DHTML Shadow(IE Windows)To rotate a shadowModifying a DHTML Glow(IE Windows)To modify a DHTML glow
15. User Interface Design with JavaScript
Pull-Down MenusTo create a pull-down menuSliding MenusTo use sliding menusTool TipsTo create tool tipsClick-Anywhere Form FieldsTo create click-anywhere form fields
16. Applied JavaScript
Using an External .js FileTo use an external .js fileA Slideshow with CaptionsTo create a slideshow with captionsA Silly Name GeneratorTo combine JavaScript techniquesBar Graph GeneratorTo generate a bar graphAn Object-oriented Bar Graph GeneratorTo generate a bar graph with custom objectsStyle Sheet SwitcherTo allow the user to switch between style sheets
17. Manipulating Nodes
About Node ManipulationDOM-2 and the W3CDOM-2 terminologyAdding NodesTo add nodesDeleting NodesTo delete nodesDeleting Specific NodesTo delete a particular nodeInserting NodesTo insert a nodeReplacing NodesTo replace nodes
18. Bookmarklets
Your First BookmarkletTo create a bookmarklet (Netscape 4)To create a bookmarklet (Netscape 6+)To create a bookmarklet (Safari)To create a bookmarklet (Internet Explorer/Mac 5)To create a bookmarklet (Internet Explorer/Win 5+)Changing a Page's Background ColorTo change the background colorWeb-safe ColorsTo show a Web-safe color chartWord LookupsTo look up a wordViewing ImagesTo view images (in Netscape 4)To view images (in Netscape 6+, Safari, and Internet Explorer):Displaying ISO Latin CharactersTo display ISO Latin charactersConverting RGB Values to HexTo convert RGB values to hexadecimal:Converting ValuesTo convert kilometers to milesA Bookmarklet CalculatorTo use a JavaScript calculator
19. Working with Visual Tools
The Pros and Cons of Visual ToolsThe Good SideThe Dark SideUsing Behaviors in DreamweaverTo validate a form with a behaviorFlying Objects in Adobe GoLiveTo animate objects in Adobe GoLiveCreating Pop-Up Menus in FireworksTo create a pop-up menu with Fireworks MXCustomizing DreamweaverBehaviorsCommandsInspectorsMenusObjectsStart-up
20. Debugging Common Errors
The Built-in Debugging AidsMicrosoftNetscapeTo use Netscape 7's consoleJavaScript DebuggersMicrosoftMacromediaCommon ErrorsTo debug your scripts, look for these gotchasFollowing Variables While a Script is RunningTo view variables during script executionViewing Variables in Another WindowTo write debugging info to a separate window:Writing Error Messages to Another WindowTo create your own error messages
A. JavaScript Genealogy and Reference
JavaScript VersionsNetscape's JavaScriptMicrosoft's JScriptAOLECMAScriptBrowsers and JavaScriptObject FlowchartThe Big Object Table
B. JavaScript Reserved Words
JavaScript reserved wordsAdditional words reserved for future use by ECMAScript 3ECMAScript 4Other identifiers to avoid
C. Cascading Style Sheets Reference
D. Where to Learn More
Finding Help on the WebNetscape and Mozilla sitesCore JavaScript Guide 1.5Core JavaScript Reference 1.5Using Web Standards in Your Web PagesOther great JavaScript sitesMicrosoft's JScript Web pageEarthWeb's JavaScript siteBuilder.comWebReferenceDoc JavaScriptPeter-Paul Koch's JavaScript siteScript RepositoriesJavaScript KitDynamic DriveJavaScript SourceUsenet NewsgroupsBooksJavaScript, The Definitive GuideDynamic HTML: The Definitive ReferenceJavaScript BibleJavaScript & DHTML Cookbook

Content preview from Javascript for the World Wide Web: Visual Quickstart Guide, Fifth Edition

Chapter 5. More Fun with Images

In Chapter 4, you mastered rollovers, the most common usage of JavaScript with images. But you can do much more than rollovers with JavaScript, and that's what you'll find in this chapter.

Images give Web pages life, and you can use JavaScript to automatically change images, create ad banners, build slideshows, display random images on a page, and even use a rollover in conjunction with an image map to give the user some interesting interface choices. Let's get started.

Table 5.1. Just Enough HTML—Images

TAG	ATTRIBUTE	MEANING
`map`		Contains the `area` elements defining the links and locations for image maps
	`name`	The identifier used by the `usemap` attribute of the `img` tag
`area`		Defines the elements of the image map
	`shape`	Defines ...