Explora los métodos del objeto Math en JavaScript

Introducción

En este laboratorio, los participantes profundizarán en el objeto Math de JavaScript, explorando sus poderosos métodos y propiedades a través de una demostración práctica basada en HTML. El laboratorio guía a los aprendices en la creación de una página web interactiva que muestra diversas operaciones matemáticas, incluyendo el acceso a propiedades integradas como Math.PI y Math.E, la implementación de métodos de cálculo, la generación de números aleatorios y la aplicación de técnicas del objeto Math en escenarios prácticos.

Siguiendo un enfoque paso a paso, los estudiantes construirán un archivo HTML con JavaScript incrustado que les permitirá experimentar con las funcionalidades del objeto Math. Aprenderán a usar métodos como Math.random(), Math.floor() y otras utilidades matemáticas, adquiriendo experiencia práctica en el aprovechamiento de las capacidades matemáticas integradas de JavaScript para resolver problemas computacionales y realizar manipulaciones numéricas.

Configurar el archivo HTML para la demostración del objeto Math

En este paso, crearás un archivo HTML para demostrar los métodos del objeto Math de JavaScript. Estableceremos una estructura HTML básica con una sección de script que nos permitirá explorar y experimentar con las funcionalidades del objeto Math.

Abre el WebIDE y navega hasta el directorio ~/proyecto. Crea un nuevo archivo llamado math-demo.html con el siguiente contenido:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demostración del objeto Math de JavaScript</title>
  </head>
  <body>
    <h1>Exploración del objeto Math</h1>
    <div id="output"></div>

    <script>
      // Agregaremos nuestras demostraciones del objeto Math aquí en los siguientes pasos
      const outputDiv = document.getElementById("output");

      function displayOutput(message) {
        outputDiv.innerHTML += `<p>${message}</p>`;
      }
    </script>
  </body>
</html>

Analicemos los componentes clave de este archivo HTML:

Hemos creado una estructura básica de documento HTML5
Agregado un <div> con id="output" para mostrar los resultados de nuestro JavaScript
Incluido una sección de <script> donde escribiremos nuestras demostraciones del objeto Math
Creado una función auxiliar displayOutput() para mostrar fácilmente los resultados en la página

Salida de ejemplo cuando abres este archivo en un navegador:

Exploración del objeto Math

La función displayOutput() nos ayudará a mostrar fácilmente los resultados de los métodos de nuestro objeto Math en los pasos siguientes. Esta configuración proporciona una forma limpia e interactiva de explorar las capacidades del objeto Math de JavaScript.

Utilizar propiedades del objeto Math

En este paso, explorarás las propiedades integradas del objeto Math de JavaScript. Abre el archivo math-demo.html del paso anterior y modifica la sección de script para demostrar estas propiedades.

Agrega el siguiente código a tu sección de <script> existente:

// Explorando propiedades del objeto Math
displayOutput(`Math.PI: ${Math.PI}`);
displayOutput(`Math.E: ${Math.E}`);
displayOutput(`Euler's number (e): ${Math.E}`);
displayOutput(`Pi value: ${Math.PI}`);

// Demonstrando el uso de estas propiedades en un cálculo simple
let circleRadius = 5;
let circleCircumference = 2 * Math.PI * circleRadius;
displayOutput(
  `Circle Circumference (radius ${circleRadius}): ${circleCircumference.toFixed(2)}`
);

El objeto Math en JavaScript proporciona varias constantes matemáticas importantes:

Math.PI: Representa la constante matemática π (pi), aproximadamente 3.14159
Math.E: Representa el número de Euler (e), aproximadamente 2.71828

Cuando abres el archivo HTML en un navegador, verás una salida similar a esta:

Math.PI: 3.141592653589793
Math.E: 2.718281828459045
Euler's number (e): 2.718281828459045
Pi value: 3.141592653589793
Circle Circumference (radius 5): 31.42

Estas propiedades son útiles para cálculos matemáticos, especialmente aquellos que involucran círculos, funciones exponenciales y otras computaciones matemáticas.

Implementar métodos del objeto Math para cálculos

En este paso, explorarás varios métodos del objeto Math para realizar cálculos matemáticos. Abre el archivo math-demo.html y agrega el siguiente código para demostrar diferentes métodos de Math:

// Demostración de métodos de cálculo Math
let number = -7.5;
let positiveNumber = Math.abs(number);
displayOutput(`Valor absoluto de ${number}: ${positiveNumber}`);

let decimalNumber = 4.7;
let roundedDown = Math.floor(decimalNumber);
let roundedUp = Math.ceil(decimalNumber);
let rounded = Math.round(decimalNumber);
displayOutput(`Piso de ${decimalNumber}: ${roundedDown}`);
displayOutput(`Techo de ${decimalNumber}: ${roundedUp}`);
displayOutput(`Redondeado de ${decimalNumber}: ${rounded}`);

let baseNumber = 2;
let exponent = 3;
let powerResult = Math.pow(baseNumber, exponent);
displayOutput(
  `${baseNumber} elevado a la potencia de ${exponent}: ${powerResult}`
);

let largestNumber = Math.max(10, 5, 8, 12, 3);
let smallestNumber = Math.min(10, 5, 8, 12, 3);
displayOutput(`Número más grande: ${largestNumber}`);
displayOutput(`Número más pequeño: ${smallestNumber}`);

let squareRoot = Math.sqrt(16);
displayOutput(`Raíz cuadrada de 16: ${squareRoot}`);

Este código demuestra varios métodos clave del objeto Math:

Math.abs(): Devuelve el valor absoluto de un número
Math.floor(): Redondea hacia abajo al entero más cercano
Math.ceil(): Redondea hacia arriba al entero más cercano
Math.round(): Redondea al entero más cercano
Math.pow(): Eleva un número a una potencia especificada
Math.max(): Devuelve el número más grande de una lista
Math.min(): Devuelve el número más pequeño de una lista
Math.sqrt(): Calcula la raíz cuadrada de un número

Salida de ejemplo:

Valor absoluto de -7.5: 7.5
Piso de 4.7: 4
Techo de 4.7: 5
Redondeado de 4.7: 5
2 elevado a la potencia de 3: 8
Número más grande: 12
Número más pequeño: 3
Raíz cuadrada de 16: 4

Generar números aleatorios con Math.random()

En este paso, explorarás cómo generar números aleatorios utilizando Math.random() y crear técnicas de generación de números aleatorios más avanzadas. Abre el archivo math-demo.html y agrega el siguiente código para demostrar la generación de números aleatorios:

// Demostración de generación de números aleatorios
// Número aleatorio básico (entre 0 y 1)
let basicRandom = Math.random();
displayOutput(`Número aleatorio básico: ${basicRandom}`);

// Generar un número aleatorio en un rango específico
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Entero aleatorio entre 1 y 10
let randomInt = getRandomNumber(1, 10);
displayOutput(`Entero aleatorio (1-10): ${randomInt}`);

// Generar múltiples números aleatorios
displayOutput("Cinco números aleatorios (1-100):");
for (let i = 0; i < 5; i++) {
  let randomNumber = getRandomNumber(1, 100);
  displayOutput(randomNumber);
}

// Simular una tirada de moneda
function coinFlip() {
  return Math.random() < 0.5 ? "Cara" : "Cruz";
}
displayOutput(`Resultado de la tirada de moneda: ${coinFlip()}`);

// Generador de colores aleatorios
function getRandomColor() {
  let r = getRandomNumber(0, 255);
  let g = getRandomNumber(0, 255);
  let b = getRandomNumber(0, 255);
  return `rgb(${r}, ${g}, ${b})`;
}
displayOutput(`Color aleatorio: ${getRandomColor()}`);

La salida de ejemplo podría ser así:

Número aleatorio básico: 0.7234567890123456
Entero aleatorio (1-10): 7
Cinco números aleatorios (1-100):
42
15
83
61
29
Resultado de la tirada de moneda: Cara
Color aleatorio: rgb(134, 45, 211)

Puntos claves sobre Math.random():

Devuelve un número pseudo-aleatorio entre 0 (inclusivo) y 1 (exclusivo)
Puede ser escalado y manipulado para generar números en rangos específicos
Útil para juegos, simulaciones y selecciones aleatorias

Aplicar métodos del objeto Math en escenarios prácticos

En este paso, explorarás las aplicaciones prácticas de los métodos del objeto Math en escenarios del mundo real. Abre el archivo math-demo.html y agrega el siguiente código para demostrar usos prácticos:

// Escenarios prácticos con métodos del objeto Math

// 1. Calcular el precio con descuento
function calculateDiscount(originalPrice, discountPercentage) {
  let discountAmount = originalPrice * (discountPercentage / 100);
  let finalPrice = originalPrice - discountAmount;
  displayOutput(`Precio original: $$${originalPrice.toFixed(2)}`);
  displayOutput(
    `Descuento (${discountPercentage}%): $$${discountAmount.toFixed(2)}`
  );
  displayOutput(`Precio final: $$${finalPrice.toFixed(2)}`);
  return finalPrice;
}
calculateDiscount(100, 20);

// 2. Calculadora de área de círculo
function calculateCircleArea(radius) {
  let area = Math.PI * Math.pow(radius, 2);
  displayOutput(`Radio del círculo: ${radius}`);
  displayOutput(`Área del círculo: ${area.toFixed(2)} unidades cuadradas`);
  return area;
}
calculateCircleArea(5);

// 3. Conversor de temperatura (Celsius a Fahrenheit)
function celsiusToFahrenheit(celsius) {
  let fahrenheit = Math.round((celsius * 9) / 5 + 32);
  displayOutput(`${celsius}°C es ${fahrenheit}°F`);
  return fahrenheit;
}
celsiusToFahrenheit(25);

// 4. Calculadora de la hipotenusa
function calculateHypotenuse(a, b) {
  let hypotenuse = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  displayOutput(`Lados del triángulo: ${a}, ${b}`);
  displayOutput(`Longitud de la hipotenusa: ${hypotenuse.toFixed(2)}`);
  return hypotenuse;
}
calculateHypotenuse(3, 4);

// 5. Generador de puntuaciones aleatorias para un cuestionario
function generateQuizScores(numberOfStudents) {
  displayOutput(
    `Puntuaciones del cuestionario para ${numberOfStudents} estudiantes:`
  );
  for (let i = 1; i <= numberOfStudents; i++) {
    let score = Math.floor(Math.random() * 51) + 50; // Puntuaciones entre 50-100
    displayOutput(`Estudiante ${i}: ${score}`);
  }
}
generateQuizScores(5);

La salida de ejemplo podría ser así:

Precio original: $$100.00
Descuento (20%): $$20.00
Precio final: $$80.00
Radio del círculo: 5
Área del círculo: 78.54 unidades cuadradas
25°C es 77°F
Lados del triángulo: 3, 4
Longitud de la hipotenusa: 5.00
Puntuaciones del cuestionario para 5 estudiantes:
Estudiante 1: 75
Estudiante 2: 92
Estudiante 3: 63
Estudiante 4: 87
Estudiante 5: 69

Esta demostración muestra cómo los métodos del objeto Math se pueden aplicar en varios escenarios prácticos:

Calcular descuentos
Calcular áreas geométricas
Convertir temperaturas
Encontrar la longitud de la hipotenusa
Generar puntuaciones aleatorias

Resumen

En este laboratorio, los participantes exploran las capacidades del objeto Math de JavaScript a través de una demostración práctica en HTML. El laboratorio comienza configurando un archivo HTML interactivo con un div de salida dedicado y una función auxiliar para mostrar los resultados, proporcionando un entorno estructurado para aprender operaciones y métodos matemáticos.

El viaje de aprendizaje abarca aspectos clave del objeto Math, incluyendo la examen de propiedades integradas como Math.PI y Math.E, la implementación de métodos de cálculo como redondeo, la búsqueda de valores máximo y mínimo y la generación de números aleatorios. Al agregar progresivamente código a la sección de script del HTML, los aprendices adquieren experiencia práctica con las utilidades matemáticas de JavaScript, comprendiendo cómo aprovechar estos métodos para diversas tareas de cálculo y escenarios de programación del mundo real.