JavaScript&jQuery レッスンブック

JavaScriptの知識がゼロでも基礎から覚えられる
インタラクティブなWeb作成にはJavaScriptは必須の知識
Webデザインに必須のjQueryもわかりやすく解説
非同期通信やWebアプリなど最新の技術もこれでわかる

はじめに
　インターネットの世界ではさまざまなプログラミング言語が使用されますが、HTMLファイル内に直接記述してWebブラウザで実行される言語としては、古くからJavaScriptがデファクトスタンダード的存在となっています。

　初期のJavaScriptはフォームの入力チェックやロールオーバーなど縁の下の力持ち的な位置づけでしたが、デザイン性に優れたインタラクティブなWebサイトを構築するための環境としては、ActionScriptを開発言語とするAdobe Flashが主流でした。

　ところが、最近では主要なWebブラウザがAjax、および次世代のHTMLであるHTML5をサポートするようになり。さらには、jQueryなどプログラミングを手助けしてくれるライブラリの充実により、JavaScriptによるプログラムでもFlashと同等あるいはそれ以上のサイトを構築できるようになりつつあります。

　今後は、HTML5とJavaScriptがWebページ作成の中心的存在となることは間違いないでしょう。
　本書は、JavaScriptとjQueryの組み合わせによるプログラミングをステップ・バイ・ステップで学んでいくための入門書です。

　JavaScriptの基礎を理解しないまま、ネットなどのサンプルをもとにコピー&ペーストするだけでは、応用があまりききません。そのため、本書では、前半部分でオブジェクトの概要、変数や配列などのデータの取り扱い、さらには条件判断や繰り返しといった制御構造など、プログラム言語としてのJavaScriptの基礎をじっくりと学んでいきます。後半部分では、それをベースにjQueryを活用したプログラミング方法について段階的に学んでいきます。

　最後の章ではHTML5の新機能である、Webブラウザ上に自由に図形を描くことを可能にしています。Webブラウザを本格的なアプリケーション実行環境にする可能性を秘めたCanvas機能にJavaScriptからアクセスする方法についても説明します。

　全体を通して、サンプルには、できるだけシンプルでプログラムを打ち込むのが苦にならないソースコードがそれほど長くないものを用意していますので、プログラムがまったく初めてという方にも安心して学んでいただけると思います。もろん、本書だけでJavaScriptのすべ てを理解することは不可能ですが、ここで得た知識をもとにすれば、ネット上のサンプルなどの働きを理解し、自由に修正できるようになるでしょう。

　最後に、本書が読者のみなさまのJavaScriptを駆使したオリジナルのWebサイト作成の手助けとなれば幸いです。

■Chapter1　初めてのJavaScript
Lesson1　JavaScriptってどんな言語
　JavaScriptの誕生
　JavaScriptはオブジェクト指向言語
　JavaScriptのプログラム作成のためのに

Lesson2　JavaScriptの記述方法を理解よう
　JavaScriptの記述されたHTMLファイルをてみよう
　JavaScriptが使用できないWebブラウザのために
　JavaScriptのプログラムを記述する

Lesson3　簡単な計算をてみよう
　変数を理解する
　変数の値を使用するには
　JavaScriptで簡単な計算を行う
　平成を西暦に変換する

Lesson4　外部ライブラリを使ってみよう
　Lightbox2の基本設定
　イメージのグループ化

■Chapter2　JavaScriptの基本を理解する
Lesson1　条件によって処理を切り分ける
　if文の基本
　if文を使ってみよう
　複数のif文を組み合わせる
　男性か女性かで切り分ける

Lesson2　同じ処理を繰り返すループ
　for文の概要
　まずは単純なfor文から
　画像をランダムに表示する
　for文を使用して3の倍数を強調表示する
　イメージビューアーの作成

Lesson3　オリジナルの関数を作る
　関数の概要
　複利計算を行うプログラムを作成する
　定義した関数を繰り返し呼び出す

Lesson4　イベント処理の基本を理解する
　イベントハンドラの基礎
　イベントハンドラを使ってみよう
　イベントハンドラをプログラムで設定する
　複利計算プログラムをGUI化する

■Chapter3　オブジェクトを活用しよう
Lesson1　Stringオブジェクトを使う
　オブジェクトはnew演算子で生成する
　Stringオブジェクトを操作しよう
　文字列の文字をサイズを変更しながら表示する

Lesson2　　複雑な計算を行うMathオブジェクト
　Mathオブジェクトの基本
　random()メソッドで乱数を生成してみる
　画像をランダムに表示する
　脳トレゲームを作成する

Lesson3　配列でデータをまとめて管理する
　配列とは
　配列で遊んでみよう
　四文字熟語の脳トレを作成する

Lesson4　日付時刻を管理するDateオブジェクト
　Dateオブジェクトの基本
　Dateオブジェクトを使ってみよう
　日付計算を行う

Lesson5　オリジナルのオブジェクトを作成する
　ユーザ定義オブジェクトの定義方法
　prototypeプロパティを使ってオブジェクトにメソッドを追加する
　ユーザ定義オブジェクト「Person」を定義する
　Personオブジェクトに年齢を求めるメソッドを追加する

Lesson6　タイマーを活用する
　JavaScriptのタイマーの使い方
　タイマーを使ってみよう
　カウントダウンタイマーを作ろう

■Chapter4　jQueryを使ってJavaScriptをより便利に
Lesson1　jQueryの基本を理解しよう
　jQueryについて
　jQueryライブラリの読み込みについて
　jQueryのready()メソッド
　jQueryのメソッドの記述方法

Lesson2　jQueryのセレクターを理解する
　基本セレクターを理解する
　jQueryのフィルターを利用する

Lesson3　jQueryを使用したイベントの処理
　jQueryのイベント処理メソッドの使い方
　hover()メソッドについて
　ロールオーバーを作成する

Lesson4　HTMLの要素を変更する
　テキストやHTMLを変更する
　アニメーション効果付きで表示/非表示を切り替える
　ボタンをクリックすることわざを変更する
　アニメーション効果で表示/非表示を切り替える

■Chapter5　イメージの操作とアニメーション
Lesson1　アニメーションを実行しよう
　jQueryでイメージを変更する方法
　animate()メソッドについて

Lesson2　15パズルを作成する
　15パズルの基本部分を作成する
　「並び替える」ボタンを作成する

Lesson3　スライドショーを作成する
　スライドショーの基本部分を作成する
　スライドをフェードインで切り替える
　スライドショーを自動で行う
　スライドアップで表示する

■Chapter6　jQueryがあればAjaxも楽々
Lesson1　Ajaxで外部のHTMLやXMLファイルを読み込む
　同期通信と非同期通信の違い
　load()メソッド
　ajax()メソッド
　load()メソッドによるHTMLの読み込み
　特定の要素を取り出して表示する
　XMLファイルの読み込み

Lesson2　JSONデータを使用した利用したスライドショー
　JSONについて
　ajax()メソッドでJSONデータを読み込む
　JSONファイルを読み込んでみよう
　スライドのデータをJSONファイルから読み込む
　イメージを表示する順番を設定する

Lesson3　Web APIを利用したiTunes Store検索プログラムの作成
　JSONPとは
　ajax()メソッドの利用
　iTunes StoreのWeb APIについて
　iTunes StoreのWeb APIを利用して音楽アルバムを検索する
　ドラッグで移動できるようにする

■Chapter7　HTML5のcanvasを使ってみよう
Lesson1　Canvasの基本を知ろう
　Canvasをより簡単に使用できるjCanvasプラグイン
　Canvasで基本図形を描く
　グラフィックスタンプの作成

Lesson2　お絵かきソフトの作成
　お絵かきソフトの動作について
　お絵かきソフトの基本部分を作成する
　ひとつ前の線を消去、白黒で描画の処理を追加する

■APPENDIX
A　Firebugの使い方