JavaScript,Ajax,DOMによるWebアプリケーションスーパーサンプル

JavaScript,Ajax,DOMによるWebアプリケーションスーパーサンプル 表紙

本書のお求めはこちらから

136本定番サンプルを掲載

Webコンテンツ制作者、必携!

  • ナビゲーション画面から手軽に動作確認
  • すぐに引ける便利なプロパティ・メソッドのリファレンス74項目も併せて掲載

 futomi の 4 冊目の著書が完成しました!Perl/CGI本Ajax本DOM本に続き、今度は DOM や AJAX をトータルにカバーした JavaScript モダンスクリプティングがテーマです。

本書で解説しているサンプルスクリプトの一部を、本コーナーにて公開しています。下の目次欄の [Sample Script] をクリックしてご覧下さい。

著者
羽田野 太巳
ISBN
978-4-7973-4121-8
本体価格
2,993円(税込)
ページ数
308
発売開始日
より順次
サイズ
B5変型判
出版
ソフトバンククリエイティブ株式会社

「まえがき」より

近年のウェブアプリケーションは、華やかなビジュアルとともに利用者に驚きを与える反面、それを支えるプログラミングは複雑さを増しています。ブラウザー側で動作するJavaScriptも例外ではありません。JavaScriptは、ブラウザー側で直接ビジュアルを自由に操作できることから、その重要性は増すばかりです。

JavaScriptを使ってビジュアルを自由に操るためには、旧来の手法にかわってDOMやAjaxのテクニックが求められます。多くのブラウザーがこれらの機能を実装し、現在では実用段階に至っています。DOMやAjaxといったテクニックは、JavaScriptを扱うデザイナー、プログラマーには必須の知識になったと言えるでしょう。

80:20の法則を聞いたことがあるのではないでしょうか。例えば、売上の8割は、全従業員のうちの2割で生み出している、といった具合に経験則を表すものです。これはプログラミングにも当てはまるのではないでしょうか。JavaScriptのすべての知識とテクニックを知らなければ、リッチなウェブアプリケーションが作れないということはありません。2割の知識、テクニックで、やりたいことの8割はカバーできると常々感じます。

DOMやAjaxは、概念的で理解しにくいテーマです。しかし、本書では、難しい理論は抜きにして、まずは経験して頂くことを重点に構成されています。実践でよく使う知識、テクニックを必要最小限に抑え、厳選したものだけを取り上げました。この必要最小限のテクニックだけで、本書で取り上げるケーススタディを実現できるということを体感して頂けるでしょう。

最初は細かいところは理解できなくても構いません。本書で作成していくサンプルは汎用的に作られていますので、まずはそれを使ってみることから始めてください。細かい知識やテクニックの理解はそれからでも遅くはありません。初歩が理解できたら、次は、本書で作成していくサンプルを自分好みにアレンジて行くのも良いでしょう。

本書が、みなさんのJavaScriptへの興味を引き、少しでも多くの方がJavaScriptの楽しさを分かっていただければ幸いです。

目次

第1章 DOMの概要

1.1 DOMの基本を理解しよう
1.1.1 DOMとは
1.1.2 DOMドキュメントツリー
1.1.3 ノードオブジェクト
1.1.4 インタフェース
1.2 DOMスクリプティングのことはじめ
1.2.1 ブラウザの互換性
1.2.2 JavaScriptがいつ実行されるのかを知ろう

第2章 HTML文書の内容を操ろう [Sample Script]

2.1 HTML内の要素を特定しよう
2.1.1 id属性値から要素を特定する
2.1.2 タグ名から要素を特定する
2.1.3 name属性名から要素を特定する
2.1.4 子要素を取り出す
2.1.5 最初と最後の子要素を特定する
2.1.6 子要素の存在をチェックする
2.1.7 親要素を特定する
2.1.8 前後の要素を特定する
2.1.9 要素のテキストを取り出す
2.1.10 要素のタグ名を取り出す
2.1.11 要素のタイプを取り出す
2.1.12 ホワイトスペースノードを除外する
2.1.13 タグの中からテキスト情報だけを抜き出す
2.2 要素の内容を変更しよう
2.2.1 新たに要素を作成し挿入する
2.2.2 ある要素の直前に要素を挿入する
2.2.3 1つの要素を削除する
2.2.4 子要素をまとめて削除する
2.2.5 要素をコピーする
2.2.6 要素を置き換える
2.3 タグ属性値を操作しよう
2.3.1 DOMのタグ属性の扱いについて
2.3.2 属性名から属性値を読み取る
2.3.3 すべての属性値を読み取る
2.3.4 属性をセットする
2.3.5 属性プロパティ vs. getAttirbute/setAttributeメソッド
2.4 ケーススタディ ~テキストのテロップ表示など~
2.4.1 テキストのテロップ表示
2.4.2 バナーローテーション(スライドショー)

第3章 イベント [Sample Script]

3.1 イベント・リスナーを使いこなそう
3.1.1 イベントの概要
3.1.2 イベント・ハンドラの問題点
3.1.3 イベントの概念
3.1.4 イベント・リスナーをセットする
3.1.5 イベント・リスナーを解除する
3.1.6 イベント・ターゲットを特定する
3.1.7 イベントの種類を特定する
3.1.8 デフォルト・アクションを抑止する
3.1.9 イベントの伝播を抑止する
3.2 マウスのイベントをキャッチしよう
3.2.1 マウス・イベントの概要
3.2.2 押されたマウス・ボタンを特定する
3.2.3 マウスの座標を特定する
3.2.4 shift/ctrl/metaキーと同時に押されたかを判定する
3.3 ケーススタディ ~シャドー・レイヤつきサムネイル拡大表示など~
3.3.1 ドラッグできる子ウィンドウ表示
3.3.2 シャドー・レイヤつきサムネイル画像拡大表示
3.3.3 オリジナルのダイアログ表示
コラム:innerHTMLとDOM

第4章 フォーム [Sample Script]

4.1 フォームの基本を理解しよう
4.1.1 FORMタグを特定する
4.1.2 すべてのフォーム・コントロールを取り出す
4.1.3 フォーム・コントロールを入力不可にする
送信直前にJavaScriptの処理を入れる
4.2 テキストボックス/テキストエリアのデータを操作しよう
4.2.1 入力された文字を取り出す
4.2.2 デフォルトの入力文字を取り出す
4.3 セレクトメニューのデータを操作しよう
4.3.1 選択項目の一覧を取り出す
4.3.2 選択項目のテキストを取り出す
4.3.3 選択項目を判定する
4.4 ラジオボタン/チェックボックスのデータを操作しよう
4.4.1 チェックの状態を判定する
4.4.2 デフォルトでチェックされていたかを判定する
4.4.3 チェック項目のテキストを取り出す
4.5 ケーススタティ ~テキストボックスの入力制御など~
4.5.1 半角数字しか入力できないテクストボックス
4.5.2 ファンシー・コントロール
コラム:NodeListは配列ではない

第5章 スタイルシート [Sample Script]

5.1 CSSのインラインうスタイルを操作しよう
5.1.1 インラインスタイルの宣言をセットする
5.1.2 インラインスタイルの宣言を取り出す
5.2 スタイルシートを操作しよう
5.2.1 スタイルシートの属性情報を操作する
5.2.2 スタイルシートを特定する
5.2.3 CSSルールを操作する
5.2.4 CSS宣言を操作する
5.3 コンピューテッド・スタイルを読みだそう
5.3.1 コンピューテッド・スタイルの概要
5.3.2 コンピューテッド・スタイルのCSS情報を取り出す
5.3.3 標準モードと互換モードを判別する
5.4 ケーススタディ ~フォントサイズを動的に変更~
5.4.1 フォントサイズ・スイッチャー
5.4.2 フォントサイズ・ディテクター
コラム:本当に要素は消えたのか?

第6章 Ajax+DOM [Sample Script]

6.1 Ajaxの基本を理解しよう
6.1.1 Ajaxとは
6.1.2 XMLHttpRequestオブジェクトを生成する
6.1.3 XMLHttpRequestオブジェクトの使い方
6.1.4 XMLHttpRequestオブジェクトのメソッドとプロパティ
6.2 Ajaxの実践 ~XMLデータの取得、キャッシュの制御など~
6.2.1 テキストデータを取得する
6.2.2 XMLデータを取得する(RSSを読み取る)
6.2.3 キャッシュを制御する
6.2.4 他のサイトのコンテンツを読み込む
6.2.5 画像ポップアップ
6.3 ケーススタディ ~お天気Webサービスなど~
6.3.1 livedoorお天気Webサービスで天気予報を表示する
6.3.2 Yahoo!ウェブ検索Webサービスでサイト内検索
コラム:標準化の動向

第7章 オブジェクト指向でいこう

7.1 オブジェクトの基本を理解しよう
7.1.1 JavaScriptはオブジェクト指向プログラミング言語
7.1.2 参照と実体
7.1.3 プロミティブ値
7.1.4 関数オブジェクト
7.1.5 プロパティとメソッド
7.1.6オブジェクトの表記法
7.2 オブジェクト指向プログラミングを理解しよう
7.2 1 new演算子
7.2.2 prototypeプロパティ
7.2.3 prototypeプロパティによる継承
7.2.4 パッケージング
7.2.5 オブジェクト指向プログラミングの実践

改訂履歴

2.1.4 子要素を取り出す(P22) 「childNodes.html」

</div>が抜けておりました。

改訂前
  </div>
</body>
改訂後
  </div>
</div>
</body>