Ajaxライブラリ徹底活用 JavaScript Webプログラミング

概 要

JavaScriptとAjaxライブラリの使い方を基礎からしっかり解説したWebプログラミング入門書です。いままで「ホームページの味付け」と思われていたJavaScriptが、Web開発の重要な技術として再び注目されています。JavaSctiptで高度な表現を実現するにはライブラリを利用しますが、JavaSctiptの基礎が理解できていればライブラリを使うことは難しくありません。そこで本書では、JavaScriptの基礎から主なオープンソースライブラリの基本的な使い方までを一冊でまとめて解説しています。取り上げているライブラリはPrototype、script.aculo.us、jQuery、jQuery UI、Dojo、Yahoo! UIという人気のあるものを厳選。サンプルプログラムのダウンロードサービス付き。

著者 掌田津耶乃
価格 本体2800円(税別)
ISBN 978-4-7980-2431-8
発売日 2009/11/25
判型 B5変
色数 1色
ページ数 528
CD/DVD
対象読者 中級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Part_01 JavaScript言語編

Chapter_01 JavaScriptプログラミングの準備

01_01 JavaScriptとWeb開発

JavaScriptという言語の特徴

JavaScriptの開発とは?

JavaScriptの開発環境

01_02 EclipseによるJavaScript開発

Eclipseの準備

プロジェクトの作成

パースペクティブの切り替え

HTMLファイルを作る

「HTTPプレビュー」(Eclipse内蔵サーバー)で実行する

Chapter_02 JavaScriptの基本文法

02_01 値と変数

JavaScriptはどう書く?

<script>タグの働き

JavaScriptの「文」

値とリテラル

変数の利用

変数の面白い性質

値の計算

文字列の演算

02_02 制御構文

条件分岐と「if」

3つ以上の分岐が可能な「switch」

条件をチェックして繰り返す「while」

複雑な繰り返し制御を行う「for」

配列を使った繰り返し

関数の定義

関数から値を返すreturn文

try~catchによる例外処理

02_03 配列について

配列とは?

配列の要素を操作する「for in」文

連想配列

多次元配列の生成とアクセス

配列を操作するメソッド

Chapter_03 JavaScriptのオブジェクト指向

03_01 オブジェクト指向の考え方

連想配列、再び

Objectを使ったオブジェクトの生成

コンストラクタ関数

03_02 クラスとオブジェクトの拡張

オブジェクトの拡張

サブクラスの作成と継承:コンストラクタ・チェーン

プロトタイプによるオブジェクトの拡張

クラスプロパティとクラスメソッド

オブジェクトの共通メソッドについて

03_03 オブジェクトを更に使いこなす

変更不可のプロパティ:プロパティのアクセス制御

アクセスを制御する

プライベートなメソッド:メソッドのアクセス制御

クラス関係の後付け

「名前空間」的な発想

可変引数について

Chapter_04 WebブラウザとDOMの基本

04_01 ブラウザのオブジェクトとDOM

DOMとは何か?

ドキュメントとdocument

HTMLタグを出力するdocument.writeメソッド

titleプロパティを操作するdocument.titleプロパティ

document.getElementByIdメソッドによるタグの取得

スクリプトの実行場所について

innerHTMLに追加されたタグの扱い

エレメントとノード

ノードの種類

ドキュメントのノード構造

ノードを生成する

04_02 イベント処理

ページロード時の処理:onloadイベント

クリックして実行する:onclickイベント

<a>タグにonclickをつける

<span>によるスクリプトの実行

マウス関連のイベント

eventオブジェクトについて

キーボードのイベント

プロパティによるイベント組み込み

別のイベント処理法:DOM Level 2

値の変更イベント:onchange属性

<select>でのonchange利用

<select>の<option>を操作する

テキスト選択のイベント:onselect属性

04_03 さまざまなスタイル操作

属性とstyleプロパティ

エレメントを動かす(位置の変更):position属性

フォントの設定:fontFamily⁄fontSize⁄fontWeight

マウスイベントの利用

タイマーオブジェクトの利用

重ね合わせ問題の処理:zIndex

04_04 Ajaxによる非同期通信

Ajaxとは?

非同期通信とは?

非同期通信の手順

非同期通信の実際

非同期通信処理の流れ

Part_02 JavaScriptライブラリ編

Chapter_05 ライブラリの利用とサーバーサイドの準備

05_01 ライブラリが実現するもの

JavaScriptライブラリとは何か

JavaScriptライブラリの働き

ライブラリの利用の仕方

Google AJAX Libraries APIを利用するライブラリの組み込み

05_02 サーバーサイドJavaScriptとJaxer

サーバーのプログラム作成について

サーバーサイドJavaScriptの実行環境Jaxer

Jaxerの基本的な利用方法

サーバーサイドJavaScriptの実際

Jaxerのスクリプトの種類

AjaxでのJaxerの利用

サービスによる通信

JSONによるAjax通信

XMLによるAjax通信

Chapter_06 非同期通信の標準ライブラリ「Prototype」

06_01 Prototypeが提供するもの

Prototypeとは?

Prototypeの入手

ブラウザの互換性について

Prototypeの利用法

Prototypeの機能

06_02 Prototypeを利用する

ショートカット関数$()によるエレメント取得

$$()によるクラス取得

eachメソッドによる繰り返し処理

$A()による配列への変換

フォームの値を取得する$F()

数列を作成する$R()

成功するまで続けるTry.theseメソッド

06_03 Ajaxと非同期通信

HTTPリクエストを発行する汎用オブジェクトAjax.Request

パラメータを利用したサーバー処理

Ajax.Updaterオブジェクトの利用

定期的に表示を更新するAjax.PeriodicalUpdaterオブジェクト

テキストをフォーマットするTemplateオブジェクト

06_04 強化オブジェクトを操作する

「強化オブジェクト」とは?

セレクタを使ってタグを検索するgetElementsBySelectorメソッド

toStringのより適切な表現:Object.inspectメソッド

オブジェクトのキーと値を調べる

Object.keys/Object.valuesメソッド

16進数を取得するtoColorPartメソッド

Numberによる繰り返しを行うtimesメソッド

イベントを追加するEvent.observeメソッド

簡単にタイマーを作成するPeriodicalExecuterオブジェクト

データベース的な配列を利用するfindメソッドとfindAllメソッド

エレメントを追加するInsertionオブジェクト群

フォームを監視するForm.Element.Observer オブジェクト

フォームを監視するForm.Observerオブジェクトと

フォームエレメントを取得するForm.getInputsメソッド

Chapter_07 クールなビジュアルを実現する「script.aculo.us」

07_01 script.aculo.usの概要を理解する

script.aculo.usとは?

script.aculo.usの入手

script.aculo.usのインストールと利用方法

07_02 ドラッグ&ドロップとコンポーネント

Draggableオブジェクトによるドラッグ

Droppablesオブジェクトによるドロップ処理

ドラッグ&ドロップとスライダーオブジェクトControl.Slider

ドラッグ可能リストSortable

Sortableオブジェクトでイメージをドラッグする

07_03 Ajaxとコンポーネント

「編集可能テキスト」オブジェクトAjax.InPlaceEditor

外部コントロールの利用

選択リストで編集するテキストオブジェクト:

Ajax.InPlaceCollectionEditor

オートコンプリート機能:Ajax.Autocompleter

Ajax.Autocompleterを利用する

ローカルボリュームでのオートコンプリートオブジェクト:

Autocompleter.Local

07_04 表示・非表示の視覚効果メソッド

拡大(Effect.Grow)と縮小(Effect.Shrink)

フェードイン(Effect.Appear)とフェードアウト(Effect.Fade)

ブラインドダウン(Effect.BlindDown)と

ブラインドアップ(Effect.BlindUp)

スライドして表示・非表示する

スライドダウン(Effect.SlideDown)と

スライドアップ(Effect.SlideUp)

「消える効果」のメソッド群

よりシンプルな表示のON/OFF法:Effect.toggleメソッド

07_05 視覚効果の適用

透過度を設定するEffect.Opacityオブジェクト

エレメントを移動するEffect.Moveオブジェクト

エレメントを拡大縮小するEffect.Scaleオブジェクト

左右に震える効果:Effect.Shakeオブジェクト

スタイルのモーフィング:Effect.Morphオブジェクト

複数の効果を同時に実行するEffect.Parallelオブジェクト

Chapter_08 シンプルで拡張性に富む「jQuery」

08_01 jQueryの概要を理解する

jQueryとは?

jQueryの入手

jQueryの利用法

ブラウザの互換性について

08_02 DOMとスタイルの操作

$()ショートカット関数によるエレメントの取得

$()を用いてクラス名でエレメントを取得する

スタイルシートの属性を操作するcssメソッド

クラスを追加するaddClassメソッド

クラスを切り替えるtoggleClassメソッド

個々のエレメントを操作するeachメソッド

データを保管する[jQuery].dataメソッド

jQueryオブジェクトによるエレメントの追加

08_03 イベント処理

エレメントの準備イベント:readyメソッド

イベント処理組み込みメソッドの全体像

hoverメソッドによるマウスポインタのIN/OUT

例外発生時の処理を行うerrorメソッド

toggleメソッドによる複数処理の循環

08_04 視覚効果

表示をON/OFFするshowメソッド/hideメソッド/toggleメソッド

スライドアップ・ダウンするslideUpメソッドとslideDownメソッド

フェードアウト・フェードインする

fadeOut/fadeIn/fadeToggleメソッド

独自のアニメーション効果を作るanimateメソッド

08_05 Ajaxの利用

サーバーからロードするloadメソッド

サーバーへGET/POSTでアクセスするget/postメソッド

JSONでオブジェクトを取得するgetJSONメソッド

08_06 jQuery UI

jQuery UIのダウンロードと設定

ドラッグ可能にするdraggableメソッド

ドロップ処理を行うdroppableメソッド

日付を選択するdatepickerメソッド

スライダーを作るsliderメソッド

アコーディオンパネルを作るaccordionメソッド

タブパネルを作るtabsメソッド

ダイアログを表示するdialogメソッド

Chapter_09 あらゆる機能を網羅する重量級ライブラリ「Dojo」

09_01 Dojoの概要を理解する

Dojoとは?

Dojoの入手

Dojoの利用法

コンソールの表示と利用

コンソールに出力する

09_02 DOMとスタイルの基本機能

ロード時の処理をするdojo.addOnLoadメソッド

エレメントを取得するdojo.byIdメソッド

dojo.queryメソッドによるエレメント検索

[NodeList].forEachメソッドによる繰り返し処理

dojo.connectメソッドによるイベント設定

09_03 Ajax通信

GETによるテキスト送受信:dojo.xhrGetメソッド

POSTでXMLデータを受信:dojo.xhrPostメソッド

dojo.xhrPostメソッドでJSONデータを送信する

09_04 dijitによるフォーム用ウィジェット

dijitの準備とテーマ

入力フィールドとボタン

入力支援ウィジェット

スクリプトからウィジェットを生成・操作する

選択リストの作成

09_05 覚えておきたい便利なdijitウィジェット

マルチスタイルエディター:dijit.Editorオブジェクト

プラグインのカスタマイズ

カラーパレット:dijit.ColorPaletteオブジェクト

カレンダー:dijit._Calendarオブジェクト

「擬似」ダイアログを表示するdijit.Dialogオブジェクト

メニューバーの作成

09_06 コンテナによるレイアウト

ボーダーコンテナ:dijit.layout.BorderContainerオブジェクト

タブコンテナ:dijit.layout.TabContainerオブジェクト

スタックコンテナ:dijit.layout.StackContainerオブジェクト

アコーディオンコンテナ:

dijit.layout.AccordionContainerオブジェクト

Chapter_10 ビジュアル総合ライブラリ「YUI」

10_01 YUIの概要を理解する

YUIとは?

YUI 2とYUI 3

YUIの入手とインストール

YUIの利用法

10_02 アニメーションとドラッグ&ドロップ

AnimとColorAnimによるアニメーションの実行

YAHOO.util.Motionによる位置の移動

dragdropライブラリによるドラッグ&ドロップ

Google AJAX Libraries APIでのロード後処理と初期化処理

YAHOO.util.DDTargetによるドロップの処理

YAHOO.util.Domによるエレメント操作

10_03 YUIコンポーネント

コンポーネントとスキン

YAHOO.widget.Calendarによるカレンダー

YAHOO.widget.Sliderによるスライダーの作成

SimpleEditorおよびEditorによるマルチスタイルエディター

10_04 パネルによるレイアウト

YAHOO.widget.Panelによるパネルの利用

複雑なパネルの表示内容を事前に用意する

10_05 メニューとデータテーブル

YAHOO.widget.Menuによるポップアップメニュー

YAHOO.widget.MenuBarによるメニューバーの作成

DataTableとDataSourceによるデータテーブルを用いたデータ表示

PR

秀和システム