ทิ้งไว้หลายอาทิตย์เชียว มามะมาต่อกัน  คราวก่อนได้แปลไปแล้วหลายตอน ตอนนี้ขอเอาประสบการณ์มาเชื่อมโยงไปด้วยครับ เวลามันน้อยไปลุยกันเลยดีว่า

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

วิธีแรกแรก

ลำดับขั้นตอนจะเป็นดังนี้

  1. ดาวน์โหลดไฟล์ jQuery
  2. สร้างไฟล์
  3. ลองเขียนดูหน่อย

ดาวน์โหลดก่อนเลย

1. ไปที่เว็บต้นทางก่อนเลย คลิก  jQuery.com

2. หน้าตาเว็บก็จะเป็นเช่นนี้แล  ก็คลิกที่  Download(jQuery) ปัจจุบัน(ที่กำลังเขียน) เป็นเวอร์ชั่น 1.3.2 ครับ

jqury_dowload_install_2

3. และมันก็จะเด้งมาที่ google ซะงั้น  คลิก jquery-1.3.2.min.js ต่อเลยครับ ใครเจอเวอร์ชั่นที่เยอะกว่านี้ก็ไม่ต้องตกใจครับ เป็นเรื่องปกติที่มีการอัพเดตเวอร์ชั่น แต่ถ้าเวอร์ชั่นน้อยกว่านี่ ก็คงจะแปลกนะ

jqury_dowload_install_3

4. จะมีหน้าต่าง opening jquery ขึ้นมาเพื่อให้เราเก็บไฟล์  เราก็คลิกที่ปุ่ม Save File ได้เลยครับ

jqury_dowload_install_4

5.  จะขึ้นหน้าต่างตำแหน่งที่เราต้องการเก็บไฟล์   ลำดับนี้ก็ให้คลิกเลือกตำแหน่งที่เก็บไฟล์ได้เลย  ในที่นี้ผมเลือกไปเป็น C:/AppServ/www/jQeury  ครับ เพื่อจะได้ทดลองบน  Web Server จำลองกันได้ ถ้าไม่รู้เรื่องละก็ แนะนำไปอ่านและทำก่อนเลย คลิก

6. เมื่อเลือกตำแหน่งได้แล้วก็ คลิกที่ปุ่ม Save ได้เลย

jqury_dowload_install_5-6

7. รอโหลดฮ่ะ แต่ไม่ได้รอเลย ว้าวว โหลดเสร็จล่ะ ผมใช้ firefox นะครับ พอเสร็จจะมีหน้าต่างแจ้งการโหลดทุกครั้งเลย  ถ้าขึ้นแบบนี้แสดงว่าเสร็จแล้วววววว

jqury_dowload_install_7

8. เราก็วิ่งจ้อนไปดู ณ ตำแหน่งที่เลือกเพื่อเก็บไฟล์เมื่อตะกี้นี้เลย เป็นไงได้แบบนี้เปล่า  ถ้าแบบนี้ละก็ แสดงว่ามาแล้ว เตรียมลุยกับตัวอย่างมันส์ ๆ กันต่อไป

jqury_dowload_install_8

สร้างไฟล์และทดลองใช้งานกันหน่อยยย

9. เริ่มด้วยการสร้างไฟล์ มีลำดับขั้นตอนแบบ step by step ดังนี้ครับ

  • 9.1 คลิกขวาที่เมาส์ บนพื้นที่ว่าง ๆ เพื่อเรียกเมนูขึ้นมา
  • 9.2 เลื่อนเมนูไปเรียกใช้คำสั่ง New
  • 9.3 เลือกรูปแบบไฟล์ที่จะใช้งาน เลือกเอาสักตัวครับ  ในที่นี้ผมเลือกตัวแรกเลย  (บางท่านอาจจะแปลกใจว่า เราจะเขียนด้วย Flash กันเหรอ  ขอตอบว่าเปล่าครับ พอดีตัวที่ผมเคยยกตัวอย่าง เช่น notepad มันอยู่ซะล่างไกลเลย เลยขอยกตัวอย่างตัวนี้ ก็ได้เช่นกันครับ ลองอ่านขั้นต่อไปดู มันทำได้ครับ อยู่ที่เราจะเล่นกับมันยังไง)

jqury_dowload_install_9

  • 9.4  ก็จะได้ไฟล์มาแบบนี้  เตรียมพร้อมต่อไป อย่าพึ่งทำอะไรนะ ให้สีน้ำเงินคลุมอยู่อย่างนี้ไว้

jqury_dowload_install_9_4

  • 9.5 พิมพ์ชื่อไฟล์ พร้อมด้วยนามสกุลของไฟล์ไปด้วย  ในที้นี้เราจะมาหัดเขียนด้วย PHP ผมเลยใส่นามสกุลเป็น .php ครับ จะใช้ .html ก็ไม่ว่ากันน่ะ แต่แนะนำให้ทำตามนี้ก่อนแล้วกันครับ เข้าใจแล้วค่อยไปประยุกต์ทีหลังก็ยังไม่สาย

jqury_dowload_install_9_5

  • 9.6 พอพิมพ์เสร็จก็เอาเมาส์ไปวาง ณ พื้นที่ว่าง ๆ แล้วคลิกเล่นดูครับ จะมีหน้าต่างปรากฎขึ้นมา
  • 9.7 หน้าต่างนี้ถามเราว่าต้องการจะเปลี่ยนชื่อไฟล์หรือไม่  ……. แหมเราตั้งใจจะเปลี่ยนอยู่แล้วนิ  ก็คลิกปุ่ม  Yes ไปได้เลย

jqury_dowload_install_9_6-7

  • 9.8  ก็จะได้ไฟล์อย่างที่เราตั้งใจไว้แล้วล่ะ เตรียมเขียนโปรแกรมต่อไป

jqury_dowload_install_9_8

เขียนสคริปต์แล้วทดสอบการแสดงผล

10. จะพาไปเขียนแบบ step by step อีกเช่นเคย ไปกัน ถ้ายังไม่เข้าใจก็ดู ๆ ผ่าน ๆ ไปก่อนก็ได้ครับ เพราะจะมาแยกซอย อธิบายแบบละเอียดกว่านี้อีกที  ลุยทั้งทีต้องถึงลูกถึงคน ฮ่ะ

  • 10.1  คลิกขวาที่ไฟล์ เพื่อเรียกโปรแกรมที่ไฟล์จะสามารถทำงานได้
  • 10.2 เลือก Editor ที่ใช้เขียนสคริปต์ ในที่นี้ผมขอลอง Editor ตัวใหม่ที่พึ่ง review ไปนะครับ

jqury_dowload_install_10_1-2

  • 10.3  สร้างโครงสร้างของ HTML ขึ้นมาก่อน (ที่จริงผมน่าจะยกตัวอย่างเป็น HTML เลยซะก็สิ้นเรื่อง จะได้อธิบายพวก HTMl ไปด้วยเลย ไม่เป็นไร ไหน ๆ ก็เลยตามเลยละกันฮ่ะ ไม่มีเวลาแล้ว)

jqury_dowload_install_10_3

  • 10.4  นำไฟล์ jQuery เข้ามาใช้งานก่อน  (รายละเอียดจะมาอธิบายในบทความต่อไป )
  • 10.5  ทดสอบสคริปต์ง่าย ๆ โดยการให้แสดงข้อความว่า Hello jQuery

jqury_dowload_install_10_4-5

  • 10.6  ขอไปทดสอบกันก่อน โดยพิมพ์ผ่าน web server จำลอง   ขอใช้ Google Chrome เป็นตัวทดสอบครับ
  • 10.7  ผลลัพธ์ที่ได้ เป็นไปตามที่เขียนไว้ มันแสดงหน้าต่างและมีข้อความว่า Hello jQuery

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

สวัสดีครับ

:razz: