[[PageOutline]] = !JavaScript チュートリアル = == !JavaScript って何? == PC 上で動作する主要な Web ブラウザに必ずと言っていいほど搭載されているスクリプト言語です。 単体で動作する !JavaScript インタプリタも存在しますが、主な用途は基本的には Web アプリケーションのクライアントサイドプログラムとなります。 === クライアントサイドプログラムとは? === CGI がブラウザ (クライアント) からの要求を受けてサーバーサイドでプログラムを動作させる仕組みであるのに対し、ブラウザ上、すなわちクライアントサイドでプログラムを動作させる仕組みのことをこう呼んでいます。 元々は、サーバーとの通信を必要としない動作 (画面表示の動的な変化、等) を記述する目的で使われていましたが、 Ajax と呼ばれる通信機能により、最近ではページ読み込みの待ち時間によるストレスを感じさせない UI 作りや、Google Map に代表されるようなリッチな UI の実装などに大きく貢献するようになってきています。 == とりあえず使ってみよう == === どうやって使うの? === !JavaScript は HTML と一緒にブラウザに読み込ませて使います。従って、基本的には HTML ファイルの中に直接記述してしまいますが、別ファイルに !JavaScript のスクリプトファイル単体として記述することも可能です。 まずは、最も簡単な例から見てみましょう。以下のサンプルプログラムは、ブラウザ上に「hoge」と書かれたボタンが表示され、それをクリックすると、メッセージボックスに「hoge」と表示する、というものです。 {{{ hoge
}}} === 動かしてみる === 上記のサンプルプログラムをテキストエディタに記述したら、拡張子 .html で保存し、そのファイルを Web ブラウザ (IE、Firefox、Safari、Opera、etc...) にドラッグ＆ドロップするなどして読み込ませれば動かせるはずです。 IE の場合、画面上部に警告メッセージの黄色い帯が表示されるかも知れませんが、その場合は帯の部分をクリックし、表示されるコンテキストメニューの「ブロックされているコンテンツを許可...」を選択してください。 === イベントハンドラ === 上記のサンプルの中で、 !JavaScript が用いられているのは、以下の部分です。 {{{ }}} 要素に onclick という属性が存在し、その値として、 !JavaScript によるプログラムが記述されています。 onclick 属性は、その要素がクリックされたときに、値に指定されたプログラムを実行せよ、という意味のものです。この手の属性は、他にも以下のようなものが存在します。(本当は他にももっといろいろ存在します…) * onmousemove ... その要素が表示されている箇所でマウスカーソルが動いたら、プログラムを実行する。 * onmousedown ... その要素が表示されている箇所にマウスカーソルが存在するときに、マウスのボタンが押し下げられたら、プログラムを実行する。 (onclick が押して放さないと認識されないのに対し、こちらは押しただけで認識される) * onmouseup ... その要素が表示されている箇所にマウスカーソルが存在するときに、マウスのボタンが放されたら、プログラムを実行する。 * onkeydown ... キーボードのキーが押されたら、プログラムを実行する。 * onkeyup ... キーボードのキーが放されたら、プログラムを実行する。 * onload ... HTML ファイルが読み込まれたら、プログラムを実行する。 * onfocus ... その要素にフォーカスが移ったら、プログラムを実行する。例えば、入力欄をクリックするなどしてカーソルが表示されるようになるタイミングで、その入力欄の 要素に onfocus 属性があれば、その値が実行される。 * onchange ... コンボボックス (
}}} さて、先ほどのプログラムと比べると、今回のプログラムはかなり複雑です。今はプログラムの内容は気にせず、プログラムが記述されている場所と、その雰囲気に注目してください。 先ほどと同様、今回も タグには onclick 属性が指定されています。 {{{ }}} しかし、そこに書かれているのは、 putHoge という名前の、恐らくは関数呼び出しに見える (後ろに丸かっこが付いているので) もののみが記述されています。 HTML ファイルの上の方に、なんだか見慣れない記述がありますね。以下の部分です。 {{{ }}} この、 }}} === !JavaScript のみを別ファイルに記述する ===
}}} そして、 hoge.js ファイルは以下のような内容となります。といっても、前のサンプルで

に読み込まれました。

}}} document.write() メソッドを用いることにより、

これは、innerHTML プロパティのテストです。

}}} それでは解説していきましょう。まず、 HTML を参照しようとしている

要素についてですが、 {{{

これは、innerHTML プロパティのテストです。

}}} よく見ると、

タグに '''id 属性''' が記述されています。こうすることで、個々の HTML 要素にユニークな ID を指定することができます。 これを踏まえて、ボタンをクリックしたときに呼び出される lookInnerHtml() 関数の実装を見てみましょう。 {{{ function lookInnerHtml() { var p = document.getElementById("main_paragraph"); // HTML を参照したいパラグラフを取得 alert(p.innerHTML); // HTML をメッセージボックスに表示する } }}} '''document''' オブジェクト (言うまでもなく、正式名称は window.document です) は、Web ブラウザに読み込まれた HTML 文書を操作する際に用いるオブジェクトです。 window オブジェクトと同様、さまざまな機能があり、多くの属性とメソッドを持っていますが、その中でも document.getElementById() メソッドは、今後もっとも頻繁に利用するメソッドの一つです。このメソッドは、先ほどの id 属性に記述した ID で HTML 要素を検索し、その HTML 要素をオブジェクトとして取得する、というものです。 すなわち、 {{{ var p = document.getElementById("main_paragraph"); // HTML を参照したいパラグラフを取得 }}} と記述することによって、変数 p に、「main_paragraph」という ID が設定された要素、すなわち先ほどの

タグが、 !JavaScript 言語で扱うオブジェクトとなって代入される、という処理が行われることになります。 次に、いつもの alert() メソッドによってメッセージボックスを表示しようとしていますが、その引数に注目してください。 {{{ alert(p.innerHTML); // HTML をメッセージボックスに表示する }}} document.getElementById() メソッドなどによって取得された HTML 要素オブジェクトも、これまたさまざまな属性やメソッドを持っています。その中の一つ、 innerHTML 属性は、まさにその属性が内包する HTML そのものを、文字列として保持する、というものです。これによって、

～

の間に挟まれている文の HTML が、メッセージボックスにそのまま表示される、というわけです。 それでは、逆にこの innerHTML 属性に対して文字列を代入した場合、何が起きるでしょうか? すでにご想像の通り、まさに、代入したとおりに HTML が書き換わり、その内容に合わせて画面の表示も変化します!! 以下のサンプルプログラムは、入力欄に HTML の文字列を入力し、ボタンを押すと、下の枠の中に、入力した HTML を Web ブラウザが解釈した結果が表示される、というものです。