JavaScript講座第4回
前回、「次回はオブジェクトです」と記載してありましたが、大変申し訳ないのですが、重要な説明を忘れていました。オブジェクトは次回説明し、今回は関数(function)についてです。ついでにイベントハンドラについても説明します。
関数(function)
JavaScriptで記述されたスクリプトを1つのかたまりとするためにfunctionを使います。関数には任意に名前を付けることができ、必要に応じてその関数の名前を呼び出すことによってスクリプト処理を実行する事ができます。いきなりですが例をあげます。
<html><head><title>function
sample</title>
<script>
<!--
function test ( ) { //ここで関数testを宣言しています。
alert ( "関数(function)が実行されました!"
); //関数testの実体です。
} //関数testの終了
//-->
</script>
</head>
<body>
<a href="javascript:test()">ここをクリックすると関数testが実行します。</a>
</body>
</html>
上記は完全なHTMLファイルとして作動するように記述しています。<a>タグは通常リンクを作成する為のタグですが、リンクではなく関数を呼び出すこともできるので、<a>タグを使って関数testを呼び出しています。このように必要に応じて実行するスクリプトは関数として1つのかたまりにすると扱いやすくなります。functionだけでVBAでいうfunctionとsubプロシージャの両方の役割をになうことができます。
関数(function)の構文
function 関数名 ([引数1] , [引数2] ,
・・・・・) {
処理 ;
}
例1
いろいろと説明を並べるより例をあげたほうがわかりやすいと思いますのでいろいろとfunctionの例をのせます。以下はmax関数を定義し、他の場所から呼び出しています。returnをつかって値を返しています。
<html><head><title>function
sample</title>
<script>
<!--
function max ( a , b ) { //ここで関数maxを宣言しています。
var c; //ここから関数maxの実体です。
if ( a > b ) {
c = a;
}
else {
c = b;
}
return c; //cの値を返す
} //関数maxの終了
//-->
</script>
</head>
<body>
<script>
<!--
document.write( max ( 10 , 5 ) ); //関数maxを呼び出しています。
//-->
</script>
</body>
</html>
例2
だんだん難しくなってきましたが、以下はページが読まれる(ロードされる)時(=onLoad)に関数test2を呼び出しています。引数には文字列
'<h1>functonのサンプルです。</h>' を用いています。ダブルクォーテーション中の文字列にはシングルクォーテーションを使用する事に注意して下さい。onLoadはイベントハンドラと呼ばれるものです。イベントハンドラを簡単に説明します。ユーザーがクリックしたりマウスを動かしたりキーボードを押したり離したりファイルが読み込まれたり実行されたりウィンドウが閉じたりすると、Windows内ではイベントハンドラと呼ばれるものが動いています。このイベントハンドラを取得することにより、ユーザーが行った行動をプログラムが取得できます。勿論イベントハンドラはマウスのX,Y座標も持っているわけです。実はHTMLはVBと同じくイベントドリブン型なのです。
<html><head><title>function
sample</title>
<script>
<!--
function test2 ( a ) { //ここで関数test2を宣言しています。
document.write ( a ); //関数test2の実体
} //関数test2の終了
//-->
</script>
</head>
<body onLoad="test2 ( '<h1>functonのサンプルです。</h1>'
) "> //関数test2を呼び出しています。
</body>
</html>
イベントハンドラ
上記でも説明しましたが、あるイベント(マウスクリックやページの読み込み)が発生したときにスクリプトを実行する場合にイベントハンドラを使います。例えばマウスクリックを行うとある関数(function)を実行する事ができます。たくさんありますが、あまり使わないものが大半です。
| イベントハンドラ | 説明 | 利用可能なオブジェクト |
| onAbort | 画像の読み込みがキャンセルされた時のイベントを取得するイベントハンドラ | Image |
| onBlur | フォーカスがフォームやウィンドウから離れたときのイベントを取得するイベントハンドラ | Select Text Textarea Button CheckBox FileUpload frame Password Radio Reset Submit window |
| onChange | フォームの内容に変化があり、フォーカスがフォームから離れたときのイベントを取得するイベントハンドラ | Select Text Textarea FileUpload |
| onClick | ボタンやリンクをクリックしたときのイベントを取得するイベントハンドラ。Buttonフォームやリンクをクリックしたときをイベントとして取得し設定した処理を実行します。関数の最後に”return false”とfalseを返すとリンクの参照などの通常動作を中止できる。 | Button Checkbox Link Radio Reset Submit |
| onError | ページや画像の読み込みエラーが発生したときのイベントを取得するイベントハンドラ。 | Image window |
| onFocus | フォーカスがフォームやウィンドウに与えられたときのイベントを取得するイベントハンドラ。 | Select Text Textarea Button Checkbox FileUpload frame Password Radio Reset Submit window |
| onLoad | ページや画像が読み込まれた時のイベントを取得するイベントハンドラ。ページや画像の読み込みが終了した時をイベントとして取得し設定した処理を実行します。 | window Image |
| onMouseOut | マウスが指定された領域から離れたときのイベントを取得するイベントハンドラ。 | Link Area |
| onMouseOver | マウスが指定された領域にはいったときのイベントを取得するイベントハンドラ。 | Form |
| onReset | フォームがリセットされたときのイベントを取得するイベントハンドラ。通常はResetボタンが押されたとき。 | Form |
| onSelect | フォームのテキスト領域が選択されたときのイベントを取得するイベントハンドラ。 | Text Textarea |
| onSubmit | フォームのSubmitボタンが押されたときのイベントを取得するイベントハンドラ。 | Form |
| onUnload | 別のページに移動したときのイベントを取得するイベントハンドラ。 | window |
イベントタイプ
JavaScript1.2からはイベントをオブジェクトとしてとらえるeventオブジェクトが追加されました。NetscapeNavigatorとInternrtExplorerで使用方法が異なることが多いです。あまり使うことは少ないので(JavaScriptとDHTMLでゲームを作るときは必須です)触れておく程度にしておきます。後々説明できる機会があれば説明します。
| イベント | 説明 |
| Click | マウスがクリックされたときのイベントを取得 |
| DblClick | マウスがダブルクリックされたときのイベントを取得 |
| DragDrop | ウィンドウ上にファイルやショートカットをドラッグアンドドロップしたときのイベントを取得 |
| KeyDown | キーを押したときのイベントを取得 |
| KeyPress | キーを押したままの時のイベントを取得 |
| KeyUp | キーを話したときのイベントを取得 |
| MouseDown | マウスボタンを押したときのイベントを取得 |
| MouseMove | マウスカーソルが動いたときのイベントを取得 |
| MouseOut | オブジェクトからマウスが離れたときのイベントを取得 |
| MouseOver | オブジェクトにマウスカーソルが乗ったときのイベントを取得 |
| MouseUp | マウスボタンを離したときのイベントを取得 |
| Move | ウィンドウ又はフレームが動いたときのイベントを取得 |
| Resize | ウィンドウ又はフレームのサイズが変更したときのイベントを取得 |
今度こそ次回はオブジェクトに関して紹介します。