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

2. Agenda My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).http://fog.ccsf.edu/~hyip 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, " "); // write statement with expression 1.Evaluates the expression 3 + 7 2.Writes the string "Sum: " 3.Converts the number 10 to a string and writes it 4.Finally, writes the string " " total = 1 + 2;// assignment statement with expression 1.Evaluates the expression 1 + 2 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…) Operator FlavorSyntaxExamples unaryOperand operator or operator operand -88 Count++ !flag binaryOperand operator operand 7 + 8 num1 < num2 ternaryOperand operator operand operator operand fname != null ? myName = fname : myName = “unknown”;

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 (+=) concatenation by value var docContent = ""; Concatenation by Value (+=) docContent += "Dynamically generated page content. \n"; docContent += "More dynamically generated page content. \n"; docContent += "\t Still more dynamically generated page content. "; alert(docContent);

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 OperatorNameWhat it doesFlavorExampleResult +PlusAdds the two operands Binary7 + 512 -MinusSubtracts the right operand from the left operand Binary7 – 52 *MultiplyMultiplies the two operands Binary7 * 535 /DivideDivides the left operand by the right operand and returns the quotient Binary7/51.4 %Modulus (remainder) Divides the left operand by the right operand and returns the remainder Binary7%52

15. Arithmetic Operators (continue…) OperatorNameWhat it doesFlavorExampleResult -NegationNegates the operand Unary-7 ++IncrementAdds 1 to the operand UnaryAssume x=7 y = ++x; y = x++; 8 (before assignment) 7 (before assignment) 8 (after assignment) --decrementSubtracts 1 from the operand UnaryAssume x=7 y = --x; y = x--; 6 (before assignment) 7 (before assignment) 6 (after assignment)

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…) OperatorNameExampleIs equivalent toApplies to =Equals or getsx=y x=7 Any data type +=Add by valuex += y x += 5 x = x + y x = x + 5 Numbers and strings -=Subtract by valuex -= y x -= 7 x = x – y x = x – 7 Numbers only *=Multiply by valuex *= y x *= 5 x = x * y x = x * 5 Numbers only /=Divide by valuex /= y x /= 7 x = x / y x = x / 7 Numbers only %=Modulus by valuex %= y x %= 5 x = x % y x = x % 5 Numbers only

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…) OperatorNameDescriptionExample (x=7, y=5) Example result ==Is equal toReturns true if the operands are equal x == yFalse !=Is not equal toReturns true if the operands are not equal x != yTrue >Is greater thanReturns true if the left operand is greater than the right operand x > yTrue >=Is greater than or equal to Returns true if the left operand is greater than or equal to the right operand x >= yTrue

20. Comparison Operators (continue…) OperatorNameDescriptionExample (x=7, y=5) Example result <Is less thanReturns true if the left operand is less than the right operand x < yFalse <=Is less than equal toReturns true if the left operand is less than or equal to the right operand x <= yFalse ===Is equivalent toReturns true if the operands are equal and of the same data type x === yFalse !==Is not equivalent toReturns true if the operands are not equal and/or not of the same type x !== ytrue

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 OperatorNameFlavorTruth TableExample(isJS=t rue, isMonday=false ) Result &&ANDBinaryT && T = T T && F = F F && T = F F && F = F isJS && isMonday False ||ORBinaryT || T = T T || F = T F || T = T F || F = F isJS || isMonday True !NOTUnary!true = false !false = true !isMondaytrue

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 conditional operator conditional operator alert(parseInt(prompt("what is 100 + 50?", "")) == 150 ? "correct" : "wrong ");

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: New window

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, greetVisitor();

31. Passing Parameters to Functions Passing Parameters function greetVisitor(visitor) { alert("Hello, " + visitor + "!"); } Passing Parameters greetVisitor("JavaScript");

32. Returning a value from a function return data function calcRect(width, height) { var area = width * height; return area; } Returning a value from a function alert("The area of an 8x5 rectangle is: " + calcRect(8, 5));

33. The order of operations OrderDescriptionOperator(s) 1Parentheses() 2Member of an object or an array. [] 3Create instancenew 4Function callfunction() 5Boolean NOT, negation, positive, increment, decrement, typeof, void and delete ! - + ++ -- typeof void delete 6Multiplication, division, and modulus * / % 7Addition, concatenation, and subtraction + -

34. The order of operations OrderDescriptionOperator(s) 8Relational comparisons >= 9Equality, inequality, equivalency, and non- equivalency == != === !== 10Boolean AND&& 11Boolean OR|| 12Conditional expression?: 13Assignment= += -= *= /= %=

35. Exercises 1.4 + 10/2 * 3 – (1 + 2) * 4 = 7 2.7 + 5 + “dollars” = “12dollars” 3.“dollars” + 7 + 5 = “dollars75” 4.6 + 25/5 = 11 5.4 + 10 – 5 + 2 = 11 6.4 + 5%3 + 7 = 13 7.2 * 4 * 8 – 6 * 2 = 52 8.5 * “4” = 20 9.4%2 * 98 = 0 10.2 * 4 + “5” = 85 11.“4” – 2 = 2