เนื้อหา

• ที่จะก้าว
• ส่วนที่ 1 ของ 4: การทำความเข้าใจรหัส
• ส่วนที่ 2 จาก 4: โค้ดมาตรฐานสำหรับเครื่องคำนวณ HTML
• ส่วนที่ 3 จาก 4: ทำเครื่องคิดเลขของคุณเอง
• ส่วนที่ 4 จาก 4: ใช้เครื่องคิดเลขของคุณ
• เคล็ดลับ

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

ที่จะก้าว

ส่วนที่ 1 ของ 4: การทำความเข้าใจรหัส

1. เรียนรู้ว่าแต่ละฟังก์ชัน HTML ทำหน้าที่อะไร รหัสที่คุณจะใช้ในการสร้างเครื่องคิดเลขของคุณประกอบด้วยไวยากรณ์หลายประเภทที่กำหนดองค์ประกอบต่างๆของเอกสารร่วมกัน คลิกที่นี่เพื่อดูคำอธิบายเกี่ยวกับกระบวนการนี้หรืออ่านเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับโค้ดแต่ละบรรทัดที่คุณจะใช้สร้างเครื่องคิดเลข
   • html: บิตของไวยากรณ์นี้จะบอกส่วนที่เหลือของเอกสารว่าจะใช้ภาษาใดในโค้ด มีหลายภาษาในการเขียนโค้ดและในกรณีนี้ html> ทำให้ชัดเจนกับส่วนที่เหลือของเอกสารที่มีอยู่ - คุณเดาได้ - html
   • ศีรษะ: บอกเอกสารว่าทุกอย่างหลังจากนั้นคือข้อมูลเกี่ยวกับข้อมูลหรือที่เรียกว่า "ข้อมูลเมตา" โดยทั่วไปคำสั่ง head> จะใช้เพื่อกำหนดองค์ประกอบโวหารของเอกสารเช่นชื่อเรื่องหัวเรื่อง ฯลฯ คิดว่ามันเป็นร่มที่ส่วนที่เหลือของโค้ดถูกกำหนดไว้
   • หัวข้อ: ชื่อเอกสารของคุณระบุไว้ที่นี่ แอตทริบิวต์นี้ใช้เพื่อระบุชื่อของเอกสารเมื่อเปิดในเบราว์เซอร์ HTML
   • ร่างกาย bgcolor = "#": แอตทริบิวต์นี้กำหนดสีของพื้นหลังของหน้า HTML และเนื้อหา ตัวเลขภายในสตริงเครื่องหมายคำพูดและหลัง # จะตรงกับสีที่ระบุ
   • text = "": ไวยากรณ์นี้กำหนดสีของข้อความของเอกสาร
   • ชื่อฟอร์ม = "": แอ็ตทริบิวต์นี้ระบุชื่อของฟอร์มและใช้เพื่อสร้างโครงสร้างของสิ่งที่จะเกิดขึ้นต่อไปตามสิ่งที่ Javascript รู้ถึงความหมายของชื่อฟอร์ม ตัวอย่างเช่นชื่อฟอร์มที่เราจะใช้คือ "เครื่องคิดเลข" ซึ่งเราจะใช้เพื่อสร้างโครงสร้างเฉพาะสำหรับเอกสาร
   • ประเภทอินพุต = "": นี่คือสิ่งที่เกิดขึ้น แอตทริบิวต์ "ประเภทการป้อนข้อมูล" จะบอกตัวแยกวิเคราะห์ของเอกสารว่ามีข้อความประเภทใดอยู่ในค่าระหว่างเครื่องหมายคำพูด ตัวอย่างเช่นอาจเป็นข้อความรหัสผ่านปุ่ม (เช่นเดียวกับเครื่องคิดเลข) เป็นต้น
   • ค่า = "": คำสั่งนี้จะบอกตัวแยกวิเคราะห์ของเอกสารว่ามีอะไรรวมอยู่ในประเภทอินพุตด้านบน สำหรับเครื่องคิดเลขนี่คือตัวเลข (1-9) และการดำเนินการ (+, -, *, /, =)
   • onClick = "": ไวยากรณ์นี้อธิบายเหตุการณ์ที่ระบุว่าควรทำบางอย่างเมื่อคลิกปุ่ม สำหรับเครื่องคิดเลขเราต้องการให้จดจำข้อความในแต่ละปุ่มด้วยเช่นกัน ดังนั้นก่อนปุ่ม "6" ให้ใส่ document.calculator.ans.value + = "6" ไว้ระหว่างเครื่องหมายคำพูด
   • br: แท็กนี้สร้างบรรทัดใหม่ในเอกสารเพื่อให้ข้อความ (หรืออย่างอื่น) ถูกวางไว้ข้างหลังบนบรรทัดอื่น
   • / form, / body และ / html: คำสั่งเหล่านี้เป็นตัวปิดสำหรับคำสั่งที่เกี่ยวข้องที่เปิดไว้ก่อนหน้านี้ในเอกสาร

ส่วนที่ 2 จาก 4: โค้ดมาตรฐานสำหรับเครื่องคำนวณ HTML

1. คัดลอกโค้ดด้านล่าง เลือกข้อความในกรอบด้านล่างโดยกดปุ่มซ้ายของเมาส์ค้างไว้แล้วลากเคอร์เซอร์จากด้านล่างซ้ายของกล่องไปทางขวาบนเพื่อให้ข้อความทั้งหมดเปลี่ยนเป็นสีน้ำเงิน จากนั้นกด "Command + C" บน Mac หรือ "Ctrl + C" บนพีซีเพื่อคัดลอกโค้ดไปยังคลิปบอร์ด

html> head> title> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "Calculator"> input type = "button" value = "1" onClick = "document Calculator.ans.value + = '1' "> ประเภทอินพุต =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> ประเภทอินพุต =" ปุ่ม "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> ประเภทอินพุต =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> ประเภทอินพุต =" ปุ่ม "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> ประเภทอินพุต =" ปุ่ม "value =" 5 "onClick =" document.calculator.ans.value + = '5' "> input type =" button "value =" 6 "onClick =" document.calculator.ans.value + = '6' "> ประเภทอินพุต =" button "value =" - "onClick =" document.calculator.ans value + = '-' "> ประเภทอินพุต =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> ประเภทอินพุต =" ปุ่ม "value =" 8 "onClick =" document.calculator.ans.value + = '8' "> ประเภทอินพุต =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> ประเภทอินพุต =" button "value = " *" onClick = "document.calcul ator.ans.value + = ' *' "> ประเภทอินพุต =" button "value =" / "onClick =" document.calculator.ans.value + = '/' "> ประเภทอินพุต =" button "value =" 0 "onClick =" document.calculator.ans.value + = '0' "> ประเภทอินพุต =" รีเซ็ต "value =" รีเซ็ต "> ประเภทอินพุต =" ปุ่ม "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> การตอบกลับ isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

ส่วนที่ 3 จาก 4: ทำเครื่องคิดเลขของคุณเอง

1. เปิดโปรแกรมแก้ไขข้อความบนคอมพิวเตอร์ของคุณ มีหลายโปรแกรมให้ใช้ แต่เพื่อความง่ายเราจะใช้ TextEdit หรือ Notepad
   • บน Mac ให้คลิกแว่นขยายที่มุมขวาบนของหน้าจอเพื่อเปิด Spotlight เมื่อคุณไปถึงที่นั่นให้พิมพ์ TextEdit และคลิกที่โปรแกรม TextEdit ซึ่งตอนนี้ควรเลือกเป็นสีน้ำเงิน
   • บนพีซีให้เปิดเมนูเริ่มที่ด้านล่างซ้ายของหน้าจอ ในแถบค้นหาพิมพ์ Notepad และคลิกที่แอปพลิเคชัน Notepad ซึ่งจะปรากฏในแถบค้นหาทางด้านขวา
2. วางโค้ด HTML สำหรับเครื่องคิดเลขลงในเอกสาร
   • บน Mac ให้คลิกที่เนื้อหาของเอกสารแล้วกด Command + V. จากนั้นคลิกที่ รูปแบบ ที่ด้านบนสุดของหน้าจอแล้ว สร้างข้อความธรรมดา หลังจากวางรหัส
   • บนพีซีให้คลิกที่เนื้อหาของเอกสารจากนั้นเปิด Ctrl + V.
3. บันทึกไฟล์ คุณทำได้โดยใช้ "ไฟล์" ในเมนูหลักของหน้าต่างจากนั้นเลือกด้วย บันทึกเป็น... บนพีซีหรือ บันทึก ... บน Mac จากเมนูแบบเลื่อนลง
4. เพิ่มนามสกุล HTML ให้กับชื่อไฟล์ ในเมนู "บันทึกเป็น ... " พิมพ์ชื่อไฟล์ตามด้วย ".html" จากนั้นคลิก "บันทึก" ตัวอย่างเช่นหากคุณต้องการตั้งชื่อไฟล์นี้ว่า "เครื่องคำนวณเครื่องแรกของฉัน" ให้บันทึกไฟล์เป็น "My first Calculator.html"

ส่วนที่ 4 จาก 4: ใช้เครื่องคิดเลขของคุณ

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

เคล็ดลับ

• คุณสามารถรวมเครื่องคิดเลขนี้ไว้ในหน้าเว็บได้หากต้องการ
• คุณยังสามารถใช้สไตล์ HTML เพื่อเปลี่ยนรูปลักษณ์ของเครื่องคิดเลข