資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 計算三角形的面積？
概述
三角形的面積指的是整個區域，包括三角形的周長和內部面積。因此，要計算三角形的面積，我們需要計算其周長，然後再計算面積。所有這些都是手動計算方法。透過使用 JavaScript，我們可以自動化整個過程，這意味著使用者只需在介面上輸入三角形的邊長，三角形的面積就會自動計算出來。
公式（海倫公式）
下面給出了海倫公式：
(a+b+c)/2; Math.sqrt(p*((p-a)*(p-b)*(p-c)));
其中，第一個公式是計算三角形半周長的公式，其中 a、b 和 c 表示三角形的邊長。第二個公式表示計算三角形面積的公式，其中 p 是三角形的半周長，a、b 和 c 是三角形的邊長。
演算法
步驟 1 - 在您的文字編輯器中建立一個 HTML 檔案，並在檔案中新增 HTML 基本結構。
步驟 2 - 現在建立一個父容器，其中包含三個型別為文字的輸入標籤，以及具有 id 屬性的 name 屬性，其 id 名稱分別為 a、b 和 c。
<div> <input type="text" id="a"> <input type="text" id="b"> <input type="text" id="c"> </div>
步驟 3 - 現在建立一個 HTML 按鈕，並使用 cal() 作為函式的 onclick 事件。
<button onclick="cal()">Calculate</button>
步驟 4 - 現在將指令碼標籤新增到檔案的 body 標籤中。
<script><script>
步驟 5 - 現在建立一個名為 cal() 的箭頭函式。
cal = () => {)
步驟 6 - 現在使用 HTML DOM 屬性獲取輸入框的值。
const a = parseInt(document.getElementById("a").value);
const b = parseInt(document.getElementById("b").value);
const c = parseInt(document.getElementById("c").value);
步驟 7 - 現在使用三角形公式，並將其轉換為具有有效變數的表示式。
const sp = (a+b+c)/2; const area = Math.sqrt(sp*((sp-a)*(sp-b)*(sp-c)));
步驟 8 - 計算三角形的面積，並使用 innerHTML 屬性將輸出顯示到螢幕上。
document.getElementById("ans").innerHTML = "Answer: "+area;
示例
在本例中，我們將使用 HTML 和 CSS 建立介面，該介面獲取三角形邊長的輸入，並將使用 JavaScript 建立一個函式來計算三角形的面積。
<html>
<head>
<title> Area of triangle </title>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
div{
display: flex;
gap: 2rem;
place-content: center;
}
input{
width:3rem;
padding: 0.5rem;
font-weight: 800;
text-align: center;
}
button{
width: 5rem;
}
#ans{
border: 1px dashed black;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h3> Calculate the area of triangle </h3>
<div>
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
</div>
<button onclick="cal()">Calculate</button>
<p id="ans"></p>
<script>
cal = () => {
const a = parseInt(document.getElementById("a").value);
const b = parseInt(document.getElementById("b").value);
const c = parseInt(document.getElementById("c").value);
const sp = (a+b+c)/2;
const area = Math.sqrt(sp*((sp-a)*(sp-b)*(sp-c)));
document.getElementById("ans").innerHTML = "Answer: "+area;
}
</script>
</body>
</html>
下圖顯示了上述示例的輸出，當用戶在瀏覽器中載入此功能時，他將獲得如下所示的介面，其中包含三個用於三角形三條邊長的輸入框和一個計算按鈕。因此，當用戶在其各自的輸入欄位中輸入三角形的邊長並點選計算按鈕時，輸入欄位的值將在後臺的公式中進行處理，並在瀏覽器螢幕上顯示輸出，如下所示。使用者輸入三角形的邊長為 3、4 和 5，並點選計算按鈕，他將獲得輸出 6。
結論
透過建立上述功能，即使是不瞭解三角形公式的人也可以輕鬆地使用它，因為使用者只需在介面中輸入邊長的值。使用這三個邊長輸入的優點在於，無論是什麼型別的三角形，例如等邊三角形、等腰三角形或直角三角形，我們都可以計算任何型別三角形的面積。此功能還可以整合到任何數字計算器中，並具有其他多種功能。
3K+ 瀏覽量
