14/11/11. these words have special meanings in themselves these should not be used as identifiers....

Lecture 714/11/11

Reserved Words

These words have special meanings in themselves

These should NOT be used as Identifiers.

For example: Break, do, function, case, else, if, for, new…

2

JavaScript Objects The browser contains a complete set of

objects that allow script programmers to access and manipulate every element of a HTML document

These objects reside in the computers memory and contains information used by the script

Each object has attributes and behaviours associated with it

3

Variables A variable is a name associated with a

data value

A variable contains or stores the value

Variables are names that have values assigned to them

They provide a way to manipulate values by name

4

Variables The value associated with a name need not

be constant

Since the value associated with a name may vary these names are called variablesT = 3; T = 3T = T + 4; T = 8

5

Assign a Value to a Variable

You assign a value to a variable like this with the var statement:

var strname = “Mary”;

Or like this without the var statement:strname = “Mary”;

6

Variables It is good programming practice to declare

variables before using themvar t;var sum;Or:var t; var sum;orvar t = 2;

7

Untyped Variables

◦ Unlike other languages JavaScript is untyped Variables can hold data of any variable type

T = 10T = “ten”

In Java you would have to use:

int T = 10;String T = “ten”;

DataTypes can change accordingly.

8

Example

<html><head><script type="text/javascript">function message(){alert("This alert box was called with the onload event");}</script></head>

<body onload="message()">

</body></html>

9

Javascript

The JavaScript is contained within a <script> container tag.◦ First line reads:

<script language “JavaScript”> followed by browser hiding () followed by your code followed by closing hiding comment followed by closing the script tag

◦ Generally variables are all declared in the head of the document.

◦ These are interpreted first

10

Arithmetic Operators

Multiplication *Division /

Addition +Subtraction -

And - Modulo

◦ The % operator returns the remainder when the first operand is divided by the second

E.g. 5 % 2 the result is 1

11

Comparison Operators These are operators that compare values of

various types and return a Boolean value (true or false)

Use of these operators involves flow controls – i.e. structures which control the flow of the program.

12

Comparison Operators

<Less than

<=Less than or equal to

>Greater than

>=Greater than or equal to

!=Not equal to

==Equal to13

Comparison Operators Equality (= =)

◦ The = = operator returns true if two operands are equal and returns false if they are not

◦ The operands may be of any type and the definition of “equal” will depend on the type

◦ Two variables are only equal if the contain the same value

◦ Two Strings are only equal if they each contain exactly the same characters (bearing in mind that ‘A’ and ‘a’ are separate characters

14

Comparison Operators◦ Usually, if two values have different types, then

they are not equal◦ JavaScript sometimes automatically converts data

types when needed “1” = = 1 returns true

◦ Equality operator = = is very different from the assignment operator =.

15

Comparison Operators

Inequality (!=)◦ The != operator tests for the exact of the = =

operator◦ If two variables are equal to each other, then

comparing them with ! = will return false 4 = = 4 returns true 4 != 4 returns false

◦ Remember != stands for not equal to Less than (<)

◦ The < operator evaluates to true if the first operand is less than its second operand, otherwise it evaluates to false 16

Logical Operators

The logical operands expect their operands to be Boolean values

Usually used with the comparison operators to express complex comparisons that involve more than one variable.

&&Logical AND ||Logical OR !Logical NOT

17

Logical Operators

Logical AND (&&)◦ The && operator evaluates to true if and only if

both its first operand and its second operand are true. If either operand equates to false, then the result will be false.

Logical OR (||)◦ The || operator evaluates to true if its first

operand or its second operand or both are true Logical NOT

◦ The ! operator is placed before a single operand◦ Its purpose is to invert the Boolean value of its

operand18

Examples: x=15 y=20 w=10 z=5

Evaluate each of the following:

(x <17 && y>25)(y<=30 || w >12)z==y

19

String Operator

A string is most often a text, for example "Hello World!". To stick two or more string variables together, use the + operator.

var txt1="What a very“;var txt2="nice day!" ;var txt3=txt1+txt2 ;

The variable txt3 now contains - "What a verynice day!"

20

String Operator To add a space between two string

variables, insert a space into the expression, OR in one of the strings.

txt1="What a very" ;txt2="nice day!" ;txt3=txt1+" "+txt2;Ortxt1="What a very " ;txt2="nice day!" ;txt3=txt1+txt2;

The variable txt3 now contains "What a very nice day!"

21

Selection & Iteration: Flow Controls

JavaScript consists of a collection of statements

Statements usually end with a semi-colon You can define variables and manipulate

them The general route a program/script takes

can be altered this is known as the flow of the program

22

Primary Flow Controls

23

Performs code while a condition is true

While

An Iterative LoopFor

If, but with an alternative clause.

If/else

Makes a decision based on a condition

if

If

This is the simplest flow control. It alters the flow of the program according to a condition

Allows JavaScript to make decisions Syntax

if (some condition is true) {statements }

24

Example1<html><head><title>Check student Grade</title>

<script language="JavaScript">

var studentGrade;studentGrade=30;

if (studentGrade >=60)document.writeln("Passed");

elsedocument.writeln("Failed");

</script></head></html>

25

If/ ElseIf/Else The second form of the if statement

introduces an else clause that is executed when the expression is false

The expression is evaluated and if it equates to true then statement1 is executed, if not statement2 is executed

Else if can be used to differentiate between several conditions

26

Example <script language="JavaScript">

var studentGrade;studentGrade=78;

if (studentGrade >=80)document.writeln("A");

else if(studentGrade <=80)document.writeln("B");

else if(studentGrade <=70)document.writeln("C");

else if(studentGrade <=60)document.writeln("D");

else if(studentGrade <=50)document.writeln("Pass");

else document.writeln("Failed");

</script>27

This structure performs one of many different actions, depending on the value of an expression.

28

Switch Statements

An alternative to If/ ElseIf Statements.

Switch (n){

case 1: // start here if n = 1 (n = = 1)// execute code block # 1break; // stop here

case 2: // start here if n = 2// execute code block # 1break; // stop here

case 3: // start here if n = 3// execute code block # 1break; // stop here

default: // if none of the previous conditions// equates to true

break; // stop here}

29

Increment Operators

Operator Called Sample Expression

Explanation

++ 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

31

Decrement Operators

Operator Called Sample Expression

Explanation

-- 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.

32

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

33

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>34

Output

35

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.

36

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

37

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>

38

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

39

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…

40

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.

41

While Loops

<html><body>

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

42

14/11/11. these words have special meanings in themselves these should not be used as identifiers....

Documents