CNIT 133 Interactive Web Pags – JavaScript and AJAX Expression

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

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)

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

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.

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

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.

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.

Operators (continue…) Operator Flavor Syntax Examples unary Operand operator or operator operand -88 Count++ !flag binary Operand operator operand 7 + 8 num1 < num2 ternary Operand operator operand operator operand fname != null ? myName = fname : myName = “unknown”;

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.

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.

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> docContent += "Dynamically generated page content. \n"; docContent += "More dynamically generated page content. \n"; docContent += "\t Still more dynamically generated page content. "; alert(docContent); </body> </html>

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)

Arithmetic Operators Operator Name What it does Flavor Example Result + Plus Adds the two operands Binary 7 + 5 12 - Minus Subtracts the right operand from the left operand 7 – 5 2 * Multiply Multiplies the two operands 7 * 5 35 / Divide Divides the left operand by the right operand and returns the quotient 7/5 1.4 % Modulus (remainder) Divides the left operand by the right operand and returns the remainder 7%5

Arithmetic Operators (continue…) Name What it does Flavor Example Result - Negation Negates the operand Unary -7 ++ Increment Adds 1 to the operand Pre-increment: var x=7; var y = ++x; Post-increment: var y = x++; x = 8, y = 8 x = 8, y = 7 -- decrement Subtracts 1 from the operand Pre-decrement: var y = --x; Post-decrement: var y = x--; x = 6, y = 6 x = 6, y = 7

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

Assignment Operators (continue…) Name Example Is equivalent to Applies to = Equals or gets x=y x=7 Any data type += Add by value x += y x += 5 x = x + y x = x + 5 Numbers and strings -= Subtract by value x -= y x -= 7 x = x – y x = x – 7 Numbers only *= Multiply by value x *= y x *= 5 x = x * y x = x * 5 /= Divide by value x /= y x /= 7 x = x / y x = x / 7 %= Modulus by value x %= y x %= 5 x = x % y x = x % 5

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)

Comparison Operators (continue…) Name Description Example (x=7, y=5) Example result == Is equal to Returns true if the operands are equal x == y False != Is not equal to Returns true if the operands are not equal x != y True > Is greater than Returns true if the left operand is greater than the right operand x > y >= Is greater than or equal to Returns true if the left operand is greater than or equal to the right operand x >= y

Comparison Operators (continue…) Name Description Example (x=7, y=5) Example result < Is less than Returns true if the left operand is less than the right operand x < y False <= Is less than equal to Returns true if the left operand is less than or equal to the right operand x <= y === Is equivalent to Returns true if the operands are equal and of the same data type x === y !== Is not equivalent to Returns true if the operands are not equal and/or not of the same type x !== y true

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

Logical Operators Operator Name Flavor Truth Table Example(isJS=true, isMonday=false) Result && AND Binary T && T = T T && F = F F && T = F F && F = F isJS && isMonday False || OR T || T = T T || F = T F || T = T F || F = F isJS || isMonday True ! NOT Unary !true = false !false = true !isMonday true

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

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>

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.

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

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

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.

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>

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>

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> greetVisitor("JavaScript"); </body> </html>

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> alert("The area of an 8x5 rectangle is: " + calcRect(8, 5)); </body> </html>

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

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

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