|
|
Variables are only useful to a programmer if they can be manipulated. JavaScript has many built-in operators that can be used to manipulate variables. JavaScript operators are symbols and keywords you can use to assign values to variables or perform operations with those values. Using operators, you can combine variable and literal values into expressions that perform calculations and produce results. Your script can display onscreen the result from an expression, store the result within another (or the same) variable, and use the result within another expression. In the preceding section you learned how to use the basic assignment operator, the equals sign (=), to store values in variables within a script.This section will show you many more operators in the JavaScript language.
There are several operators that you can use to perform arithmetic operations on numbers. JavaScript has two kinds of arithmetic operators, unary and binary. Unary operators change the value of a single value or expression, while binary operators change the value of two values or expressions—one on each side of the operator. An assignment operator is used to store the results of the arithmetic to a variable. Table 1.5 lists both kinds of operators, as well as the assignment operators.
 |
|
Symbol |
Description |
Example |
|---|---|---|
|
|
||
|
Assignment Operators | ||
|
= |
Assign to |
variable = expression |
|
+= |
Add to |
variable += expression |
|
−= |
Subtract from |
variable −= expression |
|
*= |
Multiply by |
variable *= expression |
|
/= |
Divide by |
variable /= expression |
|
Unary Operators | ||
|
++ |
Increment |
++variable or variable++ |
|
−− |
Decrement |
−−variable or variable−− |
|
− |
Negation |
−expression |
|
Binary Operators | ||
|
+ |
Addition (overloaded) |
expression + expression |
|
− |
Subtraction |
expression − expression |
|
* |
Multiplication |
expression * expression |
|
/ |
Division |
expression / expression |
|
% |
Modulus |
expression % expression |
|
Some assignment operators perform arithmetic operations with the right-hand expression before assigning a new value to the variable on the left. For example, the expression counter += 2; would add counter and 2 and then save the new value back to counter.
The increment and decrement unary operators increase or decrease by one, respectively, the variable they are used with, and then they assign the new value to the original variable. Unary operators are most commonly used with loop counters, which are discussed in Chapter 2, "Selection and Repetition Statements." The negation unary operator changes the sign of a variable or expression.
Each binary operator does exactly what you would expect it to do—performs basic mathematical operations. The modulus operator only works on integer numbers and returns a whole number remainder resulting from integer division.
The following example demonstrates the use of each unary operator:
<html>
<head>
<title>
JavaScript Professional Projects - Arithmetic Operators
</title>
<script language="JavaScript">
<!--
var number = 10;
// -->
</script>
</head>
<body>
<center>
<font size=6>JavaScript Professional Projects</font><br>
<font size=4>Chapter 1: Arithmetic Operators</font>
</center>
<br><br>
<p>
<font size=4><b>Unary Operators (++, -- and -)</b></font><br><br>
The original value of 'number' is <b>
<script language="JavaScript">
<!--
document.write( number );
// -->
</script>
</b>.<br><br>
The value of 'number++' is <b>
<script language="JavaScript">
<!--
document.write( number++ );
// -->
</script>
</b>, but after the operation completes, 'number' it is <b>
<script language="JavaScript">
<!--
document.write( number );
// -->
</script>
</b>.<br><br>
The value of '++number' is <b>
<script language="JavaScript">
<!--
document.write( ++number );
// -->
</script>
</b>, and after the operation completes, 'number' it is <b>
<script language="JavaScript">
<!--
document.write( number );
// -->
</script>
</b>.<br><br>
The value of '-number' is <b>
<script language="JavaScript">
<!--
document.write( -number );
// -->
</script>
</b>.<br><br><br><br>
<font size=4><b>Binary Operators
(+, -, *, / and %)</b></font><br><br>
The value of 'number + 12' is <b>
<script language="JavaScript">
<!--
document.write( number + 12 );
// -->
</script> </b>.<br><br>
The value of 'number - 9' is <b>
<script language="JavaScript">
<!--
document.write( number - 9 );
// -->
</script>
</b>.<br><br>
The value of 'number * 33' is <b>
<script language="JavaScript">
<!--
document.write( number * 33 );
// -->
</script> </b>.<br><br>
The value of 'number / 2' is <b>
<script language="JavaScript">
<!--
document.write( number / 2 );
// -->
</script>
</b>.<br><br>
The value of 'number % 7' is <b>
<script language='JavaScript'>
<!--
document.write( number % 7 );
// -->
</script>
</b>.<br><br>
</p>
</body>
</html>
You'll notice that the addition operator is marked as overloaded. This means that the same symbol can be used in more than one way. In the case of the plus sign, it can be used to add two numbers together or concatenate one string with another—two altogether very different operations.
Relational operators are used primarily with selection statements because they produce a boolean result—either true or false. Here is an example of using the relational operators with an if/else if statement:
var var1 = 99;
var var2 = -12;
if( var1 == var2 )
{
// This relation is false
}
else if( var1 > var2 )
{
// This relation is true
}
else if( var1 < var2 )
{
// This relation is flase
}
The relational operators and their names are listed in Table 1.6.
|
|
Symbol |
Description |
|---|---|
|
|
|
|
== |
Equal to |
|
!= |
Not equal to |
|
> |
Greater than |
|
>= |
Greater than or equal to |
|
< |
Less than |
|
<= |
Less than or equal to |
|
When performing complex operations that involve relational operators, it is possible to split the statements into their corresponding parts. For example, if you were writing code that used the fact that var1 and var2 are equal or not, you could do the following:
...
var areEqual = var1 == var2;
if( areEqual )
{
// Statement to run if var1 is equal to var2
}
else
{
// Statement to run if var1 is not equal to var2
}
This allows you to use the fact that var1 is or is not equal to var2 without repeatedly performing the evaluation. This method will decrease the amount of time it takes for your program to run, but it may make the program harder to read.
There are many bitwise operators that will allow you to easily change the bit values of numeric variables. Bitwise operators can be either unary or binary, and they always result in a numeric value. Logical operators are used in correlation with the relational operators mentioned in the previous section. Bitwise operators may be a bit difficult to understand, but will be very useful once you get the hang of them. Table 1.7 lists the symbol and name of each bitwise and logical operator.
|
|
Symbol |
Description |
|---|---|
|
|
|
|
& |
Bitwise AND |
|
| |
Bitwise OR |
|
∧ |
Bitwise XOR |
|
~ |
Bitwise NOT |
|
<< |
Left shift |
|
>> |
Right shift |
|
>>> |
Zero fill right shift |
|
&& |
Logical AND |
|
|| |
Logical OR |
|
! |
Logical NOT |
|
The logical operators are most commonly used with selection statements, which are explained in the next chapter. Bitwise operators can be very useful for mathematical operations. Using bitwise operators is generally faster than multiplying or dividing by powers of two.
Because bitwise operators are best explained using examples, I've included a lengthy one:
<html>
<head>
<title>
JavaScript Professional Projects - Shift Operators
</title>
<script language="JavaScript">
<!--
function toBinary( n )
{
var answer = "";
while( n != 0 )
{
answer = Math.abs(n % 2) + answer;
n = parsIent( n / 2 );
}
if( answer.length == 0 ) answer = "0";
return( answer );
}
// -->
</script>
</head>
<body>
<center>
<font size=6>JavaScript Professional Projects</font><br>
<font size=4>Chapter 1: Shift Operators</font>
</center>
<br><br>
<p>
<table width="85%">
<tr>
<td width="10%"></td>
<td width="33%"><b>Decimal</b></td>
<td width="34%"><b>Binary</b></td>
</tr>
<tr>
<td width="10%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="10%">Bitwise AND</td>
<td width="33%">117 & 7 =
<script language="JavaScript">
<!--
document.write( 117 & 7 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 117 ) + " & " + toBinary( 7 ) +
" = " + toBinary( 117 & 7 ) );
// -->
</script>
</td>
</tr>
<tr>
<td width="10%"></td>
<td width="33%">42 & 21 =
<script language="JavaScript">
<!--
document.write( 42 & 21 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 42 ) + " & " + toBinary( 21 ) +
" = " + toBinary( 42 & 21 ) );
// -->
</script>
</td>
</tr>
<tr>
<td width="10%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="10%">Bitwise OR</td>
<td width="33%">117 | 7 =
<script language="JavaScript">
<!--
document.write( 117 | 7 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 117 ) + " | " + toBinary( 7 ) +
" = " + toBinary( 117 | 7 ) );
// -->
</script>
</td>
</tr>
<tr>
<td width="10%"> </td>
<td width="33%">42 | 21 =
<script language="JavaScript">
<!--
document.write( 42 | 21 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 42 ) + " | " + toBinary( 21 ) +
" = " + toBinary( 42 | 21 ) );
// -->
</script>
</td>
</tr>
<tr>
<td width="10%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="10%">Bitwise XOR</td>
<td width="33%">117 ^ 7 =
<script language="JavaScript">
<!--
document.write( 117 ^ 7 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 117 ) + " | " + toBinary( 7 ) +
" = " + toBinary( 117 | 7 ) );
// -->
</script>
</td>
</tr>
<tr>
<td width="10%"> </td>
<td width="33%">42 ^ 21 =
<script language="JavaScript">
<!--
document.write( 42 ^ 21 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 42 ) + " | " + toBinary( 21 ) +
" = " + toBinary( 42 | 21 ) );
// -->
</script>
</td>
</tr>
<tr>
<td width="10%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="10%">Bitwise NOT</td>
<td width="33%">~117 =
<script language="JavaScript">
<!--
document.write( ~117 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( "~" + toBinary( 117 ) +
" = " + toBinary( ~117 ) );
// -->
</script>
1 </td>
<tr>
<td></td>
<td width="33%">~42 =
<script language="JavaScript">
<!--
document.write( ~42 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( "~" + toBinary( 42 ) +
" = " + toBinary( ~42 ) );
// -->
</script>
</td>
</tr>
<tr>
<td> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td>Left Shift</td>
<td width="33%">117 << 1 =
<script language="JavaScript">
<!--
document.write( 117 << 1 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 117 ) + " << 1 = " +
toBinary( 117 << 1 ) );
// -->
</script>
</td>
</tr>
<tr>
<td> </td>
<td width="33%">42 << 3 =
<script language="JavaScript">
<!--
document.write( 42 << 3 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 42 ) + " << 3 = " +
toBinary( 42 << 3 ) );
// -->
</script>
</td>
</tr>
<tr>
<td> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td>Right Shift</td>
<td width="33%">117 >> 1 =
<script language="JavaScript">
<!--
document.write( 117 >> 1 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 117 ) + " >> 1 = " +
toBinary( 117 >> 1 ) );
// -->
</script>
</td>
</tr>
<tr>
<td> </td>
<td width="33%">42 >> 3 =
<script language="JavaScript">
<!--
document.write( 42 >> 3 );
// -->
</script>
</td>
<td width="34%">
<script language="JavaScript">
<!--
document.write( toBinary( 42 ) + " >> 3 = " +
toBinary( 42 >> 3 ) );
// -->
</script>
</td>
</tr>
</table>
</body>
</html>
This example demonstrates the use of each bitwise operator (except the zero fill right shift [>>>], which behaves identical to the regular right shift [>>]). I encourage you to modify the example above and discover the true power of the bitwise operators.
The logical operators are comparatively simple, compared to the bitwise operators. Tables 1.8–1.10 display every combination that you will encounter with the logical operators.
|
|
True |
&& |
True |
= |
True |
|
True |
&& |
False |
= |
False |
|
False |
&& |
False |
= |
False |
|
|
|
True |
|| |
True |
= |
True |
|
False |
|| |
True |
= |
True |
|
True |
|| |
False |
= |
True |
|
False |
|| |
False |
= |
False |
|
|
|
!True |
= |
False |
|
!False |
= |
True |
|
The AND operator only returns true when both operands evaluate to true, the OR operator returns true if either of the operands evaluate to true, and the NOT operator returns the opposite of its single operand.
The most common use for logical operators is with selection statements. Here is a very simple example of a few situations you may encounter:
if( true && false )
{
// These statements will never run
}
if( true || false )
{
// These statements will always run
}
if( !false )
{
// These statements will always run
}
In the first if statement, true && false will always result in a false value, as you can see in Table 1.8. This means that the statements inside the if block will never get a chance to run. On the other hand, in the last two if statements, true || false and !false will always evaluate to true. This means that the statements inside these if blocks will always run.
There are many other very useful operators that do not fit into the above sections, but are included with JavaScript. All of them are listed in Table 1.11
|
|
Symbol |
Descriptionx |
|---|---|
|
|
|
|
?: |
Ternary condition operator. |
|
delete |
Used to delete an object and free up its memory. |
|
new |
Used to create an instance of a user defined object. |
|
this |
Used to refer to the current object. |
|
typeof |
Returns the type of an unevaluated operand. |
|
void |
Evaluates an expression without returning a value. |
|
+ |
String concatenation operator. |
|
The ternary operator is closely related to the if/else structure covered in the next chapter. This operator takes three operands. The first operand is a condition, the second operand is the value for the entire expression if the condition evaluates to true, and the third operand is the value for the entire expression if the condition evaluates to false. For example, the output statement
document.write( new Date().getHour() < 12 ? "Good morning" :
"Good afternoon" );
contains a conditional expression that evaluates to true during the first 12 hours of the day (if new Date().getHour() = = true) and false to the last 12 hours of the day (if new Date().getHour() = = false). This entire statement can be used to replace the following if/else structure:
if( new Date().getHour() < 12 )
{
document.write( "Good morning" )
}
else
{
document.write( "Good morning" );
}
The precedence of this operator is low, so it is a good idea to surround the entire statement in parentheses to avoid undesired results, such as the interpreter evaluating the relational operator and not knowing what to do with the rest of the statement.
The void operator is used to evaluate an expression without returning any results. The most popular way to use the void operator is in a link that goes nowhere. For example:
<a href="JavaScript: void" onClick="<some JavaScript command>">
This link will not change the currently displayed page when the visitor clicks on it, but will perform some other JavaScript-related action.
The plus (+) operator is an overloaded operator. This means that it can perform more than one operation depending on its operands. When both operands of the plus sign are numbers, they are added together and the result is returned. If one or both of the operands are strings, the operands are concatenated together and a new string is formed. The plus operator in both cases is left-associative. This means that the values to the left of the operator are calculated first, and then the appropriate operation is performed with the left and right operands.
|
|