CS2513: Client-Side Programming
CSP09: Chapter 09 - Managing State and Security

Objective:

• Save state information with query strings, hidden form fields, and cookies
• Describe JavaScript security issues and employ coding practices designed to address them

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 9-3(p. 670)
  Project 9-2 (p. 667) will need to be completed in order to do Project 9-3 but only the URL for 9-2 will be submitted for grading.
  
  
• Hands-on Project 9-5 (p. 675)
  Project 9-3 (p. 67) will need to be completed in order to do Project 9-5 but only the URL for 9-5 will be submitted for grading. Note that the book states Project 9-4 , but using Project 9-3 should work as needed.

Note: One of the easiest ways to view cookies is to use FireFox. From the menu, select Preferences --> Privacy . Select the "Remove Individual Cookies" link. If you have a great number of cookies, it may be necessary to search for the ones related to apollo1 Clicking on this will reveal the cookies for apollo1. Selecting an individual cookies will show the values for the cookie in the documentation area below the cookies. You can the remove a cookie as desired to allow for retesting of the code. This is demonstrated in the silent video for this week's Hands-On 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. Please note that the hands-on projects must validate for HTML5 and CSS3.

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

Website Project

Overview

Cookies will be used to save user preferences for the size of the text in the main content area. The header and footer will not be included in the resizing.. The first time the page loads, the text will be the default size. Once the user has selected a size, that value will be stored in a cookie for 30 days. When the page loads/reloads the cookies will be read and the page will be styled accordingly..

The main content area will have information about maintaining state. The size of this text may be dynamically increased/decreased by the user by clicking on a button, link or image.

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 09-State and Security
Note: The video does not display the updated footer with the date last modified since that will part of the document that is displayed on every page.

Specifics

• Make a copy of the JSChapter08 and rename it JSChapter09. This week's work will be done using the files in this folder.
• Make a copy of strings.htm/l and name it state.htm/l. Delete the contents from the main area since it will be replaced by this week's work.
• Page Content
  • In the main content area create content consisting of a minimum of four paragraphs with information on maintaining state. Each paragraph must a minimum of three sentences. Remember that information on the Internet cannot be copy/pasted. The information must be in your own words.
    • The main content area will need to use have an unique idea so it can be dynamically styled. if there is an id from a previous assignment, change it to a new unique value
    • Style the content area to reflect the default values (font size of 100%, medium selector with and indicator(red text), the small selector and the large selector will have no indicator (black text). Note: In FireFox it may be a bit deceiving because the large A appears to be shaded. In Chrome, the buttons and text look pretty close to the same size. This is just another reason why the red text is essential.
      
• Size Selectors
• In the upper right corner of the screen, there are to be three selectors. These can be buttons (as is seen in the video), images, or text links. Note: Buttons can be created without being between <form> tags. The page will still validate.
  • The selectors determine the size of the text in the content area. (80%, 100%, 125%). 100% is the default. When the user clicks on a button a cookie is created to save the text size selected by the user.
  • The selected value is to be differentiated from the other items in some means. In the video the text on the button is red.
  • When another selector is chosen, the text will be resized, the cookie will be updated with the new value (This is done by calling code to create the same cookie just with different values.), and the visual indicators will be updated.
• Create Cookies
  • The user's size selection and corresponding indicators will be stored in a persistent cookie -- yes one cookie with five items
    • size of the text
    • color/indicator for the first option
    • color/indicator for the second option
    • color/indicator for the third option
    • expiration date which is 30 days.
  • As mentioned this must be done in ONE cookie, not five. Some browsers limit the number of cookies per domain. This is just a another reason why coding must be efficient. So for this assignment, there will be one cookie with five name-value pairs.
• Read Cookies
  • When the user loads/reloads the page the cookie, if there is one, will be read and will the use the settings stored in the cookie. If there is no cookie, the text will be 100% with the small size indicator being black, the medium (default) one being red, and the large one being black, Again if you are using a text link or image, another type of indicator may be more appropriate. It does not have to be red and black.

In CSP.js

• Update the top and bottom navigation such that the generic name of CH 09 is replaced by State and the corresponding links will link to the new page, strings.htm/l.
• At the top of the code (just below the initial comments) add a comment something similar to
  
  /* ~~~~~~~~~~~ Chapter 9: Managing State Information and Security - Cookies ~~~~~~~~~~~~
                 The JavaScript code is located in state.js */

In state.js

• Create event listeners for each of the three selector items (small, medium, large). When one of these are selected a cookie will be created using the values described above. Depending on which item is selected, the values sent to the createCookie() function will vary. To summarize, when the user chooses a selector ( small, medium, large), the main content text will change to the appropriate size. The corresponding image/text/button will be will have some type of indicator to show its values are being used. The other two selectors will return to their default values. The createCookie() function with the five parameters will be called and executed.
• The getCookies() function will be called when the page loads so the user's preferences can be retrieved and applied. The values from the cookies will used to style th text on the page as well as the indicator
• Since the five values are stored in this one cookie. The method .substring() will need to be used to retrieve the values to the right of the equal sign (=}. When this string is retrieved, the four values (the expire date will not be included) will be in a string separated by commas (,) (not semicolons, semicolons separate cookies). This string must be .split() into an array. Then each of the four elements of the array can be used to set the user's preferences. (size, small indicator, medium indicator, large indicator)

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.