🌸西暦年齢計算ツールの作り方🌸

こんにちは〜ららぽてすらです🎵

今回は、WEB上で動かす西暦年齢計算ツールのプログラム内容とソースコード提供していきます🌸

HTML部分:

<!DOCTYPE html>: HTML5文書を定義します。
<html>: HTML文書のルート要素を開始します。
<body>: ページに表示されるコンテンツ部分を開始します。
<h2>年齢計算ツール</h2>: "年齢計算ツール"という見出しを設定します。
<form action="">: フォームを開始します。action属性は空であり、これはフォームデータが送信されないことを意味します（JavaScriptによって処理されます）。
<label for="year">西暦:</label><br>: ユーザに対して入力フィールドが何を意味するのかを示すラベルを作成します。<br>は改行を意味します。
<input type="text" id="year" name="year"><br>: テキスト入力フィールドを作成します。このフィールドは西暦の年を入力するために使用されます。
<input type="button" id="calculate" value="計算">: "計算"という値のボタンを作成します。このボタンをクリックすると、JavaScript関数が呼び出されます。
</form>: フォームを閉じます。
<p id="result"></p>: 結果を表示するための段落を作成します。この要素はJavaScriptから動的に変更されます。
<script>: JavaScriptコードのセクションを開始します。

JavaScript部分:

document.getElementById('calculate').addEventListener('click', calculateAge);: "calculate"というIDを持つ要素（ボタン）に対して、クリックイベントリスナーを追加します。このボタンがクリックされると、calculateAge関数が実行されます。
function calculateAge() {: calculateAgeという名前の関数を定義します。この関数はボタンがクリックされたときに呼び出されます。
var year = document.getElementById("year").value;: "year"というIDを持つ要素（テキストフィールド）の値（ユーザが入力した西暦の年）を取得します。
if (!isNaN(year) && year !== "") {: 年が数値であり、空でないことを確認します。
var age = getAge(year);: getAge関数を呼び出し、計算された年齢を取得します。
document.getElementById("result").innerHTML = "年齢は " + age + " 歳です。";: "result"というIDを持つ要素（段落）の中に、計算された年齢を表示します。
} else {: 年が無効（数値でないか空）の場合に実行されます。
document.getElementById("result").innerHTML = "無効な年です。";: "result"というIDを持つ要素（段落）の中にエラーメッセージを表示します。
}: if文を閉じます。
}: calculateAge関数を閉じます。
function getAge(year) {: 年齢を計算するための関数getAgeを定義します。この関数は指定された西暦の年から現在までの年齢を計算します。
var today = new Date();: 現在の日付と時間を持つDateオブジェクトを作成します。
var age = today.getFullYear() - year;: 現在の年から指定された年を引いて、年齢を計算します。
if (today.getMonth() < 11 || (today.getMonth() == 11 && today.getDate() < 31)) {: 現在の月が12月（JavaScriptでは0から11で月を表現するため、12月は11となります）であり、かつ現在の日が31日でない場合、年齢を1つ減らします（誕生日がまだ来ていないため）。
age--;: 年齢を1つ減らします。
}: if文を閉じます。
return age;: 計算された年齢を返します。
}: getAge関数を閉じます。
</script>: JavaScriptセクションを閉じます。
</body>: body要素を閉じます。
</html>: HTML文書を閉じます。

🕰️西暦年齢計算ツールソースコード🕰️

<!DOCTYPE html>
<html>
<body>

<h2>年齢計算ツール</h2>

function calculateAge() {
var year = document.getElementById("year").value;

if (!isNaN(year) && year !== "") {
var age = getAge(year);
document.getElementById("result").innerHTML = "年齢は " + age + " 歳です。";
} else {
document.getElementById("result").innerHTML = "無効な年です。";
}
}

function getAge(year) {
var today = new Date();
var age = today.getFullYear() - year;
if (today.getMonth() < 11 || (today.getMonth() == 11 && today.getDate() < 31)) {
age--;
}
return age;
}
</script>

</body>
</html>