JQuery

CDN คืออะไร

2011-10-14T22:04:00.001-07:00

วันนี้ออกนอกเรื่องสักหน่อยละกันครับ แต่ก็มีส่วนที่เกี่ยวข้อกับ jQuery อยู่บ้างเหมือนกัน เพราะเพื่อนๆที่พึ่งจะจับกับ jQuery ใหม่ๆอาจจะต้องศึกษาคำศัพท์เทคนิคต่างๆเพิ่ม เพราะไม่งั้นไปเจอเข้าอาจจะงงได้ครับ วันนี้เลยจะอธิบายเกี่ยวกับตัวย่อ CDN ว่ามันคืออะไร

คำว่า CDN นั้นย่อมาจาก Content Delivery Network ครับ หรือ Content distribution network (CDN) ถ้าเกี่ยวกับ jQuery มันก็คือ Server ที่ทำการเก็บ source code ของตัว jQuery เอาไว้ให้เราเรียกใช้งานครับ

แล้วมันมีประโยชน์ยังไง? ประโยชน์ของมันเลยคือสามารถที่จะลดโหลด หรือ ภาระของเครื่อง Server ของเราเองได้ครับแทนที่เราจะเก็บ File jquery.js เอาไว้ที่ Server ของเราซึ่งหากเว็บเรานั้นมีทราฟฟิกจำนวนมากๆแล้ว แค่โหลด jquery.js 1 file ก็เพิ่มภาระให้กับ Server ของเราได้เช่นกัน ดังนั้นวิธีลดภาระก็คือใช้การโหลดจาก CDN Host ต่างๆที่ให้บริการครับ

CDN ต่างๆนี้จะทำการเก็บ copy source code ของ jQuery เวอร์ชั่นต่างๆเอาไว้ แทบจะเรียกได้ว่าเกือบทุกๆ version เลยก็ว่าได้นะครับ แถมบางเจ้านั้นจะมี Server ที่ให้บริการมากกว่า 10 เครื่องเลยทีเดียวทำให้การโหลด file jQuery นั้นทำได้รวดเร็ว

แต่วิธีนี้ไม่เหมาะกับการทำ Web Applcation แบบ offline หรือแบบ Intranet นะครับ เพราะว่าการใช้แบบ CDN นั้นจะต้อง online ครับถึงจะสามารถ load file jquery ได้

ตัวอย่างการ load file jQuery ผ่าน CDN ที่ต่างๆนะครับ เพื่อนๆสามารถเปลี่ยนเลขเวอร์ชั่นได้ตามที่ตัวเองใช้งานได้เลยครับ

1
2
3
4
5
6
7
8
9
10
11

// Google Ajax API CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript">
</script>

// Microsoft CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript">
</script>

// jQuery CDN
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript">
</script>

วิธีใช้งาน jQuery หลายเวอร์ชั่นพร้อมๆกัน ด้วย noConflict

2011-10-14T22:03:00.001-07:00

ในบางครั้งเวลาที่เราพัฒนา Web application ที่ต้องพัฒนาจากของเก่าซึ่งอาจจะใช้ jQuery เวอร์ชั่นเก่าๆอยู่ก่อนแล้ว แต่ว่างานที่เราต้อง develop ใหม่จะต้องใช้ jQuery เวอร์ชั่นที่สูงกว่าและต้องไม่กระทบกับของเก่าที่มีอยู่แล้ว ปัญหานี้แก้ง่ายๆด้วยการใช้ jQuery หลายๆเวอร์ชั่นใน page เดียวกันไปเลย

และจะทำยังไงละถึงจะใช้ jQuery หลายๆเวอร์ชั่นพร้อมๆกันไปได้ เราก็ใช้ function นี้ครับที่ jQuery ได้เตรียมแก้ปัญหานี้เอาไว้แล้ว

noConflict

มาดูตัวอย่าง code กันดีกว่า

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// jQuery Version 1.5.2
<script src="jquery-1-5-2.js"></script>
<script>
var oldVersion = jQuery.noConflict();
</script>

//jQuery new version 1.6
<script src="jquery-1-6.js"></script>
<script>
var newVersion = jQuery.noConflict();
</script>

<div id="testDiv"></div>

<script>
alert( oldVersion('#testDiv') );
alert( newVersion('#testDiv') );
</script>

เท่านี้ก็หมดปัญหาเรื่องการใช้งาน jQuery หลายๆเวอร์ชั้นแล้วครับ บางครั้งปัญหานี้ก็ไม่ได้เกิดจากการใช้งาน jQuery หลายๆเวอร์ชั่นนะครับ เพราะผมเองก็เคยเจอเวลาที่ใช้ javascript ค่ายอื่น แล้วพอเอา jQuery มาใช้ร่วมกันด้วยแล้วโปรแกรมไม่สามารถทำงานได้ ก็ได้วิธีนี้แหละครับในการแก้ไขปัญหานี้

ความแตกต่างของ .bind(), .live(), และ .delegate()

2011-10-14T22:02:00.001-07:00

สวัสดีจ้า ไม่ได้อัพเดทเป็นเวลานานอีกแล้วครับ แฮ่ะๆ วันนี้นำเสนอเรื่องราวของ .bind(), .live(), .delegeate() ดีกว่าครับ เพราะมีหลายคนที่งง และสงสัย ว่ามันต่างกันอย่างไร และเอาไปใช้งานในงานลักษณะใหน ใช้กันตอนใหน เอาเป็นว่าคลิกเข้ามาอ่านด้านในกันเลยดีกว่าครับ :)

Image from : http://www.alfajango.com

เริ่มกันเลยไม่ต้องยืดยาวกันมาก เน้นกระชับๆละกันนะครับ ช่วงนี้เวลาในการเขียน Blog ของผมค่อนข้างจะน้อยลงเดี๋ยวจะต้องจัดตารางเวลากันใหม่สักหน่อยครับ เอาละ เรามาว่ากันที่เจ้า method .bind(); กันก่อนเลย เพื่อนๆหลายคนสงสัยกันมากว่ามันเอาไว้ทำอะไร โดยเฉพาะ โปรแกรมเมอร์มือใหม่ เจ้าตัว method .bind นี้นะครับ เอาไว้จำหรับการ ผูก หรือ นำเอา Events เช่น Click, Mouse Over หรือที่เรียกกันว่า CSS Selector เอาไปกำหนดให้กับ Element ที่เราต้องการ เช่นกำหนดให้กำ Element <a> เป็นต้น

1	$('a').bind('click', function(e){ alert( 'Clicked!!' ); });

จาก code ตัวอย่างด้านบน เป็นการ binding event Click ให้กับ Elements ทั้งหมด ที่อยู่ภายใต้ Docment Root นะครับ เพื่อนๆบางท่านอาจจะงงว่า Document root คืออะไร ดูตามตัวอย่างด้านล่างนี้ครับน่าจะ เข้าใจง่ายขึ้น

1
2
3
4
5
6
7
8
9
10
11

จาก DOM Tree ด้านบนนี้จะเห็นว่า document นั้นเป็น Root บนสุดของทุกๆ Element หรือจะเรียกว่าเป็น Root node ก็ว่าได้ ดังนั้นเวลาที่เรา binding events เข้าไปที่ Elements A ตัว jQuery Object จะทำการ Scan หา TAG A หรือ Elements A แล้วทำการใสคำสั่ง click เข้าไป

จะเห็นว่าเจ้า method .build เนี่ย มันจะทำงานได้กับ Elements ที่มีอยู่ในขณะนั้นเท่านั้น ถ้าหากว่า มีการเพิ่ม Elements A เข้ามาภายหลัง เช่น เกิดจากการโหลดมาจาก AJAX เข้ามา พวก Element A ที่เข้ามาทีหลังนั้น จะไม่ถูก binding event click เข้าไป ซึ่งเพื่อนๆหลายท่านคงจะเคยเจอปัญหาแบบนี้นะครับ

เพื่อแก้ไขปัญหานี้จึงเกิด Methods ใหม่ขั้นมาอีกสองตัวคือ .live() และ .delegate()
.live() และ .deledate() นั้นจริงๆแล้วเหมือนกันครับ เพียงแต่ .delegate() จะทำงานได้เร็วกว่า .live() ส่วนที่ว่าทำไมถึงทำงานได้เร็วกว่านั้น เดี๋ยวผมขอเวลาไปหาคำตอบก่อนนะครับ แฮ่ะๆ ขอติดไว้ก่อน

1	$('a').live() == $(document).delegate('a')

มาสรุปกันเลยว่า .bind(), .live or .delegate() นั้นใช้ต่างกันอย่างไร

1
2
3
4
5

$('a').bind(
'click',
function(e){
alert('This is method bind.');
})

จาก code ด้านบนนี้ .bind นั้นจะสามารถใส่ event ให้กับ Element ที่มีอยู่ในขณะนั้นเท่านั้น ไม่สามารถกำหนด event ให้กับ element ที่เพิ่มเข้ามาทีหลังไม่ได้

1
2
3

$('a').live('click', function() { alert('This is live') });
// or
$(document).delegate('a', 'click', function() { alert('This is Delegate); });

Code ด้านบนนี้สามารถกำหนด event ให้กับ Element A ได้ ถึงแม้ขณะนั้น ยังไม่มี Element A ใน document root ก็ตาม เช่น เมื่อมีการโหลด HTML เข้ามาผ่านทาง AJAX โดยที่มี Element A ติดเข้ามาด้วย Element A ที่เข้ามานั้นก็จะถูกจับ event click ใส่เข้าไปทันที

ผมคิดว่าบทความนี้ก็น่าจะพอแก้ไขปัญหา ข้อข้องใจของเพื่อนๆได้พอสมควรนะครับ ถ้าสงสัยตรงใหน ถามใน Facebook ได้เลยนะครับ http://www.facebook.com/jQuery.in.th

Who’s using jQuery?

2011-10-14T22:01:00.001-07:00

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

jQuery นั้นถ้าจะบอกว่าเป็น open source javascript libraries ที่ดังที่สุดในตอนนี้ก็ว่าได้ครับ มีกลุ่มคนใช้งานมากที่สุด และแถมยังมีคน หรือ บริษัทใหญ่ๆนำไปใช้งาน นั้นก็ทำให้เรามั่นใจในความสามารถของ jQuery ไปได้อีก ขนาดเว็บใหญ่ๆเขายังใช้เลย มันต้องมีอะไรดีสิ

ข้อดีหลักๆของ jQuery เลยผมต้องยกให้ในเรื่องของตัว selectors เพราะว่าผมใช้งานมันบ่อยมากที่สุดแล้วนะครับ เพราะเราจะทำอะไรก็ต้อง selectors elements นั้นๆมาก่อน ส่วนข้อดีข้อที่สองก็คือ Code ที่สั้นกระชับ รองรับการทำงานในหลายๆ browser และ หลายๆ version ทำให้เขียนทีเดียวก็สามารถที่จะ Run ได้กับทุกๆ Browser เลยก็ว่าได้

ด้านล่างนี้ก็เป็นคำตอบของหัวข้อที่ว่า Who is using jQuery?

Google
DELL
MLB.com
Digg
NBC.com
CBS.com
Mozilla.org
WordPress
Drupal

วีดีโอสอนการใช้งาน jQuery สำหรับคนที่พึ่งเริ่มต้นครับ

2011-10-14T22:00:00.001-07:00

Video jQuery นี้มีเป็น Serise เลยครับผมไปเจอมาเลยเอามาฝาก น่าสนใจมากๆสำหรับผู้ที่กำลังเริ่มต้นกับ jQuery ครับ แต่อาจจะต้องฝึกการฟังภาษาอังกฤษนิดหนึ่งนะครับ แต่ก็คงไม่ยากเกินไปสำหรับเพื่อนๆ ช่วงนี้ Google จัดระบบ อันดับ ใหม่ทำให้ jQuery.in.th อันดับตกไปช่วงนี้จะพยายามขยันเขียนบทความให้ได้อ่านกันนะครับ

Link VIDEO : คลิกที่นี่ครับ

Ajax and JSON ตอนที่ 1

2011-10-14T21:59:00.000-07:00

ถ้าจะกล่าวถึง jQuery + Ajax แล้วละก็ที่ขาดไม่ได้เลยก็คือ JSON เพราะสามารถนำมาใช้งานได้สะดวกและง่าย เพราะข้อมูลที่เป็นรูปแบบ JSON นั้น Ajax สามารถที่จะเรียกข้อมูลนั้นๆออกมาเป็น Object ได้

JSON คืออะไร json นั้นย่อมาจากคำว่า ” JavaScript Object Notation ” จริงๆแล้วข้อมูลที่อยู่ในรูปแบบของ JSON นั้นก็คือ Text ธรรมดาๆครับ เพียงแต่ถูกจัดเรียงให้อยู่ในรูปแบบของ Object Array ถ้าอธิบายวิชาการไปเรื่อยๆนี่สงสัยจะงงกันแน่ๆ มาดูตัวอย่าง รูปแบบของ JSON เลยละกัน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "firstName": "John",
  "lastName": "Smith",
  "address": {
  "streetAddress": "21 2nd Street",
  "city": "New York",
  "state": "NY",
  "postalCode": 10021
  },
  "phoneNumbers": [
  { "type": "home", "number": "212 555-1234" },
  { "type": "fax", "number": "646 555-4567" }
  ],
  "newSubscription": false,
  "companyName": null
}

ข้อมูลของ JSON นั้นจะถูกห่อหุ้มด้วยเครื่องหมายปีกา { } ดูๆแล้วมันก็เหมือนกับการจับข้อมูลใส่ใน Array ของ PHP นั้นเอง แต่การเรียกใช้งานนั้น AJAX สามารถเรียก json แบบนี้ได้เลย เมื่อ Return ค่ากลับมาในรูปแบบของ JSON

1 2	jsonData.firstName; jsonData.Smith;

ชนิดของ JSON แบบ Basic มีดังนี้ครับ

- Number
- String
- Boolean (true and false)
- Array
- Object
- null

วันนี้ก็เอาไว้แค่นี้ก่อนแล้วกันครับเดี๋ยวมาต่อในตอนที่สองอีกทีครับ

ajax คืออะไร

2011-10-14T21:54:00.000-07:00

Ajax (Asynchronous JavaScript and XML) คืออะไร ?

Ajax ไม่ใช่ชื่อของการเขียนโปรแกรมหรือเป็นชื่อของภาษาที่ใช้ในการโปรแกรม แต่เป็นชุดของเทคโนโลยีต่างๆ Ajax ย่อมาจาก Asynchronous JavaScript? And XML; ซึ่งหมายถึงการทำงานร่วมกันของ JavaScript? และ XML แบบ Asynchronous มีหลักการทํางาน 2 ประเด็น คือ การ update หน้าจอแบบบางส่วน และการติดต่อสื่อสารกับ Server โดยใช้หลักการ Asynchronous ทําให้ผู้ใช้ไม่ต้องหยุดการทํางาน เพื่อรอการประมวลผลจาก Server รวมถึงการโหลดและการรีเฟรชหน้าจอ ของบราวเซอร์ทางฝั่ง Client มีการใช้ Ajax โดยการเพิ่มเลเยอร์ระหว่าง user browser กับ server ทําให้ผู้ใช้สามารถทํางานได้โดยไม่ต้องรอให้ Client ติดต่อไปยัง Server รวมถึงการโหลดและการรีเฟรชหน้าจอทั้งหมดด้วย ดังนั้นผู้ใช้สามารถใช้งาน application ได้อย่างมีประสิทธิภาพมากขึ้น

AJAX จึงไม่ใช่เทคโนโลยีในตัวของมันเอง แต่ว่าเป็นการนำเทคโนโลยีหลายๆ ตัวมารวมกันเช่น JavaScript?, DHTML, XML, Css, Dom และ XMLHTTPRequest

Ajax engine ทำหน้าที่เป็นตัวกลางระหว่าง client และ server ฉะนั้นเมื่อ client มี requestแทนที่จะส่ง HTTP request ไปยัง server โดยตรง client จะส่ง JavaScript? call ไปยัง Ajax engine เพื่อโหลดข้อมูลที่ user ต้องการ และหาก Ajax engine ต้องการข้อมูลเพิ่มเติมในการตอบสนองต่อ user Ajax engine จะส่ง request ไปยัง server โดยใช้ XML

การ์เรตได้กล่าวถึงเทคโนโลยีต่าง ๆ ที่เป็นส่วนประกอบของ Ajax ซึ่งได้แก่

HTML/XHTML เป็นภาษาในการจัดแสดงข้อมูล
CSS เป็นรูปแบบการจัดแต่ง XHTML
Document Object Model (DOM) สำหรับ dynamic display and interaction
XML เป็นรูปแบบการแลกเปลี่ยนดาต้า
XSLT สำหรับ แปลง XML เป็น XHTML
XMLHTTPRequest สำหรับ asynchronous data retrieval
JavaScript? เป็นภาษาในการใช้งาน Ajax engine

โดยส่วนประกอบจำเป็นขั้นพื้นฐานที่ขาดไม่ได้ใน Ajax ได้แก่ HTML/XHTML DOM และ JavaScript? เพราะ XHTML

ประวัติความเป็นมา
ในช่วงแรกๆของการพัฒนา คือปี 1997 นั้น Component แรกที่เกิดขึ้นทางฝั่ง Client ถูกเขียนขึ้นโดยทีมพัฒนา Outlook Web Access ซึ่งต่อมาถูกนำมาใช้เป็นส่วนหนึ่งของ Internet Explorer 5.0 นั่นก็คือจุดเริ่มต้นที่เริ่มรู้จักการทำงานแบบ Ajax และในปี 2005 Google ได้ใช้การติดต่อสื่อสารแบบ Asynchronous เพื่อเป็นรากฐานที่ทำให้รู้จักกับ Ajax กันอย่างแพร่หลาย การทำงานแบบ Client – Server ถูกนำมาใช้งานเป็นจำนวนมาก เช่น การติดต่อกับฐานข้อมูลที่ Server หรือการให้บริการทางอินเตอร์เน็ต ซึ่ง Google เป็นผู้ลงทุนลงแรงอย่างหนัก ในพัฒนาและการทดสอบ Ajax จึงสังเกตได้ว่า ผลผลิตใหญ่ของ Google ในช่วงต้นปี 2005 จึงเป็นการนำ Ajax มาประยุกต์ใช้งาน เช่น Gmail, GoogleMap?, GoogleSuggest? และ GoogleGroup? เป็นต้น

ที่มาของปัญหา
เนื่องจากแอพลิเคชั่นที่ใช้งานในปัจจุบันนี้ มีหลักการที่ทำงานแล้วเกิดการสูญเสียเวลาและทรัพยากรของผู้ใช้ในการรอคอยการ ทำงานต่างๆ ทำให้ผู้ใช้ต้องหยุดคอย ดังนั้นการทำงานของผู้ใช้จึงเป็นไปอย่างไม่ต่อเนื่อง ซึ่งหลักการดังกล่าวคือ

1.”Click, wait, and refresh” user interaction paradigm
การที่บราวเซอร์ตอบสนองต่อการทำงานของผู้ใช้ โดยจะทิ้งหน้าเว็บที่แสดงอยู่ในขณะนั้น แล้วไปทำการส่ง HTTP request กลับไปยัง server แทน ซึ่งทำให้ผู้ใช้ไม่สามารถทำอะไรได้เลยในขณะนั้น นอกจากการรอคอย เมื่อ server ทำการประมวลเสร็จก็จะส่งหน้า HTML กลับมายังบราวเซอร์ ต่อจากนั้นบราวเซอร์ก็จะรีเฟรชและแสดงหน้า HTML หน้าใหม่ และนี้เองที่ทำให้ผู้ใช้สามารถใช้งานต่อไปได้
จะเห็นว่า ผู้ใช้มีช่วงเวลาของการหยุดรอคอยเป็นเวลานานสำหรับการประมวลผลของ Server และการรีเฟรชหน้า HTML ใหม่ทั้งหน้า ซึ่งเป็นสิ่งที่ไม่มีประสิทธิภาพในเชิง Dynamic ของการทำงานบนเว็บแอพลิเคชั่น

2.Synchronous “request/response” communication mode
การที่บราวเซอร์เริ่มทำการร้องขอข้อมูล และ server ก็ตอบสนองเฉพาะการร้องขอที่บราวเซอร์ร้องขอมา server จะไม่สามารถส่งข้อมูลได้ถ้าบราวเซอร์ไม่ได้ร้องขอข้อมูลในขณะนั้น ซึ่งถือว่าเป็นการติดต่อสื่อสารเป็นแบบทิศทางเดียว
วงจรการ request/response แบบ synchronous คือ การทำงานแบบประสานจังหวะระหว่างบราวเซอร์กับ Server ทำให้เกิดความล่าช้าในการทำงานทำให้ผู้ใช้ทำอะไรไม่ได้อีก นอกจากการคอยการตอบสนองกลับมาจาก server เมื่อ server ประมวลผลเสร็จ

ข้อดีของ Ajax
1. ตอบสนองต่อผู้ใช้ได้อย่างรวดเร็วเนื่องจากการ update แบบบางส่วน
2. ผู้ใช้ไม่ต้องหยุดรอคอยการประมวลของ server เนื่องจากการติดต่อแบบ Asynchronous
3. รองรับกับบราวเซอร์หลักๆที่สามารถใช้ JavaScript? ได้
4. ทำให้การประมวลผลที่ Server มีความรวดเร็วขึ้นเนื่องจากการประมวลผลที่ Server ลดลง
5. ไม่ต้องทำการติดตั้ง หรือใช้ Plugs-in
6. ไม่ยึดติดกับ Platform หรือภาษาที่ใช้ในการเขียนโปรแกรม
7. เป็นเ ทคโนโลยีใหม่ที่ไม่ได้เป็นของนักพัฒนาเว็บแอพลิเคชั่นคนใด นั่นคือทุกคนมีสิทธิ์เข้ามาพัฒนาแอพลิเคชั่นตัวนี้

ที่มาของข้อมูลนี้ : http://wiki.nectec.or.th/setec/Knowledge/Ajax สามารถอ่านเพิ่มเติมได้ตาม link นี้

การทำงานแบบ Client-side และ server-side คืออะไร

2011-10-14T21:50:00.000-07:00

ในการทำงานด้าน Web Programming ในการเขียนโปรแกรมนั้น จะถูกแยกการทำงานออกเป็นสองแบบหลักๆ คือ Client-side และ Server-side ในการเขียนโปรแกรมแบบ Server-side นั้นก็ได้แก่ภาษา php, java jsp, .NET เป็นต้น ซึ่งการเขียนโปรแกรมด้วยภาษาเหล่านี้ จะเป็นการ Run โปรแกรม ในฝั่งของ Server แล้ว return ค่า หรือ แสดงผลกลับมาทาง Client ในที่นี้หมายถึง web browser ต่างๆเช่น IE, Firefox, safari

ตัวอย่างการทำงานแบบ Server-side:

client เรียก www.google.com –> Server google ประมวลผล —> ส่งค่ากลับไปให้ที่ Client

จากตัวอย่างเป็นการเรียก เว็บ Google ผ่าน browser เมื่อมีการเรียก URL ดังกล่าว Client จะทำการส่งคำขอไปทาง server ของ google เมื่อมีการตอบรับ จาก server ของ google ก็จะทำตามคำสั่งที่เขียนใว้ที่ server และจะประมวลผล และส่งค่ากลับมายัง browser ที่ทำการร้องขอไป

ส่วนการทำงานแบบ Client Side นั้นเป็นการประมวลผลทางฝั่ง Browser ภาษาที่ใช้ก็เช่น javascript ประโยชน์ของการทำงานฝั่ง Client นั้นก็มีเยอะเลยครับ คือแทนที่เราจะส่งทุกๆอย่างไปประมวลผลที่ server เราก็มาประมวลผลที่ client ก่อนแล้วค่อยส่งบางส่วนไปประมวลที่ server ซึ่งจะช่วยในเรื่องของความเร็วในการทำงานได้มาก และ ลด Load ของ Server ลงได้เยอะมากๆ เพราะการทำงานฝั่ง client นั้นจะประมวลผลที่เครื่องของ user เอง

ผมจะยกตัวอย่างการทำงานแบบ server side และ client side ให้ดูเพื่อให้ห็นความแตกต่างกัน

ตัวอย่าง code การทำงานแบบ Server-side (server.php)

<form name="server-side" action="server.php">
           <input type="text" name="myName" >
           <input type="submit" value="submit" />
</form>

<?php

if( isset($_POST["myName"]) )
{
   if($_POST["myName"] == "")
   {
        echo " Please key in your name. ";
        exit();
   } else
   {
        echo "OK";
   }
}
?>

จากตัวอย่างด้านบนนี้เป็นการส่งค่า ไปยัง script server.php โดยตรง โดยเป็นการประมวลผลทางฝั่ง Server (server side) จะเห็นได้ว่า เมื่อกด submit ไปแล้ว โปรแกรมจะทำการเช็คว่า มีการกรอกค่าใน form มาหรือไม่ ถ้าค่าว่างจะแสดงข้อความ Error ออกมาพร้อมทั้งให้กลับไปกรอกใหม่ จะเห็นว่ามันเป็นการทำงานที่เพิ่มโหลดให้กับ Server เพราะจะต้องมาทำการเช็คค่า ว่าว่าง หรือเปล่า ถ้าหากเป็นระบบที่มีการใช้งานที่ต้องรองรับจำนวนคนมากๆ อันนี้มีปัญหาแน่ๆครับ แต่ที่ผมยกตัวอย่างมานี้เป็นแค่ตัวอย่างง่ายๆ ซึ่ง script แค่นี้คงไม่ทำให้ server โหลดถึงขนาดล่มไปได้ แต่ถ้าเราเปลี่ยนวิธีการแบบนี้ มาเป็นการใช้ Client side ช่วยละ เป็นอีกวิธีหนึ่งเลยนะครับ ที่จะลดขึ้นตอนการทำงานของ Server ลงได้เยอะเลย มาดูตัวอย่างกัน

ตัวอย่าง code การทำงานแบบ Client Side :

<form name="server-side" action="server.php" onSubmit=" return checkForm(); ">
<input id="myName" type="text" name="myName" >
<input type="submit" value="submit" />
</form>

<script type="text/javascript">
function checkForm(){
      if( $("#myName").attr("value") == "" ) {
            alert("Please key in your name.");
            return false;
      }else{
            return true;
      }
}
</script>

จาก code ตัวอย่างด้านบนนี้ เป็นการใช้ ภาษา javascript เช็คค่าของ input box ว่ามีค่าว่างหรือไม่ ถ้ามีค่าว่างจะ alert ข้อความออกมาแจ้งว่าให้กรอกชื่อคุณ จะเห็นได้ว่าวิธีแบบ client side นี้ลดโหลดหรือลดการทำงานทางฝั่ง server ได้พอสมควรเลยแทนที่เราจะส่งค่าไปเช็คด้วยโปรแกรมทางฝั่ง server เราก็ทำการเช็คค่าก่อนทำการส่ง ถ้าค่าถูกต้องตามที่ต้องการแล้วเราค่อยส่งค่าไปประมวลผล แบบนี้ก็เป็นวิธีที่ดีทีเดียว

Tips : ในการออกแบบระบบนั้น ถ้าเราแยกการประมวลผลออกได้ว่าอันใหนควรจะทำที่ browser อันใหน ควรจะส่งไประมวลผลที่ server จะทำให้โปรแกรมที่เราพัฒนาขึ้นมานั้นมีประสิทธิภาพมากยิ่งขึ้น ซึ่งสิ่งเหล่านี้ก็ขึ้นอยู่กับการสะสมประสพการณ์ของแต่ละคนครับ

What is jQuery ?

2011-10-14T21:47:00.001-07:00

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

jQuery คืออะไร ?
jQuery นั้นเป็น JavaScript Library ที่บรรจุเอา Function และ คำสั่งต่างๆ ที่จะทำให้เราๆท่านๆ ไม่ต้องมาเขียนเองใหม่ทั้งหมดตั้งแต่ต้น เราสามารถที่จะเขียน ajax ได้แบบง่ายๆเพียง code ไม่กี่บรรทัด หรือจะเขียน javascript เพื่อดัก Event (เหตุการณ์) ต่างๆที่เขาต้องการ เช่น การ click, rollover, mouse moved อื่นๆอีกมากหมาย ซึ่งถ้าเขียนเองทั้งหมดตั้งแต่ต้นละก็ รับลองได้เลย หลายบรรทัดแน่นอน เวลามาแก้ code ทีหลังนี่เล่นเอาปวดกระบานไปหลายวันเลยละ (จากประสพการณ์จริงเลย)

jQuery เอามาทำอะไรได้บ้างละ ?
เมื่อถามว่ามันทำอะไรได้บ้าง ก็ทำได้หลายอย่างมากหลายเลยละ ไม่ว่าจะเป็นการ

ความสามารถในการทำงานแบบ ajax
การสร้าง animation ได้แบบง่ายๆเลย ไม่ว่าจะทำรูปให้เคลื่อนที่ หรือ DIV เช่นเอา mouse จับ DIV ลากไปมา
ความสามารถในการ binds หรือการผูก หรือจับ function ที่เขาเขียนขึ้นให้ทำงานร่วมกับ function อื่นๆ
สามารถจัดการกับ css (style sheet) ลอง element นั้นๆได้
ค้นหา element ที่เราต้องการและจัดการ เพิ่มหรือลบ Attributes ที่เราต้องการได้
ทำ Effect ต่างๆกับ Element ที่เราต้องการ เช่นการ hide DIV ที่เราต้องการ
การดักเหตุการณ์ต่างๆ

jQuery นั้นมี Plugin มากหลายเลยที่เราสามารถนำมาใช้ในงานของเราได้ ผมเองก็ได้ประโยชน์จาก jQuery Plugin เยอะพอสมควรเลยสำหรับงานรีบๆ ไม่ว่าจะเป็น Plugin สำหรับการเช็ค Form เช่น เช็ค email ว่ารูปแบบถูกต้องหรือไม่ หรือ plugin ปฏิทิน อันนี้ใช้บ่อยมาก ใช้สำหรับให้ user คลิกเลือกวันที่เอา โดยไม่ต้องมากรอกเอง หรือไม่ว่าจะเป็นการดึงเอาข้อมูล XML , JSON, TEXT ก็สามารถทำได้ง่ายๆเลย

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