JavaスクリプトはHTML文書の中へ記述し、ブラウザ(閲覧ソフト)がその文書を表示する際、実行されるものであり、Javaのように単独で動作するアプリケーションやアプレットを作成することはできません。また、将来提供されるであろうLiveWireは、CGIと同じようなアプリケーション作成機能を持つようです。
この<script>タグはHTML文書中、ヘッダ部や本文のどこに置いても構いませんが、関数などは一般的にヘッダ部へ置かれます。ヘッダ部のJavaスクリプトが結果を表示する場合、本文よりも前に表示される点を注意して下さい。
<script>タグには、以下の属性があります。
｢こんにちわ、世界｣
これを別のHTML文書で使った実例は、次のボタンを押して下さい。
Javaスクリプトで定義されているイベントの種類は下表のとおりです。
もう１つの記述例として、ボタンへマウスを置いたり(onMouseOver)、離したり(onMouseOut)、クリックしたり(onClick)、それぞれのイベントによってボタンの画像やステータスバーへの表示が変わるパターンをご紹介しておきましょう。ちなみに、リンク先はプロフィールと｢データバンク｣を使いました。
Javaスクリプトの基礎
ネットスケープやインターネット･エクスプローラ(Microsoft社)などでは、HTML文書へJavaスクリプトと呼ばれるスクリプト言語を埋め込むことでHTML文書内のプログラミングが可能です。CGIをサーバサイドのプログラミングとすれば、Javaスクリプトはクライアントサイドのプログラミングといえるでしょう。
2.0b3以前はLiveスクリプトと呼ばれていましたが、現在はJavaスクリプトと呼ばれています。Javaスクリプトとは
Javaスクリプト言語は、コンパクトなオブジェクト指向のスクリプト言語で、ダイナミックな対話型文書をサーバ側のプログラムと関係なく作成することが可能です。ネットスケープ2.0やインターネット･エクスプローラ3.0からJavaスクリプトを解釈できるインタプリタが内蔵されています。Javaスクリプトの書き方
HTML文書へJavaスクリプトを記述する場合、方法のような方法があります。
<script>タグを用いる場合、<script> 〜 </script>内に記述するか、あるいはsrc属性(オプション)でファイルを読み込みます。
<script>タグを使用する。
フォームのイベントハンドラを使用する。
ここで、もっとも単純なJavaスクリプトの記述例をご紹介しましょう。これは本文へ"Hello World!"と表示させる単純なスクリプトですが、<script>タグの使用方法がよくわかると思います。
language
src
最初にJavaスクリプトが評価されるので、"Hello World!"は本文の｢こんにちわ、世界｣よりも前に表示されます。
<html>
<head>
<script language="JavaScript">
<!-- こんにちわ世界のスクリプト言語 -->
document.write("Hello World!<p>")
</script>
</head>
<body>
｢こんにちわ、世界｣
</body>
</html>
Hello World! 
ファイルからJavaスクリプトの読み込み方
Javaスクリプトをファイルから読みこむ場合、次のように記述します。
Javaスクリプトは、拡張子に ｢.js｣を用います。拡張子で言語タイプが定義されるため.jsの付いたファイルであれば、languageは省略してもかまいません。
<script language="JavaScript" src="Sample.js">
</script>
イベントハンドラー
Javaスクリプトには下記のイベントハンドラーがあり、スクリプトを実行する動機(きっかけ)となります。イベントハンドラーは色々なタグの中で使用することができ、その記述方法は次のとおりです。
tagへ任意のHTMLタグを、eventHanderへイベントハンドラーの名前を書き込んで下さい。一般的には、<form>タグのボタンやフィールド機能が使われます。
<tag eventHander="JavaScript Code">
<form method="get" action="javscrpt.html">
テスト<p>
<input value=" 注 意 " type="submit"
onClick="alert('注意： このページを再ロードしてもいいですか？')">
</form>
イベント 実行のきっかけ ハンドラー名 blur フォーム要素から入力がなくなった(離れた)時 onBlur change テキスト、テキストエリア、選択要素の中身を変更した時/td> onChange click フォーム要素かリンクをクリックした時 onClick focus テキスト、テキストエリア、選択要素をクリックした時 onFocus load ブラウザにページをロードした時 onLoad mouseout リンクまたはアンカーポイントからマウスが外れた時 onMouseOut mouseover リンクまたはアンカーポイントにマウスを動かした時 onMouseOver select フォーム要素の入力フィールドを選択した時 onSelect submit フォームを実行した時 onSubmit unload ページを閉じた時 onUnload
ClickとBlur、MouseOverとMouseOut、LoadとUnloadは、それぞれが逆の関係であり、またこれらのイベントとHTMLタグとの関係は、次のようになります。
たとえば、 ボタンをクリックした場合(onClick)に式を計算させたい時はcaliculateという関数を使い、記述方法は以下のとおりです。
Focus, Blur, Changeイベント
Clickイベント
Selectイベント
Mouseイベント
この記述例を機能させるため、ヘッダ部には次のスクリプトを書き込む必要があります。
<form>
式を入力して下さい(例、1+2、3*6*2/5、15/4):
<input type="text" name="expr" size=15>
<input type="button" value=" 計 算 " onClick="calculate(this.form)"><br>
答:
<input type="text" name="result" size=15><p>
</form>
<script language="JavaScript">
<!--
function calculate(form) {
if (confirm("この式で間違いありませんね？"))
form.result.value=eval(form.expr.value)
else
alert("またどうぞ！")
}
//-->
</script>
この記述例を機能させるため、ヘッダ部に書き込むスクリプトは、
<table border=1 cellpadding=12 cellspacing=0>
<td background="../../images/marble51.jpg">
<img name="Profile" src="../images/bmb_prof.gif" border=0 usemap=#Profile>
<img name="Data" src="../images/bmb_data.gif" border=0 usemap=#Data>
</td></table>
<map name="Profile">
<area coords="0,0,79,23" href="../profile.html"
onMouseOver='swtch(1,Profile);self.status="ヨコチンのプロフィール";return true'
onMouseOut='swtch(0,Profile);self.status=""'
onClick='swtch(2,Profile);self.status=""' alt="ﾖｺﾁﾝのﾌﾟﾛﾌｨｰﾙ">
</map>
<map name="Data">
<area coords="0,0,79,23" href="../../data/index.html"
onMouseOver='swtch(4,Data);self.status="ヨコチンのデータバンク";return true'
onMouseOut='swtch(3,Data);self.status=""'
onClick='swtch(5,Data);self.status=""' alt="ﾖｺﾁﾝのﾃﾞｰﾀﾊﾞﾝｸ">
</map>
以上の結果が、このボタンです。
<script language="JavaScript">
<!--
function getAppVersion() {
appname=navigator.appName;
appversion=navigator.appVersion;
majorver=appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;
}
function swtch(num, imgname) {
if (getAppVersion())
imgname.src=img[num].src;
}
imgsrc=new Array();
imgsrc[0]="../images/bmb_prof.gif";
imgsrc[1]="../images/bmbp_prf.gif";
imgsrc[2]="../images/bmbl_prf.gif";
imgsrc[3]="../images/bmb_data.gif";
imgsrc[4]="../images/bmbp_dat.gif";
imgsrc[5]="../images/bmbl_dat.gif";
if (getAppVersion()) {
img=new Array();
for (i = 0; i < imgsrc.length; i++) {
img[i]=new Image();
img[i].src=imgsrc[i];
}
}
//-->
</script>
それぞれのJavaスクリプトの｢<!--｣と｢//-->｣は、スクリプトを読めないブラウザから隠すための記述であり、省いてもかまいません。