はじめに
この実験では、参加者は JavaScript の基本的な算術演算を探索し、さまざまな数学演算子を使用して数値を操作する方法を学びます。この実験では、HTML 環境のセットアップ、加算、減算、乗算、除算などの基本的な算術演算の実装、および剰余演算子やインクリメント/デクリメント演算子などのより高度な概念の理解まで、包括的な学習を提供します。
参加者は、埋め込み JavaScript セクションを持つ HTML ファイルを作成することから始め、次にさまざまな算術技術を練習することでスキルを段階的に向上させます。実践的なコーディング演習を通じて、学習者は数学的な計算を実行する実践的な経験を積み、演算子の優先順位を理解し、JavaScript プログラミングに不可欠な前置/後置のインクリメント/デクリメント演算を探索します。
JavaScript 算術演算用の HTML ファイルを設定する
このステップでは、JavaScript の算術演算を実行するための基礎となる基本的な HTML ファイルを作成します。シンプルな HTML 構造をセットアップし、基本的な算術機能を示すために埋め込み JavaScript セクションを含めます。
まず、WebIDE を開き、~/project ディレクトリに移動します。ファイルエクスプローラーで右クリックし、「New File」を選択して arithmetic.html という新しいファイルを作成します。
次の HTML コードを arithmetic.html ファイルにコピーして貼り付けます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Arithmetic Operations</title>
</head>
<body>
<h1>JavaScript Arithmetic Operations</h1>
<script>
// このセクションに JavaScript コードを追加します
console.log("HTML file is ready for arithmetic operations!");
</script>
</body>
</html>
この HTML ファイルの主要なコンポーネントを分解してみましょう。
<!DOCTYPE html>はこれが HTML5 ドキュメントであることを宣言します<head>セクションには、ドキュメントに関するメタデータが含まれています<body>には、表示されるコンテンツが含まれています<script>タグは、JavaScript コードを記述する場所です
ファイルが正しく作成されたことを確認するには、ブラウザの開発者コンソールでファイルを開くことができます。最初の console.log() は、ファイルが適切にセットアップされていることを確認するのに役立ちます。
基本的な算術演算子 (+, -, *, /) を実装する
このステップでは、JavaScript で基本的な算術演算を行う方法を、基本的な数学演算子である加算 (+)、減算 (-)、乗算 (*)、除算 (/) を使用して学びます。
前のステップで作成した arithmetic.html ファイルを開き、<script> セクションを次のコードを含むように変更します。
<script>
// Addition Operator (+)
let sum = 10 + 5;
console.log("Addition: 10 + 5 =", sum);
// Subtraction Operator (-)
let difference = 20 - 7;
console.log("Subtraction: 20 - 7 =", difference);
// Multiplication Operator (*)
let product = 6 * 4;
console.log("Multiplication: 6 * 4 =", product);
// Division Operator (/)
let quotient = 25 / 5;
console.log("Division: 25 / 5 =", quotient);
</script>
この HTML ファイルをウェブブラウザで開き、ブラウザの開発者コンソールを確認すると、次のような出力例が表示されます。
Addition: 10 + 5 = 15
Subtraction: 20 - 7 = 13
Multiplication: 6 * 4 = 24
Division: 25 / 5 = 5
理解すべき要点：
+演算子は 2 つの数値を加算します-演算子は左のオペランドから右のオペランドを減算します*演算子は 2 つの数値を乗算します/演算子は左のオペランドを右のオペランドで除算します
また、変数を使って演算を行ったり、整数や浮動小数点数などの異なる種類の数値を混在させて演算を行うこともできます。
剰余演算子とインクリメント/デクリメント演算子を探索する
このステップでは、JavaScript の 2 つの重要な算術演算子、剰余演算子 (%) とインクリメント/デクリメント演算子 (++ と --) について学びます。
arithmetic.html ファイルを開き、<script> セクションを次のコードで更新します。
<script>
// Modulo Operator (%)
// Returns the remainder of a division
let remainder = 17 % 5;
console.log("Modulo: 17 % 5 =", remainder);
// Increment Operator (++)
let x = 10;
x++; // Increases x by 1
console.log("Increment: x++ =", x);
// Decrement Operator (--)
let y = 20;
y--; // Decreases y by 1
console.log("Decrement: y-- =", y);
// More modulo examples
console.log("Even/Odd Check: 15 % 2 =", 15 % 2);
console.log("Even/Odd Check: 16 % 2 =", 16 % 2);
</script>
この HTML ファイルをウェブブラウザで開き、開発者コンソールを確認すると、次のような出力例が表示されます。
Modulo: 17 % 5 = 2
Increment: x++ = 11
Decrement: y-- = 19
Even/Odd Check: 15 % 2 = 1
Even/Odd Check: 16 % 2 = 0
理解すべき要点：
- 剰余演算子
%は除算後の余りを返します - 剰余演算子を使って数値が偶数か奇数かをチェックできます
- インクリメント演算子
++は変数の値を 1 増やします - デクリメント演算子
--は変数の値を 1 減らします
剰余演算子は次の用途に特に役立ちます：
- 偶数/奇数のチェック
- 数値の範囲を循環する
- パターンや分布を作成する
前置と後置のインクリメント/デクリメントを理解する
このステップでは、JavaScript における前置と後置のインクリメント/デクリメント演算子の違いを学びます。これらの演算子は似ているように見えますが、式の中で使用されるときの振る舞いは異なります。
arithmetic.html ファイルを開き、<script> セクションを次のコードで更新します。
<script>
// Postfix Increment (x++)
let a = 5;
let b = a++;
console.log("Postfix Increment:");
console.log("a =", a); // a is incremented after the value is assigned
console.log("b =", b); // b gets the original value of a
// Prefix Increment (++x)
let x = 5;
let y = ++x;
console.log("\nPrefix Increment:");
console.log("x =", x); // x is incremented before the value is assigned
console.log("y =", y); // y gets the incremented value of x
// Similar concept applies to decrement operators
let p = 10;
let q = p--;
console.log("\nPostfix Decrement:");
console.log("p =", p); // p is decremented after the value is assigned
console.log("q =", q); // q gets the original value of p
let m = 10;
let n = --m;
console.log("\nPrefix Decrement:");
console.log("m =", m); // m is decremented before the value is assigned
console.log("n =", n); // n gets the decremented value of m
</script>
この HTML ファイルをウェブブラウザで開き、開発者コンソールを確認すると、次のような出力例が表示されます。
Postfix Increment:
a = 6
b = 5
Prefix Increment:
x = 6
y = 6
Postfix Decrement:
p = 9
q = 10
Prefix Decrement:
m = 9
n = 9
理解すべき要点：
- 後置
x++: 元の値を返してからインクリメントします - 前置
++x: まずインクリメントしてから新しい値を返します - 同じ原則がデクリメント演算子
x--と--xにも適用されます - この違いは、演算子が式や代入文の中で使用されるときに重要になります
算術演算の組み合わせを練習する
このステップでは、複数の算術演算を組み合わせて、より複雑な計算を行う方法を学びます。演算子を組み合わせるさまざまな方法を探索し、JavaScript が演算の順序をどのように扱うかを示します。
arithmetic.html ファイルを開き、<script> セクションを次のコードで更新します。
<script>
// Combining multiple arithmetic operations
let result1 = 10 + 5 * 2;
console.log("Result 1 (10 + 5 * 2):", result1);
// Using parentheses to change order of operations
let result2 = (10 + 5) * 2;
console.log("Result 2 ((10 + 5) * 2):", result2);
// Complex calculation with multiple operators
let x = 15;
let y = 7;
let complexCalc = (x % 4) + y * 2 - x++ / 3;
console.log("Complex Calculation:", complexCalc);
// Combining increment/decrement with other operations
let a = 5;
let b = 3;
let mixedCalc = ++a + b-- * 2;
console.log("Mixed Calculation (++a + b-- * 2):", mixedCalc);
console.log("a after calculation:", a);
console.log("b after calculation:", b);
// Practical example: Calculating average
let score1 = 85;
let score2 = 92;
let score3 = 78;
let averageScore = (score1 + score2 + score3) / 3;
console.log("Average Score:", averageScore);
</script>
この HTML ファイルをウェブブラウザで開き、開発者コンソールを確認すると、次のような出力例が表示されます。
Result 1 (10 + 5 * 2): 20
Result 2 ((10 + 5) * 2): 30
Complex Calculation: 9
Mixed Calculation (++a + b-- * 2): 11
a after calculation: 6
b after calculation: 2
Average Score: 85
理解すべき要点：
- JavaScript は標準的な数学の演算順序 (PEMDAS) に従います
- 括弧を使ってデフォルトの演算順序を変更できます
- 単一の式の中で異なる種類の算術演算子を組み合わせることができます
- インクリメントとデクリメント演算子は、より大きな計算の中で使用できます
- 演算子の順序と配置には常に注意してください
まとめ
この実験では、参加者は JavaScript の算術演算用の基本的な HTML ファイルを設定し、基本的な数学計算を探索する方法を学びました。この実験では、学習者に対して、JavaScript セクションを埋め込んだ HTML ドキュメントを作成する手順を案内し、加算 (+)、減算 (-)、乗算 (*)、除算 (/) などの演算子を使用した基本的な算術技術の練習を可能にしました。
学習の過程は、基本的な HTML 構造の構築から始まり、剰余演算子、インクリメント演算子、デクリメント演算子の探索を含むさまざまな算術演算の実装まで進みました。参加者は、さまざまな演算子のバリエーションを実際に操作することで、算術演算を組み合わせ、JavaScript で数値を効果的に操作する方法を理解しました。
