在本实验中，参与者将深入探索 JavaScript 的 Math 对象，通过一个基于 HTML 的动手演示来学习其强大的方法和属性。实验将引导学习者创建一个交互式网页，展示各种数学操作，包括访问内置属性如 Math.PI 和 Math.E，实现计算方法，生成随机数，并在实际场景中应用 Math 对象的技术。
通过逐步指导，学生将构建一个嵌入 JavaScript 的 HTML 文件，使他们能够实验 Math 对象的功能。他们将学习如何使用诸如 Math.random()、Math.floor() 等方法以及其他数学工具，获得利用 JavaScript 内置数学功能解决计算问题和执行数值操作的实践经验。
在这一步中，你将创建一个 HTML 文件来演示 JavaScript 的 Math 对象方法。我们将设置一个基本的 HTML 结构，并包含一个脚本部分，以便探索和实验 Math 对象的功能。
打开 WebIDE 并导航到 ~/project 目录。创建一个名为 math-demo.html 的新文件，内容如下：
<!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>让我们分解这个 HTML 文件的关键组成部分：
id="output" 的 <div>，用于显示 JavaScript 的结果。<script> 部分，我们将在其中编写 Math 对象的演示代码。displayOutput() 辅助函数，以便轻松在页面上显示结果。当你在浏览器中打开此文件时，示例输出如下：
Math Object ExplorationdisplayOutput() 函数将帮助我们在接下来的步骤中轻松显示 Math 对象方法的结果。此设置为探索 JavaScript 的 Math 对象功能提供了一个干净且交互式的方式。
在这一步中，你将探索 JavaScript Math 对象的内置属性。打开上一步中的 math-demo.html 文件，并修改脚本部分以演示这些属性。
将以下代码添加到现有的 <script> 部分：
// 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)}`
);JavaScript 中的 Math 对象提供了几个重要的数学常量：
Math.PI：表示数学常数 π（pi），约等于 3.14159Math.E：表示欧拉数（e），约等于 2.71828当你在浏览器中打开 HTML 文件时，会看到类似以下的输出：
Math.PI: 3.141592653589793
Math.E: 2.718281828459045
Euler's number (e): 2.718281828459045
Pi value: 3.141592653589793
Circle Circumference (radius 5): 31.42这些属性在数学计算中非常有用，尤其是在涉及圆、指数函数和其他数学计算时。
在这一步中，你将探索用于执行数学计算的各种 Math 对象方法。打开 math-demo.html 文件，并添加以下代码以演示不同的 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}`);这段代码演示了几个关键的 Math 对象方法：
Math.abs()：返回一个数字的绝对值Math.floor()：向下舍入到最接近的整数Math.ceil()：向上舍入到最接近的整数Math.round()：四舍五入到最接近的整数Math.pow()：将一个数字提升到指定的幂Math.max()：返回一组数字中的最大值Math.min()：返回一组数字中的最小值Math.sqrt()：计算一个数字的平方根示例输出：
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在这一步中，你将探索如何使用 Math.random() 生成随机数，并创建更高级的随机数生成技术。打开 math-demo.html 文件，并添加以下代码以演示随机数生成：
// 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()}`);示例输出可能如下：
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)关于 Math.random() 的关键点：
在这一步中，你将探索 Math 对象方法在实际场景中的应用。打开 math-demo.html 文件，并添加以下代码以演示实际用途：
// 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);示例输出可能如下：
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这个演示展示了 Math 对象方法如何在各种实际场景中应用：
在本实验中，参与者通过动手实践 HTML 演示探索了 JavaScript Math 对象的功能。实验从一个交互式 HTML 文件开始，该文件包含一个专用的输出 div 和一个用于显示结果的辅助函数，为学习数学操作和方法提供了一个结构化的环境。
学习过程涵盖了 Math 对象的关键方面，包括检查内置属性（如 Math.PI 和 Math.E）、实现计算方法（如四舍五入、查找最大值和最小值）以及生成随机数。通过逐步向 HTML 脚本部分添加代码，学习者获得了使用 JavaScript 数学工具的实际经验，理解了如何利用这些方法来完成各种计算任务和实际编程场景。
