Title: Competency 3.1, 2402--Intermediate Web Programming
Course: Intermediate Web Programming (25436)

ITSE 2402 Intermediate Web
JS Module 3.1 Assignment

Discussion

- Discussion topics are posted in the table next to the coding pages in the table under Practice.

Practice

Copy your pages from DRGAviation (index.htm, flighttraining.htm, and instruments.htm) into your module 3 folder. You may copy your images too. If you don't copy your images, then you will need to change all of your image links to refer to the correct image location. There is room on our server to have the images in more than one folder as we delete all accounts each semester, so you may do whatever works best for you regarding images. Start with the assignment on page 627. Change the menu for each page, not just the one that the text steps your through.

DRGAviation page changes
(JavaScript text page 629.htm) | You can pass the this reference as an argument. When the this reference is passed to the function, the local variable declared in the parameter list will receive the value of the this reference. (This is not applied to your assignment yet, just an example.)
(JavaScript text page 632.htm) | You can modify CSS properties and access the styles by the element id, element name, or tag name using the getElementById(), getElementsByName(), or getElementsByTagName() methods. Make changes shown on page 632.
(JavaScript text pages 636 and 637.htm) | You can use dynamic positioning to position elements on a page. Make changes shown on pages 636 and 637.
(JavaScript text pages 640 and 641.htm) | Use dynamic positioning to create animation that "travels" across the screen. Make changes shown on pages 640 and 641.
(JavaScript text pages 646 and 647.htm)
Expandable menus are simulated using the display property. Place elements and text within a <div> element and use the display property to simulate expandable menus.

When you assign a block-level element's display property a value of "none", then the associated element is not displayed. When you use JavaScript to assign a value of "block" to a block-level element's display property, the Web page is reformatted to allocate sufficient space for the element and its contents, which are then displayed.

Add the coding on pages 646 and 647 to your instruments.html page.

You are to make all five headings expandable using similar elements and event handlers.
Flight Experience
Aircraft
Syllabus
Theory and Knowledge Testing
Estimated Cost of a Private Pilot Certificate
(JavaScript text page 652)
There are many ways to create navigation menus. The easiest way is to use a table to contain your menu items. First create a master table that will contain nested tables for each individual menu. For each navigation menu, you nest another table within the same cell as the menu heading. To show and hide each menu, use the visibility property, which determines whether an element is visible. Using the hidden property still allocates space, it is just not visible.

There are a couple of problems in the text book on step 2:
- As written, it works, but the navigation button doesn't change.
- Additionally, the img tag with the id="b1" will not validate. Change
border="0" vspace="1" hspace="1" to
style="border:0px; margin:1px"

Make changes shown on page 652.
JavaScript text page 657 | Sliding menus appear to slide open and closed. In order to simulate a sliding effect, use the left and top properties. Within a horizontal navigation menu, create each individual menu within its own table. Your sliding menu will be slower since it is using the setInterval method to give the sliding effect. Make changes shown on the source code of this page showing pages 657 and 658. (You can copy the navigation image from the example page by viewing the image and saving it.)

- Remember to change your links to match the names of your pages if necessary so that your pages will link to each other
- Remember to use your validation icons to aid in my grading.

Update your index page:

- Add links on your index page to the pages in your assignment folder that are to be graded:
  - flighttraining.html
  - instruments.html
  - index.html

Uploading:

- Upload your revised index.htm page to the public_html folder.
- Upload your module3 folder with the files:
  - flighttraining.html
  - instruments.html
  - index.html
  - all images used in your pages

Testing uploaded pages

- Once uploaded, go to your site
- Validate your index page and all pages in this assignment (your css page will validate through the html pages that refer to your css page)
- Make any corrections for any page that does not validate or display correctly.
- Email your instructor for grading.