diff --git a/docs/1-trial-session/13-dom/_samples/add-element-exercise/index.html b/docs/1-trial-session/13-dom/_samples/add-element-exercise/index.html new file mode 100644 index 000000000..29c2f37dc --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/add-element-exercise/index.html @@ -0,0 +1,14 @@ + + + + + Title + + + + + + diff --git a/docs/1-trial-session/13-dom/_samples/add-element-exercise/script.js b/docs/1-trial-session/13-dom/_samples/add-element-exercise/script.js new file mode 100644 index 000000000..5c1fe484a --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/add-element-exercise/script.js @@ -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); diff --git a/docs/1-trial-session/13-dom/_samples/add-element/index.html b/docs/1-trial-session/13-dom/_samples/add-element/index.html index 89d5a188b..c71100806 100644 --- a/docs/1-trial-session/13-dom/_samples/add-element/index.html +++ b/docs/1-trial-session/13-dom/_samples/add-element/index.html @@ -8,8 +8,6 @@ diff --git a/docs/1-trial-session/13-dom/_samples/add-element/script.js b/docs/1-trial-session/13-dom/_samples/add-element/script.js index 2d75dea2f..40ecf84d7 100644 --- a/docs/1-trial-session/13-dom/_samples/add-element/script.js +++ b/docs/1-trial-session/13-dom/_samples/add-element/script.js @@ -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); 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 new file mode 100644 index 000000000..80354a018 --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/change-styles/index.html @@ -0,0 +1,11 @@ + + + + + Title + + +
Hello World!
+ + + 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 new file mode 100644 index 000000000..4b3a02ab2 --- /dev/null +++ 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 new file mode 100644 index 000000000..18db01aeb --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/good-evening/index.html @@ -0,0 +1,11 @@ + + + + + Title + + +
Good morning!
+ + + 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 new file mode 100644 index 000000000..e586d72d0 --- /dev/null +++ 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/index.mdx b/docs/1-trial-session/13-dom/index.mdx index f6bb6af75..1eaad75bb 100644 --- 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` 関数は、引数として HTML 要素の `id` 属性に指定された値を文字列として渡すことで、その要素を表すオブジェクトを返します。 ```html title="index.html" -
Hello World
+ + + + + Title + + +
Hello World
+ + + ``` ```js title="script.js" -const element = document.getElementById("greeting"); -element.textContent = "Hello DOM"; +const greetingElement = document.getElementById("greeting"); +greetingElement.textContent = "Hello DOM"; ``` {/* prettier-ignore */} -変数 `element` には、`index.html` に記述された `div` 要素に対応するオブジェクトが代入されています。 +変数 `greetingElement` には、`index.html` に記述された `div` 要素に対応するオブジェクトが代入されています。 ![DOM](./dom.png) @@ -37,6 +47,27 @@ element.textContent = "Hello DOM"; `textContent` プロパティは、HTML 要素の内部のテキストを表します。オブジェクトのプロパティは通常の変数のように取得や代入が可能で、上の例では `textContent` プロパティに対して `"Hello DOM"` という文字列を代入することで、`div` 要素の内部のテキストを変更しています。 +### 確認問題 + +下のような HTML が記述されています。 + +```html title="index.html" +
Good morning!
+``` + +JavaScript を使って、`morning` を `evening` にしてください。 + + + +```js title="script.js" +const greetingType = document.getElementById("greeting-type"); +greetingType.textContent = "evening"; +``` + + + + + ## HTML 要素のスタイルを変更する `document.getElementById` 関数が返すオブジェクトの `style` プロパティは、その要素の `style` 属性と対応します。 **`style` プロパティに格納されている値自体もオブジェクト** となっており、その各プロパティが CSS のプロパティに対応します。 @@ -53,6 +84,32 @@ element.style.backgroundColor = "red"; CSS のプロパティ名である `background-color` は、内部にハイフンが含まれているため、`element.style.background-color` のように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。 `style` プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。 +### 確認問題 + +下のような HTML ファイルがあります。 + +```html title="index.html" +
Hello World!
+``` + +文字色が黄色、背景色が黒色で `Hello World!` と表示されるようにしてください。 + +ここでは CSS ファイルを作成するのではなく、JavaScript を使ってスタイルを操作してください。 + +![文字色が黄色、背景色が黒色の Hello World!](./yellow-hello-world.png) + + + +```js title="script.js" +const greetingElement = document.getElementById("greeting"); +greetingElement.style.color = "yellow"; +greetingElement.style.backgroundColor = "black"; +``` + + + + + ## DOM を用いて要素を追加する `document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。 @@ -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 を追加し、画面に表示することができます。 @@ -73,21 +130,44 @@ newItem.textContent = "おやつ"; ``` ```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` 要素が追加され、「おやつ」が加わった持ち物リストが表示されます。 +### 確認問題 + +上の遠足の持ち物リストに、さらに「帽子」を追加しましょう。 + + + +```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); +``` + + + + + ## 初級演習 ### 買い物リストの書き換え diff --git a/docs/1-trial-session/13-dom/yellow-hello-world.png b/docs/1-trial-session/13-dom/yellow-hello-world.png new file mode 100644 index 000000000..299152ea6 Binary files /dev/null and b/docs/1-trial-session/13-dom/yellow-hello-world.png differ