『JavaScript問題集 for Web Designers 第７版』解答例

ファイルの処理を簡単にするため、HTMLファイルにJavaScript（JS）のコードも書いてあります。ネットに公開するような場合は、JSのコードは別ファイルに入れるようにしてください（HTMLファイルの</body>の前に置くのが原則）。

1.1（ダイアログボックス）
1.1の例を2つのファイル（.htmlと.js）にしたもの
1.2（ダイアログボックスに表示する文字列を変更）
1.3（document.writeを使って表示）
1.4（画像の表示）
1.4で画像のフォルダを間違えた例
1.4のバリエーション
1.5 640px（ピクセル）の幅で表示
1.6 25％の幅で表示
1.7 document.writeを使って画像を表示

2.1（計算の実行、確認）
2.2（計算の実行、確認）
2.3（console.logの挿入）
2.4（テンプレートリテラルその1）
2.5（テンプレートリテラルその2）
2.6（テンプレートリテラルその3）

3.1（「◯◯が好きです」を24回）
3.2（番号を振る）
3.3（変数を使って、最後にdocument.write）
3.4（console.logを挿入して、途中経過を確認。consoleでは「\n」を使って改行）

4.1（おみくじ。大吉、大凶）
4.2（おみくじ。大吉、小吉、末吉、凶が同じ割合）
4.3（おみくじ。大吉、中吉、小吉、末吉、凶、大凶）
4.4（おみくじ、画像表示）

4.1（バッククオート）
4.2（バッククオートの中で計算）
4.3（画像タグ）

5.1（自乗）
5.2（平均）
5.3（3秒後にメッセージを表示）
5.4（無名関数）
5.5（アロー関数）
5.6（繰り返しメッセージを表示）

6.1（四角が動く）
6.2（四角が動く。５倍の速度で動かす）
6.3（四角が動く。左右の動きを繰り返す）
6.3（別解）
6.4（車を動かす）
6.4の別解（document.images[0]を利用する）
6.5（車を左右に動かす）
6.5の別解
6.5のさらに別解
6.6（車を左右に動かす。ウィンドウの端で折り返す）
6.6別解
6.7（車を左右に動かす。ウィンドウの大きさを変えたときにも右端で折り返すようにする）
6.8（四角が動く。色が変わる）

7.1（計算その1）
7.2（計算その2）
7.3（ラッキーナンバー。0~9）
7.4（ラッキーナンバー。1~10）
7.5（console.logの挿入）
7.6（デバッガで実行）

8.1（<ol>...</ol>）
8.2（8枚の画像）
8.3（document.getElementById("xxx").innerHTML）
8.3の別解（参考。HTMLファイルとJSファイルを分けた例）
8.4（画像の大きさを変更）
8.5（<table>タグを使った１行４列の画像）
8.6（２行４列の画像）
8.6の別解（二重のループ）
8.7（４行４列の画像）
8.8（クリックすると大きな画像を表示）
コラムのtoStringとpadStartを利用

9.1（関数「画像タグを生成」を作成）
9.2（「画像タグを生成」を利用して画像を表示）
9.3（「幅を指定して画像タグを生成」を作成）
9.3のバリエーション

10.1（配列の内容を表示）
10.2（ラッキーカラー）
10.3（ラッキーカラー、色の文字をその色で）
10.4（ラッキーカラー、黄色は背景を指定）
10.5（ラッキーアイテム）—— ソースに説明を書きましたのでお読みください。

11.1（辞書） —— ソースに説明を書きましたのでお読みください。
11.2（英単語と訳語のペア）
11.3（和英辞書）

12.1（ポケモン）
12.2（ポケモン。if）
12.3（prompt()）
12.4（1からnまで合計）
12.4の別解（1からnまで合計）

13.1（ロケットをクリックするとダイアログボックス）
13.2（スタートボタンを押したら車を左右に動かす）
13.3（マウスが載った画像を拡大）
13.3のjQuery版（参考）
13.3のforEach版（参考）
13.3のdocument.getElementsByClassName()を使った版（参考）
13.4（ロケット発射。ボタンをクリックしたら発射）
13.5（ロケット発射。カウントダウンして発射）
13.6（上の2つの合わせ技。ボタンをクリックしたらカウントダウンして発射）
13.6 別解1（複数回クリックしてもカウントダウンが速くならない）
13.6 別解2（同上の別解）

14.1（電話番号検索）
14.2（単語帳フォーム。英和）
14.3（単語帳フォーム。和英）
14.4（単語帳フォーム。英和・和英）

15.1（時刻によってあいさつの言葉を換える）
15.2（現在の日時や曜日を表示する）
15.3（現在時刻を表示する時計を作る。24時間表記）
15.4（現在時刻を表示する時計を作る。午前、午後を付ける）
15.5（東京五輪開会式からの日数を表示）

16.1の簡易版（参考。いつも文字列の「大吉」を表示するが、1日2度までしか引けない)
- Chromeではローカルでうまく動かないので、サーバに転送して実行するか、FirefoxやSafariなどで実行してください（やり方がわからない方は、ひとまずFirefoxなどでお試しください）。
- クッキーを削除すると、また試すことができます。クッキーの削除方法は次の例題の説明をご覧ください。
16.1（おみくじ。1日2度までしか引けない)
- クッキーを削除すると、また試すことができます（あるいは日付を変えてみるとか）。クッキーの削除方法は次のとおりです（時々方法が変わりますのでお読みになるときには少し違っている可能性があります。その場合は、似たような項目を探してみてください）。
  - Google Chromeの場合（なお、Chromeの場合、ローカルファイルを読み込んで試すとクッキーがうまく動作しないことがある。その場合、FirefoxかSafariで試してください。ローカルでWebサーバを動かすか、アップロードしたりしてウェブサーバを経由すれば大丈夫。わからない人はひとまずForefoxなどでお試しください）。
    1. ［環境設定］（あるいは右上の3本線をクリックして［設定］）→［詳細設定］をクリック
    2. 「プライバシーとセキュリティ」の項目の下にある［コンテンツの設定］をクリック
    3. 「Cookie」欄の［ブラウザを終了するまでローカルデータを保存する］をクリック
    4. ［すべての Cookie とサイトデータを表示］をクリック
    5. サイト名の一部（たとえば "localhost" とか "marlin-arms" とか）を入力して検索
    6. サイトを選択するとクッキーが表示されるので該当するクッキー（たとえば "omikuji" ）の右側に表示される×をクリックして削除
  - Firefoxの場合
    1. ［環境設定］で右上の［設定を検索］に「cookie」と入力して検索
    2. 「Cookieを個別に削除」というリンクが表示されるので、それをクリック
    3. 「omikuji」を検索して、該当するものをクリック
    4. 下のほうに表示される［選択したCookie を削除］をクリックして削除する
  - Safariの場合
    1. ［環境設定］→［プライバシー］で、［Cookie と Web サイトのデータ］の一番下にある［Webサイトデータを管理...］をクリック
    2. 一番下までスクロールすると表示される［コンピュータのローカル書類］を選択して［削除］をクリック

17.1（英和辞書）
17.2（英和辞書。指定した文字列で始まるものを列挙）
17.3（英和辞書。指定した文字列で終わるものを列挙）

18.1（英和和英辞書。外部サイトからデータを取得）

19.1（計算練習を表示）
19.2（計算練習の表示と答え合わせ）

『JavaScript問題集 for Web Designers 第７版』 解答例

『JavaScript問題集 for Web Designers 第７版』解答例