การใช้งาน Scientific Calculator ในภาษา Next.js แบบง่ายๆ

ขอต้อนรับเข้าสู่โลกของการเขียนโปรแกรมด้วย Next.js! ถ้าคุณกำลังมองหาโครงการที่น่าสนใจเพื่อพัฒนาทักษะการเขียนโปรแกรมของคุณ คุณมาถูกที่แล้ว! ในบทความนี้ เราจะไปสร้าง Scientific Calculator ง่ายๆ ด้วย Next.js ที่จะทำให้คุณได้เรียนรู้ทั้งพื้นฐานของการโปรแกรมและการทำงานของ Calculator ทางวิทยาศาสตร์ไปพร้อมกัน

ทำไมต้องใช้ Next.js?

Next.js เป็น framework ที่มีความง่ายในการใช้งานและมีฟีเจอร์ที่ช่วยในการพัฒนาเว็บแอปพลิเคชันอย่างรวดเร็ว เช่น, Server-Side Rendering (SSR) และ Static Site Generation (SSG) ซึ่งทำให้แอปพลิเคชันของคุณทำงานได้เร็วและมีประสิทธิภาพ

การเตรียมการ

ในการเริ่มต้นโครงการ Scientific Calculator นี้ ก่อนอื่นคุณต้องมั่นใจว่าคุณได้ติดตั้ง Node.js และ npm (Node Package Manager) บนเครื่องของคุณแล้ว จากนั้น มาสร้างโปรเจ็กต์ Next.js กันเถอะ!

1. เปิด command line หรือ terminal ขึ้นมา

2. รันคำสั่งต่อไปนี้เพื่อสร้างโปรเจ็กต์ Next.js ใหม่:

```bash

npx create-next-app scientific-calculator

```

3. เข้าไปยังโฟลเดอร์ของโปรเจ็กต์ที่เราเพิ่งสร้าง:

```bash

cd scientific-calculator

```

4. ติดตั้งไลบรารีที่จำเป็น (หากมี):

```bash

npm install

```

การสร้างหน้า Calculator

ในขั้นตอนนี้ เราจะสร้างหน้าคำนวณที่มีปุ่มและอินพุต เพื่อให้ผู้ใช้สามารถทำการคำนวณได้

สร้างไฟล์ Calculator.js

ไปที่โฟลเดอร์ `pages` แล้วสร้างไฟล์ใหม่ชื่อ `calculator.js` ในไฟล์นี้เราจะเขียนโค้ดเพื่อสร้างตัวคำนวณทางวิทยาศาสตร์

 // pages/calculator.js
import { useState } from 'react';

const Calculator = () => {
    const [input, setInput] = useState('');
    const [result, setResult] = useState('');

    const handleButtonClick = (value) => {
        setInput(input + value);
    };

    const calculateResult = () => {
        try {
            const evalResult = eval(input);
            setResult(evalResult);
        } catch (error) {
            setResult('Error');
        }
    };

    const clearInput = () => {
        setInput('');
        setResult('');
    };

    return (
        <div className="calculator">
            <h1>Scientific Calculator</h1>
            <input type="text" value={input} readOnly />
            <div className="result">{result}</div>
            <div className="buttons">
                <button onClick={() => handleButtonClick('1')}>1</button>
                <button onClick={() => handleButtonClick('2')}>2</button>
                <button onClick={() => handleButtonClick('3')}>3</button>
                <button onClick={() => handleButtonClick('+')}>+</button>
                <button onClick={() => handleButtonClick('-')}>-</button>
                <button onClick={() => handleButtonClick('*')}>×</button>
                <button onClick={() => handleButtonClick('/')}>÷</button>
                <button onClick={() => handleButtonClick('Math.sqrt(')}>√</button>
                <button onClick={() => handleButtonClick('Math.pow(')}>x²</button>
                <button onClick={calculateResult}>=</button>
                <button onClick={clearInput}>C</button>
            </div>
            <style jsx>{`
                .calculator {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                .buttons {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100px;
                }
                button {
                    margin: 5px;
                }
            `}</style>
        </div>
    );
};

export default Calculator;

อธิบายการทำงานของโค้ด

- เราใช้ `useState` เพื่อสร้างตัวแปร `input` และ `result` ซึ่งจะเก็บค่าอินพุตจากผู้ใช้และผลลัพธ์ตามลำดับ

- ฟังก์ชัน `handleButtonClick` จะทำการอัปเดตค่าของ `input` เมื่อผู้ใช้กดปุ่ม

- ฟังก์ชัน `calculateResult` จะทำการคำนวณค่าผลลัพธ์โดยการใช้ `eval()`, แต่ต้องบอกว่าการใช้ `eval()` มีความเสี่ยงต่อความปลอดภัย ดังนั้นเราควรระมัดระวังเมื่อใช้ในสถานการณ์จริง

- ฟังก์ชัน `clearInput` จะล้างค่าทั้งหมดจากอินพุตและผลลัพธ์

การนำไปใช้ในชีวิตจริง

ลองดูตัวอย่างการใช้ Scientific Calculator ในชีวิตจริง:

1. นักเรียนหรือนักศึกษา

ในการศึกษาฟิสิกส์หรือคณิตศาสตร์ นักเรียนมักจะต้องทำการคำนวณที่ซับซ้อน เช่น เพื่อหาค่าของสมการต่างๆ หรือการคำนวณที่เกี่ยวข้องกับทฤษฎีต่างๆ

2. วิศวกร

วิศวกรต้องใช้การคำนวณอย่างถูกต้องในการออกแบบและวิเคราะห์โครงสร้าง ผลิตภัณฑ์ หรือระบบต่างๆ ที่พวกเขาทำงาน ดังนั้นการใช้ Calculator จะช่วยให้พวกเขาทำงานได้อย่างมีประสิทธิภาพ

3. นักวิจัย

นักวิจัยจะต้องทำการวิเคราะห์ข้อมูลที่เกี่ยวข้องกับการศึกษาและค้นคว้า ซึ่งการคำนวณค่าต่างๆ ก็มีความสำคัญเช่นเดียวกัน

การทดสอบแอปพลิเคชัน

เมื่อคุณทำทุกอย่างเสร็จแล้ว ก็ถึงเวลาที่จะทดสอบแอปพลิเคชันของคุณ! เพียงแค่รันคำสั่งนี้ใน terminal:

 npm run dev

จากนั้นให้เปิดเบราว์เซอร์และเข้าไปที่ `http://localhost:3000/calculator` คุณจะเห็นหน้าคำนวณของคุณ!

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้าง Scientific Calculator ง่ายๆ ด้วย Next.js ซึ่งไม่เพียงแต่ทำให้คุณรู้จักการใช้งานฟังก์ชันพื้นฐานใน JavaScript แต่ยังทำให้คุณได้มีโอกาสฝึกฝนทักษะของคุณในหลายๆ ด้าน หากคุณสนใจและต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโปรแกรม สามารถเข้าไปศึกษาที่ EPT (Expert-Programming-Tutor) เพื่อพัฒนาทักษะการเขียนโปรแกรมของคุณให้เป็นมืออาชีพ!

เดี๋ยวก่อน! อย่าลืมแชร์บทความนี้กับคนอื่น ๆ ที่อาจต้องการเรียนรู้การเขียนโปรแกรมต่อด้วยนะ! 🚀

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