소개
이 랩에서는 학생들이 실습 HTML 및 JavaScript 연습을 통해 JavaScript 비교 연산자를 탐구합니다. 이 랩은 참가자들이 HTML 파일을 설정하고, 보다 큼, 보다 작음, 같음, 엄격한 같음 연산자를 포함한 다양한 비교 연산자를 점진적으로 시연하도록 안내합니다.
참가자들은 HTML 스크립트 태그 내에 JavaScript 코드를 작성하고, 다양한 숫자 및 값 비교를 실험하며, 브라우저 콘솔에서 결과를 관찰함으로써 비교 연산자를 사용하는 방법을 배우게 됩니다. 랩이 끝나면 학생들은 값 간의 관계를 평가하고 다양한 시나리오에서 해당 동작을 이해하기 위해 비교 연산자를 적용하는 방법을 이해하게 됩니다.
비교 연산자를 위한 HTML 파일 설정
이 단계에서는 JavaScript 비교 연산자를 탐구하기 위해 기본적인 HTML 파일을 설정합니다. 비교 연산자가 어떻게 작동하는지 이해하는 데 도움이 되는 임베디드 JavaScript 스크립트가 있는 HTML 파일을 만들 것입니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 다음 내용으로 comparison-operators.html이라는 새 파일을 만듭니다.
<!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>
이 HTML 파일의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>선언은 브라우저가 표준 모드를 사용하도록 보장합니다.- JavaScript 코드를 작성할 간단한
<script>태그를 포함했습니다. console.log()문은 파일이 올바르게 작동하는지 확인하는 데 도움이 됩니다.
파일을 보려면 일반적으로 웹 브라우저에서 열고 브라우저의 개발자 콘솔을 확인합니다. LabEx 환경에서는 파일 생성 및 내용을 확인합니다.
크다/작다 연산자 시연
이 단계에서는 JavaScript 에서 보다 큼 (>) 및 보다 작음 (<) 비교 연산자에 대해 배웁니다. 이전 단계에서 comparison-operators.html 파일을 열고 <script> 섹션을 수정하여 이러한 연산자를 탐구합니다.
다음 코드로 스크립트를 업데이트합니다.
<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>
이 예제는 보다 큼 및 보다 작음 연산자의 주요 특징을 보여줍니다.
- 왼쪽 값이 더 크면
>는true를 반환합니다. - 왼쪽 값이 더 작으면
>는false를 반환합니다. - 값이 같으면
>와<모두false를 반환합니다. - JavaScript 는 다른 유형을 비교할 때 타입 강제 변환 (type coercion) 을 수행합니다.
브라우저 콘솔을 열어 비교 결과를 확인합니다. 각 console.log()는 비교 결과를 표시합니다.
같음/같지 않음 연산자 실습
이 단계에서는 JavaScript 에서 동등성 (==) 및 부등성 (!=) 연산자를 탐구합니다. comparison-operators.html 파일을 열고 <script> 섹션을 다음 코드로 업데이트합니다.
<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>
동등성 및 부등성 연산자에 대한 주요 사항:
==연산자는 비교 전에 타입 강제 변환 (type coercion) 을 수행합니다.- 타입 변환 후 값이 같으면
==는true를 반환합니다. !=연산자는 타입 강제 변환을 사용하여 값이 같지 않은지 확인합니다.- 타입 강제 변환은 예상치 못한 결과를 초래할 수 있습니다.
브라우저 콘솔을 열어 비교 결과를 확인합니다. 각 console.log()는 비교 결과를 표시합니다.
엄격한 같음/같지 않음 연산자 이해
이 단계에서는 JavaScript 에서 엄격한 동등성 (===) 및 엄격한 부등성 (!==) 연산자에 대해 배웁니다. comparison-operators.html 파일을 열고 <script> 섹션을 다음 코드로 업데이트합니다.
<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>
느슨한 비교와 엄격한 비교의 주요 차이점:
===는 타입 강제 변환 (type coercion) 없이 값과 유형을 모두 확인합니다.!==는 엄격한 부등성 연산자입니다.- 엄격한 연산자는 예상치 못한 타입 변환을 방지합니다.
- 더 예측 가능한 비교를 위해 항상
===및!==를 선호합니다.
브라우저 콘솔을 열어 비교 결과를 확인합니다. 각 console.log()는 비교 결과를 표시합니다.
비교 연산자 결과 실험
이 단계에서는 비교 연산자를 사용한 더 복잡한 시나리오를 탐구하고 다양한 유형의 값과 어떻게 상호 작용하는지 배웁니다. comparison-operators.html 파일을 열고 <script> 섹션을 다음 코드로 업데이트합니다.
<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>
이러한 실험에서 얻은 주요 통찰력:
null과undefined는 느슨한 동등성 및 엄격한 동등성에서 다르게 동작합니다.NaN은 자기 자신과 결코 같지 않습니다.- 객체 비교는 내용이 아닌 참조에 따라 달라집니다.
- 체인 비교는 까다로울 수 있으며 예상대로 작동하지 않을 수 있습니다.
브라우저 콘솔을 열어 비교 결과를 확인하고 비교 연산자의 미묘한 동작을 이해합니다.
요약
이 랩에서는 참가자들이 실습 HTML 및 JavaScript 연습을 통해 JavaScript 비교 연산자를 탐구합니다. 랩은 임베디드 스크립트가 있는 기본 HTML 파일을 설정하는 것으로 시작하여 학습자가 보다 크다, 작다, 동등성 및 엄격한 동등성 연산자와 같은 다양한 비교 기술을 이해하고 연습할 수 있도록 합니다.
브라우저 콘솔에서 실용적인 예제를 통해 작업함으로써 학생들은 비교 연산자가 어떻게 작동하는지 통찰력을 얻고, 다양한 유형의 숫자 및 값 비교를 평가하는 방법을 배웁니다. 이 랩은 이러한 기본적인 JavaScript 연산자를 이해하기 위한 구조화된 접근 방식을 제공하여 참가자가 다양한 시나리오를 실험하고 결과 부울 (boolean) 결과를 관찰할 수 있도록 합니다.
