Variables and
Comparison Statements
Teacher: Sarah Marie Joy A. Dela Vega, LPT, MIT
Objectives:
Learn what variables are and their uses
Understand what expressions are
Learn what string literals are
Know how to evaluate expressions
Identify and use comparison statements
Describe logical and relational operators
What is a Variable?
A variable is a temporary storage of values and expressions.
Expressions are formulae that use mathematical symbols and numbers or a way to assign values to a
variable. For example, x=1+3 is an expression and the value of x will hold the sum of one plus three
which is four.
Variables can old numbers, expressions and string literals. String literal are text enclosed in pairs of
quotation marks.
Numeric digits that are inside the quotation marks will be considered as a string and will lose then its
numeric value. If the characters are not enclosed in quotation marks, JavaScript might interpret the
characters as an object or a function. To declare a variable, use the keyword var then the variable
name equal to its value/ expression.
Example of variable declaration:
var x=5;
var y=x+5;
var fan = “Standard”;
var isDone= false;
In declaring a variable, there are certain
rules to follow:
Variables names are case-sensitive-- an uppercased variable such as “X” is different
from a lowercase variable “x”
Variable names must begin with a letter or underscore (‘_’)
The rest of the name must consist of letter, numbers or underscores
Avoid naming variables using reserved words. Reserved words are words reserved by
JavaScript for its own use
Take note that if you do not declare a variable and you give the variable a value, the
variable will be automatically declared.
ARITHMETIC OPERATORS
OPERATOR DESCRIPTION EXAMPLE
+ Addition Sum = x + y
- Subtraction Diff = x – y
* Multiplication Times = x * y
/ Division Div = x / y
% Modulus Mod = x % y
++ Increment by 1 Inc = x++
-- Decrement by 1 Dec = x--
JavaScript uses the same arithmetic operators as in most programming languages, like
C. An arithmetic operator is a symbol used to tell the expression what kind of operation
will be done.
The addition symbol (‘+’) can also be used to add strings or text values together -- this is
called concatenation. However, if you add a string and a numerical value, the result will still
be a string.
SentenceA = “Good”
SentenceB = “Morning”
SentenceC = SentenceA + “” + SentenceB + 2 + 4
Output:
Good Morning 24
Example using concatenation
Like C, JavaScript allows shorthand expressions like x+2. This expression is the same as x = x +2.
This format might be confusing for non-programmers so it is recommended to use x = x + 2
instead. Debugging is easier this way for non-programmers. Also remember the order of
precedence when dealing with expressions. Innermost parentheses come first, then the outer
parentheses are evaluated followed by multiplication, division or modulus operation. The
addition or subtraction symbol is taken into consideration last.
X = 5 + 3/ 2*6
= 14
Y = (5+3)/2*6
= 24
Example using order of precedence
The ++ and – operator can be used in several different ways; however, the answer will depend on
how you use it. If you use it independently, say, x++; it will have the same result as ++x;
however, if these operators are used in a formula or an expression, they will have an impact on
the result. Avoid using these operators if you do not fully understand how to use them.
Let x = 5, y = 7and z = 0
1) x=y++
result: x=7, y=8
2) x=++y
result: x=8,y=8
3) z=x++ * ++y
result: x=6, y=8, z=40
Example using ++ and -- operators
In the first example, x is first assigned the value of y which is 7. Then y is incremented
In the second example, x is assigned the value of y that had been incremented.
In the third example, x is first evaluated. x will have the value of 5 and y will have an
incremented value of 8. When x is multiplied to y, it will yield 40 which will be stored in variable
z. That’s only when the value of x will be incremented to 6.
What are Comparison Statements?
Comparison statements are used to evaluate the equality or the difference
between variables or values.
COMPARISON OPERATORS
OPERAND EXAMPLE RESULTS
== x == y Return true if x is equal to y
=== x === y Return true if x is equal to y and the data are of
the same type
!= x != y Return true if x is not equal to y
!== x !== y Return true if x is not equal to y and/or the data
are not of the same type
> x>y Return true if x is greater than y
< x<y Return true if x is less than y
>= x >= y Return true if x is greater than or equal to y
<= x <= y Return true if x is less than or equal to y
Logical operators are used to determine the logic between expressions, variables, or values. It
is usually used by two or more expressions to satisfy the needed conditions.
LOGICAL OPERATORS
OPERATOR DESCRIPTION EXAMPLE RESULTS
&& And (x == y) && (X>3) Return true if both expressions
are true
|| Or (x == y) || (x > 3) Return true if at least one of
the expressions is true
! Not ! (x == y) Return true if x is not equal to y
JavaScript also has its own conditional operator that automatically assigns a value depending
on the result of the condition.
variablename= (condition) ?value1: value2
Syntax for conditional statements
myFavorite = (color== “pink”)? “Terrific” : “Change color”;
Example using a conditional statement
In the above example, color == “pink” is the conditional statement. If the variable color has the
same value as pink, it will return the string “Terrific” and save its value myFavorite. Otherwise,
myFavorite will have the value of “Change color”.
Different kinds of conditional statements.
if statement – used to check if a specified condition is true
if-else statement- used to check if the condition is true and performs an action if the condition is
false
if-else if-,else statement- used to check if one or more blocks of code can be executed
switch statement- used if you want to select one of many blocks of code to be executed
<script type=“text/JavaScript”>
//Buy the orange only if you have exactly 5 coins
if (coins == 5 )
{
document.write(“<b>Buy the Orange!</b>”);
}
</script>
Example using the if block
The if block will execute the codes that are within the set of braces if the condition is
satisfied. Additionally, if the code to be executed is only made up of a single line, there is
no need to enclose it in braces.
The else if statement executes codes other than the prior conditions. The else statement will
be the last choice- that is, if there are no conditions that were met, it will fall under the else
block.
<script type=“text/JavaScript”>
//Buy the orange only if you have exactly 5 coins if you
//have less than 4 coins, buy the apple instead.
//Otherwise, don’t buy anything.
if (coins == 5)
{
document.write(“<b>Buy the Orange!</b>”);
}
else if (coins < 4)
{
document.write(“<b>Buy the Apple!</b>”);
}
else
{
document.write(“<b>Buy Nothing!</b>”);
}
</script>
Example using the if-else if-else block
The JavaScript switch statement function is like the if statement. It is a conditional statement; however, only
one variable is taken into consideration and bears the condition. You can also use it to select one or more blocks
of code to be executed. To prevent it from continuously executing other blocks of code after it, you must use
the break statement.
<script type=“text/JavaScript”>
// This program will printout the equivalent value of
// a roman numeral
var input = “X”;
switch (input)
{
case “I”:
document.write(“This is equivalent to One”);
break;
case “V”:
document.write(“This is equivalent to Five”);
break;
case “X”:
document.write(“This is equivalent to Ten”);
break;
default:
document.write(“Not yet available”);
}
</script>
Example using the switch statement
Hands-on
Create a code snippet that will find out what age category a person is under.
Print out what his/her category is.
Age 0-1 = baby stage
Age 2-6= toddler stage
Age 7-12 = pre-teen stage
Age 13-19 = teen stage
Age 20-59 = adult stage
Age 60 or above = senior stage
