JavaScript Lesson 6: Comparison and Logical Operators

<Lesson 5> [Contents] <Lesson 7>

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 demonstrates 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 PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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

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 the following example, it 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”.

<script language="javascript">
mark=window.prompt("Enter your height in cm:","0")
if(mark>=180)document.write("Congratulation! You are selected")
else document.write("Sorry, you are not selected")</script>

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.2

Example 6.2

<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 language=javascript>
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

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

<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.write("The entrance fee is: "+fee);

</script>
</body>

Click on Example 6.3 to test the output.