Explorer les méthodes de l'objet Math en JavaScript

Introduction

Dans ce laboratoire, les participants plongeront profondément dans l'objet Math de JavaScript, en explorant ses puissants méthodes et propriétés grâce à une démonstration pratique basée sur HTML. Le laboratoire guide les apprenants dans la création d'une page web interactive qui présente diverses opérations mathématiques, y compris l'accès aux propriétés intégrées telles que Math.PI et Math.E, la mise en œuvre de méthodes de calcul, la génération de nombres aléatoires et l'application des techniques de l'objet Math dans des scénarios pratiques.

En suivant une approche étape par étape, les étudiants construiront un fichier HTML avec JavaScript intégré qui leur permettra d'expérimenter les fonctionnalités de l'objet Math. Ils apprendront à utiliser des méthodes telles que Math.random(), Math.floor() et autres utilitaires mathématiques, acquérant une expérience pratique dans l'utilisation des capacités mathématiques intégrées de JavaScript pour résoudre des problèmes de calcul et effectuer des manipulations numériques.

Configurer le fichier HTML pour la démonstration de l'objet Math

Dans cette étape, vous allez créer un fichier HTML pour démontrer les méthodes de l'objet Math de JavaScript. Nous allons configurer une structure HTML de base avec une section de script qui nous permettra d'explorer et d'expérimenter les fonctionnalités de l'objet Math.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé math-demo.html avec le contenu suivant :

<!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>
      // Nous ajouterons nos démonstrations de l'objet Math ici dans les étapes suivantes
      const outputDiv = document.getElementById("output");

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

Analysons les composants clés de ce fichier HTML :

Nous avons créé une structure de document HTML5 de base
Ajouté un <div> avec id="output" pour afficher les résultats de notre JavaScript
Inclus une section <script> où nous écrirons nos démonstrations de l'objet Math
Créé une fonction d'aide displayOutput() pour afficher facilement les résultats sur la page

Exemple de sortie lorsque vous ouvrez ce fichier dans un navigateur :

Math Object Exploration

La fonction displayOutput() nous aidera à afficher facilement les résultats des méthodes de notre objet Math dans les étapes suivantes. Cette configuration fournit un moyen propre et interactif d'explorer les capacités de l'objet Math de JavaScript.

Utiliser les propriétés de l'objet Math

Dans cette étape, vous allez explorer les propriétés intégrées de l'objet Math de JavaScript. Ouvrez le fichier math-demo.html de l'étape précédente et modifiez la section de script pour démontrer ces propriétés.

Ajoutez le code suivant à votre section <script> existante :

// 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
  )}`
);

L'objet Math de JavaScript fournit plusieurs constantes mathématiques importantes :

Math.PI : Représente la constante mathématique π (pi), environ 3,14159
Math.E : Représente le nombre d'Euler (e), environ 2,71828

Lorsque vous ouvrez le fichier HTML dans un navigateur, vous verrez une sortie similaire à celle-ci :

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

Ces propriétés sont utiles pour les calculs mathématiques, en particulier ceux impliquant des cercles, des fonctions exponentielles et d'autres calculs mathématiques.

Implémenter les méthodes de l'objet Math pour les calculs

Dans cette étape, vous allez explorer diverses méthodes de l'objet Math pour effectuer des calculs mathématiques. Ouvrez le fichier math-demo.html et ajoutez le code suivant pour démontrer différentes méthodes 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}`);

Ce code démontre plusieurs méthodes clés de l'objet Math :

Math.abs() : Retourne la valeur absolue d'un nombre
Math.floor() : Arrondit vers le bas au plus proche entier
Math.ceil() : Arrondit vers le haut au plus proche entier
Math.round() : Arrondit au plus proche entier
Math.pow() : Éleve un nombre à une puissance spécifiée
Math.max() : Retourne le plus grand nombre d'une liste
Math.min() : Retourne le plus petit nombre d'une liste
Math.sqrt() : Calcule la racine carrée d'un nombre

Exemple de sortie :

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

Générer des nombres aléatoires avec Math.random()

Dans cette étape, vous allez explorer la manière de générer des nombres aléatoires à l'aide de Math.random() et de créer des techniques de génération de nombres aléatoires plus avancées. Ouvrez le fichier math-demo.html et ajoutez le code suivant pour démontrer la génération de nombres aléatoires :

// 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()}`);

La sortie exemple pourrait ressembler à ceci :

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)

Points clés sur Math.random() :

Retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclus)
Peut être mis à l'échelle et manipulé pour générer des nombres dans des plages spécifiques
Utile pour les jeux, les simulations et les sélections aléatoires

Appliquer les méthodes de l'objet Math dans des scénarios pratiques

Dans cette étape, vous allez explorer les applications pratiques des méthodes de l'objet Math dans des scénarios du monde réel. Ouvrez le fichier math-demo.html et ajoutez le code suivant pour démontrer les utilisations pratiques :

// 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);

La sortie exemple pourrait ressembler à ceci :

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

Cette démonstration montre comment les méthodes de l'objet Math peuvent être appliquées dans divers scénarios pratiques :

Calculer des remises
Calculer des aires géométriques
Convertir des températures
Trouver la longueur de l'hypoténuse
Générer des scores aléatoires

Résumé

Dans ce laboratoire, les participants explorent les capacités de l'objet Math de JavaScript grâce à une démonstration HTML pratique. Le laboratoire commence par la configuration d'un fichier HTML interactif avec un div de sortie dédié et une fonction d'aide pour afficher les résultats, offrant un environnement structuré pour apprendre les opérations et les méthodes mathématiques.

Le parcours d'apprentissage couvre les aspects clés de l'objet Math, notamment l'examen des propriétés intégrées telles que Math.PI et Math.E, la mise en œuvre de méthodes de calcul telles que l'arrondi, la recherche des valeurs maximales et minimales, et la génération de nombres aléatoires. En ajoutant progressivement du code à la section de script HTML, les apprenants acquièrent une expérience pratique des utilitaires mathématiques de JavaScript, comprenant comment exploiter ces méthodes pour diverses tâches de calcul et scénarios de programmation du monde réel.