Improving a Webpage with JavaScript
Instructions: Work with the analyze10.html file in the analyze folder from the Data Files for
Students. The analyze10.html webpage needs pop-up windows to display larger pictures. First, correct
the JavaScript syntax errors on the page. Next, use the open() method to display a new window with a
picture for the firrst thumbnail. Then, use the open() method to display a new window with a picture
for the second thumbnail and a new window with a picture for the third thumbnail. Finally, create new
style rules for the figure and img elements. Use Figure 10–54 as a guide to correct these files.
1. Correct
a. Open the analyze10.html fie in your text editor from the Data Files for Students. Modify the
comment at the top of the page to include your name and today’s date and then link the file to
analyzestyles10.css. Add a title to the page and add your name to the footer element.
b. Review the JavaScript functions contained within the body element and wrap them in a script element.
c. Move the script element to the head element.
d. Open the analyzestyles10.css file in your text editor from the Data Files for Students and then
modify and correct the comment at the top of the document to include your name and today’s date.
2. Improve
a. In the analyze10.html file, add an onclick event handler to the first img element that calls the function, cb1.
b. In the analyze10.html file, add an onclick event handler to the second img element that calls the function, cb2.
c. In the analyze10.html file, add an onclick event handler to the third img element that calls the function, cb3.
d. In the analyzestyles10.css file, create a style rule for the figure element to align it center.
Include a comment for the style rule.
e. In the analyzstyles10.css file, create a style rule for the img element and specify 1em of padding. Include a comment for the style rule.
f. Save all of your changes and open the analyze10.html in your browser.
g. Validate your CSS file using the W3C validator found at http://jigsaw.w3.org/css-validator/ and fix any errors that are identified.
h. Validate your HTML webpage using the W3C validator found at validator.w3.org and fix any errors that are identified.
i. In this exercise, you used JavaScript to view larger images. Use your browser to research
how to use JavaScript to create an image gallery and write a summary of your findings.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.