CS2513: Client-Side Programming
CSP05: Chapter 5: DOM and DHTML

Objective:

• Access elements by id, tag name, class, name, or selector
• Access element content, CSS properties, and attributes
• Add and remove document nodes
• Create and close new browser tabs and windows with an app
• Use the setTimeout() and setInterval() methods to specify a delay or a duration
• Use the History, Location, Navigation, and Screen objects to manipulate the browser window

Points

• Full Credit: 40 Points
• Late/Resubmit Credit: 36 Points

Situation

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

Specifications

Hands-on Projects

Required Projects

• Hands-on Project 5-4
  Project 5-2 [p. 356] will need to be completed in order to do project 5-4 [p. 358] but only the URL for 5-4 will be submitted for grading.
  Note: There is no error trapping for the address which in the "real world" would not be acceptable, but is allowed for this project.
  
  
• Hands-on Project 5-5 (p. 361)
  Note: Since there is no content after Amendment X, it will appear on the bottom of the screen. This is normal when linking to various area of a web page.

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.

JavaScript(6e) Hands-on Projects: Chapter 05

Website Project

Overview

Throughout the chapter a photo gallery is being created. This gallery with some modifications will be incorporated into your website project.

Important Note: The js/css files could be incorporated into CSP.js and CSP.css but that will add a whole new level of difficulty. Also, there may be naming conflicts which could cause issues. Trying to access elements that do not exist would be another complication. Still another might be if there was a setInterval() command as there is in the assignment. If this code was in CSP.js, it would be executed when CSP.js file is loaded. This can cause issues when viewing other pages in the site.
If the user is only going to access one portion of the website, perhaps they really do not need to download js code for every single page of the site. With that in mind. in the last assignment, we learned how to incorporate the JavaScript into one js file. It is still a best practice to do that "when appropriate", but if there is a very large segment of code that is only going to be used on one page, perhaps it is best to leave it in a separate file. This is the convention which will be used for this assignment.


Need a Visual Reference?
The following video displays the basic functionality of the assignment and not the entire web page. 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 05-DOMandDHTML

Specifics

• Make a copy of the JSChapter04 and rename it JSChapter05. This week's work will be done using the files in this folder.
• Now this will be a little tricky, but I will try to make it as simple as possible.
• Download the data files for Chapter 5. In that folder, there is a subfolder named Chapter. Copy the files from the Chapter folder into your website folder. This would include photos.css, photos.htm, photos.js, zoom.css, zoom.htm, and zoom.js.
• Copy the images IMG_01.jpg to IMG_05.jpg and IMG_01sm.jpg to IMG_05sm.jpg into your images folder. If you have named your images folder assets, media or something other than images, just copy the whole images folder into your site. The images have to be in an images folder. If they are not, modifications will need to be made to the code to accommodate the different name. This could add another level of difficulty that is not needed.
• Make a copy of index.htm/l and name it DOM.htm/l. Replace the contents of the main area with the contents from photos.htm (Be sure that the <article> tag is included.
  • In addition to CSP.css and CSP.js add links to photos.css and photos.js. Zoom.html will include links to zoom.js and zoom.css. Zoom.html does not need to have links to CSP.css or CSP.js but adjustments may need to be made to zoom.css to have the page coordinate with the rest of the site.
  • CAVEAT:
    • Code overwriting other code
      • If there is duplicate code with different values, the one last loaded will be the one last executed. For example let's say that in one css file, the body background color is set to red. Then in code further down the file or in another file which is also attached to the webpage, the background color is set to blue. The webpage would display with a blue background because the blue (last loaded/executed) overwrote the red (first loaded/executed). Make sense? So when loading multiple js or css files, consider the order the code will be executed. Duplicated code may need to be deleted and/or modified. Always be sure to check the effects on the entire site.
    • Images on web page
      • When using getElementsByTagName() to access images on a web page, "all" images are included in even the ones in the header area. So for this assignment, when incorporating the gallery into the site template, adjustments may need to be made because of the logo and/or other images on the page. Perhaps the loop value may need to be adjusted. If this is not done, the cycled images may display in the logo area.
• In the new DOM.htm/l change the meta tags as appropriate.
• In the <header><h1> area change the page heading from Photo gallery to a name that is more descriptive of your actual photo gallery. In the sample it was changed to Swiss Photo Gallery.
• So basically, the contents and required links from photos.htm have been incorporated into DOM.htm/l.
  • Now that this is working, REPLACE the images by images of your choosing. (Remember copyright laws!). The sizes are IMG_01 to IMG_05 images are 480x207 and the IMG_01sm to IMG_05sm images are 360x202. If you prefer to wait and do this at the end, that is fine..but before submitting for grading, the images may NOT be the default images. They must be tailored for your site. In the example, I replaced the plants with images from Switzerland. Images should be in landscape mode. Additional coding would be required for portrait.
    
    Need to find images?

  Use your personal images of use the Library's resources. https://librarynt.occc.edu/login?url=http://quest.eb.com
  If an MLA citation is required include it at the bottom of the main content area. These images can be used for educational purposes only and may not continued to be used outside that realm.

  Need information about Creative Common Licenses? Check out this short video. Creative Commons and Copyright Info: https://youtu.be/8YkbeycRa2A

  Need to resize images?

  Photoshop and similar products may be used to resize images. If you do not have access to photo editing software, PicMonkey http://www.picmonkey.com/ is one that I have used when creating online photobooks. At the time of this writing you do not need to sign up for or purchase Royale. If you MouseOver/Click Edit at the top of the screen and you should have access to the necessary tools

• Related to the images, there are a couple of modifications which must be made for the site to validate. The code is as follows:

<figure id="fig2">
   <img width="360" height="202" />
</figure>
This will not validate because there is no src or alt attribute. If src="" is added it will not validate since for src an empty value is not allowed. I modified the code as shown below. This must be done for all fig2, fig3, and fig4.

<figure id="fig2">
   <img src="images/IMG_05.jpg" width="360" height="202" alt="Swiss Photo Gallery" />
</figure>

• There will be a warning needing regarding the <article> tag needing a heading <h1> to <h6>. You can ignore this.

• In CSP.js,
  • Update the top and bottom navigation such that the generic name of CH 05 is replaced by DOM/DHTML and the corresponding links will link to the new page, DOM.htm/l.
  • At the top of the code (just below the initial comments) add a comment something similar to
    /* ~~~~~~~~~~~ Chapter 5: DOM and DHTML - Photo Gallery~~~~~~~~~~~~ */
    // The JavaScript code is located in photos.js and zoom.js
    Note: In reality these code should be incorporated into csp.js but there is already enough going on that we will just leave the code in separate files to make it easier to follow the text instructions.
• Work through the chapter's example. Add comments as needed so that I will know that you understand what is being done and not just typing from the text.
• To summarize the modifications
  • incorporate the photo gallery code into the website so it has the same headers, footers, and navigation as the rest of the site.
  • The new js and css files: photos.js, zoom.js, photos.css and zoom.css will be separate files. Be sure to add links to these files.
  • Change the title of the photo gallery
  • Use images of your own choosing, but remember copyright laws.
  • Make changes so the web page will validate.

Recurring Specifications

• Web pages must validate for HTML5 and CSS3 must validate. If errors are generated the entire assignment will not be graded.
• Hands On Projects
  • Pages must validate for CSS3 and HTML5
  • Comments in the HTML code must be updated to include the student name and date
  • Additional comments, meta tags, and documentation are not required.
  • Students are not required to move in-line JavaScript code to a separate .js file in the Hands-on Projects.
• Personal Website
  • All pages in the site must contain the same header, footer, and navigation.
    
  • All pages in the site must be formatted with CSS so they are consistent with other pages in the site and professional in appearance.
  • All formatting must be done using an external style sheet.
  • The function/s are to be located in a .js file which is linked to the web page. No in-line JavaScript is allowed.
  • Required and appropriate documentation and comments must be included for all HTML, CSS, and JS files
  • Tables may NOT be used unless otherwise stated.
  • Meta tags, date last modified, and OCCC disclaimer, as described in Class Programming Standards must be included.
  • The navigation bar for all pages in the site must be updated to include working links for all of the pages that have been created thus far.

Assignment Submission

• Upload all three folders (two [2] for the hands-on projects and one [1] for JSChapter##) to your apollo1 account.
  Note: ## is to be replaced by the two digit chapter number - Example: 01, 02, 11, 12.
• View the web pages in Chrome, Firefox and, if possible, Safari and Internet Explorer
• Re-validate (HTML5 and CSS3) and double check to make sure all items are visible from all computers. (Reminder: When grading, the Validation tool in Chrome and/or FireFox's Web Developer Tool Bar is used. All pages MUST validate using this method.
  
• Submit the URLs for all three items in the LMS.
• Submission links must open web page in a new window (not inside of the LMS) and display the page.
• Assignments not meeting the previous requirements (opening in a new window and HTML5/CSS3 Validation) cannot be graded.
  If it is still within the late/resubmit period, the assignments can be resubmitted (10% penalty). If it is after the final deadline, the work can no longer be submitted which could result in a zero for the assignment.