JavaScriptをHTML内で使用する方法は以下の4つの方法があります。
<SCRIPT> JavaScript命令および関数... </SCRIPT>
オプションとして言語を指定することもできます。現在の所指定できる言語はJavaScriptとLiveScriptおよびSoundScriptのみです。VBS(VisualBasicScript)は動作しません。大文字小文字は関係ありません。またJavaScript1.1と記述した場合Netscape 3.0仕様、JavaScript1.2と記述した場合Netscape 4.0仕様のJavaScriptと判断されます。
<SCRIPT LANGUAGE="JavaScript"> JavaScript命令および関数... </SCRIPT>
HTML文章の<SCRIPT>から</SCRIPT>までがJavaScriptの命令及び関数になります。
JavaScriptのいくつかの用例を示します。
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> document.write("いや〜信州は寒いですな〜。") </SCRIPT> </HEAD> <BODY> こたつなしで生きてはゆけないわ〜。 </BODY> </HTML>
上記の実行結果は以下のようになります。
いや〜信州は寒いですな〜。こたつなしで生きてはゆけないわ〜。
★JavaScript未対応ブラウザのために
JavaScriptに対応していないブラウザの場合、上記のサンプルではJavaScriptの命令まで表示されてしまいます。そこで、JavaScriptに対応していないブラウザのために、JavaScriptの部分を見えなくする、つまり隠してしまうようにしなければなりません。JavaScriptを見えなくするには、HTMLのコメント文を利用し、以下のように記述します。
<!-- こうすれば未対応ブラウザでスクリプトが表示される事はありません
// どうやらNetscape社も日本にきて忍者の修行をしたようだ -->
★関数の定義と呼び出し方法について
スクリプトはページが読み込まれた時点で評価され実行されます。関数は読み込むだけで実行はされません。関数はイベントハンドラ等で呼び出されたときに初めて実行されます。なるべくなら<HEAD>〜</HEAD>タグ内で関数を定義するようにしたほうがいいでしょう。関数がないのに関数呼び出しが行われるとエラーになってしまうためです。
例2:関数とコメントの使用例
<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript未対応ブラウザでは以下の命令は表示されません function square(i) { document.write("The call passed ", i ," to the function.","<BR>") return i * i } document.write("The function returned ",square(5),".") // 未対応ブラウザ対策おしまいでござる --> </SCRIPT> </HEAD> <BODY> <BR> All done. </BODY>
上記の実行結果は以下のようになります。
The call passed 5 to the function.
The function returned 25.
All done.
★<HEAD>タグについて
通常、関数はHEADタグ内で定義して使用します。関数はユーザーからのイベントが発生する前に読み込まれます。
例3:スクリプト内の2つの関数の使用例
<HEAD> <SCRIPT> <!--- JavaScript未対応ブラウザでは以下の命令は表示されないのよ〜ん function bar() { document.write("<HR ALIGN='left' WIDTH=25%>") } function output(head, level, string) { document.write("<H" + level + ">" + head + "</H" + level + "><P>" + string) } // 未対応ブラウザ用のコメントなんですね --> </SCRIPT> </HEAD> <BODY> <SCRIPT> <!--- 未対応ブラウザ用・・・同じ文章やなあ document.write(bar(),output("Make Me Big",3,"Make me ordinary.")) // 未対応ブラウザではスクリプトは表示されないよ〜ん --> </SCRIPT> <P> Thanks. </BODY>上記の実行結果は以下のようになります。
Make Me Big
Make me ordinary.
Thanks.
★’(クォート)マークについて
クォート(’)マークは文字列の区切り記号に使用します。またタグ内でダブルクォーテーションで囲まれているパラメーター内に文字列がある場合も使用します。 先ほどの例3では'left'という文字列がクォートで囲まれています。以下にサンプルを示します。
<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
★イベントハンドラスクリプトについて
JavaScriptはイベントが発生した時に実行させる事が出来ます。イベントが発生するのは通常ユーザーが何かを行った時です。例えばボタンをクリックした、文字の入力を行った場合などです。
発生するイベントに応じて実行されるプログラムを記述しておくことが出来ます。イベントハンドラはHTML文書内に記述しておき、イベントが発生したらJavaScript命令が実行されるといった具合になります。
文法的には以下のようになります。
<TAG eventHandler="JavaScript Code">
TAGと書いてあるのはHTMLのタグでeventHandlerとあるのはイベント名です。
以下の例ではクリックされた時にcomputeという関数が呼び出されて実行されます。
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
JavaScriptの命令はクォート内に記述しておくことができます。これらのJavaScriptの命令はボタンがクリックされた場合に呼び出されて実行されます。 もし同じ行に複数の命令を記述したい場合は区切り記号として;(セミコロン)を使用します。
通常イベントハンドラで実行されるプログラムは関数として定義しておきます。このメリットとしては以下の2つがあげられます。
・複数の箇所から呼び出す事ができ、異なるイベントハンドラであっても使用する事が出来ます。
・プログラムが見やすくなります。
上記の例で注意する所はthis.formという現在使用しているフォームを参照している事です。これは現在使用しているボタンオブジェクトを参照している事になります。上記の例ではonClickイベントが発生すると関数compute()が現在のフォームとパラメーターを参照して実行されるようになっています。
イベントおよびHTMLタグについて説明します。
・Focus, Blur, Changeイベント:
テキストフィールド、テキストエリアと選択範囲
・Clickイベント:
ボタン、ラジオボタン、チェックボックス、submitボタン、リセットボタン、リンク
・Selectイベント:
テキストフィールド、テキストエリア
・MouseOverイベント:
リンク
HTMLのタグにイベントハンドラを記述することによって色々なイベント処理を行うことが出来ます。イベントハンドラは"on"ではじまります。例えばFocusイベントは"onFocus"といった感じです。
注意すべきことはボタンがクリックされたからといって自動的に、そのイベントがオブジェクトに渡されたりして実行されるわけではありません。実行させるためにはHTMLタグでイベントハンドラを記述しておかなければなりません。以下にイベントとそのハンドラ名を示します。
Event | イベント発生条件 | イベントハンドラ |
blur | フォームの入力エリアから移動 | onBlur |
click | フォームのエレメントまたはリンクをクリック | onClick |
change | テキストの内容を変更 | onChange |
focus | フォームに値を入力 | onFocus |
load | ページを読み込んだ | onLoad |
mouseoverUser | マウスがリンク/アンカー上に移動 | onMouseOver |
select | 入力フィールドのエレメントを選択 | onSelect |
submit | フォーム内容の転送 | onSubmit |
unload | 他のページに移動する直前 | onUnload |
<HEAD> <SCRIPT LANGUAGE="JavaScript"> function compute(form) { if (confirm("Are you sure?")) form.result.value = eval(form.expr.value) else alert("Please come back again.") } </SCRIPT> </HEAD> <BODY> <FORM> Enter an expression: <INPUT TYPE="text" NAME="expr" SIZE=15 > <INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
Result: <INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM> </BODY>
上記の実行結果は以下のようになります。
Enter an expression:
Result:
例5:フォームとイベントハンドラの使用例2
<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!--- hide script from old browsers function checkNum(str, min, max) { if (str == "") { alert("Enter a number in the field, please.") return false } for (var i = 0; i < str.length; i++) { var ch = str.substring(i, i + 1) if (ch < "0" || ch > "9") { alert("Try a number, please.") return false } } var val = parseInt(str, 10) if ((val < min) || (val > max)) { alert("Try a number from 1 to 10.") return false } return true } function thanks() { alert("Thanks for your input.") } // end hiding from old browsers --> </SCRIPT> </HEAD> <BODY> <FORM NAME="ex5"> Please enter a small number: <INPUT NAME="num" onChange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}"> </FORM> </BODY>
上記の実行結果ですが、1から10までの数値外であればアラートを表示して1から10までの数値を入力するように注意します。1から10までの数値だった場合はThanks for your input.と表示します。
Please enter a small number:
★Tipsとテクニックについて
この章ではスクリプトのテクニックについて説明します。
・ページの更新(アップデート)について
JavaScriptはページの先頭から読み込んでページを生成・構成します。一度読み込まれて作成されたページはリロードしない限り再構築されません。
・クォートの使用方法について
クォート(’)マークはダブルクォーテーション(”)を囲みたいときなどに使用します。特にHTML文書内で記述されるイベントハンドラはクォートを以下のように使用します。
<FORM NAME="myform">
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('stmtsov.html', 'newWin', 'toolbar=no,directories=no')">
</FORM>
・関数の定義について
使用される全ての関数をHEADタグ内で定義しておいた方がいいでしょう。というのはHTML文書を読み込んでいる最中にイベントが発生すると関数が定義されていないためエラーになってしまう場合があるためです。
・配列の生成について
配列は配列名と添字によって使用することが出来ます。例えばempという配列があったとします。この配列empの一番目を参照するにはemp[0]とし、2番目を参照するにはemp[1]のように指定します。同様にして複数の配列要素を扱うことが出来ます。
JavaScriptにはデータタイプがありませんが配列とオブジェクトを関連づけることができ、簡単に配列を作成することが出来ます(JavaScriptオブジェクトモデル参照)。配列を定義するための関数は以下のようになります。
function MakeArray(n) { this.length = n; for (var i = 0; i
Netscape Navigator 3.0以降ではArray(n)を使用すれば同様の結果が得られます(Netscape 2.0でもArrayオブジェクトは使用可能だが配列参照にバグがあり、配列内容が消える場合があります)。
配列は最初に生成し用意しておく必要があります。また上記のように最初にゼロでクリアしておくようにします。配列の添字は0から始まります。1から始まるといった指定はできません。
上記関数を使用して配列を作成し名前を付けるには以下のようにします。
emp = new MakeArray(20);
empという名前の配列を作成し20個の配列要素を初期化(ゼロ)にします。
・配列の使用方法について
配列を使用するには以下のようにします。
emp[1] = "古籏一浩"
emp[2] = "西尾将人"
emp[3] = "杉本 健"
このように配列を生成しておけば、いつでも使用できます。例としてEmployeesというオブジェクト名で配列を使用するプログラムを示します。
function Employee(empno, name, dept) { this.empno = empno; this.name = name; this.dept = dept; }以下の命令で配列を定義します。
emp = new MakeArray(3) emp[1] = new Employee(1, "古籏一浩", "元締め") emp[2] = new Employee(2, "西尾将人", "音楽担当") emp[3] = new Employee(3, "杉本 健", "広報")これらの定義された配列の内容はshow_propsという関数により簡単に表示する事ができます(詳しくはオブジェクトモデルの章を参照してください)。
for (var n =1; n <= 3; n++) { document.write(show_props(emp[n], "emp") + " "); }