diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx index c14808a99..a6c4755cc 100644 --- a/docs/1-trial-session/02-html/index.mdx +++ b/docs/1-trial-session/02-html/index.mdx @@ -122,9 +122,7 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが ::: -## 演習問題 - -### 問題1 +## 演習問題1 単一のHTMLファイルのみを使用して、下のような遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。 @@ -162,7 +160,7 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが -### 問題2 (時間が余った場合) +## 演習問題2(発展) 下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすらHTMLタグを並べるのみです。 diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index 1ae9d0c9c..f63020c8f 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -147,9 +147,7 @@ CSSのプロパティには`color` (文字色) ::: -## 演習 - -### 基礎演習1 (セレクタ) +## 演習問題1 次のような条件を満たす要素を選択するセレクタは何でしょうか。 @@ -163,7 +161,7 @@ CSSのプロパティには`color` (文字色) -### 基礎演習2 (Hello CSS!) +## 演習問題2 下のような、文字色が黄色、背景色が好きな色 (この例では黒) の`Hello CSS!`をブラウザで表示してみましょう。 @@ -198,7 +196,7 @@ CSSのプロパティには`color` (文字色) -### 中級演習 +## 演習問題3(発展) 画像のようなシンプルなボックスを作ってみましょう。 diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx index e63d926eb..52026de0b 100644 --- a/docs/1-trial-session/06-variables/index.mdx +++ b/docs/1-trial-session/06-variables/index.mdx @@ -102,7 +102,7 @@ document.write(price); ![変数の再代入](./reassignment-evaluation.png) -## 確認問題 +## 演習問題 `counter`という名前の変数を作成し初期値を`0`としてください。 その後、`counter`に`1`を加え、その結果を表示してください。 diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx index b91050f61..a1e8662ed 100644 --- a/docs/1-trial-session/07-boolean/index.mdx +++ b/docs/1-trial-session/07-boolean/index.mdx @@ -101,7 +101,7 @@ document.write(takaoHeight = everestHeight); ::: -## 演習 +## 演習問題 クイズ番組で田中さんと佐藤さんが戦っています。 田中さんの点数が`tanakaScore`で、佐藤さんの点数が`satoScore`で用意されています。 diff --git a/docs/1-trial-session/08-if-statement/index.mdx b/docs/1-trial-session/08-if-statement/index.mdx index 1fe248498..d01d31bed 100644 --- a/docs/1-trial-session/08-if-statement/index.mdx +++ b/docs/1-trial-session/08-if-statement/index.mdx @@ -71,7 +71,7 @@ if (式1) { ![if文のフローチャート](./flowchart.drawio.svg) -## 演習 +## 演習問題 自分の年齢を変数に入れておきます。 diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index 49d8edbde..3aa75f89a 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -172,11 +172,7 @@ increment(); ::: ---- - -## 基礎演習 - -### 最大値 +## 演習問題1 {/* prettier-ignore */} 引数を2つとり、そのうち大きい数を返す関数`max`を定義してください。 @@ -221,9 +217,7 @@ function max(a, b) { -## 中級演習 - -### 携帯電話料金 +## 演習問題2(発展) 携帯電話料金を計算する関数を作ってみましょう。 diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index 17d1d267b..3f5f8f2c7 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -135,11 +135,7 @@ const string2 = `10から2を引くと${10 - 2}です。`; ::: ---- - -## 基礎演習 - -### 1~10の積 +## 演習問題1 `1`から`10`までの数の積を求めて画面に表示する、`for`文を含むコードを書いてみましょう。 @@ -155,7 +151,7 @@ document.write(product); -### 別解 +別解 複合代入演算子を使うと次のようにも書けます。 @@ -171,9 +167,7 @@ document.write(product); -## 中級演習 - -### 素数判定 +## 演習問題2(発展) ある整数の変数`n`が与えられたとき、その値が素数であるかどうか判定するプログラムを作成してください。 diff --git a/docs/1-trial-session/11-array/index.mdx b/docs/1-trial-session/11-array/index.mdx index 98fc6055a..e6dd24f84 100644 --- a/docs/1-trial-session/11-array/index.mdx +++ b/docs/1-trial-session/11-array/index.mdx @@ -35,7 +35,7 @@ const six = 6; document.write(studentNames[six / 2 - 1]); // 鈴木 ``` -### 問題 +### 確認問題 次のプログラムを実行すると何と表示されるでしょうか。 @@ -99,11 +99,7 @@ studentNames.push("内藤"); document.write(studentNames); // 田中,佐藤,鈴木,内藤 ``` ---- - -## 基礎演習 - -### 要素の和 +## 演習問題1 - 配列があります。その配列の要素の和を求めてみましょう。 @@ -135,7 +131,7 @@ document.write(`配列の合計値は ${sum} です。`); -### 別解 +別解 `for〜of`文を使わず、次のように書くこともできます。 @@ -154,9 +150,7 @@ document.write(`配列の合計値は ${sum} です。`); -## 中級演習 - -### 配列の最大値 +## 演習問題2(発展) 引数に配列を一つ取り、その配列の最大値を求める関数`findMaxNumber`を作成しましょう。 diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx index ebe10685b..29197d684 100644 --- a/docs/1-trial-session/13-dom/index.mdx +++ b/docs/1-trial-session/13-dom/index.mdx @@ -168,9 +168,7 @@ packingList.appendChild(capElement); -## 初級演習 - -### 買い物リストの書き換え +## 演習問題1 次のHTMLファイルから読み込んでいるJavaScriptファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。 @@ -194,9 +192,7 @@ targetItem.textContent = "レモン"; -## 中級演習 - -### フルーツバスケット +## 演習問題2(発展) 購入する予定の果物を表す文字列が格納された配列が次のように用意されています。 diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx index 21d6f80cb..39a6fb5ea 100644 --- a/docs/1-trial-session/14-events/index.mdx +++ b/docs/1-trial-session/14-events/index.mdx @@ -77,7 +77,7 @@ greetButton.onclick = clicked(); ::: -## 演習 +## 演習問題 押すと大きく赤文字が表示される「びっくり箱」のようなボタンを作ってみましょう。 diff --git a/docs/2-browser-apps/02-reference/index.mdx b/docs/2-browser-apps/02-reference/index.mdx index 3e2c7725b..614840332 100644 --- a/docs/2-browser-apps/02-reference/index.mdx +++ b/docs/2-browser-apps/02-reference/index.mdx @@ -62,7 +62,7 @@ const person = { ![ネストされた参照](./nested-reference.drawio.svg) -## 演習 +## 演習問題 参照の仕組みが特に問題になってくる場合として、オブジェクトの参照先が別の関数によって書き換えられる場合があります。次のコードを実行してみましょう。 diff --git a/docs/2-browser-apps/03-class/index.mdx b/docs/2-browser-apps/03-class/index.mdx index 9eddf6f40..7fdba3d63 100644 --- a/docs/2-browser-apps/03-class/index.mdx +++ b/docs/2-browser-apps/03-class/index.mdx @@ -391,9 +391,7 @@ document.write(false.toString()); // false ::: -## 演習 - -### `Date`クラス +## 演習問題1 [`Date`クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を使って、現在時刻を表示してみましょう。`Date`クラスのドキュメントを読んで、現在時刻を表示するのに必要なメソッドを探してみましょう。 @@ -425,7 +423,7 @@ currentTime.textContent = getCurrentTime(); -### 図形クラス +## 演習問題2 色を表す`color`プロパティを持つ`Shape`クラスを実装してみましょう。 diff --git a/docs/2-browser-apps/04-anonymous-function/index.mdx b/docs/2-browser-apps/04-anonymous-function/index.mdx index 935113151..20681615b 100644 --- a/docs/2-browser-apps/04-anonymous-function/index.mdx +++ b/docs/2-browser-apps/04-anonymous-function/index.mdx @@ -96,9 +96,7 @@ document.write(pricesWithTax); // 120,240,360,480,600 const pricesWithTax = pricesWithoutTax.map((price) => price * (1 + taxRate)); ``` -## 演習 - -### 問題1 +## 演習問題1 先ほどの[`Array#map`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)を用いてみましょう。`students`変数に格納されている名前を箇条書きにしてください。 @@ -129,7 +127,7 @@ studentList.innerHTML = students -### 問題2 +## 演習問題2 `scores`変数には、各必修科目の点数が格納されているとします。全ての要素が50点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。 @@ -161,7 +159,7 @@ if (scores.every((score) => score >= 50)) { -### 問題3 (発展) +## 演習問題3(発展) [`Array#reduce`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)は、`Array`クラスのメソッドの中でも特に使い方の難しいメソッドです。ドキュメントをよく読み、このメソッドを用いて配列の最小値を求めてみましょう。 diff --git a/docs/2-browser-apps/05-css-arrangement/index.mdx b/docs/2-browser-apps/05-css-arrangement/index.mdx index d1fe96ae9..617e208bd 100644 --- a/docs/2-browser-apps/05-css-arrangement/index.mdx +++ b/docs/2-browser-apps/05-css-arrangement/index.mdx @@ -123,7 +123,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類 また、インライン要素の場合、`width`や`height`は適用されません。 -### 演習 +### 確認問題 `display`プロパティを操作することで要素の挙動を変更することができます。 @@ -480,7 +480,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類