Chapter 1.using ajax Page14 Return to Table of Contents modify rob's xhtml page Step 1:Modify the XHTML /tml Let's start with the easy part,the XHTML and CSS that create the page.Here's Rob's current version of the inventory page with a few additions we'll need: inventory.html <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" You need to add a "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> reference to thumbnails.js <html xmlns="http://www.w3.org/1999/xhtml"> That's the seript we'll be <head> writing in this chapter. <title>Rob's Rock 'n'Roll Memorabilia</title> <link rel="stylesheet"href="css/default.css"/ <script src="scripts/thumbnails.js"type="text/javascript"></script> </head> <body> <div id="wrapper"> <img src="images/logotypeLeft.png"alt="Rob's Rock 'n'Roll Memorabilia" width="394"height="91"id="logotypeLeft"/> <img src="images/logotypeRight.png"alt="Rob's Rock 'n'Roll Memorabilia" width="415"height="92"id="logotypeRight"/> <div id="introPane"> <p>Are you looking for the perfect gift for the rock fan in your life? Maybe you want a guitar with some history behind it,or a conversation piece for your next big shindig.Look no further!Here you'1l find all sorts of great memorabilia from the golden age of rock and roll.</p> <p><strong>click on an image to the left for more details.</strong></p> </div> This <div>holds the small, <div id="thumbnailPane"> clickable images. <img src="images/itemGuitar.jpg"width="301"height="105"alt="guitar" title="itemGuitar"id="itemGuitar"/ <img src="images/itemShades.jpg"alt="sunglasses"width="301"height="88" title="itemShades"id="itemShades"/ <img src="images/itemCowbell.jpg"alt="cowbell"width="301"height="126" title="itemCowbell"id="itemCowbell"/ <img src="images/itemHat.jpg"alt="hat"width="300"height="152" title="itemHat"id="itemHat"/> </div> This <div>is where details <div id="detailsPane"> about cach item should go <img src="images/blank-detail.jpg"width="346"height="153"id="itemDetail"/> <div id="description"></div> </div> </div> </body> We'll put item It's time to get the samples and get going. </html> details in here with our JavaScript RuM itl Download the examples for the book at www.headfirstlabs.com,and find the chapter0l folder.Now open the inventory.html file in a text 14 Chapter 1 editor,and make the changes shown above. Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621 Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or tra itted i any form by any means without the prior written permission for reprints and excerpts from the publis er.Redistribution or other use that violates the fair use priviledge under U.S.copyright laws (see 17 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
14 Chapter 1 <html> </html> inventory.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rob's Rock 'n' Roll Memorabilia</title> <link rel="stylesheet" href="css/default.css" /> VFULSWVUF VFULSWVWKXPEQDLOVMVW\SH WH[WMDYDVFULSW! VFULSW! </head> <body> <div id="wrapper"> <img src="images/logotypeLeft.png" alt="Rob's Rock 'n' Roll Memorabilia" width="394" height="91" id="logotypeLeft" /> <img src="images/logotypeRight.png" alt="Rob's Rock 'n' Roll Memorabilia" width="415" height="92" id="logotypeRight" /> <div id="introPane"> <p>Are you looking for the perfect gift for the rock fan in your life? Maybe you want a guitar with some history behind it, or a conversation piece for your next big shindig. Look no further! Here you'll find all sorts of great memorabilia from the golden age of rock and roll.</p> <p><strong>Click on an image to the left for more details.</strong></p> </div> <div id="thumbnailPane"> <img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar" title="itemGuitar" id="itemGuitar" /> <img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" title="itemShades" id="itemShades" /> <img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" title="itemCowbell" id="itemCowbell" /> <img src="images/itemHat.jpg" alt="hat" width="300" height="152" title="itemHat" id="itemHat" /> </div> <div id="detailsPane"> <img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail" /> <div id="description"></div> </div> </div> </body> </html> Step 1: Modify the XHTML Let’s start with the easy part, the XHTML and CSS that create the page. Here’s Rob’s current version of the inventory page with a few additions we’ll need: You need to add a reference to thumbnails.js. That’s the script we’ll be writing in this chapter. It’s time to get the samples and get going. Download the examples for the book at www.headfirstlabs.com, and find the chapter01 folder. Now open the inventory.html file in a text editor, and make the changes shown above. This <div> holds the small, clickable images. This <div> is where details about each item should go. We’ll put item details in here with our JavaScript. modify rob’s xhtml page Chapter 1. using ajax Page 14 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited.
Chapter 1.using ajax Page15 Return to Table of Contents using ajax To Do ☑Mod的y the L ROB'S ROCK 'N ROLL VEMORABILIA ☐INtalize the page ☐(reate a request object ☐Get the item'S detai% ☐DiSplay the details 个 Here's a short version of the steps from pages 12 and 13 that we can use to work through Rob's page. Start out with no item detail and a blank area for the item's description to go in when something's selected. body background:#333; font-family:Trebuchet MS,Verdana,Helvetica,Arial,san-serif; margin:0; text-align:center; This is the cascading style sheet for Rob's p font-size:12px;line-height:20px;) Page.We'll use the id a img border:0; values on the <div> elements to style the #wrapper page,and also later in background:#750505 ur1('../images/bgWrapper.png')8px 0 no-repeat; our JavaScript code. border:solid #300; border-width:0 15px 15px15px; height:700px; detail There's a lot more CSS. margin:0 auto; you can sce the complete ...etc., file by downloading the examples from the Head rocknroll.css First Labs web site you are here 15 Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621 Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or itted i any form by any means without the pro written permission for reprints and excerpts from the publis er.R edistribution or other use that violates the fair use priviledge under U.S.copyright laws(see 17 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 15 using ajax body { background: #333; font-family: Trebuchet MS, Verdana, Helvetica, Arial, san-serif; margin: 0; text-align: center; p { font-size: 12px; line-height: 20px; } a img { border: 0; } #wrapper { background: #750505 url('../images/bgWrapper.png') 8px 0 no-repeat; border: solid #300; border-width: 0 15px 15px 15px; height: 700px; margin: 0 auto; ...etc... This is the cascading style sheet for Rob’s page. We’ll use the id values on the <div> elements to style the page, and also later in our JavaScript code. To Do Modify the XHTML Initialize the page Create a request object Get the item’s details Display the details Here’s a short version of the steps from pages 12 and 13 that we can use to work through Rob’s page. #detail { rocknroll.css Start out with no item detail and a blank area for the item’s description to go in when something’s selected. There’s a lot more CSS... you can see the complete file by downloading the examples from the Head First Labs web site. Chapter 1. using ajax Page 15 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited
Chapter 1.using ajax Page16 Return to Table of Contents window.onload occurs first To Do Step 2:Initialize the JavaScript ☑/modify the XM ☐Iitialie the page We need to create the thumbnails.js file,and add a JavaScript function to set up the initial event handlers for each thumbnail image in ☐reate a request object the inventory.Let's call that function initPage ()and set it to run ☐Get the ite'detail水 as soon as the user's window loads the inventory page. ☐DiSplay the detai' The initPage()function should ROUS ROCK N ROUL VEMORAB get called as soon as the browser ereates all the objects on the page. function initPage t initPage()sets up the onclick behavior for each of the thumbnails in the inventory. thumbnails.js To set up the onclick behavior for the thumbnails, the initPage()function has to do two things: ① Find the thumbnails on the page The thumbnails are contained in a div called "thumbnailPane,"so we can find that div,and then find each image within it. Build the onclick event handler for each thumbnail Each item's full-size image is named with the title of the thumbnail image plus"detail".For example,the detail image for the thumbnail with the title FenderGuitar is FenderGuitar-detail.png.That lets us work out the name of the image in our JavaScript. The event handler for each thumbnail should set the src tag for the detail image(the one with an id of "itemDetail")to the detail image (for example,FenderGuitar- detail.png).Once you've done that,the browser will automatically display the new image using the name you supplied. 16 Chapter 1 Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621 Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or nsmitted in any form by any means without the prior written permission for reprints and excerpts from the publis er.Redistribution or other use that violates the fair use priviledge under U.S.copyright laws(see 17 USC107)or that otherwise violates the Safari Terms of Service is strictly prohibited
16 Chapter 1 To Do Modify the XHTML Initialize the page Create a request object Get the item’s details Display the details Step 2: Initialize the JavaScript We need to create the thumbnails.js file, and add a JavaScript function to set up the initial event handlers for each thumbnail image in the inventory. Let’s call that function initPage(), and set it to run as soon as the user’s window loads the inventory page. The initPage() function should get called as soon as the browser creates all the objects on the page. initPage() sets up the onclick behavior for each of the thumbnails in the inventory. To set up the onclick behavior for the thumbnails, the initPage() function has to do two things: Find the thumbnails on the page The thumbnails are contained in a div called “thumbnailPane,” so we can find that div, and then find each image within it. Build the onclick event handler for each thumbnail Each item’s full-size image is named with the title of the thumbnail image plus “-detail”. For example, the detail image for the thumbnail with the title FenderGuitar is FenderGuitar-detail.png. That lets us work out the name of the image in our JavaScript. The event handler for each thumbnail should set the src tag for the detail image (the one with an id of “itemDetail”) to the detail image (for example, FenderGuitardetail.png). Once you’ve done that, the browser will automatically display the new image using the name you supplied. 2 thumbnails.js function initPage { ... window.onload occurs first Chapter 1. using ajax Page 16 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited
Chapter 1.using ajax Page Return to Table of Contents using ajax Code Magnets The code for the initPage function is all scrambled up on the fridge.Can you put back the pieces that fell off?Remember to set an event handler to run the initPage()function when the user's window loads,too. (create the onclick function image.onclick function(){ find the thumbnails on the page /find the full-size image name function initPage(){ image thumbs[i]; is0;i<thumbs.length;i++)( (var for window.onload initPage document.getElementById("itemDetail").src detailURL; thumbs document.getElementById("thumbnailPane").getElementsByTagName("IMG"); getDetails(this.title); /set the handler for each image In an event handler,like onelick, detailURL 'images/'+this.title +'-detail.jpg'; you can get a reference to the objeet the event oceurred on with the "this"keyword. you are here 17 Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or transmitted in any form by any means without the pro written permission for reprints and excerpts from the publis er.Re edistribution or other use that violates the fair use priviledge under U.S.copyright laws(see 17 USC107)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 17 using ajax Code Magnets The code for the initPage function is all scrambled up on the fridge. Can you put back the pieces that fell off? Remember to set an event handler to run the initPage() function when the user’s window loads, too. window.onload = initPage; function initPage() { thumbs = document.getElementById("thumbnailPane").getElementsByTagName("IMG"); for (var i=0; i<thumbs.length; i++) { image = thumbs[i]; detailURL = 'images/' + this.title + '-detail.jpg'; // find the full-size image name // set the handler for each image // find the thumbnails on the page // create the onclick function image.onclick = function() { document.getElementById("itemDetail").src = detailURL; getDetails(this.title); In an event handler, like onclick, you can get a reference to the object the event occurred on with the “this” keyword. Chapter 1. using ajax Page 17 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited
Chapter 1.using ajax Page8 Return to Table of Contents initPage0 sets up the page Code Magnet solution This sets initPage()upto run once the user's browser loads the page. window.onload initPagei Don't worry too much about this now..we'll talk about the All these "get."functions use DOM in detail a bit later. function initPage()【 the DoM to look up something /find the thumbnails on the page on the XHTML page. thumbs =document.getElementById("thumbnailPane").getElementsByTagName("img"); These are the same ids we used set the handler for each image in the CsS to style the page. We want to do this once for (var i=0;i<thumbs.length;i++) for every thumbnail. image=thumbs[i】; /create the onclick function JavaSeript lets you define functions without giving them an cxplicit name. image.onclick function(){ When an image is clicked,that image's title is used to figure out find the full-size image name the detail image's URL This function is run whenever a detailURL images/this.title '-detail.jpg'; thumbnail image document.getElementById("itemDetail").src detailURL; is elicked. getDetails(this.title); Clicking on a thumbnail changes the Don't forget all the detail image's sre attribute,and then closing brackets,or your the browser displays the new image. JavaScript won't run. 18 Chapter 1 Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or transmitted in any form by any means without the pro written permission for reprints and excerpts from the publis er.Re edistributionor other use that violates the fair use priviledge under U.S.copyright laws(see 17 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
18 Chapter 1 thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img"); document.getElementById("itemDetail").src = detailURL; getDetails(this.title); Code Magnet Solution window.onload = initPage; function initPage() { for (var i=0; i<thumbs.length; i++) { image = thumbs[i]; detailURL = 'images/' + this.title + '-detail.jpg'; // find the full-size image name // set the handler for each image // find the thumbnails on the page // create the onclick function image.onclick = function() { All these “get...” functions use the DOM to look up something on the XHTML page. We want to do this once for every thumbnail. JavaScript lets you define functions without giving them an explicit name. Don’t forget all the closing brackets, or your JavaScript won’t run. This sets initPage() up to run once the user’s browser loads the page. These are the same ids we used in the CSS to style the page. Clicking on a thumbnail changes the detail image’s src attribute, and then the browser displays the new image. This function is run whenever a thumbnail image is clicked. Don’t worry too much about this now... we’ll talk about the DOM in detail a bit later. When an image is clicked, that image’s title is used to figure out the detail image’s URL. initPage() sets up the page Chapter 1. using ajax Page 18 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited