ノンプログラマのための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プロパティ ── 要素の高さ