From 3e5f245cd91e1f178b767f1f9ca518b7911a563b Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Sat, 28 Oct 2023 18:32:09 +0900 Subject: [PATCH 01/21] =?UTF-8?q?DOM=20=E3=81=AE=E8=AA=B2=E9=A1=8C?= =?UTF-8?q?=E3=81=AE=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../13-dom/_samples/array-to-list/index.html | 11 +++ .../13-dom/_samples/array-to-list/script.js | 8 ++ .../_samples/falsify-shopping-memo/index.html | 15 +++ .../_samples/falsify-shopping-memo/script.js | 3 + docs/1-trial-session/13-dom/index.md | 94 ++++++++++++++++--- 5 files changed, 117 insertions(+), 14 deletions(-) create mode 100644 docs/1-trial-session/13-dom/_samples/array-to-list/index.html create mode 100644 docs/1-trial-session/13-dom/_samples/array-to-list/script.js create mode 100644 docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/index.html create mode 100644 docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/script.js diff --git a/docs/1-trial-session/13-dom/_samples/array-to-list/index.html b/docs/1-trial-session/13-dom/_samples/array-to-list/index.html new file mode 100644 index 000000000..613314d7a --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/array-to-list/index.html @@ -0,0 +1,11 @@ + + + + + Title + + + + + + diff --git a/docs/1-trial-session/13-dom/_samples/array-to-list/script.js b/docs/1-trial-session/13-dom/_samples/array-to-list/script.js new file mode 100644 index 000000000..452e5802d --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/array-to-list/script.js @@ -0,0 +1,8 @@ +const listWrapper = document.getElementById("wrapper"); +const list = ["トマト", "レモン", "バジル"]; + +for (const itemName of list) { + const element = document.createElement("li"); + element.textContent = itemName; + listWrapper.appendChild(element); +} diff --git a/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/index.html b/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/index.html new file mode 100644 index 000000000..14e8fd24c --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/index.html @@ -0,0 +1,15 @@ + + + + + 買い物リスト + + + + + + diff --git a/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/script.js b/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/script.js new file mode 100644 index 000000000..97c4e24f1 --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/script.js @@ -0,0 +1,3 @@ +const pear = document.getElementById("element2"); + +pear.textContent = "レモン"; diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 6a3f52330..ce0b05a4f 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -48,35 +48,101 @@ element.style.backgroundColor = "red";

CSS のプロパティ名である background-color は、内部にハイフンが含まれているため、element.style.background-colorのように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。style プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。

-## 課題 +## DOM に関連する便利な関数 -[CSS の節](../12-css/index.md)の課題を、style 属性を使用せずに JavaScript のみで実現してみましょう。 +### `element.appendChild` 関数 - +`DOM` 要素の後に `.appendChild` と続けて書く関数があります(正確には[クラスの章](/docs/browser-apps/class/)で説明するメソッドというものです)。 +この関数の引数に別の `DOM` オブジェクトを渡すと、渡した `DOM` 要素を親の要素の子要素にすることができます。 -```html +### `document.createElement` 関数 + +`document.createElement` 関数に要素の種類を表す文字列を渡すと、新しい `HTML` 要素を作ることができます。 +新しく作った要素は文字(`textContent`)もなければ親要素も決まっていないので、作ったあとに指定する必要があります。 + +例: + +```html title="HTML" + +``` + +```js title="JavaScript" +const list = document.getElementById("ul"); // id が ul であるものを取得する + +const item = document.createElement("li"); // li 要素を作る +item.textContent = "ut.code(); Learn"; // li 要素の表示する文字を指定する +list.appendChild(li); // 上で作った要素を ul の子要素に指定する +``` + +## 初級課題 + +### 買い物リストの改ざん + +次の HTML ファイルから読み込んでいる JavaScript ファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。 + +```html title="index.html" + + + + + 買い物リスト + + + + + + +``` + + + +```js title="script.js" +const pear = document.getElementById("element2"); + +pear.textContent = "レモン"; +``` + + + + + +## 中級課題 + +### 配列をリストとして表示する + +配列があります。配列の中身を、順番にHTMLに表示してみましょう。 + + + +```html title="index.html" Title + -
Foo
- +
    ``` -```javascript -const element = document.getElementById("foo"); -element.style.border = "1px solid #aaa"; -element.style.borderRadius = "10px"; -element.style.margin = "30px"; -element.style.padding = "30px"; -element.style.boxShadow = "0px 0px 2px 1px #aaa"; +```js title="script.js" +const listWrapper = document.getElementById("wrapper"); +const list = ["トマト", "レモン", "バジル"]; + +for (const item of list) { + const element = document.createElement("li"); + element.textContent = item; + listWrapper.appendChild(element); +} ``` - +     From 8285ff14fda8e23ac387ce2cdd9f23a14d409bea Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Sat, 28 Oct 2023 23:32:57 +0900 Subject: [PATCH 02/21] =?UTF-8?q?chelproc=E6=B0=8F=20=E3=83=AC=E3=83=93?= =?UTF-8?q?=E3=83=A5=E3=83=BC=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 36 +++++++++++++++++++++------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index ce0b05a4f..9dfe1438a 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -48,17 +48,25 @@ element.style.backgroundColor = "red";

    CSS のプロパティ名である background-color は、内部にハイフンが含まれているため、element.style.background-colorのように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。style プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。

    -## DOM に関連する便利な関数 +## DOM が提供する便利な関数 ### `element.appendChild` 関数 -`DOM` 要素の後に `.appendChild` と続けて書く関数があります(正確には[クラスの章](/docs/browser-apps/class/)で説明するメソッドというものです)。 -この関数の引数に別の `DOM` オブジェクトを渡すと、渡した `DOM` 要素を親の要素の子要素にすることができます。 +HTML 要素に対応するオブジェクトの後に `.appendChild` と続けて書く関数があります (正確には関数の中でも、[クラスの章](/docs/browser-apps/class/)で説明するメソッドというものです)。 +この関数は、引数に渡されたオブジェクトに対応する HTML 要素を、先に書いたオブジェクトに対応する HTML 要素の子要素にすることができます。 +例えば + +```js +elementA.appendChild(elementB); +``` + +とすると、要素 B を要素 A の子要素にすることができます。 ### `document.createElement` 関数 -`document.createElement` 関数に要素の種類を表す文字列を渡すと、新しい `HTML` 要素を作ることができます。 -新しく作った要素は文字(`textContent`)もなければ親要素も決まっていないので、作ったあとに指定する必要があります。 +`document.createElement` 関数にタグ名を文字列として渡すと、新しい HTML 要素を作ることができます。 +`document.createElement` 関数の返り値は、作った HTML 要素に対応するオブジェクトです。 +新しく作った要素には `textContent` プロパティや親要素が定義されていないので、作った後に指定する必要があります。 例: @@ -74,9 +82,11 @@ item.textContent = "ut.code(); Learn"; // li 要素の表示する文字を指 list.appendChild(li); // 上で作った要素を ul の子要素に指定する ``` +この例では、新しく `li` 要素を作り、その要素の `textContent` を `"ut.code(); Learn"` にして、HTML から取得した `ul` 要素の子要素に指定しています。 + ## 初級課題 -### 買い物リストの改ざん +### 買い物リストの書き換え 次の HTML ファイルから読み込んでいる JavaScript ファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。 @@ -98,7 +108,7 @@ list.appendChild(li); // 上で作った要素を ul の子要素に指定する ``` - + ```js title="script.js" const pear = document.getElementById("element2"); @@ -114,7 +124,17 @@ pear.textContent = "レモン"; ### 配列をリストとして表示する -配列があります。配列の中身を、順番にHTMLに表示してみましょう。 +配列があります。配列の全ての要素を、順番にブラウザに表示してみましょう。 + +:::note + +次の配列をテストに使ってください。 + +```js +const list = ["トマト", "レモン", "バジル"]; +``` + +::: From e2a9152a95174c12469d0a510e8a5b4d4f87f70f Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 16:01:38 +0900 Subject: [PATCH 03/21] =?UTF-8?q?DOM=20=E3=81=AE=E3=80=8C=E8=A6=81?= =?UTF-8?q?=E7=B4=A0=E3=81=AE=E8=BF=BD=E5=8A=A0=E3=80=8D=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?=20(=E5=BE=8C=E3=81=A7=E4=BF=AE=E6=AD=A3=E3=81=99=E3=82=8B?= =?UTF-8?q?=E3=81=8B=E3=82=82)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 42 ++++++++++++++-------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 9dfe1438a..31858d862 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -48,41 +48,41 @@ element.style.backgroundColor = "red";

    CSS のプロパティ名である background-color は、内部にハイフンが含まれているため、element.style.background-colorのように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。style プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。

    -## DOM が提供する便利な関数 +## DOM を用いて要素を追加する -### `element.appendChild` 関数 - -HTML 要素に対応するオブジェクトの後に `.appendChild` と続けて書く関数があります (正確には関数の中でも、[クラスの章](/docs/browser-apps/class/)で説明するメソッドというものです)。 -この関数は、引数に渡されたオブジェクトに対応する HTML 要素を、先に書いたオブジェクトに対応する HTML 要素の子要素にすることができます。 -例えば +`document.createElement` 関数は、引数に渡されたタグの、新しい HTML 要素を作る関数です。`document.createElement` 関数の返り値は、新しく作った HTML 要素に対応するオブジェクトです。 ```js -elementA.appendChild(elementB); +document.createElement("div"); ``` -とすると、要素 B を要素 A の子要素にすることができます。 +このままだと `textContent` が設定されていない (空文字列) ので、画面には何も表示されません。 +`textContent` を `Hello World!` に設定してみましょう。 -### `document.createElement` 関数 +```js +const newElement = document.createElement("div"); +newElement.textContent = "Hello World!"; +``` -`document.createElement` 関数にタグ名を文字列として渡すと、新しい HTML 要素を作ることができます。 -`document.createElement` 関数の返り値は、作った HTML 要素に対応するオブジェクトです。 -新しく作った要素には `textContent` プロパティや親要素が定義されていないので、作った後に指定する必要があります。 +これでもまだ新しく作った要素は画面に表示されません。これは、新しく作った要素の親の要素が設定されていない (`null`)からです。 -例: +`要素１.appendChild(要素２)` とすることで、要素２を要素１の子要素に追加することができます。 +今回は、body を親要素にしてみましょう。 -```html title="HTML" -
      +```html + + ``` -```js title="JavaScript" -const list = document.getElementById("ul"); // id が ul であるものを取得する +```js +const body = document.getElementById("body-id"); -const item = document.createElement("li"); // li 要素を作る -item.textContent = "ut.code(); Learn"; // li 要素の表示する文字を指定する -list.appendChild(li); // 上で作った要素を ul の子要素に指定する +const newElement = document.createElement("div"); +newElement.textContent = "Hello World!"; +body.appendChild(newElement); ``` -この例では、新しく `li` 要素を作り、その要素の `textContent` を `"ut.code(); Learn"` にして、HTML から取得した `ul` 要素の子要素に指定しています。 +これで、画面に `Hello World!` と表示されたはずです。親要素は任意の要素が指定できます。 ## 初級課題 From abcf5b93001793920bd639ac92bc19d9c79d5f56 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 16:21:33 +0900 Subject: [PATCH 04/21] =?UTF-8?q?=E8=AA=B2=E9=A1=8C=E9=83=A8=E5=88=86?= =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3=20fruits=E3=81=AE=E3=81=86=E3=81=A1?= =?UTF-8?q?2/3=E3=81=AFfruit=E3=81=98=E3=82=83=E3=81=AA=E3=81=84=E3=81=A7?= =?UTF-8?q?=E3=81=99=E3=81=8C=E3=81=BE=E3=81=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../13-dom/_samples/array-to-list/script.js | 8 --- .../index.html | 0 .../script.js | 0 .../index.html | 4 +- .../13-dom/_samples/fruit-basket/script.js | 8 +++ docs/1-trial-session/13-dom/index.md | 71 +++++++------------ 6 files changed, 36 insertions(+), 55 deletions(-) delete mode 100644 docs/1-trial-session/13-dom/_samples/array-to-list/script.js rename docs/1-trial-session/13-dom/_samples/{falsify-shopping-memo => change-shopping-memo}/index.html (100%) rename docs/1-trial-session/13-dom/_samples/{falsify-shopping-memo => change-shopping-memo}/script.js (100%) rename docs/1-trial-session/13-dom/_samples/{array-to-list => fruit-basket}/index.html (67%) create mode 100644 docs/1-trial-session/13-dom/_samples/fruit-basket/script.js diff --git a/docs/1-trial-session/13-dom/_samples/array-to-list/script.js b/docs/1-trial-session/13-dom/_samples/array-to-list/script.js deleted file mode 100644 index 452e5802d..000000000 --- a/docs/1-trial-session/13-dom/_samples/array-to-list/script.js +++ /dev/null @@ -1,8 +0,0 @@ -const listWrapper = document.getElementById("wrapper"); -const list = ["トマト", "レモン", "バジル"]; - -for (const itemName of list) { - const element = document.createElement("li"); - element.textContent = itemName; - listWrapper.appendChild(element); -} diff --git a/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/index.html b/docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html similarity index 100% rename from docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/index.html rename to docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html diff --git a/docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/script.js b/docs/1-trial-session/13-dom/_samples/change-shopping-memo/script.js similarity index 100% rename from docs/1-trial-session/13-dom/_samples/falsify-shopping-memo/script.js rename to docs/1-trial-session/13-dom/_samples/change-shopping-memo/script.js diff --git a/docs/1-trial-session/13-dom/_samples/array-to-list/index.html b/docs/1-trial-session/13-dom/_samples/fruit-basket/index.html similarity index 67% rename from docs/1-trial-session/13-dom/_samples/array-to-list/index.html rename to docs/1-trial-session/13-dom/_samples/fruit-basket/index.html index 613314d7a..ab547b2f0 100644 --- a/docs/1-trial-session/13-dom/_samples/array-to-list/index.html +++ b/docs/1-trial-session/13-dom/_samples/fruit-basket/index.html @@ -2,10 +2,10 @@ - Title + 買い物リスト -
        +
          diff --git a/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js b/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js new file mode 100644 index 000000000..cf0bae7a4 --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js @@ -0,0 +1,8 @@ +const basket = document.getElementById("fruit-basket"); +const list = ["トマト", "レモン", "バジル"]; + +for (const fruit of basket) { + const item = document.createElement("li"); + item.textContent = fruit; + basket.appendChild(item); +} diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 31858d862..1c7ed7a13 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -91,78 +91,59 @@ body.appendChild(newElement); 次の HTML ファイルから読み込んでいる JavaScript ファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。 ```html title="index.html" - - - - - 買い物リスト - - -
            -
          • トマト
            • -
          • ナス
            • -
          • バジル
            • -
          - - - +
            +
          • トマト
            • +
          • ナス
            • +
          • バジル
            • +
          + ``` ```js title="script.js" -const pear = document.getElementById("element2"); +const element = document.getElementById("eggplant"); -pear.textContent = "レモン"; +element.textContent = "レモン"; ``` - + ## 中級課題 -### 配列をリストとして表示する - -配列があります。配列の全ての要素を、順番にブラウザに表示してみましょう。 +### 配列を箇条書きで表示する -:::note - -次の配列をテストに使ってください。 +購入する予定の果物を表す文字列が格納された配列が次のように用意されています。 ```js -const list = ["トマト", "レモン", "バジル"]; +const fruits = ["トマト", "レモン", "バジル"]; ``` -::: - - +`createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。ただし、HTML ファイルには次のように記述されているものとします。 ```html title="index.html" - - - - - Title - - - -
            - - + + +
              + + ``` + + ```js title="script.js" -const listWrapper = document.getElementById("wrapper"); +const basket = document.getElementById("fruit-basket"); const list = ["トマト", "レモン", "バジル"]; -for (const item of list) { - const element = document.createElement("li"); - element.textContent = item; - listWrapper.appendChild(element); +for (const fruit of basket) { + const item = document.createElement("li"); + item.textContent = fruit; + basket.appendChild(item); } ``` - + From c97138c657fab279931c5402e602a1ffa25b6dfe Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 16:22:17 +0900 Subject: [PATCH 05/21] =?UTF-8?q?=E6=BC=94=E7=BF=92=E3=81=AE=E3=82=BF?= =?UTF-8?q?=E3=82=A4=E3=83=88=E3=83=AB=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 1c7ed7a13..8d7859d0d 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -113,7 +113,7 @@ element.textContent = "レモン"; ## 中級課題 -### 配列を箇条書きで表示する +### フルーツバスケット 購入する予定の果物を表す文字列が格納された配列が次のように用意されています。 @@ -131,7 +131,7 @@ const fruits = ["トマト", "レモン", "バジル"]; ``` - + ```js title="script.js" const basket = document.getElementById("fruit-basket"); From 4a26dc7e9f0cafe99acd600626862ea28177913d Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 16:26:43 +0900 Subject: [PATCH 06/21] =?UTF-8?q?null=E6=B6=88=E3=81=97=E3=81=9F=20(?= =?UTF-8?q?=E7=BF=92=E3=81=A3=E3=81=A6=E3=81=AA=E3=81=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 8d7859d0d..02437f14f 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -64,7 +64,7 @@ const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; ``` -これでもまだ新しく作った要素は画面に表示されません。これは、新しく作った要素の親の要素が設定されていない (`null`)からです。 +これでもまだ新しく作った要素は画面に表示されません。これは、新しく作った要素の親の要素が設定されていないからです。 `要素１.appendChild(要素２)` とすることで、要素２を要素１の子要素に追加することができます。 今回は、body を親要素にしてみましょう。 From 8164e21c762de168f1a8b4dc65f2cf443a679f53 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 16:29:19 +0900 Subject: [PATCH 07/21] =?UTF-8?q?=E5=8B=95=E3=81=8B=E3=81=AA=E3=81=8B?= =?UTF-8?q?=E3=81=A3=E3=81=9F=E3=81=A7=E3=81=99=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 02437f14f..24b3b67bb 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -135,9 +135,9 @@ const fruits = ["トマト", "レモン", "バジル"]; ```js title="script.js" const basket = document.getElementById("fruit-basket"); -const list = ["トマト", "レモン", "バジル"]; +const fruits = ["トマト", "レモン", "バジル"]; -for (const fruit of basket) { +for (const fruit of fruits) { const item = document.createElement("li"); item.textContent = fruit; basket.appendChild(item); From fde0d0c136fbc1343adac6d098c239e7e0784fa9 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 16:31:39 +0900 Subject: [PATCH 08/21] =?UTF-8?q?=E6=88=BB=E3=82=8A=E5=80=A4=20->=20?= =?UTF-8?q?=E8=BF=94=E3=82=8A=E5=80=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 24b3b67bb..ab1e81ad2 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -50,7 +50,7 @@ element.style.backgroundColor = "red"; ## DOM を用いて要素を追加する -`document.createElement` 関数は、引数に渡されたタグの、新しい HTML 要素を作る関数です。`document.createElement` 関数の返り値は、新しく作った HTML 要素に対応するオブジェクトです。 +`document.createElement` 関数は、引数に渡されたタグの、新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値aは、新しく作った HTML 要素に対応するオブジェクトです。 ```js document.createElement("div"); From 7043672c119ca7669f0744e4a22ce81b954ba8a6 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 18:02:04 +0900 Subject: [PATCH 09/21] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../13-dom/_samples/fruit-basket/script.js | 2 +- docs/1-trial-session/13-dom/index.md | 17 +++++++---------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js b/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js index cf0bae7a4..046a44045 100644 --- a/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js +++ b/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js @@ -1,5 +1,5 @@ const basket = document.getElementById("fruit-basket"); -const list = ["トマト", "レモン", "バジル"]; +const fruits = ["イチゴ", "スイカ", "バナナ"]; for (const fruit of basket) { const item = document.createElement("li"); diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index ab1e81ad2..399f89d65 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -50,7 +50,7 @@ element.style.backgroundColor = "red"; ## DOM を用いて要素を追加する -`document.createElement` 関数は、引数に渡されたタグの、新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値aは、新しく作った HTML 要素に対応するオブジェクトです。 +`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 ```js document.createElement("div"); @@ -82,7 +82,7 @@ newElement.textContent = "Hello World!"; body.appendChild(newElement); ``` -これで、画面に `Hello World!` と表示されたはずです。親要素は任意の要素が指定できます。 +これで、画面に `Hello World!` と表示されたはずです。`body` 以外にも、ほとんどの要素の子要素にすることができます。 ## 初級課題 @@ -118,24 +118,21 @@ element.textContent = "レモン"; 購入する予定の果物を表す文字列が格納された配列が次のように用意されています。 ```js -const fruits = ["トマト", "レモン", "バジル"]; +const fruits = ["イチゴ", "スイカ", "バナナ"]; ``` -`createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。ただし、HTML ファイルには次のように記述されているものとします。 +`createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。ただし、HTML ファイルの body タグの中には次のように記述されているものとします。 ```html title="index.html" - - -
                - - +
                  + ``` ```js title="script.js" const basket = document.getElementById("fruit-basket"); -const fruits = ["トマト", "レモン", "バジル"]; +const fruits = ["イチゴ", "スイカ", "バナナ"]; for (const fruit of fruits) { const item = document.createElement("li"); From 2db315a1622be8e24c07586ace0c5929a2856192 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 18:10:07 +0900 Subject: [PATCH 10/21] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 399f89d65..cc07dc985 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -64,25 +64,26 @@ const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; ``` -これでもまだ新しく作った要素は画面に表示されません。これは、新しく作った要素の親の要素が設定されていないからです。 +これでもまだ新しく作った要素は画面に表示されません。 +これは、作成した要素が画面に表示されている HTML のどこにも追加されていないからです。 -`要素１.appendChild(要素２)` とすることで、要素２を要素１の子要素に追加することができます。 -今回は、body を親要素にしてみましょう。 +`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加することができます。 +今回は、div 要素の子要素にしてみましょう。 ```html - - +
                  ``` ```js -const body = document.getElementById("body-id"); +const parent = document.getElementById("div-element"); const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; -body.appendChild(newElement); +parent.appendChild(newElement); ``` -これで、画面に `Hello World!` と表示されたはずです。`body` 以外にも、ほとんどの要素の子要素にすることができます。 +これで、画面に `Hello World!` と表示されたはずです。 +`div` 要素以外にも、ほとんどの要素の子要素にすることができます。 ## 初級課題 @@ -96,7 +97,6 @@ body.appendChild(newElement);
                • ナス
                • バジル
                  • - ``` From 8fe76e9e0a24b6c7ff5d7563c07cba1c8f3a6729 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Wed, 1 Nov 2023 18:14:06 +0900 Subject: [PATCH 11/21] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index cc07dc985..fad88fa90 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -51,12 +51,7 @@ element.style.backgroundColor = "red"; ## DOM を用いて要素を追加する `document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 - -```js -document.createElement("div"); -``` - -このままだと `textContent` が設定されていない (空文字列) ので、画面には何も表示されません。 +ただ、そのままだと `textContent` が設定されていない (空文字列) ので、画面には何も表示されません。 `textContent` を `Hello World!` に設定してみましょう。 ```js @@ -64,7 +59,7 @@ const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; ``` -これでもまだ新しく作った要素は画面に表示されません。 +しかし、新しく作った要素が画面に表示されていません。 これは、作成した要素が画面に表示されている HTML のどこにも追加されていないからです。 `要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加することができます。 From 1fad898dc33dd5597777ccbe1083f97c07517936 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 12:23:59 +0900 Subject: [PATCH 12/21] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E5=8F=8D=E6=98=A0=20(=E4=B8=80=E9=83=A8=E4=BF=9D=E7=95=99)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_samples/change-shopping-memo/index.html | 6 ++--- .../13-dom/_samples/fruit-basket/script.js | 2 +- docs/1-trial-session/13-dom/index.md | 22 +++++++------------ 3 files changed, 12 insertions(+), 18 deletions(-) diff --git a/docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html b/docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html index 14e8fd24c..9af71de6c 100644 --- a/docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html +++ b/docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html @@ -6,9 +6,9 @@
                    -
                  • トマト
                    • -
                  • ナス
                    • -
                  • バジル
                    • +
                  • トマト
                    • +
                  • ナス
                    • +
                  • バジル
                  diff --git a/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js b/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js index 046a44045..9c34849b2 100644 --- a/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js +++ b/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js @@ -1,7 +1,7 @@ const basket = document.getElementById("fruit-basket"); const fruits = ["イチゴ", "スイカ", "バナナ"]; -for (const fruit of basket) { +for (const fruit of fruits) { const item = document.createElement("li"); item.textContent = fruit; basket.appendChild(item); diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index fad88fa90..4942f0559 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -50,19 +50,14 @@ element.style.backgroundColor = "red"; ## DOM を用いて要素を追加する -`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 -ただ、そのままだと `textContent` が設定されていない (空文字列) ので、画面には何も表示されません。 -`textContent` を `Hello World!` に設定してみましょう。 +`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。 ```js const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; ``` -しかし、新しく作った要素が画面に表示されていません。 -これは、作成した要素が画面に表示されている HTML のどこにも追加されていないからです。 - -`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加することができます。 +そして、`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加し、画面に表示することができます。 今回は、div 要素の子要素にしてみましょう。 ```html @@ -74,11 +69,11 @@ const parent = document.getElementById("div-element"); const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; + parent.appendChild(newElement); ``` これで、画面に `Hello World!` と表示されたはずです。 -`div` 要素以外にも、ほとんどの要素の子要素にすることができます。 ## 初級課題 @@ -88,18 +83,18 @@ parent.appendChild(newElement); ```html title="index.html"
                    -
                  • トマト
                    • -
                  • ナス
                    • -
                  • バジル
                    • +
                  • トマト
                    • +
                  • ナス
                    • +
                  • バジル
                  ``` ```js title="script.js" -const element = document.getElementById("eggplant"); +const targetItem = document.getElementById("item2"); -element.textContent = "レモン"; +targetItem.textContent = "レモン"; ``` @@ -120,7 +115,6 @@ const fruits = ["イチゴ", "スイカ", "バナナ"]; ```html title="index.html"
                    - ``` From 34e9c89c70fcbc7c8175c5c0819f2931003682c8 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 12:24:28 +0900 Subject: [PATCH 13/21] =?UTF-8?q?=E3=82=BB=E3=83=BC=E3=83=96=E5=BF=98?= =?UTF-8?q?=E3=82=8C=20(=E4=B8=8A=E3=81=AB=E4=BB=98=E9=9A=8F)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../13-dom/_samples/change-shopping-memo/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/1-trial-session/13-dom/_samples/change-shopping-memo/script.js b/docs/1-trial-session/13-dom/_samples/change-shopping-memo/script.js index 97c4e24f1..2b154aa99 100644 --- a/docs/1-trial-session/13-dom/_samples/change-shopping-memo/script.js +++ b/docs/1-trial-session/13-dom/_samples/change-shopping-memo/script.js @@ -1,3 +1,3 @@ -const pear = document.getElementById("element2"); +const targetItem = document.getElementById("item2"); -pear.textContent = "レモン"; +targetItem.textContent = "レモン"; From a823ba12286f65ade8ae5616580dc0ed41ddfe6c Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 12:27:55 +0900 Subject: [PATCH 14/21] =?UTF-8?q?=E6=94=B9=E8=A1=8C=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 4942f0559..216afab30 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -46,11 +46,14 @@ element.style.backgroundColor = "red"; ![JavaScriptからスタイルを操作する](./change-styles.png) -

                    CSS のプロパティ名である background-color は、内部にハイフンが含まれているため、element.style.background-colorのように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。style プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。

                    +

                    CSS のプロパティ名である background-color は、内部にハイフンが含まれているため、element.style.background-colorのように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。 +style プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。

                    ## DOM を用いて要素を追加する -`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。 +`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。 +`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 +中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。 ```js const newElement = document.createElement("div"); @@ -111,7 +114,8 @@ targetItem.textContent = "レモン"; const fruits = ["イチゴ", "スイカ", "バナナ"]; ``` -`createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。ただし、HTML ファイルの body タグの中には次のように記述されているものとします。 +`createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。 +ただし、HTML ファイルの body タグの中には次のように記述されているものとします。 ```html title="index.html"
                      From fab3055e53f11fed0acce485a601a14d1c708c18 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 12:28:56 +0900 Subject: [PATCH 15/21] =?UTF-8?q?id=E5=90=8D=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 216afab30..1845fa769 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -64,11 +64,11 @@ newElement.textContent = "Hello World!"; 今回は、div 要素の子要素にしてみましょう。 ```html -
                      +
                      ``` ```js -const parent = document.getElementById("div-element"); +const parent = document.getElementById("parent-element"); const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; From 0f48ecb5a33f7d0aefe16c164ba3b5e6546e9950 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 13:42:27 +0900 Subject: [PATCH 16/21] =?UTF-8?q?=E4=BE=8B=E3=81=AB=E3=82=BF=E3=82=A4?= =?UTF-8?q?=E3=83=88=E3=83=AB=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 1845fa769..bb66d8daf 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -55,7 +55,7 @@ element.style.backgroundColor = "red"; `document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。 -```js +```js title="script.js" const newElement = document.createElement("div"); newElement.textContent = "Hello World!"; ``` @@ -63,11 +63,11 @@ newElement.textContent = "Hello World!"; そして、`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加し、画面に表示することができます。 今回は、div 要素の子要素にしてみましょう。 -```html +```html title="index.html"
                      ``` -```js +```js title="script.js" const parent = document.getElementById("parent-element"); const newElement = document.createElement("div"); From db231a6cac2edf4c48309cda92bfff14b85b043d Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 13:48:00 +0900 Subject: [PATCH 17/21] div -> button --- docs/1-trial-session/13-dom/index.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index bb66d8daf..c4ba307cb 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -53,15 +53,16 @@ element.style.backgroundColor = "red"; `document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。 `document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 +下の例では、新しい `button` 要素を作っています。 中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。 ```js title="script.js" -const newElement = document.createElement("div"); -newElement.textContent = "Hello World!"; +const newButton = document.createElement("button"); +newButton.textContent = "Hello World!"; ``` そして、`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加し、画面に表示することができます。 -今回は、div 要素の子要素にしてみましょう。 +今回は、`div` 要素の子要素にしてみましょう。 ```html title="index.html"
                      @@ -70,13 +71,13 @@ newElement.textContent = "Hello World!"; ```js title="script.js" const parent = document.getElementById("parent-element"); -const newElement = document.createElement("div"); -newElement.textContent = "Hello World!"; +const newButton = document.createElement("button"); +newButton.textContent = "Hello World!"; -parent.appendChild(newElement); +parent.appendChild(newButton); ``` -これで、画面に `Hello World!` と表示されたはずです。 +これで、既存の `div` 要素の子要素に新しい `button` 要素が追加され、画面に `Hello World!` と書いてあるボタンが表示されます。 ## 初級課題 From d139b7ace6ed9a5d09242e8d2b9a32a39fc2c2ee Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 13:50:41 +0900 Subject: [PATCH 18/21] =?UTF-8?q?=E8=AA=9E=E9=A0=86=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index c4ba307cb..53518d992 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -61,7 +61,7 @@ const newButton = document.createElement("button"); newButton.textContent = "Hello World!"; ``` -そして、`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加し、画面に表示することができます。 +そして、`要素1.appendChild(要素2)` とすることで、要素1の子要素に要素2を追加し、画面に表示することができます。 今回は、`div` 要素の子要素にしてみましょう。 ```html title="index.html" From 316b8d1331a779c52dd30fee625980161d1bcf36 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 14:35:54 +0900 Subject: [PATCH 19/21] =?UTF-8?q?chvmvd=E6=B0=8F=E3=83=AC=E3=83=93?= =?UTF-8?q?=E3=83=A5=E3=83=BC=E5=8F=8D=E6=98=A0=20(=E5=A4=A7=E3=81=8D?= =?UTF-8?q?=E3=81=8F=E6=94=B9=E5=A4=89)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 53518d992..13bd350b3 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -116,7 +116,7 @@ const fruits = ["イチゴ", "スイカ", "バナナ"]; ``` `createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。 -ただし、HTML ファイルの body タグの中には次のように記述されているものとします。 +ただし、HTML ファイルには次のように記述されているものとします。 ```html title="index.html"
                        From fab0e551c15b55c501fcbad9679adddc4202bf72 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 14:42:10 +0900 Subject: [PATCH 20/21] =?UTF-8?q?button=20->=20span=20span=20=E5=88=9D?= =?UTF-8?q?=E5=87=BA=E3=81=A0=E3=81=A8=E6=80=9D=E3=81=86=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E3=80=81button=20=E3=81=AE=E3=81=BB=E3=81=86=E3=81=8C=E8=89=AF?= =?UTF-8?q?=E3=81=91=E3=82=8C=E3=81=B0=20revert=20=E3=81=97=E3=81=A6?= =?UTF-8?q?=E3=81=8F=E3=81=A0=E3=81=95=E3=81=84=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index 13bd350b3..b1584ec15 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -53,12 +53,12 @@ element.style.backgroundColor = "red"; `document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。 `document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 -下の例では、新しい `button` 要素を作っています。 +下の例では、新しい `span` 要素を作っています。 中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。 ```js title="script.js" -const newButton = document.createElement("button"); -newButton.textContent = "Hello World!"; +const newSpan = document.createElement("span"); +newSpan.textContent = "Hello World!"; ``` そして、`要素1.appendChild(要素2)` とすることで、要素1の子要素に要素2を追加し、画面に表示することができます。 @@ -71,13 +71,13 @@ newButton.textContent = "Hello World!"; ```js title="script.js" const parent = document.getElementById("parent-element"); -const newButton = document.createElement("button"); -newButton.textContent = "Hello World!"; +const newSpan = document.createElement("span"); +newSpan.textContent = "Hello World!"; -parent.appendChild(newButton); +parent.appendChild(newSpan); ``` -これで、既存の `div` 要素の子要素に新しい `button` 要素が追加され、画面に `Hello World!` と書いてあるボタンが表示されます。 +これで、既存の `div` 要素の子要素に新しい `span` 要素が追加され、画面に `Hello World!` と表示されます。 ## 初級課題 From d4a18e7299d478199462c7ac237421c054b1af3b Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Thu, 2 Nov 2023 15:11:46 +0900 Subject: [PATCH 21/21] =?UTF-8?q?=E5=86=85=E5=AE=B9=E9=81=95=E3=81=86?= =?UTF-8?q?=E3=81=AE=E3=81=A7=E6=AE=B5=E8=90=BD=E5=88=86=E9=9B=A2=20(+form?= =?UTF-8?q?at:=20=E5=B7=AE=E5=88=86=E3=81=AA=E3=81=97)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/13-dom/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md index b1584ec15..db7e095df 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.md @@ -54,6 +54,7 @@ element.style.backgroundColor = "red"; `document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。 `document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。 下の例では、新しい `span` 要素を作っています。 + 中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。 ```js title="script.js"