No5.関数について

関数とは?

関数とはfunction 関数名で定義されている処理ブロックのことを指します。
No1〜4まで書いてきたなかで記載している function main(){ のことです。
この中括弧 “{}” の中に処理を書くことによって上から実行されます。呼び出すときは main(); といった感じで 関数名(渡す引数)で呼び出します。
今まで作ってきたmain関数は引数がない関数ですね。引数とは渡すパラメータのことです。

関数宣言? 関数式??

関数宣言は今までやってきたようにスクリプトタグ、またはjsファイル内に下記のように宣言することです。
その後、onloadやonclickなどの属性や他の関数などから呼び出して使います。

// main関数とtest関数を作成
function main(){
  alert("hogehoge");
  test();
}
function test(){
  alert("testhoge");
}

javascriptには関数式というものがあって下記のように使えます。

// 上の例と同じものを関数式で書いてみる 
var main = function(){
  alert("hogehoge");
  test();
}
var test = function(){
  alert("testhoge");
}

関数宣言の場合は、関数宣言前でも実行できますが関数式の場合はエラーとなります。

main(); // 実行できないエラー
var main = function(){
  alert("hogehoge");
}
main(); // 実行できる!!
function main(){
  alert("hogehoge");
}

関数式より関数宣言を使っているソースのほうをよく見る気がします。
関数宣言の方がわかりやすいので、普段はとくに気にせずにこちらを使った方がいいかと思います。

無名関数?

無名関数とは上記の関数式の function(){} のことです。関数名がついてないので無名ですね。
関数式でも使いますがjavascriptのライブラリ、jqueryで使っていたりします。
オブジェクトでも使用することができます。こんなこともできるんだ〜というくらいで覚えておけばいいかと思います。

// javascriptのオブジェクトで無名関数を使う
var people = {
  "age":"28", 
  "say":function(){ 
     alert("hello"); 
  },
  "sayAge":function(str){ 
     alert(str + "は" + this.age + "才です。"); 
  }
};
people.age; // 28が取得できる
people.say(); // ポップアップで"hello"が表示される。
people.sayAge("俺"); // ポップアップで"俺は28才です。"が表示される。

使ってみよう

下記をfunctest.htmlなどの名前で保存して、実行してみましょう。
テストボタンを押すたびに1ずつ足されてブラウザに出力されています。

<html>
  <head>
    <title>variable test js</title>
    <meta charset="UTF-8">
    <script>
        var cnt = 0;

        function main(){
          cnt = cnt + 1;
          test();
        }
        function test(){
          var mainbox = document.getElementById("mainbox");
          mainbox.innerHTML = mainbox.innerHTML + cnt + "<br />" ;
        }
    </script>
  </head>
  <body>
    関数使用テスト<br />
    <input type="button" value="TEST!" onclick="main();" />
    <div id="mainbox"></div>
  </body>
</html>

プログラムの内容は、main関数を呼び出して、cntに+1。
そこからtest関数を呼び出しています。これだけ短い場合はメインにまとめていいと思いますがテスト的にこうしてます。
test関数ではgetElementByIdでidが”mainbox”のタグを取得して、そのタグにcntプラスした結果を追加しています。

関数の中の処理は長くならないようにして、同じような処理は別関数にするように書くといいかと思います 😀