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 ウィンドウ又はフレームのサイズが変更したときのイベントを取得

今度こそ次回はオブジェクトに関して紹介します。

backnext

講座メインページへ