Title: Competency 1.2, 2402--Intermediate Web Programming
Course: Intermediate Web Programming (25436)

ITSE 2402 Intermediate Web
JS Module 1.2 Assignment

Assignment

- String Processing
  - This assignment is to review sending form elements and values from one page to another then using a form processor to parse the string. Even if you just completed this assignment in ITSE 1411, please redo it. You will pick up on some things you may have missed before.

- Manipulating strings
  - Click on FormProcessor.html
  - View the source for the FormProcessor.html.
  - Save as FormProcessor.html in your assignment folder.
  - emailForm page
    - On page 376, the text book has you open the EmailForm.html and add coding that calls the validateSubmission() function before action is taken to send the user to the FormProcessor.html page.
    - Click on EmailForm.html.
    - View the EmailForm.html source.
    - Save as EmailForm.html (notice you use the uppercase this time and the l in the extension.) in your assignment folder.
    - Save the document as emailForm1.htm.
  - images
    - If you haven't already doownloaded the files from the publishers site, here is a zipped file of the images used on the email pages.
    - Download and unzip the file. Once unzipped, you should have a folder named images with the images inside the folder.
    - Save your unzipped images folder at the same level as you emailForm and FormProcessor pages so that they link correctly.
  - Test what you have so far
    - Open your emailForm1.htm page in your browser.
    - Your emailForm1.htm page should look the same as the EmailForm.html page that you copied. If it doesn't, solve that problem now! Check uppercase/lowercase compatibility.
    - Click the submit button.
    - Contact me asap for help if you are lost. I require that you upload your pages for me to look at them.

- Formatting Strings
  - emailForm2 page
    - If necessary, open your emailForm1.htm page in your editor.
    - Save as emailForm2.htm in your assignment folder.
    - Add the coding for changing cases from pages 378 - 380.
    - Make sure that your html validates.
    - Click on preview to see if you have javaScript errors.
    - Save the document.
    - Test your page by adding email that has uppercase letters and see if the email converts to lowercase letters.

- Counting Characters in a String
  - emailForm3 page
    - If necessary, open your emailForm2.htm page in your editor.
    - Save as emailForm3.htm in your assignment folder.
    - Add the coding from page 380 - 381 of the text above the alert.
    - 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 assignment folder.
    - Add the coding from pages 385 - 386 of the text.
    - Save the document.
  - Importance of this code!!!
    - The coding you entered to test for characters is important for you later to understand the coding in the form processor page.
    - The search function looks for the string associated with the search function call, in this code first the "@" and then the ".". If either or not found, a -1 is returned. Since email addresses require an "@" and require a "."

- Replacing Characters and Substrings
  - emailForm5 page
    - If necessary, open your emailForm4.htm page in your editor.
    - Save as emailForm5.htm in your assignment folder.
    - Add the coding from pages 389 - 390 of the text.
    - Save the document.
    - Test your page to make sure that you cannot enter the same email address for both the recipient and the sender.

- Matching Special Characters
  - emailForm6 page
    - If necessary, open your emailForm5.htm page in your editor.
    - Save as emailForm6.htm in your assignment folder.
    - Add the coding from page 396 of the text. You are replacing


if (email.search("@") == -1
    || email.lastIndexOf(".") == -1)
with
if (/@/.test(email) == false
    || /\....$/.test(email) == false)

    - Make sure that you keep a curly brace to contain the statements inside the if. I did not include the curly braces with the code I showed to delete or to add.
    - Save the document.
    - Test to make sure your code still checks for the email messages having an "@" and a ".".

- Validating email addresses
  - emailForm7 page
    - If necessary, open your emailForm6.htm page in your editor.
    - Save as emailForm7.htm in your assignment folder.
    - Add the coding from page 401 - 402 of the text. You are adding


var emailCheck = /^[_\w\-]+(\.[_\w\-]+)*@[\w\-]+(\.[\w\-]+)*(\.[\D]{2,3})$/;

Your are replacing


if (/@/.test(email) == false
    || /\....$/.test(email) == false)
    with
if (emailCheck.test(email) == false)


    - Save the document.
    - Test to make sure your code still checks for the email messages having an "@" and a ".".

Hidden Field Practice

- Hidden fields are used to gather data that the user does not physically enter.
- The emailForm has a hidden field named recipientsList.
- Update emailForm7 page
  - If necessary, open your emailForm7.htm page in your editor.
  - Save as emailFormUpdate.htm in your assignment folder.
  - Assuming that the recipientsList field is to later be used to save off emails submitted by users, add code to assign the recipient_email to the recipientsList.
  - Change the onsubmit event handler in your form tag to: onsubmit="makeList(); return validateSubmission();"
  - Create a makeList() function in the head that assigns the recipientsList hidden element the value of the recipient_email element. (Remember to use DOM for both recipientsList and recipient_email.)
That coding is


function makeList()
  {
    document.forms[0].recipientsList.value = document.forms[0].recipient_email.value;
    window.alert(document.forms[0].recipientsList.value);
  }

  - Change the action attribute in your form tag to go to formProcessor.htm (once you have renamed FormProcessor.html to formProcessor.htm).
  - Once it all works, you should delete the window.alert statement. That is a diagnostic tool to help you find your errors (if any).
  - Save the document.

Explanation of 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 EmailFormUpdate.htm page, upload it to your site and view in your browser.
    - Fill out the information in the text boxes exactly like the image below.
    - From your browser, click on the send button.
    - Look at the address bar after your FormProcessor.html or formProcessor.htm page comes up.
    - The ? separates the URL from the data that has been sent from the EmailFormUpdate.htm page.
    - Using the data shown in the image above, the state information should look 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=ITSE1411%40gmail.com


- 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 or formProcessor.htm:

  - var formData = location.search;
This statement allows you to get the query data. 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 substitutes 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 from your sending page.
formArray[1] will contain the second name=value pair for the second element from your sending 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 />");
            }

Updating the FormProcessor

- Separating the name = value pairs
  - Open your FormProcessor.html page in Komodo Edit.
  - Save as a different name (to preserve the original). I suggest formProcessor.htm (Be sure to use a different extension than you did to previous FormProcessor to help you notice which page is yours and which is the original.)
  - Make sure that the link to your CSS is updated as needed for your file structure.
  - Change the action in emailFormUpdate.htm to go the new formProcessor.htm. Watch those uppercase and lowercase and extension compatibilities.
  - Open in your browser to test.

Update your index page:

- Add links on your index page to the pages in your assignment folder that are to be graded:
  - emailFormUpdate.htm
  - formProcessor.htm

Uploading:

- Upload your revised index.htm page to the public_html folder.
- Upload your assignment folder with the files:
  - emailFormUpdate.htm
  - formProcessor.htm

Testing uploaded pages

- Once uploaded, go to your site http://cois-linux.austincc.edu/~login/
- Validate your index page and all pages in this assignment (your css page will validate through the html pages that refer to your css page)
- Make any corrections for any page that does not validate or display correctly.
- Email me for grading.