ITSE 2402 Intermediate Web
Assignment 2

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 assignment2 folder (no spaces in the name, no uppercase) in your public_html folder.
  • Click on FormProcessor.html
  • Right click on the page.
  • View Source
  • Save as FormProcessor.html (notice you use the uppercase this time and the l in the extension.) in the assignment2 folder.
  • This page refers to js_styles.css. Since you are going to re-use this file, (and other files) make a new folder, jsfiles in the public_html folder.
  • Download the js_styles.css style sheet.
  • Save in your jsfiles folder.
  • To refer to the file you must link to the location where your file is stored. The link is written as
    <link rel="stylesheet" href="js_styles.css" type="text/css" />
    This assumes that your file is in the same folder as your html page.
    You can change the link to be an absolute link or a referential link.
  • 
  • Open FormProcesslor.html in your editor and change the link to one of the choices below using the correct name for login.
    • <link rel="stylesheet" href="http://206.77.144.3/~login/jsfiles/js_styles.css" type="text/css" />
    • <link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" /gt;
• 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 assignment2 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 assignment2 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 assignment2 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 assignment2 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 assignment2 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 assignment2 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 assignment2 folder.
    • Add the coding from page 355 of the text.
    • Save the document.

Project for this assignment

This exercise is a money exchange program. A helpful site for this project:
Currency Converter for 164 Currencies

1. Open your template.htm page.
2. Save your page as currency.htm.
3. Create a form with:
   text that asks "What is the amount of U. s. dollars you want to convert?"
   a textbox to allow the user to enter an amount.
   text that asks "To which currency would you like to convert?"
   Radio buttons for 3 different currencies. For example:
   British Pound
   EUR
   Peso
   A button with the value Convert

Save your document.

• Processing page:
  • Open your template page.
  • Save as conversion.htm.
  • Open the FormProcessor.html page.
  • Copy the body of the FormProcessor.html page.
  • Paste above the icons in your template page.
  • Using the string manipulations demonstrated in the FormProcessor.html page and the text, access the values sent.
  • Notice how the example substituted characters in the string before spliting.
  • Notice that the string was split at each "&".
  • Instead of separating each name=value pair, you want each name and value to be a separate array amount so that you can get to the value by itself.
  • To do this, highlight the while loop. Copy it. Paste it again below the first loop. Make sure you paste below the close curly brace.
    • This time you are looking for the "="which separates the name value pair.
    • Once you find it, you want the "=" to be an "&"
  • Now when you split you will have each even array amount as a name and each odd array amount as a value.
  • Using the values of the USD entered and the conversion currency, you can now convert the value.
  • Find the conversion formulas linked above on the currency Converter for 164 Currencies.
  • Using the switch statement, calculate the correct conversion.
  • Display the results. The gif example below shows how a page might look.
    The first line says: "Thank you for using Express Conversion"
    There is a blank line.
    The second line says: 100 U S Dollars = 77.40178 Euro
    Then, show the validation icons for both XHTML and CSS taken from the template.
    The conversion rate you use may have changed, and you may make your output as you wish as long as it can be read. Here is the gif just described.
    

Update your index page:

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

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment2 folder with the files:
  • emailForm7.htm
  • currency.htm
  • conversion.htm
  • FormProcessor.html
• Upload your jsfiles folder with the file js_styles.css.

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.