25
Oct

javascript จิ๊บจ๊อย # 5 ว่าด้วย Operator

Category: Blog / 5,027 views

กลับมาแ้ล้วครับสำหรับบทเรียน javascript ต้องขออภัยที่ห่างหายไปนาน เนื่องจากต้องโฟกัสกับงานที่ได้รับมอบหมายครับ เอาละ ไม่พูดพร่ำทำเพลงครับ ฮ่าๆ จากบทที่ผ่านมาๆเราก็ได้เห็นวิธีการสร้างตัวแปร และการเก็บค่าต่างๆของ javascript แล้วนะครับ ทีนี้เรามารู้จัก Operator กันดีกว่า  Operator ใช้กับตัวแปร (variables) และ ค่า (value) ครับ ผมว่ามาดูรายละเอียดกันดีกว่า จะได้เข้าใจมากขึ้น

 

Arithmetic Operators

เจ้าตัวนี้น่าจะเป็น Operator ที่ใช้งานบ่อยมากที่สุดแล้วแหล่ะครับ มันเป็น Operator ที่เกี่ยวข้องกับวิชาคณิตศาสตร์ ที่เราๆเรียนกันตั้งแต่สมัย ป. สอง กระมัง ฮ่าๆ

ตัวอย่างครับ

[codesyntax lang=”javascript”]

var 	four = 2+2, // addition operator
   	hour=24-13 , // substract operator
  	ten = 2*5 , // multiplication operator
  	avg = 8/4, // division operator
 	remainder = 31%2, //modulus operator
 	msg = "the time is" + hour + "o'clock"; // adition orperator used on strings
alert(four);
alert(msg);
alert(remainder);

[/codesyntax]

จากตัวอย่างด้านบน เราจะเห็นว่า เราสามารถทำการ บวก ลบ คูณ หารเอาเศษ  หารเอาส่วน ได้ครับ และแม้กระทั่งใช้สำหรับ “ต่อ” สตริงเข้าด้วยกันก็ยังได้  ตัวอย่างด้านบน ผมว่าคงจะมีอยู่ตัวหนึ่งที่ผู้อ่านอาจจะไมุ่้คุ้นเคย นั่นก็คือ % นั่นเอง สำหรับเจ้าตัวนี้ เราเรียกเป็นภาษาอังกฤษว่า Modulus Operator ครับ มันจะคืนผลลัพธ์ที่เป็น “เศษ” ที่ได้จากการหาร ครับ ยกตัวอย่างเช่น 17 หาร 3 มันจะได้คำตอบคือ 5 เศษ 2 ใช่ไหมครับ ดังนั้น ถ้าเราใช้ 17 % 3 ค่าที่เราจะได้ก็คือ  2 นั่นเอง (ได้ค่า เศษ) ครับ อย่างตัวอย่างด้านบนก็  remainder ที่ได้จาก 31%2 ก็คือ 1 นั่นเอง

Comparison Operator

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

ตัวอย่าง

[codesyntax lang=”javascript”]

alert(10<5); // false
alert(10>5); // true
alert(4<=3);// false
alert(4>=3);//true

[/codesyntax]

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

 

นอกจากนี้ เรายังสามารถนำมาเปรียบเทียบ สตริงได้ด้วยนะครับ ตัวอย่างเ่ช่น

[codesyntax lang=”javascript”]

alert("cat">"dog"); // false
alert("bacon">"chunks");// false
alert("cats">="cats");//true
alert("fishing"<="sleeping");//true
alert("cat" > "CAT"); // true

[/codesyntax]

 

ฮั่นแน่! หลายคนคงเกาหัวแกรกๆกันละสิครับ ว่ามันเปรียบเทียบกันได้ไงหว่า  เหตุที่มันเปรียบเีทียบกันได้ก็เพราะว่า ตัวอักษรแต่ละตัวจะมีรหัสอักขระ (character code) ของตัวเองอยู่ครับ ซึ่งเป็นตัวเลขอยู่ค่าหนึ่งที่ไม่ซ้ำกัน ดังนั้นเวลาเราเปรียบเทียบสตริง จริงๆแล้วมันก็คือการเอารหัสของพวกมันทีเ่ป็นตัวเลขนี่แหล่ะครับมาเปรียบเทียบ  มีอยู่ประเด็นหนึ่งที่อยากให้ตระหนักไว้นะครับ นั่นก็คือ “ตัวอักษรตัวใหญ่มีค่าน้อยกว่าตัวเล็ก” ครับ เนื่องมาจาก ตัวอักษรตัวใหญ่ทั้งหมด มาก่อนตัวเล็ก ดังนั้น “A” < “z” จึงได้ค่าเป็น “จริง”

อ้อ ไม่ใช่แค่ตัวอักษรเท่านั้นนะครับที่มี character code  จริงๆแล้วทุกๆอย่างที่เราพิมพ์ลงไปในคอมพิวเตอร์เนี่ย มันก็มีรหัสของมันครับ เช่น Shift, Escape เป็นต้น

 

ทีนี้มาดูตัวอย่างนี้ครับ ดูซิว่าเราจะเปรียบเทียบกันได้หรือเปล่า? มันเท่ากันหรือเปล่านะ?

[codesyntax lang=”javascript”]

var a ="cat",
b="dog";

a=b // ผิดพลาดอย่างร้ายแรง!! นี่ไม่ใช่การเปรียบเทียบนะครับ!!

[/codesyntax]

อย่าได้เขียนแบบด้านบนนะครับ! เห็นหรือเปล่าครับว่า ทำไมเราถึงไม่สามารถใช้ = ในการเปรียบเทียบค่าแบบนั้นได้  การใช้เครื่องหมาย = หนึ่งครั้ง หมายความว่า ให้มันมี “ค่าเท่ากับ”  แต่ถ้าเราต้องการเปรียบเทียบ เราจะใช้เครือ่งหมายเท่ากับสามครั้ง (Tripple-equals operator) ครับ

ตัวอย่าง

[codesyntax lang=”javascript”]

var a ="cat",
b="dog";

alert(a===b); //false
alert(a==="cat");//true

[/codesyntax]

นี่ต่างหากครับ ที่เป็นการเปรียบเทียบ  ดังนั้น อย่าสับสนนะครับ

 

คุณอาจจะคิดว่า อ้าว “แล้วเครื่องหมายเท่ากับ สองอันละ? ทำไมต้องไปใช้สามอันหว่า?” อาฮะ เหตุผลที่ผมไม่แนะนำให้ใช้ double equals (==) ก็เพราะว่า พอเราใช้เครื่องหมายเท่ากับสองครั้ง โปรแกรมมันจะพยายามเปลี่ยนชนิดของตัวแปรของเราหนะครับ  ยกตัวอย่างเช่น 1===’1′ จะได้ค่า False แต่ถ้าใช้ 1==’1′ มันจะได้ค่า True เนื่องมาจากว่า double equals operator มันเปลี่ยนสตริง ‘1’ ให้เป็น ตัวเลข 1 หนะครับ ผมเลยไม่แนะนำให้ใช้ == ในการเปรียบเทียบสตริงครับผม ^^

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

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours