1. JavaScript Arrays, Functions, and Forms George Mason University

2. Introducing Arrays Array is a data structure

3. Creating Arrays arrayRefVar = new Array(); or arrayRefVar = new Array(size); Example: myList = new Array(); or myList = new Array(10); When you create the array, specifying the size is optional

4. The Length of an Array You can find the size of an array using arrayRefVar.length For example, if you write myList = new Array(10); myList.length is 10

5. Indexed Variables The array elements are accessed through the index starting from 0 to arrayRefVar.length-1. Each element in the array is represented using the following syntax, known as an indexed variable: arrayRefVar[index];

6. Using Indexed Variables After an array is created, an indexed variable can be used in the same way as a regular variable. For example, the following code adds the value in myList[0] and myList[1] to myList[2]. myList[2] = myList[0] + myList[1];

7. Creating and initializing Using Shorthand Notation myList = new Array(1.9, 2.9, 3.4, 3.5); This shorthand notation is equivalent to the following statements: myList = new Array(4); myList[0] = 1.9; myList[1] = 2.9; myList[2] = 3.4; myList[3] = 3.5;

8. Arrays and For Loops Arrays will often be used with for loops and the index of the for loop will often be used as the index of the array, e.g. for (i=0; i<myList.length; i++) myList[i]=5; The above code would set all elements of the array equal to 5; note the use of the length property of the array in the for loop

9. Functions Functions in JavaScript are generally defined by placing them between in the section of the document This placement has two advantages

10. Placement of Functions in the Head Section Helps prevent inadvertent deletion of the function definition when using the design view of HTML editors such as Dreamweaver because things in the head section aren't visible in design view. The head section is always processed before the body section so if the function is defined in the head and invoked in the body, it will always be defined before it is called

11. Definition of Function function functionname(parameter1, parameter 2, …) { JavaScript statements } If the function has no parameters, it would be written as function functionname() {JavaScript statements } e.g. function sum(x,y) {return x+y;}

12. Invoking or Calling a Function functionname(argument 1, argument 2, …) If the function has no parameters, then functionname() The number of arguments in the function call must match the number of parameters in the function definition, so the sum function could be called by, e.g. y = sum(2,3)

13. Functions and Returning a Value Some functions return a value (and thus have a return statement); because a value is returned, the function is normally called in such a way as to utilize that value, e.g. y = sum(3,4); z = sum(y, sum(3,5));

14. Functions that Don’t Return a Value Some functions don't return a value; their purpose is to do something, like display a value, but not to return a value Such functions will be invoked as a statement – the function name, including any arguments, followed by a semicolon, without any = sign

15. Forms JavaScript can access the user's input on forms and run a variety of checks before the information is submitted to the server Doing these checks in client-side JavaScript is quicker than doing it in server-side code since it eliminates the need for a round-trip to the server; it also reduces the load on the server

16. Form Validation using JavaScript The user input on forms will generally be accessed through event handlers – which event handler will be used depends on when you want the validation to occur The usual practice on forms however is to wait until the user submits the form before doing validation

17. User Submission of a Form To do form validation when the user submits the form, there are three options: Inside the form tag, specify onsubmit = "JS" Inside the html for an input type of submit (the submit button), specify onclick= "JS" Inside the html for an input type of button (a button without any innate functionality) specify onclick="JS" In each case JS represents the JavaScript statements to be executed

18. Use of Functions in Form Verification Because there are often a number of statements involved in validating a form, one generally defines a function with these statements and then calls the function from within the event handler, e.g.