ut-code · naka-12 · May 14, 2024 · Apr 30, 2024 · Apr 30, 2024 · Apr 30, 2024
diff --git a/docs/1-trial-session/13-dom/_samples/add-strong-snack/index.html b/docs/1-trial-session/13-dom/_samples/add-strong-snack/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <ul id="packing-list">
+      <li>お弁当</li>
+      <li>水筒</li>
+      <li>タオル</li>
+      <li>レジャーシート</li>
+    </ul>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/1-trial-session/13-dom/_samples/add-strong-snack/script.js b/docs/1-trial-session/13-dom/_samples/add-strong-snack/script.js
@@ -0,0 +1,7 @@
+const newItem = document.createElement("li");
+const strongPart = document.createElement("strong");
+strongPart.textContent = "おやつ";
+newItem.appendChild(strongPart);
+
+const packingList = document.getElementById("packing-list");
+packingList.appendChild(newItem);
diff --git a/docs/1-trial-session/13-dom/_samples/change-styles/index.html b/docs/1-trial-session/13-dom/_samples/change-styles/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div id="greeting">Hello World!</div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/1-trial-session/13-dom/_samples/change-styles/script.js b/docs/1-trial-session/13-dom/_samples/change-styles/script.js
@@ -0,0 +1,3 @@
+const greetingElement = document.getElementById("greeting");
+greetingElement.style.color = "yellow";
+greetingElement.style.backgroundColor = "black";
diff --git a/docs/1-trial-session/13-dom/_samples/good-evening/index.html b/docs/1-trial-session/13-dom/_samples/good-evening/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div>Good <strong id="greeting-type">morning</strong>!</div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/1-trial-session/13-dom/_samples/good-evening/script.js b/docs/1-trial-session/13-dom/_samples/good-evening/script.js
@@ -0,0 +1,2 @@
+const greetingType = document.getElementById("greeting-type");
+greetingType.textContent = "evening";
diff --git a/docs/1-trial-session/13-dom/add-strong-snack.png b/docs/1-trial-session/13-dom/add-strong-snack.png
diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx
@@ -11,18 +11,28 @@ title: DOM
 `document.getElementById` <Term>関数</Term>は、<Term>引数</Term>として <Term>HTML 要素</Term>の `id` <Term>属性</Term>に指定された値を<Term>文字列</Term>として<Term>渡す</Term>ことで、その<Term>要素</Term>を表す<Term>オブジェクト</Term>を<Term>返し</Term>ます。
 
 ```html title="index.html"
-<div id="greeting">Hello World</div>
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div id="greeting">Hello World</div>
+    <script src="./script.js"></script>
+  </body>
+</html>
 ```
 
 ```js title="script.js"
-const element = document.getElementById("greeting");
-element.textContent = "Hello DOM";
+const greetingElement = document.getElementById("greeting");
+greetingElement.textContent = "Hello DOM";
 ```
 
 <ViewSource url={import.meta.url} path="_samples/get-element-by-id" />
 
 {/* prettier-ignore */}
-<Term>変数</Term> `element` には、`index.html` に記述された `div` <Term>要素</Term>に対応する<Term>オブジェクト</Term>が<Term>代入</Term>されています。
+<Term>変数</Term> `greetingElement` には、`index.html` に記述された `div` <Term>要素</Term>に対応する<Term>オブジェクト</Term>が<Term>代入</Term>されています。
 
 ![DOM](./dom.png)
 
@@ -37,6 +47,34 @@ element.textContent = "Hello DOM";
 
 `textContent` <Term>プロパティ</Term>は、<Term>HTML 要素</Term>の内部のテキストを表します。<Term>オブジェクト</Term>の<Term>プロパティ</Term>は通常の<Term>変数</Term>のように取得や<Term>代入</Term>が可能で、上の例では `textContent` <Term>プロパティ</Term>に対して `"Hello DOM"` という<Term>文字列</Term>を代入することで、`div` <Term>要素</Term>の内部のテキストを変更しています。
 
+### 確認問題
+
+下のような HTML が記述されています。
+
+```html title="index.html"
+<div>Good <strong id="greeting-type">morning</strong>!</div>
+```
+
+JavaScript を使って、`Good evening!` (`evening` は太字) と表示されるようにしてください。
+
+:::warning
+
+- 読みやすさのため、`body` 要素の内部の、さらに `script` 要素以外の部分だけを抽出して表記しています。実際にはそれらの部分を含めて記述する必要があるので注意してください。これ以降もこのように省略して記述します。
+- `script` 要素は `body` 要素の内部のいちばん下に配置するようにしてください。
+
+:::
+
+<Answer>
+
+```js title="script.js"
+const greetingType = document.getElementById("greeting-type");
+greetingType.textContent = "evening";
+```
+
+<ViewSource url={import.meta.url} path="_samples/good-evening" />
+
+</Answer>
+
 ## <Term>HTML 要素</Term>のスタイルを変更する
 
 `document.getElementById` <Term>関数</Term>が返す<Term>オブジェクト</Term>の `style` <Term>プロパティ</Term>は、その要素の <Term>`style` 属性</Term>と対応します。 **`style` <Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>が CSS の<Term type="cssProperty">プロパティ</Term>に対応します。
@@ -53,6 +91,30 @@ element.style.backgroundColor = "red";
 <Term>CSS</Term> の<Term type="cssProperty">プロパティ</Term>名である `background-color` は、内部にハイフンが含まれているため、`element.style.background-color` のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。
 `style` <Term>プロパティ</Term>では、<Term>CSS</Term> の<Term type="cssProperty">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
 
+### 確認問題
+
+下のような HTML ファイルがあります。
+
+```html title="index.html"
+<div id="greeting">Hello World!</div>
+```
+
+JavaScript を使って、文字色が黄色、背景色が好きな色 (この例では黒) で `Hello World!` が表示されるようにしてください。
+
+![文字色が黄色、背景色が黒色の Hello World!](./yellow-hello-world.png)
+
+<Answer>
+
+```js title="script.js"
+const greetingElement = document.getElementById("greeting");
+greetingElement.style.color = "yellow";
+greetingElement.style.backgroundColor = "black";
+```
+
+<ViewSource url={import.meta.url} path="_samples/change-styles" />
+
+</Answer>
+
 ## DOM を用いて要素を追加する
 
 `document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。
@@ -88,6 +150,39 @@ packingList.appendChild(newItem);
 
 これで、既存の `ul` 要素の子要素に新しい `li` 要素が追加され、「おやつ」が加わった持ち物リストが表示されます。
 
+### 確認問題
+
+遠足の持ち物リストがあります。
+
+```html title="index.html"
+<ul id="packing-list">
+  <li>お弁当</li>
+  <li>水筒</li>
+  <li>タオル</li>
+  <li>レジャーシート</li>
+</ul>
+```
+
+このリストに新しい項目として「おやつ」を追加してください。ただし、「おやつ」は `strong` 要素を用いて太字で表示されるようにしてください。
+
+![おやつが太字になった持ち物リスト](./add-strong-snack.png)
+
+<Answer>
+
+```js title="script.js"
+const newItem = document.createElement("li");
+const strongPart = document.createElement("strong");
+strongPart.textContent = "おやつ";
+newItem.appendChild(strongPart);
+
+const packingList = document.getElementById("packing-list");
+packingList.appendChild(newItem);
+```
+
+<ViewSource url={import.meta.url} path="_samples/add-snack" />
+
+</Answer>
+
 ## 初級演習
 
 ### 買い物リストの書き換え

diff --git a/docs/1-trial-session/13-dom/yellow-hello-world.png b/docs/1-trial-session/13-dom/yellow-hello-world.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const greetingType = document.getElementById("greeting-type");
		greetingType.textContent = "evening";