lab exercises

July 26th 2005: Lab

Part One

variables versus functions
- first, take a look at this code below.
```
     1    alert("Testing my code... ");
     2    var i = 0;
     3    while( i<MAXELEM )
     4    {
     5      alert( "item " + i + ": " + qform.elements[i].value );
     6      i = i + 1;
     7    }
  
```
- based on what you have learned about variables, statements, etc. about javascript, which of the following are variables? (*)
  1. alert()
  2. "Testing my code..."
  3. var
  4. i
  5. =
  6. 0
  7. ;
  8. while
  9. <
  10. MAXELEM
  11. "item "
  12. +
  13. ": "
  14. qform
  15. .
  16. elements
  17. value
  18. 1
- based on what you have learned about variables, statements, etc. about javascript, which of the the above (1-18) are functions? (*)
- recall the website you designed from the previous lab for a flight booking system. now we are about to edit the form you made last week.
- save the form you did last week into a new file (e.g., lab5.html).
- IF YOU WERE NOT ABLE TO HAND IN YOUR PREVIOUS LAB:
  save this file on your computer and use it for the following steps
- in the new file, add into the head tags of your HTML form a script tag, like so:
- inside the script tags, put the above javascript code into you made last week by making a new validation function, e.g.:
```
  function checkInput( qform ) 
  {
    ...
  }
  
```
  and put the 7 lines of code into the "..." of this function.
- replace MAXELEM by the number of form elements that your form has.
- add or change a submit button at the bottom of your form, so that it calls the validate function you created
  
  make sure you change FORMNAME to the name you used in your form
- test your form and make sure it pops the input in each of the elements in your form (*)

What to hand in: 1 printout of the code and 2 written answers (see "*"). This part of the lab is worth 1%. It is due at the beginning of the lab on August 3rd.

Part Two

Once you have completed the above, then go onto this part. For this question, you will be asked to write your own javascript function.
- use a text field as the form element for specifying the departure date, and similarly for the arrival date. (if you already had this in your form, then go to the next step).
- indicate to the user that the expected syntax of the two date fields must be "dd/mm/yyyy" -- 2 numbers for day, followed by 1 slash, 2 numbers for month, followed by 1 slash, 4 numbers for year. (if you already had this in your form, then go to the next step).
- something as simple as this is acceptable:
Syntax checking. (*)
- write a function that checks the two date fields to make sure that the user entered the date in the specified format. (this is similar to the example we talked about in class.)
- have the checkInput function call this one. for example, in the checkInput function, it should contain the line:
```
  checkSyntax( qform.elements[ DEP_DATE_INDEX ].value );
  
```
  where DEP_DATE_INDEX is the number of the n^th element corresponding to your departure date form element. then, your syntax function starts as follows:
```
  // ARG: datestring = dd/mm/yyyy
  //                   01 34 6789  -- index positions
  function checkSyntax( datestring )
  {
    var baditems = 0;
    var len = datestring.length;

    // step 1. go through each character of the string
    //      a. if it is in position 2 or 5, check if it is a slash
    //      b. if it is in any other position, check if it is a number 
    ...
  }
  
```

Semantics checking. (*) THIS QUESTION IS NOW OPTIONAL

write a separate function that checks that the departure and arrival dates are real dates (e.g., "90/89/8888" and "31/06/2005" are not acceptable, but ignore leap years).

have your syntax checking function call this one. for example, in the checkSyntax function, it should contain the line:

  checkSemantics( datestring );

then, your function that checks for real dates starts as follows:

  // ARG: datestring = dd/mm/yyyy
  //                   01 34 6789  -- index positions
  function checkSemantics( datestring )
  {
    // step 1. extract dd from datestring
    ...
    // step 2. extract mm from datestring
    ...
    // step 3. extract yyyy from datestring
    ...

    // step 4. check valid year (2005 or 2006)
    ...

    // step 5. check valid month (1 to 12)
    ...

    // step 6. check valid day depending on the month (up to 30, 28, or 31)
    ...
  }

Testing your work. (*)

use the following examples as your test cases and indicate (i) whether you expect your program to work with that case, and (ii) whether your program actually works with that case or not. fill in the "..." with the either a "yes" or "no".

test case	expected result	actual result
abcdefg	no	...
01122005	no	...
01/01/2005	...	...
01/25/04	...	...
2/11/2006	...	...
11/02/2006	...	...
02/11/2006	...	...
02/01/2006	...	...
00/00/2006	...	...
30/02/2006	...	...
30/09/2006	...	...
31/09/2006	...	...

be honest -- you may not have time to fix your code and get it working perfectly, but it is MORE important that you can document a list of problems to work on. you will be graded on the test cases you choose to test your program. print out this document.
warning: if your code does not correspond to the results in your report, you will automatically get zero for the report.

What to hand in: 1 printout of the code (from question 2), 1 printout of the code (from question 3), and 1 table of results (from question 4) (see "*"). This part of the lab is worth 2% in total, 1% per question. It is due at the beginning of the tutorial on August 10th.