JavaScript Web開発パーフェクトマスター

概 要

JavaScriptは、Webアプリ開発の定番言語です。本書は、JavaScriptの初学者向けにWebアプリ開発に必要なノウハウを、ボトムアップ方式で基礎から応用までやさしく解説します。若手プログラマーが講師となって、JavaScript未体験のエンジニアに手ほどきをするというペアプロ形式で説明していくので、プログラミングスクールで1対1のレッスンを受けている感覚で読み進めていただけます。開発現場ですぐに役立つ技が満載です!

著者 金城俊哉
価格 本体3400円(税別)
ISBN 978-4-7980-4388-3
発売日 2015/6/27
判型 B5変
ページ数 784
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

Chapter 0 なぜJavaScriptなのか

0.1 JavaScriptで何ができるの?

0.1.1 インターネットとWebって何が違うの?

Webって何?そもそもインターネットって何?

0.1.2 HTMLとJavaScriptって何が違うの?

HTMLがあるのになぜJavaScriptが必要なのか

0.1.3 ところでJavaScriptでプログラミングすると何がウレシイの?

JavaScriptにはメリットがいっぱい

0.1.4 不遇の時代を経て復活したぞ!

まずはJavaScript誕生の経緯など

0.2 JavaScriptで何をどう開発するの?

0.2.1 JavaScriptはクライアントサイドで動く

0.2.2 仕組みはわかったけどプログラムはどうやって作るの?

JavaScriptはインタープリター型言語

0.2.3 JavaScriptのプログラムはこうやって作る

プログラムのコードは何を使って書けばいい?

プログラムのテストはどうやってするの?

0.3 ペアプログラミング方式でJavaScriptを完全習得

ミドルエンジニアとベテランプログラマーによるペアプロを誌上で再現

順番に読まなくたっていいんです!

FAQ

Chapter 1 プログラミング環境を用意する!(開発環境の用意)

1.1 マイツール、テキストエディターを用意する

1.1.1 Notepad++のサイトからダウンロードしよう

Notepad++のサイトにアクセスしてダウンロードする

1.1.2 Notepad++をインストールする

Notepad++のインストール

1.2 サーバー環境をダウンロードする(Windows編)

1.2.1 XAMPPがなぜ必要なのか

そもそもパソコンにWebサーバーを用意すると何が便利なのか

XAMPについて知る

1.2.2 XAMPPをダウンロードする

XAMPPのWebサイトからダウンロードする

【Memo】 XAMPPでサーバーサイドも楽ちんプログラミング

1.2.3 XAMPPをインストールしよう

XAMPPのインストール

1.3 サーバー環境を構築する

1.3.1 XAMPPのコントロールパネルでApacheを起動/終了する

XAMPPの起動と終了

Apacheを起動する

1.3.2 WebブラウザーでApacheにアクセスする

ローカルマシンのWebサーバーにアクセスする

1.3.3 Apacheの公開用フォルダーを空にする

htdocsフォルダー内を空にする

1.3.4 自前のページを作ってWebサーバーで公開してみよう

Notepad++でHTMLファイルを作成する

HTMLファイルを公開用フォルダーに保存する

1.3.5 Webサーバーで公開中のページを表示する

ブラウザーを起動して公開中のページを表示する

「index.html」以外のページを表示する

【Tips】 ほかのパソコンからサーバーにアクセスできるようにする

1.4 会社のMacにサーバー環境を構築する

1.4.1 Mac標準のApache HTTP Serverを起動しよう

Apache HTTP Serverを起動する

公開用フォルダーの中身を空にしておく

【Memo】 ドキュメントルールとルートディレクトリ

1.4.2 テキストエディットでWebページを作ろう

テキストエディットを起動してHTMLドキュメントを作成する

作成したファイルをHTML形式で保存する

【Memo】 公開用フォルダーのアクセス権を設定する

1.4.3 Macで公開中のWebページを表示しよう

Safariを起動して公開中のページを表示する

1.5 デバッグ用ブラウザーあれこれ

1.5.1 IE、Chrome、FireFoxを入手しよう

Internet Explorerを入手する

Google Chromeを入手する

Mozilla Firefoxを入手する

1.5.2 JavaScriptのテストができるようにしておこう

Internet Explorerの設定

Google Chromeの設定

Mozilla Firefoxの設定

Mac版Safariの設定

【Hint】 Internet Explorerの古いバージョン

FAQ

Chapter 2 プログラムを作って保存して動かすぞ!(JS、HTML、CSSの基本)

2.1 「Hello world!」の表示なんてさんざんやってきましたけど

2.1.1 JavaScriptで「Hello world!」ですよ!

いきなりの命令文

何で「write(××)」と書いただけで××が表示されるの?

2.1.2 手書きのHTMLとJavaScriptの動的処理

HTMLドキュメントの中にJavaScriptのコードを書く

HTMLドキュメントを公開用フォルダーに保存する

2.1.3 作成したJavaScriptのページを確認する

WebサーバーにアクセスしてJavaScriptのページを表示する

2.1.4 画面で「5÷2」の計算をするんですか?

いろいろな計算をしてみよう

式と答えを続けて表示する

OnePoint Macのテキストエディットの場合

2.2 動的処理!つまりダイナミックだ!

2.2.1 ブラウザーからダイアログをポップアップ!

「window.alert();」でアラートダイアログを表示

2.3 難なくクリア!JavaScriptの文法

2.3.1 プログラムの起点ってどこでもアリなんですね

JavaScriptプログラミングの流れ

ところでプログラムの起点は?

2.3.2 まあまあユルイ書き方でいいんですね

半角英数字で書く

大文字と小文字は区別して書く

命令文の終わりにはセミコロンを付ける

ソースコード内の空白と改行は無視される

ソースコード以外はすべてコメントにする

【Hint】 インデントについて考える

2.4 HTMLに関するレクチャー

2.4.1 Webページ=HTMLドキュメント

JavaScriptとHTMLドキュメントの関係

HTMLドキュメントの構造

2.4.2 HTMLの設定はタグで行う

そもそもHTMLタグって何なの?

見出しや段落を設定するタグ

2.5 CSSに関するレクチャー

2.5.1 CSSコードの記述方法

HTMLのヘッダー情報の中にCSSコードを記述する

CSSで見栄えを設定する

2.5.2 まずはCSSの書き方をマスターしよう

セレクターとプロパティ

セレクターを使ってCSSを適用しよう

【Memo】 クラスセレクターを適用する要素を限定する

【Memo】 idセレクターを適用する要素を限定する

2.6 JavaScriptプログラムはこうして保存する

2.6.1 HTMLドキュメントの中にコードを記述する

script要素としてHTMLドキュメント内部にコードを埋め込む

2.6.2 JavaScriptのコードを専用のファイルに記述する

HTMLドキュメントにプログラムを読み込むための記述を行う

ソースファイルを用意してコードを記述する

【Hint】 昔はlanguage属性でJavaScriptであることを示していた

【Memo】 ソースファイルを保存するときの設定

【Tips】 ソース・ファイルの文字コード

2.6.3 JavaScriptはどんな順序で実行されるのか

コードを埋め込んだscript要素もほかの要素と同じ順序で読み込まれる

【Memo】 JavaScriptを書く場所

FAQ

Chapter 3 データ処理、自由自在(データ処理の作法)

3.1 JavaScript特有のデータ型を極めるぞ!

3.1.1 プログラムとデータは別のもの(リテラル)

ソースコードに登場する要素

値(リテラル)の姿

【Hint】 JavaScriptの予約語ってどんなものがあるの?

3.1.2 整数も小数も正も負も(数値型)

数値型

3.1.3 文字も文字列も(文字列型)

文字列リテラル

3.1.4 YesかNoだけ(論理値型)

真偽リテラル

3.1.5 「何にもなし」と「正体不明」(Nullとundefined)

【Hint】 undefinedはどのように使われるのか

3.1.6 値は別のところにある(参照型)

配列

関数

オブジェクト

【Hint】 オブジェクトって用語がやたら出てくるんですが

3.2 JavaScriptならではの変数の扱い方

3.2.1 まずはおなじみの変数からですね

変数は値を保管するためのもの

【Hint】 Javaにおける変数宣言の例

3.2.2 えっ? 宣言しなくてもいいんですか、型も指定しなくていいんですか

変数を使えるようにする(変数の宣言)

変数に値を保管する(値の代入)

リテラルには型があるけど変数にはない

【Memo】 変数に文字を代入するときの'と"について

【Memo】 変数名を付けるときのルール

【Hint】 変数名の命名規則

3.3 JavaScriptにもあるぞ演算子! 記号に隠された深い意味

3.3.1 プログラミングにおける「式」と「演算」について考えてみた

【Memo】 演算子っていったいどこで使うの?

3.3.2 「z=x+y」を極めたい!(算術演算子)

四則演算子

単項プラス演算子(+)、単項マイナス演算子(-)

インクリメント演算子(++)とデクリメント演算子(--)

3.3.3 "こん" + "にちは"(文字列結合演算子)

文字列連結演算子を使って文字列を連結する

Attention ソースコードの表記

【Tips】 文字列連結演算子を利用して数値型を文字列型に強制変換する

【Tips】 「-」演算子を使用して文字列型→数値型に強制変換する

【Memo】 typeof演算子

3.3.4 xはyであるがzでもある(代入演算子)

代入演算子による値の代入

複合代入演算子による式の簡略化

多重代入

【Memo】 式についてのお話

Attention 代入式の左辺は常に変数

3.3.5 ビットを並べ替える意味があるんですか?(ビット演算子)

ビット演算子の種類と使い方

シフト演算子

【Memo】 演算子の優先順位

【Hint】 補数による負の数の表現

Chapter 4 アルゴリズムの流れを変えろ!(制御文)

4.1 アルゴリズムでプログラムをコントロール!

4.1.1 「等しい?」「○○以上?」「××以下?」(関係演算子)

関係式で返ってくる値

==と===による処理の違い

【Hint】 関係式のパターン

4.1.2 ますます優柔不断!(論理演算子)

&&演算子を使ってみる

||演算子で論理和を求める

!演算子で真偽値を反転する

4.2 ロジックの流れを変えちゃいます!(if文とswitch文)

4.2.1 ○○のときだけ実行すればいいですね(if文)

if文を使用したプログラムを作成する

【Memo】 「処理を抜ける」「制御が移る」

trueならコレfalseならアレ(if...else 文)

【Memo】 { }の省略

ifの中にifを入れて二重チェック(ネストしたif文)

【Hint】 論理演算子で複数の条件を設定する

もっとシンプルに(条件演算子)

4.2.2 △△のときにも実行しなきゃ!(else if)

else if文を使って複数の条件を設定する

【Memo】 演算子の優先順位と結合規則

4.2.3 複雑怪奇なif文を何とかして!(switch文)

switch文の構造と仕組み

switch文を使用したプログラムを作成する

4.3 繰り返しのアルゴリズム、ループ処理(forとwhile)

4.3.1 画面に10回「JavaScript」を書き出すんですね(for文)

for文の書き方と繰り返しの仕組みを見る

for文で指定した回数だけ処理を繰り返す

【Memo】 カウンター変数の仕組みと使い方

4.3.2 2段階のループ? それって「多重ループ」ですよね

for文をネストして2段階で処理を繰り返す

4.3.3 止まらなくなっちゃっいましたよ(無限ループ)

for文で無限ループを再現する

4.3.4 最初っからわかってるなら処理回数を決めちゃいましょうよ(while文)

while文の書き方と処理の流れ

【Memo】 while文で指定した回数の処理を繰り返す際に気を付けたいこと

4.3.5 falseが返っても1回は処理しないとまずいですよね(do...while文)

do...while文の書き方と処理の流れ

ループ処理を最低1回は行うプログラムの作成

【Hint】 while文における{ }の省略

4.3.6 無駄な処理は止めましょう!(breakとcontinue)

break文でループを中断

continue文で特定の回の処理をスキップ

4.3.7 ショートカットしちゃえ!①(多重ループととラベル付きbreak文)

多重ループとbreak文

ラベル付きbreak文

4.3.8 ショートカットしちゃえ!②(多重ループとラベル付きcontinue文)

無限ループとcontinue文

ラベル付きcontinue文

4.4 エラー発生!でもプログラムは止めません

4.4.1 あれっ!(例外)

例外処理を行ってみる

4.4.2 それっ!(例外を投げる)

例外を投げて処理を中止する

FAQ

Chapter 5 JSの標準機能を使い倒すぞ!(ビルトインオブジェクト)

5.1 JavaScriptの基本ライブラリって結構、豪華

5.1.1 JavaScriptの標準ライブラリですね?(ビルトインオブジェクト)

「オブジェクト? クラスとどう違うの?」

【Hint】 スタックとヒープ

5.2 使い倒すぞ!ビルトインオブジェクト

5.2.1 文字を切り貼りします(Stringオブジェクトによる文字列操作)

Stringオブジェクト

【Memo】 Stringオブジェクトのプロパティとメソッド

lengthプロパティで文字列の長さを求める

特定の文字列の位置を調べる

【Hint】 文字列が見付かったかどうかを調べる

特定の文字列を抽出する

【Tips】 メールアドレスの@よりもあとの文字列を取り出す

Attention substring()とslice()の動作の違いに気を付ける

文字列を分割する

5.2.2 1つの変数に10個の値なんて入りませんよ!(Arrayによる配列操作)

配列の構造と使い方

【Memo】 配列の構造とインデックス

【Memo】 Arrayオブジェクトのプロパティとメソッド

配列の要素を並べ替える

【Memo】 toString()メドッドの自動呼び出し

【Tips】 数字を数値としてソートしたい!

配列を文字列に変換する

配列を連結する

配列要素の取り出し(LIFO)

配列要素の取り出し(FIFO)

特定の要素の取り出しと置き換え

配列要素を1個ずつ処理する

【Memo】 for...in文を使って配列要素を取り出す

配列のコピー

【Tips】 concat()/slice()メソッドで配列を簡単コピー

5.2.3 小数点が付いたデータも入っちゃうんですね?(Numberによる数値の処理)

数値を包み込むラッパーオブジェクト

【Memo】 Numberオブジェクトのプロパティとメソッド

【Memo】 Mathオブジェクトのプロパティとメソッド

5.2.4 JavaScriptで三角関数って、一体誰が使うんです?(数学的な演算処理)

静かなるプロパティとメソッド?

OnePoint writeIn()メソッド

【Memo】 なぜ静的メソッドやプロパティはインスタンスがなくても使えるのか

【Tips】 0から9までの乱数を発生させてみよう

5.2.5 JavaScriptの時計は1970年から動いてるんですね(Dateによる日時の操作)

Dateオブジェクトのインスタンスを生成

Dateオブジェクトのプロパティ/メソッドを総ざらい理解する

日付や時刻を加算/減算する

指定した日からの経過日数を求める

【Hint】 正規表現って、何のためのもの?

【Memo】 正規表現って、何で「表現」と付くの?

【Hint】 未来の日時はどうなる?

5.2.6 ほー、JavaScriptで正規表現ですか(RegExpによる正規表現)

正規表現によるパターンマッチの実行

'JavaScript'を検索してみよう

【Memo】 パターンマッチに利用できるメソッド

文章の中からメールアドレスの部分を抜き出す

URLを検索する

RegExpオブジェクトのメソッドで検索する

【Memo】 gオプションなしで文字列全体に対してパターンマッチしないとどうなるか

【Hint】 iオプションを付けない場合

正規表現を利用した文字列の置き換え

【Memo】 正規表現の基本的なパターン文字列

5.2.7 オブジェクトの頂点は……(Objectオブジェクト)

Objectオブジェクトは自身の機能を使わせるために存在する

インスタンスのオブジェクト名を調べる

【Memo】 コンストラクターって何をするものなの?

【Hint】 自分で作ったオブジェクトなら中身が表示される

5.2.8 誰でもツカエル、どこでもツカエル(Globalオブジェクト)

Globalオブジェクトの変数や関数はいかなるオブジェクトにも属していない

【Hint】 ところで「関数」と「メソッド」って何が違うの?

任意の値を数値に変換する

【Memo】 NaNって何?

【Memo】 Number()/String()/Boolean()の正体

Webで送信する文字列をエンコードする

【Memo】 URLなのにどうしてURIって呼ぶの?

動的に作成したソースコードを実行する

Chapter 6 関数、隅々まで徹底解剖!(関数定義からクロージャまで)

6.1 関数定義の方法は3つもある(関数の役割と定義方法)

6.1.1 ロジックのかたまりに名前を付ける、それが関数

引数をパラメーターで受け取り結果を値で返す

6.1.2 ま、普通の関数定義ですよね(function文)

function文における注意点など

function文で関数を定義してみよう

6.1.3 えっ? 関数のコードがString型?(Functionコンストラクター)

Functionオブジェクトのコンストラクターによる関数定義

【Hint】 「動的に関数を生成する」ってどういうこと?

6.1.4 えっ?関数自体がリテラル?(関数リテラル)

関数リテラルによる関数定義

関数リテラルで関数を定義する

Attention return文は途中で改行してはいけない

【Memo】 関数はオブジェクトである

6.1.5 関数の呼び出しパターンを考えなきゃ

名前で呼び出し(関数名を指定して呼び出す方法)

定義と同時に呼び出し(関数定義と同時に呼び出す方法)

【Hint】 関数定義の後に付けた(引数)の部分を取り除く

6.2 それは圏外!なぜ関数が呼び出せない?(関数と変数のスコープ)

6.2.1 変数の生存領域ですね(変数のスコープ)

世界的なスコープと地域的なスコープ(グローバルスコープ/ローカルスコープ)

【Memo】 JavaScriptにはブロックレベルのスコープは存在しない

【Memo】 ローカル変数は関数の先頭で宣言しよう

6.2.2 関数定義が先? それとも呼び出しが先?

function文で定義した関数はどこからでも呼び出せる

function文以外の関数定義は使う前に済ませておく必要がある

6.2.3 ネストした関数ってどこから呼び出せばいいんですか?(関数のネスト)

関数の内部で関数を定義する(関数のネスト)

6.3 深いぞ関数のパラメーター! 最初から教えてくれればよかったのに!

6.3.1 ダイレクトに値を渡す? それとも参照を渡す?(値渡しと参照渡し)

値渡し

参照渡し

6.3.2 この引数余ってるんですけど(引数情報の管理)

JavaScriptは引数の数をチェックしない

引数の数をチェックする

【Tips】 パラメーターの初期値を設定しておく

6.3.3 引数をいくつ渡してもOKにしちゃいましょうよ!(可変長パラメーター)

増減するパラメーター

【Hint】 可変長パラメーターに仮の名前を付ける

【Hint】 参照渡しされた変数の参照先を変える

【Tips】 可変長パラメーターに渡された値が数値かどうかをチェックする

6.3.4 そこでもう一回呼んでみて!(calleeプロパティによる再帰呼び出し)

関数の再起呼び出し

【Memo】 再起呼び出しではどんな処理が行われていたか

6.4 関数さらに深く! オブジェクト指向への架け橋になるのか?

6.4.1 引数に名前が付いてると便利だと思いませんか?

匿名オブジェクト

【Memo】 匿名オブジェクトはObjectオブジェクトで定義しよう

名前付き引数登場!

【Memo】 結局、関数定義はどれを使えばいいの?

6.4.2 関数ごと引数にして渡しちゃいましょうよ(高階関数)

高階関数の作成と呼び出し

高階関数の本当の便利さを知る

6.4.3 この関数定義、冗長ですよね(匿名関数)

匿名関数は「使い捨ての関数」として利用できる

6.4.4 関数の関数のそのまた関数の……(スコープチェーン)

グローバル変数もオブジェクト!

ローカル変数までもがオブジェクト

6.4.5 関数が自動生成するオブジェクト?(クロージャ)

関数の処理とローカル変数を「箱」の中にコピーする

クロージャを別々の変数に代入して異なる処理結果を得る

結局クロージャって何に使えばいいの?

【Hint】 クロージャの使いどころが、いまひとつわかりません!

Chapter 7 オブジェクト指向でプログラミング!(プロトタイプベースオブジェクト指向)

7.1 はっきり言ってJavaScriptのオブジェクト指向、変わってます

7.1.1 JavaScriptのオブジェクトって、つまりクラスのことなんだ

インスタンスの生成とプロパティの追加

オブジェクトの関数(メソッド)

【Memo】 JavaScriptの「関数はすべてメソッドである」

7.1.2 クラスがないのにどーやって定義するんですか(プロトタイプベースのクラス)

空のプロトタイプを定義する

インスタンス製造装置(コンストラクター)

コンストラクターを呼び出してインスタンスを生成する

Attention コンストラクターで戻り値を返してはいけない

【Hint】 インスタンスを生成すると何がウレシイの?

7.1.3 オブジェクトに「後付け」で機能を追加する?

ダイナミックにメソッドを追加する

【Tips】 あえてnewしないでインスタンスを作る

7.2 プロパティとメソッド、いわゆるオブジェクトのメンバー

7.2.1 このプロパティ、直に見せないほうがいいですよね (プライベートメンバーの定義とアクセサー)

プライベートメンバーとアクセサーメソッド

【Memo】 プライベートメンバーにアクセスできるのはクロージャのおかげ

アクセサーメソッドを備えたプロパティを定義する

プライベートなメソッドを定義する

【Memo】 関数型プログラミング

7.2.2 プロトタイプの継承で独自機能を実装します!(プロトタイプ)

インスタンスはクラスの内容を丸ごとコピーしたもの

プロトタイプオブジェクトにプロパティを登録する意味はある?

オブジェクトリテラルによるプロトタイプの定義

【Memo】 プロトタイプオブジェクトのメリット

7.2.3 このプロパティ、この先必要ないですよね(プロパティの削除)

delete文でプロパティを削除する

【Memo】 オブジェクト指向プログラミングで使用される用語

【Tips】 何とかしてプロトタイプのプロパティを削除する方法

7.2.4 インスタンスが1個? 静的メンバーのことですよね(インスタンス化不要のメンバー)

静的プロパティ/静的メソッドの定義

【Memo】 静的メンバーを使うメリット

静的メンバーを定義するときの2つの注意点

OnePoint 定数

7.3 JavaScriptの継承、それはプロトタイプの継承だった!

7.3.1 いわゆるリモートコントロールのインスタンスですね(プロトタイプの継承)

スーパークラスとサブクラス

継承を行うプログラムを作成する

7.3.2 せっかく継承したのに継承先を変えるんですか?(継承先の動的変更)

動的に継承もとを変更する

【Hint】 プロトタイプチェーンの最終到達地点

【Memo】 継承する本当のメリットは?

7.3.3 プロパティを継承しても意味はないんですねぇ(インスタンスごとに用意されるプロパティ)

apply()メソッドによるコンストラクターの呼び出し

【Tips】 プロトタイプをまるごとコピーする

7.3.4 メソッドのすげ替え、JavaScriptでもオーバーライドできた! (疑似的なオーバーライド)

JavaScriptにおける疑似的なオーバーライド

7.3.5 グローバル汚染封じの策が「名前空間」

名前空間でグローバル汚染を解決

7.4 『Hello ECMAScript 5』を試す

7.4.1 newなしでインスタンス化……あれ?コンストラクターもないよ(ECMAScript 5によるインスタンスの生成)

Object.create()メソッドによるクラス定義とインスタンス化

初期化用のメソッドを用意する

【Hint】 Object.create()メソッドの引数が長くてわりづらい場合は

7.4.2 ECMAScript 5スタイルで以前のオブジェクトを操作するぞ! (コンストラクターの使用)

defineProperties()メソッドでコンストラクターにプロパティを追加する

コンストラクターで定義したクラスをObject.create()メソッドでインスタンス化

Chapter 8 ビルトインでブラウザーを自在に操作!(ブラウザー操作のためのビルトインオブジェクト)

8.1 イベント駆動を実装!

8.1.1 クライアントサイドって私のことですよね?(サーバーサイドとクライアントサイド)

クライアントサイドとサーバーサイド

【Memo】 サーバーサイドのプログラミング言語

8.1.2 イベント出現!えっ発生?(イベントドリブンプログラミング)

イベントに対応する(イベントドリブンプログラミング)

HTMLタグの中にJavaScriptのコードを書き込む

HTMLタグ内部からイベントハンドラーを呼び出す

OnePoint type="text/javascript"

HTMLタグからプログラムを完全に分離する

8.2 Windowオブジェクト現る! でもウィンドウに関する操作しかできないですね

8.2.1 ブラウザー本体をオブジェクトとしてゲット!

Windowオブジェクトの構造

8.2.2 確認メッセージは3種類もあれば十分

警告ダイアログ(alert()メソッド)

確認ダイアログ(confirm()メソッド)

入力ダイアログ(prompt()メソッド)

8.2.3 ブラウザーオブジェクトのクローンですよね(サブウィンドウを開く)

サブウィンドウの操作

サイト内のページをサブウィンドウに表示する

8.2.4 ウィンドウがおかしな位置に出現するとまずいですよね

ウィンドウの位置とサイズを変更するメソッド

Attention 新規のウィンドウがタブで開かれないようにする

8.2.5 しばらく待ってからそっとアラートを出しましょうよ(タイマー関連のメソッド)

「一定の時間が経過したあと」に処理を実行する

「一定時間ごと」に処理を実行する

8.3 ユーザーからのリアクションを補足! イベント駆動でフォームを処理

8.3.1 フォーム要素をまるごとオブジェクトとして扱うわけですね(Foamオブジェクト)

Formオブジェクトの構造

8.3.2 テキストフィールドに入力された私の名前?(テキストフィールド値の取得)

入力されたテキストをアラートダイアログに表示する

【Memo】 フォームの各要素に対して利用できるプロパティとメソッド

【Hint】 インデックスで要素にアクセスするメリットは?

入力された値が数値以外の場合にメッセージを表示する

8.3.3 「どれか1つ」と「好きなだけチェック」ってどこが違うの? (ラジオボタンとチェックボックス)

どれか1つを選択(ラジオボタン)

好きなだけ選択(チェックボックス)

【Tips】 フォーム要素を無効にする

8.3.4 選択肢が多いときは折り畳めばいいんだ(セレクトボックス)

プルダウンリストとリストボックス

プルダウンリストを使ってみる

【Memo】 options[インデックス]の形式でアクセスする

リストボックスを使ってみる

8.4 訪問者の足跡はクライアントサイドで保管、Cookieで記録(Cookieオブジェクト)

8.4.1 中身はただの文字列なんですね(Cookieデータの登録と登録済みデータの取得)

Cookieを設定して中身を表示してみる

【Memo】 Cookieのデータの前後のスペースを取り除く

8.4.2 君、ここへ来たのは○○回目だね?(訪問回数のカウント)

Webページの閲覧回数とCookieの有効期限を一緒に登録する

【Memo】 スコープチェーンによる名前解決

8.5 ビルトインオブジェクト総ざらい!コアJavaScriptはこれで終了!

8.5.1 ブラウザーの種類やプラットフォームまでわかるぞ(Navigator)

Navigatorオブジェクトで取得できる情報

【Hint】 例外は「投げる」の? それとも「スロー」?

8.5.2 アドレスバーのURLをすげ替えちゃえ(Locationオブジェクト)

Locationオブジェクトの使いどころ

hrefプロパティで指定したURLに移動する

【Hint】 プルダウンリストのonchange属性でプログラムを起動する

8.5.3 履歴を記録して行きつ戻りつ(Historyオブジェクト)

履歴に沿って前後に表示したページに移動する

【Memo】 指定したぶんだけ履歴を戻ったり進んだりする

8.5.4 君、こんなディスプレイ使ってるよね(Screenオブジェクト)

Screenオブジェクトのプロパティ

【Tips】 履歴を残さないでジャンプする

Chapter 9 DOMで制御!HTMLもCSSも(DOMによるWebページの操作)

9.1 DOM!HTMLをオブジェクト化

9.1.1 HTMLが要素で、DOMがオブジェクトで

DOMがHTMLを扱う仕組み

DOMオブジェクトについて

9.1.2 DOMのノードでHTML要素にアクセス

firstChild/lastChildとchildNodes

div要素の要素内容を取得する

子ノードの順番を考慮してもう一度ノードの取得に挑戦

【Hint】 <!DOCTYPE html>があるときのドキュメントツリーはどうなるの?

【Memo】 DOMの構造

9.2 DOM、それはインターフェイスが作り出すHTMLのオブジェクト!

9.2.1 ノードを取得する2つの方法

【Hint】 プロトタイプはオブジェクトなのだ!

9.2.2 直(ちょく)で取っちゃいますよ(ダイレクトアクセス)

ID値を指定して要素を取得する

【Tips】 getElementById()メソッドで取得した要素の要素内容を書き込む

【Hint】 DOMのインターフェイスの種類

要素名を指定して要素を取得する

【Memo】 要素内容を動的に書き換える

class属性を指定して要素を取得する

9.2.3 子ノードを探して(ノードウォーキング)

ダイレクトアクセスからノードをたどっていく

【Tips】 要素の属性値を取得する

【Memo】 HTMLの属性名を直接指定して値の取得と設定を行う

【Tips】 要素に設定されている属性値を一括して取得する

9.2.4 ノードを追加、置換、削除

ノードを作ってドキュメント上に配置する

【Memo】 ノードの置き換えと削除

【Hint】 appendChild()の代わりにinsertBefore()を使う

9.3 DOMで制御、CSSもDOMで制御、CSSも

9.3.1 イベント発生!スチルチェンジ

マウスオーバーでフォントカラーをチェンジ

9.3.2 外部スタイルシートのルールをJavaScriptで読み込むんですね?

外部スタイルシートのCSSルールとイベントリスナーで読み込んで適用する

【Memo】 DOMのレベル

【Hint】 内部スタイルシートにおけるクラススタイルの適用

【Tips】 ボタンクリックでフォームの表示/非表示を切り替える

【Tips】 現在の時刻によって背景色を切り替える

9.4 DOMのイベント、孤高の監視役

9.4.1 DOMのイベントリスナー登場!

【Memo】 プログラム側からイベントリスナーを削除する

9.4.2 イベントが連鎖する?

親が先か子が先か、イベント伝達の仕組みを知る

イベント伝達阻止!

9.4.3 キーが押されたことくらいすぐわかりますよ

どのキーが押されたのかをログに出力する

9.4.4 えっ、クリックされた場所まで調べるんですか?

クリックされた位置を検出する

9.4.5 ドラッグしたらWebページのコンテンツが動きましたが

ページ上のコンテンツをドラッグ可能にする

【Memo】 DOM Level2のイベントモデル

Chapter 10 Ajaxでサーバーと連携するぞ!(Ajaxによる非同期通信)

10.1 Ajaxを取得!サーバーサイドと双方向通信

10.1.1 JavaScriptの機能なのになぜ別名にしたんですかね?(Ajaxとは)

Ajaxによる非同期通信とは?

10.1.2 サーバーからの応答は?(非同期通信時の処理とコールバック関数の定義)

入力データをサーバー側で処理、返された結果をページに反映させる

【Memo】 POSTメソッドでリクエストを送信する

【Hint】 HTTPのリクエストとレスポンスについて

10.2 XHR Level2で進化した非同期通信を試す

10.2.1 サーバー上に存在するテキストファイルを読み込んでページ上に書き出す

サーバーに存在するテキストファイルの読み込み

Blobオブジェクトでサーバーのファイルを取得

【Tips】 Bolbオブジェクトの生成をもっと簡単にする方法

10.2.2 フォームデータを連想配列に? JSON形式で受け取る?

JSONって何?

フォームデータを一括して送信し結果をJSON形式で受け取る

Chapter 11 jQuery、リッチなWebページをラクラク開発!(jQueryライブラリの活用)

11.1 jQuery、どう使う? 何が便利?

11.1.1 わざわざjQueryを使う意味があるんですかねぇ

jQueryの特徴

11.1.2 えっ? クライアント側でjQueryをダウンロードさせるんですか

jQueryのライブラリをダウンロードする

【Memo】 production版とdevelopment版の違い

ネットワーク上のjQueryにリンクする

11.1.3 $()、それにしても短い名前ですね

jQueryオブジェクトのインスタンスを生成する

11.1.4 CSSのセレクターでDOMオブジェクトを取得してjQueryオブジェクトへ

特定のHTML要素をjQueryオブジェクトとして取得する

id値を指定して特定のHTML要素を取り出す

【Hint】 jQuery1.xと2.x

クラスセレクターでHTML要素を取り出す

11.1.5 名前じゃなくて階層構造を利用して取得するのですね(階層セレクター)

階層セレクターでHTML要素を取得

【Tips】 特定の要素の次に位置する要素を取り出す

【Memo】 フィルター型セレクターで要素を取り出す

【Memo】 jQueryで使用できるセレクター

【Memo】 jQueryオブジェクトから要素を取得するメソッド

11.1.6 jQueryのイベントモデルって……賢い!

マウスオーバーでイメージを切り替え

【Memo】 jQueryのイベントリスナー

【Hint】 jQueryのイベントオブジェクト

11.2 jQueryのアニメーションでリッチなWebページに

11.2.1 いわゆるフォトギャラリーですね(スワップイメージ)

jQueryでシンプルにスワップイメージ

11.2.2 スライドイン/スライドアウトするフォトギャラリー

フォトギャラリーにスライドイン/スライドアウトの効果を付ける

【Memo】 「11.3 タブパネルもアコーディオンパネルもjQueryで!」で使用するファイル

11.3 タブパネルもアコーディオンパネルもjQueryで!

11.3.1 jQueryでタブ切り替え式のページを実現

タブパネル型のページを作成

11.3.2 開閉式のアコーディオンパネルだ!

パネルをアニメーションで開閉させる

【Tips】 slideToggle()メソッドでコードをシンプルに

【Tips】 パネルを開いたらほかのパネルを閉じるようにする

FAQ

Chapter 12 超便利なAPIで動画検索サイトを構築! (YouTube Data API)

12.1 ペアプロ終了、最後のテーマはYouTube Data API!

12.1.1 APIキーを取得する

APIキーを入手

12.1.2 キーワードに合致した動画を一覧で表示

YouTube Data APIから返されるデータの構造を見ておきましょう

YouTube Data APIを利用した動画紹介サイトを作る

12.1.3 動画検索ページにナビゲーション機能を追加する

動画の検索結果を複数のページに表示する

【Tips】 タイトルを付けて検索結果を表示する

PR

秀和システム