ITSE 1411 Beginning Web
Assignment 8

Design Text, Chapter 10 pgs 179 - 191, (Lists)
JavaScript Text, Chapter 4, pgs 171 - 196 (Browser Object Model)

Reading:

• Referencing JavaScript Objects
  • Referencing JavaScript objects makes it possible for you to control each element within a document.
  • The first sentence on page 174, "Some of the objects in the browser object model represent arrays." is crucial to your understanding access of an object on the page. Yes, you can assign a name or id to the object, but being able to address the image by it's location within the array, makes access by using a variable value as the subscript value.
  • The onmouseover to change the status bar no longer works with today's browsers.

Practice:

• Referencing JavaScript Objects You will be changing the same code seven different times. I had you rename the pages so that if you made an error, you wouldn't have to start completely over. However, I am only looking at the last two pages pineKnollProperties6.htm and pineKnollProperties7.htm page. So, if you accidentally forget to change the name and save over a page, you do not have to go back and redo the pages as long as have pineKnollProperties6.htm and pineKnolllProperties7.htm correct.
  • pineKnollProperties page toggling images between Thinking of Selling your Home and Pink Knoll Properties
    • Click on PineKnollProperties.html.
    • Right click on the page.
    • View Source
    • Save as pineKnollProperties1.htm (notice you use of the number 1 in the name.) in the assignment8 folder.
    • Click on pineknoll_styles.css.
    • Save as pineknoll_styles.css
    • Open pineKnollProperties1.htm in your editor.
    • If your copy of pineKnollProperties1.htm does not have the validation icons, add the validation icon code from your template above the close body tag.
    • Right click on the image below and save image as sell1.jpg in your assignment8 folder.
      
    • Right click on the image below and save image as sell2.jpg in your assignment8 folder.
      
    • You also need to click and save each of the following pages. You do not need to add your validation icons to these pages. And, once you pull up the page, right click on the image and save the image, too.
      cottage.html
      ranch.html (If you downloaded ranch.html from the publishers site, there is a typo. The link to the image should be lowercase ranch.jpg. I corrected the typo on this page.)
      townhouse.html
      colonial.html
      contemporary.html
    • Add the coding from page 174 of your JavaScript text.
    • Save your page and compare it to figure 4-3. You should also be able to click the images and have them change.

• Using the this reference
  • pineKnollProperties2 page
    • If necessary, open pineKnollProperties1.htm from your assignment8 folder in your editor.
    • Add the coding from page 175 of your JavaScript text.
    • Save the document as pineKnollProperties2.htm.
    • Test to be sure that your page still operates the same.

• add defaultStatus and status properties
  • pineKnollProperties3 page
    • If necessary, open your PineKnollProperties2.htm page in your editor.
    • Add the coding from pages 181 - 182 of your JavaScript text.
    • Save the document as pineKnollProperties3.htm.
    • Open in your browser and look in your status bar (along the bottom of the screen) when you move your mouse over the first property.

• The mouse mousedown and mouseup Events
  • pineKnollProperties4 page
    • If necessary, open your pineKnollProperties3.htm page in your editor.
    • Save as pineKnollProperties4.htm in your assignment8 folder.
    • Add the coding from page 185 of the text. Warning: this will not validate.
    • Save the document.

• use the open window method
  • pineKnollProperties5 page
    • If necessary, open your pineKnollProperties4.htm page in your editor.
    • Save as pineKnollProperties5.htm in your assignment8 folder.
    • Add the coding from pages 189 - 190 of the text. Your page should now validate.
    • Save the document.

• the focus method
  • pineKnollProperties6 page
    • If necessary, open your pineKnollProperties5.htm page in your editor.
    • Save as pineKnollProperties6.htm in your assignment8 folder.
    • Add the coding from pages 191 of the text.
    • Save the document.

• the close method
  • property pages
    • Follow the instructions on page 192 to add the close method to the different property pages.
    • Save the documents.

• Working with Timeouts and Intervals
  • pineKnollProperties7 page
    • Follow the instructions on pages 195 - 196.
    • Save the document.

Instead of Case Project this assignment, create a pineknoll_styles.css page.

• Create a pineknoll_styles.css page:
  • Set the font family, color, and background color the page body.
  • Set a font color for h1, h2, and p tags.

Update your index page:

• Add links on your index page to the pages in your assignment8 folder that are to be graded:
  • pineKnollProperties6.htm
  • pineKnollProperties7.htm
  • pineknoll_styles.css

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment8 folder with the files:
  • pineKnollProperties6.htm
  • pineKnollProperties7.htm
  • cottage.html
  • cottage.jpg
  • ranch.html
  • ranch.jpg
  • townhouse.html
  • townhouse.jpg
  • colonial.html
  • colonial.jpg
  • contemporary.html
  • contemporary.jpg
  • pineknoll_styles.css

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.