L ECTURE 8 21/11/11

I NCREMENT O PERATORS OperatorCalledSample Expression Explanation ++preincrement++a Increment a by 1, then use the new value of a in the expression in which a resides ++postincrementa++ Use the current value of a in the expression in which a resides then increment a by 1 2

D ECREMENT O PERATORS OperatorCalledSample Expression Explanation --predecrement--b Decrement b by 1, then use the new value of b in the expression where b resides --postdecrementb-- Use the current value of b in the expression in which b resides, then decrement b by 1. 3

E XAMPLE I NCREMENT O PERATORS Increment Operators var c;// declare c as a variable c=5;// let c equal to 5 document.writeln(" Postincrementing "); document.writeln(c);//prints the value of c document.writeln(" " + c++); /prints the value of c then increments document.writeln(" " + c);//prints the incremented value of c 4

C ONTINUED …. var c;// declare c as a variable c=10;// let c equal to 10 document.writeln(" Preincrementing "); document.writeln(c);//prints the value of c document.writeln(" " + ++c); // increments c by 1 document.writeln(" " + c); //prints the incremented value of c 5

O UTPUT 6

Executes a statement or statements for a number of times – iteration. Syntax for(initialize; test; increment) { // statements to be executed } Initial Value is the starting number of the loop. If the condition(test) is true the code is executed. The initial value is changed by the step size. 7 F OR L OOPS

The expression is evaluated, if it is false, JavaScript moves to the next statement in the program If it is true then the statement is executed and expression is evaluated again Again if the expression is false the JavaScript moves on the next statement in script, otherwise it executes the statement that forms the body of the loop 8 F OR L OOPS

For for (i = 0; i <= 5; i++) { document.write("The number is " + i); document.write(" "); } 9 F OR L OOPS

While a condition is true execute one or more statements. “While Loops” are especially useful when you do not know how many times you have to loop but you know you should stop when you meet the condition, i.e. an indeterminate loop 10 W HILE L OOPS :

The while Loop is the basic statement that allows JavaScript to perform repetitive actions. It has the following syntax. while (expression) { // Statement to be executed } … more code… 11 W HILE L OOP

This cycle continues until the expression evaluates to false It is important that a Loop counter that is used within the body of the Loop is declared outside it. 12 W HILE L OOPS

HTML F ORMS The opening and close of forms are in themselves little use. Knowing the different form elements that can be placed within these tags is central to effective form design. Text Field Password Field Hidden field Text Area Check box Radio button Drop-down menu Submit Button Reset Button Image Button 13

J AVA S CRIPT F ORM V ALIDATION Using Different Methods and Built in functions to validate data entered to the HTML form 14

F ORM V ALIDATION Form validation is accomplished by using JavaScript to pre-process the information the user types into a form before the data is sent to a server application This practice is much more efficient that allowing incorrectly formatted data to be sent to the server 15

F ORM V ALIDATION If the Information is incorrectly formatted you can alert the user with a pop up and force them to correct the mistake Form Validation is one of the more common uses of JavaScript. How do we know if a form field is: Blank Not of proper data type Incorrectly filled out in any other way 16

B UILT IN J AVA S CRIPT O BJECTS – S TRINGS The reason that that String values and String Objects can be used interchangeably is that JavaScript converts between these two types where necessary. When you invoke a String object method on a string value (which is not an object and does not have methods) JavaScript coverts the value to a temporary String Object allowing the relevant method to be invoked. 17

W HAT ARE THE METHODS AND PROPERTIES ? String.charAt() Method String.subString()Method String.indexOf() Method String.lastindexOf() Method String.length Property String.toLowerCase() String.toUpperCase() 18

S TRING M ETHOD D ESCRIPTIONS AND E XAMPLES Length Property The String.length property is a read only Integer that indicates the number of characters in the specified string 19

E XAMPLE 20 var str="Ecommerce is great!“; document.write(" " + str + " "); document.write(str.length);

String.toLowerCase() Method. String.toLowerCase() Takes no arguments. Returns a copy of string with all uppercase letters converted to lowercase. String.toUpperCase() Takes no arguments. Returns a copy of string with all lowercase letters converted to uppercase. 21 String Method Descriptions and Examples

E XAMPLE 22 var str=("HELLO World!"); document.write(str.toLowerCase()); document.write(" "); document.write(str.toUpperCase());

S TRING M ETHOD D ESCRIPTIONS AND E XAMPLES 23 String.indexOf() Method string.indexOf(substring) string.indexOf(substring, start) Substring is the string that is being searched for within string. Start is an optional argument. It specifies the position within the string at which the search is to start. The method returns the position of the first character of the first occurrence of the substring within a string that appears after the start position, if any or –1 if no such occurrence is found. IndexOf Example var myString="Ba Humbug!" var pos=myString.indexOf("umb") document.write(pos + " ");

24 IndexOf Example var greeting="How are you"; var locate=greeting.indexOf("you",5); if (locate>=0) { document.write("found at position: "); document.write(locate + " "); } else { document.write("Not found!"); }

L AST I NDEX O F M ETHOD String.lastIndexOf() Method Same as String.indexOf() but searches a String backwards. String.charAt(n) The index of the character to be returned from the string. Returns the nth character of the string. 25

26 IndexOf Example var str="Is great College?“; var pos=str.lastIndexOf("College"); if (pos>=0) { document.write("College found at position: "); document.write(pos + " "); } else { document.write("College not found!"); }

E XAMPLE 27 Char At var x="JavaScript is so exciting"; document.write(x.charAt(5));

S UB S TRING M ETHOD String.substring() string.substring(from, to) From specifies the position within string of the first character of the desired substring. From must be between 0 and string.length-1 To is an optional integer argument and can range from anywhere 1 and string.length. This returns specified substring of the string 28

29 var str="Ecommerce is great!"; // document.write(str.substring(2,6)); document.write(" "); document.write(str.substr(2,6));

C ONVERTING S TRINGS TO N UMBERS We know that strings that represent numbers are automatically converted to actual numbers when used in a numeric context. This can also be done explicitly. To allow flexible conversions we use two built in functions: parseInt() parseFloat() These functions convert and return any number at the beginning of a string, ignoring any trailing non-numbers. 30

C ONVERTING S TRINGS TO N UMBERS 31 parseInt() parses a string and returns an integer document.write(parseInt("40 years") + " "); document.write(parseInt("He was 40") + " "); document.write(" "); document.write(parseInt("10")+ " ");

C ONVERTING S TRINGS TO N UMBERS What happens when the data type conversion cannot be performed. var anystring = “one”; var y = parseInt(anystring); In this instance “ NaN ” is returned. NaN stands for Not A Number. How do we deal with this? 32

C ONTINUED … isNaN() - This built in function will determine whether or not a datatype is numeric. Checks for not-a-number. It will return true if argument passed is not a legal number. It will return false if it is a legal number. 33

PARSE F LOAT () The parseFloat() function parses a string and returns a floating point number. This function determines if the first character in the specified string is a number. 34

35 document.write(parseFloat("10. 33") + " "); document.write(parseInt("10.33" ) + " "); document.write(parseFloat("40 years") + " "); document.write(parseFloat("He was 40") + " ");

C ONVERTING S TRINGS TO N UMBERS We know that strings that represent numbers are automatically converted to actual numbers when used in a numeric context. This can also be done explicitly. To allow flexible conversions we use two built in functions: parseInt() parseFloat() These functions convert and return any number at the beginning of a string, ignoring any trailing non-numbers. 36

C ONVERTING S TRINGS TO N UMBERS 37 parseInt() parses a string and returns an integer document.write(parseInt("40 years") + " "); document.write(parseInt("He was 40") + " "); document.write(" "); document.write(parseInt("10")+ " ");

C ONVERTING S TRINGS TO N UMBERS What happens when the data type conversion cannot be performed. var anystring = “one”; var y = parseInt(anystring); In this instance “ NaN ” is returned. NaN stands for Not A Number. How do we deal with this? 38

C ONTINUED … isNaN() - This built in function will determine whether or not a datatype is numeric. Checks for not-a-number. It will return true if argument passed is not a legal number. It will return false if it is a legal number. 39

PARSE F LOAT () The parseFloat() function parses a string and returns a floating point number. This function determines if the first character in the specified string is a number. 40

41 document.write(parseFloat("10. 33") + " "); document.write(parseInt("10.33" ) + " "); document.write(parseFloat("40 years") + " "); document.write(parseFloat("He was 40") + " ");

F ORM V ALIDATION E XAMPLE var x; var firstname; var country1; var ; var phone1; var comment1; var at; var dot; function validate1() { x=document.myForm; dot=x.my .value.indexOf("."); firstname=x.myname.value; country1=x.country.value; =x.my .value; phone1=x.phone.value; comment1=x.comment.value;

if (firstname =="") { alert("You must complete the name field"); x.myname.focus(); return false; } else if(isNaN(firstname)== false) { alert("Please enter your name correctly"); x.myname.focus(); return false; } else if (country1 =="") { alert("You must complete the country field"); x.country.focus(); return false; } else if(isNaN(country1)== false) { alert("Please enter country correctly"); x.country.focus(); return false; } else if( == "") { alert("Please enter a vaild address"); x.my .focus(); return false; }

else if (at==-1) { alert("Please enter a vaild address "); x.my .focus(); return false; } else if (dot==-1) { alert("Please enter a vaild address "); x.my .focus(); return false; } else if(phone1=="") { alert("Please enter your phone number"); x.phone.focus(); return false; } else if(isNaN(phone1)==true) { alert("That phone number is not valid"); x.phone.focus(); return false; } else if(comment1=="") { alert("Please enter your comment!"); x.comment.focus(); return false; } return true; }

Enter your First Name: Enter your Country: Enter your Enter your Phone Number: Your Comment:

S AMPLE MCQ Q UESTIONS 1. A pixel is a _____ measurement of length a) Absolute b) Relative c) Indeterminate d) Positioning 2. Checkboxes are not mutually exclusive form objects, this means a) Only one option may be checked b) They may use the checked keyword c) More than one option may be checked d) None of the above 46

3. String methods ____ and ____ search for the first and last occurrence of a substring in a string respectively. a) substr and substring b) indexOf and lastIndexOf c) charAt and indexOf d) None of the above 47

IndexOf Example var greeting="How are you"; var locate=greeting.indexOf("you",5); if (locate>=0) { document.write("found at position: "); document.write(locate + " "); } else { document.write("Not found!"); } a)error b)Not found! c)found at position: 8 d)found at position:5