Web Design 2 - JavaScript Project

In this first project you will build a web site that incorporates the use of JavaScript.

1. Navigate to your Web Design 2 folder on the (I:) drive. Create a new folder named javascript_project. Open the javascript_project folder and within create a folder named images.
    
2. In Dreamweaver create a new site named JavaScript Site. Use the folders created previously to hold the files for the site.
    
3. Create the following html files: (NOTICE: select None for the DocType to avoid javascript problems.)
   • index.html
   • form.html
   • games1.html
   • games2.html
   • games3.html
   • goofy1.html
   • goofy2.html
   • goofy3.html
   • image1.html
   • image2.html
   • image3.html
   • math1.html
   • math2.html
   • math3.html
   • menu.html
      
4. Create the following css file:
   • main.css
      
5. Create the following javascript (js) file:
   • quickmenu.js
      
6. This site will need to meet the following requirements:
    
   • a menu created with QuickMenu that has the following links:
     

JavaScript Project - Web Form

Requirements:

• All elements must be validated.
• Incorrect validation results in a message, using an alert() box, indicating each element that has not validated.
• Invalid elements will be highlighted by either the background color or the label color of the element changing to red.
• Invalid elements that are red will return to the original color when the user clicks the element.

The code supplied below will create the required web form for this project. Copy the code and place it in the body of your form.html page.

Validation:

All of the elements on the form must be validated. Those items that require the user to enter information, email for example, will need to be validated using RegExp. Other form elements such as check boxes and option buttons will need to be evaluated to see if they have been selected.

In the head of form.html you will need to have a JavaScript function named  validate() for the validation of the form. The code for validate() will be very similar to the code that you wrote in the Form Validation Exercise. To get started you may copy this beginning of the validate() function and paste it into the head of form.html.

<script type="text/javascript">
function validate(form){
var errors = 0;
var msg="The following has occured...\n\n";
var ck_first_name = /^[a-zA-Z]+(([\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$/;
var first_name = form.first_name.value;
// there will be many more variable in this section



// code to test whether the first name entered is valid
if(ck_first_name.test(first_name)==false){
msg+="The first name entered is not valid. \n";
document.form.first_name.style.backgroundColor="red";
errors++;
}



// the code you enter must all be above this line

if(errors > 0){
alert(msg);
return false; // stops the browser from going to congrats.html
}
else
return true; // everything was valid, go on to congrats.html
}
</script>

Places to Learn About Validation with RegExp:

• RegExp Tutorial from Web Design 2
• It would not be reasonable to expect that you would be able create all of your own RegExp for this project. There is a web site, http://www.regxlib.com/ , that has a collection of often used RegExp. You can search the site and find the RegExp needed for this project. The Regular Expressions provided for this project were all found at regxlib.com.

Regular Expressions (RegExp) to use for this project:

• first name: ^[a-zA-Z]+(([\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$
  1. This allows you to validate first names or last names in separate fields.
  2. Matches: Samuel | O'Conner | Mary-Kate
  3. Non-Matches: David Bugel | Robert1 | Robert M. Larry
      
• last name: ^[a-zA-Z]+(([\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$
  1. This allows you to validate first names or last names in separate fields.
  2. Matches: Samuel | O'Conner | Mary-Kate
  3. Non-Matches: David Bugel | Robert1 | Robert M. Larry
      
•  street: ^(\d{3,})\s?(\w{0,5})\s([a-zA-Z]{2,30})\s([a-zA-Z]{2,15})\.?\s?(\w{0,5})$
  1. Matches: 101 W Main St | 101 W Main St. N | 101 Main St N
  2. Non-Matches: Main St | 55a Main St | 101 W Main St Apt 5
      
•  city: ^[a-zA-Z]+(([\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$
  1. Excludes numbers
      
• state:
  1. No regexp needed.
  2. Must confirm that a state has been selected
      
• zip (1^st field): ^\d{5}$
  1. must be exactly 5 digits
      
• zip (2^nd field): ^\d{4}$
  1. must be exactly 4 digits
      
• phone (1^st field): ^\d{3}$
  1. must be exactly 3 digits
      
• phone (2^nd field): ^\d{3}$
  1. must be exactly 3 digits
      
• phone (3^rd field): ^\d{4}$
  1. must be exactly 4 digits
      
• email: ^([a-zA-Z0-9]+([\.+_-][a-zA-Z0-9]+)*)@(([a-zA-Z0-9]+((\.|[-]{1,2})[a-zA-Z0-9]+)*)\.[a-zA-Z]{2,6})$
  1. Matches: abc@test.com | abc@test-test.info | abc.d-e_f+g@a.b-c.d--e.museum
  2. Non-Matches: a+@test.com | +a@test.com | a++a@test.com | abc@a---b.com | abc@a---b.test.com
      
•  confirm email:
  1. No regexp needed.
  2. For error checking use something like if(email1 != email2) ...
      
•  user name: ^([a-zA-Z]+)[0-9]*\.*[a-zA-Z0-9]+$|^[a-zA-Z]+[0-9]*$
  1. This regex allows user names with or without special char.
  2. Matches: vishal.mehta | vishal12.12 | vishal08
  3. Non-Matches: .vishal | vishal_mehta09 | Vishal Mehta | vishal.
      
• password: (?=[-_a-zA-Z0-9]*?[A-Z])(?=[-_a-zA-Z0-9]*?[a-z])(?=[-_a-zA-Z0-9]*?[0-9])[-_a-zA-Z0-9]{6,}
  1. Tests if the input consists of 6 or more letters, digits, underscores and hyphens. The input must contain at least one upper case letter, one lower case letter and one digit.
      
• password confirm:
  1. No regexp needed.
  2. For error checking use something like if(pswrd1 != pswrd2) ...
      
• gender options:
  1. No regexp needed.
  2. must make sure one of the options have been selected
      
• agree to terms:
  1. No regexp needed.
  2. must make sure the check box is selected

JavaScript Project - Simple Calculator

 Copy the following code and paste it into the body of math1.html.

JavaScript Project - Advanced Calculator

Copy the following code and paste it into the body section of math2.html.

Copy the following code and paste it into the body section of math2.html.

JavaScript Project - Floating Calculator

Right-click on the images and save them into the images folder of your project. 

Paste the following code into the head section of math3.html.

Paste the following code in the head section of math3.html.

Paste the following code into the body section of math3.html.

JavaScript Project - Battleship

Follow the steps below to incorporate a Battleship game on your web page.

Download the images and then extract them into the images folder of your project.

Copy the styles below and place them in the head section of games1.html.

 Copy the JavaScript code below and paste it into the body section of games1.html.

JavaScript Project - Peg

 Download the Peg images and extract them into the images folder of your project.

 Copy this code and paste it into the head section of games2.html.

 Copy this code and paste it into the body of games2.html.

<body onLoad="window.newGame()">

JavaScript Project - Squares

 Download the Squares images and then extract them into the images folder of your project.

Copy the following code and paste it into the head section of games3.html.

Copy the following code and paste it into the body section of games.html.

JavaScript Project - Falling Snow

Copy the following code and paste it into the body section of goofy1.html.

JavaScript Project - Colorful Mouse Trailer

Download the Mouse trailer images and then extract them into the images folder of your project.

Paste the following code into the body section of goofy2.html.

JavaScript - Text Mouse Trailer

Paste the following code the head section of goofy3.html.

 Paste the following code the head section of goofy3.html.

JavaScript -Watchful Eyes

Download the Xeyes images and then extract them into the images folder of your project.

Copy and then paste the following code into the head section of image1.html.

<script type="text/javascript" src="jseyes.js"></script>

Copy and paste the following code into the body section of image1.html.

<script type="text/javascript">
jseyes();
</script> 

In Dreamweaver create a new JavaScript document named jseyes.js.

Copy the following code and paste it into jseyes.js.

JavaScript Project - Mouseover Image Swap

Download the swap images and then extract them into the images folder of your project.

Copy and then paste the following code into the head section of image2.html.

<script type="text/javascript" src="simpleSwap.js"></script>

Copy and paste the following code into the body section of image2.html.

<img class="border2" src="images/cow2.jpg" oversrc="images/cow1.jpg">

In Dreamweaver create a new JavaScript document named simpleSwap.js.

Copy the following code and paste it into simpleSwap.js.

JavaScript Project - Slide Show

Download the slide show images and then extract them into the images folder of your project.

Paste the following code into the body section of image3.html.