この実験では、学生たちはHTMLとJavaScriptの実践的な演習を通じてJavaScriptの代入演算子を探求します。この実験では、学習者がHTMLファイルを作成し、基本代入演算子（=）、複合代入演算子（+=、-=）、乗算/除算代入演算子（*=、/=）を含むさまざまな代入演算子を実装する手順を案内します。
参加者は、埋め込みスクリプトタグ付きのHTML構造を設定してから、徐々にさまざまな代入演算子の技術を示します。コンソールロギングとdocument.write()メソッドを使用することで、学生たちはこれらの演算子がJavaScriptでどのように機能するかを検証し理解し、変数操作と値の代入に関する実践的な経験を得ます。
このステップでは、JavaScript代入演算子を探求するための基礎となるHTMLファイルを作成します。HTMLはJavaScriptコードを埋め込むための構造を提供し、さまざまな代入演算子の技術を示してテストすることができます。
まず、WebIDEを開き、~/projectディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、assignment-operators.htmlという新しいファイルを作成します。
ここに使用する基本的なHTML構造を示します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Assignment Operators</title>
</head>
<body>
<h1>Exploring Assignment Operators</h1>
<script>
// JavaScript code will be added here in subsequent steps
</script>
</body>
</html>重要なコンポーネントを分解してみましょう。
<!DOCTYPE html>はこれをHTML5ドキュメントとして宣言します<script>タグはJavaScriptコードを記述する場所ですファイルを作成した後、~/projectディレクトリに保存します。このHTMLファイルは、次のステップで代入演算子を学ぶための場となります。
このファイルをブラウザで開いたときの例の出力：
Exploring Assignment Operatorsこのステップでは、JavaScriptの基本代入演算子（=）について学びます。代入演算子は、変数に値を割り当てるために使用され、データを格納して操作する基本的な方法を提供します。
前のステップで作成したassignment-operators.htmlファイルを開きます。<script>タグの中に、基本代入を探求するための次のJavaScriptコードを追加します。
// Declaring and assigning variables using the = operator
let firstName = "John";
let age = 25;
let isStudent = true;
// Demonstrating variable assignment
console.log("First Name:", firstName);
console.log("Age:", age);
console.log("Is Student:", isStudent);重要な概念を分解してみましょう。
letは最新のJavaScriptで変数を宣言するために使用されます=演算子は変数に値を割り当てますconsole.log()はブラウザのコンソールに値を表示するために使用されます同じ演算子を使用して変数を再割り当てることもできます。
// Reassigning variable values
age = 26;
console.log("Updated Age:", age);
// Assigning the value of one variable to another
let originalAge = age;
console.log("Original Age:", originalAge);ブラウザのコンソールでの例の出力：
First Name: John
Age: 25
Is Student: true
Updated Age: 26
Original Age: 26このステップでは、JavaScriptの複合代入演算子+=と-=を探求します。これらの演算子は、変数に新しい値を割り当てる際に加算と減算を行う短縮表記法を提供します。
assignment-operators.htmlファイルを開き、<script>タグの中に次のJavaScriptコードを追加します。
// Initial variable declaration
let score = 100;
console.log("Initial Score:", score);
// Using += operator to add and assign
score += 50; // Equivalent to: score = score + 50
console.log("Score after +50:", score);
// Using -= operator to subtract and assign
score -= 25; // Equivalent to: score = score - 25
console.log("Score after -25:", score);
// Practicing with another variable
let quantity = 10;
console.log("Initial Quantity:", quantity);
quantity += 5; // Add 5 to quantity
console.log("Quantity after +5:", quantity);
quantity -= 3; // Subtract 3 from quantity
console.log("Quantity after -3:", quantity);複合代入演算子に関する要点：
+=は右辺の値を変数に加算し、結果を割り当てます-=は右辺の値を変数から減算し、結果を割り当てますブラウザのコンソールでの例の出力：
Initial Score: 100
Score after +50: 150
Score after -25: 125
Initial Quantity: 10
Quantity after +5: 15
Quantity after -3: 12このステップでは、JavaScriptの乗算と除算代入演算子*=と/=を探求します。これらの演算子は、変数を乗算または除算し、結果を同じ変数に割り当てる簡潔な方法を提供します。
assignment-operators.htmlファイルを開き、<script>タグの中に次のJavaScriptコードを追加します。
// Multiplication assignment operator (*=)
let price = 10;
console.log("Initial Price:", price);
price *= 3; // Equivalent to: price = price * 3
console.log("Price after *3:", price);
// Division assignment operator (/=)
let quantity = 24;
console.log("Initial Quantity:", quantity);
quantity /= 4; // Equivalent to: quantity = quantity / 4
console.log("Quantity after /4:", quantity);
// Practical example: Calculating total cost
let itemPrice = 5;
let itemCount = 7;
console.log("Item Price:", itemPrice);
console.log("Item Count:", itemCount);
let totalCost = itemPrice * itemCount;
console.log("Total Cost:", totalCost);
totalCost *= 0.9; // Apply 10% discount
console.log("Discounted Total Cost:", totalCost);乗算と除算代入演算子に関する要点：
*=は変数を右辺の値で乗算し、結果を割り当てます/=は変数を右辺の値で除算し、結果を割り当てますブラウザのコンソールでの例の出力：
Initial Price: 10
Price after *3: 30
Initial Quantity: 24
Quantity after /4: 6
Item Price: 5
Item Count: 7
Total Cost: 35
Discounted Total Cost: 31.5このステップでは、代入演算子の結果を直接Webページに表示するために document.write() をどのように使用するかを学びます。この方法は、初心者がJavaScript操作を可視化するための値を出力するための簡単な方法を提供します。
assignment-operators.html ファイルを開き、<script> タグを変更して以下のコードを含めます。
// Demonstrating assignment operators with document.write()
let initialValue = 10;
document.write("<h2>Assignment Operator Demonstration</h2>");
document.write("Initial Value: " + initialValue + "<br>");
// Basic assignment
initialValue = 20;
document.write("After Basic Assignment (=): " + initialValue + "<br>");
// Compound addition assignment
initialValue += 5;
document.write("After Addition Assignment (+=): " + initialValue + "<br>");
// Compound subtraction assignment
initialValue -= 3;
document.write("After Subtraction Assignment (-=): " + initialValue + "<br>");
// Multiplication assignment
initialValue *= 2;
document.write(
"After Multiplication Assignment (*=): " + initialValue + "<br>"
);
// Division assignment
initialValue /= 4;
document.write("After Division Assignment (/=): " + initialValue + "<br>");document.write() に関する要点：
ブラウザでの例の出力：
Assignment Operator Demonstration
Initial Value: 10
After Basic Assignment (=): 20
After Addition Assignment (+=): 25
After Subtraction Assignment (-=): 22
After Multiplication Assignment (*=): 44
After Division Assignment (/=): 11この実験では、参加者はHTMLとJavaScriptの実践的なエクササイズを通じてJavaScriptの代入演算子を探求します。この実験は、さまざまな代入演算子の技術を示すための基礎となるHTMLファイルを作成することから始まり、文字列、数値、ブール値などのさまざまなデータ型で変数を宣言および初期化するための基本代入演算子（=）から始まります。
学習の旅は、+=、-=、*=、/=などの複合代入演算子の実装を通じて進みます。これらは、算術演算を行い、変数の値を更新するための簡潔な方法を提供します。document.write()とconsole.log()を使用することで、参加者はこれらの代入演算の結果を確認し、可視化することができ、これらの演算子がJavaScriptプログラミングでどのように機能するかを実践的に理解することができます。
