Javascript Comparison Operators

The IF statements you have used so far test a condition for true or false. They have used the double equal sign (== ). But there are other operators you can use besides the double equal sign. These are known as comparison operators. Here are some more of them. Remember, all these evaluate to either true or false.

!=    Is not equal to

>    Greater Than

<    Less Than

>=    Greater Than or equal to

<=    Less Than or equal to

===    Is exactly like and is of the same variable type as

To try then out, change the code between your two Javascript tags to this (or create a new one, if you prefer):

<SCRIPT LANGUAGE = "Javascript">

var over_eighteen = true;

if (over_eighteen != true) {

document.write("You're too young - go away!");

}

else {

document.write("You've passed the age test!");

}

</SCRIPT>

So this script places a value of true in a variable called over_eighteen. We trying to see what's in this variable with the help of an if … else statement. In between the round brackets of IF we have this:

over_eighteen != true

This reads "If over_eighteen does not equal true". So we want something to happen if our variable does not contain what we're looking for. Except, it does contain a value of true. So Javascript will skip this part and jump to the else part. The else part writes the text "You've passed the age test!" to the browser.

Save your work and test it out. Now change var over_eighteen = true to var over_eighteen = false. Save and rerun the script in your browser. You should see the message "You're too young - go away!".

Now try this script:

<SCRIPT LANGUAGE = "Javascript">

var available_width = window.innerWidth;

if ( available_width > 800 ) {

document.write("Show large image");

}

else {

document.write("Show small image");

}

</SCRIPT>

The first line gets the Inner Width available to the browser. We want to check what this is. Our IF statement uses the Greater Than operator ( > ) to check if the value in the available_width variable is more than 800 pixels. (If we wanted more precision we could have used the >= operator, which means Greater Than or Equal To.) If the condition evaluates to true (it is more than 800) then we'll show a larger image. However, if the condition evaluates to false then we'll show the smaller image.

 

Exercise
Reduce the size of your browser. Refresh the page and see what happens. If you reduce your browser to below 800 in width then the else part of the IF statement should execute.

Exercise
Change the Greater Than symbol to a Less Than symbol. Change the document.write messages to suit.

The final operator on the list is this one ===. So it's three equal signs, this time. The three equal signs are called the identity operator. This is used when you want to check a variable for equality and that it's of the same variable type. For example, take the script below:

var identity = 17;

if (identity === 17) {

document.write("variable is the number 17");

}

else if (identity == 17) {

document.write("variable is the text 17");

}

If you run the script, the first IF statement will evaluate to true, meaning that the variable does indeed hold a value of 17 and that its variable is the number type. However, change the first line to this:

var identity = "17";

We've now surrounded the number 17 with double quotes, turning it into text. When the code is run again, the else if part of the statement now evaluates to true, while the first part evaluates to false.

So you get more precision with the treble equal sign than you do with the double. Try not to worry too much about it, though: we'll use the double equal sign unless we really need the treble one.

 

The Ternary Operators

If you want a quick IF statement then you can use something called a ternary expression. This uses a question mark ( ? ) and a colon ( : ). The syntax is this:

var result = condition_to_test ? "TRUE" : "FALSE";

Here's a coding example:

var over_eighteen = true;

var result = over_eighteen ? "Truth" : "False";

document.write(result);

First we set a value for the variable over_eighteen. This condition is tested before the question mark. If it's true, the text before the colon gets placed in the result variable. If it's false the text after the colon will be placed in the variable.

We won't be using the ternary operators though. But they're there if you're feeling adventurous! In the next lesson, you'll learn about the Logical Operators in Javascript.