Explora los operadores de asignación en JavaScript

Introducción

En este laboratorio, los estudiantes explorarán los operadores de asignación de JavaScript a través de un ejercicio práctico de HTML y JavaScript. El laboratorio guía a los aprendices en la creación de un archivo HTML y la implementación de varios operadores de asignación, incluyendo la asignación básica (=), la asignación compuesta (+=, -=) y la asignación de multiplicación/ división (*=, /=).

Los participantes comenzarán configurando una estructura HTML con una etiqueta de script incrustada, luego demostrarán progresivamente diferentes técnicas de operadores de asignación. Al utilizar los métodos console logging y document.write(), los estudiantes verificarán y entenderán cómo estos operadores funcionan en JavaScript, ganando experiencia práctica en la manipulación de variables y la asignación de valores.

Crea un archivo HTML para los operadores de asignación de JavaScript

En este paso, crearás un archivo HTML que servirá como base para explorar los operadores de asignación de JavaScript. HTML proporciona la estructura para incrustar código JavaScript, lo que nos permite demostrar y probar diferentes técnicas de operadores de asignación.

Primero, abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado assignment-operators.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Aquí está la estructura básica de HTML que utilizarás:

<!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>

Analicemos los componentes principales:

<!DOCTYPE html> declara que este es un documento HTML5
La etiqueta <script> es donde escribiremos nuestro código JavaScript
La página incluye un título simple para proporcionar contexto

Después de crear el archivo, guárdalo en el directorio ~/project. Este archivo HTML será nuestro espacio de trabajo para aprender sobre los operadores de asignación en los siguientes pasos.

Salida de ejemplo cuando abres este archivo en un navegador:

Exploring Assignment Operators

Implementa el operador de asignación básica (=)

En este paso, aprenderás sobre el operador de asignación básica (=) en JavaScript. El operador de asignación se utiliza para asignar un valor a una variable, creando una forma fundamental de almacenar y manipular datos.

Abre el archivo assignment-operators.html que creaste en el paso anterior. Dentro de la etiqueta <script>, agrega el siguiente código JavaScript para explorar la asignación básica:

// Declarando y asignando variables usando el operador =
let firstName = "John";
let age = 25;
let isStudent = true;

// Demonstrando la asignación de variables
console.log("First Name:", firstName);
console.log("Age:", age);
console.log("Is Student:", isStudent);

Analicemos los conceptos clave:

let se utiliza para declarar variables en JavaScript moderno
El operador = asigna un valor a una variable
Las variables pueden almacenar diferentes tipos de datos: cadenas, números y valores booleanos
console.log() se utiliza para imprimir valores en la consola del navegador

También puedes reasignar variables usando el mismo operador:

// Reasignando valores de variables
age = 26;
console.log("Updated Age:", age);

// Asignando el valor de una variable a otra
let originalAge = age;
console.log("Original Age:", originalAge);

Salida de ejemplo en la consola del navegador:

First Name: John
Age: 25
Is Student: true
Updated Age: 26
Original Age: 26

Practica los operadores de asignación compuesta (+=, -=)

En este paso, explorarás los operadores de asignación compuesta += y -= en JavaScript. Estos operadores ofrecen una forma abreviada de realizar adiciones y restas mientras se asigna un nuevo valor a una variable.

Abre el archivo assignment-operators.html y agrega el siguiente código JavaScript dentro de la etiqueta <script>:

// Declaración inicial de variable
let score = 100;
console.log("Initial Score:", score);

// Usando el operador += para sumar y asignar
score += 50; // Equivalente a: score = score + 50
console.log("Score after +50:", score);

// Usando el operador -= para restar y asignar
score -= 25; // Equivalente a: score = score - 25
console.log("Score after -25:", score);

// Practicando con otra variable
let quantity = 10;
console.log("Initial Quantity:", quantity);

quantity += 5; // Suma 5 a quantity
console.log("Quantity after +5:", quantity);

quantity -= 3; // Resta 3 a quantity
console.log("Quantity after -3:", quantity);

Puntos claves sobre los operadores de asignación compuesta:

+= suma el valor del lado derecho a la variable y asigna el resultado
-= resta el valor del lado derecho de la variable y asigna el resultado
Estos operadores ofrecen una forma más concisa de modificar los valores de las variables
Funcionan con números y pueden simplificar las operaciones aritméticas

Salida de ejemplo en la consola del navegador:

Initial Score: 100
Score after +50: 150
Score after -25: 125
Initial Quantity: 10
Quantity after +5: 15
Quantity after -3: 12

Demuestra los operadores de asignación de multiplicación y división (*=, /=)

En este paso, explorarás los operadores de asignación de multiplicación y división *= y /= en JavaScript. Estos operadores ofrecen una forma concisa de multiplicar o dividir una variable y asignar el resultado de nuevo a la misma variable.

Abre el archivo assignment-operators.html y agrega el siguiente código JavaScript dentro de la etiqueta <script>:

// Operador de asignación de multiplicación (*=)
let price = 10;
console.log("Initial Price:", price);

price *= 3; // Equivalente a: price = price * 3
console.log("Price after *3:", price);

// Operador de asignación de división (/=)
let quantity = 24;
console.log("Initial Quantity:", quantity);

quantity /= 4; // Equivalente a: quantity = quantity / 4
console.log("Quantity after /4:", quantity);

// Ejemplo práctico: Cálculo del costo total
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; // Aplicar un descuento del 10%
console.log("Discounted Total Cost:", totalCost);

Puntos claves sobre los operadores de asignación de multiplicación y división:

*= multiplica la variable por el valor del lado derecho y asigna el resultado
/= divide la variable por el valor del lado derecho y asigna el resultado
Estos operadores ayudan a simplificar las operaciones y asignaciones matemáticas
Funcionan con valores numéricos y se pueden utilizar en varios cálculos

Salida de ejemplo en la consola del 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

Verifica los resultados de los operadores de asignación usando document.write()

En este paso, aprenderás cómo usar document.write() para mostrar los resultados de los operadores de asignación directamente en la página web. Este método proporciona una forma simple de mostrar valores para que los principiantes visualicen sus operaciones de JavaScript.

Abre el archivo assignment-operators.html y modifica la etiqueta <script> para incluir el siguiente código:

// Demostrando operadores de asignación con document.write()
let initialValue = 10;
document.write("<h2>Demonstración de operadores de asignación</h2>");
document.write("Valor inicial: " + initialValue + "<br>");

// Asignación básica
initialValue = 20;
document.write("Después de la asignación básica (=): " + initialValue + "<br>");

// Asignación de adición compuesta
initialValue += 5;
document.write(
  "Después de la asignación de adición (+=): " + initialValue + "<br>"
);

// Asignación de resta compuesta
initialValue -= 3;
document.write(
  "Después de la asignación de resta (-=): " + initialValue + "<br>"
);

// Asignación de multiplicación
initialValue *= 2;
document.write(
  "Después de la asignación de multiplicación (*=): " + initialValue + "<br>"
);

// Asignación de división
initialValue /= 4;
document.write(
  "Después de la asignación de división (/=): " + initialValue + "<br>"
);

Puntos claves sobre document.write():

Escribe HTML o texto directamente en la página web
Puede usarse para mostrar valores de variables
Útil para depurar y demostrar operaciones de JavaScript
Agrega contenido a la página en el orden en que se llama

Salida de ejemplo en el navegador:

Demonstración de operadores de asignación
Valor inicial: 10
Después de la asignación básica (=): 20
Después de la asignación de adición (+=): 25
Después de la asignación de resta (-=): 22
Después de la asignación de multiplicación (*=): 44
Después de la asignación de división (/=): 11

Resumen

En este laboratorio, los participantes exploran los operadores de asignación de JavaScript a través de un ejercicio práctico de HTML y JavaScript. El laboratorio comienza creando un archivo HTML que sirve de base para demostrar varias técnicas de operadores de asignación, comenzando con el operador de asignación básico (=) para declarar e inicializar variables con diferentes tipos de datos como cadenas, números y booleanos.

El viaje de aprendizaje continúa implementando operadores de asignación compuesta como +=, -=, *= y /=, que ofrecen maneras concisas de realizar operaciones aritméticas y actualizar valores de variables. Al usar document.write() y console.log(), los participantes pueden verificar y visualizar los resultados de estas operaciones de asignación, ganando una comprensión práctica de cómo funcionan estos operadores en la programación de JavaScript.