การตรวจสอบข้อมูลว่าเป็น number หรือไม่ใน JavaScript

number เป็น Data Type ชนิดหนึ่งใน JavaScript เป็นข้อมูลชนิดตัวเลข และเนื่องจากใน JavaScript มีเฉพาะ Number ไม่มี Integer ไม่มี Float ดังนั้นการเป็น Number จึงหมายถึงทั้ง จำนวนเต็มและทศนิยม ดังนั้นการ ตรวจสอบว่าค่าที่ได้นั้นเป็น Number รึเปล่าจึงหมายถึงทั้งจำนวนเต็มและเลขทศนิยม

เราสามารถใช้ function isNaN() ในการตรวจสอบว่าตัวแปรนั้นเป็น Number หรือไม่ แต่ค่าที่ได้จากฟังก์ชั่นจะเป็น false เมื่อค่าที่ส่งเข้าไปเป็นตัวเลข เนื่องจากชื่อ ฟังก์ชั่นย่อมาจาก is Not a Number แสดงว่าจะ return true เมื่อข้อมูลไม่ใช่ตัวเลข

ตัวอย่างการใช้งาน

หรือใช้ในการทำ Validation

เราสามารถนำเอา function นี้ไปประยุกต์ใช้งานได้อีกหลายๆรูปแบบที่เกี่ยวกับตัวเลข

การใช้งาน list.js สำหรับการ filter, search หรือ sort DOM Element

List.js เป็น Library สำหรับการ filter, search หรือ sort DOM Element เป็นการทำงานในฝั่งของ Client ไม่ต้องทำการส่งข้อมูลไป Query บน Server จะลดภาระของการทำงานในฝั่ง Server ลง โดยการใช้งาน List.js นั้นก็ไม่ยาก เพียงแค่เรากำหนด Class ใน Element ต่างๆให้ถูกต้อง เราก็มี textbox สำหรับการ Search และ ปุ่มสำหรับการ sort

ขั้นตอนการใช้งานมีดังนี้

1. เริ่มต้น Download List.js

2. ทำการสร้าง list ของรายการที่ต้องการ Search หรือ Sort ตามโครงสร้างนี้

ตามตัวอย่างนี้จะมี list อยู่ 2 รายการ

หลังจากนั้น new List ในส่วนของ JavaScript ต้องระวังว่าในส่วนของ JavaScript นั้นต้องถูก run หลังจากี่ Load DOM element ทั้งหมดแล้ว อาจใช้ $(document).ready() ใน jQuery หรือ เอา JavaScript วางไว้ด้านล่างหลังจาก </body>

ถ้าใน li มีแค่ name ใน valueNames ก็กำหนดแค่ name ก็ได้

ถือว่าเป็น library ที่น่าจะนำไปใช้งานได้ดีทีเดียว

การสร้าง Event ใน JavaScript

ในการทำงานเขียนเว็บจำเป็นต้องรู้เรื่องของ JavaScript เพื่อให้ หน้าเว็บของเราสามารถ Interact กับผู้ใช้งานได้ดี สิ่งที่หลีกเลี่ยงไม่ได้คือ การแทรก Event เข้าไปใน DOM Element เช่นการแทรก Event onclick เข้าไปใน ปุ่ม หรือ onmouseover ให้กับรูปภาพ โดยมีหลายวิธี ดังนี้

การ Bind Event โดย การกำหนด Attribute ให้กับ Element นั้นๆ เช่น

การ Bind Event ด้วยวิธีนี้มีข้อเสียหลายอย่าง

  • ส่วนที่เป็น JavaScript เข้ามาปะปนกับ HTML
  • ไม่สามารถแก้ไขชื่อ function ได้ เนื่องจากเราไม่รู้ว่ามี DOM Element ไหนที่เรียกใช้ function นี้บ้าง
  • เราจะไม่รู้ว่า function ไหนเป็น function ธรรมดา หรือเป็น Event กันแน่

นอกจากวิธีนี้แล้วเรายังมีวิธีในการ Bind Event แบบ JavaScript อีก 2 แบบ

1. การ Get Element ที่ต้องการ โดยใช้ document.getElementById() หรือ function อื่นๆในการ เลือก Element ที่ต้องการแล้วทำการกำหนด function ให้กับ event นั้นๆ

2. อีกวิธีจะเป็นการใช้ addEventListener

เราสามารถเลือกใช้งานได้ทั้ง 2 วิธีหลัง แต่ไม่แนะนำให้ Bind แบบแรก เนื่องจากจะทำให้ Code เราทำการแก้ไขได้ยาก

 

การใช้งาน instanceof ใน JavaScript

การใช้งาน instanceof ใน JavaScript จะใช้สำหรับการตรวจสอบว่า ตัวแปรตัวนั้น instantiate หรือ new object ขึ้นมาจาก Class นั้นรึเปล่า ดังนั้น instanceof จะเป็น operator ที่เราจะใช้ในการแยกว่า object ตัวนั้นเกิดจาก Class ใด เนื่องจากใน JavaScript ไม่มี keyword Class จึงทำให้ต้องทำการเปรียบเทียบกับ Constructor แทน ดูเพิ่มเติมในเรื่องของการสร้าง Constructor ได้ที่ Object Oriented กับ JavaScript ตอนที่ 1

โดย syntax ของการใช้ instanceof จะเป็นดังนี้

ตัวอย่างการใช้งาน

ดังนั้น เราจะสามารถรู้ได้ว่า o นั้นมาจาก Class ไหน มี method อะไร

นอกจากการใช้งาน instanceof ใน JavaScript แล้ว เรายังสามารถใช้กับ PHP ได้ด้วย Syntax ที่ใช้ก็เหมือนกัน

Object Oriented กับ JavaScript ตอนที่ 2

จากที่เราได้เรียนรู้วิธีการประกาศ Class , การสร้าง Constructor และการกำหนด Property ให้กับ Object กันมาแล้ว ใน Object  Oriented กับ JavaScript ตอนที่ 1

ต่อไปเราจะพูดถึงการสร้าง method ให้กับ Class ของเรา โดยเราจะใช้ keyword prototype ซึ่งเราสามารถย้อนกลับไปอ่านเรื่องของการใช้งาน prototype ใน JavaScript ได้ที่การ Casting ใน JavaScript ในบทความนี้เราจะทำเรื่องของการใช้ prototype มาประยุกต์ใช้งาน โดยถ้าเราอยากให้ Method หรือ function อยู่ภายใน Object ใด เราจะใช้การกำหนดให้เป็น function ใน prototype ของ Object นั้น เช่น

เวลาเราจะทำการเรียกใช้เราก็จะ new object Person ขึ้นมาแล้วเรียก method say Hello ได้เลย

นอกนี้เรายังสามารถทำให้ sayHello() กลายเป็น Chain method เหมือนใน jQuery ได้โดยทำการ return this ออกมา

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการสร้างและการใช้งาน Chain Method ได้ใน ารสร้าง Chain method ใน PHP

Object Oriented กับ JavaScript ตอนที่ 1

การเขียน JavaScript เราสามารถทำให้เป็น Objet Oriented ได้ แต่เนื่องจากตัว Syntax ของ JavaScript จะแตกต่างจาก Object Oriented ในภาษาอื่นๆ ดังนั้นเราจึงต้องมาเรียนรู้ความแตกต่างของการเขียน Object Oriented ใน JavaScript กัน

เริ่มจากใน JavaScript ไม่มี Class แล้วเราจะเขียน Object Oriented ได้ยังไง คำตอบคือ เราก็ไม่ต้องสร้าง Class เสมือนว่ามันมีอยู่แล้ว เช่นเราสร้าง function ขึ้นมาสำหรับเรื่องของการจัดการ Stock เราก็จะแยกไฟล์ JavaScript มาอีกไฟล์นึงแล้วตั้งชื่อเป็น Person.js แล้วถือเสมือนว่านี่เป็น Class ที่เราสร้างขึ้น หลังจากนั้นตังชื่อฟังก์ชั่นที่เหมือนกับชื่อไฟล์  แล้วมองว่านี่เป็น Constructor ของ Class เช่น

 

ถ้าเราต้องการกำหนดค่าตัวแปรให้กับ Constructor ก็ต้องทำการกำหนดค่าให้กับ property โดยใช้   this.ชื่อตัวแปร

 

หลังจากนั้นถ้าเราต้องการสร้าง property ของ Object เราก็จะทำการสร้างตัวแปรไว้ใน Constructor หรือ ประกาศตัวแปรไว้เฉยๆก็ได้ เช่น

สิ่งที่เราได้จากการ Instantiate หรือ new object ขึ้นมาเราจะได้ instance ของ Object เป็น JSON ที่มี type เป็น Person เพราะ JSON ก็เป็น object อยู่แล้ว นี่ก็เป็นความแปลกอีกอย่างของ JavaScript คือเราสามารถสร้าง Object ได้เลยโดยที่ไม่ต้องมี Class

ต่อไปเราจะพูดถึงการสร้าง Method ให้กับ Class ที่เรามี ในตอนที่ 2

 

 

การใช้งาน classList ใน HTML5


หลังจากพักร้อนไปจากการเขียนบทความหลายเดือน วันนี้ได้ฤกษ์กลับมาเขียนอีกรอบวันนี้จะมาว่าในเรื่องของการใช้งาน classList ที่มากับ HTML5 อยู่ในหมวดของ Nuts and Bolts

ถ้าเรามีโจทย์ว่าต้องการทำการเพิ่มหรือลบ class ออกจาก element ใดๆ แน่นอนเราต้องนึกถึง methods addClass() หรือ removeClass() ใน jQuery แน่นอน ซึ่งถ้าเราใช้งาน jQuery อยู่ก็คงจะไม่มีปัญหาใดๆ แต่ถ้าในกรณีที่เราไม่ได้ใช้งาน jQuery เราอาจเลือกการใช้งาน classList แทนได้ ซึ่งการใช้งาน clasList ตัวนี้จะแตกต่างจากการใช้งาน jQuery เนื่องจากเป้น native JavaScript (ไม่ต้องใช้ library ใดๆ) แต่ก็แน่นอนการใช้งาน classList  จะไม่สามารถใช้งานได้ใน IE 6,7,8 แต่ถ้าในกรณีที่เราใช้งานบน mobile เราก็ไม่ต้องไปเรียกใช้ jQuery โดยเฉพาะพวกที่อยู่ค่าย Sencha Touch คงจะไม่ต้องไปเอา jquery เข้ามาเพื่อใช้งาน addClass() หรือ removeClass() อย่างเดียวแน่นอน

การใช้งาน classList จะประกอบไปด้วย method ต่างๆ ดังนี้

1
2
3
4
5
6
7
8
{
length: {number}, /* จำนวนของ class ที่ add เข้ามาใน element นั้น */
add: function() { [native code] }, /* เพิ่ม class ให้กับ element */
contains: function() { [native code] }, /* ตรวจสอบว่า element มีการ add class นั้นเข้ามาหรือไม่ */
item: function() { [native code] }, /* reference ถึง class โดย index */
remove: function() { [native code] }, /* remove class ออกจาก element */
toggle: function() { [native code] } /* ทำการ toggle class */
}

ซึ่งในตัวอย่างที่เขียนในรูปนี้จะเป็นการเขียนแบบยาวเพื่อให้เห็นการใช้งาน method ต่างๆของ classList ซึ่งเราสามารถเขียน สั้นๆเพียงบรรทัดเดียวได้ ดังนี้

1
2
3
4
5
document.querySelector('div').onclick = function(){

this.classList.toggle('active');

}

ใครที่เคยใช้ jQuery อยู่แล้วน่าจะหยิบไปใช้ได้เลยเพราะเหมือนกันมากๆ

ลองเข้าไปดู sourcecode ได้ที่ http://jsfiddle.net/irobust/hVbUp/