การ propagation ของ javascript

propagation ตามความหมายในพจนานุกรมหมายถึงการแพร่พันธ์ ดังนั้นใน javascript ก็จะใช้ในลักษณะที่ใกล้เคียงกัน ดังในตัวอย่างนี้

เริ่มต้นจากการที่มี

ในตัวอย่งจะมี span วางอยู่บน p และ ทั้งสอง element นี้ก็วางอยู่บน div อีกทีนึง ดังนั้นการ propagation ก็จะเกิดขึ้น เมื่อไหร่ที่มีการ click ที่ element span ก็จะเกิดการแพร่พันธ์ของการ click ไปยัง p และ div ด้วย หมายถึงเรา click แค่ span แต่เหมือนเราได้ click ทั้ง span, p และ div พร้อมๆกัน ดังนั้นถ้าเราไม่ให้เกิดการ propagate ก็ให้ทำการใช้ คำสั่ง event.stopPropagation() ซึ่งจะต้องรับ event object เข้ามาก่อน ซึ่งในทุกๆ event จะมี event object ให้ใช้งานอยู่แล้ว ยกตัวอย่างเช่น

จากในตัวอย่างเรารับ parameter ของ function มาเป็น event เราก็เลยสั่งให้หยุดการ propagate ด้วย event.stopPpropagation(); ทำให้การ click ที่ span จะไม่ไปเรียก onclick ของ p และ div ขึ้นมาทำงาน ตรงกันข้ามถ้าเรา comment เอา event.stopPropagation() ออก ก็จะพบว่าเมื่อเรา click ที่ span จะมี pop up ขึ้นมา 3 ครั้ง เนื่องจาก event onclick ของ span, p และ div ถูกเรียกขึ้นมาใช้งานตามลำดับ

การใช้งาน closest() ใน jquery

การทำงานของ closest() จะเหมือนกับการทำงานของ function parents (ไม่ใช่ parent เฉยๆนะ เพราะจะหาแค่ ชั้นบนที่ติดตัวชั้นเดียวเท่านั้น เพราะ parent จริงๆแล้วหมายถึงพ่อแม่ ไม่รวมปู่กับย่า) แต่จะต่างกันตรงที่ถ้าใช้ parents() จะหาเฉพาะ ชั้นที่เป็นแม่ของมันเท่านั้น แต่จะไม่ได้สนใจว่า element ปัจจุบันนั้นเป็นอะไร แต่ถ้าเป็น closest() จะทำการเปรียบเทียบตัวมันเองก่อนแล้วถึงจะมองขึ้นไปยังแม่ของ element นั้นๆอีกที โดยที่ function closest() นั้นจะทำการ return element ที่มันต้องการเพียงแค่ element เดียวเท่านั้น

ตัวอย่าง

ถ้าเราอยากได้ parent ตัวแรกสุดที่เป็น ul ของ span ให้เขียนแบบนี้

การทำงานจะเริ่มจากการหา span แลัวไล่จาก span ขึ้นไปเรื่อยๆ จนกระทั่งเจอ ul แล้วก็หยุดทำงาน แต่ถ้า element ที่เราทำการเลือกใน selector เป็น ul อยู่แล้วก็จะไม่ได้ทำการค้นหาอะไรแล้วก็ return element ปัจจุบันออกไป

แล้วกรณีไหนที่ต้องการใช้งาน closest() เพราะปกติเราจะใช้ parents กันอยู่แล้ว คำตอบคือใช้ในกรณีที่ต้องการหาตัวแม่เพียงตัวเดียวเท่านั้น เพราะเมื่อเจอแล้วก็จะหยุดค้นหา แต่ถ้าเราเปลี่ยน code ใหม่เป็น parents แบบนี้

ผลลัพธ์ที่ได้คือ ul ทั้ง 2 level จะมีกรอบสีแดงทั้ง 2 element

เริ่มต้นเขียน ECMAScript 6 ด้วย Babel ตอนที่ 1

ก่อนเริ่มต้นทำความรู้จักกับ Babel มารู้จักกับ ECMAScript 6 หรือเรียกสั้นๆว่า ES6 เป็น Specification ของ JavaScript ตัวใหม่ซึ่งตัวปัจจุบันที่เราเขียนกันอยู่ทุกวันนี้จะเป็น ECMAScript 5 หรือ ES5 ซึ่งใน ES6 จะมี รูปแบบการเขียนที่ง่ายขึ้นกว่า ES5 ในปัจจุบัน และยังมีความเป็น Object-Oriented มากขึ้นด้วย

ทีนี้ปัญหาก็คือ Standard ยังไม่สมบูรณ์ Browser ในปัจจุบันนี้เลยยัง support แค่บางส่วน (เราสามารถที่จะติดตามความคืบหน้าของ JavaScript แบบ ES6 ได้ที่นี่) ดังนั้นถ้าเราใจร้อนอยากจะลองใช้ JavaScript แบบใหม่นี้ก็ต้องมีตัวช่วย ซึ่งก็จะเป็น Transpiler (หรือ Transcompiler มาจาก Transform + Compiler เป็นการ Compile จาก Source Code ไปเป็น Source Code)  ตัว Transpile ที่ได้รับความนิยมมากๆ ก็จะมี LiveScript, TypeScript, CofeeScript และ Babel

อีกทางเลือกนึงคือการใช้ Chrome canary ซึ่งเป็น Chrome Version ใหม่ที่ Suppport ES6 มากกว่า Chrome ปกติ (แต่ Chrome canary ยังไม่ Stable เท่ากับ Chrome ที่เราใช้กันอยู่ในปัจจุบัน)

คราวนี้มาทำความรู้จักกับ Babel กันบ้าง ในปัจจุบัน Babel จะเป็น Version 6.x ซึ่งสิ่งที่เปลี่ยนแปลงจาก Version 5 คือ จะไม่สามารถใช้ Babel แบบ in-browser ได้อีกแล้ว (เป็นการให้ Babel แปลง Javascript จาก ES6 เป็น ES5 ในฝัง Client ซึ่งข้อดีคือใช้งานง่ายไม่ต้องติดตั้งโปรแกรมอะไรเลย เพียงแต่เอาไฟล์ Babel.js เข้าไปวางใน Project เหมือนๆกับ JavaScript Library ทั่วๆไป แค่นั้นเอง แต่จะทำงานช้ากว่าการทำ Transpile) การใช้งาน Babel แบบ in-browser นั้นใช้ได้กับ Babel version ก่อน 5.8.x เท่านั้น

การตรวจสอบข้อมูลว่าเป็น 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 เราทำการแก้ไขได้ยาก

 

การใช้งาน try catch ใน JavaScript

ในการเขียนโปรแกรมเราจำเป็นจะต้องเชื่อมต่อกับระบบภายนอกเช่นการติดต่อกับ Database การอ่านไฟล์ การดึงข้อมูลผ่านทาง Web Services เราจึงไม่สามารถแน่ใจได้ว่าสิ่งที่เรากำลังจะไปเชื่อมต่อเหล่านั้นยังสามารถทำงานได้อย่างปกติหรือไม่ ดังนั้นในภาษายุคปัจจุบันจะมี try catch และ finally ให้ใช้ทุกภาษา การใช้งาน try catch จะมี Syntax ดังนี้

ในส่วนของ try จะเป็นส่วนที่มีโอกาสที่จะเกิด Exception ทั้ง Exception ที่เกิดจากข้อผิดพลาดของระบบเองหรือ Exception ที่เราตั้งใจที่จะทำการโยน(throw) มันออกมา

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

 

การใช้งาน 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