楽しいイラストと親しみやすい語り口で、わかりやすいと大人気のHead FirstシリーズにJavaScriptバージョンが登場! ビジュアル表現を多用して、JavaScript初心者にインタラクティブなWebアプリケーションを実現する方法を詳しく解説しています。JavaScriptそのものだけでなく、ブラウザがプログラムを実行する仕組みなどWebに関する知識も深めることができます。Ajaxに関わるDOM、XML、通信などの知識を最後の章にまとめました。JavaScript入門書の決定版です。
Head First JavaScript
―頭とからだで覚えるJavaScriptの基本
Michael Morrison 著、豊福 剛 訳
- TOPICS
- Head First , Programming , Web , JavaScript
- 発行年月日
- 2008年08月
- PRINT LENGTH
- 648
- ISBN
- 978-4-87311-373-9
- 原書
- Head First JavaScript
- FORMAT
正誤表
書籍発行後に気づいた誤植や更新された情報を掲載しています。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷数をご確認の上、ご利用ください。
第1刷正誤表
Head First JavaScript1刷正誤表
2009年9月1日更新
|
第2刷正誤表
Head First JavaScript2刷正誤表
2009年9月1日更新
|
目次
序章
この本を読むのにふさわしいのは誰でしょう?
あなたがどう思っているのか、わかってます
メタ認知: 思考についての思考
あなたの脳を思い通りに使うためにできること
読んでね
テクニカルレビューチーム
謝辞
1章 インタラクティブなウェブ:応答するバーチャルワールド
(オンラインの)ユーザが必要としていること
壁にむかって話しかけても、何も起こりません
でもJavaScriptなら応答します
ライト、カメラ、インターアクション
<script>タグを使ってブラウザにJavaScriptが書かれている
ことを知らせます
ウェブブラウザはHTMLとCSS、そしてJavaScriptを
処理できます
バーチャルなお友だちは、かまってほしいみたいです
iRockをインタラクティブにする
iRockウェブページを作成する
テスト運転
JavaScriptのイベントを使ってiRockの「声」を実現する
関数を使ってユーザにアラート表示する
iRockに挨拶機能を追加する
iRockを本格的にインタラクティブにしてみましょう
インタラクティブとは双方向のコミュニケーション
ユーザの名前を受け取る関数を追加する
即席リプレイで動作を確認
iRock 1 をテスト運転
2章 データを格納する:あらゆる物には然るべき場所がある
スクリプトはデータを格納できます
スクリプトはデータ型で考える
定数は一定ですが変数は変化します
変数は値がなくても作成できる
変数を"="で初期化する
定数は変更しようとしても変更できません
名前に使える文字は?
変数名と定数名の合法性
変数名にはキャメルケースを使います
ダンカンドーナツのウェブページを計画する
ドーナツ計算の最初の一手
データを初期化しましょう、そうしないと
NaNは数値でない
加算できるのは数値だけではありません
parseInt()やParseFloart()を使ってテキストを数値に
変換します
どうして大量のドーナツ注文になったのか?
ダンカンが見つけた営業妨害
getElementById()を使ってフォームデータをつかむ
ウェブフォームのデータを検証する
直感的なユーザ入力を追求する
3章 ブラウザを調べる:ブラウザを探検する
クライアント、サーバ、JavaScript
ブラウザはあなたのために何ができる?
iRockはもっと反応する必要があります
タイマーはアクションと経過時間を結びつけます
タイマーを分解する
setTimeout()でタイマーを設定する
setTimeout() の詳細
画面の大きさに不満が殺到
documentオブジェクトを使ってクライアントウィンドウの
幅を取得する
documentオブジェクトのプロパティを使ってクライアント
ウィンドウの幅を設定します
iRock画像の高さと幅を設定する
ページに合わせてiRockの大きさを調整する
onresizeはブラウザの大きさが変更されたとき発生します
onresizeイベントを使ってiRockの大きさを変更します
お会いしたことありました?
スクリプトにはライフサイクルがある
クッキーはスクリプトのライフサイクルを越える
クッキーには名前と値と期限があります
JavaScriptはウェブページの外に置いてもかまいません
クッキーを使ってユーザに挨拶しましょう
greetUser()がクッキー対応になりました
クッキーを設定するのもお忘れなく
クッキーはブラウザのセキュリティに影響します
クッキーのない世界
何もしないより、ユーザに話しかける方がベターです
4章 意思決定:道が分かれていたら、どっちに進むか決めなさい
当選者の方、こちらへどうぞ!
"if"これが真ならば...何かを実行する
if文は条件を評価し、結果に応じてアクションを実行します
ifを使って2 つのどちらかを選ぶ
ifを使って複数の決定ができます
if文にelseを追加する
変数を使って物語を進行させる
物語の一部が見つかりません
JavaScriptのアクションを複数にする
if/elseを使って段階的決定にする
ifの中に別のifを書くことができます
ページを関数で制御する
擬似コードを使って冒険の綿密な計画を立てる
棒人形の不具合
!= あのさ、言いたいことは何もないんだけど
比較演算子を使って決定を作り込む
コメントとドキュメンテーション
//で始まるJavaScriptのコメント
スコープとコンテキストでデータのライフサイクルが決まる
変数のスコアをチェックする
データはどこに生存している?
5 つの選択
入れ子になったif/elseは複雑です
switch文には複数の選択肢があります
switch文の内部構造
「棒人形の冒険」のswitchバージョンをテスト運転する
5章 ループ:同じことが重複するのは危険
お宝はXに隠されている
デジャヴュのように何度も繰り返すならforループ
forループを使ってお宝探し
forループを解剖する
Mandango:マッチョのための映画館探し
最初に空席をチェックします
ループとHTMLと座席
座席を変数にする
配列は複数のデータ断片を集めたもの
配列の値はキーとともに格納される
JavaScriptからHTMLを操作する
Mandangoの座席を表示する
座席検索をテスト運転してみる
ループが終わらないのは問題です
ループには脱出条件が必要
アクション中のbreak
論理値を扱う論理演算子について
whileを使って、ある条件が満たされる間だけループする
whileループを分解する
問題に適したループを使う
映画館の座席データをモデル化する
2 次元配列は配列の配列
2 次元データにアクセスするにはキーが2 つ必要
2 次元のMandango
全座席からマッチョのための席を探す
6章 関数:節約、再利用、リサイクル
すべての問題の根源
問題解決のための関数
関数の仕組み
これまで見てきた関数
データを増やしてサーモスタットを改良する
関数に情報を渡す
データとしての引数
関数を使ってコードの重複をなくす
座席を設定する関数を作る
setSeat()でMandangoを改良します
フィードバックの意義
関数からデータを返す
返す値を複数もたせる
座席の状態を取得する
座席の状態を表示する
画像と関数を結びつける
繰り返しの多いコードは良くない
コンテンツから機能を分離する
関数なんてただのデータ
関数の呼び出しと参照
イベント、コールバック、HTML属性
関数参照を使ってイベントとつなぐ
関数リテラルで解決
どこでつながっている?
HTMLページの殻
7章 フォームと検証:ユーザに洗いざらい話してもらう
BannerocityのHTMLフォーム
HTMLではできないこと
フォームデータにアクセスする
フォームフィールドで発生するイベントの連鎖
フォーカスがなくなったときはonblur
アラートボックスを使って検証メッセージを表示できます
フィールドが空でないか検証する
うるさいアラートボックスを使わない
空でない検証をさらに改善する
サイズの問題
データの長さを検証する
郵便番号を検証する
日付を検証する
正規表現は普通の表現ではありません
正規表現はマッチさせるパターンを定義します
メタ文字は正規表現を作るときに使う記号です。
量化子を使って正規表現を強化する
正規表現を使ってデータ検証する
繰り返し回数の最小と最大を指定する
これか、あれかのパターンで3 桁数字をなくす
ほかのフィールドも見逃さない
電話番号を検証する
メールアドレスを検証する
例外に学ぶ
オプション文字を集合にする
メールアドレスの検証関数を作る
8章 ページの部品をかき集める:HTMLをDOMで切る
機能的だけど退屈なインターフェース
アラートボックスを使わずにシーンを説明する
HTML要素にアクセスする
HTMLの内部にアクセスする
木に林を見る:DOM(Document Object Model)
ページはDOMノードの集まり
DOMツリーをプロパティでたどる
DOMを使ってノードのテキストを変更する
「冒険」を標準に準拠させる
きれいな選択肢ボタンを設計する
ノードテキストの置き換えについて再考する
関数を使ってノードのテキストを置き換える
オプションが動的に変わるのは良いことです
オプションをインタラクティブにする
CSSとDOMでスタイルを変更する
スタイルクラスを入れ替える
クラス対応のオプション
スタイル対応のオプションをテスト運転する
空の選択肢ボタンが表示されてしまう
スタイル調整のアラカルト
空の選択肢はもう表示しない
オプションを増やして、より複雑にする
決定ツリーをたどる
決定履歴をHTMLにする
HTMLコードを組み立てる
冒険物語をトレースする
9章 データを活気づける:オブジェクトはフランケンデータ
JavaScriptでパーティの招待状を作る
データ+アクション=オブジェクト
オブジェクトには固有のデータがある
オブジェクトのメンバーをドットで参照
カスタムオブジェクトでJavaScriptを拡張する
カスタムオブジェクトを拡張する
コンストラクタの中はどうなっている?
ブログオブジェクトを実際に作成する
ソートする必要がある
日付のためのJavaScriptオブジェクト
時間の計算
ブログの日付を再考する
オブジェクトの中にあるオブジェクト
オブジェクトをテキストに変換する
日付の断片にアクセスする
オブジェクトとしての配列
配列のソートを調整する
関数リテラルを使ってソートを簡潔にする
ブログ配列を検索する
文字列内を検索するにはindexOf()
ブログ配列を検索する
検索も動くようになりました!
Mathオブジェクトは編成されたオブジェクト
Math.randomを使って乱数を生成する
関数をメソッドに変える
新しいブログオブジェクトのお披露目
オブジェクトがYouCubeにもたらしたもの
10章 カスタムオブジェクトを作成する:カスタムオブジェクトを思い通りに
YouCubeのBlogメソッドを再考する
メソッドのオーバーロード
クラス×インスタンス
インスタンスはクラスから作成される
thisを使ってインスタンスのプロパティにアクセスする
クラスが持つメソッドは、ひとつのメソッドを共有して
実行できます
prototypeを使ってクラスレベルで動かす
クラスとprototypeとYouCube
クラスプロパティも共有される
prototypeを使ってクラスプロパティを作成する
署名が完成しました
日付を整形するメソッド
標準オブジェクトを拡張する
カスタム日付オブジェクトでYouCubeを改良する
クラスに独自のメソッドをもたせる
ソート用比較関数を調べる
クラスメソッドを呼び出す
一枚の写真は千語に匹敵する
YouCubeに画像を組み込む
YouCubeに画像を追加する
オブジェクトで強化されたYouCube
11章 バグをなくせ:良いスクリプトも悪くなる
現実のデバッグ
バグだらけのIQ計算のケース
別のブラウザを試してみる
デバッグを楽にする
変数が未定義になる
IQの計算が成功しました
ラジオ番組の着呼のバグ
調査の開始
構文が妥当か調べる(バグその1)
文字列に注意する
二重引用符と単一引用符を一貫させる
引用符を引用符として使わないときはエスケープ文字を
追加する
undefinedは変数のためだけにあるのではない(バグその2)
全員が勝利してしまう(バグその3)
アラートボックスを使ってデバッグ
アラートを使って変数の値をウォッチする
論理エラーは合法ですがバグになります
今度は誰も当選者になれない!(バグその4)
アラートの連発に打ちのめされる
デバッグのためにカスタムコンソールを作る
実行時のしつこいエラー
JavaScriptの3 大バグ
コメントを使って一時的にコードを無効にする
影の変数は危険
12章 ダイナミックなデータ:感度良好なウェブアプリケーション
動的なデータを実現したい
データ駆動のYouCube
Ajaxとは要するに通信のこと
XMLを使うとあなたのデータをあなたのやり方で扱えます
XML+HTML=XHTML
XMLをYouCubeブログデータに適用する
YouCubeにAjaxを導入する
JavaScriptとAjaxの架け橋:XMLHttpRequest
GETかPOSTか? XMLHttpRequestのリクエスト
Ajaxリクエストの意味を理解する
リクエストオブジェクトを使ってページを
インタラクティブにする
仕事が終わったら呼び出して
レスポンスを継ぎ目なく処理する
DOMからデータを引き出す
YouCubeはそのデータで稼動する
ボタンの機能不全
ボタンに必要なデータ
ウェブでブログを追加して時間を節約する
ブログデータを書く
PHPを動かすのに必要なこと
PHPスクリプトにデータを送り込む
ブログデータをサーバにポストしてみましょう
YouCubeをもっと使いやすくする
自動入力フィールドにする
タスクが重複していたら、関数にしてみては?
索引