Realizar operaciones aritméticas en JavaScript

Introducción

En este laboratorio, los participantes explorarán las operaciones aritméticas fundamentales en JavaScript, aprendiendo a manipular números utilizando varios operadores matemáticos. El laboratorio ofrece un recorrido completo desde la configuración de un entorno HTML hasta la implementación de operaciones aritméticas básicas como la suma, la resta, la multiplicación y la división, y la comprensión de conceptos más avanzados como el operador módulo y los operadores de incremento/decremento.

Los participantes comenzarán creando un archivo HTML con una sección embebida de JavaScript y luego progresivamente desarrollarán sus habilidades practicando diferentes técnicas aritméticas. A través de ejercicios prácticos de codificación, los aprendices adquirirán experiencia práctica en la realización de cálculos matemáticos, la comprensión de la precedencia de los operadores y la exploración de las operaciones de incremento/decremento prefijo y postfijo, que son habilidades esenciales para la programación en JavaScript.

Configurar el archivo HTML para las operaciones aritméticas de JavaScript

En este paso, crearás un archivo HTML básico que servirá como base para realizar operaciones aritméticas en JavaScript. Configuraremos una estructura HTML simple e incluiremos una sección embebida de JavaScript para demostrar la funcionalidad aritmética básica.

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

Copia y pega el siguiente código HTML en el archivo arithmetic.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Arithmetic Operations</title>
  </head>
  <body>
    <h1>JavaScript Arithmetic Operations</h1>

    <script>
      // Aquí agregaremos nuestro código JavaScript en esta sección
      console.log("HTML file is ready for arithmetic operations!");
    </script>
  </body>
</html>

Analicemos los componentes clave de este archivo HTML:

<!DOCTYPE html> declara que este es un documento HTML5
La sección <head> contiene metadatos sobre el documento
El <body> contiene el contenido visible
La etiqueta <script> es donde escribiremos nuestro código JavaScript

Para verificar que el archivo se creó correctamente, puedes abrir el archivo en la consola del desarrollador del navegador. El console.log() inicial ayudará a confirmar que el archivo está configurado correctamente.

Implementar los operadores aritméticos básicos (+, -, *, /)

En este paso, aprenderás a realizar operaciones aritméticas básicas en JavaScript utilizando los operadores matemáticos fundamentales: suma (+), resta (-), multiplicación (*) y división (/).

Abre el archivo arithmetic.html creado en el paso anterior y modifica la sección <script> para incluir el siguiente código:

<script>
  // Operador de suma (+)
  let sum = 10 + 5;
  console.log("Suma: 10 + 5 =", sum);

  // Operador de resta (-)
  let difference = 20 - 7;
  console.log("Resta: 20 - 7 =", difference);

  // Operador de multiplicación (*)
  let product = 6 * 4;
  console.log("Multiplicación: 6 * 4 =", product);

  // Operador de división (/)
  let quotient = 25 / 5;
  console.log("División: 25 / 5 =", quotient);
</script>

Cuando abres este archivo HTML en un navegador web y revisas la consola del desarrollador del navegador, verás la siguiente salida de ejemplo:

Suma: 10 + 5 = 15
Resta: 20 - 7 = 13
Multiplicación: 6 * 4 = 24
División: 25 / 5 = 5

Puntos clave para entender:

El operador + suma dos números
El operador - resta el operando derecho del operando izquierdo
El operador * multiplica dos números
El operador / divide el operando izquierdo por el operando derecho

También puedes realizar operaciones con variables y mezclar diferentes tipos de números, incluyendo enteros y números de punto flotante.

Explorar el operador módulo y los operadores de incremento/decremento

En este paso, aprenderás sobre dos importantes operadores aritméticos de JavaScript: el operador módulo (%) y los operadores de incremento/decremento (++ y --).

Abre el archivo arithmetic.html y actualiza la sección <script> con el siguiente código:

<script>
  // Operador módulo (%)
  // Devuelve el residuo de una división
  let remainder = 17 % 5;
  console.log("Módulo: 17 % 5 =", remainder);

  // Operador de incremento (++)
  let x = 10;
  x++; // Incrementa x en 1
  console.log("Incremento: x++ =", x);

  // Operador de decremento (--)
  let y = 20;
  y--; // Decrementa y en 1
  console.log("Decremento: y-- =", y);

  // Más ejemplos de módulo
  console.log("Verificación de par/impar: 15 % 2 =", 15 % 2);
  console.log("Verificación de par/impar: 16 % 2 =", 16 % 2);
</script>

Cuando abres este archivo HTML en un navegador web y revisas la consola del desarrollador, verás la siguiente salida de ejemplo:

Módulo: 17 % 5 = 2
Incremento: x++ = 11
Decremento: y-- = 19
Verificación de par/impar: 15 % 2 = 1
Verificación de par/impar: 16 % 2 = 0

Puntos clave para entender:

El operador módulo % devuelve el residuo después de la división
Puedes usar el módulo para comprobar si un número es par o impar
El operador de incremento ++ incrementa una variable en 1
El operador de decremento -- decrementa una variable en 1

El operador módulo es particularmente útil para:

Comprobar números pares/impares
Recorrer un rango de números
Crear patrones o distribuciones

Comprender el incremento/decremento prefijo y postfijo

En este paso, aprenderás la diferencia entre los operadores de incremento/decremento prefijo y postfijo en JavaScript. Estos operadores pueden parecer similares, pero se comportan de manera diferente cuando se utilizan en expresiones.

Abre el archivo arithmetic.html y actualiza la sección <script> con el siguiente código:

<script>
  // Incremento postfijo (x++)
  let a = 5;
  let b = a++;
  console.log("Incremento postfijo:");
  console.log("a =", a); // a se incrementa después de que se le asigne el valor
  console.log("b =", b); // b obtiene el valor original de a

  // Incremento prefijo (++x)
  let x = 5;
  let y = ++x;
  console.log("\nIncremento prefijo:");
  console.log("x =", x); // x se incrementa antes de que se le asigne el valor
  console.log("y =", y); // y obtiene el valor incrementado de x

  // El mismo concepto se aplica a los operadores de decremento
  let p = 10;
  let q = p--;
  console.log("\nDecremento postfijo:");
  console.log("p =", p); // p se decrementa después de que se le asigne el valor
  console.log("q =", q); // q obtiene el valor original de p

  let m = 10;
  let n = --m;
  console.log("\nDecremento prefijo:");
  console.log("m =", m); // m se decrementa antes de que se le asigne el valor
  console.log("n =", n); // n obtiene el valor decrementado de m
</script>

Cuando abres este archivo HTML en un navegador web y revisas la consola del desarrollador, verás la siguiente salida de ejemplo:

Incremento postfijo:
a = 6
b = 5

Incremento prefijo:
x = 6
y = 6

Decremento postfijo:
p = 9
q = 10

Decremento prefijo:
m = 9
n = 9

Puntos clave para entender:

Postfijo x++: Devuelve el valor original y luego incrementa
Prefijo ++x: Incrementa primero y luego devuelve el nuevo valor
El mismo principio se aplica a los operadores de decremento x-- y --x
Esta diferencia es importante cuando el operador se utiliza en una expresión o asignación

Practicar la combinación de operaciones aritméticas

En este paso, aprenderás cómo combinar múltiples operaciones aritméticas para crear cálculos más complejos. Exploraremos diferentes maneras de combinar operadores y demostraremos cómo JavaScript maneja el orden de las operaciones.

Abre el archivo arithmetic.html y actualiza la sección <script> con el siguiente código:

<script>
  // Combinando múltiples operaciones aritméticas
  let result1 = 10 + 5 * 2;
  console.log("Resultado 1 (10 + 5 * 2):", result1);

  // Usando paréntesis para cambiar el orden de las operaciones
  let result2 = (10 + 5) * 2;
  console.log("Resultado 2 ((10 + 5) * 2):", result2);

  // Cálculo complejo con múltiples operadores
  let x = 15;
  let y = 7;
  let complexCalc = (x % 4) + y * 2 - x++ / 3;
  console.log("Cálculo complejo:", complexCalc);

  // Combinando incremento/decremento con otras operaciones
  let a = 5;
  let b = 3;
  let mixedCalc = ++a + b-- * 2;
  console.log("Cálculo mixto (++a + b-- * 2):", mixedCalc);
  console.log("a después del cálculo:", a);
  console.log("b después del cálculo:", b);

  // Ejemplo práctico: Cálculo del promedio
  let score1 = 85;
  let score2 = 92;
  let score3 = 78;
  let averageScore = (score1 + score2 + score3) / 3;
  console.log("Promedio de puntajes:", averageScore);
</script>

Cuando abres este archivo HTML en un navegador web y revisas la consola del desarrollador, verás la siguiente salida de ejemplo:

Resultado 1 (10 + 5 * 2): 20
Resultado 2 ((10 + 5) * 2): 30
Cálculo complejo: 9
Cálculo mixto (++a + b-- * 2): 11
a después del cálculo: 6
b después del cálculo: 2
Promedio de puntajes: 85

Puntos clave para entender:

JavaScript sigue el orden estándar de las operaciones matemáticas (PEMDAS)
Los paréntesis se pueden usar para cambiar el orden predeterminado de las operaciones
Puedes combinar diferentes tipos de operadores aritméticos en una sola expresión
Los operadores de incremento y decremento se pueden usar dentro de cálculos más complejos
Siempre ten cuidado con el orden y la ubicación de los operadores

Resumen

En este laboratorio, los participantes aprendieron cómo configurar un archivo HTML básico para realizar operaciones aritméticas en JavaScript y explorar cálculos matemáticos fundamentales. El laboratorio guió a los aprendices para crear un documento HTML con una sección de JavaScript integrada, lo que les permitió practicar técnicas aritméticas esenciales utilizando operadores como la suma (+), la resta (-), la multiplicación (*) y la división (/).

El viaje de aprendizaje avanzó desde establecer una estructura HTML fundamental hasta implementar diversas operaciones aritméticas, incluyendo la exploración de los operadores módulo, incremento y decremento. Los participantes adquirieron experiencia práctica con diferentes variaciones de operadores, comprendiendo cómo combinar operaciones aritméticas y manipular valores numéricos de manera efectiva en JavaScript.