****

JavaScript の世界への旅へようこそ!このブログ投稿では、JavaScript でユーザーと対話するための 3 つの重要なメソッド、alert、prompt、および confirm について説明します。これらのメソッドを使用すると、それぞれメッセージを表示し、ユーザー入力を収集し、アクションを確認できます。それぞれのメソッドを詳しく見て、どのように機能するかを見てみましょう。

1. アラート

alert メソッドは、メッセージと [OK] ボタンを含む単純なダイアログ ボックスを表示するために使用されます。このメソッドは、重要な情報や警告をユーザーに表示する場合に便利です。

構文：

alert(message);

例：

alert("Hello, World!");

説明：

• message: ダイアログ ボックスに表示するテキスト。
• alert メソッドは、ユーザーが [OK] ボタンをクリックするまでスクリプトの実行を一時停止します。

使用事例：

// Display a welcome message
alert("Welcome to our website!");

2. プロンプト

prompt メソッドは、ユーザーにテキストの入力を求めるダイアログ ボックスを表示するために使用されます。ユーザーが入力したテキストを返すか、ユーザーが入力をキャンセルした場合は null を返します。

構文：

prompt(message, default);

例：

let userName = prompt("Please enter your name:", "Guest");
console.log("Hello, "   userName   "!");

説明：

• message: ダイアログ ボックスに表示するテキスト。
• default: 入力フィールドに表示されるデフォルトのテキスト。このパラメータはオプションです。
• prompt メソッドは、ユーザーが入力したテキストを返すか、ユーザーが入力をキャンセルした場合は null を返します。

使用事例：

// Collect user input for their name
let userName = prompt("Please enter your name:", "Guest");
if (userName !== null) {
  console.log("Hello, "   userName   "!");
} else {
  console.log("No name entered.");
}

3. 確認する

confirmメソッドは、メッセージと「OK」と「キャンセル」の 2 つのボタンを含むダイアログ ボックスを表示するために使用されます。ユーザーが「OK」をクリックした場合は true を返し、ユーザーが「キャンセル」をクリックした場合は false を返します。

構文：

confirm(message);

例：

let isConfirmed = confirm("Are you sure you want to delete this item?");
if (isConfirmed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion canceled.");
}

説明：

• message: ダイアログ ボックスに表示するテキスト。
• confirm メソッドは、ユーザーが [OK] をクリックすると true を返し、ユーザーが [キャンセル] をクリックすると false を返します。

使用事例：

// Confirm an action before proceeding
let isConfirmed = confirm("Are you sure you want to delete this item?");
if (isConfirmed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion canceled.");
}

アラート、プロンプト、確認の組み合わせ

これらの方法を組み合わせて、よりインタラクティブで動的なユーザー エクスペリエンスを作成できます。以下は、3 つのメソッドをすべて一緒に使用する方法を示す例です:

例：

// Display a welcome message
alert("Welcome to our website!");

// Collect user input for their name
let userName = prompt("Please enter your name:", "Guest");
if (userName !== null) {
  console.log("Hello, "   userName   "!");

  // Confirm an action before proceeding
  let isConfirmed = confirm("Do you want to proceed?");
  if (isConfirmed) {
    console.log("Proceeding...");
  } else {
    console.log("Action canceled.");
  }
} else {
  console.log("No name entered.");
}

結論

alert、prompt、および confirm メソッドは、JavaScript でユーザーと対話するための強力なツールです。これらにより、それぞれメッセージの表示、ユーザー入力の収集、アクションの確認が可能になります。これらの方法を理解して使用することで、よりインタラクティブで動的な Web アプリケーションを作成できます。

次のブログ投稿では、JavaScript でのユーザー入力とイベントの処理について詳しく説明します。 JavaScript の世界への旅を続けていきますので、ご期待ください!