Trong bài viết này, chúng ta sẽ xem cách viết chương trình tính diện tích một số hình cơ bản bằng JavaScript.
Như chúng ta đã biết, diện tích các hình cơ bản được tính theo công thức toán học như sau:
Đối với diện tích hình tròn được tính theo công thức:
Diện tích hình tròn = pi * bán kính * bán kính
Đối với diện tích hình tam giác được tính theo công thức:
Diện tích hình tam giác = (cạnh đáy * chiều cao) / 2
Đối với diện tích hình vuông được tính theo công thức:
Diện tích hình vuông = cạnh * cạnh
Đối với diện tích hình chữ nhật được tính theo công thức:
Diện tích hình chữ nhật = chiều dài * chiều rộng
Đối với diện tích hình thang được tính theo công thức:
Diện tích hình thang = (đáy lớn + đáy bé) * chiều cao / 2
Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác. Mã lệnh của chương trình tính diện tích các hình như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
<title> Chương trình tính diện tích </title>
</head>
<body>
id_hinh:<input
type="text"
id="id_hinh"
placeholder="Nhập mục"
/><br />
id_bankinh:<input
type="text"
id="id_bankinh"
placeholder="Nhập mục"
/><br />
id_day:<input type="text" id="id_day" placeholder="Nhập mục" /><br />
id_cao:<input
type="text"
id="id_cao"
placeholder="Nhập mục"
/><br />
id_canh: <input type="text" id="id_canh" placeholder="Nhập mục" /><br />
id_dai<input type="text" id="id_dai" placeholder="Nhập mục" /><br />
id_rong<input
type="text"
id="id_rong"
placeholder="Nhập mục"
/><br />
id_daylon<input type="text" id="id_daylon" placeholder="Nhập mục" /><br />
id_daynho<input type="text" id="id_daynho" placeholder="Nhập mục" /><br />
id_hcao<input
type="text"
id="id_hcao"
placeholder="Nhập mục"
/><br /><br />
<button onclick ="Tinhdientich()">Tinh dien tich</button>
<p id="id_xuat"></p>
<script type="text/javascript">
let dientich = 0;
function Tinhdientich() {
// xác định được hình dạng đã chọn
let hinhdang = document.getElementById("id_hinh").value;
// tính diện tích hình
switch (hinhdang) {
case "circle":
case "hình tròn":
let bankinh = document.getElementById("id_bankinh").value;
dientich = Math.PI * bankinh * bankinh;
break;
case "triangle":
case "tam giác":
case "hình tam giác":
let day = document.getElementById("id_day").value;
let cao = document.getElementById("id_cao").value;
dientich = (day * cao) / 2;
break;
case "square":
case "hình vuông":
let canh = document.getElementById("id_canh").value;
dientich = canh * canh;
break;
case "rectangle":
case "hình chữ nhật":
let dai = document.getElementById("id_dai").value;
let rong = document.getElementById("id_rong").value;
dientich = dai * rong;
break;
case "trapeze":
case "hình thang":
let daylon = parseFloat(document.getElementById("id_daylon").value);
let daynho = parseFloat(document.getElementById("id_daynho").value);
let hcao = parseFloat(document.getElementById("id_hcao").value);
dientich = (daylon + daynho) * hcao / 2;
break;
}
document.getElementById("id_xuat").innerHTML = "Dientich = " + dientich;
}
</script>
</body>
</html>
Phân tích đoạn mã:
Trong chương trình trên, Sử dụng các thẻ <input>, chúng ta có thể lấy được giá trị người dùng nhập vào trên giao diện, chẳng hạn: bán kính, cạnh, đáy, chiều cao...
Tạo một nút để gọi hàm Tinhdientich() qua sự kiện người dùng click vào một button (nút) trên giao diện bằng câu lệnh dưới đây:
<button onclick ="Tinhdientich()">Tinh dien tich</button>
Tạo hàm Tinhdientich() trong javascript.
Để tính diện tích trước hết chúng ta phải xác định được hình dạng đã chọn.
Sử dụng câu lệnh switch.. case để xét từng trường hợp, ứng với mỗi hình dạng (tròn, vuông, chữ nhật, tam giác hay hình thang) sẽ thực hiện các câu lệnh tính diện tích tương ứng, chỉ lưu ý là: sử dụng câu lệnh break; để thoát khỏi mỗi case và khi tính diện tích hình thang ta phải dùng câu lệnh parseFloat() để chuyển giá trị chuỗi sang số thập phân.
Kết quả đầu ra khi chạy đoạn mã trên như hình ảnh bên dưới:
Từ hình ảnh trên, chúng ta thấy khi thực thi chương trình, để đảm bảo tính diện tích đúng cần phải thực hiện theo hướng dẫn như sau:
Nếu các bạn muốn tính diện tích hình tròn: Tại mục nhập số 1. Các bạn nhập "circle" hoặc "hình tròn". Sau đó, nhập bán kính tại ô nhập mục số 2, bỏ qua các ô nhập còn lại và nhấn vào nút tính diện tích.
Nếu các bạn muốn tính diện tích hình tam giác: Tại mục nhập số 1. Các bạn nhập "triangle", "tam giác" hoặc "hình tam giác". Sau đó, nhập cạnh đáy và chiều cao lần lượt tại ô nhập mục số 3 và số 4, bỏ qua các ô nhập còn lại và nhấn vào nút tính diện tích.
Nếu các bạn muốn tính diện tích hình vuông: Tại mục nhập số 1. Các bạn nhập "square" hoặc "hình vuông". Sau đó, nhập bán kính tại ô nhập mục số 5, bỏ qua các ô nhập còn lại và nhấn vào nút tính diện tích.
Nếu các bạn muốn tính diện tích hình chữ nhật: Tại mục nhập số 1. Các bạn nhập "rectangle" hoặc "hình chữ nhật”. Sau đó, nhập chiều dài và chiều rộng lần lượt tại ô nhập mục số 6 và số 7, bỏ qua các ô nhập còn lại và nhấn vào nút tính diện tích.
Nếu các bạn muốn tính diện tích hình thang: Tại mục nhập số 1. Các bạn nhập "trapeze" hoặc "hình thang". Sau đó, nhập đáy lớn, đáy bé và chiều cao lần lượt tại ô nhập mục số 8,9 và 10, bỏ qua các ô nhập còn lại và nhấn vào nút tính diện tích.