Introduction
In this lab, students will explore JavaScript comparison operators through a hands-on HTML and JavaScript exercise. The lab guides participants through setting up an HTML file and progressively demonstrating various comparison operators, including greater than, less than, equality, and strict equality operators.
Participants will learn how to use comparison operators by writing JavaScript code within an HTML script tag, experimenting with different numeric and value comparisons, and observing the results in the browser console. By the end of the lab, students will understand how to apply comparison operators to evaluate relationships between values and comprehend their behavior in different scenarios.
Set Up HTML File for Comparison Operators
In this step, you'll set up a basic HTML file to explore JavaScript comparison operators. We'll create an HTML file with an embedded JavaScript script that will help us understand how comparison operators work.
Open the WebIDE and navigate to the ~/project directory. Create a new file called comparison-operators.html with the following content:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Comparison Operators</title>
</head>
<body>
<h1>Exploring Comparison Operators</h1>
<p>
Open the browser console to see the results of our comparison operators.
</p>
<script>
// We'll add our comparison operator examples here
console.log("HTML file setup complete!");
</script>
</body>
</html>
Let's break down the key components of this HTML file:
- The
<!DOCTYPE html>declaration ensures the browser uses standard mode. - We've included a simple
<script>tag where we'll write our JavaScript code. - The
console.log()statement will help us verify the file is working correctly.
To view the file, you would typically open it in a web browser and check the browser's developer console. In our LabEx environment, we'll verify the file's creation and content.
Demonstrate Greater Than and Less Than Operators
In this step, you'll learn about the greater than (>) and less than (<) comparison operators in JavaScript. Open the comparison-operators.html file from the previous step and modify the <script> section to explore these operators.
Update the script with the following code:
<script>
// Greater Than (>) Operator
console.log("Greater Than Operator Examples:");
console.log(10 > 5); // true
console.log(5 > 10); // false
console.log(5 > 5); // false
// Less Than (<) Operator
console.log("\nLess Than Operator Examples:");
console.log(5 < 10); // true
console.log(10 < 5); // false
console.log(5 < 5); // false
// Comparing different types
console.log("\nComparing Different Types:");
console.log(5 < "10"); // true (type coercion)
console.log(10 > "5"); // true (type coercion)
</script>
These examples demonstrate key characteristics of greater than and less than operators:
- When the left value is larger,
>returnstrue - When the left value is smaller,
>returnsfalse - When values are equal, both
>and<returnfalse - JavaScript performs type coercion when comparing different types
Open the browser console to see the comparison results. Each console.log() will show the outcome of the comparison.
Practice Equality and Inequality Operators
In this step, you'll explore the equality (==) and inequality (!=) operators in JavaScript. Open the comparison-operators.html file and update the <script> section with the following code:
<script>
// Equality Operator (==)
console.log("Equality Operator Examples:");
console.log(5 == 5); // true
console.log(5 == "5"); // true (type coercion)
console.log(5 == 10); // false
// Inequality Operator (!=)
console.log("\nInequality Operator Examples:");
console.log(5 != 10); // true
console.log(5 != "5"); // false (type coercion)
console.log(5 != 5); // false
// Comparing different types
console.log("\nComparing Different Types:");
console.log(0 == false); // true (type coercion)
console.log(1 == true); // true (type coercion)
console.log("" == false); // true (type coercion)
</script>
Key points about equality and inequality operators:
- The
==operator performs type coercion before comparison ==returnstrueif values are the same after type conversion- The
!=operator checks if values are not equal, also with type coercion - Type coercion can lead to unexpected results
Open the browser console to see the comparison results. Each console.log() will display the outcome of the comparisons.
Understand Strict Equality and Inequality Operators
In this step, you'll learn about strict equality (===) and strict inequality (!==) operators in JavaScript. Open the comparison-operators.html file and update the <script> section with the following code:
<script>
// Strict Equality Operator (===)
console.log("Strict Equality Operator Examples:");
console.log(5 === 5); // true
console.log(5 === "5"); // false (no type coercion)
console.log(0 === false); // false
console.log(1 === true); // false
// Strict Inequality Operator (!==)
console.log("\nStrict Inequality Operator Examples:");
console.log(5 !== 10); // true
console.log(5 !== "5"); // true (no type coercion)
console.log(0 !== false); // true
console.log(1 !== true); // true
// Comparing with type coercion vs. strict comparison
let num = 5;
let strNum = "5";
console.log("\nComparing with == vs. ===:");
console.log(num == strNum); // true (type coercion)
console.log(num === strNum); // false (strict comparison)
</script>
Key differences between loose and strict comparison:
===checks both value and type without type coercion!==is the strict inequality operator- Strict operators prevent unexpected type conversion
- Always prefer
===and!==for more predictable comparisons
Open the browser console to see the comparison results. Each console.log() will display the outcome of the comparisons.
Experiment with Comparison Operator Results
In this step, you'll explore more complex scenarios with comparison operators and learn how they interact with different types of values. Open the comparison-operators.html file and update the <script> section with the following code:
<script>
// Comparing different types and complex scenarios
console.log("Complex Comparison Scenarios:");
// Comparing null and undefined
console.log(null == undefined); // true (type coercion)
console.log(null === undefined); // false (strict comparison)
// Comparing with NaN
console.log(NaN == NaN); // false (special case)
console.log(NaN === NaN); // false
// Comparing objects
let obj1 = { value: 5 };
let obj2 = { value: 5 };
let obj3 = obj1;
console.log("\nObject Comparisons:");
console.log(obj1 == obj2); // false (different references)
console.log(obj1 === obj2); // false (different references)
console.log(obj1 === obj3); // true (same reference)
// Chained comparisons
let x = 5;
console.log("\nChained Comparisons:");
console.log(1 < x && x < 10); // true
console.log(1 < x < 10); // Warning: This doesn't work as expected!
</script>
Key insights from these experiments:
nullandundefinedbehave differently with loose and strict equalityNaNis never equal to itself- Object comparisons depend on reference, not content
- Chained comparisons can be tricky and may not work as expected
Open the browser console to see the comparison results and understand the nuanced behavior of comparison operators.
Summary
In this lab, participants explore JavaScript comparison operators through a hands-on HTML and JavaScript exercise. The lab begins by setting up a basic HTML file with an embedded script, enabling learners to understand and practice various comparison techniques such as greater than, less than, equality, and strict equality operators.
By working through practical examples in the browser console, students gain insights into how comparison operators function, learning to evaluate different types of numeric and value comparisons. The lab provides a structured approach to understanding these fundamental JavaScript operators, allowing participants to experiment with different scenarios and observe the resulting boolean outcomes.
