JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

アラートボックスでJavaScript関数を呼び出す方法をわかりやすく解説

Web開発において、alertボックスはユーザーに簡単なメッセージや警告を表示するための基本的な手段です。このalertボックスの中で、あるいはalert表示と連動してJavaScript関数を呼び出したい場面はよくあります。

アラートボックスと関数呼び出しの基本

JavaScriptには、ブラウザ標準のダイアログを表示するための alert() メソッドが用意されています。alertボックス自体に関数を直接渡すことはできませんが、イベントハンドラから関数を呼び出し、その中でalertを表示するという流れで実現できます。

以下のコードでは、ボタンをクリックすると myFunction() が実行され、その中でalertボックスが表示され、さらに別の関数 catchedAlert() も連続して呼び出されます。

コード例

<!DOCTYPE html>
<html>
   <body>
      <script>
         function myFunction(warning) {
            alert(warning);
            catchedAlert();
         }
         function catchedAlert() {
            alert('Alert called!');
         }
      </script>
      <button onclick="myFunction('This is an alert box!')">クリックしてください！</button>
   </body>
</html>

コードの解説

  • myFunction(warning)：引数として受け取った文字列をalertボックスに表示した後、次の関数を呼び出します。
  • catchedAlert()：「Alert called!」というメッセージをalertボックスで表示するだけのシンプルな関数です。
  • onclick属性：HTMLのbutton要素に設定されており、ユーザーがボタンをクリックしたタイミングで myFunction() を引数付きで呼び出します。

動作のポイント

ボタンをクリックすると、まず「This is an alert box!（これはアラートボックスです！）」というメッセージが表示され、OKボタンを押すと続けて「Alert called!」という2つ目のアラートが表示されます。このように、関数内で別の関数を順番に呼び出すことで、複数の処理を段階的に実行できます。

補足：よりモダンな書き方

インラインのonclick属性は手軽ですが、保守性を高めたい場合は addEventListener() を使ってイベントリスナーを登録する方法が推奨されています。

document.querySelector('button').addEventListener('click', () => {
  myFunction('This is an alert box!');
});

この書き方なら、HTMLとJavaScriptを分離でき、コードの再利用性も向上します。

  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ