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