ユーザー定義関数

関数の定義方法

function 関数名(引数,引数,引数){
	...;
	...;
}

function 関数名() {
	...;
}

• ※引数は省略も可（カッコの中が空っぽでもよい）。
• ※引数は1つでもいいし複数でもよい。

ユーザー定義関数に触れてみる

まずは、ものすごく簡単なところから。

function hoge() {
	alert("ピコン。");
}

hogeという関数を作りました。
この関数の中身（処理の内容）は、『「ピコン。」というアラートをだす。』というものです。

これだけだと関数を定義しただけなので、その関数を実行してみます。

function hoge() { //関数を定義
	alert("ピコン。");
}
hoge(); //hogeを実行

関数hogeが実行されて、「ピコン。」が表示されます。

今度は「ピコン。「パコン。」「ポコン。」と表示してみます。
関数を使わずに、これを3回繰り返したい場合、

alert("ピコン。");
alert("パコン。");
alert("ポコン。");
alert("ピコン。");
alert("パコン。");
alert("ポコン。");
alert("ピコン。");
alert("パコン。");
alert("ポコン。");

となります。ちょっと...。
同じことを関数を使ってやろうとすると、

function hoge() {
	alert("ピコン。");
	alert("パコン。");
	alert("ポコン。");
}
hoge();
hoge();
hoge();

すっきり見やすく分かりやすくなった感じがします。

ちょっと応用してみる

今度はボタンを押したらアラートがでるようにしてみます。

<script type="text/javascript">
function hoge() {
	alert("ピコン。");
}
</script>
<input type="button" value="押してみそ" onclick="hoge()">

イベントハンドラ（ここでは、onclick="hoge()"の部分。ボタンがクリックされたら関数hogeを実行しなさいという命令。）をinputタグ内に記述しています。

もうちょっと進化させて、今度はイベントハンドラをオブジェクトのプロパティとして設定してみます。

<script type="text/javascript">
function hoge() {
	alert("ピコン。");
}
window.onload=init;
//全体が読み込まれた後で実行するonloadイベントハンドラ
function init(){
document.miso.onclick=hoge;
}
</script>

<input type="button" value="押してみそ" name="miso">

これだと実行されません。
本来、ボタンはformタグの中にあるものなので、

<script type="text/javascript">
function hoge() {
	alert("ピコン。");
}
window.onload=init;
function init(){
document.test.miso.onclick=hoge;
}
</script>

<form name="test">
<input type="button" value="押してみそ" name="miso">
</form>

これでボタンをおしたらアラートがでるようになりました。