# 誕生年の計算アプリ

このアプリは、ユーザーの名前と年齢を入力すると、誕生年を計算して表示します。

## デモ

<img src="https://docs.monaca.io/images/common/import_img.png" alt="" data-size="line">  [**プロジェクトをインポート**](https://monaca.mobi/ja/directimport?pid=64081412e788858b3ca02f45)

**テスト環境**

* Android 11.0
* iOS 14.3

![](/files/-MgK9lW7Evcymt-q1GKq)

## ファイル構成

![](/files/-MgK9noCVEfPaOF8lecS)

| ファイル            | 説明          |
| --------------- | ----------- |
| `index.html`    | スタート画面のページ  |
| `css/style.css` | アプリのスタイルシート |

## 必要な JS/CSS コンポーネント

* `jQuery`  &#x20;

## HTML の解説

`index.html` ファイル内の次の記述 ( HTML の \<body> 内 ) で、ユーザーの名前と年齢の入力欄を 2 つ、および、誕生年の計算ボタンを 1 つ表示します。

```markup
...
  <div data-role="page" id="TopPage">
      <header data-role="header" data-position="fixed">
          <h1>BirthYear App</h1>
      </header>
      <section data-role="content">

          What's your name?
          <input type="text" id="myname" class="input-text" style="width: 40%">

          How old are you?
          <input type="text" id="myage" class="input-text" style="width: 20%">

          <a class="button" onclick="calculate();">calculate your birth year!</a>
      </section>
  </div>
...
```

## JavaScript の解説

このコードでは、 `calculate` ( 計算 ) と名付けた関数を定義します。

まず、名前の入力値を myname 変数に、年齢の入力値を myage 変数に、それぞれ代入しています。そして、今日の日付をもとに、生まれ年を計算し、`birthyear` 変数に代入します。

最後に、`text` という変数にメッセージの内容をセットし、`navigator.notification.alert` 関数を呼び出し、ポップアップ形式で表示します。

この `navigator.notification.alert` 関数は、基本プラグインの関数です。実行すると、画面上にポップアップダイアログを表示します。今回は、第三引数に 「 Welcome to Monaca! 」 を指定して、ダイアログのタイトルに表示しています。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/sampleapp/samples/age-calc.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
