COP 1830 Project 6 - JavaScript Objects

Purpose:

This project is intended to give students experience in composing a dynamic web page involving [HTML DOM objects] and JavaScript functions. The project will use [event-driven behaviors written as JavaScript functions] to control the way in which the page is formatted and displayed. See the pages about the [HTML DOM Style Object] for help. Look at Chapters F - K in your JavaScript Virtual textbook and review the information about how to produce form checkbox input elements with XHTML. See the page about the [HTML DOM Checkbox Object] for help.

Sample Output:

Project Constraints and Objectives:

1. Use a plain text editor such as the Windows Notepad program to create a web page named "project6.htm" that displays as closely matching the illustration above as possible. You must not use Word, Wordpad, FrontPage, Dreamweaver, or any other web authoring software.
2. The heading at the top of the page should be a level 2 heading. The other three headings should be level 3.
3. Use embedded CSS rules to center both levels of heading and all other style definitions necessary to format the page. Assign a background color of #cccccc for the page.
4. The content under the the headings OBJECTIVES, DETAILS, and SUBMISSION should be created with division (div) elements that also include the headers.
5. Each division must be given a unique id attribute to identify it to JavaScript functions that will affect it. Name the division elements (in order of appearance): objectives, details, and submission.
6. One JavaScript function named "divFontSize" must be written to cause a "rollover behavior" for any of the three divisions, such that when a user moves a mouse over them they enlarge to a 25% larger font size and then return to their original size when the mouse moves away from them. (It does not matter if the header changes size or not.) The function must receive two passed parameters that indicate (1) the id of the division to be altered, and (2) the font size to be applied to the division.
7. Each division must have two "event handler" attributes that will call the divFontSize function and pass the related parameters to it when the mouse: (1) hovers over the division, and (2) moves away from it.
8. The checkboxes at the top of the page should be positioned within borderless cells in a one row table. The enclosing table element should be formatted with a "groove" style border. Each checkbox must be nested within a label element to ensure that click events on the label will also toggle each checkbox.
9. A second JavaScript function named "showHide" must be written in the head section that can toggle that division's display on or off, based on the state of the related checkbox. This function also must receive two passed parameters that indicate (1) which checkbox is triggering the event, and (2) the id of the division to be altered. See the use of the HTML DOM 'style.display' property in Chapter F of your Virtual textbook for help. All three divisions must display by default when the page loads.
10. Each checkbox must be given a unique id attribute to identify it to the showHide function. Name the input checkbox elements (in order of appearance): objchk, detchk, and subchk.
11. Each checkbox also must have an "event handler" attribute that will call the showHide function and pass the related two parameters to it.
12. Do not use any images, color, etc., or other multimedia content on this project.
13. Place a comment in the head section of the html container identifying the filename, yourself as the author, and noting the date.
14. Use the [W3C Markup Validation Service] to validate your XHTML code under transitional standards as identified by the DOCTYPE tag placed at the beginning of your HTML file as shown below. Also remember to write the appropriate meta tag in the head section to declare the document's charset.

Tips:

• Start working on your project as soon as possible. Do not wait until you believe that you have mastered all of the skills, but do practice examples in the textbook and supplemental reading sites to develop skill if possible. If you encounter an obstacle that you cannot solve after checking your book and other reference materials, send me a copy of the source code for comment. But remember that I will need time to respond. So give yourself that time by starting early.
• Build the project one step at a time. Try to create the web page with the checkbox elements and divisions in the body section first, then write each script in the head section. Attempt validation periodically.
• The sample output in the illustration at the top of this page shows the page with all of its elements visible and displayed at normal size.
• While debugging your code, employ alert boxes to report when your script has successfully reached benchmarks in your code. Then use the // style of JavaScript comment notation at the front of those statements to "comment out" the alert statements prior to submitting your code.
• Much of the source code will be "case sensitive", so pay attention to upper and lowercase.
• Save your work after each change before trying to view it in your browser. Also, you must instruct your browser to reload your page after saving any changes to it. Simply pressing the RELOAD (a.k.a. REFRESH) button on the browser’s button bar many not be enough to make all browsers completely reload the revised script.
• Finally, relax! Don't get stressed about this. Take it in small steps. Get as much of it working as you can. If you get stuck on one element, then use comment tags (<!-- and --> in XHTML and /* and */ in JavaScript) to mask any code that is causing trouble, move on to a different element, and come back to solve the problem later. Some frustration can be a valuable motivator to reinforce lessons. But too much can inhibit learning. Schedule your time to allow some breaks between working sessions.

Submission:

Login to the and use the Project 6 drop box under the Lessons tab to attach your "project6.htm" file.