<script>
JavaScript命令および関数...
</script>
<script language="JavaScript1.2">
JavaScript命令および関数...
</script>
| 指定バージョン | 注 釈 |
|---|---|
| JavaScript | 最新バージョンで実行 |
| JScript | 最新バージョンで実行 |
| JavaScript1.1 | バージョン1.1で実行 |
| JavaScript1.2 | バージョン1.2で実行 |
| JavaScript1.3 | バージョン1.3で実行 |
| JavaScript1.5 | バージョン1.5で実行 |
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
JavaScript命令および関数...
</script>
<script language="JavaScript" type="text/javascript">
JavaScript命令および関数...
</script>
<html>
<head>
</head>
<body>
<script language="JavaScript">
document.write("いや〜信州は寒いですな〜。")
</script>
こたつなしで生きてはゆけないわ〜。
</body>
</html>
<html>
<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>
</html>
上記の実行結果は以下のようになります。
<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>
上記の実行結果は以下のようになります。
以下の例ではクリックされた時にcomputeという関数が呼び出されて実行されます。
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
JavaScriptの命令はクォート内に記述しておくことができます。これらのJavaScriptの命令はボタンがクリックされた場合に呼び出されて実行されます。 もし同じ行に複数の命令を記述したい場合は区切り記号として；（セミコロン）を使用します。
通常イベントハンドラで実行されるプログラムは関数として定義しておきます。このメリットとしては以下の２つがあげられます。
・複数の箇所から呼び出す事ができ、異なるイベントハンドラであっても使用する事が出来ます。
・プログラムが見やすくなります。
上記の例で注意する所はthis.formという現在使用しているフォームを参照している事です。これは現在使用しているボタンオブジェクトを参照している事になります。上記の例ではonClickイベントが発生すると関数compute()が現在のフォームとパラメーターを参照して実行されるようになっています。
イベントおよびHTMLタグについて説明します。
・Focus, Blur, Change, keyDown, keyUp, keyPressイベント：
テキストフィールド、テキストエリアと選択範囲
・Clickイベント：
ボタン、ラジオボタン、チェックボックス、submitボタン、リセットボタン、リンク
・Selectイベント：
テキストフィールド、テキストエリア
・MouseOver, Mouseoverイベント：
リンク
HTMLのタグにイベントハンドラを記述することによって色々なイベント処理を行うことが出来ます。イベントハンドラは"on"ではじまります。例えばFocusイベントは"onFocus"といった感じです。
注意すべきことはボタンがクリックされたからといって自動的に、そのイベントがオブジェクトに渡されたりして実行されるわけではありません。実行させるためにはHTMLタグでイベントハンドラを記述しておかなければなりません。以下にイベントとそのハンドラ名を示します。
| Event | イベント発生条件 | イベントハンドラ |
| blur | フォームの入力エリアから移動 | onBlur |
| click | フォームのエレメントまたはリンクをクリック | onClick |
| change | テキストの内容を変更 | onChange |
| focus | フォームに値を入力 | onFocus |
| load | ページを読み込んだ | onLoad |
| mouseover | マウスがリンク／アンカー上に移動 | onMouseOver |
| select | 入力フィールドのエレメントを選択 | onSelect |
| submit | フォーム内容の転送 | onSubmit |
| unload | 他のページに移動する直前 | onUnload |
<html>
<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:
<html>
<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.と表示します。
function MakeArray(n) {
this.length = n;
for (var i = 0; i
Netscape Navigator 3.0以降ではArray(n)を使用すれば同様の結果が得られます（Netscape 2.0でもArrayオブジェクトは使用可能だが配列参照にバグがあり、配列内容が消える場合があります）。
配列は最初に生成し用意しておく必要があります。また上記のように最初にゼロでクリアしておくようにします。配列の添字は０から始まります。１から始まるといった指定はできません。
上記関数を使用して配列を作成し名前を付けるには以下のようにします。
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, "杉本 健", "広報")
これらの定義された配列の内容は以下のように簡単に表示する事ができます（詳しくはオブジェクトモデルの章を参照してください）。
for (var n =1; n <= 3; n++) { document.write(show_props(emp[n], "emp") + " "); }