Next: 16. フォーム Up: HTML文書作成マニュアル Ver 5.11 Previous: 14. プラグイン

15. スクリプト

Netscape Navigator/CommunicatorやInternet Explorerでは、ブラウザ上で実行することができるスクリプト型のプログラミング言語を使うことができます。スクリプトは、一連の実行に必要となる命令を記述したもので、どのような命令が使えるかは言語の仕様によります。また、ほとんどの場合、テキストで記述します。ほぼすべてのWeb用のスクリプト言語はテキストで記述し、HTMLファイル内にこれを埋め込みます。

主なWeb用のスクリプト言語として次のようなものがあります。

JavaScript: Netscape Navigator/Communicator、Internet Explorer共に実行することができますが、若干の方言があります。もともとはNetscape Communications社が作っていたLiveScriptに、Sun Microsystems社のJava言語の仕様を組み入れたもので、最も多く使われているWeb用のスクリプト言語です。
JScript: JavaScriptにMicrosoft社がいくつかの機能追加をしたもので、Internet Explorerのみで動作します。
VBScript: Internet Explorerのみ実行することができます。Microsoft社のVisual Basicの言語仕様を採用しており、この言語に慣れていればすぐにプログラムを作成することができるでしょう。Internet Explorerのみでしか動作しないため、使っているページはあまり見かけません。

スクリプトを使うには、scriptタグ環境を使います。

script[Strict][Transitional]

<script attributes...>～</script>の形で、スクリプトを定義します。attributesには次のようなものが入ります。

charset: [Strict][Transitional][省略可]charset="charset"は、リンク先の文字エンコーディングセットを指定します。通常はISO-8859-1(Latin-1のこと)、日本語ならばISO-2022-JP、EUC-JP、SHIFT_JISといったものになります。英字アルファベットの大文字、小文字は問いません。
defer: [Strict][Transitional][省略可]deferは、スクリプトが表示に関係しないことを宣言します。deferをアトリビュートとして付けることで、ブラウザはスクリプトを実行している間にHTMLの解析や表示を続けることができ、結果的に速度の向上が図れます。
language: [Transitional][省略可]language="name"は、スクリプトの種類を指定します。たとえば値をJavaScriptにすると、タグ環境内に記述するスクリプトがJavaScriptであることを明示します。
src: [Strict][Transitional][省略可]src="URI"は、外部にあるスクリプトのURIを指定します。
type: [Strict][Transitional][必須]type="name"は、スクリプトのMIMEタイプを指定します。JavaScriptはtext/javascript、VBScriptはtext/vbscriptです。

scriptタグは、headタグ(4.1 参照)環境かbodyタグ(4.1)環境の中で使います。

スクリプトを実行することができないブラウザ向けにはnoscriptタグ環境に代替となる表示や処理を記述します。スクリプトを実行可能なブラウザはこのタグ環境を無視します。

noscript[Strict][Transitional]

<noscript attributes...>～</noscript>の形で、スクリプトを実行することができないブラウザ向けのコンテンツを提供します。attributesには次のようなものを取ります。

class: [Strict][Transitional][省略可]class="cdata"は、タグ内のオブジェクトへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
dir: [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
id: [Strict][Transitional][省略可]id="name"は、このタグに固有のIDを振ります。
lang: [Strict][Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
onclick: [Strict][Transitional][省略可]onclick="script"はクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
ondblclick: [Strict][Transitional][省略可]ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
onkeydown: [Strict][Transitional][省略可]onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onkeypress: [Strict][Transitional][省略可]onkeypress="script"はキーを押したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onkeyup: [Strict][Transitional][省略可]onkeyup="script"はキーを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmousedown: [Strict][Transitional][省略可]onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmousemove: [Strict][Transitional][省略可]onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmouseout: [Strict][Transitional][省略可]onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmouseover: [Strict][Transitional][省略可]onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmouseup: [Strict][Transitional][省略可]onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
style: [Strict][Transitional][省略可]style="cdata"は、このタグ内のスタイルを設定します。詳細は5 を参照してください。
title: [Strict][Transitional][省略可]title="titlename"は補助用タイトルを指定します。

JavaScriptを使った例を紹介しておきます。行番号は説明のために入れてありますが、実際にはありません。


 0:<html>
 1:  <head>
 2:    <title>JavaScriptのテスト</title>
 3:    <script type="text/javascript" language="JavaScript">
 4:      <!--
 5:        function printnumber(i) {
 6:          document.writeln("ナンバー." + i + "<br>")
 7:        }
 8:      // -->
 9:    </script>
10:  </head>
11:  <body>
12:    <h1>JavaScriptのテスト</h1>
13:    <script language="JavaScript">
14:      <!--
15:        for (var i=0; i<10; i++) {
16:          printnumber(i);
17:        }
18:      // -->
19:    </script>
20:    <noscript>
21:    <p>JavaScriptを使うことができるブラウザを使ってください。</p>
22:    </noscript>
23:  </body>
24:</html>

この例では二つのscriptタグを使っています(3～9行と13～19行)。どちらも!コメントタグ(4.8 参照)で囲まれていることに注目してください。このようにしないと、JavaScriptに対応していないブラウザではスクリプトがテキストとして画面に表示されてしまいます。

コメントタグの最後に//が付いていますが、これはJavaScript言語におけるコメント記号です。HTMLのコメントタグ-->をスクリプトと見なされないようにこれをスクリプト言語側のコメント記号を付けてコメント化します。ほかのスクリプト言語の場合はその言語におけるコメント記号を付けます。たとえばVBScriptでは'がコメント記号です。

例の最初のスクリプトでは、printnumberという関数を定義しています。この時点ではまだ表示などは行われません。後のスクリプトでこの関数を呼び出します。

15行目のforステートメントは0から9までの数値を順に変数iに入れ、16行目で関数printnumberの引数として渡し、実行します。この結果、6行目のdocument.writelnが呼び出され、画面にナンバー.0からナンバー.9までの文字列が表示されます。

フォーム(16.1 参照)上のボタンを押した、ドキュメントの読み込みが終わった、といった時点でスクリプトを実行することも可能です。

たとえばaタグ(6.2 参照)のリンクをクリックしたときになんらかのスクリプトを実行させたい場合、<a href="go.html" onclick="dosomething()">のように記述します。

「クリック」や「読み込み終了」などのできごとをイベントと呼び、このできごとを捕捉してなんらかの処理を行うものをイベントハンドラと呼びます。

HTMLでのイベントハンドラには次のようなものがあります。

onabort: onabort="script"は読み込みを中止したときに実行するスクリプトを指定します。
onblur: onblur="script"はキーボードフォーカスが外れたときに実行するスクリプトを指定します。
onchange: onchange="script"は内容が変更されたときに実行するスクリプトを指定します。
onclick: onclick="script"はクリックされたときに実行するスクリプトを指定します。
ondblclick: ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。
ondragdrop: ondragdrop="script"はなんらかのオブジェクトをブラウザへドラッグドロップしたときに実行するスクリプトを指定します。
onerror: onerror="script"はドキュメントやイメージの読み込み中にエラーが発生したときに実行するスクリプトを指定します。
onfocus: onfocus="script"はキーボードフォーカスを得たときに実行するスクリプトを指定します。
onkeydown: onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。
onkeypress: onkeypress="script"はキーを押したときに実行するスクリプトを指定します。
onkeyup: onkeyup="script"はキーを離したときに実行するスクリプトを指定します。
onload: onload="script"はドキュメントを読み込んだときに実行するスクリプトを指定します。
onmousedown: onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。
onmousemove: onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。
onmouseout: onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。
onmouseover: onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。
onmouseup: onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。
onmove: onmove="script"はウィンドウやフレームが移動したときに実行するスクリプトを指定します。
onresize: onresize="script"はウィンドウやフレームの大きさが変更されたときに実行するスクリプトを指定します。
onreset: onreset="script"はフォームがリセットされたときに実行するスクリプトを指定します。
onselect: onselect="script"はフォーム入力部が選択されたときに実行するスクリプトを指定します。
onsubmit: onsubmit="script"はフォームがサブミットされたときに実行するスクリプトを指定します。
onunload: onunload="script"は現在開いているドキュメントから別のページに移動したりブラウザを閉じようとしたときに実行するスクリプトを指定します。

Next: 16. フォーム Up: HTML文書作成マニュアル Ver 5.11 Previous: 14. プラグイン

Kenshi Muto
平成11年9月19日