Introdução
Neste laboratório, os alunos explorarão os operadores de comparação JavaScript através de um exercício prático em HTML e JavaScript. O laboratório guia os participantes através da configuração de um arquivo HTML e demonstra progressivamente vários operadores de comparação, incluindo os operadores maior que, menor que, igualdade e igualdade estrita.
Os participantes aprenderão a usar operadores de comparação escrevendo código JavaScript dentro de uma tag de script HTML, experimentando diferentes comparações numéricas e de valores, e observando os resultados no console do navegador. Ao final do laboratório, os alunos entenderão como aplicar operadores de comparação para avaliar as relações entre valores e compreender seu comportamento em diferentes cenários.
Configurar o Arquivo HTML para Operadores de Comparação
Nesta etapa, você configurará um arquivo HTML básico para explorar os operadores de comparação JavaScript. Criaremos um arquivo HTML com um script JavaScript embutido que nos ajudará a entender como os operadores de comparação funcionam.
Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado comparison-operators.html com o seguinte conteúdo:
<!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>
Vamos detalhar os componentes-chave deste arquivo HTML:
- A declaração
<!DOCTYPE html>garante que o navegador use o modo padrão. - Incluímos uma tag
<script>simples onde escreveremos nosso código JavaScript. - A instrução
console.log()nos ajudará a verificar se o arquivo está funcionando corretamente.
Para visualizar o arquivo, você normalmente o abriria em um navegador da web e verificaria o console do desenvolvedor do navegador. Em nosso ambiente LabEx, verificaremos a criação e o conteúdo do arquivo.
Demonstrar os Operadores Maior Que e Menor Que
Nesta etapa, você aprenderá sobre os operadores de comparação maior que (>) e menor que (<) em JavaScript. Abra o arquivo comparison-operators.html da etapa anterior e modifique a seção <script> para explorar esses operadores.
Atualize o script com o seguinte código:
<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>
Esses exemplos demonstram as características-chave dos operadores maior que e menor que:
- Quando o valor da esquerda é maior,
>retornatrue - Quando o valor da esquerda é menor,
>retornafalse - Quando os valores são iguais, tanto
>quanto<retornamfalse - JavaScript realiza coerção de tipo (type coercion) ao comparar diferentes tipos
Abra o console do navegador para ver os resultados da comparação. Cada console.log() mostrará o resultado da comparação.
Praticar os Operadores de Igualdade e Desigualdade
Nesta etapa, você explorará os operadores de igualdade (==) e desigualdade (!=) em JavaScript. Abra o arquivo comparison-operators.html e atualize a seção <script> com o seguinte código:
<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>
Pontos-chave sobre os operadores de igualdade e desigualdade:
- O operador
==realiza coerção de tipo (type coercion) antes da comparação ==retornatruese os valores são os mesmos após a conversão de tipo- O operador
!=verifica se os valores não são iguais, também com coerção de tipo - A coerção de tipo pode levar a resultados inesperados
Abra o console do navegador para ver os resultados da comparação. Cada console.log() exibirá o resultado das comparações.
Compreender os Operadores de Igualdade e Desigualdade Estritas
Nesta etapa, você aprenderá sobre os operadores de igualdade estrita (===) e desigualdade estrita (!==) em JavaScript. Abra o arquivo comparison-operators.html e atualize a seção <script> com o seguinte código:
<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>
Diferenças-chave entre comparação solta e estrita:
===verifica tanto o valor quanto o tipo sem coerção de tipo!==é o operador de desigualdade estrita- Operadores estritos evitam conversões de tipo inesperadas
- Sempre prefira
===e!==para comparações mais previsíveis
Abra o console do navegador para ver os resultados da comparação. Cada console.log() exibirá o resultado das comparações.
Experimentar com os Resultados dos Operadores de Comparação
Nesta etapa, você explorará cenários mais complexos com operadores de comparação e aprenderá como eles interagem com diferentes tipos de valores. Abra o arquivo comparison-operators.html e atualize a seção <script> com o seguinte código:
<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>
Principais insights desses experimentos:
nulleundefinedse comportam de maneira diferente com igualdade solta e estritaNaNnunca é igual a si mesmo- Comparações de objetos dependem da referência, não do conteúdo
- Comparações encadeadas podem ser complicadas e podem não funcionar como esperado
Abra o console do navegador para ver os resultados da comparação e entender o comportamento diferenciado dos operadores de comparação.
Resumo
Neste laboratório, os participantes exploram os operadores de comparação JavaScript por meio de um exercício prático em HTML e JavaScript. O laboratório começa configurando um arquivo HTML básico com um script embutido, permitindo que os alunos entendam e pratiquem várias técnicas de comparação, como os operadores maior que, menor que, igualdade e igualdade estrita.
Ao trabalhar com exemplos práticos no console do navegador, os alunos obtêm insights sobre como os operadores de comparação funcionam, aprendendo a avaliar diferentes tipos de comparações numéricas e de valores. O laboratório fornece uma abordagem estruturada para entender esses operadores JavaScript fundamentais, permitindo que os participantes experimentem diferentes cenários e observem os resultados booleanos resultantes.
