Lesson 6 : Comparison Operators

6.1 Comparison Operators

In lesson 5, we have learned basic arithmetic operations in JavaScript, in this lesson, we will introduce the comparison operators. Using comparison operators, we can write decision-making procedures. If a certain condition is met, JavaScript will execute an action, otherwise, there is no action or it will take alternative action.

The following Table shows the comparison operators.

Table 6.1: Comparison Operators
Comparison Operators	Meaning
x==y	x is equal to y
x!=y	x is not equal to y
x>y	x is more than y
x<y	x is less than y
x>=y	x is more than or equal to y
x<=y	x is less than or equal to y

6.1.1 using if keyword

The syntax of using the if keyword is,

if (Condition Expression){ Statements }

If the condition expression is true, then JavaScript will execute the statements, otherwise, there is no action. In the following example, if the mark entered is more than 80, then the browser will display Grade=80, otherwise, it will not show anything.

<script language="javascript">
mark=window.prompt("Enter your mark:","0")
if(mark>=80) document.write("Grade="+"A")
</script>

Example 6.1: Using Comparison Operators

<!DOCTYPE html>
<HTML>

<HEAD>
<TITLE>Using Relational Operators </TITLE>

<SCRIPT LANGUAGE = "JavaScript">
var firstNumber, //declare first variable
secondNumber; //declare second variable

firstNumber = window.prompt( "Enter first Number:", "0" );
secondNumber = window.prompt( "Enter second integer:", "0" );

document.writeln( "<H1>Comparison Output</H1>" );
document.writeln( "<TABLE BORDER = '1' WIDTH = '100%'>" ); // Creates table

if ( firstNumber == secondNumber )
document.writeln( "<TR><TD>" + firstNumber + " = " + secondNumber +
"</TD></TR>" ); // Creates rows and columns
if ( firstNumber != secondNumber )
document.writeln( "<TR><TD>" + firstNumber + " Not equal to " + secondNumber +
"</TD></TR>" );
if ( firstNumber < secondNumber )
document.writeln( "<TR><TD>" + firstNumber + " < " + secondNumber +
"</TD></TR>" );
if ( firstNumber > secondNumber )
document.writeln( "<TR><TD>" + firstNumber + " > " + secondNumber +
"</TD></TR>" );
// Display results
document.writeln( "</TABLE>" );
</SCRIPT>

</HEAD>
<BODY>
<P>Click Refresh (or Reload) to run the script again</P>
</BODY>
</HTML>

Click Example 6.1 to view the output

Example 6.2

This example is similar to Example 6.1 but you can see the results in this web page itself. The JavaScript is as follows:

The JavaScript

<script>

function test(){
var num1= document.getElementById("firstnum").value;
var num2 =document.getElementById("secondnum").value;
if ( num1 == num2 )
{msg= "Two Numbers are Equal";}
if (num1>num2)
{msg="First Number>Second Number";}
if (num1<num2)
{msg="First Number<Second Number";}
document.getElementById('ans1').textContent=msg;
}

</script>

Enter first number:

Enter second number:

Which number is greater?

6.1.2 Using if and else keywords

The syntax of using if and else keywords is

if (Condition Expression){ Statement 1 }
else {Statement 2}

If the expression is true, then JavaScript will execute the statement1, otherwise there it will execute statement 2 and ignores statement1. In Example 6.3, if the height is more or equal to 180, the browser will show the message "Congratulation! You are selected". Otherwise, it will show the message "Sorry, you are not selected".

Example 6.3

The JavaScript

<script>
function check(){
var yourname=document.getElementById("yourname").value;
var height=document.getElementById("height").value;
if(height>=180)
document.getElementById("msg").innerHTML="Congratulation!"+yourname+", You are selected";
else
document.getElementById("msg").innerHTML="Sorry,"+yourname+", you are not selected";
</script>

The HTML

Enter Name: <input size="30" type="text" id="yourname">
Enter Your Height: <input size="10" type="text" id="height">
Our decision : <span id="msg" style="font-weight:bold"> </span>
<input type="button" onclick="check()" value="Check Result">

Enter Name:

Enter Your Height:

Our decision :

6.1.2 Using if, else and else if keywords

if there are multiple expressions and conditions, we then need to include the else if keyword.

if (Condition Expression1 ){ Statement 1 }
 else if(Condition Expression 2) {Statement 2}
 else if(Condiiton Expression3) {statement 3}
 else  {statement n}

You can see the application in Example 6.4

Example 6.4

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Examination Grade</title>
<H2><font face="Arial">The grade will be shown below when you enter the mark</font></H2>

<table border=1 align=center bgcolor=yellow ><tr><td><b>
<script>
var mark;

mark=window.prompt("Enter your mark:","0")
if (mark>=80)
document.writeln("Grade="+"A")
elseif (mark>=60)
document.writeln("Grade="+"B")
else if (mark>=50)
document.writeln("Grade="+"C")
else if (mark>=40)
document.writeln("Grade="+"D")
else if (mark>=30)
document.writeln("Grade="+"E")
else
document.writeln("F");

</script></td></tr></table>
</head>

<body>

</body>

</html>

Click Example 6.2 to view the actual output

Example 6.5

This example is basically the same as Example 6.4 but we added some twist to it. Also you can same the result withour leaving this page.

The JavaScript

<script>
function grade(){
var mark;
yourname=document.getElementById("yrname").value;
mark=document.getElementById("mark").value;
if (mark>=80)
document.getElementById("grade").innerHTML=yourname+",you got Grade A";
else if (mark>=60)
document.getElementById("grade").innerHTML=yourname+",you got Grade B";
else if (mark>=50)
document.getElementById("grade").innerHTML=yourname+",you got Grade C";
else if (mark>=40)
document.getElementById("grade").innerHTML=yourname+",you got Grade D";
else if (mark>=30)
document.getElementById("grade").innerHTML=yourname+",you got Grade E";
else
document.getElementById("grade").innerHTML=yourname+",you Fail!";
}
</script>

The HTML

<p>Enter Your Name: <input size="30" type="text" id="yrname"></p>
<p>Enter Your Mark: <input size="10" type="text" id="mark"></p>
<p>Result :<span id="grade" style="font-weight:bold"></span></p>
<input type="button" onclick="grade()" value="Check Grade">

Enter Your Name:

Enter Your Mark:

Result :

6.2 Logical Operators

There are three logical operators here, as shown below:

&&  represents AND

| |  represents OR

!  represent NOT

The logical operators are used together with the comparison operators. The following example shows the usage of && (The logical AND)

if ( mark>=60 && mark<80){grade="B"};

The following example shows the usage of || (the logical OR)

if (age>=12 ||  height>140){entryfee="$10"}

The following example shows the usage of ! (The logical NOT)

If (! (stockIndex<1000)) document.write ("The market is good")

The application of the logical operators can be shown in Example 6.3 below:

Example 6.3

The JavaScript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<script language="javascript">
var age, height, fee

age=window.prompt("Enter your age:","0")
height=window.prompt("Enter your height:","0")

if (age>=12 || height>=140){fee="$10"};
else {fee="$8"};
document.getElementById("fee").innerHTML=entryfee;;

</script>
</body>

The HTML

<input type="button" onclick="chkfee()" value="Check Entry Fee">
<p>Your entry fee is :<span id="fee" style="font-weight:bold"></span></p>

Your entry fee is :

❮ Previous Lesson Next Lesson ❯