[สำหรับมือใหม่] มาสร้างแอปเครื่องคิดเลขบนเว็บกันเถอะ! คู่มือเริ่มต้นพัฒนาเครื่องคิดเลขแบบ Copy-Paste

หากต้องการเรียกใช้ Python ผ่าน Command Prompt หรือ PowerShell บนคอมพิวเตอร์ของคุณ คุณจำเป็นต้องดาวน์โหลดและติดตั้ง Python ก่อน
หากคุณยังไม่ได้ติดตั้ง กรุณาดูบทความ การติดตั้ง Python และการตั้งค่าสภาพแวดล้อมการพัฒนา เพื่อทำการติดตั้ง Python

"เพิ่งเริ่มเขียนโปรแกรม แต่ไม่รู้จะสร้างอะไรดี..."

สวัสดีครับ! เมื่อไม่กี่เดือนก่อน ผมก็เป็นคนหนึ่งที่ไม่มีความรู้ด้านการเขียนโปรแกรมเลยเหมือนกับทุกๆ คนครับ จากประสบการณ์ที่พยายามสร้างเว็บไซต์ 2 แห่งด้วยตัวเองโดยอาศัยความช่วยเหลือจาก AI ทำให้ผมตระหนักได้อย่างหนึ่งว่า "การได้ลงมือสร้างอะไรสักอย่างให้มันทำงานได้จริง คือทางลัดที่ดีที่สุด!"

ดังนั้น ในครั้งนี้ เราจะมาลองสร้าง "แอปเครื่องคิดเลข" ซึ่งเป็นโปรเจกต์ที่นิยมอย่างมากสำหรับผู้เริ่มต้นเรียนเขียนโปรแกรม โดยใช้เทคโนโลยีเว็บ (HTML, CSS, JavaScript) ไปพร้อมๆ กัน เป้าหมายของบทความนี้มีเพียงหนึ่งเดียวครับ

คือการทำให้คุณได้รับประสบการณ์แห่งความสำเร็จว่า "ฉันสร้างแอปที่ทำงานบนเบราว์เซอร์ได้จริงๆ แค่ก๊อปปี้แล้ววาง!"

ผมจะพยายามอธิบายศัพท์เทคนิคต่างๆ ให้เข้าใจง่ายที่สุด เอาล่ะครับ เรามาสนุกไปกับโลกแห่งการสร้างสรรค์ด้วยกันเลย!

ภาพหน้าจอของแอปเครื่องคิดเลขบนเว็บที่จะสร้างเสร็จ — เมื่อจบบทความนี้ คุณจะมีแอปเครื่องคิดเลขแบบนี้ทำงานอยู่บนเบราว์เซอร์ของคุณ!

ขั้นตอนที่ 1: สร้างโครงสร้างของเครื่องคิดเลขด้วย HTML

ก่อนอื่น เรามาสร้างส่วนที่เป็นโครงสร้างของเครื่องคิดเลขด้วย HTML กันครับ HTML เป็นภาษาที่ใช้กำหนด "โครงสร้าง" ของหน้าเว็บ เราจะเริ่มจากการวางส่วนประกอบต่างๆ เช่น หน้าจอแสดงผลและปุ่มกดกันครับ

โค้ด HTML ด้านล่างนี้ คือส่วนที่กำหนดส่วนประกอบทั้งหมดของเครื่องคิดเลขครับ

<!-- HTML: กำหนดโครงสร้างของเครื่องคิดเลข -->
<div class="calculator">
    <input type="text" class="display" id="display" readonly>
    <div class="buttons">
        <button onclick="clearDisplay()" class="clear">C</button>
        <button onclick="appendToDisplay('/')" class="operator">/</button>
        <button onclick="appendToDisplay('*')" class="operator">*</button>
        <button onclick="deleteLast()" class="operator">⌫</button>
        
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="appendToDisplay('-')" class="operator">-</button>

        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="appendToDisplay('+')" class="operator">+</button>

        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>
</div>

คำอธิบายโค้ด

<div class="calculator">: คือกล่องใหญ่ที่ครอบเครื่องคิดเลขทั้งหมด
<input type="text" id="display" readonly>: คือหน้าจอสำหรับแสดงตัวเลขและผลลัพธ์ การใส่ readonly ทำให้ไม่สามารถพิมพ์ข้อมูลจากคีย์บอร์ดได้โดยตรง
<div class="buttons">: คือกล่องสำหรับรวบรวมปุ่มทั้งหมดไว้ด้วยกัน
<button onclick="...">: คือปุ่มที่สามารถคลิกได้ ใน attribute onclick จะระบุฟังก์ชัน JavaScript (ที่เราจะสร้างในภายหลัง) ที่จะทำงานเมื่อปุ่มถูกกด

ณ จุดนี้ มันจะยังดูเป็นแค่ชิ้นส่วนที่ไม่มีทั้งดีไซน์และฟังก์ชันการทำงาน

ขั้นตอนที่ 2: ออกแบบหน้าตาด้วย CSS

ต่อไป เราจะใช้ CSS เพื่อออกแบบหน้าตาให้สวยงามครับ CSS เป็นภาษาที่ใช้สำหรับ "ตกแต่งหน้าตา" ของเว็บเพจ เราจะมาเพิ่มสีสันและจัดเลย์เอาต์ให้กับโครงสร้างที่เราสร้างด้วย HTML กันครับ

โค้ด CSS ด้านล่างนี้ คือส่วนที่กำหนดดีไซน์ของเครื่องคิดเลข

/* CSS: จัดรูปแบบหน้าตาของเครื่องคิดเลข */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}
.calculator {
    background-color: #444;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.display {
    width: 100%;
    height: 70px;
    background-color: #222;
    color: white;
    font-size: 2.5em;
    /* ...สไตล์อื่นๆ... */
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
button {
    height: 70px;
    font-size: 1.5em;
    border-radius: 10px;
    /* ...สไตล์อื่นๆ... */
}
.operator {
    background-color: #f0ad4e;
}
.clear {
    background-color: #d9534f;
}

คำอธิบายโค้ด

.calculator { ... }: ใช้กำหนดดีไซน์ของกล่องที่ชื่อ class="calculator" (เครื่องคิดเลขทั้งเครื่อง)
.display { ... }: เป็นดีไซน์ของหน้าจอแสดงผล เช่น ทำให้ตัวอักษรใหญ่ขึ้นและพื้นหลังเป็นสีดำ
.buttons { display: grid; ... }: นี่คือหัวใจของการจัดเลย์เอาต์! display: grid เป็นคุณสมบัติที่ทรงพลังสำหรับจัดเรียงปุ่มต่างๆ ในรูปแบบตารางเหมือนเซลล์ใน Excel ส่วน grid-template-columns: repeat(4, 1fr); คือคำสั่งว่า "ให้สร้าง 4 คอลัมน์ที่มีขนาดเท่าๆ กัน"
.operator และ .clear: ใช้สำหรับใส่สีพิเศษให้กับปุ่มที่มีชื่อคลาสตามที่กำหนดเท่านั้น

ขั้นตอนที่ 3: เติมชีวิตให้เครื่องคิดเลขด้วย JavaScript

สุดท้าย เราจะมาสร้าง "สมอง" ของเครื่องคิดเลขด้วย JavaScript ครับ JavaScript เป็นภาษาโปรแกรมที่ใช้เพิ่มการเคลื่อนไหวและฟังก์ชันการทำงานให้กับเว็บเพจ เราจะมากำหนดการทำงานที่เฉพาะเจาะจง เช่น เมื่อปุ่มถูกกดแล้วจะให้ทำอะไร

// JavaScript: ส่วนที่เป็นสมองของเครื่องคิดเลข
const display = document.getElementById('display');

function appendToDisplay(value) {
    display.value += value;
}

function clearDisplay() {
    display.value = '';
}

function deleteLast() {
    display.value = display.value.slice(0, -1);
}

function calculateResult() {
    try {
        const result = eval(display.value);
        if (result === undefined || result === null || isNaN(result)) {
            display.value = 'Error';
        } else {
            display.value = result;
        }
    } catch (error) {
        display.value = 'Error';
    }
}

คำอธิบายโค้ด

const display = ...: เป็นการดึงส่วนประกอบหน้าจอแสดงผลของ HTML มาเก็บไว้ในตัวแปรที่ชื่อ display
appendToDisplay(value): จะถูกเรียกใช้เมื่อปุ่มตัวเลขหรือสัญลักษณ์ถูกกด เพื่อเพิ่มอักขระใหม่เข้าไปในข้อความบนหน้าจอ
clearDisplay(): สำหรับปุ่ม "C" ใช้ล้างค่าบนหน้าจอให้ว่างเปล่า
calculateResult(): สำหรับปุ่ม "=" ใช้ฟังก์ชัน eval() ที่สะดวกมากในการคำนวณสูตรคณิตศาสตร์ (ที่เป็นข้อความ) บนหน้าจอ แล้วแทนที่ด้วยผลลัพธ์ ส่วน try...catch เป็นเหมือนคาถาป้องกันไว้แสดงข้อผิดพลาดเมื่อมีการป้อนสูตรที่คำนวณไม่ได้

ของแถม: โค้ดฉบับสมบูรณ์และวิธี "นำไปแสดงผล"

เอาล่ะครับ เมื่อนำโค้ด HTML, CSS และ JavaScript ทั้งหมดมารวมกันในไฟล์เดียว ก็จะได้เป็นเครื่องคิดเลขฉบับสมบูรณ์ที่ทำงานบนเบราว์เซอร์ และหากคุณอยากจะนำโค้ดสุดเจ๋งนี้ไปให้ใครดูหรืออยากจะแนะนำในบล็อกของคุณ เราได้เตรียมทั้ง "โค้ดฉบับสมบูรณ์" และ "โค้ดที่ผ่านการ escape สำหรับนำไปแสดงผล" ไว้ให้แล้ว

💡 ฉบับสมบูรณ์ (คัดลอกไปเซฟเป็น .html แล้วใช้ได้เลย)

คัดลอกโค้ดทั้งหมดนี้ไปวางในไฟล์ที่ชื่อว่า calculator.html แล้วเปิดด้วยเบราว์เซอร์ ก็จะเห็นเครื่องคิดเลขที่พร้อมใช้งานทันที

📜 สำหรับแสดงผล (สำหรับนำไปแปะในบล็อก)

ส่วนนี้คือโค้ดฉบับสมบูรณ์ด้านบนที่ผ่านการแปลง (escape) อักขระพิเศษอย่าง < หรือ > เพื่อให้สามารถแสดงผลบน HTML ได้อย่างปลอดภัย นำโค้ดนี้ไปแปะระหว่างแท็ก <pre><code> ในบทความบล็อกของคุณได้เลย

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เครื่องคิดเลขบนเว็บ</title>
    <style>
        /* CSS: จัดรูปแบบหน้าตาของเครื่องคิดเลข */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
            font-family: sans-serif;
            margin: 0;
        }
        .calculator {
            background-color: #444;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        .display {
            width: 100%;
            height: 70px;
            background-color: #222;
            color: white;
            text-align: right;
            font-size: 2.5em;
            padding: 10px;
            box-sizing: border-box;
            border: 2px solid #555;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        button {
            height: 70px;
            font-size: 1.5em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background-color: #e9e9e9;
            color: #333;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #ddd;
        }
        .operator {
            background-color: #f0ad4e;
            color: white;
        }
        .operator:hover {
            background-color: #ec9a29;
        }
        .clear {
            background-color: #d9534f;
            color: white;
        }
        .clear:hover {
            background-color: #c9302c;
        }
    </style>
</head>
<body>

    <!-- HTML: กำหนดโครงสร้างของเครื่องคิดเลข -->
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()" class="clear">C</button>
            <button onclick="appendToDisplay('/')" class="operator">/</button>
            <button onclick="appendToDisplay('*')" class="operator">*</button>
            <button onclick="deleteLast()" class="operator">⌫</button>
            
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('-')" class="operator">-</button>

            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('+')" class="operator">+</button>

            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

            <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
            <button onclick="appendToDisplay('.')">.</button>
        </div>
    </div>

    <script>
        // JavaScript: ส่วนที่เป็นสมองของเครื่องคิดเลข
        const display = document.getElementById('display');

        function appendToDisplay(value) {
            display.value += value;
        }

        function clearDisplay() {
            display.value = '';
        }

        function deleteLast() {
            display.value = display.value.slice(0, -1);
        }

        function calculateResult() {
            try {
                // 'eval' จะประเมินผลสตริงเป็นนิพจน์ทางคณิตศาสตร์
                // ไม่แนะนำให้ใช้ในเว็บไซต์จริงเนื่องจากข้อกังวลด้านความปลอดภัย
                // แต่สำหรับตัวอย่างที่สมบูรณ์ในตัวเองนี้ มันง่ายและมีประสิทธิภาพ
                const result = eval(display.value);
                if (result === undefined || result === null || isNaN(result)) {
                    display.value = 'Error';
                } else {
                    display.value = result;
                }
            } catch (error) {
                display.value = 'Error';
            }
        }
    </script>

</body>
</html>

[สำหรับมือใหม่] มาสร้างแอปเครื่องคิดเลขบนเว็บกันเถอะ! คู่มือเริ่มต้นพัฒนาเครื่องคิดเลขแบบ Copy-Paste

ขั้นตอนที่ 1: สร้างโครงสร้างของเครื่องคิดเลขด้วย HTML

คำอธิบายโค้ด

ขั้นตอนที่ 2: ออกแบบหน้าตาด้วย CSS

คำอธิบายโค้ด

ขั้นตอนที่ 3: เติมชีวิตให้เครื่องคิดเลขด้วย JavaScript

คำอธิบายโค้ด

ของแถม: โค้ดฉบับสมบูรณ์และวิธี "นำไปแสดงผล"

💡 ฉบับสมบูรณ์ (คัดลอกไปเซฟเป็น .html แล้วใช้ได้เลย)

📜 สำหรับแสดงผล (สำหรับนำไปแปะในบล็อก)

เทมเพลตที่เกี่ยวข้อง