Skip to content

Commit 74c70c6

Browse files
aster-voidaster-void
authored
Merge pull request #519 from ut-code/improve-dom-exercise
DOM の課題の追加
2 parents 0de5900 + d4a18e7 commit 74c70c6

File tree

5 files changed

+124
-28
lines changed

5 files changed

+124
-28
lines changed

‎docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>買い物リスト</title>
6+
</head>
7+
<body>
8+
<ul>
9+
<li id="item1">トマト</li>
10+
<li id="item2">ナス</li>
11+
<li id="item3">バジル</li>
12+
</ul>
13+
<script src="script.js"></script>
14+
</body>
15+
</html>

‎docs/1-trial-session/13-dom/_samples/change-shopping-memo/script.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const targetItem = document.getElementById("item2");
2+
3+
targetItem.textContent = "レモン";

‎docs/1-trial-session/13-dom/_samples/fruit-basket/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>買い物リスト</title>
6+
</head>
7+
<body>
8+
<ul id="fruit-basket"></ul>
9+
<script src="script.js"></script>
10+
</body>
11+
</html>

‎docs/1-trial-session/13-dom/_samples/fruit-basket/script.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const basket = document.getElementById("fruit-basket");
2+
const fruits = ["イチゴ", "スイカ", "バナナ"];
3+
4+
for (const fruit of fruits) {
5+
const item = document.createElement("li");
6+
item.textContent = fruit;
7+
basket.appendChild(item);
8+
}

‎docs/1-trial-session/13-dom/index.md‎

Lines changed: 87 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,37 +46,96 @@ element.style.backgroundColor = "red";
4646

4747
![JavaScriptからスタイルを操作する](./change-styles.png)
4848

49-
<p><Term type="css">CSS</Term> の<Term type="cssProperty">プロパティ</Term>名である <code>background-color</code> は、内部にハイフンが含まれているため、<code>element.style.background-color</code>のように指定してしまうと、ハイフンが減算<Term type="javascriptOperator">演算子</Term>として解釈されてしまいます。<code>style</code> <Term type="javascriptProperty">プロパティ</Term>では、<Term type="css">CSS</Term> の<Term type="cssProperty">プロパティ</Term>名は<Term type="camelCase">キャメルケース</Term>として指定する必要があることに注意してください。</p>
50-
51-
## 課題
52-
53-
[CSS の節](../12-css/index.md)の課題を、<Term type="styleAttribute">style 属性</Term>を使用せずに JavaScript のみで実現してみましょう。
54-
55-
<Answer title="JavaScriptを用いたCSSスタイリング">
56-
57-
```html
58-
<!doctype html>
59-
<html lang="ja">
60-
<head>
61-
<meta charset="utf-8" />
62-
<title>Title</title>
63-
</head>
64-
<body>
65-
<div id="foo">Foo</div>
66-
<script src="./script.js"></script>
67-
</body>
68-
</html>
49+
<p><Term type="css">CSS</Term> の<Term type="cssProperty">プロパティ</Term>名である <code>background-color</code> は、内部にハイフンが含まれているため、<code>element.style.background-color</code>のように指定してしまうと、ハイフンが減算<Term type="javascriptOperator">演算子</Term>として解釈されてしまいます。
50+
<code>style</code> <Term type="javascriptProperty">プロパティ</Term>では、<Term type="css">CSS</Term> の<Term type="cssProperty">プロパティ</Term>名は<Term type="camelCase">キャメルケース</Term>として指定する必要があることに注意してください。</p>
51+
52+
## DOM を用いて要素を追加する
53+
54+
`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。
55+
`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。
56+
下の例では、新しい `span` 要素を作っています。
57+
58+
中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。
59+
60+
```js title="script.js"
61+
const newSpan = document.createElement("span");
62+
newSpan.textContent = "Hello World!";
63+
```
64+
65+
そして、`要素1.appendChild(要素2)` とすることで、要素1の子要素に要素2を追加し、画面に表示することができます。
66+
今回は、`div` 要素の子要素にしてみましょう。
67+
68+
```html title="index.html"
69+
<div id="parent-element"></div>
70+
```
71+
72+
```js title="script.js"
73+
const parent = document.getElementById("parent-element");
74+
75+
const newSpan = document.createElement("span");
76+
newSpan.textContent = "Hello World!";
77+
78+
parent.appendChild(newSpan);
79+
```
80+
81+
これで、既存の `div` 要素の子要素に新しい `span` 要素が追加され、画面に `Hello World!` と表示されます。
82+
83+
## 初級課題
84+
85+
### 買い物リストの書き換え
86+
87+
次の HTML ファイルから読み込んでいる JavaScript ファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。
88+
89+
```html title="index.html"
90+
<ul>
91+
<li id="item1">トマト</li>
92+
<li id="item2">ナス</li>
93+
<li id="item3">バジル</li>
94+
</ul>
95+
```
96+
97+
<Answer title="買い物リストの書き換え">
98+
99+
```js title="script.js"
100+
const targetItem = document.getElementById("item2");
101+
102+
targetItem.textContent = "レモン";
103+
```
104+
105+
<ViewSource url={import.meta.url} path="_samples/change-shopping-memo" />
106+
107+
</Answer>
108+
109+
## 中級課題
110+
111+
### フルーツバスケット
112+
113+
購入する予定の果物を表す文字列が格納された配列が次のように用意されています。
114+
115+
```js
116+
const fruits = ["イチゴ", "スイカ", "バナナ"];
117+
```
118+
119+
`createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。
120+
ただし、HTML ファイルには次のように記述されているものとします。
121+
122+
```html title="index.html"
123+
<ul id="fruit-basket"></ul>
69124
```
70125

71-
```javascript
72-
const element = document.getElementById("foo");
73-
element.style.border = "1px solid #aaa";
74-
element.style.borderRadius = "10px";
75-
element.style.margin = "30px";
76-
element.style.padding = "30px";
77-
element.style.boxShadow = "0px 0px 2px 1px #aaa";
126+
<Answer title="フルーツバスケット">
127+
128+
```js title="script.js"
129+
const basket = document.getElementById("fruit-basket");
130+
const fruits = ["イチゴ", "スイカ", "バナナ"];
131+
132+
for (const fruit of fruits) {
133+
const item = document.createElement("li");
134+
item.textContent = fruit;
135+
basket.appendChild(item);
136+
}
78137
```
79138

80-
<ViewSource url={import.meta.url} path="_samples/css" />
139+
<ViewSource url={import.meta.url} path="_samples/fruit-basket" />
81140

82141
</Answer>

0 commit comments

Comments
 (0)