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

JavaScriptで関数を呼び出す方法をわかりやすく解説

JavaScriptでは、独自の関数（ユーザー定義関数）を作成することができます。一度定義した関数は、スクリプト内の後の任意の場所で関数名()と記述するだけで簡単に呼び出せます。

関数を呼び出すサンプルコード

以下のコードでは、「Say Hello」ボタンをクリックするとsayHello関数が実行され、画面にメッセージが表示されます。実際にブラウザで動かして、JavaScriptにおける関数の呼び出し方を確認してみましょう。

<html>
   <head>
      <script>
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
   </head>

   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>
      <p>Use different text in write method and then try...</p>
   </body>
</html>

コードのポイント

  • 関数の定義：functionキーワードを使ってsayHello関数を定義しています。関数の中ではdocument.write()メソッドによって文字列を出力しています。
  • 関数の呼び出し：ボタンのonclick属性に「sayHello()」を指定することで、ユーザーがボタンをクリックしたタイミングで関数が実行されます。

document.write()で出力するテキストを別の文字列に書き換えて試してみると、関数の動きがよりよく理解できます。また、実務ではaddEventListenerを使ったイベント登録もよく利用されるので、あわせて覚えておくと便利です。

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

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

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

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