Thursday 28 February 2013

JavaScript : Comparison Operators


Comparison Operators

Sometimes it is required to compare the value of one variable with other. The comparison operators take simple values (numbers or string) as arguments and evaluate either true or false. Here is a list of comparison operators.
OperatorComparisonsDescription
Equal (==)x == yReturns true if the operands are equal.
Strict equal (===)x === yReturns true if the operands are equal and of the same type.
Not equal (!=)x != yReturns true if the operands are not equal.
Strict not equal (!==)x !== yReturns true if the operands are not equal and/or not of the same type.
Greater than (>)x>yReturns true if the left operand is greater than the right operand.
Greater than or equal (>=)x>=yReturns true if the left operand is greater than or equal to the right operand.
Less than (<)x<yReturns true if the left operand is less than the right operand.
Less than or equal (<=)x<=yReturns true if the left operand is less than or equal to the right operand.

Pictorial presentation of Equal (==) operator

javascript equal operator

Test Equal (==) operator

The following web document returns true though the type of x and y are not equal (first one is integer type and second one is character type) but their values are equal.

HTML Code

view plainprint?
  1. <!doctype html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>JavaScript equal (==) operator example </title>  
  5. <meta name="description" content="This document contains an example of JavaScript equal operator"/>  
  6. </head>  
  7. <body>  
  8. <script src="javascript-equal-operator_example1.js"></script>  
  9. </body>  
  10. </html>  

JS Code

view plainprint?
  1. var x = 300;  
  2. var y = "300";  
  3. var newParagraph = document.createElement("p");   
  4. var newText = document.createTextNode('Value of x = 300 and y = "300".  Check whether x==y');   
  5. newParagraph.appendChild(newText);   
  6. document.body.appendChild(newParagraph);  
  7. var newParagraph1 = document.createElement("p");   
  8. var newText1 = document.createTextNode(x==y);  
  9. newParagraph1.appendChild(newText1);   
  10. document.body.appendChild(newParagraph1);  

Practice the example online

Pictorial presentation of Strict equal (===) operator

javascript equal operator

Test Strict equal (===) operator

The following web document returns false as strict equal operator will compare both value and type of x and y.

HTML Code

view plainprint?
  1. <!doctype html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>JavaScript this operator example</title>  
  5. <meta name="description" content="This document contains an example of JavaScript Strict equal (===) operator"/>  
  6. </head>  
  7. <body>  
  8. <script src="javascript-strict-equal-operator-example1.js"></script>  
  9. </body>  
  10. </html>  

JS Code

view plainprint?
  1. var x = 300;  
  2. var y = "300";  
  3. var newParagraph = document.createElement("p");  
  4. var newText = document.createTextNode('Value of x = 300 and y = "300" Whether x===y ?');   
  5. newParagraph.appendChild(newText);  
  6. document.body.appendChild(newParagraph);   
  7.   
  8. var newParagraph1 = document.createElement("p");   
  9. var newText1 = document.createTextNode(x===y);   
  10. newParagraph1.appendChild(newText1);   
  11. document.body.appendChild(newParagraph1);  

Practice the example online

Pictorial presentation of Not equal(!=) operator

javascript equal operator

Test Not equal (!=) operator

The following web document returns false though the type of x and y are not equal (first one is integer type and second one is character type) but their values are equal.

HTML Code

view plainprint?
  1. <!doctype html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>JavaScript not equal (!=) operator example with DOM</title>  
  5. <meta name="description" content="This document contains an example of JavaScript not equal (!=) operator using DOM"/>  
  6. </head>  
  7. <body>  
  8. <script src="javascript-not-equal-operator_example1.js">  
  9. </script>  
  10. </body>  
  11. </html>  
  12.         

JS Code

view plainprint?
  1. var x=150;  
  2. var y="150";  
  3. var newParagraph = document.createElement("p");  
  4. var newText = document.createTextNode('Value of x = 150 and y ="150"' + ', '+'Whether x != y  ?');   
  5. newParagraph.appendChild(newText);  
  6. document.body.appendChild(newParagraph);  
  7. var newParagraph1 = document.createElement("p");  
  8. var newText1 = document.createTextNode(x !== y);  
  9. newParagraph1.appendChild(newText1);  
  10. document.body.appendChild(newParagraph1);  

Practice the example above online

Pictorial presentation of Strict not equal(!==) operator

javascript equal operator

Test Strict not equal (!==) operator

The following web document returns true though their values are equal but type of x and y are not equal (first one is integer type and second one is character type).

HTML Code

view plainprint?
  1. <!doctype html><head>  
  2. <meta charset="utf-8">  
  3. <title>JavaScript strict not equal operator example</title>  
  4. <meta name="description" content="This document contains an example of JavaScript strict not equal operator"/>  
  5. </head>  
  6. <body>  
  7. <script src="javascript-strict-not-equal-operator_example1.js"></script>  
  8. </body>  
  9. </html>  

JS Code

view plainprint?
  1. var x = 300;  
  2. var y = "300";  
  3. var newParagraph = document.createElement("p");   
  4. var newText = document.createTextNode('Value of x = 300 and y = "300"');   
  5. newParagraph.appendChild(newText); document.body.appendChild(newParagraph);   
  6. var newParagraph1 = document.createElement("p"); var newText1 = document.createTextNode('Whether x !== y  ? '+(x !== y));  
  7. newParagraph1.appendChild(newText1);   
  8. document.body.appendChild(newParagraph1);  

Practice the example online

Pictorial presentation of Greater than(>) operator

javascript Greater than operator

Test Greater than(>) operator

The following web document returns true as the value of x is greater than y.

HTML Code

view plainprint?
  1. <!doctype html><head>  
  2. <meta charset="utf-8">  
  3. <title>JavaScript greater than equal (>=) operator example </title>  
  4. <meta name="description" content="This document contains an example of JavaScript greater than equal<br>(>=)operator"/>  
  5. </head>  
  6. <body>  
  7. <script src="javascript-greater-than-equal-operator_example1.js"></script>  
  8. </body>  
  9. </html>  

JS Code

view plainprint?
  1. var x = 300;  
  2. var y = 100;  
  3. var newParagraph = document.createElement("p");  
  4. var newText = document.createTextNode('Value of x = 300 and y = 100. Whether x > y  ?');  
  5. newParagraph.appendChild(newText);  
  6. document.body.appendChild(newParagraph);  
  7. var newParagraph1 = document.createElement("p");  
  8. var newText1 = document.createTextNode(x > y);  
  9. newParagraph1.appendChild(newText1);  
  10. document.body.appendChild(newParagraph1);  

Practice the example online

Pictorial presentation of Greater than or equal (>=)

javascript greater than or equal operator

Test Greater than or equal (>=) operator

The following web document returns true as the value of x is equal to y.

HTML Code

view plainprint?
  1. <!doctype html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>JavaScript greater than equal (>=) operator example  
  5. </title>  
  6. <meta name="description" content="This document contains an example  
  7. of JavaScript greater than equal (>=) operator"/>  
  8. </head>  
  9. <body>  
  10. <script src="javascript-greater-than-equal-operator_example1.js">  
  11. </script>  
  12. </body>  
  13. </html>  

JS Code

view plainprint?
  1. var x = 300;<br>var y = 100;<br>var newParagraph = document.createElement("p");<br>var newText = document.createTextNode('Value of x = 300 and y = 100'+', '+'Whether x >= y  ? '+ (x >= y));<br>newParagraph.appendChild(newText);<br>document.body.appendChild(newParagraph);  

Practice the example online

Pictorial presentation of Less than (<) operator

javascript less than operator

Test Less than (<) operator

The following web document returns true as the value of x is less than y.

HTML Code

view plainprint?
  1. <!doctype html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>JavaScript less than (<) operator example.</title>  
  5. <meta name="description" content="This document contains an example of JavaScript less than (<) operator"/>  
  6. </head>  
  7. <body>  
  8. <script src="javascript-less-than-operator_example1.js"></script>  
  9. </body>  
  10. </html>  

JS Code

view plainprint?
  1. var x = 100;  
  2. var y = 300;  
  3. var newParagraph = document.createElement("p");  
  4. var newText = document.createTextNode('Value of x = 100 and y = 300. Whether x is less than  y?');   
  5. newParagraph.appendChild(newText);  
  6. document.body.appendChild(newParagraph);  
  7. var newParagraph1 = document.createElement("p");  
  8. var newText1 = document.createTextNode(x<y);  
  9. newParagraph1.appendChild(newText1);  
  10. document.body.appendChild(newParagraph1);  

Practice the example online

Pictorial presentation of Greater than or equal (>=)

javascript greater than or equal operator

Test Greater than or equal (>=) operator

The following web document returns true as the value of x is equal to y.

HTML Code

view plainprint?
  1. <!doctype html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>JavaScript greater than equal (>=) operator example  
  5. </title>  
  6. <meta name="description" content="This document contains an example  
  7. of JavaScript greater than equal (>=) operator"/>  
  8. </head>  
  9. <body>  
  10. <script src="javascript-greater-than-equal-operator_example1.js">  
  11. </script>  
  12. </body>  
  13. </html>  

JS Code

view plainprint?
  1. var x = 300;  
  2. var y = 100;  
  3. var newParagraph = document.createElement("p");  
  4. var newText = document.createTextNode('Value of x = 300 and y = 100'+', '+'Whether x >= y  ? '+ (x >= y));  
  5. newParagraph.appendChild(newText);  
  6. document.body.appendChild(newParagraph);  
  7.    

Practice the example above online

Pictorial presentation of Less than or equal (<=) operator

javascript equal operator

Test Less than or equal (<=) operator

The following web document returns false as the value of x is greater than y.

HTML Code

view plainprint?
  1. <!doctype html><head>  
  2. <meta charset="utf-8">  
  3. <title>JavaScript less than equal(<=) operator example </title>  
  4. <meta name="description" content="This document contains an  
  5. example of JavaScript less than equal(<=) operator" />  
  6. </head>  
  7. <body>  
  8. <script src="javascript-less-than-equal-operator_example1.js"></script>  
  9. </body>  
  10. </html>  

JS Code

view plainprint?
  1. var x = 300;  
  2. var y = 100;  
  3. var newParagraph = document.createElement("p");   
  4. var newText = document.createTextNode("Value of x = 300 and y = 100. Whether x <= y");  
  5. newParagraph.appendChild(newText);   
  6. document.body.appendChild(newParagraph);  
  7.   
  8. var newParagraph1 = document.createElement("p");  
  9. var newText1 = document.createTextNode(x <= y);   
  10. newParagraph1.appendChild(newText1);  
  11. document.body.appendChild(newParagraph1);  
  12.    

Practice the example online

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)