Beginning JavaScript With DOM Scripting And Ajax - From Novice To Professional (2006)
.pdf476■I N D E X
form property, 275, 277 form validation techniques
CSS classes method, 366
custom attribute method, 366–367 designating mandatory fields, 364 failures of these methods, 367 hidden field method, 364–365 indicator element method, 365–366 overview, 364
sharing validation rules, 367–369 formmail.pl script, 364
forms, 297 collection, 275–277
custom elements, 297 elements
buttons, 284–286
check boxes, 279–281
globally supported properties, 277
HTML attributes not contained in elements collection, 276
overview, 275–276 radio buttons, 281–284 select boxes, 286–291
text fields, text areas, hidden and password fields, 278–279
using blur( ) and focus( ), 278 interactive, 291–297
methods, 274–275 overview, 272–274 properties, 274
forms object, 274
forward( ) method, 230, 246
FOUC (flash of unstyled content), 173 Friedl, Jeffrey, 363
function keyword, 77, 83 functions, 11, 76–80
calling, 11 creating own, 11
functionality, reusable code block wrappers, 11
sorting and reuse of, 80
variables and function scope, 80–81
■G
GBrowserIsCompatible( ) function, 429 GET method, 305, 324
GET parameter, 319
getAttribute( ) method, 108, 126, 249, 367 getEl( ) method, 443
getElementById( ) method, 96, 98–99, 103, 184, 249, 251, 274, 448, 451
getElementById object, 68 getElementsByClassName( ) method, 96
getElementsByTagName( ) method, 96–99, 184, 274, 384, 448, 451
getTimezoneOffset( ) method, 37 GEvent.addListener( ) method, 432 GLatLng( ) method, 430
global reset, 209 global variable, 80
GMap2( ) method, 430, 435 GMapTypeControl( ) method, 431 GMarker( ) method, 432, 436 go(n) method, 246
Good, Nathan A., 363
Google AdSense, 416
Google Maps, 427–432, 434–437 Google Suggest, 381 GOverviewMapControl( ) method, 431 GScaleControl( ) method, 431 GSmallMapControl( ) method, 430 GUnload( ) function, 429
■H
handleFailure( ) method, 447, 449 handleSuccess( ) method, 447–448 hasChildNodes( ) method, 100, 120 hash property, 245
HEAD element, 85 <head> tag, 85 height attribute, 186 height property, 185
hidden fields, 278–279, 364–365 hide( ) method, 422, 425 HIJAX, 323
history object, 246 home( ) method, 230 host property, 245 hostname property, 245 hover method, 165
:hover pseudo-class, 148–152
href attribute, 110, 137, 235, 246, 249–250, 252–253, 257, 262, 269–270, 320, 330, 335, 338, 393, 399, 404, 410, 413–414, 425, 447
href property, 245 hspace property, 185 HTML, 87
accessing document via DOM, 96–99 anatomy of HTML document, 85–89 changing attributes of elements, 107–108 children, 99–102
creating, removing, and replacing elements
avoiding NOSCRIPT, 113–115 DOM features, 116–117 DOMhelp, 118–122 overview, 109–113
shortening scripts via innerHTML, 115–116
overview, 85 parents, 99–103
providing feedback in web pages, 89–95 siblings, 99–100, 103–107
turning XML into, 309–314 html( ) method, 422
HTML 4.01 STRICT, 87
■I N D E X 477
HTML element, 85, 428
.html file extension, 9
■I
id attribute, 89, 101, 246, 282
if( ) method, 456 |
|
|
if condition, 67, 79, 172 |
|
|
If keyword, 451 |
|
|
if statement, 9, 14, 49, 56 |
|
|
IFRAME elements, 237 |
|
|
images |
|
|
image scripting basics, 184–186 |
|
|
overview, 183 |
|
|
preloading, 186 |
Find |
|
rollover effects |
||
dynamic slide shows, 207–211 |
it |
|
atfaster |
||
overview, 187 |
||
embedded slide shows, 197–207 |
com.apress.http://superindex |
|
on parent elements, 192–196 |
||
|
||
slide shows, 196 |
|
|
using several images, 187–191 |
|
|
using single image, 191–192 |
|
|
images object, 67 |
|
|
IMG element, 409, 414 |
|
|
index numbers, 40, 274 |
|
|
index property, 194 |
|
|
indexKey, 56 |
|
|
indexOf( ) method, 32, 346, 348, 350 |
|
|
innerHeight property, 213 |
|
|
innerHTML, 261 |
|
|
innerHTML method, 308, 313–314 |
|
|
innerHTML property, 115–116, 394, 414, 422 |
|
|
innerWidth property, 213 |
|
|
in-page navigation, 246–255 |
|
|
input element, 54, 295–297 |
|
|
<input type="image">, 285 |
|
|
insertBefore( ) method, 267–268 |
|
|
instant validation feedback, 379–380 |
|
|
interactive forms, 291–297 |
|
478■I N D E X
IrfanView, 388 isCallInProgress( ) method, 445 isNaN( ) method, 49, 352 isNumber( ) method, 352 item( ) method, 100
■J
JavaScript object property syntax, 126 JavaScript overview, 1–4
definition, 4 functions, 11 objects, 12–13
problems and merits of, 5–6
reasons for using despite reliability problems, 6–7
running JavaScript, 9 simple example, 13–15
in web page and essential syntax code execution, 9–11 functions, 11
JavaScript syntax, 8–9 overview, 7
what it is, 4
JavaScript Triggers article, 366 join( ) method, 43, 288 joining two arrays, 43
jQuery, 419–427
.js file, 64, 80 JSLint, 470
JSON, replacing XML with, 314–316
JSUNIT, 470
■K
Keith, Jeremy, 323 Keyboard access, 243
keyboard entries, reading and filtering, 174–179
keyboard event handling, 179
keyCode/data/charCode attribute, event object, 157
keydown handler, 175
keypress handler, 175 Koch, Peter-Paul, 160, 366
■L
label element, 108 lang attribute, 85 Langridge, Stuart, 62
lastIndexOf( ) method, 32, 346, 348, 350 layer ads, 231–238
Learning Venkman article, 470
Lemon, Gez, 247
length property, 31, 98, 203, 246, 274, 286, 290 line break (\n), 101
line-wrap option, 74 links, 110
literal values, 23 LiveScript, 4 load event, 156
load method, 404, 412–413 local variables, 23 location property, 245 logical operators, 45, 48 loops, 17
breaking out of, 52 continuing, 58–59 for loop, 54–56 overview, 54 while loop, 56–58
lowsrc property, 185 Ludwin, Daniel, 139
■M
Macromedia Dreamweaver, 188 mandatory field, 364–365 map_overview, 432 mapContainer, 435
maps, adding to sites with Google Maps, 427–432, 434–437
mashups, 437
Mastering Regular Expressions book, 363
match( ) method, 129, 347, 357 Math object, 30, 357
generating random number, 38 overview, 37
rounding numbers, 37–38 META element, 85
methods
of forms, 274–275
of String object, 32–34 of window object
animation with window intervals and timeouts, 222–230
changing position and dimensions of window, 221
navigation methods of browser window, 230–238
opening new windows, 215–221 overview, 215
user feedback methods, 215 microformat, 309
Microsoft Internet Explorer (MSIE), 5, 64,
463–464
Microsoft Script Debugger, 464 misspellings, 451
moofx, 341 mouseout event, 163
mouseover event, 159, 163, 243 mouseover handler, 252–253 moveBy(x,y) window, 221 multicolumn layout, 145 multiple attribute, 287
■N
\n (line break), 101
name attribute, 187, 246, 274, 282, 284 name property, 185, 213, 274–275, 277 naming conventions, 71–72 navigation
browser navigation, 245–246 in-page navigation, 246–255 overview, 241–244
■I N D E X 479
pagination, 263–271 |
|
|
site navigation, 255–263 |
|
|
navigator data, 416 |
|
|
navigator object, 65 |
|
|
nested loops, 173 |
|
|
Netscape Navigator (NN) browser, 4 |
|
|
new keyword, 32 |
|
|
nextSibling node, 118, 120 |
|
|
Nicholls, Stu, 152 |
|
|
node parameter, 120 |
|
|
node tree, 173 |
|
|
nodeName object, 100, 102, 277, 336, |
|
|
393, 395 |
Find |
|
node.nextSibling node, 117 |
||
|
||
node.nodeName attribute, 117 |
it |
|
|
||
node.nodeType attribute, 117 |
faster |
|
node.nodeValue attribute, 117 |
||
node.parentNode node, 117 |
at |
|
com.apress.http://superindex |
||
node.previousSibling node, 117 |
||
|
||
nodes, 117 |
|
|
node.setAttribute('attribute', 'value') |
|
|
attribute, 117 |
|
|
nodeType node, 118 |
|
|
nodeType object, 100 |
|
|
nodeValue object, 100 |
|
|
Nolan, Daniel, 188 |
|
|
NOSCRIPT element, 113–115 |
|
|
<noscript> tag, 7, 113 |
|
|
Null data type, 18 |
|
|
number, 18 |
|
|
Number( ) method, 28, 36, 352 |
|
|
Number data type, 18, 23 |
|
|
numbers |
|
|
random, generating, 38 |
|
|
rounding, 37–38 |
|
|
numeric validation methods, 352–357 |
|
■O
obfuscating, 345 Object data type, 30
480■I N D E X
object detection, vs. browser dependence, 65–68
object literal, 82 <object> tag, 153
object-oriented programming (OOP), 3 objects
Date object overview, 34 using, 35–37
Math object
generating random number, 38 overview, 37
rounding numbers, 37–38 String object
creating, 31–32 methods of, 32–34 overview, 30
obj.removeChild(oldNode) method, 109 offsetHeight attribute, 147
offsetHeight property, 235, 441 onAvailable( ) method, 444 onchange event handlers, 70 onclick handler, 447 onCloseFn property, 434 onComplete event, 443
onComplete.subscribe( ) method, 443 one-size-fits-all validation myth, 345–346 onevent properties, 157
onevent syntax, 169 onload event, 97, 173
onload event handler, window object, 69 onmouseout event handler, 149 onmouseover event handler, 149 onreadystatechange event, 306, 321 openInfoWindow( ) method, 433
openInfoWindowHtml( ) method, 434, 436–437
opening new windows, 215–221
Opera, 66, 217, 466 operators, 21–23 optgroup, 295
Option constructor, 289 options arrays, 323, 374 options object, 286 options property, 276 outerHeight property, 213 outerWidth property, 213
■P
P element, 86 <p></p> tags, 3
pageXOffset property, 213 pageYOffset property, 213 pageYOffset window object, 413 pagination, 263–271
Panel( ) method, 448 panTo( ) method, 435, 437 parameters, 11, 77 parentheses, 22
grouping, 361–362
incorrect number of, 454–456 parentNode, 102, 131, 165, 267–268, 336 parents, 100–103
parseFloat( ) method, 28, 352 parseInt( ) function, 28, 37, 352 password fields, 278–279 password parameters, 305 pathname property, 245 period character (.), 358
php file extension, 338 PHP script, 405, 408 phpThumb( ) class, 388 Picasa, 388, 396 Podcast Networks, 417
pop-up windows, 444–449 port property, 245
POST method, 305, 324, 328
PRE element, 420, 422, 425 preloading images, 186
presentation layer, changing, 123–131. See also Cascading Style Sheets
preventDefault( ) method, 161, 164, 168, 404 previousSibling node, 120
previousSibling property, 103 primitive data types, 18 print( ) method, 230 problems with JavaScript, 5–6
progressive enhancement, 68–69 prompt( ) method, 24–25, 33, 90–95, 215 properties of forms, 274
properties string, 215 protocol property, 245 prototype, 340
proxy servers, 212 push buttons, 284
■Q
quantifiers, 359 quotation marks, 18
■R
\r escape sequence, 20 radio buttons, 281–284
random( ) method, Math object, 38 random number, generating, 38 readability/functionality, 25 reading keyboard entries, 174–179 ready( ) method, 424
readyState property, 306–307, 321 readystatechange event, 306 RegEx Advice, 363
RegExp constructor, 361 Regular Expression Library, 363 regular expressions
constraining scope, 358–359 methods using, 361 overview, 357
■I N D E X 481
parenthesis grouping, 361–362 |
|
|
resources, 363 |
|
|
restricting number of characters with |
|
|
quantifiers, 359–360 |
|
|
syntax and attributes, 357–358 |
|
|
whitespace, 360–361 |
|
|
wildcard searches, 358–359 |
|
|
word boundaries, 360–361 |
|
|
rel attribute, 137 |
|
|
reload( )method, 245 |
|
|
removeAttribute( ) method, 128 |
|
|
removeChild( ) method, 236, 410 |
|
|
render( ) method, 448 |
Find |
|
replace( ) method, 129, 204, 245–246, 249, 361 |
||
|
||
reset( ) method, 274, 278–279 |
it |
|
responseText method, 308, 313, 330 |
||
faster |
||
reset buttons, 284 |
|
|
responseXML method, 308–309, 319 |
at |
|
com.apress.http://superindex |
||
embedded slide shows, 197–207 |
||
REST APIs, 417–419 |
|
|
return keyword, 77 |
|
|
reuse of functions, 80 |
|
|
reverse( ) method, 45 |
|
|
Rico, 341 |
|
|
rollover effects |
|
|
dynamic slide shows, 207–211 |
|
|
overview, 187 |
|
|
on parent elements, 192–196 |
|
|
slide shows, 196 |
|
|
using several images, 187–191 |
|
|
using single image, 191–192 |
|
|
round( ) function, Math object, 37 |
|
|
rounding numbers, 37–38 |
|
|
rows attribute, 276 |
|
|
RSS feeds, 417–418 |
|
|
■S |
|
|
S@rdalya, 341 |
|
|
Safari browser, 168, 404, 464–465 |
|
|
Sarissa, 341 |
|
482■I N D E X
Scott, Leland, 340 screen object, 13, 15 screen readers, 69 script block, 9
SCRIPT element, 113, 429, 438, 462 <script> tags, 7, 9, 64, 438 script.aculo.us, 340
scrollbars, 216
search( ) method, 347, 357 search property, 245 select( ) method, 276, 279
select boxes, 242, 286–291, 323–331 SELECT element, 276, 297, 323, 366 selected attribute, 273
selected property, 286, 288 selectedIndex property, 286–287, 374 select-one type, 374
semicolon syntax, JavaScript, 8
send( ) method, 307, 309, 329, 365, 370, 375–377
sequential uncommenting, 462 server-side includes (SSIs), 230
server-side scripts, using to reach third-party content, 316–320
setAttribute( ) method, 108, 126 setBody( ) method, 449 setCenter( ) method, 430, 436 setDebug( ) method, 121, 458 setHeader( ) method, 449
setInterval( ) method, 222, 228, 239 setTimeout( ) method, 222, 239 setZoom( ) method, 434, 437 Sharing Validation Rules section, 346
short code via ternary operator, 79–80 shortcut notation, 82
shortening scripts via innerHTML, 115–116 siblings, 103–107
site navigation, 255–263 slice( ) method, 42, 346
slide shows dynamic, 207–211
embedded, 197–207 slideDown( ) method, 422 slideUp( ) method, 422 Sluis, Bobby van der, 153 sorting array, 44–45 Sowden, Paul, 139
SPAN element, 202, 257, 267, 365, 367, 378–379, 382–384, 409
split( ) method, 44
src attribute, 64, 210, 235, 237, 414 src property, 185, 187–188, 190 SSIs (server-side includes), 230 static thumbnail galleries, 388–389 status property, 213, 307, 309 stop( ) method, 230
stopBubble( ) method, 168 stopDefault( ) method, 168 stopPropagation( ) method, 164, 168 str_replace( ) method, 409
String( ) constructor, 32 string data type
escape sequences, 19–20 overview, 18–19
String object, 47, 204, 245 creating, 31–32 methods of, 32–34 overview, 30
string parameter, 394 string type, 394
string validation methods, 346–352 string.match(pattern), 361 String.replace( ) method, 308, 313, 361
STRONG element, 192–193, 257, 259, 262, 332–334, 336, 338
structure layer, 63 Stubblebine, Tony, 363 STYLE and LINK element, 130
style attribute, 123 style attributes, 127 style collection, 125 style switchers, 136 stylesheet attribute, 138
styling dynamic pages, 131–139 submit( ) method, 274
Submit button, 91, 110, 113, 178, 284, 370 submit handler, 243, 379
substr( ) method, 350
substring( ) method, 32, 42, 347–348, 350 subtraction operator, 27
switch statement, 52–54, 79 switch/case block, 173 switch/case line, 357
sync parameter, 305 syntax error, 19
■T
\t escape sequence, 20 table node, 269
table value, 269 <table> parameter, 314 tags, 86
target attribute, 157, 217, 238 target property, 274
TBODY element, 266, 312 ternary operator, 79–80 test( ) method, 94, 357 text areas, 278–279
text browser users, 212 text fields, 278–279 text option, 287
text property, 286
TEXTAREA element, 279, 295, 297, 366, 373 text/javascript header, 369
Thatcher, Jim, 69
third-party content, using server-side scripts to reach, 316–320
■I N D E X 483
third-party JavaScript |
|
|
adding maps to sites with Google Maps, |
|
|
427–432, 434–437 |
|
|
code libraries, 419–427 |
|
|
examples of REST APIs, 418–419 |
|
|
jQuery, 419–427 |
|
|
overview, 415–416 |
|
|
RSS feeds and REST APIs, 417–418 |
|
|
Yahoo User Interface (YUI) |
|
|
bouncy headlines using, 439–444 |
|
|
replacing pop-up windows using YUI |
|
|
connection manager and container |
|
|
components, 444–449 |
|
|
this keyword, 138, 149, 155, 443 |
Find |
|
thumbnail galleries |
||
creating image badge from folder, 406–414 |
it |
|
at faster |
||
displaying captions, 396–401 |
||
dynamic, 401–405 |
||
faking, 389–396 |
com.apress.http://superindex |
|
|
||
overview, 387–388 |
|
|
static, 388–389 |
|
|
title attribute, 138, 210, 396, 399 |
|
|
TITLE element, 85 |
|
|
toDateString( ) method, 37 |
|
|
Tofte, Svend, 470 |
|
|
toggle( ) method, 422, 441 |
|
|
toLowerCase( ) method, 47, 158 |
|
|
toolbar property, 213 |
|
|
toString( ) method, 37 |
|
|
toUpperCase( ) method, String object, 47 |
|
|
true keyword, 281, 284 |
|
|
try statement, 304, 460 |
|
|
try...catch construct, 459–462 |
|
|
type attribute, event object, 157 |
|
|
type element, 280 |
|
|
type property, 275, 277 |
|
|
typeof( ) operator, 27, 31 |
|
484 ■I N D E X
■U
UAs (user agents), 5, 62, 212 \uDDDD escape sequence, 20
UFO (Unobtrusive Flash Object), 153
UL element, 99, 101, 200, 257, 259–261, 320 uncommenting, 462
Undefined data type, 18 undefined variables, 452–454
Unobtrusive Flash Object (UFO), 153 unobtrusive JavaScript, 62, 153 Upcoming.org, 418
url parameter, 305 useCapture Boolean value, 156 user agents (UAs), 5, 62, 212 user feedback mechanism, 90 user feedback methods, 215
■V
validate( ) function, 82 validation techniques
client-side validation, pros and cons of, 343–344
feedback
highlighting erroneous fields individually, 376–379
instant validation feedback, 379–380 overview, 369
replacing main form with clickable error message, 374–376
showing list of erroneous fields, 369–374 form validation techniques
CSS classes method, 366
custom attribute method, 366–367 designating mandatory fields, 364 failures of these methods, 367 hidden field method, 364–365 indicator element method, 365–366 overview, 364
sharing validation rules, 367–369 numeric validation methods, 352–357
one-size-fits-all validation myth, 345–346 overview, 343
protecting content, 344–345 regular expressions
constraining scope, 358–359
methods using regular expressions, 361 overview, 357
power of parenthesis grouping, 361–362 resources, 363
restricting number of characters with quantifiers, 359–360
syntax and attributes, 357–358 whitespace, 360–361 wildcard searches, 358–359 word boundaries, 360–361
string validation methods, 346–352 validationRules object, 369, 373–374 value attribute, 373
value option, 287
value property, 275, 277–278, 286 valueOf( ) method, 48
var keyword, 24, 80, 201, 452 variables, 23–26
assigning instead of testing value of, 458 declaring, 24
and function scope, 80–81 initializing, 24
undefined, trying to access, 452–454 Venkman, 470
visibility property, 130 vspace property, 185
■W
WaSP DOM Scripting Task Force, 63 Web Developer extension, Firefox, 469 while loop, 56–59, 94, 102 whitespace, 120, 360–361
width attribute, 186 width property, 185
wildcard searches, 358–359
Willison, Simon, 155 window methods, 239
window object, 25, 90, 97, 165, 213, 215, 238, 245, 413
window parameters, 218 window property, 245 window.back( ) method, 245 window.history object, 246 window.history property, 245 window.location object, 244–245
window.location.href property, 244–245 window.open( ) method, 217, 219 window.opener property, 220 window.opener.close( ) method, 221 windows
animation with window intervals and timeouts, 222–230
changing position and dimensions of, 221 navigation methods of browser window
layer ads, 231–238 overview, 230–231
opening new windows, 215–221 overview, 212–213
properties, 213–214
user feedback methods, 215 window.timeout( ) method, 320 word boundaries, 360–361 Wright, Matt, 364
■I N D E X 485
■X
XAMPP installs, 299
XHR, 310, 316, 319–323, 334, 382, 385, 396, 401–403
XHR object, 299, 302 XHTML, 7, 87
XML
replacing with JSON, 314–316 turning into HTML, 309–314
XMLHttpRequest object, 302, 304–305, 340 \xNN escape sequence, 20
XSS (Cross-Site Scripting), 213
■Y
Yahoo User Interface (YUI) |
itFind |
|
|
||
bouncy headlines using, 439–444 |
faster |
|
replacing pop-up windows, 444–449 |
||
|
||
YAHOO.util.Anim( ) constructor, 443 |
at |
|
|
||
YAHOO.util.Connect.abort( ) method, 445 |
com.apress.http://superindex |
|
|
||
YAHOO.util.Connect.asyncRequest( ) |
|
|
method, 444 |
|
|
YAHOO.util.Connect.isCallInProgress( ) |
|
|
method, 445 |
|
|
YAHOO.widget.Panel( ) constructor |
|
|
method, 447 |
|
|
YUI. See Yahoo User Interface |
|
■Z
zero-based array, 42