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

เผยแพร่แล้ว: 2021-01-02

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

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

เรามาเริ่มกันเลยไหม?

สารบัญ

ตรรกะก่อนสิ่งอื่นใด

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

เครื่องคิดเลขทำงานอย่างไร

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

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

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

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

การจัดการโครงการ: กุญแจสู่การสร้างรหัส

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

ก่อนที่คุณจะเริ่มสร้าง เครื่องคิดเลขโดยใช้ JavaScript คุณต้องมีสิ่งต่อไปนี้:

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

#1 เริ่มต้นใช้งาน HTML

ขั้นตอนแรกคือการทำให้มือของคุณสกปรกด้วย HTML เพื่อให้คุณได้สร้างโครงร่างสำหรับเครื่องคิดเลขของคุณ

มีปุ่มบนเครื่องคิดเลข 10 ปุ่ม ตั้งแต่ 0 ถึง 9 HTML มีหน้าที่สร้างคีย์สำหรับแต่ละหลัก

นอกเหนือจากนี้ คุณจะต้องใช้ HTML เพื่อสร้างคีย์แยกต่างหากสำหรับฟังก์ชันเลขคณิตต่างๆ เช่นกันเมื่อสร้าง เครื่องคิดเลขโดย ใช้ JavaScript

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

หน่วยภาพของเครื่องคิดเลขของคุณขึ้นอยู่กับ HTML และ CSS ทั้งหมด ซึ่งจำเป็นต้องสร้างปุ่มและรหัสโดยใช้ HTML

รหัสหม้อน้ำ

<!DOCTYPE html>

<html lang=”en”>

<head>

<ชุดอักขระ meta="UTF-8">

<ชื่อเมตา=”วิวพอร์ต” เนื้อหา=”ความกว้าง=ความกว้างของอุปกรณ์ มาตราส่วนเริ่มต้น=1.0″>

<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>

<title>เครื่องคิดเลข</title>

</head>

<body>

รหัสจริงสำหรับการสร้างเค้าร่างเครื่องคิดเลข

(

<!– เครื่องคิดเลข –>

<div class="เครื่องคิดเลข">

<!– แสดง –>

<input type=”text” class=”display” ปิดการใช้งาน>

<!– คีย์ –>

<div class="keys">

<!– ปุ่ม 4 แถว –>

<div class="row">

<button value=”7″>7</button>

<button value=”8″>8</button>

<button value=”9″>9</button>

<button value=”+” class=”operator”>+</button>

</div>

<div class="row">

<button value=”4″>4</button>

<button value=”5″>5</button>

<button value=”6″>6</button>

<button value=”-” class=”operator”>-</button>

</div>

<div class="row">

<button value=”1″>1</button>

<button value=”2″>2</button>

<button value=”3″>3</button>

<button value=”*” class=”operator”>*</button>

</div>

<div class="row">

<button value=”C” class=”operator”>C</button>

<button value=”0″>0</button>

<button value=”/” class=”operator”>/</button>

<button value=”=” class=”operator”>=</button>

</div>

</div>

</div>

<!– ตัวเครื่องคิดเลขสิ้นสุด –>

<script type=”text/javascript” src=”js/script.js”></script>

</body>

</html>

เรียนรู้: โครงการ Javascript 20 อันดับแรกใน Github สำหรับผู้เริ่มต้น

#2 สไตล์ด้วย CSS

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

แม้ว่า CSS แบบอินไลน์จะยอดเยี่ยมเมื่อต้องออกแบบและกำหนดสไตล์ให้กับแอปของคุณ แต่ก็อาจไม่เป็นมิตรกับ SEO นอกจากนี้ คุณยังสามารถใช้องค์ประกอบ CSS ภายนอกได้ด้วยการแท็กองค์ประกอบเหล่านั้นไปยังไดเรกทอรีรากเดียวกัน คุณยังสามารถใช้องค์ประกอบ CSS ภายในหรือองค์ประกอบที่ฝังอยู่ภายในแท็ก <style></style> ภายในส่วนหัว

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

(คุณสามารถสร้างรูปแบบต่างๆ ให้กับโค้ดนี้ได้หากต้องการ)

/* รูปแบบทั่วไป */

* {

ช่องว่างภายใน: 0;

ระยะขอบ: 0;

}

ตัว {

ความกว้าง: 100vw;

ความสูง: 100vh;

ล้น: ซ่อน;

จอแสดงผล: ดิ้น;

ปรับเนื้อหา: ศูนย์;

จัดรายการ: ศูนย์;

สีพื้นหลัง: #222831;

ตระกูลแบบอักษร: sans-serif;

}

/* สิ้นสุดรูปแบบทั่วไป */

/*เครื่องคิดเลข*/

.เครื่องคิดเลข {

ความกว้าง: 300px;

padding-ด้านล่าง: 15px;

รัศมีเส้นขอบ: 7px;

พื้นหลังสี: #000;

กล่องเงา: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);

}

/* สิ้นสุดรูปแบบเครื่องคิดเลข */

/* แสดง */

.แสดง {

ความกว้าง: 100%;

ความสูง: 80px;

เส้นขอบ: ไม่มี;

ขนาดกล่อง: เส้นขอบกล่อง;

ช่องว่างภายใน: 10px;

ขนาดตัวอักษร: 2rem;

สีพื้นหลัง: #00ff44;

สี: #000;

จัดข้อความ: ขวา;

ขอบบนซ้ายรัศมี: 7px;

ขอบบนขวารัศมี: 7px;

}

/* สิ้นสุดรูปแบบการแสดงผล */

/* แถว */

.แถว {

จอแสดงผล: ดิ้น;

justify-content: ช่องว่างระหว่าง;

}

/* สิ้นสุดลักษณะแถว */

/* ปุ่ม */

ปุ่ม {

ความกว้าง: 50px;

ความสูง: 50px;

รัศมีขอบ: 50%;

เส้นขอบ: ไม่มี;

เค้าร่าง: ไม่มี;

ขนาดตัวอักษร: 1.5rem;

สีพื้นหลัง: #222;

สี: #fff;

ระยะขอบ: 10px;

}

ปุ่ม: โฮเวอร์ {

เคอร์เซอร์: ตัวชี้;

}

/* สิ้นสุดรูปแบบปุ่ม */

/*โอเปอเรเตอร์*/

.ตัวดำเนินการ {

สีพื้นหลัง: #00ff44;

สี: #000;

}

/* สิ้นสุดรูปแบบตัวดำเนินการ */

#3 การเพิ่มฟังก์ชันการทำงานด้วย JavaScript

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

  • คุณจะต้องเรียกแท็ก HTML ที่คุณสร้างขึ้นสำหรับแต่ละฟังก์ชันโดยใช้ JavaScript คุณจะใช้ตัวเลือกเพื่อเรียกแต่ละอินพุตเหล่านี้และเก็บไว้ในตัวแปร สำหรับแต่ละฟังก์ชัน คุณจะต้องมีตัวแปร ตัวอย่างเช่น มีตัวแปรแยกสำหรับการแสดงผล ตัวเลข ฟังก์ชันการหักบัญชี และฟังก์ชันเท่ากับ สามารถใช้ฟังก์ชัน getElementbyID() ได้ในกรณีนี้
  • สมมติว่าคุณต้องการคำนวณ 20+30 อย่างง่าย คุณจะต้องเรียก 20 ก่อนโดยใช้วิธีการที่กล่าวมาข้างต้น ก่อนที่จะเรียก 30 และฟังก์ชันเลขคณิต คุณจะต้องเก็บค่าที่เรียกก่อนหน้านี้ว่า 20 ไว้ที่ไหนสักแห่ง รหัสของคุณควรทำให้มีที่ว่างสำหรับจัดเก็บตัวเลขชั่วคราวเพื่อให้การคำนวณทำได้ง่าย อาร์เรย์ว่างจะเก็บตัวเลขเป็นสตริง เมื่อคุณเพิ่มตัวเลขอื่นและฟังก์ชันเลขคณิตแล้ว โดยใช้ eval() คุณจะสามารถประเมินตัวเลขและรับคำตอบได้
  • เมื่อคุณคลิกที่ปุ่มในเครื่องคิดเลข คุณต้องการผลลัพธ์บางอย่าง ไม่ว่าจะแสดงหรือประเมินผล เพื่อจุดประสงค์นี้ คุณควรเพิ่มตัวฟังเหตุการณ์ในโค้ดของคุณ วิธีนี้จะทำให้ปุ่มต่างๆ ฟังการคลิก เมื่อคุณเพิ่มฟังก์ชันให้กับผู้ฟังเหตุการณ์ ฟังก์ชันเหล่านั้นจะทำงานตามเสียงคลิกโดยอัตโนมัติ
  • หน่วยแสดงผลควรคืนค่าของปุ่มที่คุณคลิก คุณสามารถใช้วัตถุ event.target เนื่องจากจะคืนค่าขององค์ประกอบที่เกิดเหตุการณ์ขึ้น ตัวอย่างเช่น คุณต้องการให้แสดงตัวเลข “1” ทันทีที่คุณคลิก สำหรับสิ่งนี้ คุณจะต้องเก็บตัวเลขไว้ในรูปแบบของตัวแปร การใช้ฟังก์ชัน "if" คุณจะเปรียบเทียบตัวแปรที่มีอยู่เพื่อระบุว่าเป็นศูนย์หรือไม่ ในกรณีที่เป็นศูนย์ คุณจะต่อท้ายสตริงว่างเพื่อไม่ให้ตัวเลขขึ้นต้นด้วยศูนย์ สุดท้าย คุณจะต้องเพิ่มเนื้อหาของคีย์ “1” ให้กับตัวแปรการแสดงผล ด้วยเหตุนี้ ทันทีที่ปุ่มตัวเลขทำงาน คุณจะเห็นเนื้อหาในกล่องแสดงผล
  • สุดท้ายนี้ คุณต้องสร้างฟังก์ชันที่จะช่วยนำการคำนวณทางคณิตศาสตร์ไปใช้กับตัวเลขที่แสดง ตรวจสอบให้แน่ใจว่า เครื่องคิดเลขของคุณใน JavaScript สามารถทำการคำนวณทางคณิตศาสตร์ได้อย่างง่ายดาย หากต้องการเปิดใช้งานฟังก์ชันนี้ คุณสามารถใช้ไวยากรณ์และเมธอดร่วมกันได้ เราได้ระบุรหัสสำหรับองค์ประกอบ JavaScript ด้านล่างสำหรับการตรวจสอบของคุณ

// เลือกปุ่มทั้งหมด

ปุ่ม const = document.querySelectorAll('button');

// เลือก <input type=”text” class=”display” disabled> องค์ประกอบ

const display = document.querySelector('.display');

// เพิ่ม eventListener ให้กับแต่ละปุ่ม

ปุ่ม.forEach (ฟังก์ชัน (ปุ่ม) {

button.addEventListener('คลิก' คำนวณ);

});

// คำนวณฟังก์ชัน

ฟังก์ชั่นคำนวณ (เหตุการณ์) {

// ค่าปุ่มที่คลิกปัจจุบัน

const clickedButtonValue = event.target.value;

ถ้า (clickedButtonValue === '=') {

// ตรวจสอบว่าหน้าจอแสดงผลไม่ว่างหรือไม่ ให้ทำการคำนวณเท่านั้น

ถ้า (display.value !== ”) {

// คำนวณและแสดงคำตอบเพื่อแสดง

display.value = eval (display.value);

}

} else if (clickedButtonValue === 'C') {

//เคลียร์ทุกอย่างที่แสดง

display.value = ”;

} อื่น {

// มิฉะนั้นจะต่อเข้ากับจอแสดงผล

display.value += clickedButtonValue;

}

}

ต้องอ่าน: อธิบายสถาปัตยกรรมและส่วนประกอบ Java

สรุป

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

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ Java การพัฒนาซอฟต์แวร์แบบฟูลสแตก โปรดดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์ – ความเชี่ยวชาญพิเศษด้านการพัฒนาแบบเต็มสแต็ก ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง , 9+ โครงการและการมอบหมาย, สถานะศิษย์เก่า IIIT-B, โครงการหลักในทางปฏิบัติ & ความช่วยเหลือด้านงานกับ บริษัท ชั้นนำ

ลงจอดบนงานในฝันของคุณ

สมัครใบรับรอง PG ที่เชื่อมโยงกับงานของ upGrad ในสาขาวิศวกรรมซอฟต์แวร์