Today's meeting (May 19th, 2012) we discussed
two aspects of JavaScript;
-
Operators
- The if/else
statement
The Objectives of the SIG were the following:
·
Examine and discuss the different
types of JavaScript Operators.
·
The four that we discussed were;
Mathematical, Assignment, Comparison,& Logical
·
To better understand the Comparison
and Logical Operators we also examined the If/else statement blocks
An operator is a symbol or word in JavaScript
that performs some sort of calculation, comparison, or assignment on one or
more values.
Conditional statements, such as if/else enable
you to make use of the mathematical, comparison and logical operators because
they enable you to specify in your code that an action should occur only when a
condition is met.
JavaScript uses several different types of
operators:
·
Mathematical = Preform mathematical
calculations
·
Assignment = Assigns values to
variables
·
Comparison =These operators are used
to compare two values, two variables, or perhaps two longer statements.
·
Logical = These operators are used to
compare two conditional statements
·
Bitwise = Logical operators that work
at the bit level (Not discussed in SIG)
·
Special = These operators perform
other special functions (Not discussed in SIG)
|
Addition
|
+
|
Adds two values
|
|
Subtraction
|
-
|
Subtracts one value from another
|
|
Multiplication
|
*
|
Multiplies two values
|
|
Division
|
/
|
Divides one value by another
|
|
Modulus
|
%
|
Divides one value by another and
returns the remainder
|
|
Increment
|
++
|
Shortcut to add 1 to a single number
|
|
Decrement
|
--
|
Shortcut to subtract 1 from a single
number
|
|
Unary negation
|
-
|
Makes a positive negative and vice
versa
|
Here is the example I used during the SIG for
Mathematical Operators
<script
type="text/javascript">
//document.write("When we use the operator + we get ");
function moe1(numb1, numb2) { //m.athematical o.perators e.xample 1
document.write("Our two numbers are "+numb1+" and
"+numb2+"</br>");
var numbsum1=numb1+numb2;
document.write("When we use the \"\+\"\operator we get
"+numbsum1+"</br>");
var numbsum=numb1+numb2;
document.write("When we use the \"\+\"\operator we get
"+(numb1+numb2)+"</br>");
var numbdif=numb1-numb2; //I define the variable, but I don't use it, note the
parentheses
document.write("When we use the \"\-\"\ operator we get
"+(numb1-numb2)+"</br>");
document.write("When we use the \"\*\"\ operator we get
"+(numb1*numb2)+"</br>");
document.write("When we use the \"\/\"\ operator we get
"+(numb1/numb2)+"</br>");
document.write("When we use the \"\%\"\ operator we get
"+(numb1%numb2)+"</br>");
document.write("When we use the Unary operator we get
"+(-numbsum)+"</br>");
document.write("When we use the Unary operator we get
"+(-numbdif)+"</br>");
var text1="base";
var text2="ball";
var textsum=text1+text2;
document.write("When we use the \"\+\"\operator we get
"+textsum+"</br>");
/* if the left number is smaller than the right the Modulus returns the left
number
The Increment Operator and Decrement operator will be discussed in the
conditional loops
and statements sections
*/
}
moe1(4,5);
</script>
Assignment Operators assign values to variables. They do not compare two items, nor do they perform logical tests.
The list of Assignment Operators
|
Assignment
|
=
|
Assigns the value on the right side
of the operator to a variable.
|
|
Add and Assign
|
+=
|
Adds the value on the right side of
the operator to the variable on the left side, and then assigns the new value
to the variable
|
|
Subtract and assign
|
-=
|
Subtracts the value on the right
side of the operator from the variable on the left side , and then assigns
the new value to the variable
|
|
Multiply and assign
|
*=
|
Multiplies the value on the right
side of the operator to the variable on the left side and then assigns the
new value to the variable
|
|
Divide and assign
|
/=
|
Divides the value on the right side
of the operator to the variable on the variable on the left side and then
assigns the new value to the variable
|
|
Modulus and assign
|
%=
|
Takes the integer remainder of
dividing the variable on the left side by the value on thright side, and
assigns the new value to the variable
|
<script
type="text/javascript">
function
aoe1(numb1, numb2) { //a.ssignment o.perators e.xample 1
document.write("Our test numbers are "+numb1+" \(called numb1\)
and "+numb2+" \(called numb2\)</br>");
document.write("Using the Assignment Operator \"\=\"\ we can
assign the variable <strong>\"numbsum\"</strong> to equal
the sum of the two numbers</br>");
var numbsum=numb1+numb2;
document.write("\(numb1\) "+numb1+" + \(numb2\)
"+numb2+" = <strong>numbsum =</strong>
"+numbsum+"</br>");
// the += Assignment Operators
var numbsum=numb1
document.write("</br>");
document.write("Or we can use the \"+=\"operator to change the
value of one of the variables</br>");
var numb3=numb1;
numb3+=numb2
document.write("\(numb1\) += \(numb2\) =
"+numb3+"</br>");
document.write("\(numb1\)= "+numb3+"</br>");
document.write("</br>");
// The -= Assignment Operators
var numbsum=numb1
document.write("Or we can use the \"-=\"operator to change the
value of one of the variables</br>");
var numb3=numb1;
numb3-=numb2
document.write("\(numb1\) -= \(numb2\) =
"+numb3+"</br>");
document.write("\(numb1\) = "+numb3+"</br>");
document.write("</br>");
// The Multiply and assign operator
var numbsum=numb1
document.write("Or we can use the \"*=\"operator to change the
value of one of the variables</br>");
var numb3=numb1;
numb3*=numb2
document.write("\(numb1\) *= \(numb2\) =
"+numb3+"</br>");
document.write("\(numb1\) = "+numb3+"</br>");
document.write("</br>");
// The Divide and assign operator
var numbsum=numb1
document.write("Or we can use the \"\=\"operator to change the
value of one of the variables</br>");
var numb3=numb1;
numb3/=numb2
document.write("\(numb1\) /= \(numb2\) =
"+numb3+"</br>");
document.write("\(numb1\) = "+numb3+"</br>");
document.write("</br>");
// The Modulus and assign operator
var numbsum=numb1
document.write("Or we can use the \"*=\"operator to change the
value of one of the variables</br>");
var numb3=numb1;
numb3%=numb2
document.write("\(numb1\) %= \(numb2\) =
"+numb3+"</br>");
document.write("\(numb1\) = "+numb3+"</br>");
document.write("</br>");
/* if the left number is smaller than the right the Modulus returns the left
number
The Increment Operator and Decrement operator will be discussed in the
conditional loops
and statements sections
*/
}
aoe1(24,15);
</script>
Comparison Operators are often used with
conditional statements and loops in order to perform actions only when a
certain condition is met. Since these operators compare two values, they return
a value of either true or false, depending on the values on either side of the
operator.
The list of Comparison Operators
|
Is equal to
|
==
|
Returns true if the values on both
sides of the operator are equal to each other
|
|
Is not equal to
|
!=
|
Returns true if the values on both
sides of the operator are not equal to each other.
|
|
Is greater than
|
>
|
Returns true if the value on the left
side of the operator is greater than the value on the right side.
|
|
Is less than
|
<
|
Returns true if the value on the
left side of the operator is less than the value on the right side.
|
|
Is greater than or equal to
|
>=
|
Returns true if the value on the
left side of the operator is greater than or equal to the value on the right
side
|
|
Is less than or equal to
|
<=
|
Returns true if the value on the
left side of the operator is less than or equal to the value on the right
side
|
|
Strict is equal to
|
===
|
Returns true if the values on both
sides are equal and of the same type
|
|
Strict is not equal to
|
!==
|
Returns true if the values on both
sides are not equal or not of the same type
|
Here are the examples I used during the SIG
for Comparison Operators.
The first example was a way for me to show two
things; one, the Comparison Operators and two, the if/else statement blocks.
The following is the syntax for an if and
if/else statement
If (condition) {
//body
of the of the if statement if the condition is met.
//if
condition fails then line after the closing bracket “}” is executed or the else
statement is
//executed.
}
else {
//if
the condition fails the body of the else statement (if else statement exist) is
executed
}
<script
type="text/javascript">
/*
Generate two random numbers, we use the number 6 in the line to simulate dice
roll
As it
is the number generated will be 0 thru 6, I use the +1 at the end to give me a
number
between 1 and 6
*/
var
numb1=3;
var
numb2="3";
document.write("Number
1 ="+numb1+" and Number 2 ="+numb2+"</br>");
//
Judge the two numbers to be equal using "is equal to" Comparison
operator
//==,
!=, >, <, >=, <=, ===, !==
if
(numb1===numb2) {
document.write("We have a match! "+numb1+" equals
"+numb2+"</br>");
}
else {
document.write("No
Match!</br>");
}
</script>
During this example we tested if 3 was equal
to “3” (the number 3 versus the text 3), and we also test this using the strict
comparison operator (===). The “Is equal
to” comparison gave a true value return in the if/else statement block, but the
“Strickt is equal to” returned a false value.
In the next example I used the scenario of a
creating a simple (virtual) dice game where I roll two dice and look for
matches. To accomplish this I use the
following statement in my script.
var
numb1=Math.floor(Math.random()*6+1);
This statement gives me a randomly generated
number between 1 and 6. I then use the
following script to compare the two numbers and see if the two numbers match.
<script
type="text/javascript">
/*
Generate two random numbers, we use the number 6 in the line to simulate dice
roll
As it
is the number generated will be 0 thru 6, I use the +1 at the end to give me a
number
between 1 and 6
*/
var
numb1=Math.floor(Math.random()*6+1);
var
numb2=Math.floor(Math.random()*6+1);
document.write("<h1>Simple
Dice Game</h1>")
document.write("Roll
1 ="+numb1+" and Roll 2 ="+numb2+"</br>");
//
Judge the two numbers to be equal using "is equal to" Comparison
operator
if
(numb1==numb2) {
document.write("We have a match! "+numb1+" equals
"+numb2+"</br>");
}
else {
document.write("No Match!</br>");
}
//
Judge the two numbers to be equal using "is not equal to" Comparison
operator
if (numb1!=numb2) {
document.write("Try again "+numb1+" doesn't equal
"+numb2+"</br>");
}
else {
document.write("Success!</br>");
}
//
Judge which of the two numbers is the greater of the two Using the "Is
greater than" Comp operator
if (numb1>numb2) {
document.write(+numb1+" is larger than
"+numb2+"</br>");
}
else {
document.write("</br>");
}
//
Judge which of the two numbers is the greater of the two Using the "Is
less than" Comp operator
if (numb1<numb2) {
document.write(+numb1+" is smaller than
"+numb2+"</br>");
}
else {
document.write("</br>");
}
</script>
The next script expands our dice game and uses
the same statement to generate two random numbers between 1 and 6, but by using
nested if/else statements we can compare the outcomes and simulate a game of
craps.
<script
type="text/javascript">
document.write("<h1>Example of
Comparison Operators using If/Else</h1>");
document.write("<h1>Nested If/Else
Blocks</h1>");
</script>
</head>
<body>
<script
type="text/javascript">
/*
Generate two random numbers, we use the number 6 in the line to simulate dice
roll
As it
is the number generated will be 0 thru 6, I use the +1 at the end to give me a
number
between 1 and 6
*/
var
numb1=Math.floor(Math.random()*6+1);
var
numb2=Math.floor(Math.random()*6+1);
document.write("<h1>Let's
Roll The Bones</h1>")
document.write("Roll
1 ="+numb1+" and Roll 2 ="+numb2+"</br>");
//
Judge the two numbers to be equal using "is equal to" Comparison
operator
if
(numb1==numb2){
if (numb1==1){
document.write("SNAKE
EYES");
}
else {
if (numb1==2){
document.write("HARD
FOUR");
}
else {
if
(numb1==3){
document.write("HARD
SIX");
}
else {
if
(numb1==4){
document.write("HARD
EIGHTS");
}
else
{
if
(numb1==5){
document.write("HARD
TEN");
}
else
{
if(numb1==6){
document.write("BOXCARS");
}
else
{
document.write("THAT'S
IMPOSSIBLE");
}
}
}
}
}
}
}
else
{
numb3=(numb1+numb2);
if (numb3==3){
document.write("ACE
DEUCE");
}
else {
if (numb3==4){
document.write("Easy
Four");
}
else {
if
(numb3==5){
document.write("FEVER
FIVE");
}
else {
if
(numb3==6){
document.write("EASY
SIX");
}
else
{
if
(numb3==7){
document.write("NATURAL");
}
else
{
if
(numb3==8){
document.write("EASY
EIGHT");
}
else
{
if
(numb3==9){
document.write("NINA");
}
else
{
if
(numb3==10){
document.write("EASY
TEN");
}
else
{
if
(numb3==11){
document.write("YO-LEVEN");
}
else
{
document.write("WHAT
ELSE IS THERE");
}
}
}
}
}
}
}
}
}
}
</script>
Logical Operators allow you to compare two
conditional statements to see if one or both of the statements returns a true
value. When a true value is return the
rest of the conditional statement is executed.
The list of Logical Operators
|
AND
|
&&
|
Returns true if the statements on
both sides of the operator are true.
|
|
OR
|
||
|
Returns true if a statement on
either side of the operator is true.
|
|
NOT
|
!
|
Returns true if the statement ot the
right side of the operator is not true.
|
<script
type="text/javascript">
//Testing more than one condition
var fname="Andrew";
var lname="Schooler";
var oname="Ron";
if
((fname=="Andrew")&&(lname=="Schooler")){
document.write("PACS
JavaScript SIG leader is "+fname+"
"+lname+"</br>");
}
if
((fname=="Ron")||(fname=="Andrew")){
document.write("Dear
Mr. Schooler</br>");
}
if (!(fname==oname)){
document.write("435
Smith Rd., Lima, OH 45895</br>");
}
</script>
