ユーザーがマウスでテキストボックスをクリックした時に背景色を「黄色」にして、テキストボックスから出た時に「白色」に戻すプログラムを考えてみます。
それでは前回までに作った計算機のプログラムを使って改良してみましょう。
【1】テキストエディタで以下のように入力し、ファイル名は「sample008.html」で適当な場所に保存してください。コピーして貼り付けてもかまいません。
sample008.html
<html> <head> <script type="text/javascript" src="sample008.js"></script> <title>sample008</title> </head> <body> <form name="form1"> <input type="text" name="txtA" onblur="Blur(this);" onfocus="Focus(this);"> <select name="selOpe" size=1> <option value="1">＋</option> <option value="2">－</option> <option value="3">×</option> <option value="4">÷</option> <option value="5">％</option> </select> <input type="text" name="txtB" onblur="Blur(this);" onfocus="Focus(this);"> = <input type="text" name="txtC" onblur="Blur(this);" onfocus="Focus(this);"> <br> <input type="button" name="cmdCalc" value="計算" onclick="Calc();"> <input type="reset" value="クリア"> </form> </body> </html> |
【2】テキストエディタで以下のように入力し、ファイル名は「sample008.js」で上のhtmlと同じ場所に保存してください。コピーして貼り付けてもかまいません。
sample008.js
function Calc() { //変数の宣言 var a; var b; var c; var ope; //withを使って簡潔に書く with (document.form1) { a = parseInt(txtA.value); b = parseInt(txtB.value); ope = parseInt(selOpe.value); } //セレクトボックスによって処理を変える switch (ope) { case 1: c = a + b; break; case 2: c = a - b; break; case 3: c = a * b; break; case 4: c = a / b; break; case 5: c = a % b; break; default: break; } //計算結果を表示 document.form1.txtC.value = c; } function Focus(obj){ obj.style.backgroundColor = "#ffff00"; } function Blur(obj){ obj.style.backgroundColor = "#ffffff"; } |
【3】保存したら sample008.html をダブルクリックしてWebブラウザで開きます。
★sample008.htmlとsample008.jsは必ず同じフォルダ内に置いてください。
【4】マウスでテキストボックスをクリックした時、テキストボックスから出た時に背景色が変化することを確認してください。
【解説】
ユーザーの動作を感知し、JavaScript を実行するイベントハンドラはhtmlタグの中に書くことになっていますので、html内でJavaScript を実行したい部分に以下のように書きます。
<input type="text" name="txtA" onblur="Blur(this);" onfocus="Focus(this);">
イベントハンドラにはいろんな種類がありhtmlのタグによっても使用可能なものが異なってきます。今回は onblur と onfocus の2つを使います。onblur はフォーカスを失った時、onfocus はフォーカスを取得した時を感知します。
Blur(this); や Focus(this) はJavaScriptの関数名です。()カッコの中のthisはイベントが起こったオブジェクト（今回は各テキストボックス）を指します。()カッコの中に書かれたものを引数といい「,」カンマで区切れば複数指定することができます。
マウスでクリックしたりといったイベントが起こると、指定されたJavaScriptの関数が呼び出されます。
JavaScript側には各関数を書いています。関数の単位は以下のようになります。
function 関数名(){
}
functionで始まり関数名を書きます。関数名はルールに従えば（使えない名前を除けば）自由に決めることができます。今回はわかりやすいようにイベントハンドラと同じ関数名にしました。
呼び出し元で引数を指定している場合は、()カッコの中に引数と同じ数の変数を用意しておきます。
function Focus(obj){
obj.style.backgroundColor = "#ffff00";
}
上記ではobjという変数を使っていますが、名前は自由に決められます。今回は呼び出し元の引数はthisを指定していますので、objはthisを指します。thisとはイベントが起こったテキストボックスのことです。
つまり、
obj.style.backgroundColor = "#ffff00";
はイベントが起こったテキストボックスの背景色を黄色に変えなさいということになります。白色に変わるのも同じ仕組みです。
今回は覚えなくてもかまいませんが、ついでに説明すると変数objの有効範囲はこの関数の中だけです。すべての関数で共通して使いたい変数は var a; 関数の外で宣言する必要があります。宣言した場所によって変数には有効範囲があるということになります。
