ITSE 1411 Beginning Web
JS Module 4 Assignment

Assignment
- Using the Date Class
- windSurfing.htm Page
- Get the files for the WindSurfer Page Chapter 6 Files from your instructor (in instructor files from publisher), and save in your module4 folder.
- Using these files, complete step 1, Page 323.
- It is recommended when you change starting files, you rename them so that you always maintain a history of your work. Save index.html as windSurfing1.htm in your module4 folder. (Notice the addition of the number 1 in the name of the file. You can set your default choice for either htm or html. When you are provided a file provided with the text, it will have the extension html. If you save your work as .htm you can tell at a glance if you are working with the starting file or a file you have changed. You choose the method that works best for you.)
- If the instructor wishes, much of the code can be provided in hopes that you will spend your time studying the code rather than keying it all in and searching for typos.
- Get the coding for page 323 steps 2 and 3
(The index page from Chapter 6 Files zipped has a close form tag. You only want one close form tag.)
Additionally, it is recommended to rename "FormProcessor.html" to "windProcessor.htm". Get the coding page 324 steps 4, 5, and 6
- Save in the module4 folder. Your page should validate. View your page by clicking the preview tab on the right. Open your page in your browser. It should look like Figure 6-6 on page 325.
- Continue with your windSurfing1.htm page and save as windSurfing2.htm.
- Step 1 on page 325 is to open index.html. Use windSurfing2.htm instead.
- Step 2 is to add a link that calls the displayCalendar() function. The text instruction as to the location where to put it is a little confusing. Find your form tag. You will then see a table, a tr, a td, then inside that td is an h3 tag and a p tag. That is the p tag where you are supposed to add the code. After the input tag and before the close p tag. The code is:
<a href="" onclick="displayCalendar(); return false">Select Date</a>
- Get the coding for steps 3 - 11, for displayCalendar() but be sure to study the instructions for the explanation of each section of code. If the code is written in strict javaScript, there may be added backslashes '\' before all slashes '/' and backslashes '\' as required in strict validation. Since this is js and not html, it may not come up in your browser window and may require that you save and then open the file. If you download, then you will need to open the downloaded file. If it shows in your browser, then you can simply copy paste it into the head section of windSurfer2.htm page.
Get coding for pages 325 through 329, adding the displayCalendar() function.
- Continue with your windSurfing2.htm page and save as windSurfing3.htm.
- Step 1 on page 330 is to open index.html. Use the windSurfing3.htm instead.
- Step 2 is to replace the function heading. Your instructor code may include windSurfing2.htm because it is just easier to do it that way.
- Get coding for page 331, steps 3 and 4
(The text has 2 closing td tags in step 3. Be sure that is corrected.)
- Open the page in your browser. It should look like Figure 6-8 on page 332.
- Test your links as shown in step 6.
- Accessing Number Class Properties
- Continue with your windSurfing3.htm page and save as windSurfing4.htm
- Step 1 on page 335 is to open index.html. Use the windSurfing4.htm instead.
- Add the coding page 335, step 2.
- The following code is the code in step 3:
function calcGroupDiscount(groupSize) {
var dailyRate = 49;
if (groupSize > 5 && groupSize <= 10)
dailyRate = 49 * 0.9;
else if (groupSize > 10 && groupSize < 25)
dailyRate = 49 * 0.8;
else if (groupSize > 24)
dailyRate = 49 * 0.75;
var groupRate = groupSize * dailyRate;
document.forms[0].discount.value = groupRate;
}
- Complete steps 4 - 7.
- Test your page in your browser. Compare your page to Figure 6-9, page 336.
- Using Math Class Methods
- Continue with your windSurfing4.htm page and save as windSurfing5.htm.
- Step 1 on page 339 is to open index.html. Use the windSurfing5.htm instead.
- Add the coding page 339, step 2.
- Add the coding page 339, step 3.
- Test your page in your browser. Compare your page to Figure 6-10, page 340. You will not have a comma in the group rate amount. If you want to add the comma use:
(.toLocaleString)
- Declaring Basic Custom Objects
- Continue with your windSurfing5.htm page and save as windSurfing6.htm.
- Step 1 on page 342 is to open index.html. Use the windSurfing6.htm instead.
- Add the coding page 343, step 2.
- Add the coding page 343, step 3.
- Test your page in your browser. Compare your page to Figure 6-12, page 344.
- Update your project pages
- Be sure that all your project pages use the same css. Make sure that there are no unbroken links. You can do this by copying the URL of the project home page, clicking on link checker, and pasting the URL into the text box on the link checker page. Then in the box next to "Check linked documents recursively, recursion depth:" put a 5. That will actually check every link on your site up to 5 levels. You will then be able to check that there are no unbroken links. If you link to pages that you have not created, either delete the broken links or create pages for your links to link to. Remember this project is to be part of your portfolio and you want it to be attractive.
- 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 module4 folder.
- Upload your index.htm page and your module4 folder. (Be sure that you update all images and pages associated with the Coast City Windsurfing site.)
- Be sure to test for validation.
- Email that your assignment is ready for grading.