DHTML Utopia Modern Web Design Using JavaScript & DOM- P14

DHTML Utopia Modern Web Design Using JavaScript & DOM- P14:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P14 Chapter 8: Remote Scripting a { width: 100%; /* IE Hack */ … } h2 { width: 100%; /* IE Hack */ … } These styles align the two divs left-to-right by floating them against the left side of the page. To prevent whitespace from appearing underneath each li in Internet Explorer, we use the trick we saw in Chapter 7: set the li contents to occupy the full width of the li. That wrecks the layout slightly for standards-compliant browsers, so we set overflow: hidden to tidy up there. Planning the DHTML Beer Pages Let’s update this tiny application so that it doesn’t need to send us off to different pages for information. We’ll add a new section to the page itself to display data about a particular beer, and we’ll change it so that clicking a beer character highlights it, and all the beers that have it. These are the steps we’ll take: 1. Generate the page dynamically, based on server data. 2. Add a new page element in which beer descriptions will be displayed. 3. Create a script to fetch data on an individual beer from the server. 4. Create a script to display the data from step 3 in the new section on the page. 5. Create a script to fetch data about which beers share a particular character. 6. Create a script to highlight those beers that are indicated by data from step 5. As usual, we’ll require a set of JavaScript methods, so let’s jump forward for a second and see what those are going to look like: 240Licensed to siowchen@darke.biz Generating the Starting Page from Data File: final-beer.js (excerpt) bG = { init: function() { ... }, addEvent: function(elm, evType, fn, useCapture) { ... }, geturl: function(u, fn) { ... }, clickCharacter: function(e) { ... }, clickBeer: function(e) { ... }, display: function(beer) { ... }, display2: function(beerdata) { ... }, highlight: function(character) { ... }, highlight2: function(charjs) { ... } } bG.addEvent(window, load, bG.init, false); geturl will draw data back from the server. The click… methods are event listeners. display and display2 drive the beer selection feature, and highlight and highlight2 drive the character highlighting feature. But one step at a time is more than enough! Generating the Starting Page from Data Step 1, generating the page from server data, requires the same tactics as past examples. We’ll keep all the data about beer in a separate PHP data structure. We imagine that $beers is an array populated as follows, perhaps from a database: File: beers.php (excerpt) $beers = array( beerid1 => array( beername, beerdescription, beercharacter), beerid2 => array(… ) Here’s an example of a single beer: guinness => array( Guinness, 241Licensed to siowchen@darke.biz Chapter 8: Remote Scripting An evil but habit-forming stout, best drunk near the Irish, malty) We also have a set of beer characters, which match those mentioned within the various beers’ records: File: beers.php (excerpt) $beercharacters = array(hoppy, malty, fruity); These arrays provide the data with which we’ll generate the HTML for the page. The script will start like this: File: second-beer.php (excerpt) We can now generate the lists for the beers’ characters, and for the beers them- selves, dynamically. Here’s the code for the beers themselves: File: second-beer.php (excerpt) The beers ...