JavaScriptはウェブブラウザに搭載されたスクリプト言語です。HTMLでページを作成できる人なら誰でも簡単に使えるほど簡単で、それでいてブラウザ、プラグイン、Javaアプレットを操作することができます。
<SCRIPT>タグ
JavaScriptは<SCRIPT>タグを使って、HTMLファイルに直接記述できます。
JavaScriptを宣言する方法
<SCRIPT>
//ここにJavaScriptプログラムを記述する
</SCRIPT>
<SCRIPT>タグをどこにでも記述できますが、通常は次の2つの場所になります。
- <HEAD>~</HEAD>の間:命令文、関数を使用するとき
- <BODY>~</BODY>の間:イベントハンドラーを使用するとき
HTMLファイルは上から下へ向かって読み込まれるので、書いた場所が上であるほど先に実行されることになります。最初に実行させたいスクリプト、または関数などは<HEAD>ブロックに記述しましょう。
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<SCRIPT>
//ここにJavaScriptプログラムを記述する
document.write("Welcom to Smart!!")
</SCRIPT>
</BODY>
</HTML>
上のサンプルですが、<SCRIPT>タグに document.write(...) という命令文があります。documentは日本語で「文書」という意味ですが、ここでの document は括弧の中にある文字列を「文書」というオブジェクトとして扱うということです。write は「書く」という命令。ですから、 document.write(...) を直訳すると「文書として指定された文字列を書け」ということになります。
ちなみに、ここでは文字列を扱いましたが、括弧内は文字列でも変数または関数でもかまいません。文字列を扱うときはダブルクォーテーション(")で囲こむことをお忘れなく。
実行結果は下記のとおりです。
TYPE属性
HTML4.01 では後述のLANGUAGE属性が却下され、代わりにTYPE属性が必須属性として定義されました。HTML4.01に準拠する場合は、LANGUAGE属性の代わりにTYPE属性を指定するようにしましょう。値には "text/javascript" を指定します。
<SCRIPT TYPE="text/javascript">
<!--
document.write("Welcom to Smart!!");
// -->
</SCRIPT>
LANGUAGE属性
HTML4.01で使われなくなった属性です。<SCRIPT> タグのLANGUAGE属性で、使用するJavaScriptのバージョンを指定することもできます。例えば、次のようにすると、JavaScript 1.2をサポートしているブラウザでのみ動作させることができます。
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
document.write("JavaScript 1.2 をサポートしてるよ");
// -->
</SCRIPT>
JavaScriptに対応していないブラウザ
JavaScriptに対応していないブラウザでJavaScriptを読み込むと、<SCRIPT>タグブロックの中身が画面に表示されてしまいます。
この問題を回避するために、<SCRIPT>タグをコメント中に記述しておくことが出来ます。ただし、コメントの終了タグ(-->)はSyntaxErrorになってしまうので
、この部分はJavaScriptのコメント(//)にします。
<SCRIPT LANGUAGE="JavaScript">
<!---コメントの始まり
document.write("Hello,JavaScript!!")
//--->コメントの終わり
</SCRIPT>
また、JavaScriptに対応していないブラウザのユーザーにJavaScriptを使っていることを知らせたいときには、コメントの後にさらにメッセージを書きます。
<SCRIPT LANGUAGE="JavaScript">
<!-------------
document.write("Hello,JavaScript!!")
//------------>
JavaScript対応のブラウザを使えば、このページをより楽しめます。
</SCRIPT>
「JavaScript対応のブラウザを使えば~」の部分はJavaScript対応のブラウザではコメントであるために無視されますが、JavaScript未対応のブラウザではコメント外となり 、"-->"以降のメッセージが表示されます。
Content-Script-Type
イベントハンドラ(onXxxx="~")に記述したスクリプトの言語を指定するため、HTML4.01では、HTMLのヘッダ部に、下記のようなMETA記述を行うことを推奨しています。
<HTML>
<HEAD>
<TITLE>JavaScript Sample</TITLE>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
</HEAD>
<BODY>
:
<INPUT TYPE="button" VALUE="OK" onClick="~">
:
</BODY>
</HTML>
JavaScript外部ファイル
JavaScriptのスクリプトを外部ファイルとして作成し、HTMLから呼び出すこともできます。例えば、下記の内容を test.js など、拡張子が .js のファイルに記述しておきます。
function ohayou() {
window.alert("Hello!");
}
これを、例えば次のように呼び出すことができます。
<HTML>
<HEAD>
<TITLE>JavaScript Sample</TITLE>
<SCRIPT TYPE="text/javascript" SRC="test.js"></SCRIPT>
</HEAD>
<BODY>
:
<INPUT TYPE="button" VALUE="OK" onClick="ohayou()">
:
</BODY>
</HTML>