Javascriptsession2 180528082733

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

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”.

(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

(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;

(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>

(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.

(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

(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>

(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

(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>

(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

(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>

(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

(BSCS)
Decision Making Statements
17
 JavaScript supports four decision-making statements

which are as follows:
 If
 if-else
 if-else if
 switch

(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;
}
Example of IF Statements
19

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.
If Else Examples
21

If Else Examples
22

If Else Examples
23

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; }

IF Else If Examples
25

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>

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 }

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>
Questions?
30

Javascriptsession2 180528082733

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascriptsession2 180528082733

Uploaded by

Copyright:

Available Formats

1

OPERATOR & STATEMENT

Aptech Computer Education

 Explain operators and their types in JavaScript

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 An operator specifies the type of operation to be performed on the values of

Presented by Muhammad Ehtisham Siddiqui

 There are three main types of operators, which are as follows:

 Binary operators - Operates on two operands. For example, the expression

 Ternary operators - Operates on three operands. For example, the expression

Presented by Muhammad Ehtisham Siddiqui

 Operators help in simplifying expressions.

 JavaScript provides a predefined set of operators that allow performing different

 These six categories of operators are as follows:

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

 Relational operators are binary operators that make a comparison between

 After making a comparison, they return a boolean value namely, true or

 The expression consisting of a relational operator is called as the relational

Presented by Muhammad Ehtisham Siddiqui

Operator Description Comparing Returns Try it

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

&& and (x < 10 && y > 1) is true

! not !(x == y) is true

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

 Assignment operators assign values to JavaScript variables.

<<= 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

Presented by Muhammad Ehtisham Siddiqui

 Statements are referred to as a logical collection of variables,

Presented by Muhammad Ehtisham Siddiqui

 JavaScript supports four decision-making statements

Presented by Muhammad Ehtisham Siddiqui

 The if statement executes a block of statements based on a logical

 If this condition is true, the block following the if statement is

 If the condition is false, the block after the if statement is not

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 The if statement specifies a block of

Presented by Muhammad Ehtisham Siddiqui (BSCS)

Presented by Muhammad Ehtisham Siddiqui (BSCS)

Presented by Muhammad Ehtisham Siddiqui (BSCS)

Presented by Muhammad Ehtisham Siddiqui (BSCS)

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 The nested-if statements comprises multiple if statements within an if

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 A program becomes quite difficult to understand when there are multiple if

Presented by Muhammad Ehtisham Siddiqui (BSCS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

Presented by Muhammad Ehtisham Siddiqui (BSCS)

You might also like