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

ITSE 2402 Intermediate Web
JS Module 2.2 Assignment

Introducing the Document Object Model

- Al's Aviation
  - Download the DRGAviation files or get them from your instructor.
  - Complete the Al's Aviation assignment on pages 580, 581, 583, 584, 589, 590, 591, 594, 596, 599, 601, 602, 603, 604, and 605. Click on the links in the table to help you copy paste code.

drgaviation.css | CSS page provided for pages in this unit. I changed the use of uppercase to lowercase. Additionally, when changing these pages to validate with strict DTD the spacing for the image was not correct. To correct this the following code was added to the stylesheet img{ vertical-align:bottom ;} (Thank you wonderful students for finding this!)
index.html
flighttraining.html
instruments.html
Be sure to add your name to the title in the head section. These pages begin as basic pages. Things to note about index.html, flighttraining.html and instruments.html.
    - The pages link to drgaviation.css
    - The textbook version is transitional DOCTYPE.
    - The img attribute border="0" does not validate in strict XHTML.
    - The td attribute width="xx" does not validate in strict XHTML.
    - The name attribute will not validate in strict.
    - The table attribute align="left" does not validate in strict XHTML.
    - The entire body contains a table. (Below the close table tag, add your validation image links now.)
      - index.html changes:
        - There is a typo (I corrected) on line 86. The open p tag should be on line 88.
        - This form emails the data to an email address. If you want to test this, enter your email address. However, the current versions of Firefox and IE will no longer place form elements in the body of a message through email (making the mailto using JavaScript obsolete).
page580.htm | Dynamic HTML (DHTML) refers to a combination of JavaScript, XHTML, CSS, and the Document Object Model (DOM). Now you see why I have been so adamant about using valid HTML. It helps in the transition to using the DOM. Each element on a page is an object. This is why JavaScript can access each element on the page. Earlier browsers used different names, so use of the DOM doesn't work well with older browsers. Check out Tables 10-1 and 10-2 for the document Object Methods and Properties. Enter the text on page 580 to all three pages, view the pages, and notice that the title is now part of the pages.
page583.htm dream.gif discover.gif | An image object represents an image created using the <img> element. Check out Table 10-3 for the properties of the Image object. The src property allows JavaScript to dynamically change an image. Add the coding on page 583 to your index.html page and download the dream.gif and discover.gif images if necessary.
page590.htm | To create simple animation, change the images. Use the setInterval() method to cycle through the images and set the number of milliseconds for each change to occur. Add the coding on pages 590 and 591 to your flighttraining.html page and download the 23 airplane gif files to test the page. Be sure that your images link correctly.
page594.htm/td>
Using JavaScript to change images can appear jerky or flicker due to download times. Each image is opened and reopened from the source each time it changes. To eliminate multiple downloads, you can download all the images and store them temporarily. This process is called image caching. The steps for image caching are
    1. Use the Image() constructor to create a new Image object.
    2. Assign a graphic file to the src property of the new Image object.
    3. Assign the src property of the new Image object to the src property of an <img> element.
Add the coding on page 594 to your flighttraining.html page.
page596.htm | Even with image caching your page can still behave erratically until all the images are cached. To avoid the images from displaying immediately on download, change the onload event handler from the body to the Image object. Add the coding on page 596 to your flighttraining.html page.
page599.htm | To access, and modify dynamically, any element in a document with JavaScript use getElementById(), getElementsByName(), or getElementsByTagName(). Notice that getElementById() has no 's'. Here is how to remember which method has no 's'. Every id on a page must be unique. Therefore, no 's' in the method name. The getElementsByName() method returns an array of elements with a name attribute that matches a specified value. Append the getElementsByName() method to the Document object and pass to it a single argument representing the name attribute of the elements you want to retrieve. Notice that you not only identify the name but also the sequence (start counting with 0). Add the coding on page 599 to your flighttraining.html page. Your html code will not validate using strict XHTML. The name attribute used with the img element does not comply with XHTML strict rules. If this is a concern, change your doctype to Transitional. Either correct this error or use transitional DOCTYPE.
page601.htm | To use the getElementsByTagName() method, append the getElementsByTagName() method to the Document object and pass it a single argument represent the name of the elements you want to retrieve. Notice that you not only identify the tag but also the sequence (start counting with 0). Add the coding on page 601 to your flighttraining.htm page. Change the img name attribute back to id so that your html code will validate using strict XHTML. (The book does not tell you to change name back to id until page 602, it is recommended that you do it now.)
page602.htm | If you are only interested in accessing a single element, use the getElementById()method that returns the element in the document with the matching id attribute. Remember, no two ids can be identical. Notice there is no need for an array subscript to be used because only a single element will be accessed. Add the coding on page 508 to your flighttraining.htm page.
page604.htm | Another very useful property is the innerHTML property. The innerHTML property is easy to use and allows you to modify contents of almost any element without having to reupload the page. To use the innerHTML property, append it to an object representing the element whose value you want to retrieve or modify. Add the coding on pages 604 - 605 to all three pages, flighttraining.html, index.html, and instruments.html.

  - 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 finding validation errors.

Using the Document Object Model

- Complete Case Project 10-3 found on page 621 of your JavaScript text.
  - Open your template.htm page.
  - Save as pineKnollProperties.htm in your module2 folder.
  - Follow the steps described in the text but start with the template so that you will have the validation icons on your page.
    - Your href is the sticking point of this assignment. You want your anchor to be written <a href="#" id="cottageLink" onclick="changeSize(); return false;">View larger image</a>
This keeps the reference on the page without returning to the default. (Thanks again to wonderful students!)

Modify your index page

- Change your index page so that the title tag contains your name and ITSE 2402 Assignment Index Page. Write the code that will display the title as part of your page.
- Display a small image and allow the user to view a larger image. Any G rated image is fine. Make the image default to small so that it doesn't take long for downloads for the rest of the semester.

Update your index page:

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

Uploading:

- Upload your revised index.htm page to the public_html folder.
- Upload your module2 folder with the files:
  - pineKnollProperties.htm
  - 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.