Presentation is loading. Please wait.

Presentation is loading. Please wait.

14/11/11.  These words have special meanings in themselves  These should NOT be used as Identifiers.  For example:  Break, do, function, case, else,

Similar presentations


Presentation on theme: "14/11/11.  These words have special meanings in themselves  These should NOT be used as Identifiers.  For example:  Break, do, function, case, else,"— Presentation transcript:

1 14/11/11

2  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

3  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

4  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

5  The value associated with a name need not be constant  Since the value associated with a name may vary these names are called variables T = 3;T = 3 T = T + 4;T = 8 5

6  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

7  It is good programming practice to declare variables before using them var t; var sum; Or: var t; var sum; or var t = 2; 7

8 ◦ Unlike other languages JavaScript is untyped  Variables can hold data of any variable type T = 10 T = “ten”  In Java you would have to use: int T = 10; String T = “ten”;  DataTypes can change accordingly. 8

9 function message() { alert("This alert box was called with the onload event"); } 9

10  The JavaScript is contained within a container tag. ◦ First line reads:   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

11 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

12  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

13 <Less than <=Less than or equal to >Greater than >=Greater than or equal to !=Not equal to ==Equal to 13

14  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

15 ◦ 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

16  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

17  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

18  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 operand 18

19  x=15 y=20w=10z=5  Evaluate each of the following: (x 25) (y 12) z==y 19

20  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

21  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; Or txt1="What a very " ; txt2="nice day!" ; txt3=txt1+txt2; The variable txt3 now contains "What a very nice day!" 21

22  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

23 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

24  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

25 Check student Grade var studentGrade; studentGrade=30; if (studentGrade >=60) document.writeln("Passed"); else document.writeln("Failed"); 25

26  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

27 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"); 27

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

29 An alternative to If/ ElseIf Statements. Switch (n){ case 1:// start here if n = 1 (n = = 1) // execute code block # 1 break;// stop here case 2:// start here if n = 2 // execute code block # 1 break;// stop here case 3:// start here if n = 3 // execute code block # 1 break; // stop here default:// if none of the previous conditions // equates to true break; // stop here } 29

30 var studentGrade; studentGrade=window.prompt("Input Student Grade:\n"+ "90 (A), 80 (B), 70 (C), 60 (D), 50 (Pass)"); switch(studentGrade) { case "90": document.writeln("A"); break; case "80": document.writeln("B"); break; case "70": document.writeln("C"); break; case "60": document.writeln("D"); break; case "50": document.writeln("Pass"); break; default: document.writeln("fail"); } 30

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

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

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

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

35 35

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

37  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

38 For for (i = 0; i <= 5; i++) { document.write("The number is " + i); document.write(" "); } 38

39  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

40  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

41  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

42 i=0; while (i<=5) { document.write("The number is " + i); document.write(" "); i++; } 42


Download ppt "14/11/11.  These words have special meanings in themselves  These should NOT be used as Identifiers.  For example:  Break, do, function, case, else,"

Similar presentations


Ads by Google