CIS 89C
Client-Side Programming with JavaScript
Unit 5 - Expressions and statements (week 3)
References:
McDuffie - Chapter 4 Expressions
and Statements
Topics:
Opening statement
Expressions and statements - McDuffie page 107
Operators - McDuffie page 109
String operators - McDuffie page 110
Mathematical operators - McDuffie page 112
Assignment operators - McDuffie page 114
Comparison operators - McDuffie page 115
Equal and equivalent operators - McDuffie page 116
Logical operators - McDuffie page 117
The conditional operator - McDuffie page 118
The comma operator - Pollock page 119
Special operators - McDuffie page 119- Pollock page 119
Functions - McDuffie page 120
***********************************************************
Opening statement
Expressions and statements are not much different than many other programming languages.
***********************************************************
Expressions and statements
An expression is a valid sequence of literals, variables, operators, function calls, and smaller included expressions. An expression evaluates to a single value.
A statement is an expression followed by a semicolon or the end of the line of code. I suggest you end statements with both a semicolon and the end of the line.
***********************************************************
Operators
Operators may be:
Unary - one operator followed by one operand
Example: ! flag // the ! is the logical not operator
Binary - two operands, with one operator between them
Example: a + b
Postfix - one operator after one operand
Example: a-- + b // decrement a after the
expression has been evaluated
for a + b
Ternary - There is only one ternary operator
Example: a > b ? a : b //
if a > b is true, the value is a, otherwise the value of the expression is b.
The McDuffie book lumps unary and postfix together, and
only mentions the ternary operator later.
The Pollock book
does not discuss string operators.
***********************************************************
String operators
There are two string
operators.
The + operator
The + operator concatenates two strings together
Example:
"Hello" +
" " + "there"
This evaluates to:
"Hello
there"
The += operator
The += operator concatenates one string to another.
Example:
x =
"hello";
y =
"there";
x += y;
The += operator takes the value out of x, concatenates the value of y, and puts the result back in x. So, after this operation, the value of x is:
"hellothere"
***********************************************************
Mathematical operators
var a = 5;
var b = 3;
Binary mathematical operators:
add: a + b evaluates to 8
subtract: a - b evaluates to 2
multiply: a * b evaluates to 15
divide: b / a evaluates to 0.6 (Always floating point)
modulus: a % b evaluates to 2
(Integer quotient 1 and floating point remainder 2.0)
5.5 % 3.3 evaluates to 2.2
(Integer quotient 1 and floating point remainder 2.2)
Unary minus: -a evaluates to -5
Unary (prefix) ++ and --
++a evaluates to 6
++a evaluates to 7
--a evaluates to 6
The prefix increment of decrement changes the value of the variable before the expression is evaluated.
Postfix ++ and --
x = 7;
a++ evaluates to 7
a evaluates to 8
a-- evaluates to 8
a evaluates to 7
The postfix increment and decrement change the value after the expression is evaluated.
***********************************************************
Assignment operators
var x;
x = 26;
The simple assignment takes the value of the right hand expression and saves that value in the variable specified as the left hand operand.
There are also a group of operators that:
1) take the value from the left hand variable
2) use that value with an operation and the left hand expression
3) save the result as the value of the left hand variable
These operators are:
+= both the string and the mathematical +
-+
*=
/=
%=
Examples:
var x = 5;
x -= 2;
Now the value of x is 3
var w =
"soda";
w +=
"pop";
The value of w is now "sodapop".
Note that the left hand operand must always be a place to put the value, such as a variable. The left hand operand must have an initial value, before doing the assignment.
The right hand operand is an expression, which produces the value to be saved.
***********************************************************
Relational comparison operators
These operators are:
> greater than
>= greater than or equal to
< less than
<= less than or equal to
The result is a Boolean value, true or false.
You can compare the value of numbers.
5 < 6 is true
You can also compare strings.
"a" < "b" is true because the ASCII value for a is 97, which is less than
the ASCII value for b, which is 98.
"B" < "a" is true because the ASCII value for capital B is 66.
Case does make a difference.
"aaat" < "aaax" Is true. If the first characters are the same,
look at the second character. then the third, et cetera.
Otherwise matching shorter strings are less than longer strings.
"red" < "redder" is true.
***********************************************************
Equal and equivalent operators
There are two operators that test the value of operands.
== equal
!= not equal
5 == 5 is true
There are two operands that test that the type and value are the same.
=== type and value the same (equivalent)
!== type and/or value not the same
5 === 5 is true, both the value and the type are the same
5 == "5" is true, both have the value of "5"
== does not test the type.
5 === "5" is false, the types do not match
***********************************************************
Logical operators
&& logical AND, true only if both operands are true.
|| logical OR, true if either operand is true
otherwise the result is false
! logical NOT is a unary operator
Examples:
true && true is true
true && false is false
true || false is true
!false is true
As in other languages, when evaluating && or ||, the right hand expression is not evaluated, if the result is already determined by the left hand operand.
Examples:
false && (a = 14) The first operand is false, so the result is false.
The second operand is not evaluated,
so a is not set to 14.
Similarly for
true || (a = 14) The first operand is true, so the result is true.
Most programmers are careful not to put an assignment in the right hand operand, so the operation is not dependent on how the logical operator is evaluated.
Perl programmers tend do put an assignment in the right hand operand.
They carefully use the evaluation process of logical operators.
(Perl programmers are real Geeks.)
***********************************************************
The conditional operator
There is only one operator that takes three operands.
Because it takes thee operands, it is often called the ternary operator.
logical_value ?
true_value : false_value
If the first operand is true, the value of the whole expression is the value of the second operand.
If the first operand is false, the value of the whole expression is the value of the third operand.
***********************************************************
The comma operator
A comma can be used as a weak semicolon.
The expression to the left of the comma is evaluated.
The expression to the right of the comma is evaluated.
The resulting value for the whole expression is the value from the expression to the right of the comma.
The comma operator is used in the for operator, where you want two expressions, but do not want a semicolon.
***********************************************************
Special operators
We will learn about most of these later.
delete deletes an array or object
new creates a new array or object
this refers to the current object. This is VERY DIFFERENT than C++
typeof we saw this earlier. It gives the type of anything.
void allows an expression to be evaluated and no return value
The following are from Pollock page 119.
We will study objects later
in The left hand operand is a string, or something else which can be
converted into a string (almost everything in JavaScript will return a string when needed). It is the name of a property
The right hand operand is an object or an array.
returns true if the left hand operand is the name of a property of
the object or array which is the left hand operand.
The following discussion of instanceof will make some sense if you understand objects and class. If it does not make any sense to you, ignore it until later.
instanceof returns true if the left hand operand is an object that
was created by the function that is named in the
right hand operand.
NOTE: there are no real classes in JavaScript.
Objects created by the same constructor function are sometimes
called members of the same class, even thought they may not
have the same properties.
NOTE: classes are inherited, so an object can be a member of a class and also be a member of the parent and ancestor classes.
***********************************************************
Functions
Functions are similar to functions in other languages, with some differences.
Example:
function sayHello()
{
alert("hello");
}
You can invoke this function with.
sayHello();
The sayHello() function will run and display an alert box that says "hello".
Notice that when we declare a function, you must use the keyword function.
Parameters
A function may have parameters.
Like variables, parameters have NO type.
Example:
function saySomething(it)
{
alert("The word is: " + it);
}
You can invoke this function with.
saySomething("What's
up Doc?");
The saySomething() function will run and display an alert box that says
"The word is: What's up Doc?"
Default parameters
You may often omit trailing arguments.
Example (same function):
function saySomething(it)
{
alert("The word is: " + it);
}
You can invoke this function with.
saySomething();
The saySomethint() function will run and display an alert box that says
"The word is: undefined"
To use this effectively, you need to provide some default value in the function.
Return values
A function may return a value.
Example:
function add(x, y)
{
return x + y;
}
var result = add(3,
4);
alert(result);
This will display 7.
Note that the existence of or type of the returned value are not specified.
***********************************************************
Precedent
Precedent determines the order of execution.
For example, in math:
3 + 4 * 3 evaluates to 15 (not 21)
because the multiply is done before add
In JavaScript there is also precedent among the operators.
The table of precedence is in Mc Duffie and Pollock.
It is similar to other languages.
***********************************************************
Summary
We have seen a lot about operations, and some about functions.
Fortunately, most of it is similar to other programming languages.
Remember:
== tests for equal value
=== tests for equal value and the same type
You must use the function keyword before the definition of a function.
Trailing parameters may often be omitted.
Functions may, or may not, return a value.
% Can be used with floating point or integer numbers.
An integer quotient is computed, and the floating point remainder is the result.
+ Can be used to concatenate two stings
+= Can be used to append the second string to the first operand string.
Statements end with a semicolon or the end of the line.
It is best to use both.