Merge pull request #382 from ut-code/rewrite-dom-events-retry

sYakusHinineko · web-flow · commit 330789a6f98b · 2023-09-25T17:22:38.000+09:00
diff --git a/docs/1-trial-session/14-events/_samples/project-jack-in-a-box/index.html b/docs/1-trial-session/14-events/_samples/project-jack-in-a-box/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div id="greeting"></div>
+    <button id="button">ボタン</button>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/1-trial-session/14-events/_samples/project-jack-in-a-box/script.js b/docs/1-trial-session/14-events/_samples/project-jack-in-a-box/script.js
@@ -0,0 +1,10 @@
+const greetingElement = document.getElementById("greeting");
+const buttonElement = document.getElementById("button");
+
+function onGreetingButtonClick() {
+  greetingElement.textContent = "Hello world!!";
+  greetingElement.style.color = "red";
+  greetingElement.style.fontSize = "40px";
+}
+
+buttonElement.onclick = onGreetingButtonClick;
diff --git a/docs/1-trial-session/14-events/index.md b/docs/1-trial-session/14-events/index.md
@@ -3,8 +3,12 @@ title: イベント
 ---
 
 import Term from "@site/src/components/Term";
+import Details from "@theme/Details";
+import CodeBlock from '@theme/CodeBlock';
+import ViewSource from "@site/src/components/ViewSource";
 
 import handleClickVideo from "./handle-click.mp4";
+import projectMovieForDom from "./project-movie-for-dom.mp4";
 
 ## <Term type="javascriptValue">値</Term>としての<Term type="javascriptFunction">関数</Term>
 
@@ -71,3 +75,36 @@ greetButton.onclick = clicked();
 上の例では、画面上にはじめから表示されていたボタンが、ボタンをクリックしたときに削除されています。これは、 `document.write` をすべての<Term type="element">要素</Term>の表示が終わった後に実行すると、画面上のすべての<Term type="element">要素</Term>を一度削除するという挙動をとるためです。このため、現代の <Term type="javascript">JavaScript</Term> において、 `document.write` <Term type="javascriptFunction">関数</Term>が使用されることはほとんどありません。
 
 :::
+
+## 課題
+
+押すと大きく赤文字が表示される「びっくり箱」のようなボタンを作ってみましょう。
+
+<video src={projectMovieForDom} autoPlay muted loop controls />
+
+<Details summary={<summary>ヒント1：文字列の表示</summary>}>
+
+さっきは文字列の表示に`document.write()` を使いましたが、これでは文字色やサイズが変えられません。
+こんな書き方ならそれもできますが、あまりに乱暴ですよ。
+
+```javascript
+document.write("<div style='color:red; font-size:40px'>Hello world!</div>");
+```
+
+文字列をJavaScriptで操作する方法は前回の「DOM」の章で扱っています。
+
+</Details>
+
+<Details summary={<summary>ヒント2：HTMLファイルに…</summary>}>
+
+`<button>` タグのHTML属性を書き換えるとボタンの中に`Hello world!` を表示してしまいます。
+
+HTMLファイルに一工夫が必要です。見えない`<div>` タグを用意してあげましょう。
+
+```html
+<div id="greeting"></div>
+```
+
+</Details>
+
+<ViewSource url={import.meta.url} path="_samples/project-jack-in-a-box/" />
diff --git a/docs/1-trial-session/14-events/project-movie-for-dom.mp4 b/docs/1-trial-session/14-events/project-movie-for-dom.mp4
