この実験では、参加者は JavaScript の Math オブジェクトに深く突き入り、HTML ベースのハンズオンなデモを通じてその強力なメソッドとプロパティを探索します。この実験では、Math.PI や Math.E などの組み込みプロパティにアクセスし、計算方法を実装し、乱数を生成し、実際のシナリオで Math オブジェクトのテクニックを適用するなど、様々な数学的演算を展示するインタラクティブな Web ページを作成することで学習者を案内します。
段階的なアプローチに従って、学生は Math オブジェクトの機能を試すことができる埋め込み JavaScript を持つ HTML ファイルを構築します。彼らは Math.random()、Math.floor() などのメソッドをどのように使用するかを学び、計算問題の解決や数値操作を行うために JavaScript の組み込み数学機能を活用する実際の経験を得ます。
このステップでは、JavaScript の Math オブジェクトのメソッドをデモするための HTML ファイルを作成します。Math オブジェクトの機能を探索して実験するための script セクション付きの基本的な HTML 構造を設定します。
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>
// 次のステップで Math オブジェクトのデモをここに追加します
const outputDiv = document.getElementById("output");
function displayOutput(message) {
outputDiv.innerHTML += `<p>${message}</p>`;
}
</script>
</body>
</html>この HTML ファイルの主要なコンポーネントを分解してみましょう。
id="output"の<div>を追加しました<script>セクションを含めましたdisplayOutput()ヘルパー関数を作成しましたこのファイルをブラウザで開いたときの例の出力：
Math Object ExplorationdisplayOutput()関数は、次のステップで Math オブジェクトのメソッドの結果を簡単に表示するのに役立ちます。このセットアップは、JavaScript の Math オブジェクトの機能を探索するためのクリーンでインタラクティブな方法を提供します。
このステップでは、JavaScript の Math オブジェクトの組み込みプロパティを探索します。前のステップのmath-demo.htmlファイルを開き、これらのプロパティをデモするために script セクションを変更します。
既存の<script>セクションに次のコードを追加します。
// Math オブジェクトのプロパティを探索する
displayOutput(`Math.PI: ${Math.PI}`);
displayOutput(`Math.E: ${Math.E}`);
displayOutput(`オイラー数 (e): ${Math.E}`);
displayOutput(`円周率の値：${Math.PI}`);
// 単純な計算でこれらのプロパティの使用を示す
let circleRadius = 5;
let circleCircumference = 2 * Math.PI * circleRadius;
displayOutput(
`円の周長 (半径 ${circleRadius}): ${circleCircumference.toFixed(2)}`
);JavaScript の Math オブジェクトはいくつかの重要な数学定数を提供します。
Math.PI: 数学定数π（パイ）を表し、約 3.14159Math.E: オイラー数（e）を表し、約 2.71828HTML ファイルをブラウザで開くと、次のような出力が表示されます。
Math.PI: 3.141592653589793
Math.E: 2.718281828459045
オイラー数 (e): 2.718281828459045
円周率の値: 3.141592653589793
円の周長 (半径5): 31.42これらのプロパティは、特に円、指数関数、その他の数学的計算に関係する数学的計算に役立ちます。
このステップでは、数学的計算を行うための様々な Math オブジェクトのメソッドを探索します。math-demo.htmlファイルを開き、次のコードを追加して異なる Math メソッドをデモします。
// Math 計算メソッドのデモ
let number = -7.5;
let positiveNumber = Math.abs(number);
displayOutput(`${number}の絶対値：${positiveNumber}`);
let decimalNumber = 4.7;
let roundedDown = Math.floor(decimalNumber);
let roundedUp = Math.ceil(decimalNumber);
let rounded = Math.round(decimalNumber);
displayOutput(`${decimalNumber}の切り捨て：${roundedDown}`);
displayOutput(`${decimalNumber}の切り上げ：${roundedUp}`);
displayOutput(`${decimalNumber}の四捨五入：${rounded}`);
let baseNumber = 2;
let exponent = 3;
let powerResult = Math.pow(baseNumber, exponent);
displayOutput(`${baseNumber}を${exponent}乗した結果：${powerResult}`);
let largestNumber = Math.max(10, 5, 8, 12, 3);
let smallestNumber = Math.min(10, 5, 8, 12, 3);
displayOutput(`最大の数：${largestNumber}`);
displayOutput(`最小の数：${smallestNumber}`);
let squareRoot = Math.sqrt(16);
displayOutput(`16 の平方根：${squareRoot}`);このコードはいくつかの重要な Math オブジェクトのメソッドを示しています。
Math.abs(): 数値の絶対値を返しますMath.floor(): 最も近い整数に切り捨てますMath.ceil(): 最も近い整数に切り上げますMath.round(): 最も近い整数に四捨五入しますMath.pow(): 数値を指定された累乗にするMath.max(): リスト内の最大の数値を返しますMath.min(): リスト内の最小の数値を返しますMath.sqrt(): 数値の平方根を計算します例の出力：
-7.5の絶対値: 7.5
4.7の切り捨て: 4
4.7の切り上げ: 5
4.7の四捨五入: 5
2を3乗した結果: 8
最大の数: 12
最小の数: 3
16の平方根: 4このステップでは、Math.random()を使って乱数を生成する方法を探索し、より高度な乱数生成技術を作成します。math-demo.htmlファイルを開き、乱数生成をデモするために次のコードを追加します。
// 乱数生成のデモ
// 基本的な乱数 (0 以上 1 未満)
let basicRandom = Math.random();
displayOutput(`基本的な乱数：${basicRandom}`);
// 特定の範囲内の乱数を生成する
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 1 から 10 までの乱数
let randomInt = getRandomNumber(1, 10);
displayOutput(`乱数 (1-10): ${randomInt}`);
// 複数の乱数を生成する
displayOutput("5 つの乱数 (1-100):");
for (let i = 0; i < 5; i++) {
let randomNumber = getRandomNumber(1, 100);
displayOutput(randomNumber);
}
// コイントスをシミュレートする
function coinFlip() {
return Math.random() < 0.5 ? "表" : "裏";
}
displayOutput(`コイントスの結果：${coinFlip()}`);
// ランダムな色を生成する
function getRandomColor() {
let r = getRandomNumber(0, 255);
let g = getRandomNumber(0, 255);
let b = getRandomNumber(0, 255);
return `rgb(${r}, ${g}, ${b})`;
}
displayOutput(`ランダムな色：${getRandomColor()}`);例の出力は次のようになるかもしれません。
基本的な乱数: 0.7234567890123456
乱数 (1-10): 7
5つの乱数 (1-100):
42
15
83
61
29
コイントスの結果: 表
ランダムな色: rgb(134, 45, 211)Math.random()に関するポイント：
このステップでは、Math オブジェクトのメソッドが現実世界のシナリオでどのように実際に使われるかを探索します。math-demo.htmlファイルを開き、実際の使い方をデモするために次のコードを追加します。
// Math オブジェクトのメソッドを使った実際のシナリオ
// 1. 割引価格を計算する
function calculateDiscount(originalPrice, discountPercentage) {
let discountAmount = originalPrice * (discountPercentage / 100);
let finalPrice = originalPrice - discountAmount;
displayOutput(`元の価格：$${originalPrice.toFixed(2)}`);
displayOutput(`割引 (${discountPercentage}%): $${discountAmount.toFixed(2)}`);
displayOutput(`最終価格：$${finalPrice.toFixed(2)}`);
return finalPrice;
}
calculateDiscount(100, 20);
// 2. 円の面積を計算する
function calculateCircleArea(radius) {
let area = Math.PI * Math.pow(radius, 2);
displayOutput(`円の半径：${radius}`);
displayOutput(`円の面積：${area.toFixed(2)} 平方単位`);
return area;
}
calculateCircleArea(5);
// 3. 温度変換 (摂氏から華氏)
function celsiusToFahrenheit(celsius) {
let fahrenheit = Math.round((celsius * 9) / 5 + 32);
displayOutput(`${celsius}°C は${fahrenheit}°F`);
return fahrenheit;
}
celsiusToFahrenheit(25);
// 4. 斜辺を計算する
function calculateHypotenuse(a, b) {
let hypotenuse = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
displayOutput(`三角形の辺：${a}, ${b}`);
displayOutput(`斜辺の長さ：${hypotenuse.toFixed(2)}`);
return hypotenuse;
}
calculateHypotenuse(3, 4);
// 5. 小テストのためのランダムな点数を生成する
function generateQuizScores(numberOfStudents) {
displayOutput(`${numberOfStudents}人の学生の小テストの点数:`);
for (let i = 1; i <= numberOfStudents; i++) {
let score = Math.floor(Math.random() * 51) + 50; // 50-100 の間の点数
displayOutput(`学生${i}: ${score}`);
}
}
generateQuizScores(5);例の出力は次のようになるかもしれません。
元の価格: $100.00
割引 (20%): $20.00
最終価格: $80.00
円の半径: 5
円の面積: 78.54 平方単位
25°Cは77°F
三角形の辺: 3, 4
斜辺の長さ: 5.00
5人の学生の小テストの点数:
学生1: 75
学生2: 92
学生3: 63
学生4: 87
学生5: 69このデモは、Math オブジェクトのメソッドがさまざまな実際のシナリオでどのように適用できるかを示しています。
この実験では、参加者は HTML を使ったハンズオンなデモを通じて JavaScript の Math オブジェクトの機能を探索します。この実験は、結果を表示するための専用の出力 div とヘルパー関数を備えた対話型 HTML ファイルをセットアップすることから始まり、数学的演算とメソッドの学習のための構造化された環境を提供します。
学習の旅は、Math オブジェクトの重要な側面を網羅しており、Math.PI や Math.E などの組み込みプロパティの調査、丸めなどの計算方法の実装、最大値と最小値の検索、および乱数の生成などが含まれます。HTML の script セクションに順次コードを追加することで、学習者は JavaScript の数学的ユーティリティに関する実践的な経験を得て、さまざまな計算タスクや現実世界のプログラミングシナリオでこれらのメソッドをどのように活用するかを理解するようになります。
