ここでは、JavaScriptの基本をまとめています。ご参考になれば幸いです。
JavaScriptを使えば、HTMLでは表現出来ない多彩な表現が可能になります。
例えば、新しいウィンドウを開く場合。
よく見かけるスクロールメッセージ(ウィンドウのステータス行など)とか、ロールオーバー効果(リンクの上にマウスポインタが触れると画像が変化する)などが、JavaScriptを使えば簡単に出来ます。
JavaScriptを使えば、CGI処理の一部やCGIでは不可能な処理が出来ます。
例えば、フォーム(form)に情報を入力し、その情報をもとに処理を行い結果をページに表示するとします。
また、この時CGIでは端末側の時間を判断できません。
分かり易く言うと、訪問者がホームページにアクセスした時、朝ならば「おはよう御座います。」とか、夜ならば「こんばんは。」といった挨拶表示などが、JavaScriptを使えば簡単に出来ます。
ブラウザにバージョンがあるように、JavaScriptにもバージョンがあります。新しいバージョンになるにつれて、新機能が追加されています。
主なブラウザの対応は以下の通りです。
バージョン | 対応ブラウザ | languageアトリビュート値 |
JavaScript1.0 | NN2.0以上 / IE3.0以上 | JavaScript(この場合全てのJavaScript対応ブラウザで実行) |
JavaScript1.1 | NN3.0以上 / IE4.0以上 | JavaScript1.1 |
JavaScript1.2 | NN4.0以上 / IE4.0以上 | JavaScript1.2 |
JavaScript1.3 | NN4.06(4.5)以上 / IE5.0以上 | JavaScript1.3 |
NN2.0に搭載さた時は、JavaScriptではなくLiveScriptと呼ばれていました。
JavaScriptは、国際的な標準化機関ECMA(European Computer Manufacture Association 欧州電子計算機工業会)で標準化されたECMAScript(ECMA-262)規格に完全に準拠しています。
ちなみにIEは、JScript(Microsoft が開発したWebスクリプト言語)を搭載しています。JavaScriptと互換性はありますが、違うものです。どこが違うのかははっきり解りませんが・・・JavaScript と同じようにJScriptもECMAScript(ECMA-262)規格に完全に準拠しています。languageアトリビュート値は、JScriptです。
では、JavaScriptの構造を簡単に説明したいと思います。
プログラミングでのオブジェクト(object)の概念は大変難しいので、簡単に分かり易くしてみます。
自作パソコンを例に取って見ます。AT互換機はいくつものパーツで組み立てられています。
それぞれの主なパーツは、
CPU | ケース | メモリ | CDドライブ | ビデオカード | OS |
Duron 1.3GHz | ブック | PC/133 128MB SDRAM | CD-ROM | GeForce4 MX440 64MB | Windows Millennium Edition |
Celeron 2.2GHz | MICRO ATX | PC/2100 256MB DDR | CD-R/RW | RADEON 8500 128MB | Windows XP Home Edition |
Athlon XP 2700+ | ミッドタワー | PC/3200 512MB DDR | COMBO | RADEON 9700 PRO 128MB | Windows 2000 Professionai |
Pentium 4 3.06GHz | フルタワー | PC/1066 256MB RIMM | DVD-R/RW |
GeForce4 Ti4600 128MB |
Windows XP Professional |
このように選択肢があり、自分好みのパソコンが出来ます。自作パソコンを作る時、対象となるパーツひとつひとつを「オブジェクト」と言えます。
次にブラウザの場合です。ブラウザも同じように、いくつものパーツが組み合わせられています。
主なパーツは、ブラウザウィンドウ、ロケーションバー、ツールバー、文字、画像、リンク、フォームなどですが、これらも「オブジェクト」と言えます。
JavaScriptは、ブラウザのパーツを「オブジェクト」として指定でき動作させる事ができます。
JavaScriptのオブジェクトは大別すると、ナビゲータオブジェクト(ブラウザが持っている情報や各パーツ)とビルトインオブジェクト(日時や計算をするためのオブジェクト)があります。
ナビゲータオブジェクトには階層関係があります。
ナビゲータオブジェクトの階層 window━┏document━┏Form━━┏Select━━Option ┣Frame ┣Layer ┣Button ┣location ┣Link ┣Checkbox ┗history ┣Image ┣Radio ┣Area ┣Reset ┣Anchor ┣Submit ┗Applet ┣Hidden ┣Password ┣FileUpload ┣Text ┗Textarea screen navigator━┏Plugin ┗MimeType
記述する時は上記の階層通り指定します。記述の仕方は、階層順にピリオド( . )で区切ります。
例えば、document オブジェクトの場合は、
window.document
Layer オブジェクトの場合は、
window.document.Layer
と指定しますが、window オブジェクトは省略可能ですので、
それぞれ、document
及びdocument.Layer
と指定できます。
ユーザー独自のオブジェクトやビルトインオブジェクトを使用するには、new演算子を使います。
作成方法は、
オブジェクト名 = new オブジェクトの型(プロパティ、メソッド)です。
例えば、日付・時間を扱うDate()オブジェクトにtodayと言う名前を設定する場合は、
today = new Date()
と記述します。
Date | |||||
Image | String | Array | Function | Boolean | Number |
プロパティは、オブジェクトの要素です。
ピリオド( . )で区切って、オブジェクト.プロパティと書きます。
例えば、ブラウザのアプリケーション名を知りたい場合は、navigator オブジェクトの appName プロパティを使いますので、
navigator.appName
と記述します。
プロパティには、読み出し用プロパティと変更可能なプロパティがあります。読み出し用プロパティには、上記のnavigator オブジェクトの appName プロパティや appVersion プロパティなどがあります。変更可能なプロパティには、location オブジェクトの href プロパティなどがあります。
メソッドは、オブジェクトの動作指定をします。オブジェクト毎にメソッドが用意されています。
ピリオド( . )で区切って、オブジェクト.メソッド(値)と書きます。
例えば、文字を書き出す場合は、write( ) メソッドを使います。ブラウザのアプリケーション名を書き出すには、
document.write(navigator.appName)
と記述します。
イベントハンドラは、イベント(マウス・クリックとかページ読み込み)が発生した時に、特定のスクリプトを呼び出します。
HTML4.01ではeventアトリビュートとして定義されてます。
HTMLのタグ内に、イベントハンドラ = "関数またはスクリプト"と書きます。
例えば、アラートダイアログ(警告表示用)を開きたい場合は、alert( ) メソッドを使います。
ページ読み込み時にブラウザのアプリケーション名を表示させるには、
<body onLoad="alert(navigator.appName);">〜</body>
と記述します。
JavaScriptでは、文字列をダブルクォーテーション( " )で括ります。括られていない場合は、数値として扱います。
例えば、文字列を書き出す場合は、
document.write("文字列を書き出します。")
と記述します。
また、HTMLを書き出す場合などのように文字列内でダブルクォーテーション( " )を使いたい場合は、替わりにシングルクォーテーション( ' )を使います。
例えば、HTMLで画像を書き出す場合は、
document.write("<img src='image.gif' alt='image' width='100' height='100'>")
と記述します。
JavaScriptでは、セミコロン( ; )は文の終了を意味します。省略可能ですが、文を読みやすくするために記述することをお勧めします。{
} の後には記述しません。
複数の値を設定するには、カンマ( , )で区切ります。
<script type="text/JavaScript">
<!--
today = new Date();
document.write("今日は",today.getMonth()+1,"月",today.getDate(),"日ですね。");
//-->
</script>
<script type="text/JavaScript">
<!--
document.write("こんにちは、");
document.write("お使いのブラウザは",navigator.appName,"ですね。");
//-->
</script>
どうですか、NNとMozillaの方はNetscape、IEとOperaの方はMicrosoft Internet
Explorer、Konquerorの方はKonquerorと表示されましたよね。