CNIT 133 Interactive Web Pags – JavaScript and AJAX Expression

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 103 + 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 variabledocument.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

1. Evaluates the expression 3 + 72. Writes the string "Sum: "3. Converts the number 10 to a string and writes it4. Finally, writes the string "<br>"

total = 1 + 2; // assignment statement with expression

1. Evaluates the expression 1 + 22. 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><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>

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 OperatorsOperator 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

Binary 7 – 5 2

* Multiply Multiplies the two operands

Binary 7 * 5 35

/ Divide Divides the left operand by the right operand and returns the quotient

Binary 7/5 1.4

% Modulus

(remainder)

Divides the left operand by the right operand and returns the remainder

Binary 7%5 2

Arithmetic Operators (continue…)Operator Name What it does Flavor Example Result

- Negation Negates the operand

Unary -7 -7

++ Increment Adds 1 to the operand

Unary Assume x=7

y = ++x;

y = x++;

8 (before assignment)

7 (before assignment)

8 (after assignment)

-- decrement Subtracts 1 from the operand

Unary Assume x=7

y = --x;

y = x--;

6 (before assignment)

7 (before assignment)

6 (after assignment)

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…)Operator 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

Numbers only

/= Divide by value x /= y

x /= 7

x = x / y

x = x / 7

Numbers only

%= Modulus by value x %= y

x %= 5

x = x % y

x = x % 5

Numbers only

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…)Operator 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 True

>= Is greater than or equal to

Returns true if the left operand is greater than or equal to the right operand

x >= y True

Comparison Operators (continue…)Operator 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 False

=== Is equivalent to Returns true if the operands are equal and of the same data type

x === y False

!== 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 OperatorsOperator Name Flavor Truth Table Example(isJS=t

rue, isMonday=false)

Result

&& AND Binary T && T = T

T && F = F

F && T = F

F && F = F

isJS && isMonday

False

|| OR Binary 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 objectdelete obj.x; // delete property, return truetypeof obj.x; // property not exist, undefineddelete obj.x; // nonexist property, return truedelete obj; // cannot delete var defined, return falsex = 1; // no var defineddelete 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><script language="JavaScript" type="text/javascript">

greetVisitor("JavaScript");</script></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><script language="JavaScript" type="text/javascript">

alert("The area of an 8x5 rectangle is: " + calcRect(8, 5));</script></body></html>

The order of operationsOrder 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 operationsOrder Description Operator(s)

8 Relational comparisons < <= > >=

9 Equality, inequality, equivalency, and non-equivalency

== != === !==

10 Boolean AND &&

11 Boolean OR ||

12 Conditional expression ?:

13 Assignment = += -= *= /= %=

Exercises1. 4 + 10/2 * 3 – (1 + 2) * 4 = 72. 7 + 5 + “dollars” = “12dollars”3. “dollars” + 7 + 5 = “dollars75”4. 6 + 25/5 = 115. 4 + 10 – 5 + 2 = 116. 4 + 5%3 + 7 = 137. 2 * 4 * 8 – 6 * 2 = 528. 5 * “4” = 209. 4%2 * 98 = 010. 2 * 4 + “5” = 8511. “4” – 2 = 2