HTML and CSS Reference
In-Depth Information
9
Integrating JavaScript
and HTML5
Introduction
Many individuals, organizations, and companies rely on their Web sites as a key vehicle to
communicate with friends, members, and current and future customers. Web pages often
announce upcoming events, provide updated information, or act as a sales tool or catalogs.
Regardless of the content, Web page features should spark visitors' interests and entice
them to return to the Web site. As with an advertisement, a Web page has six to seven
seconds to attract and retain someone's attention.
An effective way to make Web pages interesting and useful is to include dynamic
content to make the Web page interactive. One way to add dynamic content to a Web
page is to use JavaScript code to display dynamic messages. This chapter shows you how
to add JavaScript code to a Web page to make it more dynamic and attractive.
Project — Midwest Bridal Expo Web Page
The Midwest Bridal Expo wants to launch their Web page. You suggest adding a dynamic
message that displays the number of days to the start of the expo, using a drop-down
menu for navigation to other Web pages, and changing the scroll bar color to help balance
the look of the page with the banner colors. You also suggest including the date the Web
page was last modified so that users know the Web page content is current. Chapter 9
presents the JavaScript code to add these dynamic features to create the Web pages shown
in Figure 9-1.
Overview
As you read through this chapter, you will learn how to integrate JavaScript onto
a Web page, as shown in Figure 9-1, by performing these general tasks:
Write a JavaScript function to display a dynamic message in a <div> container
•
•
Write a JavaScript function to change the color of the scroll bar
•
Write a JavaScript function to use a drop-down menu to link to new Web pages
•
Write a JavaScript function to display the date the Web page was last modified and
a copyright message in a <div> container
HTML 410
