TEAM LinG JAVASCRIPT DEMYSTIFIED This page intentionally left blank JAVASCRIPT DEMYSTIFIED JIM KEOGH McGraw-Hill/Osborne New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto Copyright © 2005 by The McGraw-Hill Companies All rights reserved Manufactured in the United States of America Except as permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the publisher 0071471391 The material in this eBook also appears in the print version of this title: 0-07-226134-X All trademarks are trademarks of their respective owners Rather than put a trademark symbol after every occurrence of a trademarked name, we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark Where such designations appear in this book, they have been printed with initial caps McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate training programs For more information, please contact George Hoare, Special Sales, at george_hoare@mcgraw-hill.com or (212) 904-4069 TERMS OF USE This is a copyrighted work and The McGraw-Hill Companies, Inc (“McGraw-Hill”) and its licensors reserve all rights in and to the work Use of this work is subject to these terms Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw- Hill’s prior consent You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited Your right to use the work may be terminated if you fail to comply with these terms THE WORK IS PROVIDED “AS IS.” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE McGraw-Hill and its licensors not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or error free Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damages resulting therefrom McGraw-Hill has no responsibility for the content of any information accessed through the work Under no circumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result from the use of or inability to use the work, even if any of them has been advised of the possibility of such damages This limitation of liability shall apply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise DOI: 10.1036/007226134X This book is dedicated to Anne, Sandy, Joanne, Amber-Leigh Christine, and Graff, without whose help and support this book couldn’t have been written ABOUT THE AUTHOR Jim Keogh is on the faculty of Columbia University and Saint Peter’s College in Jersey City, New Jersey He developed the e-commerce track at Columbia University Keogh has spent decades developing applications for major Wall Street corporations and is the author of more than 60 books, including J2EE: The Complete Reference, Java Demystified, ASP.NET Demystified, Data Structures Demystified, XML Demystified, and others in the Demystified series For more information about this title, click here CONTENTS Introduction CHAPTER CHAPTER xv An Inside Look at JavaScript Answers to Common Questions About JavaScript JavaScript: A Limited-Featured Programming Language Getting Down to JavaScript Object Name Property Methods The Dot Syntax The Main Event Writing Your First JavaScript “Old Timers” Don’t Like JavaScript Spicing Up Your JavaScript Looking Ahead Quiz 4 5 6 10 11 12 12 Variables, Operators, and Expressions Values and Variables Values Variables 15 16 16 17 vii JavaScript Demystified viii Operators and Expressions Parts of an Expression Multiple Operations Types of Operators Looking Ahead Quiz 24 24 24 25 40 40 CHAPTER Condition Statements if Statement The if Statement in Action The if else Statement The if else if Statement Other Variations of the if Statement Nested if Statement Identifying a Browser switch case Statement Loop Statement The for Loop The for in Loop The while Loop The while Loop continue Looking Ahead Quiz 43 45 45 46 48 52 53 55 58 62 62 66 68 70 71 72 73 CHAPTER Arrays What Is an Array? Declaring an Array Initializing an Array Defining Array Elements How Many Elements Are in the Array? Looping the Array Adding an Array Element Sorting Array Elements 75 75 76 77 78 79 80 82 83 CONTENTS ix Making a New Array from an Existing Array Combining Array Elements into a String Changing Elements of the Array Looking Ahead Quiz 84 87 90 91 92 CHAPTER Functions What Is a Function? Defining a Function Writing a Function Definition Adding Arguments The Scope of Variables and Arguments Calling a Function Calling a Function Without an Argument Calling a Function with an Argument Calling a Function from HTML Functions Calling Another Function Returning Values from a Function Looking Ahead Quiz 95 96 96 98 99 100 101 102 103 104 108 109 113 114 CHAPTER Strings Why Manipulate a String? Joining Strings Finding Your Way Around a String Dividing Text Copying a Substring Converting Numbers and Strings Numbers to Strings Changing the Case of the String Strings and Unicode Looking Ahead Quiz 117 117 118 120 123 125 129 130 131 132 132 133 364 classes using with CSS, 312 using with DHTML, 316–318 clearTimeout( ) function, calling for status bar messages, 257 client-side application, definition of, close( ) method calling for window object, 241 using with browser windows, 187 code blocks contents of, 45 in if else if statements, 50 relationship to functions, 98 colon (:) in conditional operator, purpose of, 39 colorDepth property of screen object, description of, 186 cols TEXTAREA tag attribute, description of, 331 comma (,), using with function values, 101 comma-delimited strings, definition of, 123–124 comment characters ( tag, 263 crawling date and time with status bar messages, 264–267 status bar messages, 261–264 cross-browser marquee example of DHTML, 325 cross-platform compatibility, definition of, CSS (cascading style sheets), relationship to DHTML, 311–313 CurrentBanner index, assigning, 269–270 CurrentPicture variable, using with slideshows, 274 custom functions, definition of, 17 \cx special character, using with regular expressions, 203 INDEX D \d and \D special characters, using with regular expressions, 203, 205–206 data elements, relationship to strings, 118 data types, significance of, date format, converting strings from, 174–175 Date( ) object, using with status bar messages, 264 Date variables, using with cookies, 171 decremental operator ( ), example of, 28–29 default values, providing for prompt( ) function, 22 DeleteCookie( ) function, executing, 173–174 delimiters using with cookies, 167 using with strings, 125 DHTML (Dynamic HTML), overview of, 309–313 DHTML code for ad box, 326–327 for cross-browser marquee, 325 for daily iframe content, 323–325 for drop-in content box, 325–326 for generic drag, 313–316 for LCD clock, 316–318 for popup calendar, 325 for tabbed document view using iframe, 319–322 for watermark background image, 319 DHTML menus See also menus; pull-down menus chain select menus, 299–300 context menus, 303 floating menus, 299 folding tree menus, 301–302 highlighted menus, 301 Microsoft Outlook bar style menus, 302–303 popup menus, 300–301 scrollable menus, 303–304 365 side bar menus, 304 slide-in menus, 304–305 tab menus, 300 digital clock example of DHTML, 316–318 digits, matching with nondigits, 205–206 directories window style, description of, 181 disabled attribute description of, 331 setting for form elements, 159–160 Display( ) function, using with status bar messages, 256–257 DisplayBanners( ) function, defining, 269–270 DisplayPage( ) function, using with menus, 292 DisplayStatusBarMesg( ) function, calling, 253–254 division, order of operations for, 26 while loops, using, 70 document.images object, testing for compatibility with rollovers, 234 document.write( ) statement using for loop with, 64 writing HTML tags to browser windows with, 192–195 dollar sign ($), using with regular expressions, 203 dot (.), using with arrays, 78 dot syntax, using with objects, 6, dragging example of DHTML, 313–316 drop-in content box example of DHTML, 325–326 dynamic content, creating, 194–195 E Education( ) function, calling, 151 elements See form elements else if portions, adding to if statements, 52–53 else keywords, using in if else statements, 47 em, using with CSS, 312 366 e-mail addresses, concealing, 286–287 Email element example of, 140 setting to readonly, 161–162 empty functions, defining for functions, 284–285 EnableEmail( ) function, calling, 159 enctype form tag attribute, description of, 330 endless for loop, definition of, 65 equivalency operator (==) using, 37 using with strings, 131 error code, definition of, 111–113 escape character (\), using with cookies, 166 event handling, significance of, events, associating with form elements, 137 exec( ) method, returning matched characters with, 209–211 expireDate variable, declaring, 172 expressions, parts of, 24 See also mathematical expressions external JavaScript files, creating and using, 283–286 F \f special character, using with regular expressions, 203 features, incorporating into windows, 108 floating DHTML menus, features of, 299 focus changing for child windows, 226 giving to browser windows, 182–183 folding tree DHTML menus, features of, 301–302 for label tag attribute, description of, 331 for loops See also condition statements; statements executing open( ) method with, 192 using, 62–66 JavaScript Demystified form elements See also read-only form elements attributes of, 136 changing attributes of, 144–146 changing based on user-selected values, 146–148 disabling, 159–160 examples of, 139–140 manipulating before submitting forms, 153–155 and objects, 141–144 referencing, 142–144 form events descriptions of, 138–139 responding to, 137–141 form tag attributes, descriptions of, 330 forms See also labels accessing attributes of, 142–143 validating information on, 136 forward slash (/) including in regular expressions, 201 using with HTML tags, 194 forward slashes (//), using with comments, 44 frameborder attribute, setting, 221 frames calling functions in, 222 creating two child windows in, 218 overview of, 218–220 using invisible borders with, 220–221 framesets dividing into two child windows, 218–220 rows and columns in, 218 French braces ({}), using with code blocks, 45 fromCharCode( ) method, determining Unicode numbers with, 132 function definitions, writing, 98–99 function name, definition of, 97 INDEX functions See also intrinsic functions adding arguments to, 99–100 calling, 101 calling for child windows, 222–223 calling from HTML, 104–108 calling other functions with, 108–109 calling with arguments, 102–104 calling without arguments, 102 defining, 96–100 defining empty functions for, 284–285 definition of, 17, 96 passing values to, 99 returning values from, 109–113 G g special character, using with regular expressions, 203 generic drag example of DHTML, 313–316 getDate( ) method, resetting expiration dates for cookies with, 172–174 GetEmployees( ) function, calling, 295 getMonth( ) method, using with cookies, 171–172 getTime( ) method, using with cookies, 175 global regular expression object, properties of, 214 global variable, definition of, 100 GoodbyeMessage( ) function, calling, 106 GoodbyePopup( ) function, defining, 107 greater than (>) operator, using, 37–38 greater than or equal to (>=) operator, using, 38 H tags creating DisplayPage( ) function in, 292 defining ChangeContent( ) function in, 224 defining Crawl( ) function in, 263 defining drag class in, 313 defining functions in, 110 367 defining Highlight( ) function in, 144–145 defining ValidateForm( ) function in, 297 defining Window( ) function in, 188–189 placing function definitions in, 102 placing tags in, 7–8 height property of screen object, description of, 186 height window style, description of, 181 “Hello, world!” script See also scripts adding alert box to, 11 writing, 7–9 hidden elements, significance of, 154–155 Highlight( ) function, defining in tag, 144–145 highlighted DHTML menus, features of, 301–302 HTML (HyperText Markup Language) calling functions from, 104–108 including comments in, HTML form elements See form elements HTML tags, writing to new browser windows, 193–195 I i special character, using with regular expressions, 203 id selectors using with CSS, 312 using with DHTML, 316–318 if statements See also nested if statements adding else if portions to, 52–53 using, 44–46 if else if statements, using, 48–51 if else statements using, 46–48 using with ValidateLogon( ) functions, 111 JavaScript Demystified 368 iframes, using with DHTML, 320–325 ignoreCase regular expression object, properties of, 214 images changing on product page, 234–236 dragging with DHTML, 314–315 loading into arrays, 243–244 tags naming for text rollovers, 237 trapping onclick events with, 155–156 using with banner advertisements, 268 IncreaseSalary( ) function definition modifying, 102–104 writing, 98–99 incremental operator (++), example of, 27, 29 indexes, determining for characters, 121–122 indexOf( ) method passing @ character to, 129 relationship to form events, 140 initializer variables using with for loops, 63 using parentheses with, 65 input regular expression object, properties of, 214 input tag attributes, descriptions of, 330 instances, relationship to arrays, 77 Internet Explorer, enabling JavaScript in, intrinsic functions, using, 155–156 See also functions invisible borders, using with frames, 220–221 J JavaScript capabilities of, 3–4 enabling in Internet Explorer and Netscape Navigator, hiding, 283–286 hiding from older browsers, vs Java, 2–3 as scripting and programming language, stopping temporarily for banner advertisements, 270 vs VBScript and JScript, join( ) method, using with arrays, 88–89 js file extension, using with external files, 283, 285–286 K keywords, relationship to variables, 19 L label option tag attribute, description of, 331 label tag attribute, description of, 331 labels, changing dynamically, 156–158 See also forms lastIndex regular expression object, properties of, 214 lastMatch property, using with regular expressions, 213–214 regular expression object, properties of, 214 lastParen regular expression object, properties of, 214 Launch( ) function, calling with Windows Gone Wild button, 192 LCD clock example of DHTML, 316–318 left property, setting for browser windows, 184–185 leftContext regular expression object, properties of, 214 length value of string objects, using with characters, 123 less than operator (