目次

第1章　JavaScript入門準備

1.1　プログラムを学ぶうえでの心構え

• プログラムはすべて覚えなくていい
• プログラムは書かないと覚えない

1.2　JavaScriptとは何か

1.3　JavaScriptの実行

• 開発環境を整える
• コラム：JavaScriptを書いて実行できるWebサービス
• script要素 ── JavaScriptの記述場所
• 初めてのJavaScript ── 「hello, world」を出力してみる

1.4　開発ツール

• インストールと起動
  • Firefox
  • Google Chrome
• コンソール
  • エラーの出力
  • メッセージやログの出力
• HTMLとCSSの確認

1.5　スライドショー ── 本書のサンプルプログラム

1.6　本書の構成

1.7　本章のまとめ

• コラム：JavaScriptの適用範囲

第2章　JavaScriptの文法

2.1　基本的な文法

• セミコロン ── 文の終わりを明示する
• コメント ── プログラムに注釈を残す
  • 行コメント
  • ブロックコメント
• 変数 ── データを記録する
  • 変数の定義
  • 値の更新
  • 変数の一括定義
• サンプルプログラムを見直す
  • コメント
  • 変数の定義と代入
  • 全体を見返す

2.2　文字列と数値

• 文字列の定義
• 文字列の連結
• 数値の定義
• 四則演算
• 数値と文字列の違い
• サンプルプログラムを見直す
  • 文字列
  • 文字列の結合
  • 数値
  • 全体を見返す

2.3　配列とオブジェクト

• 配列とは何か ── 複数のデータをまとめて扱う
• 配列の定義
• 配列の操作
  • 要素の値の取得
  • 要素の値の更新
  • 配列の要素数
• オブジェクトとは何か ── 異なる種類のデータをまとめて扱う
• オブジェクトの定義
• コラム：Internet Explorerでの注意点
• オブジェクトの操作
  • 値の取得
  • 入れ子になっているオブジェクトのプロパティの値を取得
  • []を使ってプロパティ名を指定して値を取得
  • 値の更新
  • プロパティの追加
• サンプルプログラムを見直す
  • 配列とオブジェクト
  • 配列の要素数の取得
  • 配列の要素の値の取得
  • オブジェクトのプロパティの追加
  • 全体を見返す

2.4　条件判定のための型と演算子

• 論理型 ── 「真」か「偽」を意味する値
• 比較演算子 ── 2つの値を比較する
• 条件式 ── 「真」か「偽」かを判定する
  • falseに変換される値
• コラム：undefinedとnull
  • trueに変換される値
• 論理演算子 ── 条件の組み合わせ
  • &&と!を使った例
  • ||を使った例

2.5　条件分岐

• if文 ── 「もし～ならば」という処理
• else文 ── 「もし～でなければ」という処理
• サンプルプログラムを見直す
  • 全体を見返す

2.6　繰り返し

• while文 ── 条件に合う限り処理を続ける
  • 無限ループ
• for文 ── 単純な繰り返し
  • 配列の繰り返し
• サンプルプログラムを見直す
  • 全体を見返す

2.7　関数 ── 一連の処理をまとめる

• 関数とは何か
  • 単純なみかんジュース工場
  • 果物を受け取ってジュースを作る工場
  • 成果物を発注元に返す工場
• 関数の定義と呼び出し
  • 基本的な定義と呼び出し
  • 変数に代入することで定義する
  • オブジェクトのプロパティとして定義する
• 引数
  • 引数はあらかじめ知っておく必要がある
  • 引数の数を間違えるとどうなるのか
• 戻り値
  • 戻り値もあらかじめ知っておく必要がある
• サンプルプログラムを見直す
  • 関数の定義と呼び出し
  • あらかじめ用意された関数を使う
  • オブジェクトのプロパティに関数を代入する
  • 全体を見返す

2.8　本章のまとめ

第3章　JavaScriptでHTMLやCSSを操作する

3.1　windowオブジェクト ── JavaScriptで最も重要なオブジェクト

• windowオブジェクトとは何か
• windowオブジェクトの省略
• windowオブジェクトの主なプロパティ
  • document ── HTML文書の取得や操作
  • location ── URL情報
• コラム：URLのクエリ文字列とハッシュ
  • history ── 履歴の管理
  • navigator ── ブラウザのメタデータ
• サンプルプログラムを見直す
  • windowオブジェクト
  • documentオブジェクト
  • 全体を見返す

3.2　DOM ── JavaScriptからHTMLやCSSを操作するしくみ

• DOMとは何か
• 要素の取得
  • getElementById ── id名から要素を取得する
• コラム：HTML要素のオブジェクトの中身をコンソールで見る
  • getElementsByTagName ── 指定した要素名の要素をすべて取得する
  • getElementsByClassName ── class名から要素を取得する
  • querySelector、querySelectorAll ── CSSのセレクタを使って要素を取得する
  • クロスブラウザに対応した要素の取得
• 属性値の取得と変更
  • 属性値の取得
  • 属性値の変更
  • getAttributeとsetAttributeによる属性値の取得と変更
• innerHTMLによる要素の内容の取得と変更
  • 要素の内容の取得
  • 要素の内容の変更
• 新規要素の作成と追加
  • createElement ── 要素の作成
  • appendChild ── 要素の追加
• サンプルプログラムを見直す
  • 要素の取得
  • 新規要素の作成と追加
  • 要素の属性と内容の変更
  • 全体を見返す

3.3　イベント ── 何かが行われたときの処理を予約する

• イベントとは何か
• 要素のプロパティによるイベントの設定
  • 要素のプロパティによるイベント設定の欠点
• addEventListenerによるイベントの設定
  • addEventListenerによるイベント設定の欠点
• window.onloadとDOMContentLoaded ── HTMLの読み込みを待って処理をする
  • window.onload ── 「HTMLの読み込みが終わったら」というイベント
  • DOMContentLoaded ── 「HTMLを取得・操作可能な準備ができたら」というイベント
• サンプルプログラムを見直す
  • window.onload
  • onclick
  • 全体を見返す

3.4　本章のまとめ

第4章　プログラムの読み方と組み立て方

4.1　プログラムを読む

• プログラムの全体像
• 変数の定義
  • 画像のリストを保存する変数
  • 画像の枚数を保存する変数
  • 要素の取得
  • 現在のインデックスを保存するための変数
• 初期化処理
  • img要素をHTMLに追加する
  • showPhoto関数を実行する
• 関数の定義
  • すべての画像を非表示
  • 表示する対象の要素を取得
  • タイトルの表示
  • 画像の表示
• イベントの設定
  • 表示する画像のインデックスを計算
  • 画像の切り替え
• コラム：プログラムの速度とわかりやすさ

4.2　プログラムを組み立てる

• 仕様を決める
• HTMLを書く
• 要素を取得する
• データを定義する
• img要素を追加する
  • img要素の作成と追加
  • 画像を非表示にする
• 初期表示を行う
  • タイトルの表示
  • 画像の表示
• ボタンをクリックして次の画像を表示する
  • クリックイベントの設定
  • 次の画像を表示する
  • 表示されている画像を非表示にする
  • ループの処理
• 無駄な処理を改善する
  • 関数にまとめる
• コラム：エラー処理
  • img要素をキャッシュする

4.3　本章のまとめ

第5章　jQueryでプログラミングを楽にする

5.1　jQuery入門準備

• jQueryとは何か
• jQueryの利点
  • jQueryを使わない場合
  • jQueryを使った場合
• $ ── jQueryという関数の別名
• $(function() {}) ── HTMLの読み込みを待って処理をする
• jQueryのダウンロードと読み込み
  • ダウンロード
  • 読み込み
• 初めてのjQuery ── 「hello, world」を出力してみる

5.2　基本的な機能と使い方

• セレクタ ── jQueryを使った要素の取得
• jQueryオブジェクト ── jQueryで取得した要素のオブジェクト
• コラム：jQueryオブジェクトの変数名
• メソッド ── jQueryオブジェクトに処理を行う関数
  • メソッドチェイン ── メソッドをつなげて記述する
• イベントの設定
• アニメーション

5.3　jQueryを使ったスライドショーのプログラム

• 仕様とコード
• 要素の取得
  • findメソッドで要素を検索する
• 画像の切り替え
  • 現在表示されている要素の取得
  • 次に表示する要素の取得
  • タイトルの設定
  • アニメーションで画像を切り替える
• 初期表示
• イベントの設定
  • 次の画像を表示する処理
  • 前の画像を表示する処理

5.4　本章のまとめ

• コラム：jQuery以外のライブラリ

付録A　HTMLの基本

A.1　HTMLとは何か

A.2　要素と属性

• 要素と属性について
• 要素のネスト

A.3　基本的なHTMLの記述

• ドキュメントタイプ宣言 ── HTMLのバージョンの指定
• html要素 ── ルート要素
• head要素 ── メタデータ
• body要素 ── コンテンツ

A.4　本書で登場する主な要素

• h1～h6要素 ── 見出し
• p要素 ── 段落
• ul、ol、li要素 ── リスト
• div要素 ── グルーピング
• img要素 ── 画像
  • 空要素
• a要素 ── リンク
• button要素 ── ボタン

A.5　id属性とclass属性 ── 要素に名前を付ける

• id属性は同じ値を指定できない
• class属性は同じ値を指定でき、複数指定も可能
• id属性とclass属性の使い分け

付録B　CSSの基本

B.1　CSSとは何か

B.2　CSSを記述する場所

• style要素の中に記述する
• link要素で外部ファイルを読み込む
• style属性でHTMLの要素に記述する

B.3　セレクタ

• タイプセレクタ ── 要素名を指定する
• idセレクタ ── id名を指定する
• classセレクタ ── class名を指定する
• 子孫セレクタ ── 子孫要素を指定する

B.4　プロパティと値

• プロパティと値について
• 本書で登場する主なプロパティ
  • colorプロパティ ── テキスト色
  • background-colorプロパティ ── 背景色
  • displayプロパティ ── 表示形式
  • widthプロパティ ── 要素の幅
  • heightプロパティ ── 要素の高さ