ITSE 1411 Beginning Web
Assignment 10

JavaScript Text, Chapter 7 (Manipulating Data in Strings), pgs 331 - 357
FormProcessor.html example (notes)

Reading:

• FormProcessor
  • The FormProcessor page uses JavaScript to parse the information sent to it from another page.
  • The use of the FormProcessor.html is to show you that you can move information from one page to another page. This is called state information.
    • State information is the data entered on a page in a form or the information about the instance of the page. When a page is loaded the JavaScript interpreter is started. If you do nothing, when a page unloads, all of your JavaScript objects are lost. This means that you lose all of your state information.
      • After you have saved the EmailForm.html page, upload it in your browser.
      • Fill out the information in the text boxes.
      • 
      • From your browser, click on the send button.
      • Look at the address bar after your FormProcessor.html page comes up.
      • The ? separates the url from the data that has been sent from the EmailForm.html page.
      • Using the data shown in the image above,the state information looks as follows (without the line breaks):

        ?sender_name=Judy+Scholl&sender_email=jscholl%40austincc.edu&recipient_name=class+members
        &recipient_email=ITSE1411%40gmail.com&subject=class+assignments
        &message=Be+sure+to+complete+your+class+assignments&recipientsList=
                              

  • Look to the right of the ?. Notice the name value pairs that were sent from EmailForm.html page.
  • After the ? you have listed the name of each element from the EmailForm.html page as well as the value that was entered. These are called the name=value pairs. Each name=value pair follows separated by &.
    
    
  • Explanation of the javaScript code found in FormProcessor.html:
    
    
    • var formData = location.search;
      This statement allows you to get the query date. The search property is a string beginning with a question mark that specifies any query information in an HTTP URL.
      After this statement is executed, the variable formData consists of everything beginning with the ? to the end of the line.
      
      
    • formData = formData.substring(1, formData.length);
      This statement uses the substring function to start in position 1 of the variable formData. Position 1 is the position following the ?. Remember, strings start counting with 0.
      The length function returns the number of characters in the string, so the last string element will be the end of the substring.
      After this statement is executed, the variable formData consists of everything after the ?. Essentially, the ? is deleted, and the character after the ? is now in position 0.
      
      
    • Embedded blanks are not allowed when data is sent from one page to another. The browser automatically substitutes blanks with a "+" . If there are any +'s in your values, they need to be converted back to blanks. The while loop

                        while (formData.indexOf("+") != -1)
                          {
                            formData = formData.replace("+", " ");
                          }

      makes that change. The variable formData is a string. The indexOf function returns the location where a "+" is found or a -1 when no "+" is found.
      The replace function replaces the string in the first argument with the string in the second argument.
      Once the loop returns a -1 to end, all "+" characters will be blank characters.
      
      
    • formData = unescape(formData);
      Special characters are not allowed when data is sent from one page to another. The browser subsititues special characters with a character code entity. The function unescape changes the character code entity back to the special character. You would need this when an email address is entered.
      
      
    • var formArray = formData.split("&");
      The function split will break a string into array elements at the character designated. Your current formData string variable has a "&" between every name=value pair. After this statement, you will have a new array variable named formArray.
      formArray[0] will contain the first name=value pair for the first element in your surfboardRentals.htm page.
      formArray[1] will contain the second name=value pair for the second element in your surfboardRentals.htm page.
      
      
    • The last coding displays the contents of the array formArray (which is every name=value pair.)

                  for (var i=0; i < formArray.length; ++i)
                  {
                    document.writeln(formArray[i] + "<br />");
                  }

Practice:

• Manipulating strings
  • Create an assignment10 folder (no spaces in the name, no uppercase) in your public_html folder.
  • Copy the FormProcessor.html page from your assignment9 folder into your assignment10 folder.
  • emailForm page
    • Click on EmailForm.html.
    • Right click on the page.
    • View Source
    • Save as EmailForm.html (notice you use the uppercase this time and the l in the extension.) in the assignment10 folder.
    • Open EmailForm.html in your editor and change the path that refers to js_styles.css refer to the location of your jsfiles in the public_html folder.
    • Add the coding on page 333 of the text.
    • Save the document as emailForm1.htm.

• Formatting Strings
  • emailForm2 page
    • If necessary, open your emailForm1.htm page in your editor.
    • Save as emailForm2.htm in your assignment10 folder.
    • Add the coding from pages 335 - 336 of the text.
    • Save the document.

• Counting Characters in a String
  • emailForm3 page
    • If necessary, open your emailForm2.htm page in your editor.
    • Save as emailForm3.htm in your assignment10 folder.
    • Add the coding from page 337 of the text.
    • Save the document.

• Finding and Extracting Characters and Substrings
  • emailForm4 page
    • If necessary, open your emailForm3.htm page in your editor.
    • Save as emailForm4.htm in your assignment10 folder.
    • Add the coding from pages 340 - 341 of the text.
    • Save the document.

• Replacing Characters and Substrings
  • emailForm5 page
    • If necessary, open your emailForm4.htm page in your editor.
    • Save as emailForm5.htm in your assignment10 folder.
    • Add the coding from pages 344 - 345 of the text.
    • Save the document.

• Matching Special Characters
  • emailForm6 page
    • If necessary, open your emailForm5.htm page in your editor.
    • Save as emailForm6.htm in your assignment10 folder.
    • Add the coding from page 350 of the text.
    • Save the document.

• Validating email addresses
  • emailForm7 page
    • If necessary, open your emailForm6.htm page in your editor.
    • Save as emailForm7.htm in your assignment10 folder.
    • Add the coding from page 355 of the text.
    • Save the document.

No Case Project for this assignment

Update your index page:

• Add links on your index page to the pages in your assignment10 folder that are to be graded:
  • emailForm7.htm

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment10 folder with the files:
  • emailForm7.htm
  • FormProcessor.html

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.