概要

本書は，プログラムを書いたことがないノンプログラマの人に向けたJavaScriptの入門書です。初学者の方がつまずきそうなところや，わかりにくいところを重点的に解説しています。たとえばプログラムを学ぶときにつまずきやすい点の一つに，ある文法や機能について説明を受けても，実際にどういう場面で使うのかがわからず，理解が進まないということが挙げられます。そこで本書では，書籍全体を通して1つのスライドショーのサンプルプログラムを使って，解説した文法や機能が実際にどこでどういうふうに使われているかを毎回見返すことでしっかり理解するという構成にしました。
定番ライブラリjQueryの基本も学べ，付録ではHTMLとCSSの基本を解説しています。

こんな方におすすめ

• プログラミングに興味があるけど，はじめの一歩を踏み出せないでいる人
• JavaScriptやjQueryの基本を学びたいノンプログラマ
• プログラムの経験がないWebデザイナ，マークアップエンジニア

本書に関するお知らせ

本書の公式タグは『jsippo』です。

• Twitter
• はてなブックマーク

本書の関連記事

本書に関連する記事を公開しております。

• はじめに
• 第1章　JavaScript入門準備
• 刊行記念トークセッション，フォト・動画レポート

目次

第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プロパティ ── 要素の高さ

サポート

ダウンロード

サンプルコードのダウンロード

本書のサンプルコードをダウンロードできます。ZIP形式の圧縮ファイルです。解凍してお使いください。

• jsippo.zip

サンプルコードの実行

本書のサンプルコードは，こちらのページで実行できます。

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

（2014年4月23日更新）

第1刷をお持ちの方へ（2刷は修正済み）
P.31　6行目

 var firstName = '鈴木';
 var lastName = '一郎';
 var fullName = firstName + lastName;

 var lastName = '鈴木';
 var firstName = '一郎';
 var fullName = lastName + firstName;