Head First JavaScript
――頭とからだで覚えるJavaScriptの基本

[cover photo]
  • 2008年08月 発行
  • 648ページ
  • ISBN978-4-87311-373-9
  • フォーマット Print PDF
  • 原書: Head First JavaScript

オライリー・ジャパンで書籍を購入:
定価4,320円

Ebook Storeで電子版を購入:
価格3,456円

楽しいイラストと親しみやすい語り口で、わかりやすいと大人気のHead FirstシリーズにJavaScriptバージョンが登場! ビジュアル表現を多用して、JavaScript初心者にインタラクティブなWebアプリケーションを実現する方法を詳しく解説しています。JavaScriptそのものだけでなく、ブラウザがプログラムを実行する仕組みなどWebに関する知識も深めることができます。Ajaxに関わるDOM、XML、通信などの知識を最後の章にまとめました。JavaScript入門書の決定版です。

関連書籍

JavaScript & DHTMLクックブック 第2版

序章
    この本を読むのにふさわしいのは誰でしょう? 
    あなたがどう思っているのか、わかってます 
    メタ認知: 思考についての思考 
    あなたの脳を思い通りに使うためにできること 
    読んでね 
    テクニカルレビューチーム 
    謝辞 

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をもっと使いやすくする 
    自動入力フィールドにする 
    タスクが重複していたら、関数にしてみては? 

索引 

ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、正誤表を作成し、増刷書籍を印刷した月です。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷版、刷り年月日をご確認の上、ご利用ください。

1刷正誤表

Head First JavaScript1刷正誤表

2009年9月1日更新

位置
p9
コード
7行目
// if (!isNumber(value)) if (!isNumber(value))
p9
コード
12行目
// if (!isZIPCode(value)) if (!isZIPCode(value))
p10
コード
7行目
// if (!isNumber(value)) if (!isNumber(value))
p10
コード
12行目
// if (!isZIPCode(value)) if (!isZIPCode(value))
p17
右下囲み
2番目のA
『Head First HTML with CSS & XHTML』 『Head First HTML with CSS & XHTML』(訳注:日本語版は発刊されていませんので、HTML、CSSについて詳しくは 『HTML & XHTML第5版』、『CSS完全ガイド第2版』などを参考にしてください。)
p45
一番下の
コメント
これらはすべてJavaScriptでは違法な名前です これらはすべてJavaScriptでは違法または不適切な名前です
p76
左カラム
中央
文字列をスチに変換する必要があります。 文字列を数値に変換する必要があります。
p77
3行目
ユーザ体験を改善したいと 使い勝手を改善したいと
p98
左カラム
7-8行目
それが間違いだとわかっていても、で
すか?ブラウザ:コードを
それが間違いだとわかっていても、で
すか?
ブラウザ:コードを
p153
左の1の
コメント
1 家のまわりを歩きます。 1 裏に回る
p153
左の2の
コメント
2 魔女に手を振ります。 2 ドアをノックする
p153
左の1の
コメント
1 橋を歩いて渡ります。 1 橋を渡る
p153
左の2の
コメント
2 川を見つめます。 2 流れを眺める
p237
下から
26行目
< img id="seat14" src=" alt="" />
< img id="seat14" src="" alt="" />

ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、正誤表を作成し、増刷書籍を印刷した月です。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷版、刷り年月日をご確認の上、ご利用ください。

2刷正誤表

Head First JavaScript2刷正誤表

2009年9月1日更新

位置
p17
右下囲み
2番目のA
『Head First HTML with CSS & XHTML』 『Head First HTML with CSS & XHTML』(訳注:日本語版は発刊されていませんので、HTML、CSSについて詳しくは 『HTML & XHTML第5版』、『CSS完全ガイド第2版』などを参考にしてください。)

Feedback

皆さんのご意見をお聞かせください。ご購入いただいた書籍やオライリー・ジャパンへのご感想やご意見、ご提案などをお聞かせください。より良い書籍づくりやサービス改良のための参考にさせていただきます。
[feedbackページへ]