Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOM の章の確認問題を追加、内容のアップデート #725

Merged
merged 9 commits into from
May 14, 2024
Merged

DOM の章の確認問題を追加、内容のアップデート #725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5d40b1c
DOMの各ステップに確認問題を追加
naka-12 Apr 30, 2024
be28997
DOMの章の冒頭でHTMLの雛形を提示
naka-12 Apr 30, 2024
bc2fad5
変数名elementをgreetingElementに修正
naka-12 Apr 30, 2024
9b1dbac
コードの省略への言及を削除
naka-12 May 9, 2024
a5efa33
textContent 書き換えの問題で差分だけ伝えるよう修正
naka-12 May 9, 2024
06f56a2
CSS ではなく JavaScript を使ってスタイルを操作することを明示
naka-12 May 9, 2024
f595c39
「要素を追加する」の確認問題をシンプルなものに変更
naka-12 May 9, 2024
5b75848
「要素を追加する」の確認問題を例題の続きに変更
naka-12 May 13, 2024
7fa8024
DOM要素の変数名をitemからelementに変更
naka-12 May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions docs/1-trial-session/13-dom/_samples/add-element-exercise/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
<ul id="packing-list">
<li>お弁当</li>
<li>水筒</li>
</ul>
<script src="./script.js"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions docs/1-trial-session/13-dom/_samples/add-element-exercise/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const packingList = document.getElementById("packing-list");

const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";

packingList.appendChild(snackElement);

const capElement = document.createElement("li");
capElement.textContent = "帽子";

packingList.appendChild(capElement);
2 changes: 0 additions & 2 deletions docs/1-trial-session/13-dom/_samples/add-element/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
<ul id="packing-list">
<li>お弁当</li>
<li>水筒</li>
<li>タオル</li>
<li>レジャーシート</li>
</ul>
<script src="./script.js"></script>
</body>
Expand Down
9 changes: 5 additions & 4 deletions docs/1-trial-session/13-dom/_samples/add-element/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const newItem = document.createElement("li");
newItem.textContent = "おやつ";

const packingList = document.getElementById("packing-list");
packingList.appendChild(newItem);

const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";

packingList.appendChild(snackElement);
11 changes: 11 additions & 0 deletions docs/1-trial-session/13-dom/_samples/change-styles/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions docs/1-trial-session/13-dom/_samples/change-styles/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const greetingElement = document.getElementById("greeting");
greetingElement.style.color = "yellow";
greetingElement.style.backgroundColor = "black";
11 changes: 11 additions & 0 deletions docs/1-trial-session/13-dom/_samples/good-evening/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions docs/1-trial-session/13-dom/_samples/good-evening/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
const greetingType = document.getElementById("greeting-type");
greetingType.textContent = "evening";
104 changes: 92 additions & 12 deletions docs/1-trial-session/13-dom/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -37,6 +47,27 @@ 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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これ greeting-type で英語的に合ってるんでしょうか？
greeting-time とかの方が良さそうに見えます。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://learn.utcode.net/docs/trial-session/functions/#引数
に倣いましたが、確かにそうですね……

Copy link
Contributor

@chvmvd chvmvd May 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

greeting-typeだと有限のものの1つで、greeting-timeだと無限のもの(連続のもの)の1つという感覚を受けそうですね。
今回だとmorning、afternoon、eveningみたいな感じで有限なもののどれかということを表しているので、greetingTypeだと明確かなと思いました。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

そしたらとりあえずこのままにします。問題があれば後で両方変えましょう

```

JavaScript を使って、`morning` を `evening` にしてください。

<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>に対応します。
Expand All @@ -53,6 +84,32 @@ 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>
```

文字色が黄色、背景色が黒色で `Hello World!` と表示されるようにしてください。

ここでは CSS ファイルを作成するのではなく、JavaScript を使ってスタイルを操作してください。

![文字色が黄色、背景色が黒色の 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 要素を作る関数です。
Expand All @@ -62,8 +119,8 @@ element.style.backgroundColor = "red";
中身のない空の要素が作成されるので、`textContent` を `おやつ` に設定してみましょう。

```js title="script.js"
const newItem = document.createElement("li");
newItem.textContent = "おやつ";
const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";
```

そして、`要素1.appendChild(要素2)` とすることで、要素 1 の子要素に要素 2 を追加し、画面に表示することができます。
Expand All @@ -73,21 +130,44 @@ newItem.textContent = "おやつ";
<ul id="packing-list">
<li>お弁当</li>
<li>水筒</li>
<li>タオル</li>
<li>レジャーシート</li>
</ul>
```

```js title="script.js"
const newItem = document.createElement("li");
newItem.textContent = "おやつ";

const packingList = document.getElementById("packing-list");
packingList.appendChild(newItem);

const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";

packingList.appendChild(snackElement);
```

これで、既存の `ul` 要素の子要素に新しい `li` 要素が追加され、「おやつ」が加わった持ち物リストが表示されます。

### 確認問題

上の遠足の持ち物リストに、さらに「帽子」を追加しましょう。

<Answer>

```js title="script.js"
const packingList = document.getElementById("packing-list");

const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";

packingList.appendChild(snackElement);

const capElement = document.createElement("li");
capElement.textContent = "帽子";

packingList.appendChild(capElement);
```

<ViewSource url={import.meta.url} path="_samples/add-element-exercise" />

</Answer>

## 初級演習

### 買い物リストの書き換え
chvmvd marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
Binary file added docs/1-trial-session/13-dom/yellow-hello-world.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading