CNIT 133 Interactive Web Pags – JavaScript and AJAX

1. CNIT 133 Interactive Web Pags –JavaScript and AJAX Expression

2. Agenda • My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes). • Expressions vs Statements • Compound Statements • Operators (string, arithmetic, assignment, comparison, logical, conditional) • Special operators (delete, new, this, typeof, void) • Function • The order of operations

3. Expression • An expression is any valid set of literals, variables, operators, function calls, and expressions that evaluates to a single value. • The resulting single value can be a number, a string, a Boolean, or a special value (null, undefined, Infinity, or NaN); that is, the result of any expression is always one of JS’s defined data types or special values. 3 + 7 // number 10 3 + 7 + 10 + "" // string 20 "Dr. " + " " + "Pepper" // string Dr. Pepper • Literal is a “simple expression”: 1.7 (number literal) "JS" (string literal) true (Boolean literal) null (special value) { x:2, y:2} (object literal) [2,3,4,5,6] (array literal) function (x) { return x * x; } (function leteral)

4. statement • A statement is any set of declarations, method calls, function calls, and expressions that performs some action. var num = 1; // declare a variable document.write("hello"); // perform write action • Statement end with (;)

5. Expressions vs Statements • Statements often contain expressions that have to be evaluated before the specified action can be performed. document.write("Sum: ", 3 + 7, "<br>"); // write statement with expression • Evaluates the expression 3 + 7 • Writes the string "Sum: " • Converts the number 10 to a string and writes it • Finally, writes the string "<br>" total = 1 + 2; // assignment statement with expression • Evaluates the expression 1 + 2 • Assigns to variable - total NOTE: all JS values can be classified as one of the three primitive data types or one of the special values null, undefined, Infinity, or NaN.

6. Expression Satements • Assignment statements are one major category of expression statements: s = "Hello " + name; i *= 3; • The increment and decrement operators, ++ and --, are related to assignment statements: counter++; • Function calls are another major category of expression statements: alert("Welcome, " + name); window.close();

7. Compound Statements • JavaScript has a way to combine a number of statements into a single statement (or statement block): { x = Math.PI; cx = Math.cos(x); alert("cos(" + x + ") = " + cx); } • This statement block acts as a single statement, it does not end with a semicolon. The primitive statements within the block end in semicolons, but the block itself does not.

8. Operators • Operators are the workers in expressions. • An unary operator performs work, or operates, on one operand. • A binary operator operates on two operands. • A ternary operator operates on three operands.

9. Operators (continue…)

10. Types of Operators • JS supports five categories of operators: • String operator – operators that work on strings • Arithmetic operators, or mathematical operators – operators that perform mathematical computations • Assignment operators – operators that assign a value to a variable, object, or property • Comparison operators – operators that compare two values or expressions and return a Boolean value indicating true or false • Logical operators, or Boolean operators – operators that take Boolean values as operands and return a Boolean value indicating the true or false of the relationship. • In addition, JS supports one special operator, the conditional operator.

11. String Operator (concatenation) • There are only two string operators: the concatenation operator (+) and the concatenation by value operator (+=). • The concatenation operator (+) concatenates two strings together. "Greetings, " + "everyone" // Evaluating to the string "Greetings, everyone" var salutation = "Greetings, "; var recipient = "everyone"; salutation + recipient; // "Greetings, everyone“ • The concatenation by value (+=) concatenates the string on the right side to the string value stored in the variable on the left side, then assigns the result back to the left operand variable. var greeting = "Greetings, "; greeting += "everyone"; // Then, greeting will gets “Greetings, everyone” • NOTE: a common use of the concatenation by value operator (+=) is to pile a bunch of HTML statements into a single string variable for easy writing to a pop-up window.

12. Concatenation by value (+=) <html> <head><title>concatenation by value</title> <script language="JavaScript" type="text/javascript"> var docContent = ""; </script> </head> <body> <h1>Concatenation by Value (+=)</h1> <script language="JavaScript" type="text/javascript"> docContent += "Dynamically generated page content. \n"; docContent += "More dynamically generated page content. \n"; docContent += "\t Still more dynamically generated page content. "; alert(docContent); </script> </body> </html>

13. Arithmetic (Mathematical) Operators • Arithmetic operators are operators that perform mathematical operations. • NOTE: all arithmetic operators work on numbers and result in a number. Division by zero results in the numeric value Infinity. (Some browser result in undefined or NaN)

14. Arithmetic Operators

15. Arithmetic Operators (continue…)

16. Assignment Operators • Assignment operation either initializes or changes the contents of the variable listed on the left of the operator. var myCup = "lemonade"; myCup += " tea"; // "lemonade tea" myCup = "ice water";

17. Assignment Operators (continue…)

18. Comparison Operators • Comparison operators compares two values or two expressions of any data type. • Usually, the two items being compared are of the same data type. • The result of a comparison is always a Boolean truth value: true or false. • JS often performs conversions for you when you do comparisons of strings and numbers. • All comparisons except (===) and (!==), JS assumes you are trying to compare similar data type and performs the conversions for you. 5 == "5" // true NOTE: JS converts the string to a number in order to perform a meaningful comparison. (numbers had already represented in float, so perform a parseFloat() to string)

19. Comparison Operators (continue…)

20. Comparison Operators (continue…)

21. Logical (Boolean) Operators • Logical operations, AKA, Boolean operations, always result in a truth value: true or false. • The && (AND) operator: In order for an && (AND) expression to be true, both operands must be true. • The || (OR) operator: only one side needs to be true in order for the expression to evaluate to true. • The ! (NOT) operator: negate the expression

22. Logical Operators

23. The Conditional Operator • The conditional operator is the only JS operator that takes three operands. • The syntax is (condition) ? ValueIfTrue : ValueIfFalse ; var age = 38; status = (age >= 18) ? "adult" : "minor" ; NOTE: status = "adult" ("adult" will be assigned to the variable status.)

24. The conditional operator sample <html> <head><title>conditional operator</title> </head> <body> <h1>conditional operator</h1> <script language= "JavaScript" type= "text/javascript"> alert(parseInt(prompt("what is 100 + 50?", "")) == 150 ? "correct" : "wrong "); </script> </body> </html>

25. Special Operator (delete) • JS supports several special operators that you should be aware of: delete, new, this, typeof, and void • delete operator: allows you to delete an array entry or an object from memory. • delete is a unary operator that attempts to delete property, array element, or variable specified as its operand. • Not all variables and properties can be deleted: built-in core and client-side properties, and user-defined variables declared with the var statement cannot be deleted. var obj = { x:1, y:2 }; // defined an object delete obj.x; // delete property, return true typeof obj.x; // property not exist, undefined delete obj.x; // nonexist property, return true delete obj; // cannot delete var defined, return false x = 1; // no var defined delete x; // ok to del, not defined with var, true • When remove an element from an array with the delete operator, JS does not collapse the array. In stead, that array element becomes undefined; any attempt to evaluate that element results in undefined.

26. Special Operator (new) • The Object-Creation Operator (new): creates a new object and invokes a constructor function to initialize it. • It is a unary operator. • new constructor(arguments); • constructor must be an expression that evaluates to a constructor function. var obj = new Object; // omit () var curDate = new Date(); var myArray = new Array(); • If the function call has no arguments, JS allows the parentheses to be omitted

27. Special Operator (this) • The special keyword - this is a shortcut way of referring to the current object

28. Special Operator (typeof) • The typeof operator: is a unary operator that determines the current data type of any variable. • The result of a typeof operation is : number, string, boolean, object, or undefined. • typeof (operand) • Or typeof operand • NOTE: parentheses are optional. but it is considered good programming style to use them.

29. Special Operator (void) • The void operator: is a unary operator that tells the interpreter to evaluate an expression and returns no value (return undefined). • The most common use for this operator is in JS Pseudo-protocol, where it allows you to evaluate an expression for its side effects without the browser displaying the value of the evaluated expression: <a href="javascript: void window.open();">New window</a>

30. Function • A function is a block of predefined programming statements whose execution is deferred until the function is “called”. • You call a function by invoking its name with any required or optional parameters. • A function parameter, aka an argument, is a data value or data reference that you can pass to the function to work on or use. function greetVisitor() { alert("Hello"); } To call the function, <body> <script language="JavaScript" type="text/javascript"> greetVisitor(); </script> </body>

31. Passing Parameters to Functions <html> <head><title>Passing Parameters</title> <script language="JavaScript" type="text/javascript"> function greetVisitor(visitor) { alert("Hello, " + visitor + "!"); } </script> </head> <body> <h1>Passing Parameters</h1> <script language="JavaScript" type="text/javascript"> greetVisitor("JavaScript"); </script> </body> </html>

32. Returning a value from a function <html> <head><title>return data</title> <script language="JavaScript" type="text/javascript"> function calcRect(width, height) { var area = width * height; return area; } </script> </head> <body> <h1>Returning a value from a function</h1> <script language="JavaScript" type="text/javascript"> alert("The area of an 8x5 rectangle is: " + calcRect(8, 5)); </script> </body> </html>

33. The order of operations

34. The order of operations

35. Exercises • 4 + 10/2 * 3 – (1 + 2) * 4 = 7 • 7 + 5 + “dollars” = “12dollars” • “dollars” + 7 + 5 = “dollars75” • 6 + 25/5 = 11 • 4 + 10 – 5 + 2 = 11 • 4 + 5%3 + 7 = 13 • 2 * 4 * 8 – 6 * 2 = 52 • 5 * “4” = 20 • 4%2 * 98 = 0 • 2 * 4 + “5” = 85 • “4” – 2 = 2