JavaScriptは、1995年に登場したブラウザ上で稼働するスクリプト言語で、今やWebサイトの構築や、HTML5でアプリケーションを作成するためには欠かすことのできない存在となっています。主要ブラウザのほとんどで稼働し、備えている機能自体は当初から最新のブラウザに至るまでこれまでほとんど変わっていないにも関わらず、時代によって使用方法が変遷してきました。中でもJavaScriptで非同期のHTTP通信を行う機能にAjax(Asynchronous JavaScript + XML)という名前が付けられる前後(2005年頃)ではその使用方法に大きな変化がありました。
Ajaxが登場(というよりは再認識)する以前は、現在のようにJavaScriptを使って大規模なアプリケーションを作成することはほとんどなく、大部分はHTMLやPHP(CGI)の機能を補完するためのサポート的な役割で使用されていました。つまり、マウスでロールオーバーした際に画像を入れ替えたり、サーバーの負荷を軽減させるためにフォームの入力内容を送信前にチェックしたりといったように、小規模でニッチな場面で多く使用されていました。またプログラムのコードも現在のように外部jsファイルにリスナーを記述してHTMLとプログラムを分離した手法ではなく、onclick属性などのようにタグの属性に直接コードを書く「イベントハンドラ」という手法が主流でしたので、HTMLコードとJavaScriptのコードがタグ内に混じり合って複雑になり、メンテナンスもしずらいものになりがちでした。Dreamweaverの機能にもこの当時の手法の名残でonXXX属性に直接JavaScriptのコードを書き込む機能があります。メニューバーの「挿入」＞「イメージオブジェクト」＞「ロールオーバーイメージ」でロールオーバーを挿入するとタグにonmouseover属性やonmouseout属性が追加されます。HTMLとJavaScriptのコードを分離する手法が主流になった今、このイベントハンドラを使用してみるとJavaScriptの関数が混ざり合って非常に複雑に見えます。
Ajaxは非同期通信とDOM(Document Object Model)の操作という2つの大きな柱から成り立っています。これらを組み合わせることにより要素を動的に追加して複雑な処理を実現したWebサイトの構築が可能になりました。またAjaxの処理のトリガーとなるイベントの検知はHTMLとプログラムコードの結びつきの強いイベントハンドラから、より依存度の低いイベントリスナーを使用する方式へと変わっていきました。
CSSによってHTMLコードを複雑にするテーブルレイアウトから<div>タグなどのBOX単位で構造を作るレイアウトや、positionプロパティを使用したHTMLの構造にとらわれない配置に変化し、加えて文字の色・大きさなどをHTMLに直接記述しなくなったことによりHTMLの構造が単純化していきました。こうした変化でDOM(Document Object Model)と呼ばれる要素にアクセスし大きさや色などのCSSプロパティを操作したり、HTML要素を追加・削除することができるなど静的なコンテンツであるHTMLを動的に変更することができますので、現在のアプリケーションの中核として必須の知識であると言えます。
イベントに対する処理方法には、イベントハンドラとイベントリスナーの2種類があり、イベントハンドラは前述したようにHTML要素のタグ内に直接処理を書く方法とタグの外に記述する方法があり、イベントリスナーはHTMLの外に記述する方法のみです。タグの外に記述する方法は、JavaScriptでDOMから取得したHTML要素に対して処理を行い、<head>タグ内や外部jsファイルに記述しますのでタグには手を加えないためHTMLコードがシンプルになります。イベントハンドラもイベントリスナーもタグの外に記述する方法がありますが、イベントハンドラは記述方法が感覚的にわかりやすい反面、同一イベントに対して複数のイベントハンドラを登録することができず、後から記述したイベントハンドラに上書きされてしまいます。
一方イベントリスナーは1つのイベントに対して複数のイベントリスナーを登録することができます。今日、JavaScriptでプログラミングする際は、自分ですべての処理を記述することは少なく、むしろ他のAjaxなどのライブラリと組み合わせて処理を完成させることが多くなっていますので、処理の上書きの心配がないイベントリスナーを使用したほうが安全と言えます。
メリット デメリット イベントハンドラ 記述が簡単でわかりやすい HTMLコードが複雑になる
複数の処理を登録できない(上書きされてしまう)イベントリスナー HTMLコードがシンプルになる
複数の処理を登録できる慣れるまで記述が難しい イベントハンドラとイベントリスナーの使用例です。HTMLタグ内に処理を記述するよりもタグの外に記述した方がHTMLがシンプルになります。
- 使用例 | イベントハンドラを使用した場合(HTMLコードに直接記述)
- <script type="text/javascript">
function1(){ ... }
function2(){ ... }
function3(){ ... }
</script>
<img onclick="function1()" onmouseover="function2()" onmouseout="function3()" src="sample.jpg" />
- 使用例 | イベントハンドラを使用した場合(HTMLコードの外に記述)
- <script type="text/javascript">
var imgObj = document.getElementById('imgSample');
imgObj.onclick = function1(){ ... }
imgObj.onmouseover = function2(){ ... }
imgObj.onmouseout = function3(){ ... }
</script>
<img id="imgSample" src="sample.jpg" />
- 使用例 | イベントリスナーを使用した場合
- <script type="text/javascript">
var imgObj = document.getElementById('imgSample');
imgObj.addEventListener('click', function1(){ ... })
imgObj.addEventListener('mouseover', function2(){ ... })
imgObj.addEventListener('mouseout', function3(){ ... })
</script>
<img id="imgSample" src="sample.jpg" />Ajaxが登場して以降、DOM/イベントリスナー/HTTP非同期通信を利用したJavaScriptのプログラミングを行うやり方が主流となっています。また、HTML+CSS+JavaScriptでアプリケーションを作成する際には、ボックスのサイズや文字の色・大きさはCSSに、HTML要素に対する処理はイベントリスナーにといったようにそれぞれの役割をHTMLファイルから分離してHTMLの構造を極力シンプルにすることが基本です。
プログラマーやエンジニアの方はともかくとして、Webデザイナーの方で普段JavaScriptに慣れ親しんでいない人にとっては何やら難しく思ってしまうかもしれませんが、いくつかの定型的な書き方を次ページにて紹介します。
Dreamweaverで作るiPhone/Androidアプリ入門
- 定型1 | ID名で指定したHTML要素の取得
- var object = document.getElementById('sample');
- 定型2 | CLASS名で指定したHTML要素の取得(複数の要素が戻ります)
- var object = document.getElementsByClassName('samples');
- 定型3 | タグ名で指定したHTML要素の取得(複数の要素が戻ります)
- var object = document.getElementsByTabName('samples');
- 定型4 | イベントリスナー:HTML読み込み完了時loadイベント
- window.addEventListener('load', function(){
//ここにHTML読み込み完了後に行いたい処理を記述
});
- 定型5 | イベントリスナー:HTML要素クリック時clickイベント
- object.addEventListener('click', function(){
//ここにクリック時に行いたい処理を記述
}, true);
- 定型6 | イベントリスナー:HTML要素マウスオーバー時mouseoverイベント
- object.addEventListener('mouseover', function(){
//ここにマウスオーバー時に行いたい処理を記述
}, true);
- 定型7 | イベントリスナー:HTML要素マウスアウト時mouseoutイベント
- object.addEventListener('mouseout', function(){
//ここにマウスアウト時に行いたい処理を記述
}, true);
- 定型8 | CSSの操作
- object.style.cssプロパティ名 = 値
例)
object.style.width = '200px'; //幅の変更
object.style.backgroundColor = '#000000'; //背景色の変更
※background-colorプロパティのように「ハイフン(-)」でつながれているプロパティはハイフンを取り、次の単語の頭文字を大文字にしてつなげます。