Lab 04 - Dynamic HTML and JavaScript for good and evil

Introduction

This week we continued JavaScript and learned about how to truly make our pages come alive by changing the content dynamically. For this lab you will practice using this knowledge by making your products page more interactive and adding form validation to your sign-up form.

 

Requirements        

You must create a folder in your public_html called "Lab04" (without the quotes) and store your work in that directory.  Copy your work from Lab03 into this directory. Do NOT modify the contents of the Lab03 directory.

Using Firefox or Chrome is highly recommended for this lab.  Make sure you know how to use the Web Console in Firefox (Go to "Web Developer-> Web Console-JS tab) or the JavaScript Console in Chrome (Tools --> JavaScript Console) The Web/JavaScript Console will help with finding syntax errors in your JavaScript code!

  1. (1 points) Comments are now especially important – explain at a high level what each function is doing and what you try to accomplish.
  2. (5 points) View shopping cart - a better solution - modify the JavaScript code for the viewCart() function from Lab03, and, if needed, the HTML code in products.html, such that when the user clicks on the "view cart" button, the content of the shopping cart is added to products.html as an HTML table, without replacing the old content of the products.html (the list of products normally shown by products.html should still be available). Output a meaningful message if the shopping cart is empty. Hint: 1) you can create an empty element in HTML, and later change the content of that element with JavaScript (DHTML).
  3. (8 points) Form validation for sign-up form. In your sign-up form for your website, which you did in lab 2, make sure the action is http://mope.academy.usna.edu/~adina/sy306/tools/FormChecker/submit.cgi. If you do not have an input type text, input type password, and textarea in your form, or if any input fields is missing a name, make sure you add them. Now add the following JavaScript validation checks for some of the fields in your form. Note that HTML5 can do some of the checks. However, not all browsers support the latest features of HTML5, so you need to perform these checks using JavaScript. The form should not be submitted until these fields are valid. If any field is invalid, the user should be somehow notified of the error and should be given the opportunity to fix it (the form is not submitted).

a)      Ensure that the password size is at least 6 - notify the user if not long enough. This check should be performed as soon as the user moves out of the input field (using tab or clicking somewhere outside the input). The check should also be performed before the form is submitted.

b)      Ensure that the password contains at least one number – notify the user otherwise. This check should be performed as soon as the user moves out of the input field (using tab or clicking somewhere outside the input). The check should also be performed before the form is submitted.

Hint: This code snippet will help determine if a string contains a number

var regexNum = /\d/g;

//this function call will return True or False

var containNum = regexNum.test(the password value);

c)      The first text field on your form is filled out – notify the user otherwise. This check should be performed as soon as the user moves out of the input field (using tab or clicking somewhere outside the input). The check should also be performed before the form is submitted.

d)     The textarea field: let’s assume that the server side script does not support “<” in the input. So, all the "<" in the textarea field value, if they exist, should be replaced with "&lt;" (using JavaScript). Hint: The String object provides some useful functions.

The form should submit only if all checks are OK and the textarea string has any “<” characters replaced by "&lt;".

  1. Attack: There are many ways to redirect a user to a new page (and you’ve already implemented some). We’ll try one more way here (see extra credit for another one):

(3 points) fakeindex.html Research document.location to see how you can use it to redirect with JavaScript. Then copy your index.html into a new file called fakeindex.html. Modify fakeindex.html such that when the user moves the mouse anywhere on that page, the user is redirected to the official SY306 course page.

5.        (1 point) Links: Add 3 new links to your default.html page: to Lab04/ products.html, Lab04/signup.html (or whatever name your form page has), and a link to Lab04/fakeindex.html.


Note: Note that in JavaScript, global variables are global for the life of the page.  This means that variables are persistent and available to other parts of a script (or other scripts, if you have more than one).

 

Extra Credit

For a nominal amount of extra credit do some/all of the following:

1.       Attacks:

a)      Redirection: In your index.html, add a link for Google: 

<a href = http://www.google.com>Google</a>

Add JavaScript such that when the user clicks on the link, the target of the link is dynamically changed to http://www.bing.com and the user ends up on the Bing page instead of the Google page. Hint: it is not enough to change the target of the link, you also need to instruct the browser to follow the link. However, for an a element, the default browser behavior is to follow to link when clicked, so you just have to instruct the browser to follow its default behavior. You do that by returning true from the even handler and using the onclick = “return eventHandler()” syntax. 

b)      Injection attacks - write all the answers on your coversheet: Change the action for your form to be http://mope.academy.usna.edu/~adina/sy306/tools/FormChecker/submit_unsafe.cgi

                                                        i.            Bring up your form in the browser. In the input type text on your form, instead of plain text, insert some HTML code (ex.. <h1>This is a header</h1>). Complete the rest of the form satisfying the checks so the data is submitted. Submit the form. What happens? Why do you think it happens that way? Write your answer on the coversheet.

                                                      ii.            Bring up your form in the browser. In the textarea input on your form, instead of plain text, insert some HTML code (ex. <h1>This is a header</h1>). Complete the rest of the form satisfying the checks so the data is submitted. Submit the form. What happens? Why do you think it happens that way? Write your answer on the coversheet.

 

2.       Add some interaction to your list of products to display more or less of the product description/information: initially the page should display less information and have a "+" sign. If the user clicks on "+", the longer description/information is displayed, with a "-" sign too. If the user clicks on "-", we come back to the original state (less info and + sign).

Hint:

a)      You can have 2 elements with similar ids for the + an - versions, and you can use the CSS display property to show/not show an element.

b)      You can change the style with JavaScript

 

Deliverables

  1. Your pages should contain all of the elements described in the requirements section above.
  2. All of your files should be in a folder called "Lab04" (without the quotes) in your public_html. Your instructor will assume that your web pages are viewable at http://mope.academy.usna.edu/~mXXXXXX/Lab04/index.html and products.html, and signup.html (if appropriate), and fakeindex.html where XXXXXX is your alpha number.
  3. (1 points) Turn in (due before lab on Friday):

a)      Paper submission:  turn in the following hardcopy at the beginning of class on the due date:

i)        A completed assignment coversheet.  Your comments will help us improve the course.

b)     Electronics submission: zip your Lab04 folder with all its contents and upload the zip/tar file to Lab04 assignment on Blackboard.