楽しいイラストと親しみやすい語り口で、わかりやすいと大人気の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をもっと使いやすくする 自動入力フィールドにする タスクが重複していたら、関数にしてみては? 索引