JavaScript Expressions and Operators Guide

1. Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 16 Introduction to JavaScript 3

2. Today’s Topics • Expressions and statements (cont’d) • Using events • Working with Objects (window, location, history and navigator) • Working with Forms Introduction to JavaScript 3

3. Review: Automatic Arrays in Document Objects • How to access the object in these arrays, for example, a link in the document? • By array syntax. If this link is the first link definition in the document (in source code order), the reference would be • document.links[0] • Or you can also use the name (as a string) in array syntax, as follows: • document.links["home"] • Does not work in IE! • Examples: • http://people.cs.uchicago.edu/~hai/hw6/accessobject.html Introduction to JavaScript 3

4. Expressions and Operators • Logical Operators • Used for comparing two Boolean operands for equality • Comparison returns a Boolean value • Comprised of both binary and unary operators Introduction to JavaScript 3

5. Introduction to JavaScript 3

6. Logical Operators • Examples: • BooleanVariables.html • LogicalExamples.html Introduction to JavaScript 3

7. Expressions and Operators • Working with Strings • JavaScript has two operators that can be used with Strings to combine two strings • Concatenation operator (+) • var oneString = “one”; • var anotherString = oneString + “, two, three, …”; • Assignment operator (+=) • var oneString = “one”; • oneString += “, two, three, …”; Introduction to JavaScript 3

8. Expressions and Operators • String Object • Literal strings and string variables in JavaScript are represented by a String object • The String object contains methods for manipulating text strings Introduction to JavaScript 3

9. Expressions and Operators • String Object • length property • Returns the number of characters in a string • Parsing • Act of extracting characters or substrings from a larger string Introduction to JavaScript 3

10. Expressions and Operators • String Object • Parsing using the split() built-in function • Reference: Javascript: the Definitive Guide, p 529. • stringVariable.split(delimiter). Returns an array of strings, created by splitting string into substrings at the boundaries specified by delimiter. Introduction to JavaScript 3

11. Expressions and Operators • String Object • Parsing using the split() built-in function. • Example: var myVar = “John Barr”; var newVar = myVar.split(“ “); newVar contains [“John”, “Barr”] Introduction to JavaScript 3

12. Expressions and Operators • String Object • Parsing using the split() built-in function. • Example: var myVar = “red;blue;green;yellow”; var newVar = myVar.split(“;“); newVar contains [“red”, “blue”.”green”,”yellow”] Introduction to JavaScript 3

13. Expressions and Operators • Example: • StringExamples.html Introduction to JavaScript 3

14. Expressions and Operators • Operator Precedence • Order of priority in which operations in an expression are evaluated • Expressions are evaluated • On a left-to-right basis • With the highest priority precedence evaluated first Introduction to JavaScript 3

15. Expressions and Operators • Operator Precedence • Parentheses/brackets/dot (( ) [ ] .) • Negation/increment (! - ++ -- typeof void) • Multiplication/division/modulus (* / %) • Addition/subtraction (+ -) • Comparison (< <= > >=) • Equality (== !=) • Logical AND (&&) • Logical OR (||) • Assignment operators (= += -= *= /= %=) • Comma (,) Introduction to JavaScript 3

16. Decision Making Statements • if statements • if…else statements • Nested if statements • switch statements Introduction to JavaScript 3

17. Decision Making • Decision Making • Process of determining the order in which statements execute in a program • AKA – flow control • Decision-Making Structures • Special type of JavaScript statements used for making decisions Introduction to JavaScript 3

18. Decision Making • if Statements • Used to execute specific programming code if the evaluation of a conditional expression returns a value of true • “Do this or don’t do this” • Syntax (3 primary parts) if (conditional_expression) { statement(s); } Introduction to JavaScript 3

19. Decision Making • if Statements • Operation • If the conditional expression is true, the statement(s) is/are executed • Control then continues to subsequent code • Command block • Multiple statements contained within a set of braces (require curly braces) Introduction to JavaScript 3

20. Introduction to JavaScript 3

21. Introduction to JavaScript 3

22. Introduction to JavaScript 3

23. Decision Making • if Statements • Conditional Expression • Can consist of: • Comparison operators • Logical operators • Combination of the two • Must resolve to Boolean value Introduction to JavaScript 3

24. Decision Making • if…else Statements • Used to execute one set of code if the evaluation of a conditional expression returns a value of true, otherwise executes another set of code • “Do this or do something else” • Syntax if (conditional_expression) { statement(s); } else { statement(s); } Introduction to JavaScript 3

25. Introduction to JavaScript 3

26. Decision Making • Nested if and if…else Statements • Nested statements • Statements contained within other statements • Syntax (variable) if (conditional_expression) { statement(s); if (conditional_expression) { statement(s); } } else { statement(s); } Introduction to JavaScript 3

27. Introduction to JavaScript 3

28. Introduction to JavaScript 3

29. Decision Making • switch Statements • Controls program flow by executing a specific set of statements, depending on the value of an expression • Syntax switch (expression) { case label1: statement(s); break; case label2: statement(s); break; default: statement(s); } Introduction to JavaScript 3

30. Decision Making • switch Statements • Case labels • Identify specific code segments • Can use a variety of data types as case labels • Break statement • Used to exit switch statements • Default label • Contains statements that execute when the condition expression doesn’t match any of the case labels Introduction to JavaScript 3

31. Introduction to JavaScript 3

32. Repetition Statements • while statements • do…while statements • for statements • break/continue statements Introduction to JavaScript 3

33. Repetition • Repetition • The if, if…else and switch statements select only a single branch of code to execute, then continue to the statement that follows • Loop statements • Repeatedly execute a statement or a series of statements while a specific is true or until a specific condition becomes true Introduction to JavaScript 3

34. Repetition • while Statements • Used for repeating a statement or a series of statements as long as a given conditional expression evaluates to true • Typically uses a counter to keep track of iteration • Syntax while (conditional_expression) { statement(s); } Introduction to JavaScript 3

35. Repetition • while Statements • Example: var count = 1; while (count <= 5) { document.writeln(count); ++count; } document.writeln(“You have printed 5 numbers.”); Introduction to JavaScript 3

36. Introduction to JavaScript 3

37. Repetition • while Statements • Example: var count = 10; while (count > 0) { document.writeln(count); --count; } document.writeln(“We have liftoff.”); Introduction to JavaScript 3

38. Introduction to JavaScript 3

39. Repetition • while Statements • Example: var count = 1; while (count <= 100) { document.writeln(count); count *= 2; } Introduction to JavaScript 3

40. Introduction to JavaScript 3

41. Repetition • while Statements • Infinite loop • A situation in which a loop statement never ends because the conditional expression is never updated or is never false • Need to include code within the body of the while statement that changes some part of the conditional expression • Should also include code that monitors the conditional expression Introduction to JavaScript 3

42. Repetition • do…while Statements • Executes a statement or statements once, then repeats the execution as long as a given conditional expression evaluates to true • “Do once, then test to see if it is done again” • Syntax do { statement(s); } while (conditional_expression) ; Introduction to JavaScript 3

43. Introduction to JavaScript 3

44. Introduction to JavaScript 3

45. Repetition • for Statements • Used for repeating a statement or series of statements as long as a given conditional expression evaluates to true • “Do for a prescribed number of iterations” • Syntax for (initialization_expression; condition; update_statement) { statement(s); } Introduction to JavaScript 3

46. Repetition • for Statements • Steps in processing a for loop • Initialization expression is started • Only occurs once, when loop is first encountered • Evaluate condition • If condition == true  execute loop body, go to next step • If condition == false  for statement ends • Execute update statement • Then return to condition evaluation Introduction to JavaScript 3

47. Introduction to JavaScript 3

48. Introduction to JavaScript 3

49. Introduction to JavaScript 3

50. Repetition Control • break Statements • Stop executing the looping statement • continue Statements • Halts a looping statement and restarts the loop with a new iteration Introduction to JavaScript 3