สวัสดีครับไอ้งั่งทั้งหลาย

ใครที่เห็นหัวข้อภาษาไทยแล้วนึกว่าเป็นความรู้เกี่ยวกับภาษาอินโดนิเซียโบราณแนะนำให้ท่านค้นหาข้อมูลใน google เพราะท่านไม่ใช่ไอ้งั่งของ Prototype js ครับ YtPb เป็นหนึ่งใน”ไอ้งั่ง” ที่นิยมชมชอบ Prototype js นี้ในการใช้งาน แล้วเห็นว่าใช้ดี จึงบอกต่อ

• อันดับแรกเลยที่ท่านต้องมีไว้คือเครื่องคอมพิวเตอร์ที่สามารถต่ออินเตอร์เนทได้
• สองคือความรู้ javascript และ DOM¹เบื้องต้น
• สามคือเวลาในการศึกษาทำความเข้าใจ
• สี่ วาจานั้นต้องสุภาพอ่อนหวาน
• ห้า ยึดมั่นกตัญญู
• หก เป็นผู้รู้รักการงาน
• เจ็ด ต้องศึกษาให้เชี่ยวชาญ ต้องมานะบากบั่น ไม่เกียจ ไม่คร้าน
• แปด รู้จักออมประหยัด
• เก้า ต้องซื่อสัตย์ตลอดการ น้ำใจนักกีฬากล้าหาญ ให้เหมาะกับการณ์สมัยชาติพัฒนา
• สิบ ทำตนให้เป็นประโยชน์ รู้บาปบุญคุณโทษ สมบัติชาติต้องรักษา
• เด็กสมัยชาติพัฒนา จะเป็นเด็กดีพาชาติไทยเจริญ (เย้วๆ)

เริ่มกันซะที

Prototype js² เป็น javascript framework ที่ของเค้าดีจริงๆ เขียนขึ้นในลักษณะกึ่ง OOP มีเม็ดตอด (method) ใช้ในการจัดการธาตุ (elements)ต่างๆในเอกสาร (document) ไม่ว่าจะเป็นการเปลี่ยนสีเปลี่ยนขนดตัวหนังสือจนไปถึงการจัดการข้อมูลด้วย AJAX รายละเอียดดูได้ที่เชิงอรรถลำดับที่สอง
เอาล่ะ YtPb จะขอเข้าสู่เนื้อหาเลยแล้วกัน

การใช้งาน อรรถประโยชน์ $ และ $$ ($ and $$ utilities)

1. $

   $ คือ เม็ดตอดหนึ่งที่เอาไว้เข้าถึงธาตุที่เป็นเอกลักษณ์ียงหนึ่งเดียวในเอกสาร กล่าวคือ เราสามารถเข้าถึง element ที่ระบุ id ได้ด้วยเม็ดตอดนี้

   Syntax $(id | element) -> HTMLElement

   โดยเปรียบเทียบวิธีใช้ กับ javascript ดั้งเดิม จะได้
   code : ขอบข่ายงานต้นบบงานเขียนภาษาชวาสำหรับไอ้งั่ง

   ดั้งเดิม เขียน var myDiv = document.getElementById('ytpb')
Prototype เขียน var myDiv = $('ytpb')

   โดยที่ค่าต่างๆ (attributes, value etc.) จะส่งผ่านมาด้วย
   ดังนั้น $('ytpb').title = "PrototypeJs" และ $('ytpb').innerHTML ="ขอบข่ายงานต้นบบงานเขียนภาษาชวาสำหรับไอ้งั่ง"
   ข้อสำคัญคือ $ ใช้กับ element หรือ id ซึ่งจะมีได้ที่เดียวทั้ง document

2. $$

   การใช้งาน $$ เรียกได้ว่าแทบจะเหมือนกันกับ $ ทุกประการ ข้อแตกต่างที่สคัญของ $$ คือ ผลที่ได้จะเป็น Array ของ HTMLElement

   Syntax $$(cssRule...) -> [HTMLElement]

   เม็ดตอดนี้จะใช้ CSS³ syntax ในการเข้าถึง โดยสนับสนุน syntax ของ CSS3

   code :
Link1
Link2
Link3
Link4


   ดั้งเดิม เขียน var a = document.getElementsByTagName('a')
   Prototype เขียน var a = $$('a')
   ตัวแปร a จะมีค่าเท่ากับ Array ของ tag a ทั้ง 4 ตัว

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

   เป็นเม็ดตอดที่ “ของเค้าดีจริงๆ” ครับเนื่องจากเราสามารถใช้ CSS syntax ในการเข้าถึง element ต่างๆ ดังตัวอย่าง

   var ytpb1 = $$("#ytpb1");
var ytpb2 = $$("#ytpb2");

   2 กรณี้นี้จะเหมือนกับ $(“ytpb1″) และ $(“ytpb2″) แตกต่างกันตรงที่ $$(“ytpb1″) และ $$(“ytpb2″) จะได้ Array ที่มีสมาชิกตัวเดียวอันเดียว
   ดังนั้น เวลาเรียกใช้จึงต้องใส่เลขสมาชิกลำดับที่ 0 (เนื่องจากมีสมาชิกแค่ตัวดียวอันเดียว)ลงไปด้วย ytpb1[0], ytpb2[0];

   $$('a[rel="ytpb"]') จะได้ tag a 2 ตัวบน ส่วน $$('a[rel="yothinplayboy"]') จะได้ 2 ตัวล่าง ซึ่งทั้งตัวบนและตัวล่างงวดนี้ไม่ออกแน่นอน ไม่ต้องเสียเวลาแทง เป็นต้น

   อรรถประโยชน์ทั้งสองตัวนี้ถือว่าเป็นสิ่งสำคัญสำหรับไอ้งั่งทุกคนที่ต้องการเรียนรู้ Prototype js เพราะมันคือพื้นฐานของไอ้ “ขอบเขตการทำงานของงานเขียนภาษาชวา” ที่จะต้องรู้ไว้เพื่อเรียนรู้เม็ดตอดต่อๆไป หวังว่าไอ้งั่งทุกท่านคงจะมันกับการเขียนภาษาชวานี้
   พบกันใหม่เร็วๆนี้

เชิงอรรถ

1. Document Object Model (DOM) เป็นวิธีการอธิบายว่าข้อมูลต่างๆ ในเอกสาร HTML หรือ XML จัดเรียงตัวแบบเชิงวัตถุ (object oriented) อย่างไร DOM เป็นวิธีในการสร้าง API ให้สามารถควบคุมเนื้อหา โครงสร้าง และรูปแบบของเอกสารได้,
2. ดู http://www.prototypejs.org
3. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents, w3c.org