วิธีสร้างเครื่องคิดเลขอย่างง่ายโดยใช้ HTML, CSS และ JavaScript

Maya Patel included in Programming Web Development Javascript Html Css

2023-09-06 613 words 3 minutes

Contents

วิธีที่ดีที่สุดในการเรียนรู้ JavaScript คือการสร้างโปรเจ็กต์ หากคุณต้องการเป็นนักพัฒนาเว็บที่ดี คุณต้องเริ่มสร้างโครงการโดยเร็วที่สุด คุณสามารถเริ่มต้นด้วยการสร้างโปรเจ็กต์ระดับเริ่มต้น เช่น เครื่องคิดเลขธรรมดา นาฬิกาดิจิทัล หรือนาฬิกาจับเวลา

ด้วยการใช้เทคโนโลยีเว็บพื้นฐาน เช่น HTML, CSS และ JavaScript เราสามารถสร้างเครื่องคิดเลขพื้นฐานที่สามารถดำเนินการทางคณิตศาสตร์เบื้องต้นได้อย่างง่ายดาย รวมถึงการบวก การลบ การคูณ และการหาร

คุณสมบัติของเครื่องคิดเลข

วัตถุประสงค์ของการดำเนินการนี้คือเพื่อสร้างเครื่องคิดเลขขั้นสูงที่มีความสามารถดังต่อไปนี้:

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

⭐It จะดำเนินการทศนิยม

เครื่องคิดเลขจะต้องแสดงค่าอนันต์เป็นผลลัพธ์เมื่อพยายามคำนวณผลลัพธ์ของการหารปริมาณใดๆ ด้วยค่าศูนย์

เครื่องมือค้นหาจะไม่ตอบกลับหากนิพจน์ที่ป้อนนั้นถือว่าไม่ถูกต้อง ตามภาพประกอบ การป้อน “5+\+9” จะไม่ให้ผลลัพธ์ใดๆ

ฟังก์ชั่น"Clear Screen"ช่วยให้สามารถลบเนื้อหาทั้งหมดบนจอแสดงผลได้ทันทีตามดุลยพินิจของคุณ

ซอร์สโค้ดที่ใช้ในการพยายามนี้สามารถเข้าถึงได้ผ่านทางพื้นที่เก็บข้อมูล GitHub ซึ่งให้สิทธิ์แก่คุณในการใช้งานโดยไม่เสียค่าใช้จ่ายภายใต้เงื่อนไขของใบอนุญาต MIT ในกรณีที่คุณต้องการตรวจสอบตัวอย่างการดำเนินงานของโครงการนี้ กรุณาเยี่ยมชมการสาธิตของเรา

ส่วนประกอบของเครื่องคิดเลข

เครื่องคิดเลขประกอบด้วยส่วนประกอบดังต่อไปนี้:

ชุดการดำเนินการทางคณิตศาสตร์ประกอบด้วยการบวกที่แสดงด้วยสัญลักษณ์ “+” การลบแสดงเป็น “-” การคูณระบุด้วย “*” และการหารแสดงด้วย “/”

ปุ่มตัวเลขและทศนิยมประกอบด้วยตัวเลขตั้งแต่ 0 ถึง 9 รวมถึงสัญลักษณ์จุดทศนิยม (.)

หน้าจอแสดงผลนำเสนอการแสดงนิพจน์ทางคณิตศาสตร์และผลลัพธ์ที่เกี่ยวข้องด้วยภาพ

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

ปุ่ม"คำนวณ"เป็นคำสั่งที่ประเมินนิพจน์ทางคณิตศาสตร์ที่ป้อนเข้าไป ซึ่งส่งผลให้ได้ค่าเอาต์พุตที่แสดงออกมา

โครงสร้างโฟลเดอร์ของโครงการเครื่องคิดเลข

ในการสร้างเว็บแอปพลิเคชันเครื่องคิดเลขแบบโต้ตอบ ให้สร้างไดเร็กทอรีหลักที่เรียกว่า"เครื่องคิดเลข"ไดเร็กทอรีนี้จะมีส่วนประกอบที่สำคัญต่างๆ เช่น ไฟล์ HTML, CSS และ JavaScript ชื่อของไฟล์เหล่านี้อาจเลือกได้ตามดุลยพินิจของคุณ อย่างไรก็ตาม การปฏิบัติตามหลักเกณฑ์การตั้งชื่อที่กำหนดไว้สำหรับไฟล์แต่ละประเภทจะต้องระมัดระวัง ตามหลักปฏิบัติทั่วไป ไฟล์ HTML ควรมีชื่อว่า"index.html"ในขณะที่ไฟล์ CSS ที่มาพร้อมกันควรมีป้ายกำกับว่า"styles.css"และไฟล์ JavaScript ควรเรียกว่า"script.js"โดยทั่วไปขอแนะนำให้ปฏิบัติตามมาตรฐานการตั้งชื่อ JavaScript และ HTML/CSS เพื่อให้มั่นใจถึงความสอดคล้องและอำนวยความสะดวกในการทำงานร่วมกันระหว่างนักพัฒนาได้อย่างราบรื่น

การเพิ่มโครงสร้างให้กับเครื่องคิดเลขโดยใช้ HTML

โปรดเปิดไฟล์ “index.html” และใส่โค้ด HTML ที่ให้มาสำหรับเครื่องคิดเลข ดังนี้:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
  <meta charset="utf-8">
  <title>Simple Calculator using HTML, CSS and JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
 
<body>
 
<table class="calculator" >
  <tr>
    <td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
 
    <!-- clearScreen() function clears all the values -->
    <td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
  </tr>
  <tr>
    <!-- display() function displays the value of clicked button -->
    <td> <input type="button" value="1" onclick="display('1')" /> </td>
    <td> <input type="button" value="2" onclick="display('2')" /> </td>
    <td> <input type="button" value="3" onclick="display('3')" /> </td>
    <td> <input type="button" value="/" onclick="display('/')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="4" onclick="display('4')" /> </td>
    <td> <input type="button" value="5" onclick="display('5')" /> </td>
    <td> <input type="button" value="6" onclick="display('6')" /> </td>
    <td> <input type="button" value="-" onclick="display('-')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="7" onclick="display('7')" /> </td>
    <td> <input type="button" value="8" onclick="display('8')" /> </td>
    <td> <input type="button" value="9" onclick="display('9')" /> </td>
    <td> <input type="button" value="\+" onclick="display('\+')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="." onclick="display('.')" /> </td>
    <td> <input type="button" value="0" onclick="display('0')" /> </td>
 
    <!-- calculate() function evaluates the mathematical expression -->
    <td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
    <td> <input type="button" value="*" onclick="display('*')" /> </td>
  </tr>
</table>
 
<script type="text/javascript" src="script.js"></script>
 
</body>
 
</html>

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

จัดแต่งทรงผมเครื่องคิดเลขโดยใช้ CSS

โปรดเปิดไฟล์ “styles.css” และใส่โค้ด CSS ต่อมาเพื่อใช้เครื่องคิดเลขบนเว็บไซต์:

 @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

.calculator {
    padding: 10px;
    border-radius: 1em;
    height: 380px;
    width: 400px;
    margin: auto;
    background-color: #191b28;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
    font-family: 'Orbitron', sans-serif;
    background-color: #dcdbe1;
    border: solid black 0.5px;
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 65%;
}

#btn {
    background-color: #fb0066;
}

input[type=button] {
    font-family: 'Orbitron', sans-serif;
    background-color: #64278f;
    color: white;
    border: solid black 0.5px;
    width: 100%;
    border-radius: 5px;
    height: 70%;
    outline: none;
}

input:active[type=button] {
    background: #e5e5e5;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;
}

โค้ดที่ให้มาจะกำหนดแท็ก HTML ที่กำหนดเอง"calc"ซึ่งแสดงถึงอินเทอร์เฟซเครื่องคิดเลข รวมถึงปุ่มสำหรับการดำเนินการทางคณิตศาสตร์ต่างๆ เช่น การบวก การลบ การคูณ การหาร การล้าง และเท่ากับ นอกจากนี้ยังมีช่องป้อนข้อมูลสำหรับตัวเลขสองตัวและเครื่องหมายเท่ากับอีกด้วย ป้ายกำกับปุ่มจะแสดงที่ด้านบนของแต่ละปุ่มโดยใช้ตำแหน่งที่แน่นอนภายในองค์ประกอบ div ของตัวเองซึ่งมีการเสริมช่องว่างและรัศมีเส้นขอบ นอกจากนี้ ยังใช้คลาส CSS ของ Tailwind เช่น flex, px-4, py-2, rounded-md, bg-white, text-red-500, hover:bg-gray-100, focus:outline-none และการเปลี่ยนไปใช้สไตล์ ลักษณะของแท็ก calc สุดท้ายจะนำเข้าตระกูลฟอนต์ Orbitron จาก Google Fonts โดยใช้"@import

การเพิ่มฟังก์ชันการทำงานให้กับเครื่องคิดเลขโดยใช้ JavaScript

โปรดแก้ไขไฟล์ “script.js” ที่มีอยู่โดยรวมโค้ด JavaScript ที่ให้มา เพื่อปรับปรุงฟังก์ชันการทำงานของเครื่องคิดเลขพื้นฐานดังต่อไปนี้:

 // This function clears all the values
function clearScreen() {
    document.getElementById("result").value = "";
}
 
// This function displays the values
function display(value) {
    document.getElementById("result").value \+= value;
}
 
// This function evaluates the expression and returns the result
function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

ทำความเข้าใจโค้ด JavaScript

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

การหักล้างค่า

ฟังก์ชัน clearScreen() ใช้ตัวระบุขององค์ประกอบด้วย ID ที่ระบุ ซึ่งเรียกว่า"ผลลัพธ์"เพื่อเข้าถึง Document Object Model (DOM) และแก้ไขเนื้อหาโดยตั้งค่าเป็นสตริงว่าง กระบวนการนี้โดยทั่วไปเรียกว่าการจัดการ DOM ส่วนต่างๆ ของเว็บเพจอาจเข้าถึงและแก้ไขได้โดยใช้ตัวเลือก DOM ซึ่งเป็นโค้ดเฉพาะที่ระบุองค์ประกอบเฉพาะภายในลำดับชั้น DOM เพื่อวัตถุประสงค์ในการเปลี่ยนแปลงคุณสมบัติหรือเนื้อหา

 function clearScreen() {
    document.getElementById("result").value = "";
}

การแสดงค่า

การใช้งานฟังก์ชัน display() เกี่ยวข้องกับการเข้าถึง Document Object Model (DOM) ผ่านตัวระบุที่เกี่ยวข้องกับตัวเลือกที่เลือก จากนั้นจึงแนบค่าที่สอดคล้องกับองค์ประกอบที่ระบุภายใน DOM

 function display(value) {
    document.getElementById("result").value \+= value;
}

การประเมินการแสดงออก

ฟังก์ชัน คำนวณ() จะดึงค่าที่ประเมินของนิพจน์โดยการเข้าถึง Document Object Model (DOM) โดยใช้ตัวระบุขององค์ประกอบเฉพาะ จากนั้นจึงใช้ฟังก์ชัน eval() เพื่อประเมินนิพจน์ ต่อจากนั้น ผลลัพธ์ที่คำนวณได้จะถูกกำหนดใหม่ให้กับองค์ประกอบที่กำหนด

ฟังก์ชัน JavaScriptประเมิน() ทำหน้าที่ในการคำนวณนิพจน์ที่กำหนด ซึ่งจัดเตรียมไว้เป็นอินพุตของฟังก์ชัน และต่อมาให้ผลลัพธ์ที่ได้มาจากนิพจน์ดังกล่าว

 function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

พัฒนาโครงการการเขียนโปรแกรมที่ยอดเยี่ยม

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

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

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