Professional JavaScript For Web Developers

More documents

Recommendations

Info

Chapter 16 Hidden Frames A trick that developers have used for a long time is the hidden frame method. The basic idea is to create a frame that is 0 pixels high (thus, it’s hidden) that can be used by JavaScript to communicate with the server. This type of communication requires two parts: a JavaScript object to handle the communication on the client side and a special page that handles the communication on the server side. As a very simple example, start out with a frameset: Hidden Frame Example This frameset is made up of two rows, the second of which has a height of 0 (in Netscape 4.x, frames can’t be 0 pixels high, so the frame is still visible). The first frame is where the user is interacting; the second is the hidden frame used to communicate with the server. By default, the second frame is loaded with a blank HTML page. In the first frame, two functions are defined: one to send the request to the server and one to handle the response. The function that sends the request, called getServerInfo(), just assigns a URL to the hidden frame: function getServerInfo() { parent.frames[“hiddenFrame”].location.href = “HiddenFrameExampleCom.htm”’ } This function is capable, of course, of attaching extra parameters to the request’s query string. The second function, called handleResponse(), is called when the hidden frame returns from the server. This function can do anything you want to deal with the data that is returned, but for this example, the data is just displayed in an alert: function handleResponse(sResponseText) { alert(“The server returned: “ + sResponseText); } The page that handles the hidden requests must output a normal HTML page with a element enclosing the returned data. Using makes it easy to deal with multiple lines of data, which is difficult to do when outputting the data directly into JavaScript. This page must also call the handleResponse() function in the main frame with the data that was returned: Hidden Frame Example (Response) 490
Client-Server Communication window.onload = function () { parent.frames[0].handleResponse( document.forms[“formResponse”].result.value); }; This is some data coming from the server. The important part about this window is the onload event handler, which calls the handleResponse() function from the first frame, passing in the value contained in the element. It’s very important that the handleResponse() function be called no matter what, even if there is an error, to prevent the JavaScript in the main frame from hanging while waiting for a response. The previous code shows data already inserted into the for illustrative purposes; in reality, this data would be output by some server-side logic. When the getServerInfo() function is called in the main frame, the request is sent through the hidden frame, and the data is passed back through the handleResponse() function and is displayed in an alert. This is obviously a very simplistic example, but it illustrates the basic idea. The added bonus is that this form of client-server communication works in any browser that supports framesets and JavaScript (including older browsers like Netscape Navigator 4.x). Using iframes The hidden frame method evolved with the introduction of iframes into HTML. An iframe is a frame that can be inserted anywhere in an HTML document, completely disconnected from any frameset. With this innovation, developers changed the hidden frame method to create hidden iframes on the fly for the purpose of communicating with the server. To make use of iframes, you must make some changes to the getServerInfo() function: var oHiddenFrame = null; function getServerInfo() { if (oHiddenFrame == null) { oHiddenFrame = document.createElement(“iframe”); oHiddenFrame.name = “hiddenFrame”; oHiddenFrame.id = “hiddenFrame”; oHiddenFrame.style.height = “0px”; oHiddenFrame.style.width = “0px”; oHiddenFrame.style.position = “absolute”; oHiddenFrame.style.visibility = “hidden”; document.body.appendChild(oHiddenFrame); } 491
Page 3:
Professional JavaScript for Web De
Page 6 and 7:
Professional JavaScript for Web De
Page 8 and 9:
Vice President and Executive Group
Page 11 and 12:
Contents Acknowledgments Introducti
Page 13 and 14:
Contents Scope 88 Public, protected
Page 15 and 16:
Contents Simple Patterns 197 Metach
Page 17 and 18:
Contents Chapter 10: Advanced DOM T
Page 19 and 20:
Contents Chapter 14: Error Handling
Page 21 and 22:
Contents Chapter 18: Interacting wi
Page 23 and 24:
Introduction Although once supporte
Page 25 and 26:
Introduction 2. ECMAScript Basics T
Page 27 and 28:
Conventions Introduction To help yo
Page 29 and 30:
What Is JavaScript? When JavaScript
Page 31 and 32:
JavaScript Implementations What Is
Page 33 and 34:
ECMAScript support in Web browsers
Page 35 and 36:
What Is JavaScript? By creating a t
Page 37:
The Browser Object Model (BOM) What
Page 40 and 41:
Chapter 2 ❑ End-of-line semicolon
Page 42 and 43:
Chapter 2 ❑ ❑ Pascal Notation
Page 44 and 45:
Chapter 2 When a value is assigned
Page 46 and 47:
Chapter 2 alert(typeof oTemp); aler
Page 48 and 49:
Chapter 2 A few special values are
Page 50 and 51:
Chapter 2 Converting to a string Th
Page 52 and 53:
Chapter 2 The parseFloat() method w
Page 54 and 55:
Chapter 2 This syntax is similar to
Page 56 and 57:
Chapter 2 The toFixed() method retu
Page 58 and 59:
Chapter 2 Next up is the concat() m
Page 60 and 61:
Chapter 2 alert(oStringObject.subst
Page 62 and 63:
Chapter 2 If you place this line of
Page 64 and 65:
Chapter 2 The postfix increment and
Page 66 and 67:
Chapter 2 1 0 0 1 0 (2 4 x1) + (2 3
Page 68 and 69:
Chapter 2 var iResult = 25 & 3; ale
Page 70 and 71:
Chapter 2 Note that left shift pres
Page 72 and 73:
Chapter 2 In this example, a Boolea
Page 74 and 75:
Chapter 2 Just like logical AND, if
Page 76 and 77:
Chapter 2 Just like the multiplicat
Page 78 and 79:
Chapter 2 var bResult = “23” <
Page 80 and 81:
Chapter 2 operator to compare the s
Page 82 and 83:
Chapter 2 if (i > 25) alert(“Grea
Page 84 and 85:
Chapter 2 Labeled statements It is
Page 86 and 87:
Chapter 2 The with statement The wi
Page 88 and 89:
Chapter 2 For example: function say
Page 90 and 91:
Chapter 2 The arguments object With
Page 92 and 93:
Chapter 2 var doAdd = new Function(
Page 94 and 95:
Chapter 2 } return iNum1 + iNum2 +
Page 96 and 97:
Chapter 3 The object definition is
Page 98 and 99:
Chapter 3 Types of Objects In ECMAS
Page 100 and 101:
Chapter 3 The Array object override
Page 102 and 103:
Chapter 3 Push onto the stack top b
Page 104 and 105:
Chapter 3 They wait their turns, ev
Page 106 and 107:
Chapter 3 This line creates a new D
Page 108 and 109:
Chapter 3 Method setFullYear(year)
Page 110 and 111:
Chapter 3 This code outputs two val
Page 112 and 113:
Chapter 3 Property Error EvalError
Page 114 and 115:
Chapter 3 Here, Math.E is first rai
Page 116 and 117:
Chapter 3 Scope Programmers in any
Page 118 and 119:
Chapter 3 In this code, the functio
Page 120 and 121:
Chapter 3 Some got around this prob
Page 122 and 123:
Chapter 3 Car.prototype.color = “
Page 124 and 125:
Chapter 3 } } Car.prototype.showCol
Page 126 and 127:
Chapter 3 StringBuffer.prototype.ap
Page 128 and 129:
Chapter 3 } } } return -1; This met
Page 130 and 131:
Chapter 3 Summary ECMAScript provid
Page 132 and 133:
Chapter 4 Shape Ellipse Polygon Cir
Page 134 and 135:
Chapter 4 All new properties and me
Page 136 and 137:
Chapter 4 The apply() method The ap
Page 138 and 139:
Chapter 4 ClassB.prototype.name =
Page 140 and 141:
Chapter 4 In ECMAScript, the class
Page 142 and 143:
Chapter 4 } Rectangle.prototype = n
Page 144 and 145:
Chapter 4 the limit in an effort to
Page 146 and 147:
Chapter 4 Dynamic prototyping suppo
Page 148 and 149:
Chapter 4 } } ClassZ.prototype.sayM
Page 150 and 151:
Chapter 4 In this case, the supercl
Page 152 and 153:
Chapter 4 Rectangle.prototype.getAr
Page 154 and 155:
Chapter 5 Although originally creat
Page 156 and 157:
Chapter 5 ❑ ❑ Code Maintenance
Page 158 and 159:
Chapter 5 on the following line. Ne
Page 160 and 161:
Chapter 5 alert("A is greater
Page 162 and 163:
Chapter 5 Figure 5-2 The next tag i
Page 164 and 165:
Chapter 5 The Browser Object Model
Page 166 and 167:
Chapter 5 Frameset Example
Page 168 and 169:
Chapter 5 ❑ resizeTo(w, h) — re
Page 170 and 171:
Chapter 5 As mentioned previously,
Page 172 and 173:
Chapter 5 To determine if the user
Page 174 and 175:
Chapter 5 Books Be careful not to o
Page 176 and 177:
Chapter 5 Here, the code uses linke
Page 178 and 179:
Chapter 5 you want to track where u
Page 180 and 181:
Chapter 5 This code writes a tag t
Page 182 and 183:
Chapter 5 The method assign() accom
Page 184 and 185:
Chapter 5 Property/Method Descripti
Page 187 and 188:
DOM Basics The Document Object Mode
Page 189 and 190:
DOM Basics Today XML is one of the
Page 191 and 192:
DOM Basics The Document Object Mode
Page 193 and 194:
DOM Basics The node is considered
Page 195 and 196:
DOM Basics The W3C has also publish
Page 197 and 198:
DOM Basics Checking the node type Y
Page 199 and 200:
Accessing specific nodes You alread
Page 201 and 202:
DOM Basics To access the element w
Page 203 and 204:
DOM Basics You’re not done quite
Page 205 and 206:
DOM Basics This sample page replace
Page 207 and 208:
DOM Basics To get and set the src a
Page 209 and 210:
DOM Basics ❑ ❑ ❑ deleteCaptio
Page 211 and 212:
DOM Basics Document Element html El
Page 213 and 214:
DOM Basics var node3 = iterator.pre
Page 215 and 216:
DOM Basics Hello World! List i
Page 217 and 218:
DOM Basics var oOutput = document.g
Page 219:
DOM Basics necessarily mean that th
Page 222 and 223:
Chapter 7 This regular expression m
Page 224 and 225:
Chapter 7 var sToChange = “The sk
Page 226 and 227:
Chapter 7 This code matches the let
Page 228 and 229:
Chapter 7 Note that [a-z] matches o
Page 230 and 231:
Chapter 7 You can read this regular
Page 232 and 233:
Chapter 7 For the second regular ex
Page 234 and 235:
Chapter 7 Expressions to match lead
Page 236 and 237:
Chapter 7 In this, reRedOrBlack mat
Page 238 and 239:
Chapter 7 Lookaheads Sometimes you
Page 240 and 241:
Chapter 7 It is, in fact, easier to
Page 242 and 243:
Chapter 7 reB.exec(sToMatch); alert
Page 244 and 245:
Chapter 7 Common Patterns On the We
Page 246 and 247:
Chapter 7 The isValidDate() functio
Page 248 and 249:
Chapter 7 } } } bIsOdd = !bIsOdd; A
Page 250 and 251:
Chapter 7 Validating e-mail address
Page 253 and 254:
Browser and Operating System Detect
Page 255 and 256:
Page 257 and 258:
Page 259 and 260:
Page 261 and 262:
The important things to note in thi
Page 263 and 264:
Page 265 and 266:
Detecting Opera The simplest and be
Page 267 and 268:
Page 269 and 270:
Page 271 and 272:
Depending on which browsers you pla
Page 273 and 274:
Page 275 and 276:
Page 277 and 278:
Page 279 and 280:
Page 281 and 282:
Page 283 and 284:
Page 285 and 286:
Page 287 and 288:
Page 289 and 290:
All about Events JavaScript’s int
Page 291 and 292:
All about Events document 3 bubblin
Page 293 and 294:
All about Events Some have also cal
Page 295 and 296:
Using this method of assignment, th
Page 297 and 298:
All about Events var oDiv = documen
Page 299 and 300:
Properties/methods Internet Explore
Page 301 and 302:
All about Events Property/Method Ty
Page 303 and 304:
Detecting Shift, Alt, Ctrl To detec
Page 305 and 306:
Getting the target The object at th
Page 307 and 308:
All about Events When the button is
Page 309 and 310:
All about Events Using the mouseove
Page 311 and 312:
All about Events if (oEvent.fromEle
Page 313 and 314:
All about Events Event properties F
Page 315 and 316:
All about Events ❑ ❑ ❑ ❑ Th
Page 317 and 318:
All about Events The actual res
Page 319 and 320:
All about Events window.onscroll =
Page 321 and 322:
All about Events In the second part
Page 323 and 324:
All about Events DOM Property/Metho
Page 325 and 326:
All about Events }; } return oEvent
Page 327 and 328:
All about Events oEvent.eventPhase
Page 329:
All about Events } var oTextbox = d
Page 332 and 333:
Chapter 10 CSS Style Attribute back
Page 334 and 335:
Chapter 10 var oDiv = document.getE
Page 336 and 337:
Chapter 10 This example passes the
Page 338 and 339:
Chapter 10 ❑ ❑ ❑ ❑ ❑ medi
Page 340 and 341:
Chapter 10 In this example, three
Page 342 and 343:
Chapter 10 } function getBackgrou
Page 344 and 345:
Chapter 10 node in question. For ex
Page 346 and 347:
Chapter 10 If you plan to use DOM r
Page 348 and 349:
Chapter 10 Hello World oRange
Page 350 and 351:
Chapter 10 ❑ setEndAfter(refNode)
Page 352 and 353:
Chapter 10 Interacting with DOM ran
Page 354 and 355:
Chapter 10 The following code accom
Page 356 and 357:
Chapter 10 Comparing DOM ranges If
Page 358 and 359:
Chapter 10 The closest thing to the
Page 360 and 361:
Chapter 10 Comparing IE ranges Rang
Page 363 and 364:
Forms and Data Integrity Form eleme
Page 365 and 366:
Forms and Data Integrity Comments:
Page 367 and 368:
Forms and Data Integrity //is the f
Page 369 and 370:
You can actually mimic the behavior
Page 371 and 372:
allowed in the text box. So to crea
Page 373 and 374:
Forms and Data Integrity Select T
Page 375 and 376:
Forms and Data Integrity }; } } } }
Page 377 and 378:
Allowing/blocking characters in tex
Page 379 and 380:
Forms and Data Integrity main diffe
Page 381 and 382:
Forms and Data Integrity You must u
Page 383 and 384:
Forms and Data Integrity You may as
Page 385 and 386:
Forms and Data Integrity Because bo
Page 387 and 388:
Forms and Data Integrity Even thoug
Page 389 and 390:
Forms and Data Integrity This metho
Page 391 and 392:
Forms and Data Integrity TextUtil.a
Page 393:
Forms and Data Integrity The autosu
Page 396 and 397:
Chapter 12 }; return -1; } else if
Page 398 and 399:
Chapter 12 Smith Johnson Hend
Page 400 and 401:
Chapter 12 This section of code cre
Page 402 and 403:
Chapter 12 Smith John Johnson Bet
Page 404 and 405:
Chapter 12 Last Name First Name
Page 406 and 407:
Chapter 12 Creating a conversion fu
Page 408 and 409:
Chapter 12 Using this methodology,
Page 410 and 411:
Chapter 12 The concept Keep in mind
Page 412 and 413:
Chapter 12 } }; if (vValue1 < vValu
Page 415 and 416:
Drag and Drop One of the biggest im
Page 417 and 418:
Drag and Drop } Try dragging th
Page 419 and 420:
Drag and Drop function handleDragDr
Page 421 and 422:
Drag and Drop In this example, all
Page 423 and 424:
Drag and Drop This is essentially t
Page 425 and 426:
Drag and Drop oEvent.dataTransfer.e
Page 427 and 428:
Drag and Drop } } oEvent.srcElement
Page 429 and 430:
Drag and Drop function handleMouseD
Page 431 and 432:
Drag and Drop function handleMouseU
Page 433 and 434:
Drag and Drop } return (iX >= iX1 &
Page 435 and 436:
Drag and Drop The zDraggable object
Page 437:
Drag and Drop position: absolute; l
Page 440 and 441:
Chapter 14 some other reason, perha
Page 442 and 443:
Chapter 14 Figure 14-2 The other op
Page 444 and 445:
Chapter 14 The problem with IE/Mac
Page 446 and 447:
Chapter 14 Figure 14-7 Opera 7 (all
Page 448 and 449:
Chapter 14 In this example, an exce
Page 450 and 451:
Chapter 14 Handling syntax errors T
Page 452 and 453:
Chapter 14 Mozilla’s extensions t
Page 454 and 455:
Chapter 14 Determining the type of
Page 456 and 457:
Chapter 14 Note that the check for
Page 458 and 459:
Chapter 14 Mozilla, Safari, and Ope
Page 460 and 461:
Chapter 14 As you can see, this red
Page 462 and 463:
Chapter 14 The last utility window
Page 464 and 465:
Chapter 14 Figure 14-14 Foreground
Page 466 and 467:
Chapter 14 Under each file (JavaScr
Page 468 and 469: Chapter 14 Figure 14-19 You also ha
Page 470 and 471: Chapter 14 Adding a watch adds a va
Page 473 and 474: XML in JavaScript With the rising p
Page 475 and 476: XML in JavaScript using the string
Page 477 and 478: Retrieving XML After you’ve gotte
Page 479 and 480: XML in JavaScript This line of code
Page 481 and 482: XML in JavaScript As long as you in
Page 483 and 484: XML in JavaScript Unfortunately, th
Page 485 and 486: XML in JavaScript try { var oXmlDom
Page 487 and 488: XML in JavaScript var oXmlDom = new
Page 489 and 490: XML in JavaScript Document.prototyp
Page 491 and 492: XML in JavaScript With this code ad
Page 493 and 494: XML in JavaScript }; } this.parseEr
Page 495 and 496: XPath support in IE Microsoft saw f
Page 497 and 498: XML in JavaScript XPathResult.ORDER
Page 499 and 500: XML in JavaScript If you feel like
Page 501 and 502: XML in JavaScript As you can see,
Page 503 and 504: XML in JavaScript Employees
Page 505 and 506: XML in JavaScript The setStartMode(
Page 507: XML in JavaScript var oProcessor =
Page 510 and 511: Chapter 16 Cookie ingredients No ch
Page 512 and 513: Chapter 16 The setCookie() function
Page 514 and 515: Chapter 16 } %> for (int i=0; i < c
Page 516 and 517: Chapter 16 The one restriction on s
Page 520 and 521: Chapter 16 } setTimeout(function ()
Page 522 and 523: Chapter 16 with the HTTP status of
Page 524 and 525: Chapter 16 Assuming that you have s
Page 526 and 527: Chapter 16 It also helps to have a
Page 528 and 529: Chapter 16 var oReader = new java.i
Page 530 and 531: Chapter 16 oConnection.setRequestPr
Page 532 and 533: Chapter 16 } else if (navigator.jav
Page 534 and 535: Chapter 16 }; }, 10); } else { aler
Page 537 and 538: Web Services In the past two years,
Page 539 and 540: Web Services xmlns=”http://schema
Page 541 and 542: Web Services The pertinent informat
Page 543 and 544: Web Services var oResult = window.e
Page 545 and 546: Enhanced privileges Contacting a di
Page 547 and 548: Web Services ❑ ❑ ❑ ❑ ❑
Page 549 and 550: Web Services Once again, the first
Page 551 and 552: Web Services } onError: function (s
Page 553 and 554: Web Services } else { alert(“Prox
Page 555 and 556: Web Services var oService = new Web
Page 557 and 558: Web Services This line of code crea
Page 559 and 560: Interacting with Plugins The Web is
Page 561 and 562: Interacting with Plugins ❑ ❑ Ac
Page 563 and 564: Detecting Plugins As with most Web
Page 565 and 566: Interacting with Plugins } document
Page 567 and 568: Interacting with Plugins if (naviga
Page 569 and 570:
Interacting with Plugins Figure 18-
Page 571 and 572:
Interacting with Plugins } } else {
Page 573 and 574:
Interacting with Plugins } var oApp
Page 575 and 576:
Interacting with Plugins This examp
Page 577 and 578:
Interacting with Plugins The JSObje
Page 579 and 580:
Interacting with Plugins Back to th
Page 581 and 582:
JavaScript-to-Flash communication F
Page 583 and 584:
Interacting with Plugins Flash Cons
Page 585 and 586:
Interacting with Plugins on(release
Page 587 and 588:
Interacting with Plugins Lastly
Page 589:
Summary Interacting with Plugins Th
Page 592 and 593:
Chapter 19 If all three of these co
Page 594 and 595:
Chapter 19 The preceding code displ
Page 596 and 597:
Chapter 19 If the script isn’t si
Page 598 and 599:
Chapter 19 This example places the
Page 600 and 601:
Chapter 19 alert(sJavaScriptHello);
Page 602 and 603:
Chapter 19 takes for the script to
Page 604 and 605:
Chapter 19 One of the best tools fo
Page 606 and 607:
Chapter 19 Use array and object lit
Page 608 and 609:
Chapter 19 (window) MyFirstName = "
Page 610 and 611:
Chapter 19 Remember Computer Scienc
Page 612 and 613:
Chapter 19 Keep these algorithms in
Page 614 and 615:
Chapter 19 } iSum += aValues[i]; i+
Page 616 and 617:
Chapter 19 iLoopCount = Math.floor(
Page 618 and 619:
Chapter 19 JavaScript gotchas JavaS
Page 620 and 621:
Chapter 19 Use array and object lit
Page 622 and 623:
Chapter 19 Using the JavaScript com
Page 625 and 626:
The Evolution of JavaScript So far
Page 627 and 628:
The Evolution of JavaScript You wil
Page 629 and 630:
The Evolution of JavaScript Types N
Page 631 and 632:
The Evolution of JavaScript This cl
Page 633 and 634:
The Evolution of JavaScript Note th
Page 635 and 636:
The Evolution of JavaScript As you
Page 637 and 638:
The Evolution of JavaScript var oXm
Page 639 and 640:
The Evolution of JavaScript var oXm
Page 641 and 642:
The Evolution of JavaScript If you
Page 643 and 644:
The Evolution of JavaScript In the
Page 645 and 646:
Index Index SYMBOLS + (add operator
Page 647 and 648:
avoiding hard-coded strings, 569-57
Page 649 and 650:
close() method of document object,
Page 651 and 652:
Konqueror/Safari, 239-241 language,
Page 653 and 654:
try...catch statement, 423-427 vari
Page 655 and 656:
F factory paradigm, 90-92 findPlugi
Page 657 and 658:
history of browser window, 148 of J
Page 659 and 660:
XML DOM support in Mozilla and, 455
Page 661 and 662:
getAllResponseHeaders(), 495 getCom
Page 663 and 664:
findPlugin() function, 538 helper a
Page 665 and 666:
parsing error description of, 412-4
Page 667 and 668:
eferences to object, 69 referencing
Page 669 and 670:
size of array, 71 slice() method Ar
Page 671 and 672:
MIME type, 537-538 range collapse,
Page 673 and 674:
vector graphics, 133 Venkman breakp
show all

Professional JavaScript For Web Developers

Create successful ePaper yourself

Delete template?

Save as template?