ใช้ JavaScript ในการคำนวนพื้นที่ วงกลม สี่เหลี่ยมผืนผ้า

[Sakana]

การคำนวณพื้นที่ของรูปทรงเรขาคณิต เช่น วงกลมหรือสี่เหลี่ยมผืนผ้า เป็นพื้นฐานสำคัญในหลายๆ ด้าน ไม่ว่าจะเป็นงานก่อสร้าง สถาปัตยกรรม หรืองานออกแบบต่างๆ หากคุณต้องการสร้างเครื่องมือที่ช่วยคำนวณพื้นที่ได้อย่างรวดเร็วและแม่นยำ บทความนี้จะแสดงให้คุณเห็นว่า JavaScript ทำงานกับหน้า form html ทำสิ่งนี้ได้อย่างไร เราจะเจาะลึกถึงหลักการทำงานของโค้ดที่สามารถรับค่าจากผู้ใช้ เลือกสูตรที่ถูกต้อง และแสดงผลลัพธ์ออกมาในทันที เมื่อคุณอ่านบทความนี้จบ คุณจะสามารถเข้าใจกระบวนการทำงานเบื้องหลังของโปรแกรมคำนวณ และสามารถนำความรู้ไปประยุกต์ใช้ในการสร้างเครื่องมือคำนวณอื่นๆ ที่มีประโยชน์ได้

มาดูส่วนของโค้ด JavaScript ที่ทำหน้าที่เป็นสมองของโปรแกรมนี้กัน โดยเราจะโฟกัสไปที่ตรรกะการคำนวณและฟังก์ชันหลัก

1. การดึงองค์ประกอบจาก HTML
โค้ดเริ่มต้นด้วยการดึง element ต่างๆ จากหน้า HTML เพื่อให้ JavaScript สามารถเข้าถึงและจัดการกับมันได้ เช่น ช่องรับข้อมูล, ปุ่ม, หรือกล่องแสดงผลลัพธ์

โค้ด: เลือกทั้งหมด

// 1. ดึงองค์ประกอบ HTML ที่จำเป็นเข้ามาใน JavaScript
const shapeSelect = document.getElementById('shape');
const rectangleForm = document.getElementById('rectangle-form');
const circleForm = document.getElementById('circle-form');
const lengthInput = document.getElementById('length');
const widthInput = document.getElementById('width');
const radiusInput = document.getElementById('radius');
const calculateBtn = document.getElementById('calculate-btn');
const resultArea = document.getElementById('result-area');

ตัวแปรเหล่านี้จะทำหน้าที่เป็นตัวแทนของ element ต่างๆ ในโค้ด JavaScript ทำให้เราสามารถอ่านค่าหรือเปลี่ยนเนื้อหาของมันได้

2. ฟังก์ชัน calculateArea(): หัวใจของการคำนวณ
ฟังก์ชันนี้จะถูกเรียกใช้เมื่อผู้ใช้คลิกปุ่ม "คำนวณ" มันจะตรวจสอบว่าผู้ใช้เลือกรูปทรงอะไร และใช้สูตรคำนวณที่เหมาะสม

โค้ด: เลือกทั้งหมด

function calculateArea() {
    const selectedShape = shapeSelect.value;
    let area = 0;
    let unit = ' ตร.ม.';

    // ตรวจสอบว่าผู้ใช้เลือกรูปทรงอะไร
    if (selectedShape === 'rectangle') {
        // ... โค้ดคำนวณสี่เหลี่ยมผืนผ้า ...
    } else if (selectedShape === 'circle') {
        // ... โค้ดคำนวณวงกลม ...
    }

    // แสดงผลลัพธ์
    resultArea.textContent = area.toFixed(2) + unit;
}

- const selectedShape = shapeSelect.value;: โค้ดนี้จะดึงค่าจาก dropdown ที่ผู้ใช้เลือกมา (เช่น 'rectangle' หรือ 'circle') เพื่อใช้ในการกำหนดเงื่อนไข
- if...else if: คำสั่งเงื่อนไขนี้จะทำหน้าที่ตรวจสอบว่า selectedShape มีค่าเป็นอะไร จากนั้นจะเลือกบล็อกโค้ดคำนวณที่เหมาะสมมาทำงาน
3. สูตรคำนวณและตรวจสอบความถูกต้องของข้อมูล
ภายในแต่ละเงื่อนไข จะมีโค้ดสำหรับคำนวณโดยเฉพาะ:
การคำนวณพื้นที่สี่เหลี่ยมผืนผ้า:

โค้ด: เลือกทั้งหมด

if (selectedShape === 'rectangle') {
    const length = parseFloat(lengthInput.value); // ดึงค่าความยาวและแปลงเป็นตัวเลข
    const width = parseFloat(widthInput.value);   // ดึงค่าความกว้างและแปลงเป็นตัวเลข

    // ตรวจสอบว่าค่าที่ป้อนถูกต้องหรือไม่
    if (isNaN(length) || isNaN(width) || length <= 0 || width <= 0) {
        resultArea.textContent = 'กรุณาป้อนค่าที่ถูกต้อง';
        return; // หยุดการทำงาน
    }

    // สูตร: ความยาว * ความกว้าง
    area = length * width;
}

- parseFloat(lengthInput.value): คำสั่งนี้มีความสำคัญมาก เพราะค่าที่ได้จากช่อง input ของ HTML จะเป็น ข้อความ (string) เสมอ เราจึงต้องใช้ parseFloat() เพื่อแปลงข้อความนั้นให้กลายเป็น ตัวเลขทศนิยม ก่อนนำไปคำนวณ
- isNaN(...): ฟังก์ชันนี้ใช้ตรวจสอบว่าค่าที่ได้มาเป็น Not a Number หรือไม่ (เช่น ถ้าผู้ใช้ป้อนตัวอักษร)
- length <= 0 || width <= 0: ตรวจสอบว่าผู้ใช้ป้อนค่าที่เป็นลบหรือศูนย์หรือไม่ เพราะความยาว/กว้างต้องเป็นบวกเท่านั้น
- area = length * width;: นี่คือสูตรคำนวณพื้นที่สี่เหลี่ยมผืนผ้าที่ง่ายและตรงไปตรงมา
ผลลัพธ์

jQuery & Ajax Knowledge-1.png (28.96 KiB) Viewed 78 times

การคำนวณพื้นที่วงกลม:

โค้ด: เลือกทั้งหมด

else if (selectedShape === 'circle') {
    const radius = parseFloat(radiusInput.value); // ดึงค่ารัศมีและแปลงเป็นตัวเลข

    // ตรวจสอบว่าค่าที่ป้อนถูกต้องหรือไม่
    if (isNaN(radius) || radius <= 0) {
        resultArea.textContent = 'กรุณาป้อนค่าที่ถูกต้อง';
        resultArea.style.color = '#c0392b';
        return;
    }

    // สูตร: π * r^2
    area = Math.PI * Math.pow(radius, 2); 
}

- Math.PI: เป็นค่าคงที่ใน JavaScript ที่เก็บค่า Pi (
pi) ที่มีความแม่นยำสูง
- Math.pow(radius, 2): เป็นฟังก์ชันที่ใช้ในการยกกำลัง โดยคำนวณค่า radius ยกกำลัง 2 (r
ผลลัพธ์

jQuery & Ajax Knowledge-2.png (24.14 KiB) Viewed 78 times

4. การจัดการกับฟอร์มและ Event Listener
โปรแกรมนี้ยังมีฟังก์ชันที่ช่วยจัดการการแสดงผลของฟอร์มให้ตรงกับรูปทรงที่เลือก และดักจับการกระทำของผู้ใช้

โค้ด: เลือกทั้งหมด

// 4. ฟังก์ชันจัดการการแสดงฟอร์มตามรูปทรงที่เลือก
function toggleForm() {
    const selectedShape = shapeSelect.value;
    if (selectedShape === 'rectangle') {
        rectangleForm.style.display = 'block'; // แสดงฟอร์มสี่เหลี่ยม
        circleForm.style.display = 'none';     // ซ่อนฟอร์มวงกลม
    } else if (selectedShape === 'circle') {
        rectangleForm.style.display = 'none'; // ซ่อนฟอร์มสี่เหลี่ยม
        circleForm.style.display = 'block';   // แสดงฟอร์มวงกลม
    }
    // ... รีเซ็ตผลลัพธ์ ...
    resultArea.textContent = '0 ตร.ม.';
}

// 5. เพิ่ม Event Listener เพื่อดักจับการกระทำของผู้ใช้
shapeSelect.addEventListener('change', toggleForm);
calculateBtn.addEventListener('click', calculateArea);

- toggleForm(): ฟังก์ชันนี้จะถูกเรียกใช้เมื่อผู้ใช้เปลี่ยนตัวเลือกใน dropdown (<select>) มันจะจัดการกับการแสดงผลของฟอร์มให้เหมาะสมด้วยการเปลี่ยนคุณสมบัติ display ของ CSS
- addEventListener(): เป็นเมธอดสำคัญที่ทำให้ JavaScript สามารถ "ฟัง" การกระทำของผู้ใช้ได้ เช่น เมื่อมีเหตุการณ์ change เกิดขึ้นกับ dropdown หรือเหตุการณ์ click ที่ปุ่ม จะให้ฟังก์ชันที่กำหนดไว้ทำงานทันที

สรุป
คุณได้เห็นแล้วว่าการใช้ JavaScript ในการสร้างโปรแกรมคำนวณพื้นที่นั้นไม่ได้ซับซ้อนอย่างที่คิด ด้วยโค้ดไม่กี่บรรทัด เราสามารถสร้างเครื่องมือที่ใช้งานได้จริงและมีประโยชน์ โค้ดที่เรียบง่ายแต่มีประสิทธิภาพนี้แสดงให้เห็นถึงความสามารถของ JavaScript ในการแก้ไขปัญหาในชีวิตประจำวันได้อย่างลงตัว แล้วสามารถนำแนวคิดเรื่องสูตรคำนวณพื้นที่ไปต่อยอดได้
ประโยชน์ที่คุณจะได้รับจากบทความนี้คือ:
- ความเข้าใจหลักการเขียนโปรแกรม: คุณได้เรียนรู้การใช้คำสั่งเงื่อนไข (if...else), การแปลงข้อมูล (parseFloat), การตรวจสอบความถูกต้องของข้อมูล (isNaN), และการใช้ฟังก์ชันทางคณิตศาสตร์ (Math.PI, Math.pow)
- ความสามารถในการสร้างเครื่องมือโต้ตอบ: คุณสามารถนำเทคนิคการดักจับเหตุการณ์ (addEventListener) และการจัดการกับ CSS ด้วย JavaScript ไปประยุกต์ใช้ในการสร้างเว็บไซต์ที่ตอบสนองต่อผู้ใช้ได้
- รากฐานในการต่อยอด: โค้ดนี้เป็นพื้นฐานที่ดีที่คุณสามารถนำไปพัฒนาต่อยอดได้ เช่น การเพิ่มการคำนวณรูปทรงอื่นๆ (เช่น สามเหลี่ยม) หรือ การแปลงหน่วย

อ้างอิง
- https://www.mindphp.com/คู่มือ/73-คืออะ ... -area.html
- https://www.mindphp.com/คู่มือ/73-คืออะ ... ออะไร.html
- https://www.mindphp.com/คู่มือ/73-คืออะ ... ออะไร.html
- viewtopic.php?t=106022
- viewtopic.php?t=80846