Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

C7 JavaScript- Operators

Uploaded by

Nick Asis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

C7 JavaScript- Operators

Uploaded by

Nick Asis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Web Page Programming (Using HTML and JavaScript)

Chapter 7 JavaScript - Operators

What is an Operator?
Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the operator. JavaScript
supports the following types of operators.
❖ Arithmetic Operators
❖ Comparison Operators
❖ Logical (or Relational) Operators
❖ Assignment Operators
❖ Conditional (or ternary) Operators
Let’s have a look at all the operators one by one.

Arithmetic Operators
JavaScript supports the following arithmetic operators:
Assume variable A holds 10 and variable B holds 20, then:

1|Page
Web Page Programming (Using HTML and JavaScript)

Note: Addition operator (+) works for Numeric as well as Strings. e.g. "a" +
10 will give "a10".

Example
The following code shows how to use arithmetic operators in JavaScript.

<html>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and then try...</p>
</body>
</html> 2|Page
Web Page Programming (Using HTML and JavaScript)

Comparison Operators
Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and
‘+’ is called the operator. JavaScript supports the following

JavaScript supports the following comparison operators:


Assume variable A holds 10 and variable B holds 20, then:

3|Page
Web Page Programming (Using HTML and JavaScript)

Example
The following code shows how to use comparison operators in JavaScript.

<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);

4|Page
Web Page Programming (Using HTML and JavaScript)

document.write(result);
document.write(linebreak);
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and
then
try...</p>
</body>
</html>

Logical Operators
JavaScript supports the following logical
operators:
Assume variable A holds 10 and variable
B holds 20, then:

5|Page
Web Page Programming (Using HTML and JavaScript)

Try the following code to learn how to implement Logical Operators in


JavaScript.

<html>
<body>
<script type="text/javascript">
<!--
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
document.write("(a || b) => ");
result = (a || b);
document.write(result);
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and
then
try...</p>
</body>
</html>

6|Page
Web Page Programming (Using HTML and JavaScript)

Bitwise Operators
JavaScript supports the following bitwise operators:
Assume variable A holds 2 and variable B holds 3, then:

Example
Try the following code to implement Bitwise operator in JavaScript.

7|Page
Web Page Programming (Using HTML and JavaScript)

<html>
<body>
<script type="text/javascript">
<!--
var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
document.write("(a | b) => ");
result = (a | b);
document.write(result);
document.write(linebreak);
document.write("(a ^ b) => ");
result = (a ^ b);
document.write(result);
document.write(linebreak);
document.write("(~b) => ");
result = (~b);
document.write(result);
document.write(linebreak);
document.write("(a << b) => ");
result = (a << b);
document.write(result);
document.write(linebreak);
document.write("(a >> b) => ");
result = (a >> b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then
try...</p>
</body>
</html>

8|Page
Web Page Programming (Using HTML and JavaScript)

Output::

Assignment Operators
JavaScript supports the following assignment operators:

9|Page
Web Page Programming (Using HTML and JavaScript)

Note: Same logic applies to Bitwise operators, so they will become <<=, >>=, >>=, &=, |= and ^=.
Example
Try the following code to implement assignment operator in JavaScript.

<html>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var linebreak = "<br />";
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then
try...</p>
</body>
</html>

10 | P a g e
Web Page Programming (Using HTML and JavaScript)

Miscellaneous Operators
We will discuss two operators here that are quite useful in JavaScript: the conditional
operator (? :) and the typeof operator.

Conditional Operator (? :)
The conditional operator first evaluates an expression for a true or false value and then
executes one of the two given statements depending upon the result of the evaluation.

Example
Try the following code to understand how the Conditional Operator works in JavaScript.

11 | P a g e
Web Page Programming (Using HTML and JavaScript)

<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write ("((a > b) ? 100 : 200) => ");
result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);
document.write ("((a < b) ? 100 : 200) => ");
result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then
try...</p>
</body>
</html>

typeof Operator
The typeof operator is a unary operator that is placed before its single operand, which
can be of any type. Its value is a string indicating the data type of the operand.

The typeof operator evaluates to "number", "string", or "boolean" if its operand is a


number, string, or boolean value and returns true or false based on the evaluation.

Here is a list of the return values for the typeof Operator.

12 | P a g e
Web Page Programming (Using HTML and JavaScript)

Example
The following code shows how to implement typeof operator.

<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = "String";
var linebreak = "<br />";
result = (typeof b == "string" ? "B is String" : "B is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
result = (typeof a == "string" ? "A is String" : "A is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then
try...</p>
</body>
</html>

13 | P a g e
Web Page Programming (Using HTML and JavaScript)

14 | P a g e

You might also like