関数の使い方

一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます。
手間のかかる処理を関数として定義しておけば、必要なときに必要なだけ何度も呼び出すことができます。

関数は、function文を使って定義する。
定義した関数を実行するときは、関数名を記述するだけで良い。

関数の定義

function 関数名 () {
　　処理;
}

定義した関数の使い方

関数名 ();

実際に関数を使ってみましょう

<script>
  //関数の定義
  function hello() {
    document.write('こんにちは');
  }
  hello();  //関数の呼び出し
</script>

関数の定義は記述順序に関係なく優先的に行われるので、関数の呼び出しが先に記述されてもいても問題なく動作します。

<script>
 hello();  //関数の呼び出し

  //関数の定義
  function hello() {
    document.write('こんにちは');
  }
</script>

前回作った「ランダムで画像を表示させる」に関数を使用してみましょう。
また、今までボタンは「inputタグ」を使用していましたが、今回は「buttonタグ」を使ってみましょう。

「inputタグ」と「buttonタグ」は使い方はほとんど一緒ですが、「inputタグ」が空要素なのに対して、「buttonタグ」は閉じタグとセットなので、「buttonタグ」を画像にする事も可能です。
ただ、「buttonタグ」を画像にする場合には注意が必要です。「buttonタグ」にデフォルトで付いているスタイルをリセットしないとブラウザーによっては思い通りの見た目にならないので、必ずリセットしましょう。

「buttonタグ」にリセットしない場合

「buttonタグ」に必要なリセット

button {
margin: 0;
padding: 0;
border: none;
}
button:focus {
outline: none;
}