とほほのJavaScript入門(概要)

2000年3月26日版

JavaScriptとは？

JavaScriptはNetscape社が開発したスクリプトです。 Javaと名前は似ていますが「まったく別物」です。英語とドイツ語以上に異なります。
JavaScriptを用いることによりブラウザは、HTML文書を単に表示するだけでなく、次のようなことができるようになります。

フォーム入力値をサーバーに送信する前にチェックする。
時刻によって表示するメッセージを変える。
その気になればWebページ上でゲームもできてしまう。
まずは「サンプル(簡易電卓)」を見てみましょう。

JavaScriptの歴史

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オブジェクトなど）を排除した、純粋な言語仕様です。 (→ http://www.ecma.ch/)
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よりも数段優れた物に仕上がっています。
Netscape Navigator 4.06/4.5(JavaScript 1.3)
Netscape社は、4.06および4.5のマイナーバージョンアップリリースで、JavaScript1.3をサポートしました。JavaScript1.2からの変更点は以下の通り。
・Unicodeの採用。
・新しい演算子(===, !==)のサポート
・新しい特別変数(NaN, Infinity, undefined)の追加
・新しいビルトイン関数(isFinite())の追加
・toSource()の追加、toString()の仕様変更
・Dateオブジェクトでミリ秒,UTC時間の扱いを強化
・クラス継承の仕組み(call(), apply())をサポート
・若干の仕様変更(push(), splice(), replace())
・if文の中で代入演算が可能に
・Array()の仕様変更

JavaScriptの注意

あたりまえのことですが、JavaScriptをサポートしていないブラウザでは動きません。もしサポートしていても、オプションなどでJavaScriptの使用がオフになっていたりすると動きませんので注意してください。
JavaScriptはNNやIEのバージョンによってかなり動作が異なります。手持ちのブラウザで動作が確認できても、他のブラウザや古いブラウザやMacのブラウザでは動かないかもしれません。慣れない使用方法の場合は、動かないことの方が多いくらいです。HTMLなら未サポートタグは単に無視してくれるのですが、JavaScriptの場合はエラーダイアログを表示することになるのでかなり鬱陶しがられることになるでしょう。
古いバージョンのブラウザでは、JavaScriptでの日本語の処理がうまくいかない場合が多いようです。文字化けが発生したりすることがよくあります。
バグは多いです。例えば、document.write()を用いたページを印刷すると<や>の個所が無茶苦茶に印刷されてしまったり、ブラウザウィンドウをリサイズすると画面が乱れたり・・・バグだらけです。
JavaScriptのバージョンによって、基本的な動作に関して仕様変更が行われたりしています。たとえば、if ("3" == 3) を真と判断したり、偽と判断したりするバージョンが混在します。今後は、ECMAScriptを標準として統一が計られていくと思いますが、もうしばらくは過渡期がが続きそうです。

使用例

「Hello world!!」と表示するプログラムをJavaScriptで書いてみます。以下のような内容のファイルを用意して、JavaScript対応ブラウザで表示してみてください。
    <HTML>
    <HEAD>
    <TITLE>JavaScript Sample</TITLE>
    </HEAD>
    <BODY>
    <SCRIPT LANGUAGE="JavaScript">
     このページは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>

LANGUAGE属性

<SCRIPT>タグのLANGUAGE="JavaScript"は省略可能ですが、記述しておいた方が無難でしょう。LANGUAGE="JavaScript1.1"とすることにより、JavaScript1.1相当をサポートしたブラウザのみスクリプトを実行させることができます。

IE NN

2.X 3.X 4.X 5.X 2.X 3.X 4.00
～
4.05 4.06
4.5

JavaScript × ○ ○ ○ ○ ○ ○ ○

JavaScript1.0 × × × × × × × ×

JavaScript1.1 × × ○ ○ × ○ ○ ○

JavaScript1.2 × × ○ ○ × × ○ ○

JavaScript1.3 × × × ○ × × × ○

JScript × ？ ○ ○ × × × ×

ただし、LANGUAGE="JavaScript" と指定した場合と、LANGUAGE="JavaScript1.2" や LANGUAGE="JavaScript1.3" と記述した場合では、JavaScriptの動作が異なる場合がありますので注意してください。(→「JavaScriptの文字列と数値について」)
また、NN3.0では、LANGUAGE="JavaScript1.2"と指定していても、SRC="xxx.js" で指定したファイルを読み込んで実行してしまうというバグがあるそうです。
HTML4.0では、LANGUAGE属性に代わるものとして、TYPE属性が追加されました。(→<SCRIPT>)

	IE	NN
2.X	3.X	4.X	5.X	2.X	3.X	4.00 ～ 4.05	4.06 4.5
JavaScript	×	○	○	○	○	○	○	○
JavaScript1.0	×	×	×	×	×	×	×	×
JavaScript1.1	×	×	○	○	×	○	○	○
JavaScript1.2	×	×	○	○	×	×	○	○
JavaScript1.3	×	×	×	○	×	×	×	○
JScript	×	？	○	○	×	×	×	×

JavaScript未対応ブラウザへの配慮

JavaScriptに対応していないブラウザが <SCRIPT>～</SCRIPT>で囲まれたコード部分を表示してしまうのを防ぐために、JavaScriptのコードは  でコメントアウトしておきます。 // -->の後ろにはJavaScriptに未対応のブラウザに対するメッセージを記述することもできます。また、NN3.0、IE3.0では<NOSCRIPT>もサポートされました。
    <SCRIPT>
     (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です。大文字と小文字は別の文字として区別されますので注意しましょう。また、if や while などの予約語も使用することができません。

型の種類

JavaScriptでは主に以下のような型があります。型を調べるにはNN3.0でサポートされたtypeofを用います。JavaScriptの数値型と文字列型にはやっかいなふるまいもありますので、詳細は「JavaScriptの文字列と数値について」を参照してください。

number 数値。→ Number

string 文字列。→ String

boolean 真偽値。→ Boolean

object オブジェクト。→ Object

number	数値。→ Number
string	文字列。→ String
boolean	真偽値。→ Boolean
object	オブジェクト。→ Object

特別変数

true (e3/N2)
「真」を表す特別な値。
false (e3/N2)
「偽」を表す特別な値。
null (e3/N2)
値無しを表す特別な値。
undefined (e?/N45)
定義されていないことを示す特別な値。
NaN (e4/N45)
数値でない(Not a Number)ことを表す特別な値。
Infinity (e4/N45)
有限であることを表す特別な値。