JavaScript

クライアントサイド JavaScript

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

▼ location プロパティを設定することで、新しい Web ページを読み込ませる
window.location = "https://wot.exp.jp";

 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 プロパティがあります。この 2つのプロパティを使って、スクリプトからドキュメント要素の 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 アプリケーションは動作しません。