2009-01-22

ก่อนที่เราจะไปลองมือเรียนรู้ด้วยตัวอย่าง เรามาคุยกันก่อนครับว่า ความสามารถหลัก ๆ ของ jQuery นั้นมีอะไรบ้า่ง มันทำกับข้าวได้หรือเปล่า ???? หรือมันอะไรพิเศษ  ทำไมคนถึงใช้กันเยอะเหลือเกิน ลุยโล้ด

jQuery ทำอะไรได้บ้าง (What jQuery Does)

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

2009-02-03

• มันเข้าถึงทุกส่วนของหน้าเว็บเราแบบทันใจ (Access parts of a page) หมายความว่า เมื่อก่อน เราจะดึงข้อมูลจากในหน้าเว็บ ต้องอ้างอิงด้วย id หรือ เขียนเป็นโครงสร้างเป็นตอน ๆ ไปคล้าย ๆ กับต้นไม้อ่ะนะ เช่น ต้องการค่าของ tag ที่ต้องการ จะเขียนเป็น document.getElementById(‘xxx’).value   นี่ยาวเน้อ  แต่ถ้าเป็น jQuery มันจะแบ่งโครงสร้างของ  HTML เป็นตอน ๆ ช่วง ๆ แล้วแต่ลักษณะของ tag นั้น ๆ ครับ หมายความว่า ส่วนของ tag ก็เข้าถึงได้ ส่วนของ preperty ก็เข้าถึงได้  ซึ่งอันนี้ jQuery ได้มุ่งมั่น(robust)อาสา(offers)พาเราไปเองครับ เพราะเขาอยากให้เราเข้าถึงส่วนต่าง ๆ ไม่ว่าจะเป็นการตรวจสอบ(inspect) หรือจัดการปรับเปลี่ยน(manipulate) อย่างมีประสิทธิภาพ(efficient) และถูกต้องที่สุด(exactly)
• แก้ไขรูปร่างหน้าตาหรือการแสดงผลตามใจเรา  (Modify the appearance of a page) คุณสมบัติข้อนี้เดิมที CSS สามารถเข้ามาช่วยชูโรง เพื่อจะได้ให้แสดงผลสวยงาม พอที่จะดึงดูด(influence)ให้คนสนใจได้  แต่มันไม่เ็ป็นไปตามที่คาด(fall short)ครับ สาเหตุเพราะ browser ทุกตัวไม่ได้มองเห็น CSS เป็นรูปแบบมาตรฐาน ข้อนี้ท่านคงจะพอเคยเจออยู่บ้าง เช่นเข้าจาก firefox ปกติดีแต่แสดงผลกับ IE มีปัญหาหรือ IE ต่างเวอร์ชั่นกันนิดหน่อยก็มีปัญหาเสียแล้ว  แต่ไม่เป็นไร jQuery สามารถช่วยให้ช่องว่างนี้แคบลงได้ โดยการเตรียมรูปแบบให้เราสับเปลี่ยน css ไปมาให้เข้ากับ browser นั้น ๆ ได้  หรือกำหนดคุณสมบัติส่วนตัว(individual) ให้กับสิ่งแวดล้อมที่แตกต่างกันได้ อันนี้ประยุกต์ใช้ในด้านอื่น ๆ ได้เยอะเลยแหละ
• เปลี่ยนแปลงเนื้อหาได้ทันใจ(After the content of a page) หมายความว่า jQuery ไม่ได้จำกัดแค่ความสวยงามเท่านั้น มันสามารถแก้ไขเนื้อหาได้ด้วยการเคาะแป้นพิมพ์ครั้งสองครั้ง (few keystroke) (อยากรู้แล้วสิ ว่าจริงเปล่า)  ทำให้ข้อความเปลี่ยน  ภาพถูกอัพโหลดหรือเปลี่ยนไปมาได้ และรายการต่าง ๆ สามารถย้อนกลับไปมาได้ (โอ้วเทพ) หรือปรับโครงสร้างของ HTML ให้เขียนใหม่หรือยืดเข้า ยืดออกได้  สิ่งที่พูดมาทั้งหมดนี้สามารถทำได้โดย API ฮ่ะ
• ตอบสนองต่อปฏิกริยาของผู้ใช้ทันที(Respond to a user’s interaction with a page) เหตุการณ์ที่ซับซ้อนและพฤติกรรมมากมายต่าง ๆ ที่เกิดขึ้นในแต่ละหน้า ที่เราใช้งานหรือคนอื่นใช้นั้น จะไม่มีประโยชน์เลยถ้าเราไม่สามารถควบคุมมันได้ jQuery บอกว่าทำอย่างนี้ไม่ได้นะ เราต้องจัดการมัน(อันนี้เพิ่มเอาฮ่ะ) เลยอาสาจะพาเราไปจัดการเหตุการณ์ที่หลากหลาย(variety) เหล่านั้น อย่างเช่น (ตัวอย่าง งง ๆ ผมไม่เข้าใจเองแหละ ครับ เดี๋ยวไปทำความเข้าใจก่อนค่อยมาต่อให้)
• เพิ่มชีวิตชีวาให้เว็บเราได้ (Add animation to a page) สีสันอย่างหนึ่งที่มีในเว็บไซต์คือการที่เว็บเป็นลักษณะไดนามิก คือมีการเคลื่อนไหว ตอบสนองต่อผู้ใช้ และดูจะได้ผลดีด้วยถ้าเราทำได้แบบนั้น แน่นอนย่อมมีการเปลี่ยนแปลงข้อมูลให้ผู้ใช้ได้เสพตลอดเวลา เป็นการหนักมากครับสำหรับผู้ออกแบบ ถ้าปรับเปลี่ยนเองด้วยมือก็คงจะไม่ไหว ทั้งผู้ทำกราฟิกด้วยแฟลชและเนื้อหาบนเว็บ แต่ jQuery ก็ได้สร้างชุดข้อมูล( Array) เพื่อให้เราสะดวกมากขึ้น ช่วยได้เยอะเลย ด้วยการสร้างคุณสมบัีติสำเร็จรูปมาให้เราใช้งานด้านการเคลื่อนไหวต่าง ๆของข้อมูล เช่น การเลื่อน (fade) เลื่อนซ้าย-ขวา( scroll) เป็นต้น
• เรียกข้อมูลขึ้นมาแสดงทันทีโดยไม่ต้องรีเฟลชหน้านั้น ๆ(Retrieve information from a server without refreshing a page) สงสัยจะได้แปลไทยเป็นไทยครับพี่น้อง ก็หมายความว่า ถ้าเราจะเอาข้อมูลล่าสุดใน server ขึ้นมาแสดงก็ต้องกด F5 หรือ refresh หน้าจอใหม่ตลอด เพื่อให้มันไปดึงข้อมูลจาก server มาล่าสุด  ซึ่งตัว jQuery ตัวนี้ก็ได้รวบรวมเทคนิค ajax เข้ามาอยู่ด้วย เลยช่วยให้เราไม่ต้อง refresh หน้าจอครับ
• ทำคำสั่งยาก ๆ ทั่วไปของ javascript ให้ง่ายขึ้นเห็นทันตา (Simplify common Javascript tasks) ก็หมายความว่าเมื่อก่อนการใช้งานคำสั่ง javascript นั้นยากมาก ตัว jQuery เลยจัดการปรับเปลี่ยน เขียน library ขึ้นมาครอบบางคำสั่งให้มันง่ายขึ้นซะ อย่างเช่น การทำงานซ้ำ ๆ และการเข้าถึง array เป็นต้น ไว้จะบอกกล่าวกันในตัวอย่างฮ่ะ

ก็เอาเป็นว่าไว้แค่นี้ก่อนละกันครับ ไว้อ่านเล่มอื่น แปลถู ๆ ไถ่ ๆ เล่มอื่น แล้วถ้าเห็นว่ามันแปลกจากนี่จะมาเพิ่มให้ครับ  ถ้าแปลตกหล่น หรือมั่วก็ขอบอกกันบ้างเด้อ อย่าปล่อยให้ webmaster งมโข่งอยู่คนเดียวนะครับบบ  สงสัยอนาคตกลับมาอ่านคงจะมีฮากันบ้างล่ะ  ขอตัวไปทำบทความอื่นให้เสร็จก่อนนะครับ ขอบคุณที่ติดตามกันมา

เครดิต

E-book -> Learning jQuery