誕生年の計算アプリ
このアプリは、ユーザーの名前と年齢を入力すると、誕生年を計算して表示します。
テスト環境
- Android 11.0
- iOS 14.3
ファイル | 説明 |
index.html | スタート画面のページ |
css/style.css | アプリのスタイルシート |
jQuery
index.html ファイル内の次の記述 ( HTML の <body> 内 ) で、ユーザーの名前と年齢の入力欄を 2 つ、および、誕生年の計算ボタンを 1 つ表示します。...
<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>
...
このコードでは、
calculate ( 計算 ) と名付けた関数を定義します。まず、名前の入力値を myname 変数に、年齢の入力値を myage 変数に、それぞれ代入しています。そして、今日の日付をもとに、生まれ年を計算し、
birthyear 変数に代入します。最後に、
text という変数にメッセージの内容をセットし、navigator.notification.alert 関数を呼び出し、ポップアップ形式で表示します。この
navigator.notification.alert 関数は、基本プラグインの関数です。実行すると、画面上にポップアップダイアログを表示します。今回は、第三引数に 「 Welcome to Monaca! 」 を指定して、ダイアログのタイトルに表示しています。最終更新 6mo ago