Introdução
Neste laboratório, os alunos explorarão os operadores de atribuição JavaScript através de um exercício prático em HTML e JavaScript. O laboratório guia os aprendizes na criação de um arquivo HTML e na implementação de vários operadores de atribuição, incluindo a atribuição básica (=), atribuição composta (+=, -=) e atribuição de multiplicação/divisão (*=, /=).
Os participantes começarão configurando uma estrutura HTML com uma tag de script embutida, demonstrando progressivamente diferentes técnicas de operadores de atribuição. Ao usar os métodos console.log() e document.write(), os alunos verificarão e entenderão como esses operadores funcionam em JavaScript, ganhando experiência prática na manipulação de variáveis e atribuição de valores.
Criar Arquivo HTML para Operadores de Atribuição JavaScript
Nesta etapa, você criará um arquivo HTML que servirá como base para explorar os operadores de atribuição JavaScript. O HTML fornece a estrutura para embutir código JavaScript, permitindo-nos demonstrar e testar várias técnicas de operadores de atribuição.
Primeiro, abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado assignment-operators.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á:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Assignment Operators</title>
</head>
<body>
<h1>Exploring Assignment Operators</h1>
<script>
// JavaScript code will be added here in subsequent steps
</script>
</body>
</html>
Vamos detalhar os componentes-chave:
<!DOCTYPE html>declara isso como um documento HTML5- A tag
<script>é onde escreveremos nosso código JavaScript - A página inclui um título simples para fornecer contexto
Após criar o arquivo, salve-o no diretório ~/project. Este arquivo HTML será nosso playground para aprender sobre operadores de atribuição nas etapas seguintes.
Exemplo de saída ao abrir este arquivo em um navegador:
Exploring Assignment Operators
Implementar o Operador de Atribuição Básico (=)
Nesta etapa, você aprenderá sobre o operador de atribuição básico (=) em JavaScript. O operador de atribuição é usado para atribuir um valor a uma variável, criando uma maneira fundamental de armazenar e manipular dados.
Abra o arquivo assignment-operators.html que você criou na etapa anterior. Dentro da tag <script>, adicione o seguinte código JavaScript para explorar a atribuição básica:
// Declaring and assigning variables using the = operator
let firstName = "John";
let age = 25;
let isStudent = true;
// Demonstrating variable assignment
console.log("First Name:", firstName);
console.log("Age:", age);
console.log("Is Student:", isStudent);
Vamos detalhar os conceitos-chave:
leté usado para declarar variáveis em JavaScript moderno- O operador
=atribui um valor a uma variável - As variáveis podem armazenar diferentes tipos de dados: strings, números e valores booleanos
console.log()é usado para imprimir valores no console do navegador
Você também pode reatribuir variáveis usando o mesmo operador:
// Reassigning variable values
age = 26;
console.log("Updated Age:", age);
// Assigning the value of one variable to another
let originalAge = age;
console.log("Original Age:", originalAge);
Exemplo de saída no console do navegador:
First Name: John
Age: 25
Is Student: true
Updated Age: 26
Original Age: 26
Praticar Operadores de Atribuição Compostos (+=, -=)
Nesta etapa, você explorará os operadores de atribuição compostos += e -= em JavaScript. Esses operadores fornecem uma forma abreviada de realizar adição e subtração enquanto atribuem um novo valor a uma variável.
Abra o arquivo assignment-operators.html e adicione o seguinte código JavaScript dentro da tag <script>:
// Initial variable declaration
let score = 100;
console.log("Initial Score:", score);
// Using += operator to add and assign
score += 50; // Equivalent to: score = score + 50
console.log("Score after +50:", score);
// Using -= operator to subtract and assign
score -= 25; // Equivalent to: score = score - 25
console.log("Score after -25:", score);
// Practicing with another variable
let quantity = 10;
console.log("Initial Quantity:", quantity);
quantity += 5; // Add 5 to quantity
console.log("Quantity after +5:", quantity);
quantity -= 3; // Subtract 3 from quantity
console.log("Quantity after -3:", quantity);
Pontos-chave sobre operadores de atribuição compostos:
+=adiciona o valor do lado direito à variável e atribui o resultado-=subtrai o valor do lado direito da variável e atribui o resultado- Esses operadores fornecem uma maneira mais concisa de modificar os valores das variáveis
- Eles funcionam com números e podem simplificar operações aritméticas
Exemplo de saída no console do navegador:
Initial Score: 100
Score after +50: 150
Score after -25: 125
Initial Quantity: 10
Quantity after +5: 15
Quantity after -3: 12
Demonstrar Operadores de Atribuição de Multiplicação e Divisão (*=, /=)
Nesta etapa, você explorará os operadores de atribuição de multiplicação e divisão *= e /= em JavaScript. Esses operadores fornecem uma maneira concisa de multiplicar ou dividir uma variável e atribuir o resultado de volta à mesma variável.
Abra o arquivo assignment-operators.html e adicione o seguinte código JavaScript dentro da tag <script>:
// Multiplication assignment operator (*=)
let price = 10;
console.log("Initial Price:", price);
price *= 3; // Equivalent to: price = price * 3
console.log("Price after *3:", price);
// Division assignment operator (/=)
let quantity = 24;
console.log("Initial Quantity:", quantity);
quantity /= 4; // Equivalent to: quantity = quantity / 4
console.log("Quantity after /4:", quantity);
// Practical example: Calculating total cost
let itemPrice = 5;
let itemCount = 7;
console.log("Item Price:", itemPrice);
console.log("Item Count:", itemCount);
let totalCost = itemPrice * itemCount;
console.log("Total Cost:", totalCost);
totalCost *= 0.9; // Apply 10% discount
console.log("Discounted Total Cost:", totalCost);
Pontos-chave sobre operadores de atribuição de multiplicação e divisão:
*=multiplica a variável pelo valor do lado direito e atribui o resultado/=divide a variável pelo valor do lado direito e atribui o resultado- Esses operadores ajudam a simplificar operações matemáticas e atribuições
- Eles funcionam com valores numéricos e podem ser usados em vários cálculos
Exemplo de saída no console do navegador:
Initial Price: 10
Price after *3: 30
Initial Quantity: 24
Quantity after /4: 6
Item Price: 5
Item Count: 7
Total Cost: 35
Discounted Total Cost: 31.5
Verificar Resultados de Operadores de Atribuição Usando document.write()
Nesta etapa, você aprenderá como usar document.write() para exibir os resultados dos operadores de atribuição diretamente na página web. Este método fornece uma maneira simples para os iniciantes visualizarem suas operações JavaScript.
Abra o arquivo assignment-operators.html e modifique a tag <script> para incluir o seguinte código:
// Demonstrating assignment operators with document.write()
let initialValue = 10;
document.write("<h2>Assignment Operator Demonstration</h2>");
document.write("Initial Value: " + initialValue + "<br>");
// Basic assignment
initialValue = 20;
document.write("After Basic Assignment (=): " + initialValue + "<br>");
// Compound addition assignment
initialValue += 5;
document.write("After Addition Assignment (+=): " + initialValue + "<br>");
// Compound subtraction assignment
initialValue -= 3;
document.write("After Subtraction Assignment (-=): " + initialValue + "<br>");
// Multiplication assignment
initialValue *= 2;
document.write(
"After Multiplication Assignment (*=): " + initialValue + "<br>"
);
// Division assignment
initialValue /= 4;
document.write("After Division Assignment (/=): " + initialValue + "<br>");
Pontos-chave sobre document.write():
- Escreve HTML ou texto diretamente na página web
- Pode ser usado para exibir valores de variáveis
- Útil para depuração (debugging) e demonstração de operações JavaScript
- Adiciona conteúdo à página na ordem em que é chamado
Exemplo de saída no navegador:
Assignment Operator Demonstration
Initial Value: 10
After Basic Assignment (=): 20
After Addition Assignment (+=): 25
After Subtraction Assignment (-=): 22
After Multiplication Assignment (*=): 44
After Division Assignment (/=): 11
Resumo
Neste laboratório, os participantes exploram os operadores de atribuição JavaScript por meio de um exercício prático em HTML e JavaScript. O laboratório começa com a criação de um arquivo HTML que serve como base para demonstrar várias técnicas de operadores de atribuição, começando com o operador de atribuição básico (=) para declarar e inicializar variáveis com diferentes tipos de dados, como strings, números e booleanos.
A jornada de aprendizado progride através da implementação de operadores de atribuição compostos como +=, -=, *= e /=, que fornecem maneiras concisas de realizar operações aritméticas e atualizar valores de variáveis. Ao usar document.write() e console.log(), os participantes podem verificar e visualizar os resultados dessas operações de atribuição, obtendo uma compreensão prática de como esses operadores funcionam na programação JavaScript.
