ComBioLaw.De

เอกสาร HTML หรือเวบไซท์ที่ไม่มี JavaScript ก็จะเป็นเวบไซท์แบบทื่อ ๆ ด้วย JavaScript ทำให้เอกสาร HTML มีลูกเล่นต่าง ๆ มีความเป็น Dynamic มากขึ้น ดังนั้น JavaScript จึงเป็นสิ่งที่ขาดไม่ได้ สำหรับ Web App สมัยใหม่ แต่ ! การเขียนโปรแกรมด้วย JavaScript ไม่ใช่เรื่องง่าย และน่าสนุก เพราะ JavaScript ก็คล้าย ๆ กับเทคโนโลยีที่เกี่ยวข้องกับ เวบไซท์อื่น ๆ (HTML, CSS) ที่ไม่มีมาตรฐานที่ชัดเจน เอกสารดี ๆ ก็ไม่ค่อยจะมี อีกทั้งเครื่องมือในการพัฒนาและ debug ก็หาดีไม่ค่อยจะได้ จึงไม่ใช่เรื่องแปลกที่ JavaScript จะเป็นเทคโนโลยีที่ไม่ค่อยมีมือฉมัง ทั้งที่จริง ๆ แล้ว หน้าที่ของ JavaScript ก็ควรจะมีแค่ เปลี่ยน attribute ของเอกสาร HTML ตามสถานการณ์หรือ event ที่กำหนด

ด้วยความสำคัญและความน่าเบื่อในการเขียน JavaScript ทำให้เราได้เห็น JavaScript-Framework ออกมาให้เลือกใช้มากมาย ตามแต่งานและความต้องการของนักพัฒนาโปรแกรม แต่ก็ใช่ว่าทุก Framework จะใช้งานง่ายอย่างที่ใจต้องการ

ล่าสุด ผมได้ทดลองใช้ jQuery และรู้สึกชอบเป็นพิเศษ เพราะหลักการของ jQuery นั้นง่าย ๆ คือ เลือก element จากเอกสาร HTML ในรูปแบบของ CSS และมีกลิ่นอายของ SQL นิด ๆ จากนั้นก็เปลี่ยนแปลงคุณสมบัติของ element ตามที่คุณต้องการ ;) ยกตัวอย่างเช่น ...

เขียนโปรแกรม

bow_der_kleine

alert($('a').attr('href'));
alert(document.getElementsByTagName('a')[0].href);

โค้ดทั้งสองบรรทัดมีความหมายเหมือนกันคือ เลือกลิ้งก์แรกในเอกสาร HTML แล้ว alert ค่าลิ้งก์ (attribute href) ให้เราได้ดูกัน แต่ในบรรทัดแรกเขียนด้วย syntax ของ jQuery (ที่การเลือก element จะอยู่ภายใต้เครื่องหมาย $() ) และในบรรทัดที่สองเป็น JavaScript แบบธรรมดา มองเผิน ๆ อาจไม่ต่างกันมาก ที่ต่างกันบ้างก็ความยาวของโค้ดที่ jQuery สั้นกว่าเห็น ๆ แต่จริง ๆ แล้วมันมีอะไรที่สำคัญกว่านั้น

นั่นคือ Coding Convention

เพียงแค่ชื่อของภาษาเขียนโปรแกรม คงบอกเราได้แล้วว่า JavaScript ได้รับอิทธิพลมาจาก Java มาค่อนข้างมาก และอิทธิพลที่น่าอึดอัดอย่างหนึ่งคือความ verbose ของการเขียนโปรแกรม ทำให้เราได้เจออะไรประเภท document.getElementById(), document.getElementsByName(), document.getElementsByTagName() ใน JavaScript (แต่ไม่เจอ document.getElementsByClass) นอกจากชื่อเมโธทจะยาวและจำยากแล้ว การแยกกันระหว่างการเลือก Element จาก ชื่อ, ID หรือ Tag ก็ยังทำให้เกิดความยุ่งยากในการเขียนโปรแกรมอีกด้วย ที่แย่ไปกว่านั้นคือ การแก้ไข attribute ของ element ที่เราเลือกมา ก็ไม่มีรูปแบบที่ชัดเจน บาง atrribute ต้องใช้วิธีนึง แต่อีก atrribute ต้องใช้อีกวิธี

แต่สำหรับ jQuery รูปแบบการเลือก element และการแก้ไข attribute ค่อนข้างง่ายและชัดเจน นั่นคือ

• การเลือก element ใช้หลักการเดียวกับ CSS
• atrribute ที่กำหนดในตัว Tag ให้ใช้เมโธท attr()
• atrribute ที่กำหนดใน CSS ให้ใช้เมโธท css()
• ค่าที่อยู่ใน Tag ให้ใช้เมโธท html()

<a href="http://www.biolawcom.de/" id="home" style="color:red;">BioLawCom.De</a>
<a href="http://www.biolawcom.de/blog" class="navigation" >Our Blog</a>
<script type="text/javascript">
	$('#home'); //เลือก <a href="http://www.biolawcom.de/" id="home" style="color:red;">BioLawCom.De</a>
	$('#home').attr('href'); // return "http://www.biolawcom.de/"
	$('#home').attr('href', "http://biolawcom.de/"); // เปลี่ยนค่าลิ้งก์จาก "http://www.biolawcom.de/" เป็น "http://biolawcom.de/"
	$('#home').css('color'); // return "red"
	$('#home').css('color', 'green'); // เปลื่ยนสีลิ้งก์จากแดงเป็นเขียว
	$('#home').html(); // return "BioLawCom.De"
	$('#home').html("Our Home Page"); // เปลี่ยนจาก "BioLawCom.De" เป็น "Our Home Page"
	$('.navigation').html(); // return "Our Blog"
</script>

นอกจากการเลือก element ตามแบบแผนของ CSS แล้ว jQuery ยังสามารถเลือก element แบบกำหนดเงื่อนไขคล้าย ๆ WHERE-Clause ใน SQL ได้อีกด้วย ยกตัวอย่างเช่น

$('p:odd') //เลือก element ที่เป็น Tag paragraph และมี index เป็นเลขคี่ทั้งหมด
$('input[name=my_input]') //เลือก input ที่ attribute name มีค่าเท่ากับ "my_input"
$(':radio') // เลือก input ที่มี type เป็น radio ทั้งหมด

ซึ่งความสามารถนี้ทำให้ jQuery ใช้งานง่าย และ powerful มาก

ความสามารถที่เจ๋งมาก ๆ อีกอย่างของ jQuery คือ การกำหนด Event Handling ของ element ในรูปแบบของ functional programming ได้ หรือ การส่ง function เป็น parameter หนึ่งในการเรียก event method ยกตัวอย่างเช่น

<a href="http://www.biolawcom.de/" id="home" style="color:red;">BioLawCom.De</a>
 
<script type="text/javascript">
	$('#home').click(function(){
		$(this).css("font-size", "24px");
		return false;
	});
</script>

ซึ่งมีความหมายว่า เมื่อมีใครไป click link ที่มี ID เป็น "home" เข้า link ดังกล่าวก็จะเปลี่ยนขนาดตัวอักษรเป็นขนาด 24px และหน้าต่างก็จะไม่เปิดไปยัง href ของ link (กำหนดโดยบรรทัด return false) และแน่นอนว่า jQuery ไม่ได้สนับสนุนเพียงแค่ click event แต่ยังสนับสนุน event อื่น ๆ อีกมากมาย สามารถดูได้ที่ jQuery Event

แม้ว่าในแวบแรกที่ได้เห็นการจัดการ event ของ jQuery แล้วจะรู้สึกแปล่งประหลาดไปบ้าง (ดูไม่ค่อยเหมือน javaScript)  แต่เมื่อเข้าใจหลักการของมันแล้ว ผมกลับรู้สึกว่ามันเป็นอะไรทีช่วยให้เขียนโปรแกรมง่ายขึ้นมาก ประหยัดเวลาในการกำหนดตัวแปร หรือชื่อฟังก์ชั่นต่าง ๆ ซึ่งส่วนมากก็ใช้เพียงครั้งเดียว ไม่ค่อยได้เอามา reuse หรือหากต้องการ reuse ก็สามารถทำได้เช่นกัน อีกทั้งเราสามารถแยกเอกสาร HTML ออกจาก JavaScript ได้มากขึ้นอีกด้วย เพราะปกติแล้ว การกำหนด event จะใช้ attribute onEven ต่าง ๆ เป็นตัวกำหนด

สิ่งที่ผมประทับใจมากอีกอย่างใน jQuery คือ jQuery-UI ที่มีพื้นฐานมาจาก Plugins ซึ่ง jQuery-UI จะถูกใช้สำหรับเพิ่มความสามารถให้กับส่วนติดต่อกับผู้ใช้ (User Interface) ให้มีความ interactive มากขึ้น หรือเพิ่มลูกเล่นให้เวบไซท์มีเอพเฟคต่าง ๆ มากขึ้น แม้ว่าเราจะพบเห็นความสามารถต่าง ๆ เหล่านี้ได้ใน Framework อื่น ๆ ซึงไม่ต่างกันออกไปมากนัก แต่สิ่งที่ต่างคือความง่ายในการเขียนโปรแกรม เพราะการเรียกใช้ jQuery-UI ก็คือการเรียกเมโธทจาก element ที่เราเลือกมาเท่านั้น ยกตัวอย่างเช่น หากผมต้องการให้ input ของผมเป็นกลายเป็น ปฏิธิน ผมเพียงแค่ใช้คำสั่ง

<input name="my_date" />
<script type="text/javascript">
	$('input[name=my_date]').datepicker();
</script>

จากการที่ได้เขียนโปรแกรมด้วย jQuery ไปสักพัก ทำให้ผมรู้สึกว่า การเขียน User Interface ใน Web App ได้พัฒนาไปมาก และทุกอย่างก็ดูง่ายไปหมด เผลอ ๆ อาจจะง่ายกว่าการเขียน UI สำหรับ Desktop App เสียด้วยซ้ำ ผมเลยไม่แปลกใจเลยที่ Microsoft จะให้ความสนใจใน jQuery เป็นพิเศษ โดยส่วนตัว ผมคิดว่า jQuery มีแนวทางที่ดีมากสำหรับการพัฒนา UI สำหรับ Web App ในอนาคต หวังว่า Comunity ของ jQuery จะโตวันโตคืน ;)