あなたのJavaScriptはWeb2.0時代についてこれるか?
DOMで新時代のWebアプリを目指せ!
futomi の 3 冊目の著書が完成しました!Perl/CGI本、Ajax本に続き、今度は DOM (JavaScript) がテーマです。Webアプリケーション開発には欠かすことができない JavaScript を、DOM という切り口で、実践的なサンプルを通して詳しく解説しました。サーバサイドのアプリケーション開発者だけではなく、ウェブデザイナーまでを巻き込むDOMのテクニックは、ウェブに携わるすべての方に必須のテクニックとなっていくことでしょう。本書は、ある程度 JavaScript を使ったことがある方であれば理解できるよう、ステップバイステップで解説しています。ぜひ、あなたも DOM を自分のものにしてください。
本書で解説しているサンプルスクリプトを、本コーナーにて公開しています。下の目次欄の [Sample Script] をクリックしてご覧下さい。
近年、Web2.0、Ajax、リッチクライアントといった新たな概念、技術手法などが取り上げられてきました。かつての手法では実現できなかった新たなWebアプリケーションやWebサービスが次々と立ち上がり、その効果も実証されてきました。
これらのWebアプリケーションやWebサービスには、ブラウザ側で動作するJavaScriptの存在は欠かすことができません。以前のように、デザイン(見た目)をよくするための表現を目的としたものだけではなく、動作や機能性を重視したものへと変貌しつつあります。JavaScriptによるリッチクライアント化は、今後、ますます重要になってくるでしょう。
かつてのJavaScriptは、ブラウザごとに実装が異なり、開発者はクロスブラウザ対策に悩まされてきました。また、リッチクライアント的な複雑な機能や動作にも限界がありました。さらに近年、SEO対策がさかんになり、HTML内部にJavaScriptのコードを埋め込むことすら敬遠される状況となっています。これまでのJavaScriptの手法だけでは、HTML内部にJavaScriptの断片すらまったく入れずに、高度な機能を実現することは非常に難しかったといえます。さらに、Ajaxの台頭により、JavaScriptでXMLをも扱うことが求められるようになってきました。
そこで、1 つの解決策が考案されてきました。それが本書のテーマとなるDOM(Document Object Model)です。
DOMはW3Cが策定した仕様ですが、その仕様書から引用すれば、「DOMとは、プログラムやスクリプトからダイナミックに、文書の内容・構造・スタイルにアクセセスでき、そしてそれをアップデートできる、プラットフォームや言語に依存しないインタフェースである」と説明されています。
近年、ボタンクリックやテキスト入力といったユーザーアクションにより、動的に画面が変化するようなWebアプリケーションをよく目にするようになったと思います。そう、GoogleのGmail、サジェスト、マップなどがこれにあたります。このようなアクションを実現するためには、前述の引用でいえば、「ダイナミックに文書の内容・構造・スタイルにアクセス・アップデートできる」という機能が必要になってきます。また、クロスブラウザ対策に悩むことなく、どのブラウザでも期待する動作を保証するためには、前述の引用でいえば、「プラットフォームや言語に依存しないインタフェース」が必要となるのです。
W3C DOMとはまさに、Web2.0、Ajax、リッチクライアントといった近年のキーワードを実現するために、縁の下を支える重要な技術なのです。今後、DOMなしに、リッチなアプリケーションは作れないといっても過言ではないでしょう。
W3C DOMの仕様書には「言語」にも依存しないとあります。W3C DOMはJavaScriptのためだけに策定されたものではありません。JavaScript以外にも、たとえば、FlashAction Script、Javaなどにも採用されています。W3C DOMは、今後のWebアプリケーションにおける標準仕様といってもよいでしょう。
リッチクライアントを実現するためには当然、ブラウザがW3C DOMに準拠していなければいけません。幸いなことに近年の主要なブラウザはW3C DOMに準拠してきており、環境の整備は着実に進んでいます。
本書ではJavaScriptに特化して、旧来のJavaScript手法と照らし合わせながら、W3CDOMの扱い方を解説していきます。また、コーディング・テクニックだけではなく、検索エンジンのロボット対策として注目されているSEO(Search Engine Optimization)に、DOMスクリプティングがどのようにかかわっていくのかについても、詳しく触れていきます。W3C DOMは、Webアプリケーション開発に携わるすべての人にとって、今後、必須の知識になるといえるでしょう。
あなたも、次世代Webアプリケーションの扉を開きませんか。本書がDOMスクリプティングによる新世界に誘います。
本書で紹介するスクリプトは、実際にこちらでご覧になれます。本書の理解に役立てていただければ幸いです。
本書で紹介しているすべてのサンプルコードは、こちらからダウンロードしてください。
ダウンロードしたらzipファイルを解凍してください。scriptフォルダー内にindex.htmlがございますので、ブラウザーでアクセスすると、各章で紹介したサンプルへのリンクページが表示されます。
<body>
<h1>DOMスクリプティング入門</h1>
<h2>目次</h2>
<div>
<li id="toc1">第一章</li>
<li id="toc2">第二章</li>
<li id="toc3">第三章</li>
</ul>
</body>
<body>
<h1>DOMスクリプティング入門</h1>
<h2>目次</h2>
<ul>
<li id="toc1">第一章</li>
<li id="toc2">第二章</li>
<li id="toc3">第三章</li>
</ul>
</body>
calc = new Object;
calc = new Object();
要素ノード[TITLE] の下に、要素ノード[ドキュメントツリーサンプル]が描かれているが、正しくは要素ノードではなくテキストノード。
要素ノード[TITLE] の下に、要素ノード[ドキュメントツリーサンプル]が描かれているが、正しくは、これは存在しない。
submit()
フォームを送信します。引数、戻り値はありません。呼び出した時点で実行されます。submitタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
submit()
フォームを送信します。呼び出した時点で実行されます。submitタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
reset()
フォームを初期値にリセットします。引数、戻り値はありません。呼び出した時点で実行されます。resetタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
reset()
フォームを初期値にリセットします。呼び出した時点で実行されます。resetタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
▼elementsプロパティ
▼elementsプロパティ
<h2>▼性別</h2>
<form action="#" id="form1" method="get">
<h2>▼性別</h2>
if( stylenode.sheet ) {
/* スタイル・シートのオブジェクト */
var stylesheet = linknode.sheet;
if( stylenode.sheet ) {
/* スタイル・シートのオブジェクト */
var stylesheet = stylenode.sheet;
たとえば、LINK要素のstyle属性値であれば、linknode.sheet.typeでなくても、linknode.typeで得られます。
たとえば、LINK要素のtype属性値であれば、linknode.sheet.typeでなくても、linknode.typeで得られます。
属性プロパティでtype属性値を取り出す場合は、linknode.mediaとなりますが、
属性プロパティでmedia属性値を取り出す場合は、linknode.mediaとなりますが、
<link href="eventhandler.css" type="text/css" rel="stypesheet" />
<link href="eventhandler.css" type="text/css" rel="stylesheet" />
box.stype.backgroundColor = '#ffffff';
box.style.backgroundColor = '#ffffff';
addEventListener1.jsでは、window.onloadによって、
addEventListener.jsでは、window.onloadによって、
box.removeEventListener(type, func, false);
elm.removeEventListener(type, func, false);
<link href="eventhandler.css" type="text/css" rel="stypesheet" />
<link href="eventhandler.css" type="text/css" rel="stylesheet" />
box.stype.backgroundColor = '#ffffff';
box.style.backgroundColor = '#ffffff';
/* デフォルト・アクションを抑止する */
/* デフォルト・アクションを抑止する */
dom.event.preventDefault(evt);
var select = document.getElementById('selectlink').
getElementsByTagName('SELECT').item(0);
var select = document.getElementById('selectlink').
getElementsByTagName('SELECT').item(0);
※紙面上、コードの途中で改行されて印刷されておりますが、実際には1行で記述します。