---
layout: "@/layouts/MarkdownLayout.astro"
---
import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";
export const title = "ワーク";
# {title}
このワークは、以下の内容を含みます。
- [プログラミングで扱うもの](./010-what-program-do)
- [if文で条件分岐する](./020-if)
- [まとめて処理する (配列)](./030-array)
- [ボタンをクリックしたら処理する](./050-js-with-html)
- [JavaScriptでHTMLを操作する](./060-edit-html-from-js)
- [HTMLから値を読み込む](./070-get-value-from-html)
これまで学んだ知識を使って、実際にJavaScriptを書いてみましょう。
## TOC
## 演習1: 年齢判定プログラムを作ろう
`public/playground/js/`フォルダに`age-checker.html`を作成して、年齢によってメッセージを表示するプログラムを作成してください。
### 要件
- `<input type="number">`を使って年齢を入力できるようにする
- ボタンをクリックしたら、入力された年齢を判定する処理を実行する
- 20歳以上なら「成人です」、20歳未満なら「未成年です」と表示する
- `if`文を使って条件分岐する
- 入力された値は`Number()`で数値に変換する
- 結果は`textContent`を使ってHTML要素に表示する
<details>
<summary>ヒント</summary>
```js
const ageInput = document.querySelector("#age");
const age = Number(ageInput.value);
if (age >= 20) {
// 成人の場合の処理
} else {
// 未成年の場合の処理
}
```
`input`要素から`value`で値を取得し、`Number()`で数値に変換してから判定しましょう。
</details>
### 完成例
<RenderFile path="public/sample/js/work/age-checker.html" />
---
## 演習2: 商品の合計金額を計算しよう
`public/playground/js/`フォルダに`price-calculator.html`を作成して、複数の商品の合計金額を計算するプログラムを作成してください。
### 要件
- 以下の商品リストを配列として定義する
- りんご: 120円
- バナナ: 80円
- みかん: 100円
- ボタンをクリックしたら合計金額を計算する
- `for`文または`forEach`を使って配列を処理する
- 結果をHTML要素に表示する
<details>
<summary>ヒント</summary>
```js
const prices = [120, 80, 100];
let total = 0;
for (const price of prices) {
total = total + price;
}
```
合計金額を計算したら、`textContent`で表示しましょう。
</details>
### 完成例
<RenderFile path="public/sample/js/work/price-calculator.html" />
---
## 演習3: カウンターアプリを作ろう
`public/playground/js/`フォルダに`counter.html`を作成して、数字を増減できるカウンターアプリを作成してください。
### 要件
- 「+1」ボタンと「-1」ボタンの2つを作る
- 現在の数字を表示する要素を作る
- 「+1」ボタンをクリックしたら数字が1増える
- 「-1」ボタンをクリックしたら数字が1減る
- ボタンをクリックするたびに、表示が更新される
<details>
<summary>ヒント</summary>
```js
let count = 0;
button.addEventListener("click", () => {
count = count + 1;
// 表示を更新する
});
```
変数`count`で現在の値を管理し、ボタンをクリックするたびに更新しましょう。
</details>
### 完成例
<RenderFile path="public/sample/js/work/counter.html" />
---
## 演習4: テキストの色を変えるアプリを作ろう
`public/playground/js/`フォルダに`color-changer.html`を作成して、ボタンをクリックするとテキストの色が変わるプログラムを作成してください。
### 要件
- 「赤」「青」「緑」の3つのボタンを作る
- テキストを表示する要素を作る
- 各ボタンをクリックしたら、テキストの色がそれぞれの色に変わる
- `style.color`またはclassListを使って色を変更する
<details>
<summary>ヒント</summary>
```js
redButton.addEventListener("click", () => {
text.style.color = "red";
});
```
複数のボタンにそれぞれイベントリスナーを設定しましょう。
</details>
### 完成例
<RenderFile path="public/sample/js/work/color-changer.html" />
