วิธีการ สร้างเครื่องคิดเลขด้วยโค้ด HTML

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

ส่วน 1

ส่วน 1 ของ 4:

รู้จักโค้ดที่จำเป็น

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
แต่ละฟังก์ชั่นของ html ใช้ทำอะไร. โค้ดที่จะใช้สร้างเครื่องคิดเลข จะประกอบด้วย syntax หลายๆ ส่วนที่ทำงานร่วมกัน แบ่งแยกองค์ประกอบต่างๆ ของไฟล์โค้ด ให้อ่าน บทความวิกิฮาวนี้ จะได้รู้วิธีการเขียนโค้ด HTML เบื้องต้น หรืออ่านต่อไปว่าแต่ละบรรทัดข้อความมีหน้าที่อะไรในโค้ดที่จะใช้สร้างเครื่องคิดเลข
- html : เป็น syntax ที่ใช้บอกทั้งไฟล์ว่าจะเขียนโค้ดด้วยภาษาอะไร มีภาษาสำหรับเขียนโค้ดหลายภาษาด้วยกัน ซึ่งพอพิมพ์ <html> จะเป็นการกำหนดแต่แรก ว่าไฟล์โค้ดนี้จะเขียนด้วยภาษา HTML ตรงไปตรงมาแบบนี้เลย! ^{[1]
  X
  แหล่งข้อมูลอ้างอิง}
- head : ถ้าโผล่มาเมื่อไหร่ ทุกอย่างต่อจากนั้นจะเป็นข้อมูลของข้อมูลอีกที หรือที่เรียกว่า "metadata" ปกติคำสั่ง <head> ใช้กำหนดสไตล์ของไฟล์ เช่น title, heading และอื่นๆ ให้นึกภาพว่าเป็นเหมือนร่มที่กางคลุมโค้ดที่เหลืออยู่ ^{[2]
  X
  แหล่งข้อมูลอ้างอิง}
- title : นี่คือชื่อไฟล์ เป็น attribute ที่ใช้กำหนดชื่อของไฟล์ที่จะเปิดในเบราว์เซอร์ html
- body bgcolor= "#" : attribute นี้จะกำหนดสีของพื้นหลังและเนื้อหาของโค้ด หมายเลขที่ตามหลัง # อยู่ในเครื่องหมายคำพูด จะเป็น โค้ดของสีที่จะใช้
- text= "" : ข้อความในเครื่องหมายคำพูดจะกำหนดสีของข้อความในโค้ด
- form name="" : attribute นี้ใช้กำหนดชื่อของ form ที่ใช้กำหนดโครงสร้างของอะไรที่ตามมา แล้วแต่ความหมายของ form ที่ Javascript รู้ เช่น form name ที่เราจะใช้ในที่นี้คือ calculator หรือเครื่องคิดเลข ซึ่งจะสร้างโครงสร้างเฉพาะให้โค้ดนี้ ^{[3]
  X
  แหล่งข้อมูลอ้างอิง}
- input type="" : ใช้กำหนดว่าจะให้ทำอะไร attribute "input type" ใช้บอกโค้ดว่า ค่า (values) ในวงเล็บที่เหลือ เป็นข้อความประเภทไหน เช่น เป็น text หรือข้อความ, เป็นรหัสผ่าน, ปุ่มกด (ของเครื่องคิดเลข) และอื่นๆ ^{[4]
  X
  แหล่งข้อมูลอ้างอิง}
- value="" : คำสั่งนี้ใช้บอกโค้ดว่า อะไรจะอยู่ใน input type ที่กำหนดไว้ด้านบน อย่างถ้าของเครื่องคิดเลข ก็ใช้แสดงตัวเลข (1 - 9) และเครื่องหมายทางคณิตศาสตร์ต่างๆ (+, -, *, /, =) ^{[5]
  X
  แหล่งข้อมูลอ้างอิง}
- onClick="" : syntax นี้ใช้อธิบาย event หรือเหตุการณ์ ที่จะบอกโค้ดว่าต้องมีอะไรเกิดขึ้นหลังกดปุ่ม ถ้าเป็นเครื่องคิดเลข ก็คือให้แสดงข้อความในแต่ละปุ่ม ผู้ใช้จะได้เข้าใจ เพราะงั้นถ้าเป็นปุ่ม "6" ก็ต้องพิมพ์ document.calculator.ans.value+='6' ในเครื่องหมายคำพูด ^{[6]
  X
  แหล่งข้อมูลอ้างอิง}
- br : แท็กนี้ใช้เริ่ม line break ในโค้ด ให้ทุกอย่างที่ตามมาต้องขึ้นบรรทัดใหม่ข้างล่าง ^{[7]
  X
  แหล่งข้อมูลอ้างอิง}
- /form, /body, and /html : เป็นคำสั่งใช้บอกโค้ดว่าคำสั่งที่กำหนดให้มีผลไป (ตามขั้นตอนข้างบน) ได้จบลงแล้ว ^{[8]
  X
  แหล่งข้อมูลอ้างอิง}
โฆษณา

ส่วน 2

ส่วน 2 ของ 4:

โค้ด HTML พื้นฐานสำหรับสร้างเครื่องคิดเลข

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

 < 
 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'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "2" 
 onClick 
 = 
 "document.calculator.ans.value+='2'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "3" 
 onClick 
 = 
 "document.calculator.ans.value+='3'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "4" 
 onClick 
 = 
 "document.calculator.ans.value+='4'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "5" 
 onClick 
 = 
 "document.calculator.ans.value+='5'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "6" 
 onClick 
 = 
 "document.calculator.ans.value+='6'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "7" 
 onClick 
 = 
 "document.calculator.ans.value+='7'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "8" 
 onClick 
 = 
 "document.calculator.ans.value+='8'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "9" 
 onClick 
 = 
 "document.calculator.ans.value+='9'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "-" 
 onClick 
 = 
 "document.calculator.ans.value+='-'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "+" 
 onClick 
 = 
 "document.calculator.ans.value+='+'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "*" 
 onClick 
 = 
 "document.calculator.ans.value+='*'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "/" 
 onClick 
 = 
 "document.calculator.ans.value+='/'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "0" 
 onClick 
 = 
 "document.calculator.ans.value+='0'" 
 > 
 < 
 input 
 type 
 = 
 "reset" 
 value 
 = 
 "Reset" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "=" 
 onClick 
 = 
 "document.calculator.ans.value=eval(document.calculator.ans.value)" 
 > 
 < 
 br 
 > 
Solution is < 
 input 
 type 
 = 
 "textfield" 
 name 
 = 
 "ans" 
 value 
 = 
 "" 
 > 
 </ 
 form 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >