JavaScript Math: Aprenda Cálculos Matemáticos e Geração de Números Aleatórios

Introdução

Neste laboratório, os participantes mergulharão profundamente no objeto Math do JavaScript, explorando seus poderosos métodos e propriedades através de uma demonstração prática baseada em HTML. O laboratório guia os alunos na criação de uma página web interativa que exibe várias operações matemáticas, incluindo o acesso a propriedades embutidas como Math.PI e Math.E, a implementação de métodos de cálculo, a geração de números aleatórios e a aplicação de técnicas do objeto Math em cenários práticos.

Seguindo uma abordagem passo a passo, os alunos construirão um arquivo HTML com JavaScript embutido que lhes permitirá experimentar as funcionalidades do objeto Math. Eles aprenderão a usar métodos como Math.random(), Math.floor() e outras utilidades matemáticas, ganhando experiência prática no aproveitamento das capacidades matemáticas embutidas do JavaScript para resolver problemas computacionais e realizar manipulações numéricas.

Configurar Arquivo HTML para Demonstração do Objeto Math

Nesta etapa, você criará um arquivo HTML para demonstrar os métodos do objeto Math do JavaScript. Vamos configurar uma estrutura HTML básica com uma seção de script que nos permitirá explorar e experimentar as funcionalidades do objeto Math.

Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado math-demo.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Math Object Demonstration</title>
  </head>
  <body>
    <h1>Math Object Exploration</h1>
    <div id="output"></div>

    <script>
      // We'll add our Math object demonstrations here in the next steps
      const outputDiv = document.getElementById("output");

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

Vamos detalhar os componentes-chave deste arquivo HTML:

Criamos uma estrutura básica de documento HTML5
Adicionamos uma <div> com id="output" para exibir nossos resultados JavaScript
Incluímos uma seção <script> onde escreveremos nossas demonstrações do objeto Math
Criamos uma função auxiliar displayOutput() para mostrar facilmente os resultados na página

Exemplo de saída quando você abre este arquivo em um navegador:

Math Object Exploration

A função displayOutput() nos ajudará a mostrar facilmente os resultados dos nossos métodos do objeto Math nas próximas etapas. Esta configuração fornece uma maneira limpa e interativa de explorar as capacidades do objeto Math do JavaScript.

Usar Propriedades do Objeto Math

Nesta etapa, você explorará as propriedades embutidas do objeto Math do JavaScript. Abra o arquivo math-demo.html da etapa anterior e modifique a seção de script para demonstrar essas propriedades.

Adicione o seguinte código à sua seção <script> existente:

// Exploring Math Object Properties
displayOutput(`Math.PI: ${Math.PI}`);
displayOutput(`Math.E: ${Math.E}`);
displayOutput(`Euler's number (e): ${Math.E}`);
displayOutput(`Pi value: ${Math.PI}`);

// Demonstrating the use of these properties in a simple calculation
let circleRadius = 5;
let circleCircumference = 2 * Math.PI * circleRadius;
displayOutput(
  `Circle Circumference (radius ${circleRadius}): ${circleCircumference.toFixed(
    2
  )}`
);

O objeto Math no JavaScript fornece várias constantes matemáticas importantes:

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

Quando você abrir o arquivo HTML em um navegador, verá uma saída semelhante 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

Essas propriedades são úteis para cálculos matemáticos, especialmente aqueles que envolvem círculos, funções exponenciais e outras computações matemáticas.

Implementar Métodos do Objeto Math para Cálculos

Nesta etapa, você explorará vários métodos do objeto Math para realizar cálculos matemáticos. Abra o arquivo math-demo.html e adicione o seguinte código para demonstrar diferentes métodos Math:

// Math Calculation Methods Demonstration
let number = -7.5;
let positiveNumber = Math.abs(number);
displayOutput(`Absolute Value of ${number}: ${positiveNumber}`);

let decimalNumber = 4.7;
let roundedDown = Math.floor(decimalNumber);
let roundedUp = Math.ceil(decimalNumber);
let rounded = Math.round(decimalNumber);
displayOutput(`Floor of ${decimalNumber}: ${roundedDown}`);
displayOutput(`Ceiling of ${decimalNumber}: ${roundedUp}`);
displayOutput(`Rounded of ${decimalNumber}: ${rounded}`);

let baseNumber = 2;
let exponent = 3;
let powerResult = Math.pow(baseNumber, exponent);
displayOutput(
  `${baseNumber} raised to the power of ${exponent}: ${powerResult}`
);

let largestNumber = Math.max(10, 5, 8, 12, 3);
let smallestNumber = Math.min(10, 5, 8, 12, 3);
displayOutput(`Largest number: ${largestNumber}`);
displayOutput(`Smallest number: ${smallestNumber}`);

let squareRoot = Math.sqrt(16);
displayOutput(`Square root of 16: ${squareRoot}`);

Este código demonstra vários métodos-chave do objeto Math:

Math.abs(): Retorna o valor absoluto de um número
Math.floor(): Arredonda para baixo para o inteiro mais próximo
Math.ceil(): Arredonda para cima para o inteiro mais próximo
Math.round(): Arredonda para o inteiro mais próximo
Math.pow(): Eleva um número a uma potência especificada
Math.max(): Retorna o maior número em uma lista
Math.min(): Retorna o menor número em uma lista
Math.sqrt(): Calcula a raiz quadrada de um número

Exemplo de saída:

Absolute Value of -7.5: 7.5
Floor of 4.7: 4
Ceiling of 4.7: 5
Rounded of 4.7: 5
2 raised to the power of 3: 8
Largest number: 12
Smallest number: 3
Square root of 16: 4

Gerar Números Aleatórios com Math.random()

Nesta etapa, você explorará como gerar números aleatórios usando Math.random() e criar técnicas de geração de números aleatórios mais avançadas. Abra o arquivo math-demo.html e adicione o seguinte código para demonstrar a geração de números aleatórios:

// Random Number Generation Demonstration
// Basic random number (between 0 and 1)
let basicRandom = Math.random();
displayOutput(`Basic Random Number: ${basicRandom}`);

// Generate random number in a specific range
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Random integer between 1 and 10
let randomInt = getRandomNumber(1, 10);
displayOutput(`Random Integer (1-10): ${randomInt}`);

// Generate multiple random numbers
displayOutput("Five Random Numbers (1-100):");
for (let i = 0; i < 5; i++) {
  let randomNumber = getRandomNumber(1, 100);
  displayOutput(randomNumber);
}

// Simulating a coin flip
function coinFlip() {
  return Math.random() < 0.5 ? "Heads" : "Tails";
}
displayOutput(`Coin Flip Result: ${coinFlip()}`);

// Random color generator
function getRandomColor() {
  let r = getRandomNumber(0, 255);
  let g = getRandomNumber(0, 255);
  let b = getRandomNumber(0, 255);
  return `rgb(${r}, ${g}, ${b})`;
}
displayOutput(`Random Color: ${getRandomColor()}`);

A saída de exemplo pode ser semelhante a:

Basic Random Number: 0.7234567890123456
Random Integer (1-10): 7
Five Random Numbers (1-100):
42
15
83
61
29
Coin Flip Result: Heads
Random Color: rgb(134, 45, 211)

Pontos-chave sobre Math.random():

Retorna um número pseudo-aleatório entre 0 (inclusive) e 1 (exclusive)
Pode ser escalado e manipulado para gerar números em intervalos específicos
Útil para jogos, simulações e seleções aleatórias

Aplicar Métodos do Objeto Math em Cenários Práticos

Nesta etapa, você explorará aplicações práticas dos métodos do objeto Math em cenários do mundo real. Abra o arquivo math-demo.html e adicione o seguinte código para demonstrar usos práticos:

// Practical Scenarios with Math Object Methods

// 1. Calculate Discount Price
function calculateDiscount(originalPrice, discountPercentage) {
  let discountAmount = originalPrice * (discountPercentage / 100);
  let finalPrice = originalPrice - discountAmount;
  displayOutput(`Original Price: $${originalPrice.toFixed(2)}`);
  displayOutput(
    `Discount (${discountPercentage}%): $${discountAmount.toFixed(2)}`
  );
  displayOutput(`Final Price: $${finalPrice.toFixed(2)}`);
  return finalPrice;
}
calculateDiscount(100, 20);

// 2. Circle Area Calculator
function calculateCircleArea(radius) {
  let area = Math.PI * Math.pow(radius, 2);
  displayOutput(`Circle Radius: ${radius}`);
  displayOutput(`Circle Area: ${area.toFixed(2)} sq units`);
  return area;
}
calculateCircleArea(5);

// 3. Temperature Converter (Celsius to Fahrenheit)
function celsiusToFahrenheit(celsius) {
  let fahrenheit = Math.round((celsius * 9) / 5 + 32);
  displayOutput(`${celsius}°C is ${fahrenheit}°F`);
  return fahrenheit;
}
celsiusToFahrenheit(25);

// 4. Hypotenuse Calculator
function calculateHypotenuse(a, b) {
  let hypotenuse = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  displayOutput(`Triangle Sides: ${a}, ${b}`);
  displayOutput(`Hypotenuse Length: ${hypotenuse.toFixed(2)}`);
  return hypotenuse;
}
calculateHypotenuse(3, 4);

// 5. Random Score Generator for a Quiz
function generateQuizScores(numberOfStudents) {
  displayOutput(`Quiz Scores for ${numberOfStudents} students:`);
  for (let i = 1; i <= numberOfStudents; i++) {
    let score = Math.floor(Math.random() * 51) + 50; // Scores between 50-100
    displayOutput(`Student ${i}: ${score}`);
  }
}
generateQuizScores(5);

A saída de exemplo pode ser semelhante a:

Original Price: $100.00
Discount (20%): $20.00
Final Price: $80.00
Circle Radius: 5
Circle Area: 78.54 sq units
25°C is 77°F
Triangle Sides: 3, 4
Hypotenuse Length: 5.00
Quiz Scores for 5 students:
Student 1: 75
Student 2: 92
Student 3: 63
Student 4: 87
Student 5: 69

Esta demonstração mostra como os métodos do objeto Math podem ser aplicados em vários cenários práticos:

Calculando descontos
Calculando áreas geométricas
Convertendo temperaturas
Encontrando o comprimento da hipotenusa
Gerando pontuações aleatórias

Resumo

Neste laboratório, os participantes exploram as capacidades do objeto Math do JavaScript por meio de uma demonstração HTML prática. O laboratório começa configurando um arquivo HTML interativo com uma div de saída dedicada e uma função auxiliar para exibir os resultados, fornecendo um ambiente estruturado para aprender operações e métodos matemáticos.

A jornada de aprendizado abrange aspectos-chave do objeto Math, incluindo a análise de propriedades embutidas como Math.PI e Math.E, a implementação de métodos de cálculo como arredondamento, a busca por valores máximos e mínimos e a geração de números aleatórios. Ao adicionar progressivamente código à seção de script HTML, os alunos ganham experiência prática com as utilidades matemáticas do JavaScript, compreendendo como aproveitar esses métodos para várias tarefas computacionais e cenários de programação do mundo real.

Explore Métodos do Objeto Math em JavaScript