Description
In this chapter’s case study, you will use the existing JavaJam website (Chapter 10) as
a starting point to create a new version of the website that incorporates multimedia and
interactivity. You have three tasks in this case study:
- Create a new folder for this JavaJam case study.
- Modify the style sheet (javajam.css) to configure a transition for the navigation
hyperlink color.
- Edit the text and configure two audio elements on the music page (music.htrnl), and
update the external CSS file as needed.
Task 1: Create a folder called chl1javajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 10 Case Study chl0javajam folder to your new chl1javajam folder. Copy the following files from the chapterll/casestudystarters folder in the student files and save them in your chl1javajam folder: melanie.mp3, melanie.org greg.mp3, and greg.org.
Task 2:
Configure a Navigation Transition with CSS. Open javajam.css in a text editor.
Locate the nav a selector. Code additional style declarations to configure a three-second ease-out transition in the color property. Save the file. Display any of the web pages in a browser that supports transitions and place your mouse over a navigation link. You should see a gradual change in the color of the text in the navigation link.
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
You were briefly introduced to JavaScript in this chapter. JavaScript is often used to respond
to events such as moving the mouse, clicking a button, and loading a web page. JavaScript
is also the “J” in AJAX, which stands for Asynchronous JavaScrip1 and XML, a technology
that powers interactive web applications including Gmail (http://gmail.google.com) and
Flickr (http://flickr.com). Recall the client/server model discussed in Chapters 1 and 10. The browser makes a request to the server (Often triggered by clicking a hyperlink or a submit button), and the server returns an entire new web page for the browser to display. AJAX pushes more of the processing on the client (browser) with JavaScript and XML and often uses “behind the scenes’ asynchronous requests to the server to refresh a portion of the browser display instead of the entire web page. The key is that when using AJAX technology, JavaScript code (which runs on the client computer within the confines of the
browser) can communicate directly with the server—exchanging data and modifying parts of the web page display without reloading of the entire web page.
For example, as soon as a website visitor types a Zip Code into a form, the value could be looked up on a Zip Code database and the city/state automatically populated using AJAX—and all this takes place while the visitor is entering the form information before he or she clicks the submit button. The result is that the visitor perceives the web page as being more responsive and has a more interactive experience. Visit the following websites to explore this topic further:
D http://www.w3sch001s.com/ajaVajax_intr0.a*)
http://wwN.tizag.com/ajaxTutorial S
