JavaScriptはNetscape社が開発したスクリプトです。 Javaと名前は似ていますが「まったく別物」です。 英語とドイツ語以上に異なります。JavaScriptを用いることによりブラウザは、HTML文書を単に表示するだけでなく、次のようなことができるようになります。
まずは「サンプル(簡易電卓)」を見てみましょう。
- フォーム入力値をサーバーに送信する前にチェックする。
- 時刻によって表示するメッセージを変える。
- その気になればWebページ上でゲームもできてしまう。
- Netscape Navigator 2.0(JavaScript)
- JavaScriptはNetscape社のNN2.0で初めて実装されました。開発当初はLiveScriptと呼んでいましたが、Javaの流行にあわせてかJavaScriptと名称を変えたようです。
- Internet Explorer 3.0(JavaScript)
- Microsoftでも、NN2.0相当のJavaScript機能をIE3.0でサポートしました。 機能はほとんど同じなのですが、若干仕様の違いがあります。 NNのマニュアルの記述ミスがそのままIEの実装になっていたりします。 商標の問題か、メンツの問題か、JavaScriptとは呼ばず、Active Scriptとか呼んでいるようです。
- Netscape Navigator 3.0(JavaScript 1.1)
- NN3.0でJavaScript 1.1というバージョンをサポートしました。 Imageオブジェクトの追加などが行われています。 これに伴い、NN2.0での実装をJavaScript 1.0と呼ぶようになります。
- ECMA-262(ECMAScript)
- N社はJavaScriptの地位を確立すべく、ヨーロッパのECMAという標準化機関(日本のJISや米国のANSIに相当)に標準化を依頼し、ECMAはこれをECMA-262(ECMAScript)として発表しました。 ECMA-262は、JavaScriptの仕様からブラウザ固有部(navigatorオブジェクトやwindowオブジェクトなど)を排除した、純粋な言語仕様です。
- Netscape Navigator 4.0(JavaScript 1.2)
- N社はNN4.0で、ECMA-262の仕様を取り入れたJavaScript 1.2を実装しました。 N社のDynamic HTMLの重要コンポーネントとしてレイヤ機能やイベント機能などが強化されています。
- Internet Explorer 4.0(JScript 3.0)
- M社もIE4.0で、ECMA-262の仕様を取り入れたJScript 3.0を実装しました。 このJScript 3.0はECMA-262に若干の機能を追加したもので、仕様にはwindowなどのブラウザ固有オブジェクトは含まれていません。 (IE3.0をJScript 3.0対応にするためのモジュールもM社から無料配布されていますが、インストールしてもあまり利点は無いでしょう)
- Internet Explorer 4.0(Dynamic HTML)
- IE4.0の完全なJavaScript機能はDynamic HTMLの枠組みの中で定義されています。 呼び方はActive Scriptとか、Dynamic HTMLとかまちまちです。 HTML上のほとんどのタグをオブジェクトとしてダイナミックに扱える点で、NN4.0の気のよりも数段優れた物に仕上がっています。
あたりまえのことですが、JavaScriptをサポートしていないブラウザでは動きません。 もしサポートしていても、オプションなどでJavaScriptの使用がオフになっていたりすると動きませんので注意してください。(IE3.0ではActive Xスクリプトという名前で設定します。)JavaScriptはNNやIEのバージョンによってかなり動作が異なりますので、手持ちのブラウザで動作が確認できても、他のブラウザや古いブラウザやMacのブラウザでは動かないかもしれません。(動かないことの方が多い。) HTMLなら未サポートタグは単に無視してくれるのですが、JavaScriptの場合はエラーダイアログを表示してくれますので困ったものです。
日本語の処理はうまくいかない場合が多いようです。文字化けが発生したりすることがよくあります。
バグは多いです。 例えば、document.write()を用いたページを印刷すると<や>の個所が無茶苦茶に印刷されてしまうという、気づきにくいものもありました。
「Hello world!!」と表示するプログラムをJavaScriptで書いてみます。 以下のような内容のファイルを用意して、JavaScript対応ブラウザで表示してみてください。<HTML> <HEAD> <TITLE>JavaScript Sample)</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("<H1>Hello world!!</H1>"); // --> このページはJavaScriptで記述されています。 </SCRIPT> </BODY> </HTML>JavaScriptはまた、クリックされた、ページがフォーカスされたなどのイベントが発生した時に実行することができます。
<FORM> <INPUT TYPE=button VALUE="Click Me!!" onClick="alert('Hello World!!')"> </FORM>次のような実行方法もあります。
<A HREF="JavaScript:alert('Hello!!')">Click me</A>
<SCRIPT>タグのLANGUAGE="JavaScript"は省略可能ですが、記述しておいた方が無難でしょう。 LANGUAGE="JavaScript1.1"とすることにより、JavaScript1.1相当をサポートしたブラウザのみスクリプトを実行させることができます。 これにより、ブラウザのバージョンに応じた記述を行うことが可能になります。
LANGUAGE IE2.0 IE3.0 IE4.0 NN2.0 NN3.0 NN4.0 JavaScript × ○ ○ ○ ○ ○ JavaScript1.0 × × × × × × JavaScript1.1 × × ○ × ○ ○ JavaScript1.2 × × ○ × × ○ JScript × ? ○ × × ×
JavaScriptに対応していないブラウザが <SCRIPT>〜</SCRIPT>で囲まれたコード部分を表示してしまうのを防ぐために、JavaScriptのコードは <!-- と // --> でコメントアウトしておきます。 // -->の後ろにはJavaScriptに未対応のブラウザに対するメッセージを記述することもできます。 また、NN3.0、IE3.0では<NOSCRIPT>もサポートされました。<SCRIPT> <!-- (1) JavaScriptの記述 // --> (2) JavaScript未対応ブラウザに対するメッセージ </SCRIPT> <NOSCRIPT> (3) JavaScript未対応のブラウザに対するメッセージ </NOSCRIPT>(2)と(3)はどちらかに記述しておけばよいのですが、困った問題があります。 (2)のみに記述するとJavaScript対応のブラウザを「JavaScriptを使用しない」モードで表示した場合に(2)も(3)も表示されません。 (3)のみに記述すると<NOSCRIPT>に対応していないNN2.0が(1)を実行した上で(3)を表示してしまいます。 誰か改善策を知らないでしょうか・・・
HTMLの規約に従えば、<SCRIPT>〜</SCRIPT> の間では、タグの終了判断があやふやになるため、むやみに "</" が出現してはならないそうです。例えば、document.write("<B>とほほ</B>");というのは、document.write("<B>とほほ<" + /B>");とかdocument.write("<B>とほほ<\/B>");と記述すべきなんだそうです。(私もサボっていますけど。)
JavaScript中で使用する変数名や関数名にはアンダーバー ( _ )を含む半角英数文字を使用することができます。 ただし、数字で始まる変数名は認められません。 たとえば age や func345 はOKですが、99abc や abc-def はNGです。 大文字と小文字は別の文字として区別されますので注意しましょう。
JavaScriptでは以下の型があります。 型を調べるにはNN3.0でサポートされたtypeofを用います。
number 数値。→ Number string 文字列。→ String boolean 真偽値。→ Boolean object オブジェクト。→ Object function 関数。→ Function
JavaScriptでは標準で用意されているオブジェクトのほか、以下のようにしてユーザー定義のオブジェクトを生成することができます。<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function getName() { return(this.name); } function getAge() { return(this.age); } function Person(name, age) { this.name = name; this.age = age; this.getName = getName; this.getAge = getAge; } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> p = new Person("Suzuki", 28); document.write(p.getName(), "<BR>"); document.write(p.getAge(), "<BR>"); </SCRIPT> </BODY> </HTML>functionにより、Personオブジェクトを宣言します。 これはnameとageをプロパティとして持ち、getName()とgetAge()をメソッドとして持ちます。 Personオブジェクトを使用するには new 演算子を用います。