第1章
第2章
- 問題2-1 ドキュメント領域に「こんにちは」と表示せよ【写経】
- 問題2-2 下の図のようにドキュメント領域に「おはようございます」「こんにちは」「こんばんは」を1行ずつ表示せよ（あいだに「改行」を入れる）【写経】
- 問題2-3
document.writeを使ってpicturesフォルダにある画像picture001.jpgを表示せよ【写経】 - 問題2-4
document.writeを使ってpicturesフォルダにある2つの画像picture000.jpgとpicture001.jpgを表示せよ【写経】
第3章
- 問題3-1 大吉か大凶がランダムに表示されるおみくじのプログラムを作れ【写経】
- 問題3-2 大吉、小吉、末吉、凶が同じ割合で出るおみくじのプログラムを作れ
- 問題3-3 今日の運勢（大吉、中吉、小吉、末吉、凶、大凶のいずれか）を次の割合で表示するプログラムを作成せよ
- 問題3-4 前の問題と同じ割合で今日の運勢（大吉、中吉、小吉、末吉、凶、大凶のいずれか）を表示するプログラムを作成せよ。このとき、picturesフォルダにある該当する画像（omikuji_suekichi.pngなど）を表示せよ
- 問題3-5 次の計算の結果を予想し、結果を出力して比較せよ
- 問題3-6 次の計算の結果を予想し、結果を出力して比較せよ
- 問題3-7 次の図は変数
xの値の変化を順を追って表示したものである。「x -= 2;」以降の空欄を埋めよ - 問題3-8 同じように「
x = y + 5;」以降の空欄を埋めよ - 問題3-9 上の問題の各文の後ろにalert()を入れて、途中経過を表示しながら、xの値の変化を追ってみよ
- 問題3-10 次のコードを読み、何が出力されるか予想してから、入力して実行せよ
- 問題3-11 次の文字列処理の結果xの値がどうなるかを予想し、結果を出力して予想と比較せよ
- 問題3-12 今日のラッキーナンバー(0〜9までのいずれか）を表示するプログラムを作成せよ。0〜9までの数字はランダムに出現するものとする【写経】
- 問題3-13 今日のラッキーナンバー(1〜10までのいずれか）を表示するプログラムを作成せよ。1〜10までの数字はランダムに出現するものとする
- 問題3-14 今日のラッキーナンバー(1〜100までのいずれか）を表示するプログラムを作成せよ。1〜100までの数字はランダムに出現するものとする
第4章
- 問題4-1 「私はプログラミングが好きになる〜〜」と16行出力するプログラムをforループを使って作成せよ【写経】
- 問題4-2 問題4-1の出力の、各行の前に、1から順番に番号を振れ【写経】
- 問題4-3 問題4-2で、出力するHTMLコードをすべて変数に保存しておいて、最後に一度だけ
document.writeを呼ぶように変更せよ【写経】 - 問題4-4 問題4-3で途中で作られるHTMLコードをconsole.logで確認しながら実行するようにしてみよ【写経】
- 問題4-5 問題4-4で、番号を書くのに、数字を直接書くのではなく、番号付きのリストを出力するタグ（
<ol>...</ol>）を使って書け（olタグを使ったほうが数字が右揃えになって見た目がよい） - 問題4-6
picturesフォルダにある画像を8枚連続して表示するプログラムをforループを使って書け【写経】 - 問題4-7 問題4-6でスタイルを指定して、画像の大きさを変更してみよ（ 100px、20%、50%、10cm、...）など。なお、解像度の高いモニタで"cm"、"mm" などで指定すると、画面上の大きさは異なる（プリンタで出力すれば大丈夫。詳しくはhttps://www.w3.org/Style/Examples/007/units.en.htmlを参照）
- 問題4-8 forループとHTMLの
<table>...</table>を使って1行4列の画像のテーブルを作成せよ。画像の大きさは120pxとする【写経】 - 問題4-9 forループとHTMLの
<table>...</table>を使って2行4列の画像のテーブルを作成せよ - 問題4-10 forループとHTMLの
<table>...</table>を使って4行4列の画像のテーブルを作成せよ - 問題4-11 forループとHTMLの
<table>...</table>を使って4行4列の画像のテーブルを作成し、クリックしたら大きな画像を表示するページに移動するようにせよ - 問題4-12 下に説明する
toStringとpadStartを使ってpicture000.jpgからpicture039.jpgまでの全部の画像を表示して、それぞれの画像を選択した際にオリジナルの画像を大きく表示するようにせよ。また、あとで枚数が増えたときに簡単に変更できるよう、冒頭で定数「画像の枚数」を使って画像の枚数を指定するようにせよ
第5章
- 問題5-1 引数xに対してxの2乗を返す関数「自乗を計算」を作り、これを呼び出して10, 4, 9, 12, 128の2乗を計算せよ【写経】
- 問題5-2 2つの引数を与えられて、その平均を返す関数「平均を求める」を作り、これを呼び出して次の組の平均を求めよ ── 10と6、4と4、130と80、5.2と4.6
- 問題5-3 引数にファイル名を指定すると、その画像を640px × 480pxの大きさで表示する<img>タグを作って返してくれる関数「画像タグを生成」（あるいは「makeImageTag」）を作ってうまく動作するかテストせよ【写経】
- 問題5-4 picturesフォルダが例題のファイルと同じフォルダにあることを確認してから、前の例題のconsole.logの下に、document.writeを加えて、できあがった
<img>タグを書き出し、プログラムを実行して、画像が表示されることを確認せよ【写経】 - 問題5-5 問題4-3で定義した関数「
画像タグを生成」を変更して、画像の幅を指定する引数を渡せるようにした「幅を指定して画像タグを生成」を作成せよ - 問題5-6 問題5-5の関数「
幅を指定して画像タグを生成」を使って、画像の幅を100ピクセル、200ピクセル、300ピクセル、...、800ピクセルに指定した画像を連続して表示せよ。同じ行には1つずつ表示すること - 問題5-7 上と同じように大きさを変えて8枚の画像を表示するが、画像のファイルもpicutre000.jpg、picture001.jpg、picture002.jpg、...、picture007.jpgと順に変化させよ。同じ行には1つずつ表示すること（下図参照）
- 問題5-8 関数「
幅を単位付きで指定して画像タグを生成」を定義して、画像の幅を「ドキュメント領域の横幅」の10%、20%、30%、40%に指定して画像を連続して表示せよ。画像もpicutre000.jpg、picture001.jpg、picture002.jpg、...、picture007.jpgと変化させよ。同じ行には4つずつ表示すること（下図参照）
第6章
- 問題6-1 ページを読み込んでから3秒後に、「3秒経過しました」というダイアログボックスを一度だけ表示せよ。関数
setTimeoutを使うこと - 問題6-2 問題6-1の「
ダイアログボックスを表示」を無名関数に変更せよ - 問題6-3 問題6-2の無名関数をアロー関数を使って書け
- 問題6-4 ページを読み込んでから3秒後に、「3秒経過しました」というダイアログボックスを表示し、以降3秒経過するたびに同じダイアログボックスを表示せよ。ただし3回でやめるものとする
第7章
- 問題7-1 配列の内容を順番に書き出すプログラムを作れ【写経】
- 問題7-2 今日のラッキーカラー（赤、青、黄色、緑、紫、黒、ピンク、茶色、灰色のいずれか）をランダムに表示するプログラムを配列を使って書け【写経】
- 問題7-3 今日のラッキーカラー（赤、青、黄色、緑、紫、黒、ピンク、茶色、灰色のいずれか）をランダムに表示するプログラムを書け。ラッキーカラーの文字はその色で表示すること
- 問題7-4 今日のラッキーカラー（赤、青、黄色、緑、紫、黒、ピンク、茶色、灰色のいずれか）をランダムに表示するプログラムを書け。ラッキーカラーの文字はその色で表示すること。ただし、黄色は見にくいので適当な背景色（background-color）を指定すること
- 問題7-5 今日のラッキーアイテム（マウス、万年筆、シャープペン、スマフォ、ホッチキス、ポストイット、定期券、ペンダントのいずれか）を表示するプログラムを作成せよ
- 問題7-6 下のようなメッセージを表示するプログラムを作成せよ【写経】（タイモン10匹まで）
- 問題7-7 下のようなメッセージを表示するプログラムを作成せよ（1匹の時だけ特別処理）（タイモン100匹まで）
- 問題7-8 ［ダイアログボックスを使った入力］ ユーザーが入力した整数をそのまま出力するプログラムを作成せよ【写経】
- 問題7-9 1からユーザーが入力した数（整数）までの各数値を足した値を表示するプログラムを作成せよ
第9章
- 問題9-1 ダイアログボックスに英単語を入力すると、その日本語訳をドキュメント領域に表示する、「辞書」ページを作れ。単語数は5語以上とする。辞書にない単語を入力したら「わかりません」と表示する【写経】
- 問題9-2 問題9-1で作った英和辞書の項目の「英単語と訳語」のペアを、ドキュメント領域とコンソールにすべて書き出すプログラムを作成せよ【写経】
- 問題9-3 問題9-2で作った英和辞書の項目の「英単語と訳語」のペアを逆にして、和英辞書を作れ
- 問題9-4 次のようにあいさつを表示せよ
- 問題9-5 現在の年月日、曜日、時刻（秒まで）を表示せよ
第10章
- 問題10-1 この章の課題の「スライドショー」で画像を1度に2枚ずつ表示するようにせよ。更新する際は、右側にあった画像を左側に移動して、右側に新しい画像を表示するものとする
- 問題10-2 この章の課題の「スライドショー」で画像を1度に2枚ずつ表示するようにせよ。前に表示した画像は表示しないで、2枚とも新しい画像に変えるものとする
- 問題10-3 問題10-2を30枚の画像を表示できるように変更せよ
- 問題10-4 ページを表示すると3秒後にランダムに選んでニュースサイトに移動するページを作れ。移動する前にダイアログボックスを使って移動するかどうか確認するものとする
- 問題10-5 ページを表示すると3秒後に以下の条件を満たすニュース系サイトに移動するページを作れ。移動する前にダイアログボックスを使って確認するものとする
第11章
- 問題11-1 この章の課題（
example/ch1101.html）のコードに時間を計測するコードを挿入し、カウントダウンの処理（数字などの表示）にどの程度の時間がかかっているかを計測せよ【写経】 - 問題11-2 第6章の課題（
example/ch0601.htmlのコードに時間を計測するコードを挿入し、カウントダウンの処理（数字などの表示）にどの程度の時間がかかっているかを計測せよ。問題11-1の結果と比較せよ。 - 問題11-3 問題11-2のコードから
document.writeを取り除き、document.getElementByIDを使って書き出して、結果を比較せよ。 - 問題11-4 「11.4.2 位置の変化」で動かした長方形を、CSSの背景色（background-color）を使って描き、同じように左から右に動かせ
- 問題11-5 問題11-4の長方形を5倍の速度で動かせ。
- 問題11-6 画面上に長方形を表示し、その長方形を左から右、右から左と交互に動かすプログラムを作れ
- 問題11-7 画面上にロケットの画像（pictures/rocket3.png）を表示し、左から右に動かすプログラムを作れ
- 問題11-8 ロケットを左から右、右から左と交互に動かすプログラムを作れ。折り返す場所は、ロケットが画面からはみ出ない適当な場所にせよ（
pictures/rocket3.pngとpictures/rocket4.pngの画像を使う） - 問題11-9 問題11-8で表示したロケットを、ウィンドウの右端より少し左で折り返すようにせよ
- 問題11-10 デジタル時計を表示せよ（24時間制)
- 問題11-11 デジタル時計を表示せよ（午前、午後)
- 問題11-12 2021年に開催された東京オリンピックの開会式の日（7月23日）からの日数を表示するプログラムを作成せよ
第12章
- 問題12-1 ロケットの画像をクリックしたら「クリックしました！」とダイアログボックスに表示するプログラムを作れ
- 問題12-2 ロケットの画像の下に「発射」ボタンを置き、ボタンを押したらカウントダウンを開始して、0になったらロケットの画像を変えて、発射したように見せよ
- 問題12-3 ロケットが左から右、右から左と交互に動くプログラムを作れ。ただし、ウィンドウの大きさを変えても右端付近で折り返すようにせよ。また、30秒経過したらロケットを停止せよ（問題11-9を参考に）
- 問題12-4 上の問題で、最後にロケットを止める際に、30秒経過後に左端まで戻ったときに停止するようにせよ。ロケットの向きは最初と同じように右向きにする
- 問題12-5 上の問題で、ロケットが右端のほうにあるときに、ウィンドウ幅を左に縮めても、ロケットが隠れてしまわないようにせよ
- 問題12-6 画像を5つ横に並べ、マウスが上にきた画像だけを拡大するようなページを作れ。画像の下辺を揃えるように工夫せよ（★難問★）
- 問題12-7 上の問題で、画像を拡大するときに少しずつスムーズに拡大するようにせよ（上の問題の解答例では、画像が突然拡大されるが、少しずつ拡大されるようにする）
- 問題12-8 氏名を入力して［検索］ボタンを押すと、その人の電話番号を表示する「フォーム」を使ったページを作成せよ。登録されていない氏名を入力した場合は、「わかりません」と表示する【写経】
- 問題12-9 問題9-1と同じデータ（英和辞書）を用いて、英単語を入力して［検索］ボタンを押すと、日本語訳を表示するフォームを使ったページを作成せよ
- 問題12-10 問題12-9と同じ英和辞書のデータを用いて、日本語の単語を入力して［検索］ボタンを押すと、対応する意味をもつ英単語を表示するフォームを使ったページを作成せよ（問題9-3で作った和英辞書を使う）
- 問題12-11 上の問題を組み合わせて、英単語を入れたときは日本語の意味を、日本語の単語を入れたときは対応する英単語を表示するページを作成せよ
- 問題12-12 下図のような動画を表示するページを作れ【写経】
- 問題12-13 問題12-12の動画ページに、下図に示すようなサウンドのオン・オフを切り替えるボタンを付けよ
- 問題12-14 問題12-13の動画ページに、下図に示すような「5秒戻る」「5秒進む」のボタンを追加せよ
- 問題12-15 4つの動画を順番に再生する、下記の条件を満たすページを作れ
- 問題12-16 「この章の課題」の動画版を作成せよ