Zenn
🚻

【JavaScript】円周率を計算するプログラムを作成（備忘録）

に公開
2件
JavaScript
初心者
メモ
tech

１．はじめに

JavaScript の理解を深めるために、Youtube 動画を参考に円の面積を計算するプログラムを作成しました。
一部のプログラムを修正/変更しています。

２．サンプルプログラム

Sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
    <body>
        <h1 id="calc">円の面積結果を表示します</h1>
        <label>円の半径を入力してください</label><br>
        <input type="text" id="inputData"><br>
        <button id="submitData">送信</button>
        <script src="Sample.js"></script>
    </body>
</html>
Sample.js
document.getElementById("submitData").onclick = function() {
    const pi = 3.1415;
    let result;

    // 変数radiusに保存された値のデータ型は、String型
    let radius = document.getElementById("inputData").value;
    // 後続処理を実施する為、データ型変換
    let modified_radius = Number(radius);

    if (modified_radius > 0) {
        result = modified_radius * modified_radius * pi;
    } else {
        document.getElementById("calc").textContent = "0より大きい数値を入力してください。"
        return;
    }

    // 計算結果が数値であることを判定
    if (!Number.isNaN(result)) {
        document.getElementById("calc").textContent = result;
    }
}

３．実行環境

・OS: Windows 11（バージョン 24H2）
・ブラウザ: Microsoft Edge（バージョン 139.0.3405.125）
・エディタ: Visual Studio Code（バージョン 1.103.2）

４．参考

・【JavaScript】ローカル変数 と グローバル変数について（備忘録）
・【JavaScript】NaN とは（備忘録）
・#6 00:44:48 Constants 🚫

Discussion