Lecture 8

LECTURE 821/11/11

INCREMENT OPERATORSOperator Called Sample

ExpressionExplanation

++ preincrement ++a Increment a by 1, then use the new value of a in the expression in which a resides

++ postincrement a++ Use the current value of a in the expression in which a resides then increment a by 1

2

DECREMENT OPERATORSOperator Called Sample

ExpressionExplanation

-- predecrement --b Decrement b by 1, then use the new value of b in the expression where b resides

-- postdecrement b-- Use the current value of b in the expression in which b resides, then decrement b by 1.

3

EXAMPLE INCREMENT OPERATORS<html><title>Increment Operators</title>

<head>

<script langauge="JavaScript">

var c; // declare c as a variablec=5; // let c equal to 5

document.writeln("<h3>Postincrementing</h3>");document.writeln(c); //prints the value of cdocument.writeln("<br>" + c++); /prints the value of c then incrementsdocument.writeln("<br>" + c); //prints the incremented value of c

4

CONTINUED….var c; // declare c as a variablec=10; // let c equal to 10

document.writeln("<h3>Preincrementing</h3>");document.writeln(c); //prints the value of cdocument.writeln("<br>" + ++c); // increments c by 1document.writeln("<br>" + c); //prints the incremented value of c

</script>

</head>

</html> 5

OUTPUT

6

Executes a statement or statements for a number of times – iteration.

Syntaxfor(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

FOR LOOPS

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

FOR LOOPS

<html>

<head><title> For</title>

</head><body><script type="text/javascript">for (i = 0; i <= 5; i++){document.write("The number is " + i);document.write("<br />");}</script>

</body></html> 9

FOR LOOPS

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

WHILE LOOPS:

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

WHILE LOOP

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

WHILE LOOPS

HTML FORMS 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

JAVASCRIPT FORM VALIDATION Using Different Methods and Built in

functions to validate data entered to the HTML form

14

FORM VALIDATION

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

FORM VALIDATION

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

BUILT IN JAVASCRIPT OBJECTS – STRINGS 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

WHAT 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

STRING METHOD DESCRIPTIONS AND EXAMPLES Length Property

The String.length property is a read only Integer that indicates the number of characters in the specified string

19

EXAMPLE

20

<html><body>

<script language="javascript">

var str="Ecommerce is great!“;document.write("<p>" + str + "</p>");document.write(str.length);

</script>

</body></html>

String.toLowerCase() Method. String.toLowerCase() Takes no arguments. Returns a copy of string with all uppercase

letters converted to lowercase. String.toUpperCase()

String.toUpperCase() Takes no arguments. Returns a copy of string with all lowercase letters

converted to uppercase.

21

String Method Descriptions and Examples

EXAMPLE

22

<html><body>


var str=("HELLO World!");document.write(str.toLowerCase());

document.write("<br>");document.write(str.toUpperCase());</script>

</body></html>

STRING METHOD DESCRIPTIONS AND EXAMPLES

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.

<html><head><title> IndexOf

Example</title>


var myString="Ba Humbug!"var

pos=myString.indexOf("umb")

document.write(pos + "<br />");

</script></head><html>

24

<html><head><title> IndexOf Example</title><script language="javascript">

var greeting="How are you";var locate=greeting.indexOf("you",5);

if (locate>=0){

document.write("found at position: ");document.write(locate + "<br />");

}else{

document.write("Not found!");}


LASTINDEXOF METHOD 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

<html><head><title> IndexOf Example</title><script language="javascript">var str="Is great College?“;var pos=str.lastIndexOf("College");if (pos>=0)

{document.write("College found at position: ");document.write(pos + "<br />");

}else{

document.write("College not found!");}


EXAMPLE

27

<html><head><title> Char

At</title>


var x="JavaScript is so exciting";

document.write(x.charAt(5));


SUBSTRING METHOD 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

<html><body>


var str="Ecommerce is great!";// 0123456789

document.write(str.substring(2,6));

document.write("<br /><br />");

document.write(str.substr(2,6));

</script></body></html>

CONVERTING STRINGS TO NUMBERS 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

CONVERTING STRINGS TO NUMBERS

31

parseInt() parses a string and returns an integer

<html><script type="text/javascript">

document.write(parseInt("40 years") + "<br />");document.write(parseInt("He was 40") + "<br

/>");document.write("<br />");document.write(parseInt("10")+ "<br />");

</script></html>


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

CONTINUED… 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

PARSEFLOAT()

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

<html>

<script type="text/javascript">

document.write(parseFloat("10.33") + "<br />");

document.write(parseInt("10.33") + "<br />");

document.write(parseFloat("40 years") + "<br />");

document.write(parseFloat("He was 40") + "<br />");

</script>

</html>

CONVERTING STRINGS TO NUMBERS 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


37

parseInt() parses a string and returns an integer

<html><script type="text/javascript">

document.write(parseInt("40 years") + "<br />");document.write(parseInt("He was 40") + "<br

/>");document.write("<br />");document.write(parseInt("10")+ "<br />");

</script></html>


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

CONTINUED… 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

PARSEFLOAT()

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

<html>

<script type="text/javascript">

document.write(parseFloat("10.33") + "<br />");

document.write(parseInt("10.33") + "<br />");

document.write(parseFloat("40 years") + "<br />");

document.write(parseFloat("He was 40") + "<br />");

</script>

</html>

FORM VALIDATION EXAMPLE<html><head><script language="javascript">var x;var firstname;var country1;var email;var phone1;var comment1;var at;var dot;

function validate1(){x=document.myForm;at=x.myEmail.value.indexOf("@");dot=x.myEmail.value.indexOf(".");firstname=x.myname.value;country1=x.country.value;email=x.myEmail.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(email == "")

{alert("Please enter a vaild e-mail address");x.myEmail.focus();return false; }

else if (at==-1) {alert("Please enter a vaild e-mail address ");x.myEmail.focus();return false; }else if (dot==-1) {alert("Please enter a vaild e-mail address ");x.myEmail.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;} </script>

</head><body><form name="myForm" action="submitform.html" onSubmit="return validate1();">

Enter your First Name: <input type="text" name="myname"> <br>

Enter your Country: <input type="text" name="country"> <br>

Enter your e-mail: <input type="text" name="myEmail"> <br>

Enter your Phone Number: <input type="text" name="phone"> <br>Your Comment: <input type="textarea" name="comment"> <br>

<input type="submit" value="Send input"> </form></body></html>

SAMPLE MCQ QUESTIONS1. A pixel is a _____ measurement of length

a) Absoluteb) Relativec) Indeterminated) Positioning

2. Checkboxes are not mutually exclusive form objects, this means

a) Only one option may be checkedb) They may use the checked keywordc) More than one option may be checkedd) 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 substringb) indexOf and lastIndexOfc) charAt and indexOfd) None of the above

47

<html><head><title> IndexOf Example</title><script language="javascript">var greeting="How are you";var locate=greeting.indexOf("you",5);if (locate>=0)

{document.write("found at position: ");document.write(locate + "<br />");}else{document.write("Not found!");}


a)errorb)Not found!c)found at position: 8d)found at position:5

Documents

Lecture 8