1
OPERATOR & STATEMENT
SESSION 13
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Objectives
2
Explain operators and their types in JavaScript
Explain regular expressions in JavaScript
Explain decision-making statements in
JavaScript
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Operator
3
An operator specifies the type of operation to be performed on the values of
variables and expressions.
JavaScript provides different types of operators to perform simple to complex
calculations and evaluations.
Certain operators are also used to construct relational and logical statements.
These statements allow implementing decision and looping constructs.
An operation is an action performed on one or more values stored in variables.
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Types of Operator
4
There are three main types of operators, which are as follows:
Unary operators - Operates on a single operand. For example, the expression
y = -x.
Binary operators - Operates on two operands. For example, the expression
sum = y + x.
Ternary operators - Operates on three operands. For example, the expression
age >= 18 ? “Eligible” : “Not Eligible”.
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Categories of Operators
5
Operators help in simplifying expressions.
JavaScript provides a predefined set of operators that allow performing different
operations.
JavaScript operators are classified into six categories based on the type of action
they perform on operands.
These six categories of operators are as follows:
Arithmetic operators
Relational operators
Logical operators
Assignment operators
Bitwise operators
Special operators
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Arithmetic operators
6
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
For Example:
var x = 100 + 50;
Var y=22-23+1*25;
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Code
7
<!DOCTYPE html>
<html>
<body>
<p>A typical arithmetic operation takes two numbers (or expressions) and
produces a new number.</p>
<p id="demo"></p>
<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Relational operators
8
Relational operators are binary operators that make a comparison between
two operands.
After making a comparison, they return a boolean value namely, true or
false.
The expression consisting of a relational operator is called as the relational
expression or conditional expression.
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Relational Operators
9
Operator Description Comparing Returns Try it
== equal to x == 8 false Try it »
x == 5 true Try it »
x == "5" true Try it »
=== equal value and equal x === 5 true Try it »
type
x === "5" false Try it »
!= not equal x != 8 true Try it »
!== not equal value or not x !== 5 false Try it »
equal type
x !== "5" true Try it »
x !== 8 true Try it »
> greater than x>8 false Try it »
< less than x<8 true Try it »
>= greater than or equal to x >= 8 false Try it »
<= less than or equal to x <= 8 true
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Code
10
<!DOCTYPE html>
<html>
<body>
<p>Input your age and click the button:</p>
<input id="age" value="18" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var age, voteable;
age = document.getElementById("age").value;
voteable = (age < 18) ? "Too young":"Old enough";
document.getElementById("demo").innerHTML = voteable + " to vote.";
}
</script>
</body>
</html>
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Logical Operators
11
Logical operators are used to determine the logic between variables or values.
Syntax: variablename = (condition) ? value1:value2
Given that x = 6 and y = 3, the table below explains the logical operators:
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Code
12
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p>The AND operator (&&) returns true if both expressions are true, otherwise it returns false.</p>
<p id="demo"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo").innerHTML =
(x < 10 && y > 1) + "<br>" +
(x < 10 && y < 1);
</script>
</body>
</html>
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Assignment Operators
13
Assignment operators assign values to JavaScript variables.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
<<= x <<= y x = x << y
>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y
&= x &= y x=x&y
^= x ^= y x=x^y
|= x |= y x=x|y
**= x **= y x = x ** y
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Code
14
<!DOCTYPE html>
<html>
<body>
<h2>The *= Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
x *= 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Decision-making Statements
15
Statements are referred to as a logical collection of variables,
operators, and keywords that perform a specific action to fulfill a
required task.
For example, the line of code that declares a variable is a statement.
Statements help you build a logical flow of the script.
In JavaScript, a statement ends with a semicolon.
JavaScript is written with multiple statements, wherein the related
statements are grouped together.
Such a group of statements is referred to as a block of code and the
statements within it are enclosed in curly braces.
Decision-making statements allow implementing logical decisions for
executing different blocks to obtain the desired output. They execute
a block of statements depending upon a Boolean condition. This
condition
Presented is an Ehtisham
by Muhammad expression
Siddiquithat returns either true or false.
(BSCS)
Decision Making Statements
16
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Decision Making Statements
17
JavaScript supports four decision-making statements
which are as follows:
If
if-else
if-else if
switch
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
IF Statement
18
The if statement executes a block of statements based on a logical
Boolean condition.
If this condition is true, the block following the if statement is
executed.
If the condition is false, the block after the if statement is not
executed and the immediate statement after the block is executed.
Syntax:
if (condition)
{
// one or more statements;
}
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Example of IF Statements
19
Presented by Muhammad Ehtisham Siddiqui (BSCS)
IF ELSE
20
The if statement specifies a block of
statement to be executed when the
condition in the if statement is true.
However, sometimes it is required
to define a block of statements to be
executed when a condition is
evaluated to false.
This is done using the if-else
statement.
The if-else statement begins with the
if block, which is followed by the else
block. The else block begins with the
else keyword followed by a block of
statements to be executed upon the
false condition.
Presented by Muhammad Ehtisham Siddiqui (BSCS)
If Else Examples
21
Presented by Muhammad Ehtisham Siddiqui (BSCS)
If Else Examples
22
Presented by Muhammad Ehtisham Siddiqui (BSCS)
If Else Examples
23
Presented by Muhammad Ehtisham Siddiqui (BSCS)
If Else If
24
The if-else if statements allow you to check multiple conditions and specify
a different block to be executed for each condition.
The flow of these statements begins with the if statement followed by
multiple else if statements and finally by an optional else block.
The entry point of execution in these statements begins with the if
statement.
If the condition in the if statement is false, the condition in the immediate
else if statement is evaluated.
Syntax:
if (condition)
{ // one or more statements; }
else if (condition)
{ // one or more statements; }
else { // one or more statements; }
Presented by Muhammad Ehtisham Siddiqui (BSCS)
IF Else If Examples
25
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Nested If Statement
26
The nested-if statements comprises multiple if statements within an if
statement.
The flow of the nested-if statements starts with the if statement, which is
referred to as the outer if statement.
This outer if statement consists of multiple if statements, which are referred to
as the inner if statements.
The inner if statements are executed only if the condition in the outer if
statement is true. Further, each of the inner if statements is executed, but only if
the condition in its previous inner if statement is true.
Syntax:
if (condition) {
// one or more statements;
if (condition)
{ // one or more statements;
if (condition) {//
one or more statements;
}
}
} Presented by Muhammad Ehtisham Siddiqui (BSCS)
Code
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var username = prompt("Enter Username:","");
var password = prompt("Enter Password:","");
if(username!= "" && password != "") {
if (username=="admin" && password == "admin123")
{ alert("Login Successful"); }
else
{
alert ("Login Failed");
}} </SCRIPT>
</head>
<body></body>
</html>
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Switch-Case Statements
28
A program becomes quite difficult to understand when there are multiple if
statements.
To simplify coding and to avoid using multiple if statements, switch-case
statement can be used as a different approach to code the same logic.
The switch-case statement allows comparing a variable or expression with
multiple values.
Syntax:
switch(expression/variable)
{
case value1:
// statements;
break; case value2:
// statements;
break;
. . . case valueN:
// statements;
break; default:
// default statement }
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Try Code
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT>
var designation = prompt("Enter designation:");
switch (designation)
{
case "Manager": alert ("Salary: $21000");
break;
case "Developer": alert ("Salary: $16000");
break;
default:
alert ("Enter proper designation.");
break; }
</SCRIPT>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Questions?
30
Presented by Muhammad Ehtisham Siddiqui (BSCS)
