1 / 42

Lecture 7

Lecture 7. 14/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…. JavaScript Objects.

beth
Download Presentation

Lecture 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 7 14/11/11

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

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

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

  5. Variables • 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

  6. Assign a Value to a Variable • You assign a value to a variable like this with the var statement: varstrname = “Mary”; Or like this without the var statement: strname = “Mary”;

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

  8. Untyped Variables • 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.

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

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

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

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

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

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

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

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

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

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

  19. Examples: • x=15 y=20 w=10 z=5 • Evaluate each of the following: (x <17 && y>25) (y<=30 || w >12) z==y

  20. 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!"

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

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

  23. if Makes a decision based on a condition If/else If, but with an alternative clause. For An Iterative Loop While Performs code while a condition is true Primary Flow Controls

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

  25. Example1 <html> <head> <title> Check student Grade </title> <script language="JavaScript"> var studentGrade; studentGrade=30; if (studentGrade >=60) document.writeln("Passed"); else document.writeln("Failed"); </script></head> </html>

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

  27. Example <script language="JavaScript"> varstudentGrade; 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>

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

  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 }

  30. <script language="JavaScript"> 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"); } </script>

  31. Increment Operators

  32. Decrement Operators

  33. Example Increment Operators <html> <title>Increment Operators </title> <head> <script langauge="JavaScript"> var c; // declare c as a variable c=5; // let c equal to 5 document.writeln("<h3>Postincrementing</h3>"); document.writeln(c); //prints the value of c document.writeln("<br>" + c++); /prints the value of c then increments document.writeln("<br>" + c); //prints the incremented value of c

  34. Continued…. var c; // declare c as a variable c=10; // let c equal to 10 document.writeln("<h3>Preincrementing</h3>"); document.writeln(c); //prints the value of c document.writeln("<br>" + ++c); // increments c by 1 document.writeln("<br>" + c); //prints the incremented value of c </script> </head> </html>

  35. Output

  36. For Loops • 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.

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

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

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

  40. While Loop • 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…

  41. While Loops • 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.

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

More Related