ITSE 1411 Beginning Web
Assignment 8

Reading

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

Discussion

• 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. It is now thought of as a security breach to change the status bar.

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 (this section is not required since some browsers do not allow the status change)
  • 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 with the following change. The onclick should have ="self.close();return false;"
      According to the W3C The "return false;" at the end of the event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
    • Save the documents.

Working with Timeouts and Intervals

• Changing images requires either the use of a timer (setInterval) or a button to allow the user to change the image.
• setInterval() is a function attached to the window object.
• W3Schools setInterval() definition.
• The third argument is optional, the syntax for the setInterval function with the required arguments is:
  setInterval ( expression, interval );
  • The function setInterval tells you what to do (the expression) and how often to do it (the interval) in milliseconds.
  • The first argument triggers again and again according to the value in the second argument.
  • Here the timing is 2000 milliseconds, which is 2 seconds (unless download time takes longer).
• Concert.html setInterval example
  • Click on ConcertAds1.html
  • Look at the slide show.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • Look at the body tag. The onload event handler starts the process by assigning a variable called run which will set to true or false depending if the setInterval is active.
  • run is created in the head so that it is recognized throughout the page and it makes it possible for you to code the interval to stop (clear).

Clear Interval.

• The clearInterval() function will stop the setInterval.
  • Click on ConcertAds3.html
  • Look at the slide show.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • Remember the variable run contains true or false. Sending run to the clearInterval() function clears the interval by setting run to false.
  • Your screen still displays the last image displayed.
• Clear the Screen of the Image
  • Click on ConcertAds4.html
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • This example changes the value of the img src to show a different image.
  • Changes the value of the alt tag.
• User Control of the Slide Show
  • Click on ConcertAds5.html
  • Look at the slide show.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • In this example
    • The setInterval() is not called with the onload event handler in the body tag. It is called using a button.
    • The clearInterval() is also using a button.

• pineKnollProperties7 page
  • Follow the instructions on pages 195 - 196.
  • Save the document.

No Case project this assignment.

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
  • sell1
  • sell2

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.