CS2513: Client-Side Programming
CSP08: Chapter 8: Manipulating Strings and Arrays

Objective:

• Manipulate strings with properties and methods of the String object
• Create regular expressions and use them to validate user input
• Manipulate arrays with properties and methods of the Array object
• Convert between strings and arrays, and between strings and JSON

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 8-2 (p.606)
  Project 8-1 [p. 603] will need to be completed in order to do project 8-2 but only the URL for 8-2 will be submitted for grading.
  Note: to access the Web console in Chrome select the "Customize and Control Chrome" icon (three horizontal lines) located to the right of the address bar. Select "More Tools". then Select JavaScript Console. In Firefox, click on the "Open Menu" icon (again three horizontal lines located to the right of the address bar). Select Developer, then Web Console, then JS.
  
  
• Hands-on Project 8-3 (p. 608)
  

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 08

Website Project

Overview

Students will create a word guessing game similar to the Hangman or Wheel of Fortune games with which many may be familiar. Asterisks will represent each letter of the mystery word. As the user enters a correct letter the asterisks will be replaced by that letter. When the user guesses all of the letters correctly, a congratulatory message will appear. When the page is reloaded, a new word will be randomly selected from an array of possible choices. Note: There is no Vanna White, no stick figures, the game does not track the letters already guessed, and does not have a Play Again button. However, feel free to add those enhancements, AFTER it is working correctly and validates.

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 08-Strings and Arrays
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 JSChapter07 and rename it JSChapter08. This week's work will be done using the files in this folder.
• Make a copy of objects.html and name it strings.htm/l. Delete the contents from the main area since it will be replaced by this week's work
• Create a webpage with a form similar to the following noting the the field with the asterisks is a textbox which is readonly and has a border of 0. Include a statement at the bottom, indicating the mystery words which will be used in your project. There must be at least 3 and no word can have more than 5 characters (Have pity on the person grading these!!). In real-life there could be a plethora of words with any number of characters. Note: Assign a unique name and id to the submit button. such as buttonSubmitGuess so as not to be confused with other submit buttons in this website.



In CSP.js

Update the top and bottom navigation such that the generic name of CH 08 is replaced by Strings 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 8: Manipulating Data in Strings and Arrays - Guessing Game ~~~~~~~~~~~~
               The JavaScript code is located in strings.js */

In strings.js


Setting up the mystery word

• Use an array to store the mystery words.
• Generate a random number equal to one of the indexes. (Example: In the sample there are four items, so the random number must be a value of 0 to 3.)
• Use this random number to select the word from the array for the current game.
• Determine the length of the newly selected mystery word.
• Use this number to determine the number of asterisks to be displayed.
• Create a string with that number of asterisks and then display it on the screen.
• The mystery word will change (along with the number of asterisks) each time the web page is reloaded.

Scripts for the game

• Start by assigning the secret word to a variable or you have use the array name with the appropriate index.
• After each guess, print the word using asterisks for each remaining letter, but fill in the letter the user guessed correctly.
• Store the user's correct guesses in the form field that was originally all asterisks. For instance if the word was cat and the user successfully guessed c and t the textbox would be changed from *** to c*t
• Multiple arrays will need to be used along with the split() and join() methods.
• Clear the guessed character from the form each time the Submit Letter button is clicked.
• Display a dialog box if the user selects the Submit Letter button with no entry in the text box
• When the user enters all of the correct letters the following congratulatory message will be displayed
  You guessed correctly! The mystery word is 'cat". (cat would be replaced by the actual word.

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.