Introdução
Neste laboratório, os alunos explorarão o uso do operador condicional em JavaScript através de um exemplo prático. O laboratório guia os aprendizes na criação de um arquivo HTML, na definição de variáveis de comparação, na implementação da lógica do operador condicional e na exibição de resultados usando document.write.
Os participantes começarão configurando uma estrutura HTML básica com uma tag de script embutida, em seguida, definirão variáveis como idade, status de estudante e país. Eles aprenderão como usar o operador condicional para realizar avaliações condicionais concisas, compreendendo sua sintaxe e aplicação prática na tomada de decisões rápidas baseadas em atribuições dentro do código JavaScript.
Criar Arquivo HTML para Exemplo do Operador Condicional
Nesta etapa, você criará um arquivo HTML para demonstrar o uso do operador condicional em JavaScript. Arquivos HTML fornecem um excelente ambiente para escrever e testar código JavaScript.
Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado conditional-operator.html clicando com o botão direito no explorador de arquivos e selecionando "Novo Arquivo".
Aqui está a estrutura HTML básica que você usará para explorar o operador condicional:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Conditional Operator Example</title>
</head>
<body>
<h1>JavaScript Conditional Operator Demo</h1>
<script>
// JavaScript code will be added here in subsequent steps
</script>
</body>
</html>
Este arquivo HTML fornece uma estrutura simples com uma tag de script onde você escreverá o código JavaScript para demonstrar o operador condicional. A tag <script> permite que você incorpore JavaScript diretamente no documento HTML.
Exemplo de saída ao abrir este arquivo em um navegador web:
JavaScript Conditional Operator Demo
Certifique-se de salvar o arquivo no diretório ~/project. Nas próximas etapas, você adicionará código JavaScript para explorar a funcionalidade do operador condicional.
Definir Variáveis para Comparação
Nesta etapa, você aprenderá como definir variáveis para comparação usando o operador condicional. Abra o arquivo conditional-operator.html que você criou na etapa anterior e adicione o seguinte código JavaScript dentro da tag <script>:
<script>
// Define variables for comparison
let age = 20;
let isStudent = true;
let country = "USA";
</script>
Vamos detalhar as variáveis:
ageé um número que representa a idade de uma pessoaisStudenté um valor booleano indicando o status de estudantecountryé uma string que representa o país da pessoa
Essas variáveis serão usadas para demonstrar como o operador condicional funciona para fazer comparações e tomadas de decisão. Nas próximas etapas, você usará essas variáveis para criar lógica condicional.
Exemplo de saída dos valores das variáveis:
age: 20
isStudent: true
country: "USA"
Certifique-se de salvar o arquivo após adicionar essas variáveis. As variáveis agora estão prontas para serem usadas com o operador condicional nas próximas etapas.
Implementar Lógica do Operador Condicional
Nesta etapa, você aprenderá como usar o operador condicional (ternário) para implementar lógica simples com base nas variáveis que você definiu anteriormente. O operador condicional fornece uma maneira concisa de escrever instruções if-else em uma única linha.
Atualize a seção <script> em seu arquivo conditional-operator.html com o seguinte código:
<script>
// Previously defined variables
let age = 20;
let isStudent = true;
let country = "USA";
// Conditional operator examples
let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";
let studentStatus = isStudent
? "Student discount applies"
: "No student discount";
let travelMessage =
country === "USA" ? "Domestic travel" : "International travel";
</script>
Vamos detalhar a sintaxe do operador condicional:
condição ? valor_se_verdadeiro : valor_se_falso- O primeiro exemplo verifica se a pessoa tem 18 anos ou mais
- O segundo exemplo verifica o status de estudante
- O terceiro exemplo verifica o país para o tipo de viagem
Exemplo de saída dos resultados do operador condicional:
canVote: "Eligible to vote"
studentStatus: "Student discount applies"
travelMessage: "Domestic travel"
O operador condicional fornece uma maneira compacta de tomar decisões e atribuir valores com base em condições. É uma alternativa mais concisa às instruções if-else tradicionais.
Exibir Resultado Usando Document Write
Nesta etapa, você aprenderá como exibir os resultados da sua lógica do operador condicional usando document.write(). Este método permite que você envie texto diretamente para o documento HTML.
Atualize a seção <script> em seu arquivo conditional-operator.html com o seguinte código:
<script>
// Previously defined variables and conditional operators
let age = 20;
let isStudent = true;
let country = "USA";
let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";
let studentStatus = isStudent
? "Student discount applies"
: "No student discount";
let travelMessage =
country === "USA" ? "Domestic travel" : "International travel";
// Display results using document.write()
document.write("<h2>Conditional Operator Results</h2>");
document.write("<p>Voting Status: " + canVote + "</p>");
document.write("<p>Student Discount: " + studentStatus + "</p>");
document.write("<p>Travel Type: " + travelMessage + "</p>");
</script>
Quando você abrir este arquivo HTML em um navegador da web, você verá os resultados exibidos na página. O método document.write() permite que você envie conteúdo HTML diretamente.
Exemplo de saída no navegador:
Conditional Operator Results
Voting Status: Eligible to vote
Student Discount: Student discount applies
Travel Type: Domestic travel
Observação: Embora document.write() seja simples de usar, geralmente é recomendado usar métodos mais modernos como innerHTML ou textContent em aplicações do mundo real.
Entender a Sintaxe do Operador Condicional
Nesta etapa, você se aprofundará na sintaxe e no uso do operador condicional (ternário) em JavaScript. Atualize a seção <script> em seu arquivo conditional-operator.html com o seguinte exemplo abrangente:
<script>
// Basic conditional operator syntax
// condition ? expression_if_true : expression_if_false
// Example 1: Simple comparison
let age = 20;
let canDrive = age >= 16 ? "Can drive" : "Cannot drive";
// Example 2: Nested conditional operator
let score = 75;
let grade =
score >= 90
? "A"
: score >= 80
? "B"
: score >= 70
? "C"
: score >= 60
? "D"
: "F";
// Example 3: Conditional operator with function calls
function isEven(num) {
return num % 2 === 0;
}
let number = 10;
let evenOddMessage = isEven(number) ? "Even number" : "Odd number";
// Display results
document.write("<h2>Conditional Operator Syntax Examples</h2>");
document.write("<p>Driving Eligibility: " + canDrive + "</p>");
document.write("<p>Grade: " + grade + "</p>");
document.write("<p>Number Type: " + evenOddMessage + "</p>");
</script>
Pontos-chave sobre a sintaxe do operador condicional:
- Formato básico:
condição ? valor_se_verdadeiro : valor_se_falso - Pode ser aninhado para múltiplas condições
- Pode incluir chamadas de função ou expressões complexas
- Fornece uma alternativa compacta às instruções
if-else
Exemplo de saída no navegador:
Conditional Operator Syntax Examples
Driving Eligibility: Can drive
Grade: C
Number Type: Even number
Resumo
Neste laboratório, os participantes aprendem a usar o operador condicional em JavaScript, criando um arquivo HTML e implementando lógica de comparação prática. O laboratório guia os alunos através da configuração de uma estrutura HTML básica com uma tag de script embutida, definindo variáveis para comparação e explorando a sintaxe do operador condicional.
A abordagem passo a passo permite que os alunos entendam como criar comparações dinâmicas usando variáveis como idade, status de estudante e país. Ao demonstrar a funcionalidade do operador condicional dentro de um contexto de desenvolvimento web, o laboratório fornece um método prático para entender esta técnica essencial de programação JavaScript, permitindo que os alunos escrevam instruções condicionais mais concisas e eficientes.
