7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
1
Operators in JavaScript
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
2
Contents
• Introduction to Operators
• Various Categories of Operators
• Usage of various Operators in Scripts
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
3
Operators
• An operator is used to transform one or more values into a
single resultant value.
• The value to which the operator is applied is referred as
operands.
• A combination of an operator and its operands is referred to
as an expression.
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
4
Arithmetic
Comparison
StringConditional
Assignment
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
5
Arithmetic Operators
• Arithmetic operators are the most familiar operators
because they are used every day to solve common math
calculations
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulous (Remainder after
division)
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
6
Arithmetic Operators
++ increment operator
_ _ decrement operator
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
7
<html>
<head> <title>Arithmetic Operators</title</head>
<body>
<script language="javascript">
a=20;b=3;
document.write("sum="+(a+b));
document.write("<br> remainder="+(a%b));
document.write("<br> increment="+(++a));
document.write("<br> decrement="+(--b)); </script>
</body>
</html>
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
8
Comparison Operators
• Comparision operators are used to compare two
values.
== Equal
!= Not equal
< = Less than or equal to
>= Greater than or equal to
==== Strictly equal
!== Strictly not equal
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
9
Continued..
• The equal(==) and not equal to (!=) operators
perform type casting for equality. For e.g. “5” ==
5 evaluate to true.
• The strictly equal(===) and strictly not equal to
(!==) operators perform type casting for equality.
For e.g. “5” === 5 evaluate
to false.
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
10
<html>
<head><title>Comparison Operator</title>
</head>
<body> <script language="javascript">
document.write("[5>6]->" + (5>6));
document.write("<br>[10<=15]->" + (10<=15));
document.write("<br>[4==6]->" + (4==6));
document.write("<br>[7!=8]->"+(7!=8));
</script>
</body>
</html>
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
11
String Operators
• String operators are those operators that are used to
perform operations on strings.
• Currently, JavaScript supports only the string
concatenation (+) operator.
• This operator is used to join two strings. For e.g.,
“pq” + “ab” produces “pqab”.
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
12
<html>
<head><title>String Operator</title>
</head>
<body>
<script language="javascript">
var c=3+5+"6";
var d=c;
document.write("hello"+"world");
document.write("<br>"+ 3 + "6");
document.write("<br>"+ 3 + 5 +"6");
document.write("<br>result =" +d);
</script> </body></html>
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
13
Assignment Operators
• The assignment operator is used to update the value
of a variable.
• Some assignment operators are combined with
other operators to perform a computation on the
value contained in a update the variable with the
new value.
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
14
Assignment Operators….
= sets the variable on the left of
the = operator to the value of
the expression on its right.
+= increments the variable on the
left of the += operator of the
expression on its right.
-= decrements the variable on the
left of the -= operator of the
expression on its right.
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
15
Assignment Operators….
*= multiplies the variable on the
left of the *= operator to the
value of the expression on its
right.
/= divides the variable on the
left of the /= operator of the
expression on its right.
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
16
<html>
<head><title>Assignment Operator
</title></head>
<body>
<script language="javascript"> a=3; b=6;
document.write("[a+=6]->"+(a+=6));
document.write("<br>[b*=5]->"+(b*=5)); </script>
</body>
</html>
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
17
Conditional Operators
• JavaScript supports the conditional expression
operator.
• They are ? And :
• The conditional expression operator is a ternary
operator since it takes three operands, a condition to
be evaluated and two alternative values to be
returned based on truth and falsity of a condition
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
18
Conditional Operators….
Syntax:
Condition ? Value1:value2
The condition expressed must return a value true or
false. If the condition is true, value 1 is the result of
the expression, otherwise value 2 is the result of the
expression
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
19
<html>
<head><title>Conditional Operator
</title></head>
<body>
<script language="javascript">
a=8;b=6;
c=a>b?a:b;
document.write(c+"is greater");
</script>
</body>
</html>
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
20
7/20/2015
Presented by:- Ms. Deepti Tara, Assoc. Prof.,
UIC, CU
21

Javascript operators

  • 1.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 1 Operators in JavaScript
  • 2.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 2 Contents • Introduction to Operators • Various Categories of Operators • Usage of various Operators in Scripts
  • 3.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 3 Operators • An operator is used to transform one or more values into a single resultant value. • The value to which the operator is applied is referred as operands. • A combination of an operator and its operands is referred to as an expression.
  • 4.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 4 Arithmetic Comparison StringConditional Assignment
  • 5.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 5 Arithmetic Operators • Arithmetic operators are the most familiar operators because they are used every day to solve common math calculations + Addition - Subtraction * Multiplication / Division % Modulous (Remainder after division)
  • 6.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 6 Arithmetic Operators ++ increment operator _ _ decrement operator
  • 7.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 7 <html> <head> <title>Arithmetic Operators</title</head> <body> <script language="javascript"> a=20;b=3; document.write("sum="+(a+b)); document.write("<br> remainder="+(a%b)); document.write("<br> increment="+(++a)); document.write("<br> decrement="+(--b)); </script> </body> </html>
  • 8.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 8 Comparison Operators • Comparision operators are used to compare two values. == Equal != Not equal < = Less than or equal to >= Greater than or equal to ==== Strictly equal !== Strictly not equal
  • 9.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 9 Continued.. • The equal(==) and not equal to (!=) operators perform type casting for equality. For e.g. “5” == 5 evaluate to true. • The strictly equal(===) and strictly not equal to (!==) operators perform type casting for equality. For e.g. “5” === 5 evaluate to false.
  • 10.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 10 <html> <head><title>Comparison Operator</title> </head> <body> <script language="javascript"> document.write("[5>6]->" + (5>6)); document.write("<br>[10<=15]->" + (10<=15)); document.write("<br>[4==6]->" + (4==6)); document.write("<br>[7!=8]->"+(7!=8)); </script> </body> </html>
  • 11.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 11 String Operators • String operators are those operators that are used to perform operations on strings. • Currently, JavaScript supports only the string concatenation (+) operator. • This operator is used to join two strings. For e.g., “pq” + “ab” produces “pqab”.
  • 12.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 12 <html> <head><title>String Operator</title> </head> <body> <script language="javascript"> var c=3+5+"6"; var d=c; document.write("hello"+"world"); document.write("<br>"+ 3 + "6"); document.write("<br>"+ 3 + 5 +"6"); document.write("<br>result =" +d); </script> </body></html>
  • 13.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 13 Assignment Operators • The assignment operator is used to update the value of a variable. • Some assignment operators are combined with other operators to perform a computation on the value contained in a update the variable with the new value.
  • 14.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 14 Assignment Operators…. = sets the variable on the left of the = operator to the value of the expression on its right. += increments the variable on the left of the += operator of the expression on its right. -= decrements the variable on the left of the -= operator of the expression on its right.
  • 15.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 15 Assignment Operators…. *= multiplies the variable on the left of the *= operator to the value of the expression on its right. /= divides the variable on the left of the /= operator of the expression on its right.
  • 16.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 16 <html> <head><title>Assignment Operator </title></head> <body> <script language="javascript"> a=3; b=6; document.write("[a+=6]->"+(a+=6)); document.write("<br>[b*=5]->"+(b*=5)); </script> </body> </html>
  • 17.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 17 Conditional Operators • JavaScript supports the conditional expression operator. • They are ? And : • The conditional expression operator is a ternary operator since it takes three operands, a condition to be evaluated and two alternative values to be returned based on truth and falsity of a condition
  • 18.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 18 Conditional Operators…. Syntax: Condition ? Value1:value2 The condition expressed must return a value true or false. If the condition is true, value 1 is the result of the expression, otherwise value 2 is the result of the expression
  • 19.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 19 <html> <head><title>Conditional Operator </title></head> <body> <script language="javascript"> a=8;b=6; c=a>b?a:b; document.write(c+"is greater"); </script> </body> </html>
  • 20.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 20
  • 21.
    7/20/2015 Presented by:- Ms.Deepti Tara, Assoc. Prof., UIC, CU 21