<h2 id="%EF%BC%91%EF%BC%8E%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%91%EF%BC%8E%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> １．はじめに</h2>
<code>JavaScript</code> の理解を深めるために、<code>Youtube</code> 動画を参考に円の面積を計算するプログラムを作成しました。 
一部のプログラムを修正/変更しています。
<h2 id="%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" aria-hidden="true"></a> ２．サンプルプログラム</h2>
<div class="code-block-container">
<div class="code-block-filename-container">Sample.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="7">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;/head&gt;
 &lt;body&gt;
 &lt;h1 id="calc"&gt;円の面積結果を表示します&lt;/h1&gt;
 &lt;label&gt;円の半径を入力してください&lt;/label&gt;&lt;br&gt;
 &lt;input type="text" id="inputData"&gt;&lt;br&gt;
 &lt;button id="submitData"&gt;送信&lt;/button&gt;
 &lt;script src="Sample.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">Sample.js</div>
<pre class="language-js"><code class="language-js code-line" data-line="23">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 &gt; 0) {
 result = modified_radius * modified_radius * pi;
 } else {
 document.getElementById("calc").textContent = "0より大きい数値を入力してください。"
 return;
 }

 // 計算結果が数値であることを判定
 if (!Number.isNaN(result)) {
 document.getElementById("calc").textContent = result;
 }
}
</code></pre>
</div><h2 id="%EF%BC%93%EF%BC%8E%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%93%EF%BC%8E%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83" aria-hidden="true"></a> ３．実行環境</h2>
・OS: Windows 11（バージョン 24H2） 
・ブラウザ: Microsoft Edge（バージョン 139.0.3405.125） 
・エディタ: Visual Studio Code（バージョン 1.103.2）
<h2 id="%EF%BC%94%EF%BC%8E%E5%8F%82%E8%80%83" data-line="53" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%94%EF%BC%8E%E5%8F%82%E8%80%83" aria-hidden="true"></a> ４．参考</h2>
・<a href="https://zenn.dev/yama_kawa/articles/40d155cb488f0f" target="_blank">【JavaScript】ローカル変数 と グローバル変数について（備忘録）</a> 
・<a href="https://zenn.dev/yama_kawa/articles/aeb8860de8b5ae" target="_blank">【JavaScript】NaN とは（備忘録）</a> 
・<a href="https://www.youtube.com/watch?v=lfmg-EJ8gm4" target="_blank" rel="nofollow noopener noreferrer">#6 00:44:48 Constants 🚫</a>

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

ラザニアパンサー

<blockquote data-line="0" class="code-line">
const pi = 3.1415;
</blockquote>
大きな問題ではありませんが、JavaScriptにはMathオブジェクトのプロパティとしてPIが定義されておりますので、こちらを使う方法もあります。 
<iframe id="zenn-embedded__c4c5676f2ecff" src="https://embed.zenn.studio/card#zenn-embedded__c4c5676f2ecff" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FMath%2FPI" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/PI</a>

ご教示ありがとうございます、初めて知りました。。。

Discussion