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
Special Note: This week's Hands-on is a continuation of the Chapter 4 project. While it is expected that students would be working through each of the chapter examples, some may wish to compare their work with the text's completed project. For that reason, the chapter's completed code is available in the weekly course content page. There is a link to the zip file which can be downloaded in the Required Sample Code area.
- Hands-on Project 4-2
Project 4-1 [p. 284] will need to be completed in order to do project 4-2 [p. 285] but only the URL for 2-5 will be submitted for grading.
- The completed code from the Chapter 4 example will be needed for this assignment. Be sure to read the instructions for copying it into the Hands-on project folders.
- Since this will be used, there are no additional files in the HandsOnProject 4-1 and 4-2 folders. These folders are being provided to save the updated files that will result from completing the projects.
- Note: The name of the file is tractor.htm so this will need to be included in the URL when submitting this assignment.
- Hands-on Project 4-4
Project 4-3 [p. 286] will need to be completed in order to do project 4-4 [p. 286] but only the URL for 4-4 will be submitted for grading.
Note: The program accepts blanks as one of the five items. So if the textbox is blank and Submit is selected, this will be counted as one of the five. However the blank will not display on the screen. There really should be error trapping for this but it is NOT required that you add it.
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. Please note that the hands-on projects must validate for HTML5 and CSS3.
Website Project
Overview
The time has come to move the remaining JavaScript into the .js file. The three functions in intitalCSP.js will be moved into CSP.js. initialCSP.js will no longer be used. Two new functions will be created in CSP.js: setUpPage() and createEventListeners(). A new event listener will be added for the windows load/onload event.
setUpPage() will include calls to the displayHeader(), displayNav(), displayFooter(), and createEventListener() functions
All current event listeners will be moved to the newly created createEventListener() function.A new addEventListener/attachEvent will be added for windows load/onload. This window.load/onload addEventListener will not be in the createEventListener() function or any other function. It is a stand alone which executes as the page loads. The new eventListener will call setUpPage () which in turn calls the displayHeader(), displayNav(), displayFooter(), and createEventListeners()
Also in. Instead of document.write(). the content will be displayed using the innerHTML properties of the HTML5 elements. When this has been completed, the web pages should appear the same as in the past. The only difference is that all of the js (other than the link to the .js file) will have been moved out of the HTML page.
Need a Visual Reference?
There are no visual changes in the web page layout this week other than renaming CH04. The JavaScript changes are all in the background. Also the content of debug.htm/l will vary from student to student, so no visual reference is being provided this week.Specifics
- Make a copy of the JSChapter03 and rename it JSChapter04. This week's work will be done using the files in this folder.
- Changes to all web page
- The code from initialCSP.js will be moved to CSP.js and initialCSP.js will no longer be used
- Modify the index.htm/l page by remarking/commenting out the code
- calling the following functions: displayHeader(), displayNav(), displayFooter() functions. (in <body> section)
- linking to initialCSP.js (in <head> section)
Note: Once the changes are working properly in index.htm/l, the same changes will be made in ControlFlow.htm/l and Functions.htm/l- Creating Event Listeners
- At the bottom of CSP.js, (Note: It is being done at the bottom because it is code that was added in one of the first assignments and they are items for the entire web page.)
- Add the following comment at the end of the code in the CSP,js file
/* ~~~~~~~~~~~ Event Listeners~~~~~~~~~~~~ */
- Create a function named createEventListeners()
- Move the event listeners currently in the CSP.js file into this function.
- Create a function named setUpPage()
- In setUpPage(),
- call the displayHeader(), displayNav(), and displayFooter() functions
- call the createEventListeners() function
- Create an addEventListener/attachEvent for the window load/onload event. This will call setUpPage()
- Setting Up the Web Page
- The functions from initialCSP.js will be moved to CSP.js
- Add a comment
/* ~~~~~~~~~~~ Set Up Page ~~~~~~~~~~~~ */- copy/paste the following functions: displayHeader(), displayNav(), displayFooter()from intialCSP.js to just below this comment in CSP.js
Note: They will now be called from setUpPage() which is called from the window load/onload event listener
- Each of these three functions will need to be modified so that the innerHTML property of the tag will be used to display the content instead of document.write().
- Begin with displayHeader().
- Make a copy of the function and remark/comment it out the content. This will eventually be deleted but will remain while work is being completed.
- Declare a variable named headerContent. This will eventually become the content of the header. It will be a string that can be created using concatenation.
Example: Double quotes cannot be used inside of double quotes do use single quotes or escape characters (\")var addVariableValue = "!";
headerContent="<img src='images/logo.jpg' height='200' width='200' alt='My Logo'>"
headerContent+="<h1>My Great Site" + addVariableValue + "</h1>"
pageHeader=document.getElementsByTagName("header");
pageHeader[0].innerHTML = headerContent;
- Repeat this process for displayNav (navContent) and displayFooter (footerContent)
- Check the code and make sure everything displays as desired. When it does delete the commented out code.
- Comment out the link to initialCSP.js as well as the function calls in Functions.htm/l, Test and when it is working properly delete the link and function calls.
- Comment out the link to initialCSP.js as well as the function calls in ControlFlow.htm/l, Test and when it is working properly delete the link and function calls.
- New web page: debug.html
- Make a copy of index.htm/l and name it debug.htm/l. Delete the contents from the main area since it will be replaced by this week's work
- in CSP.js in the displayNav() function change CH 04 title to Debug Code and link it to debug.htm/l
- In the main content area, compose at least three (3) paragraphs of at least three (3) sentences. You are welcome/encourage to make it longer if you wish. The topic is "Error Trapping and Debugging HTML, CSS, and JavaScript". Include information about your preferred method (be specific) and recommendations.
NOTE: Assume everything on the Internet is copyrighted. You may NOT just copy and paste content from a web page. The information MUST be in your own words. There are programs where I can check to see if you work was copied from a website. If you need help composing the paragraphs, the Communications Lab has staff that can assist you.