クライアントサイド JavaScript

　クライアントサイド JavaScriptのすべての機能や APIの窓口となるのが、Windowsオブジェクトです。Windowsオブジェクトは、ブラウザウィンドウやフレームを表すものです。windowという識別子を使えば、Windowsオブジェクトを参照できます。Windowsオブジェクトには、さまざまなプロパティが定義されています。例えば、locationプロパティは、ウィンドウに現在表示されている URLを表す Locationオブジェクトを参照します。また、この locationプロパティを使って、スクリプトからウィンドウに新しい URLを読み込ませることもできます。

locationプロパティを設定することで、新しい Webページを読み込ませる


window.location = "https://www.yugien.xyz/";

　Windowオブジェクトには、メソッドも定義されています。例えば、alert()メソッドはダイアログボックス中にメッセージを表示します。また、setTimeout()メソッドは、指定された時間経過後に関数が呼び出されるようにします。

2秒後にあいさつを表示する


setTimeout(function() { alert("hello world"); }, 2000);

　このコードでは、明示的には windowプロパティを使ってはいません。これは、クライアントサイド JavaScriptでは、Windowオブジェクトはグローバルオブジェクトだからです。つまり、Windowオブジェクトはスコープチェーンの先頭にいるので、Windowオブジェクトのプロパティやメソッドは事実上グローバル変数やグローバル関数になります。Windowオブジェクトは、自分自身を参照する windowプロパティを持ちます。Windowオブジェクト自信を参照したい場合には、この windowプロパティを使ってください。ただし、グローバル Windowオブジェクトのプロパティにアクセスしたい場合、普通は、windowプロパティを使う必要はありません。

　Windowオブジェクトには、このほかにもたくさんの重要なプロパティやメソッド、コンストラクタが定義されています。

　Windowオブジェクトのプロパティの中で非常に重要なものが documentプロパティです。この documentプロパティは、ウィンドウ中に表示されているコンテンツを表す Documentオブジェクトを参照します。Documentオブジェクトには、さまざまな重要なメソッドがあります。例えば、getElementById()メソッドは、id属性の値を使って、ドキュメント要素を検索し返します。ドキュメント要素とは、HTMLタグのペアと、その間に含まれるコンテンツすべてのことです。

id="timestamp" の要素を探す


var timestamp = document.getElementById("timestamp");

　getElementById()から返される Elementオブジェクトは、重要なプロパティやメソッドを持ちます。これらのプロパティやメソッドを使うことで、スクリプトからコンテンツを取得したり、属性に値を設定したりできます。

要素が空の場合は、現在の日付と時刻を挿入する


if (timestamp.firstChild == null)
	timestamp.appendChild(document.createTextNode(new Date().toString()));

　ドキュメントコンテンツを取得したり、調べたり、修正したりする方法については、別ページで説明予定です。

　Elementオブジェクトには、styleプロパティと classNameプロパティがあります。この２つのプロパティを使って、スクリプトからドキュメント要素の CSSスタイルを指定したり、要素に適用する CSSクラス名を変更したり出来ます。このような CSS関連のプロパティを設定すれば、ドキュメント要素の見た目を変更できます。

要素の見た目を直接変更する


timestamp.style.backgroundColer = "yellow";

または、クラスを変更して、スタイルシートで設定する


timestamp.className = "highlight";

　styleプロパティや classNameプロパティをはじめとして、CSSを制御する方法については、別ページで説明予定です。

　Window、Document、Elementオブジェクトには、この他にも重要なプロパティがあります。それはイベントハンドラプロパティです。このイベントハンドラプロパティを使えば、スクリプトから、あるイベントが発生したときに非同期に呼び出される関数を指定できます。イベントハンドラにより、JavaScriptコードから、ウィンドウやドキュメント、ドキュメントを構成する要素の振る舞いを変更できます。イベントハンドラプロパティの名前は、「on」から始まります。例えば、次のように使います。

ユーザがクリックしたときに timestamp要素のコンテンツを更新する


timestamp.onclick = function() { this.innerHTML = new Date().toString(); }

　イベントハンドラの中でも、非常に重要なイベントハンドラが Windowオブジェクトの onloadハンドラです。ウィンドウに表示されるドキュメントのコンテンツが落ち着いて操作可能になったら、onloadハンドラが呼び出されます。JavaScriptコードは、onloadイベントハンドラ中に記述するのが普通です。イベントについては、別ページで取り上げます。下の例では、onloadハンドラの使い方を紹介します。また、ドキュメント要素を取得したり、CSSクラスを変更したり、イベントハンドラを定義したりするクライアントサイド JavaScriptコードも、この例で示します。この例では、HTMLの <script>要素中に JavaScriptコードを記述しています。<script>要素についても、別ページで説明予定です。このコードでは、関数中で別の関数を定義しています。クライアントサイド JavaScriptでは、イベントハンドラを多用するので、入れ子型の関数がよく使われます。

コンテンツを見えるようにするクライアントサイド JavaScript


<!DOCTYPE html>
<html>
<head>
<style>
/* このページ用の CSS スタイル */
.reveal * { display: none; }         /*  */
.reveal *.handle { display: block; } /*  */
</style>
<script>
// ドキュメント全体が読み込まれるまで何もしない。
window.onload = function() {
	// クラス "reveal" の要素をすべて探す。
	var elements = document.getElementsByClassName("reveal");
	for(var i = 0; i < elements.length; i++) { // 要素ごとに、
		var elt = elements[i];
		// この中で "handle" 要素を探す。
		var title = elt.getElementsByClassName("handle")[0];
		// その要素がクリックされると、残りのコンテンツも見えるようにする。
		title.onclick = function() {
			if (elt.className == "reveal") elt.className = "revealed";
			else if (elt.className == "revealed") elt.className = "reveal";
		}
	}
};
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle">Click here to Reveal Hidden Text</h1>
<p>This paragraph is hidden. It appears when you click on the title.</p>
</div>
</body>
</html>

　Webページによってはドキュメントのようなものや、アプリケーションのようなものがあります。これから、項を分けて、それぞれの Webページでの JavaScriptの使い方についてまとめておきます。

Webドキュメントの中での JavaScript

　JavaScriptプログラムから、Documentオブジェクトや Elementオブジェクトを使って、ドキュメントのコンテンツを調べたり、操作したり出来ます。CSSスタイルやクラスをスクリプトから制御すれば、ドキュメントの見た目も変更できます。また、適切にイベントハンドラを登録すれば、ドキュメント要素の振る舞いを定義できます。スクリプトを使って、コンテンツや見た目、振る舞いを制御することを、ダイナミックHTML または DHTMLと呼びます。

　Webドキュメント中で JavaScriptを使うときは、慎重に、かつ控えめにするのが普通です。JavaScriptの役割は、ユーザーが情報を取得したり送信したりしやすくすることです。JavaScriptがなければ利用できないようなページを作るべきではありません。あくまで、ページを読みやすくするために、JavaScriptを使うべきです。例えば、以下のような方法です。

Webアプリケーションの中での JavaScript

　Webドキュメントと同じように、Webアプリケーションでも、JavaScriptの DHTML機能を使います。さらに、コンテンツや見た目、振る舞いを操作する APIだけでなく、Webブラウザ環境が提供する基本サービスも利用しています。

　Webアプリケーションを本当に理解するには、Webブラウザが、そもそものドキュメントを表示するツールという役割を越えた存在になっていることを実感しておく必要があります。Webブラウザは、今では、ある意味オペレーティングシステムのような存在になっています。少し比較してみましょう。従来のオペレーティングシステムでは、デスクトップやフォルダ中で、（ファイルやアプリケーションを表す）アイコンを整理できるようになっています。Webブラウザでは、ツールバーやフォルダの中で、（ドキュメントや Webアプリケーションを表す）ブックマークを整理できるようになっています。OSでは、複数のアプリケーションを別々のウィンドウで実行します。Webブラウザでは、複数のドキュメント（やアプリケーション）を別々のタブで表示します。OSでは、ネットワークやグラフィック描画、ファイル保存などの低レベル APIを定義しています。Web ブラウザでは、ネットワークやデータ保存、グラフィック描画などの低レベル APIを定義しています。

　Webブラウザは単純な OSのようなものだ、と思えば、Webアプリケーションは次のように定義できます。JavaScriptを使って、ブラウザから提供されるネットワークやグラフィック、データ保管などの高度なサービスにアクセスする Webページが、Webアプリケーションです。このような高度なサービスのうち最も有名なものが、XMLHttpRequestオブジェクトです。このオブジェクトを使うことで、HTTPリクエストをスクリプトから制御してネットワークを利用できます。Webアプリケーションでは、このサービスを使って、ページを再読み込みすることなく、サーバーから新しい情報を取得します。このような処理を行う Webアプリケーションを、よく Ajaxアプリケーションと呼びます。また、このようなアプリケーションの総称として「Web 2.0」という言葉もよく使われます。

　HTML5仕様や関連する仕様で、Web アプリケーション用の重要な APIが数多く定義されています。このような APIには、データ保管やグラフィックAPI 、位置情報、履歴管理、バックグラウンドスレッドが含まれます。このような APIが実装された時には、Webアプリケーションの機能は飛躍的に向上することでしょう。

　もちろん、Webドキュメントの場合よりも Webアプリケーションの場合のほうが、JavaScriptの役割は大きくなります。JavaScriptは Webドキュメントを使いやすくするものではあります。ただし、よく設計された Webドキュメントであれば、JavaScriptなしでも利用できるようになっています。これに対して、Webアプリケーションは、Webブラウザが提供する OSのようなサービスを使う JavaScriptプログラムです。したがって、JavaScriptが無効になっていれば、Webアプリケーションは動作しません。