ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptの入力値計算
JavaScriptの入力値計算
- WBOYオリジナル
- 2023-05-27 11:40:071212ブラウズ
JavaScript は、さまざまなインタラクティブな効果を実現するために使用できる、一般的に使用される Web プログラミング言語です。この記事では、JavaScriptを使用して円の半径を入力し、面積や円周を計算して出力する方法を紹介します。
1. 半径を入力します
半径の入力は、円の円周と面積を計算するための最初のステップです。これは、単純な HTML ページで実現できます。まず、半径を入力して計算を開始するためのテキスト ボックスとボタンを HTML ファイルに作成する必要があります。コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>求圆面积和周长</title>
</head>
<body>
<p>请输入圆的半径：</p>
<input type="number" id="radius"></input>
<button onclick="calculate()">计算</button>
<p id="area"></p>
<p id="circumference"></p>
<script src="circle.js"></script>
</body>
</html>この HTML ページには、テキスト ボックスと計算ボタンが含まれています。結果を出力するために空の段落が使用されます。このうちテキストボックスのIDは「radius」で、半径の入力値を取得するために使用されます。ボタンの onclick イベントは、円の円周と面積を計算するために使用される JavaScript 関数「calculate()」にバインドされています。結果は 2 つの段落に分けて出力され、それぞれ ID が「area」と「circumference」のタグで表されます。
2. 面積と周長の計算
HTML ファイルに、「circle.js」という名前の JavaScript ファイルを導入しました。このファイルには、円の面積と円周を計算する関数を記述します。コードは次のとおりです。
function calculate() {
var radius = document.getElementById("radius").value;
// 计算面积
var area = Math.PI * Math.pow(radius, 2);
document.getElementById("area").innerHTML = "面积: " + area + "平方厘米";
// 计算周长
var circumference = 2 * Math.PI * radius;
document.getElementById("circumference").innerHTML = "周长: " + circumference + "厘米";
}この関数には 3 つの主要なステップがあります。まず、JavaScript の DOM メソッドを使用して、テキスト ボックスの値、つまりユーザーが入力した円の半径を取得します。次に、PI 定数と数学ライブラリの pow() 関数を使用して円の面積を計算します。最後に、数学ライブラリと入力された半径を使用して円の円周を計算し、結果を HTML ページの 2 つの段落に出力します。この例では、面積と周囲長を文字列として出力していますが、必要に応じて書式設定することができます。
3. テストと拡張
これで、ブラウザーで HTML ファイルを開いてテストを開始できます。テキストボックスに値を入力し、「計算」ボタンをクリックすると、円の面積と円周が出力されます。次の図に示すように:
#入力値を変更し、[計算] ボタンを複数回クリックして、計算関数の正確さをテストできます。さらに、この単純な JavaScript プログラムを拡張して、他の変数を受け入れたり出力したり、より複雑な対話型オプションをユーザーに提供したりできます。
結論
この記事では、JavaScript を使用して円の半径を入力し、その面積と円周を計算する方法を紹介しました。 JavaScript は、このような対話型操作を実行するための一般的なツールです。 HTML やその他のブラウザ API を簡単に操作できるため、Web アプリケーションや Web ページの作成がより簡単かつ楽しくなります。
以上がJavaScriptの入力値計算の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。