ITSE 1411 Beginning Web
JS Module 3 Assignment

Assignment
- oilPages page:
- Open your templateHTML5.htm page and save as oilPages.htm in your module3 folder.
- You are to use page 186, exercise 3-8, step 3, and create the script section but place in the body and not the head of your oilPages.htm.
- Test your page.
- prompt method:
- See W3C prompt example
- Work with the example and ask the user to enter the price of an oil barrel
- Change the var oilPrice = 52.86; to be var oilPrice;
- Place the prompt after the var oilPrice; instruction.
- Test your page by running your page with input of 50, 55, and 60.
- Portfolio page using prompt, if...else, and alert statements
- Add an order.htm page, or add an order to another page of your project in your portfolio where it fits.
- You can ask the user to order something. It can be a manual, a t-shirt, a ball cap; anything that makes sense that could support your site.
- This order will loosely follow Project 3-1 on page 187.
- You will ask for some type of order and then calculate shipping and handling.
- You will not use a text box for input, but a prompt. (We haven't covered text boxes yet.)
- This will require a use of "if...else" to determine the shipping and handling.
- Use an alert box to display the total cost with shipping and handling.
- Warning: All text is entered as a string. In order to use the value as a number you must parse the number.
purchasePrice = parseInt(purchasePrice);
will convert a text purchasePrice to an integer purchasePrice.
purchasePrice = parseFloat(purchasePrice);
will convert a text purchasePrice to a float (number with a decimal point) purchasePrice.
- Practice page using while and nested if, if...else statements
- Click on numberExamples.htm page.
- View source and study the code.
- This is an example of looping through 100 times and depending on the value of the number, deciding what to display.
- The example is written as a while loop. You are to rewrite the code with the following changes:
- Write the numbers from 1 to 90
- Use a for loop
- When the number is divisible by both 3 and 5, write "FizzBuzz"
- After you write "FizzBuzz", display a line break.
- Use the if else construct
- When the number is divisible by 3 write "Fizz"
- When the number is divisible by 5 write "Buzz"
- Name your page FizzBuzz.htm and save in your module3 folder.
- Referencing JavaScript Objects: You will be changing the same code seven different times. It is suggested that you rename the pages so that if you made an error, you wouldn't have to start completely over. The instructor will only look at the last page GosselinMotors/index8.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 you have GosselinMotors/index8.htm correct.
- Gosselin Motors home page toggling images between The A Class is Here and Come and Enjoy the Brand New Car
- Get GosselinMotors.zip file from your instructor (in instructor files from publisher). Unzip and store in a folder named GosselinMotors in your module3 folder. (If you downloaded from the editor's site, your images folder has an image with an uppercase extension GIF. That needs to be gif. Check to see if your zip file is corrected.)
- Open index.html and save as index1.htm (Notice you use of the number 1 in the name and the omission of the letter l in extension.) in the module3/GosselinMotors folder.
- Add the validation image icons from your template above the close body tag.
- Add the coding from page 194 of your JavaScript text.
- You should be able to click the images and have them change once you view the page in a browser.
- Save the document.
- Using the this reference
- index2 page
- If necessary, open index1.htm from your module3 folder in your editor and save as index2.htm.
- Add the coding from pages 195 - 196 of your JavaScript text.
- Test to be sure that your page still operates the same.
- Save the document.
- Add defaultStatus and status properties (this section is not required since some browsers do not allow the status change)
- index3 page
- If necessary, open your index2.htm page in your editor and save as index3.htm.
- Add the coding from pages 202 - 203 of your JavaScript text.
- 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.
- Save the document.
- The mouse mousedown and mouseup Events
- index4 page
- If necessary, open your index3.htm (or index2.htm if you skipped adding the defaultStatus properties) page in your editor and save as index4.htm.
- Add the coding from pages 205 - 206 and then step 2 on page 207 of the text. Warning: this will not validate, but you will change it later.
- Save the document.
- Use the open window method
- index5 page
- If necessary, open your index4.htm page in your editor and save as index5.htm.
- Add the coding from pages 212 - 213 of the text. Your page should now validate.
- Save the document.
- The focus method
- index6 page
- If necessary, open your index5.htm page in your editor and save as index6.htm.
- Add the coding from page 215 of the text.
- Save the document.
- The close method
- Car pages
- Follow the instructions on page 216 to add the close method to the different car 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.
- index7 page
- If necessary, open your index6.htm page in your editor and save as index7.htm.
- Follow the instructions on pages 219 - 220 of the text.
- Save the document.
- index8 page
- If necessary, open your index7.htm page in your editor and save as index8.htm.
- Follow the instructions on page 227 of the text.
- Save the document.
- Update index page with links
- Open your index.htm page in Komodo Edit.
- Update your index.htm page to link to your pages in your module3 folder. (For Gosselin Motors, you do not need to link to index1 - index7.)
- Link to your FizzBuzz.htm page.
- Upload your index.htm page and your module3 folder. (Be sure that you update all images and pages associated with the Gosselin Motors site.)
- Be sure to test for validation.
- Email that your assignment is ready for grading.