Transcript Ajax, JavaScript and PHP

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;
document.write("hello");
// declare a variable
// 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>");
1.
2.
3.
4.
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;
1.
2.
// write statement with expression
// 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>
<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 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
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;
8 (before
assignment)
y = x++;
7 (before
assignment)
8 (after
assignment)
Assume x=7
y = --x;
6 (before
assignment)
y = x--;
7 (before
assignment)
6 (after
assignment)
--
decrement
Subtracts 1 from
the operand
Unary
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
+=
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
Any data type
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 Operators
Operator
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 userdefined variables declared with the var statement cannot be deleted.
var obj = { x:1, y:2 };
delete obj.x;
typeof obj.x;
delete obj.x;
delete obj;
x = 1;
delete x;
•
// defined an object
// delete property, return true
// property not exist, undefined
// nonexist property, return true
// cannot delete var defined, return false
// no var defined
// 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 Pseudoprotocol, 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 operations
Order
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
Order
Description
Operator(s)
8
Relational comparisons
< <= > >=
9
Equality, inequality,
equivalency, and nonequivalency
== != === !==
10
Boolean AND
&&
11
Boolean OR
||
12
Conditional expression
?:
13
Assignment
= += -= *= /= %=
Exercises
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
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