Assignments will consist of two parts: Hands-on Projects and an ongoing individual case project.
The Hands On Projects will from the end of each chapter. Although it is recommended that students complete all of the projects only a limited number will be submitted for grading.
In addition, students will create a comprehensive web site that will be enhanced and modified throughout the class. Please take this very seriously not only for the purposes of this assignment/class but also for possible inclusion in your web work portfolio. This week the emphasis will be on creation of the site including styles. navigation, and documentation. All pages must be adequately documented and validate. Be sure to read and adhere to the Class Coding Standards.
Hands-on Projects
Required Projects
Follow the instructions in the text and as outlined in the General Instructions in the Chapter 1 Assignment. The data files which accompany the text will be required for these assignments. They can be downloaded from http://academic.cengage.com/resource_uploads/downloads/1305078446_432240.zip . Within the downloaded files there will be a folder for each project.
Need a Visual Reference?
The following are videos are of all of the Hands-on projects for this chapter, not just the ones required for this assignment. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. The Hands-On projects must validate for HTML5 and CSS3.
Website Project
Overview
The header, navigation, and footer will be moved from HTML code to functions in a .js file. This will allow for the code being in one location (similar to CSS). In that way if a change needs to be made, it can be made in the ,js file which will then be applied to all pages in the site.
Specifics
- Creating and calling functions
- Make a copy of the JSChapter01 folder and rename it JSChapter02. This week's work will be done using the files in this folder.
- Make sure the navigation is working correctly. Also be sure that the header and footers display as desired.
- Save index.htm/l as backup.htm/l (Do not just rename. A copy is being made so in case there is a problem, the original still exists and can be used for reference.)
- There will be two .js files (initialCSP.js and CSP.js). The link to initialCSP.js will be between the <head> </head> tags and the link for CSP.js will be right above the </body> tag. initialCSP.js will contain some essential body elements (header, nav, footer) which must be loaded before the page is displayed. CSP.js will contain the event listeners and remaining functions which will be accessed later by the user. to reiterate, the "heavy duty" code/functions are loaded later to make the page more quickly accessible to the user.
- Using index.htm/l In the <head> section, add a link to the Modernizr library (modernizr.custom.05819.js) and another to initialCSP.js
- Just before the closing </body> tag add a link to CSP.js. so that the web page can access the code within the file. (pp. 47-48). Note: It has to be at the end of the page as opposed to the <head> section. If it is physically located at the top of the html page, this will result in the EvenListener attempting to access a form element that has not yet been created.
- Then create two .js files named initialCSP.js and CSP.js being sure to add the documentation required by the Class Coding Standards.
- In the initialCSP.js file
- After the required documentation, add a comment similar to the following /* ~~~~~~~~~~~~~ Header, Nav, Footer Code ~~~~~~~~~~~ */
- create three functions: displayHeader(), displayNav(), and displayFooter().
Add a comment to identify each of the functions so as to make the code easier to read.- Copy/Paste the code between the <header> tags from the index.htm/l file into the displayHeader()function.
Do not include the actual <header> tags.
In the HTML file, comment out the code you just copied (Eventually you will delete it.)- Add document.write() statements around each line of HTML code (p. 53 gives an example)
- Be sure to keep the code organized and easy to read.
- Keep in mind that single (') and double (") quotes must be nested to avoid errors.
Example: document.write ("<li class='bigRed'> Go Big <span class='bigBold'>Red!</span></li>");- In index.htm/l between the <header> tags call the displayHeader()function. Note: The function has to be called from the location in the HTML page where the JavaScript code is to be placed. <script>displayHeader();</script>
- View and validate the web page to make sure it looks as desired. The header should appear as it did originally, there should be no change.
- Repeat the process for the <nav> and <footer> areas.
- When everything is working properly, delete the commented/moved code from index.htm/l. It now resides in the initialCSP.js file.
- Using Mathematical functions - Determining BMI
Need a Visual Reference?
The following video displays the basic functionality of the assignment and not the entire webpage. each student's site will be tailored to meet their talents and style. The following is just the most basic. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. All pages and items must validate for HTML5 and CSS3.
JavaScript(6e) Personal Website: Chapter 02-Functions
- Note: This assignment does not require the error trapping that would normally be expected. You are welcome to add it, but it is not required at this time.
- Make a copy of index.htm/l and name it functions.htm/l. (Note: This file will have links to both initialCSP.js and CSP.js)
- Delete the contents from the main area since it will be replaced by this week's work
- Update the top and bottom navigation in initialCSP.js file such that the generic name of CH 02 is replaced by Functions and the corresponding links will link to the new page.
- The formula for calculating body mass index (BMI) is weight * 703 / height 2. For example, if you weigh 200 pounds and are 72 inches tall, then you can calculate your body mass index with this expression: (200 * 703) / (72 * 72).
- Modify the <title> and <meta> tags.
- in the functions.htm/l page's <main> area
- Add a title/heading with the words... BMI Calculator
- Create a form and with three text boxes and a button:
- weight in pounds - >0 and < =750
- height in inches - >0 and < =100
- BMI result add the readonly attribute so users cannot enter values in this field)
- Button (value of Calculate BMI, type will be button)
- In CSP.js at the top of the code (just below the initial documentation)
- add a comment something similar to
/* ~~~~~~~~~~~ Chapter 2: Functions - BMI Calculator ~~~~~~~~~~~~ */
This will help to keep each week's work more organized and easy to find a script- create a function named calcBMI() that performs the calculation using the values in the weight and height text boxes and assign the result to the BMI text box.
- Convert the value to an Integer number by using the parseInt() function.
- Reference the text boxes from within the function by using the documentobject.getElementByID(name), and the value attribute of each text box (in other words, don’t use function arguments AKA pass values to the function).
- Add an event listener to to call the calcBMI() function
- Add CSS (and images if you wish) to format the newly added functionality
- Upload to the server and test
- validate index.htm/l and functions.htm/l using HTML5 and CSS3
- test the navigation
- verify that the header. nav, and footer display the same on both pages
- verify that the date last modified updated correctly
- Submit the assignment using the instructions below.