School of Education

Internet Technologies At Work

Chapter 8: Active Web Pages

After completing Chapter 8, you will know how to:

JavaScript

The JavaScript Hello World! project gets you started learning how to use JavaScript to write content onscreen in a Web page. The JavaScript Clock project takes you one step further, introducing variables and the Date() object, with which you tell users what time it is. Work through both of these little projects to get an idea of how JavaScript works.

Document Object Model (DOM)

The Document Object Model (DOM) is the official W3C structural definition of the objects, methods, and properties that comprise documents on the World Wide Web. To get you started accessing objects in the DOM, work through the Title Bar Clock Script exercise, which teaches you how to put a real time clock in your browser’s title bar, which is one of the objects in the DOM. Notice how you access the title bar via its name in the DOM. Later in this course, you will learn how to give a name to anything on the screen of your Web page. Once named, you can refer to your page elements in scripts and manipulate named objects dynamically onscreen.

Rollovers

One of the most popular JavaScript effects is the rollover, which is a special graphical effect that you create by using the JavaScript onmouseover and onmouseout event handlers. When the user moves the mouse over something, the onmouseover event fires, causing your script to do something onscreen. Similarly, when the user moves the mouse out of something, the onmouseout event fires, providing another opportunity to run a script. Work through the Try This exercise to create Rollover Effects onscreen.

Debugging

Writing scripts requires patience because you can run into some problems. The greatest aid to finding a problem in a script is to inspect the values of your variables while the script executes. To take a sneak peek at a variable, you can insert an alert box at the point in the script at which you want to inspect the value of the variable. To learn how to do this, study the section entitled Debugging JavaScript via the Alert Box.

Free Scripts

Here are some JavaScript sites that provide you with hundreds of code samples that you can download and use freely on your Web pages:

XHTML Validation

Chapter 8 concludes with a section on converting legacy HTML files into XHTML documents. To make sure you are following all of the relevant standards, run your files through the World Wide Web consortium's markup validator service at validator.w3.org.

End of Chapter Labs

Lab Project 8.1: Dynamic Content

A static page that never changes does not project a very dynamic image out on the Web. Imagine that your school or workplace has hired you to transform its home page from static to dynamic. Instead of displaying the same information every time someone visits the site, your task is to create active Web page elements into which the site will flow dynamic content. Before bringing these active elements online, your superior has asked you to submit a plan in which you (1) propose which parts of the page should become dynamic, (2) describe the manner in which they will become active, and (3) define the source of the content that will feed in to the page. Use your Word processor to create this plan. In developing your proposal, consider the following issues:

  1. DOM Elements. The DOM defines the page elements that you can manipulate dynamically. List the DOM elements that you feel should be manipulated dynamically at your site. For each element you list, describe what the dynamism will be. The page title, for example, is a DOM element. Consider whether there is any active content you would want to put into the title of the page.
  2. Rotating Banners. Many Web sites have banners that change, depending on factors such as the season, the time of day, or user history stored in cookies that keep track of what the user has been doing at the site. Consider whether the banner on your page should be static or dynamic. If dynamic, describe how and when the banner will change.
  3. RSS Feeds. In Chapter 2, you learned about RSS. Because the content of an RSS feed changes, it can be considered a dynamic element onscreen. Can you think of any ways in which an RSS feed, perhaps from other parts of your site or from related sites, would provide relevant dynamic content for your school or company home page?
  4. Time and Date. Consider whether your site should display the current date or time, and if so, recommend the strategy you will use to make sure that your page displays the date or time in a format that is meaningful and unambiguous to the end user.

If your instructor has asked you to hand in this assignment, make sure you put your name at the top of your recommendation, then copy it onto a disk or follow the other instructions you may have been given for submitting this assignment.

Lab Project 8.2: Using Cookies

Imagine that your superior has heard about cookies enabling certain Web sites to keep user information on the client side without requiring a server-side database. You have been asked to recommend whether your workplace could use this capability to reduce the load on your server. Use your word processor to write an essay in which you take a position on cookies and recommend how your site should use them. In developing your position, consider the following issues:

  1. Data. What kinds of data will you store in the cookies, and how will that data be used by your site?
  2. Expiration. How long should the cookies persist on the user’s hard drive, if at all? In answering this question, consider the nature of the data, how it affects your site, and the amount of time after which the data would become irrelevant, if any.
  3. Security.  Knowledgeable users can inspect the contents of persistent cookies that are stored on their hard drives. Consider whether the persistent cookies your site creates will need to be encrypted, to prevent them from being read in clear text.

If your instructor has asked you to hand in this recommendation, make sure you put your name at the top of your essay, then copy it onto a disk or follow the other instructions you may have been given for submitting this assignment.

Lab Project 8.3: Style Sheet Strategy

Style sheets provide a way to maintain a consistent look and feel for Web page elements across all the pages at your site, without requiring you to edit each page every time your school or company decides to change the style of an element onscreen. Imagine that your superior has put you in charge of creating a stylesheet strategy for your school or company Web site. Your task is to develop a set of guidelines defining which elements of your site’s Web pages will be controlled by stylesheets, and specifying the techniques that your team’s Web authors should use in applying the styles to your site’s content. Use your Word processor to write an essay in which you present these guidelines, taking into account the following issues:

  1. Cascading.  It is possible to link more than one style sheet to a document. Styles defined by the first style sheet cascade onto the second style sheet, which can either redefine them or leave them alone. If there is a third style sheet, the cascade continues. There is no limit to the number of style sheets that can be on the cascade. If you have a large organization, consider whether there should be an institutional style sheet that defines elements that will be stylized site-wide, followed by departmental style sheets that define certain other styles for use within a department.
  2. Classes.  Style sheets enable you to create a named class of style rules that apply only to elements that have the class attribute set to that name. Consider whether your site should use style classes, and if so, define the class names and describe what each class will do.
  3. Conventions.  List the coding conventions that you want your Web authors to follow in regard to style sheets. Specify the Web page elements that should never be modified so they will always inherit their styles from the cascade. Conversely, list the elements that should use the class attribute to identify the name of the style class to which they belong.

If your instructor has asked you to hand in these guidelines, make sure you put your name at the top of your essay, then copy it onto a disk or follow the other instructions you may have been given for submitting this assignment.