Thursday, 3 July 2014

Chapter 8: JavaScript Operators

JavaScript Operators
Just about every statement we’ll write is going to be involved an operation. To perform lots of this operations we need operators. That means the symbols we use to manipulate a values.
The most obvious are probably the arithmetic operators.
+
Addition
-
Subtraction
*
Multiplication
/
Division

The equal sign is the most used operator, called assignment operator.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;
var b = 5;

console.log(a+b);
console.log(a*b);
console.log(a-b);
console.log(a/b);

</script>
</body>
</html>


You might see something like this:
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;

console.log(a = a + 1);

</script>
</body>
</html>



In this example to variable score is added 1. But there’s shorthand for this by adding + sign before the equal sign. Both examples are similar.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;

console.log(a += 1);

</script>
</body>
</html>


Another ways:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;

console.log(a += 2);
console.log(a -= 2);
console.log(a *= 2);
console.log(a /= 2);


</script>
</body>
</html>



Multiplication and division is more important in JavaScript so when you have code like that:
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10 + 5*5;

console.log(a);


</script>
</body>
</html>



Comparison operator
The equal sign is the comparison operator in JavaScript.
The single equal sign is a command.
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;
var b = 20;

if (a = b) {
            console.log("This will alwasy return true.");
}


</script>
</body>
</html>



The above example will always return true because we set an equal to the value of b, than this return true and the code in the block will be always executed.
So remember:
One equal sign is assignment.
Two equal sign are the equality operator, you are asking.
Three equal signs is strict equality operator.


Comparisons:
If ( a == b) { …       Checking equality
If ( a != b) { …       Not equal to
If ( a === b) { …    Strict equality
If ( a !== b) { …    Not strictly equal to
If ( a > b) { …       Greater than
If ( a < b) { …        Less than
If ( a >= b) { …     Greater than or equal to
If ( a <= b) { …     Less than or equal to



Sometimes we want to know if a is strictly equal to be and and c is strictly equal to d we do that:
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;
var b = 10;
var c = 30;
var d = 30;

if (a === b && c === d) {
            console.log("a is equal to be and c is equal to d");
}


</script>
</body>
</html>

OR

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;
var b = 10;
var c = 30;
var d = 30;

if ((a === b) && (c === d)) {
            console.log("a is equal to be and c is equal to d");
}


</script>
</body>
</html>


The above example uses double &, which means and.



What if we are interested one OR the other situation. If the variable a is strictly equal to be OR if the variable c is strictly equal to d. We use the double vertical bar.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;
var b = 10;
var c = "30";
var d = 30;

if ((a === b) || (c === d)) {
            console.log("The code block will be executed even if one of the conditions return true.");
}


</script>
</body>

</html>