関数の使い方 - webサイト制作の勉強｜2022年5月クラス用ブログ

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

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

関数の定義

function 関数名 () {
　　処理;
}

定義した関数の使い方

関数名 ();

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

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

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

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

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

「buttonタグ」を使ってみましょう。

<body>
<button onClick="time();">ボタン</button>
<script>
var date = new Date();

//関数の定義
function time() {
 document.write(date);
}
</script>
</body>

ローカル変数とグローバル変数

ローカル変数とは関数の中でのみ使用出来る変数で、グローバル変数とはjavascript全体で使える変数です。

関数の中で宣言した場合はローカル変数
関数の外で宣言した場合はグローバル変数

になります。

一見、グローバル変数の方がどこでも変数を呼び出せるので便利に感じますが、他のプログラムとバッティングしてしまう恐れがあります。最近ではこういった「グローバル汚染」が起こらないように有効範囲の狭い「let」を使う事が推奨されています。

DOMでおみくじを作る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>おみくじを作る</title>
</head>
<body>
<button onclick="omikuji()">おみくじを引く</button>
<p><img src="img/omijikuji.png" alt="" id="photo"></p>

<script>
function omikuji(){
var kuji = new Array(4);
kuji[0] = 'daikichi.png';
kuji[1] = 'chuukichi.png';
kuji[2] = 'kichi.png';
kuji[3] = 'daikyou.png';
console.log(kuji[3]);

//0~3までが出るMath.randomの設定
var i = Math.floor(Math.random()*4);
console.log(i);

//#photoのsrcをdomで書き換える
document.getElementById('photo').src = 'img/'+kuji[i];
}
</script>

</body>
</html>