javascript

Recommendations

Info

CHAPTER 10 ■ SCRIPTING BOM 434 var div = createElem("div", {className: "scroller", id: "s2"}, [ createElem("div", {className: "wrapper"}), createElem("div", {className: "left arrow sprite"}), createElem("div", {className: "right arrow sprite"})]); div.firstChild.innerHTML = req.responseText; document.body.appendChild(div); } getData("data/s3.xml", parseXML); } function parseXML(req) { prep(); } An XML response differs from an HTML one in that it is a Document node containing Element and Text nodes rather than a string of plain text. So you query XML data the same way as a DOM tree. Yup, with the methods we covered in Chapter 7. So as you might guess, the DOM tree representing data/s3.xml isn’t in XMLHttpRequest.responseText. That value is a string not an object. Rather, the DOM tree for our XML is in XMLHttpRequest.responseXML. So after we make sure XMLHttpRequest.status is either 200 or 304, same as we did for HTML, we’ll save the DOM tree for our XML to a local variable named domTree. function parseXML(req) { if (req.status === 200 || req.status === 304) { var domTree = req.responseXML; } prep(); } Note that if you are testing this script on your computer, which is to say loading URLs with the file:// protocol, there obviously will not be an http:// status code. So XMLHttpRequest.status will always be 0, no matter what. With this in mind, if you are testing the script on your computer, you must replace 200 or 304 with 0. Otherwise, the if block will never run! function parseXML(req) { if (req.status === 0 || req.status === 304) { var domTree = req.responseXML; } prep(); } Now we want to save the nine Element nodes to a local variable named elements. Fetch those as if they were or elements—with Document.getElementsByTagName(), which we covered in Chapter 7: function parseXML(req) { if (req.status === 200 || req.status === 304) { var domTree = req.responseXML; var elements = domTree.getElementsByTagName("shoe"); } prep(); } Now for any of those elements, we can query the Text node in a child like so: elements[i].getElementsByTagName("href")[0].firstChild.data
CHAPTER 10 ■ SCRIPTING BOM Same thing works for a child or : elements[i].getElementsByTagName("src")[0].firstChild.data elements[i].getElementsByTagName("alt")[0].firstChild.data With this in mind, we can cobble together a scroller with our helper function, createElem(), like so: function parseXML(req) { if (req.status === 200 || req.status === 304) { var domTree = req.responseXML; var elements = domTree.getElementsByTagName("shoe"); var div, ul = createElem("ul", {className: "slide"}), li; for (var i = 0, j = elements.length; i < j; i ++) { li = createElem("li", null, [ createElem("a", {href: elements[i].getElementsByTagName("href")[0].firstChild.data}, [ createElem("img", {src: elements[i].getElementsByTagName("src")[0].firstChild.data, alt: elements[i].getElementsByTagName("alt")[0].firstChild.data})])]); ul.appendChild(li); } div = createElem("div", {className: "scroller", id: "s3"}, [ createElem("div", {className: "wrapper"}, [ul]), createElem("div", {className: "left arrow sprite"}), createElem("div", {className: "right arrow sprite"})]); } prep(); } Now the local variable contains the following DOM branch: But it’s floating around in memory invisible to visitors. So, we need attach the DOM branch to the tree, the same way we did in parseHTML(): function parseXML(req) { 435
Page 1:
THE EXPERT’S VOICE ® IN WEB DEVE
Page 4 and 5:
ii JavaScript for Absolute Beginner
Page 6 and 7:
iv Contents at a Glance ■Contents
Page 8 and 9:
■ CONTENTS vi ■Chapter 2: Type
Page 10 and 11:
■ CONTENTS viii Sharing a Prototy
Page 12 and 13:
■ CONTENTS x Querying Attributes
Page 14 and 15:
■ CONTENTS xii Getting the User
Page 16 and 17:
■ CONTENTS xiv About the Technica
Page 18 and 19:
■ PREFACE xvi Preface In the 2005
Page 20 and 21:
■ PREFACE xviii Opening Firebug L
Page 22 and 23:
■ PREFACE xx Now press Return on
Page 24 and 25:
■ PREFACE xxii editor reappear. N
Page 26 and 27:
■ PREFACE xxiv
Page 28 and 29:
CHAPTER 1 ■ REPRESENTING DATA WIT
Page 30 and 31:
Page 32 and 33:
Page 34 and 35:
Page 36 and 37:
Page 38 and 39:
Page 40 and 41:
Page 42 and 43:
Page 44 and 45:
Page 46 and 47:
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
CHAPTER 2 ■ TYPE CONVERSION 26 Fi
Page 54 and 55:
Page 56 and 57:
CHAPTER 2 ■ TYPE CONVERSION 30 St
Page 58 and 59:
CHAPTER 2 ■ TYPE CONVERSION 32 De
Page 60 and 61:
Page 62 and 63:
CHAPTER 2 ■ TYPE CONVERSION 36 wa
Page 64 and 65:
CHAPTER 2 ■ TYPE CONVERSION 38
Page 66 and 67:
Page 68 and 69:
Page 70 and 71:
CHAPTER 2 ■ TYPE CONVERSION 44 pr
Page 72 and 73:
Page 74 and 75:
Page 76 and 77:
CHAPTER 2 ■ TYPE CONVERSION 50 Co
Page 78 and 79:
Page 80 and 81:
CHAPTER 2 ■ TYPE CONVERSION 54 To
Page 82 and 83:
Page 84 and 85:
CHAPTER 3 ■ OPERATORS 58 Remember
Page 86 and 87:
CHAPTER 3 ■ OPERATORS 60 Using Ja
Page 88 and 89:
CHAPTER 3 ■ OPERATORS 62 dough.po
Page 90 and 91:
CHAPTER 3 ■ OPERATORS 64 mincedLe
Page 92 and 93:
CHAPTER 3 ■ OPERATORS 66 Figure 3
Page 94 and 95:
CHAPTER 3 ■ OPERATORS 68 // 1.25
Page 96 and 97:
CHAPTER 3 ■ OPERATORS 70 • If b
Page 98 and 99:
CHAPTER 3 ■ OPERATORS 72 The impo
Page 100 and 101:
CHAPTER 3 ■ OPERATORS 74 tartar:
Page 102 and 103:
CHAPTER 3 ■ OPERATORS 76 } }; pur
Page 104 and 105:
CHAPTER 3 ■ OPERATORS 78 saigonCi
Page 106 and 107:
Page 108 and 109:
CHAPTER 3 ■ OPERATORS 82 loganber
Page 110 and 111:
Page 112 and 113:
Page 114 and 115:
Page 116 and 117:
Page 118 and 119:
CHAPTER 3 ■ OPERATORS 92 tartar:
Page 120 and 121:
CHAPTER 3 ■ OPERATORS 94 fridge.y
Page 122 and 123:
CHAPTER 3 ■ OPERATORS 96
Page 124 and 125:
CHAPTER 4 ■ CONTROLLING FLOW 98 s
Page 126 and 127:
CHAPTER 4 ■ CONTROLLING FLOW 100
Page 128 and 129:
Page 130 and 131:
Page 132 and 133:
Page 134 and 135:
Page 136 and 137:
Page 138 and 139:
Page 140 and 141:
Page 142 and 143:
Page 144 and 145:
Page 146 and 147:
Page 148 and 149:
Page 150 and 151:
Page 152 and 153:
Page 154 and 155:
Page 156 and 157:
Page 158 and 159:
Page 160 and 161:
Page 162 and 163:
Page 164 and 165:
Page 166 and 167:
Page 168 and 169:
Page 170 and 171:
Page 172 and 173:
CHAPTER 5 ■ MEMBER INHERITANCE 14
Page 174 and 175:
Page 176 and 177:
Page 178 and 179:
Page 180 and 181:
Page 182 and 183:
Page 184 and 185:
Page 186 and 187:
Page 188 and 189:
Page 190 and 191:
Page 192 and 193:
Page 194 and 195:
Page 196 and 197:
Page 198 and 199:
Page 200 and 201:
Page 202 and 203:
Page 204 and 205:
Page 206 and 207:
Page 208 and 209:
CHAPTER 6 ■ FUNCTIONS AND ARRAYS
Page 210 and 211:
Page 212 and 213:
Page 214 and 215:
Page 216 and 217:
Page 218 and 219:
Page 220 and 221:
Page 222 and 223:
Page 224 and 225:
Page 226 and 227:
Page 228 and 229:
Page 230 and 231:
Page 232 and 233:
Page 234 and 235:
Page 236 and 237:
Page 238 and 239:
Page 240 and 241:
Page 242 and 243:
Page 244 and 245:
Page 246 and 247:
Page 248 and 249:
Page 250 and 251:
Page 252 and 253:
Page 254 and 255:
Page 256 and 257:
Page 258 and 259:
Page 260 and 261:
Page 262 and 263:
Page 264 and 265:
Page 266 and 267:
Page 268 and 269:
Page 270 and 271:
Page 272 and 273:
Page 274 and 275:
Page 276 and 277:
Page 278 and 279:
Page 280 and 281:
Page 282 and 283:
CHAPTER 7 ■ TRAVERSING AND MODIFY
Page 284 and 285:
Page 286 and 287:
Page 288 and 289:
Page 290 and 291:
Page 292 and 293:
Page 294 and 295:
Page 296 and 297:
Page 298 and 299:
Page 300 and 301:
Page 302 and 303:
Page 304 and 305:
Page 306 and 307:
Page 308 and 309:
Page 310 and 311:
Page 312 and 313:
Page 314 and 315:
Page 316 and 317:
Page 318 and 319:
Page 320 and 321:
Page 322 and 323:
Page 324 and 325:
Page 326 and 327:
Page 328 and 329:
Page 330 and 331:
Page 332 and 333:
Page 334 and 335:
CHAPTER 8 ■ SCRIPTING CSS 308 Rem
Page 336 and 337:
CHAPTER 8 ■ SCRIPTING CSS 310 var
Page 338 and 339:
CHAPTER 8 ■ SCRIPTING CSS 312 tex
Page 340 and 341:
CHAPTER 8 ■ SCRIPTING CSS 314 Fig
Page 342 and 343:
CHAPTER 8 ■ SCRIPTING CSS 316 We
Page 344 and 345:
CHAPTER 8 ■ SCRIPTING CSS 318 Don
Page 346 and 347:
Page 348 and 349:
CHAPTER 8 ■ SCRIPTING CSS 322 Exp
Page 350 and 351:
CHAPTER 8 ■ SCRIPTING CSS 324 fun
Page 352 and 353:
CHAPTER 8 ■ SCRIPTING CSS 326 One
Page 354 and 355:
CHAPTER 8 ■ SCRIPTING CSS 328 } L
Page 356 and 357:
CHAPTER 8 ■ SCRIPTING CSS 330 •
Page 358 and 359:
CHAPTER 8 ■ SCRIPTING CSS 332 ins
Page 360 and 361:
Page 362 and 363:
CHAPTER 8 ■ SCRIPTING CSS 336 Why
Page 364 and 365:
Page 366 and 367:
CHAPTER 8 ■ SCRIPTING CSS 340 Ref
Page 368 and 369:
Page 370 and 371:
CHAPTER 8 ■ SCRIPTING CSS 344 } }
Page 372 and 373:
CHAPTER 8 ■ SCRIPTING CSS 346
Page 374 and 375:
CHAPTER 9 ■ LISTENING FOR EVENTS
Page 376 and 377:
Page 378 and 379:
Page 380 and 381:
Page 382 and 383:
Page 384 and 385:
Page 386 and 387:
Page 388 and 389:
Page 390 and 391:
Page 392 and 393:
Page 394 and 395:
Page 396 and 397:
Page 398 and 399:
Page 400 and 401:
Page 402 and 403:
Page 404 and 405:
Page 406 and 407:
Page 408 and 409:
Page 410 and 411: CHAPTER 9 ■ LISTENING FOR EVENTS
Page 426 and 427: CHAPTER 10 ■ SCRIPTING BOM 400 Ne
Page 428 and 429: CHAPTER 10 ■ SCRIPTING BOM 402 }
Page 432 and 433: CHAPTER 10 ■ SCRIPTING BOM 406 fu
Page 434 and 435: CHAPTER 10 ■ SCRIPTING BOM 408 Du
Page 436 and 437: CHAPTER 10 ■ SCRIPTING BOM 410 In
Page 438 and 439: CHAPTER 10 ■ SCRIPTING BOM 412 Wr
Page 442 and 443: CHAPTER 10 ■ SCRIPTING BOM 416 va
Page 446 and 447: CHAPTER 10 ■ SCRIPTING BOM 420 Sw
Page 450 and 451: CHAPTER 10 ■ SCRIPTING BOM 424 Te
Page 454 and 455: CHAPTER 10 ■ SCRIPTING BOM 428 Ca
Page 458 and 459: CHAPTER 10 ■ SCRIPTING BOM 432 })
Page 466 and 467: CHAPTER 10 ■ SCRIPTING BOM 440 cr
Page 468 and 469: CHAPTER 10 ■ SCRIPTING BOM 442 No
Page 470 and 471: CHAPTER 10 ■ SCRIPTING BOM 444 No
Page 474 and 475: CHAPTER 10 ■ SCRIPTING BOM 448 {
Page 478 and 479: CHAPTER 10 ■ SCRIPTING BOM 452 "u
Page 480 and 481: CHAPTER 10 ■ SCRIPTING BOM 454 se
Page 482 and 483: CHAPTER 10 ■ SCRIPTING BOM 456 sp
Page 488 and 489: ■ INDEX 462 parsing an XML respon
Page 490 and 491: ■ INDEX 464 creating, 217 queryin
Page 492 and 493: ■ INDEX 466 document.styleSheets,
Page 494 and 495: ■ INDEX 468 listening for mousedo
Page 496 and 497: ■ INDEX 470 chaining prototypes,
Page 498 and 499: ■ INDEX 472 definition of, 255 de
Page 500 and 501: ■ INDEX 474 ■ P padJSON(), 445
Page 502 and 503: ■ INDEX 476 ten.js, 401 ternary o
Page 504 and 505: ■ INDEX 478
show all

javascript

Create successful ePaper yourself

Delete template?

Save as template?