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

クラスの一つ目の演習の解答例を追加 #754

Merged
merged 3 commits into from
May 4, 2024
Merged

クラスの一つ目の演習の解答例を追加 #754

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
641eceb
クラスの一つ目の演習の解答例を追加
kiyokaanan May 4, 2024
bdd6a74
add closing tag
kiyokaanan May 4, 2024
50b8970
delete a line
kiyokaanan May 4, 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
36 changes: 16 additions & 20 deletions docs/2-browser-apps/03-class/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,24 @@ document.write(emptyFunction()); // 値を返さない関数の戻り値は unde

`weightInTons` と `cost` をプロパティとして持ち、 `weightInTons` のデフォルト値が `1` であるクラス `Car` を作成し、 `cost` に好きな値を代入してみましょう。

<Answer title="Carクラスの定義">

```javascript
class Car {
weightInTons = 1;
cost;
}

const prius = new Car();
prius.cost = 2600000;

document.write(`重さは${prius.weightInTons}tで、値段は${prius.cost}円です。`);
```

<ViewSource url={import.meta.url} path="_samples/car-class" />

</Answer>

## <Term>メソッド</Term>

同じ<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>に対しては、同じような処理を行うことが多いです。例えば、学生はたいてい最初の授業で自己紹介をします。そこで、 `Student` <Term>クラス</Term>に、自己紹介をする関数 `introduceSelf()` を設定してみましょう。
Expand Down Expand Up @@ -338,26 +354,6 @@ document.write(myBirthDay.getFullYear()); // 2014

`getFullYear` <Term>メソッド</Term>は、年となる数値を返す<Term>メソッド</Term>です。

{/* prettier-ignore */}
{/* TODO: 自分はこっちのほうがいいと思いますが...
例えば [`Map` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)は、キーと値のペアを保存するオブジェクトを提供します。

```js
const map1 = new Map();

map1.set("a", 1);
map1.set("b", 2);
map1.set("c", 3);

document.write(map1.get("a")); // 1

map1.set("a", 97);

document.write(map1.get("a")); // 97
```

\*/}

また、DOM を利用して `div` 要素を作成または取得すると、[`HTMLDivElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)のインスタンスが得られます。

このクラスは [`HTMLElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)を継承しており、 `HTMLElement` クラスは [`Element` クラス](https://developer.mozilla.org/ja/docs/Web/API/Element)を、`Element` クラスは [`Node` クラス](https://developer.mozilla.org/ja/docs/Web/API/Node)を継承しています。
Expand Down
Loading