วันพฤหัสบดีที่ 17 กรกฎาคม พ.ศ. 2557

ภาษา JavaScript ฉบับผู้เริ่มต้น part 7

: Expressions กับการสร้างโปรแกรมเครื่องคิดเลขง่ายๆ

>> expression คืออะไรเหรอ?
ตอบ ถ้าจะให้เข้าใจคำนี้เพื่อนๆจะต้องรู้จักคำว่า statement เสียก่อน เจ้า statement ก็คือโค้ดต่างๆที่เพื่อนๆเขียนขึ้น โดยมากมักจะจบในหนึ่งบรรทัดหรือจวบกระทั่งปิดด้วยเครื่องหมาย ; (semicolon) ตัวอย่างเช่นการประกาศตัวแปร

var x = 10;

เราเรียกบรรทัดคำสั่งลักษณะนี้ว่า statement โดยเมื่อ statement ใดๆก็ตามเกิดการทำงานแล้วได้มาซึ่งผลลัพธ์หรือค่า เราก็จะเรียกมันว่า expression ตัวอย่างเช่น

var y = x + 20;

ทั้งหมดนี้ก็คือหนึ่ง statement โดยมี x + 20 เป็น expression นั่นเองครับ

>> แสดงว่า expression ก็คือการคำนวณ เช่นการบวกอย่างนั้นหรือ?
ตอบ นั่นเป็นความเข้าใจที่ถูกต้องครับ แต่ถ้าจะให้ดีกว่านี้ เราต้องทราบว่า expression ใดๆจะเกิดขึ้นได้ต้องผ่านการกระทำจากเหล่า Operator

>> แล้วเหล่า operator คืออะไร?
ตอบ ก็คือสัญลักษณ์ที่ใช้ในการคำนวณค่า ไม่ว่าจะเป็นทางคณิตศาสตร์หรือตรรกศาสตร์ โดยพื้นฐานประกอบด้วย
- Arithmetic Operators ได้แก่ +, -, *, / , %, ++, --
- Relational Operators ได้แก่ <, >, <=, >=, ==, !=
- Logical Operators ได้แก่ &&, ||

สัญลักษณ์ตัวไหนที่ไม่รู้จักในขณะนี้ก็ไม่ต้องไปสนใจครับ เลือกใช้และศึกษาเฉพาะตัวที่ใช่ไปก่อนได้ ในที่นี้ผมเลือกบวกกับลบ (+, -)

>> มาสร้างโปรแกรมเครื่องคิดเลขง่ายๆกันเถอะ!
: หัวใจสำคัญคือ วาดกล่องสามใบ กล่องใบแรกกับใบที่สองสามารถดึงค่าออกมาเพื่อนำไปกระทำการบวกหรือลบ โดยผลลัพธ์ที่ได้ให้แสดงยังกล่องใบที่สาม


1) ใช้แท็กของภาษา html สร้างเป็นกล่องรับค่าดังรูปครับ โดยแท็กชื่อ input กำหนดไทป์ของมันเป็น text แล้วตั้งชื่อ (id) ว่า x, y และ z ตามลำดับ
2) ใช้แท็ก button สร้างเป็นปุ่มสำหรับการบวกและลบ เพิ่มเหตุการณ์คลิกให้กับปุ่ม เพื่อให้ปุ่มสามารถไปเรียกฟังก์ชันในแท็ก script
3) ในแท็ก script คำสั่งของภาษาจาวาสคริปต์ที่ว่า document.getElementById จะให้ผลลัพธ์เป็นออบเจ็กต์ Element ของชื่อนั้นๆ (หรือก็คือของ id นั้นๆ) ออกมา ในที่นี้ผมตั้งชื่อว่า elementX, elementY และ elementZ ตามลำดับ
4) เปลี่ยนค่าไทป์สตริง (String type) เป็น float (คำนวณทศนิยมได้จ้า) ด้วยฟังก์ชันชื่อ parseFloat ทีนี้ก็จะได้ค่าของ x และ y ที่มีไทป์เป็น Number แล้ว
5) ให้ x และ y บวกกันถ้ากดปุ่มบวก หรือให้ x และ y ลบกันถ้ากดปุ่มลบ
6) นำผลลัพธ์ที่ได้ไปใส่ในกล่อง z เป็นอันเรียบร้อย

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

>> อ่านเพิ่มเติมเกี่ยวกับคำสั่ง document.getElementById และฟังก์ชัน parseFloat
- http://www.javascript-coder.com/javascript-form/getelementbyid-form.phtml
- http://www.w3schools.com/jsref/jsref_parsefloat.asp

ไม่มีความคิดเห็น:

แสดงความคิดเห็น