เริ่มเขียน javaScript เพื่อใช้ใน jQuery

เริ่มเขียน javaScript เพื่อใช้ใน jQuery

หากใครที่ไม่เคยใช้ jQuery อาจจะหลับตานึกภาพไม่ออกเลย ว่ามันเอามาใช้ได้อย่างไร ทำงานแบบไหน ไม่ต้องกังวล เพราะว่าผมก็เป็นคนนึงที่เคยเป็นมาก่อน แล้วก็พึ่งใช้เป็นได้ไม่นานนี้เอง(ไม่ถึงปี) ดังนั้น ไม่ยาก หากเราทำใจให้ว่างแล้วเปิดรับมันครับ

เริ่มต้นการใช้งาน jQuery จากในบทความก่อนนั้นเราได้รู้แล้ว ว่าเราจะเริ่มต้นอย่างไร คราวนี้เรามาเขียนจริงๆกัน

ปกติของ javaScript เรานิยมการเขียนเอาไว้ที่ Header ดังนั้น ส่วนของสคริปทั้งหมดก็จะเขียนไว้ใน header เว็บด้วยนะครับ โดยส่วน สคริปที่เราเขียนเพิ่มขึ้นมานี้ จะต้องเขียนอยู่หลังจากบรรทัดที่เรียกใช้ไฟล์ javaScript เข้ามาในหน้าเว็บเท่านั้น ห้ามเขียนก่อน เพราะว่ามันจะไม่ทำงาน ดังตัวอย่างที่ถูกต้องนี้

<script type="text/javascript" src="jq142.min.js"> </script> <script type="text/javascript"> <!-- $(document).ready(function() { $(".testhidecontent").hide();  $(".testhideshow").css("cursor","pointer");  $(".testhideshow").click(function () {        $(".testhidecontent").toggle();      }); }); //--> </script>

ก็คือ เรียก jQuery เข้ามาในเว็บก่อน แล้วจึงค่อยเขียน script ให้ทำงานตามที่เราต้องการ

สำหรับการเขียน jQuery นั้นเราต้องเขียนเอง โดยเรียกผ่านตัวช่วยต่างๆที่ jQuery เตรียมเอาไว้ให้ เช่น เราต้องการให้กระทำต่อ object ใดๆในหน้าเว็บ ที่มี class="testhidecontent" เราก็จะเขียนได้ว่า $(".testhidecontent") ซึ่งเจ้าตัวนี้เค้าเรียกว่า selector เอาไว้สำหรับเลือก ว่าจะ action ที่ object ใดในหน้าเว็บ ซึ่งเงื่อนไขการระบุแบบเจาะจงค่อนข้างเยอะ แต่เอาไว้วันหลังครับ

จากโค้ดตัวอย่างนี้ ผมก็เขียนโค้ดในส่วนหน้าเว็บได้ดังนี้

<div class="testhideshow">คลิกตรงนี้เพื่อซ่อน หรือแสดงข้อความ</div> <div class="testhidecontent">ข้อความตรงนี้ถูกซ่อนอยู่</div>

เปิดทดสอบโค้ด (Demo) เพื่อดูการแสดงผลสิ่งที่เราจะได้รับ จะเห็นว่าข้อความบรรทัดแรกนั้น คลิกเพื่อเปิด และ ปิด ข้อความในบรรทัดที่สองได้

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

  1. เรียกโค้ดของ jQuery เข้ามาใส่หน้าเว็บ หากไม่มีเราก็จะใช้งาน jQuery ไม่ได้
  2. เปิดการทำงานของส่วน javascript เพื่อให้ web browser แยกออกว่านี่คือส่วนของ javascript  ไม่ใช่ html
  3. ส่วนนี้เป็นเทคนิคเพื่อให้ javascript ไม่ทำงาน และซ่อนเป็น comment หน้าเว็บตามปกติ สำหรับ browser ที่ไม่รองรับ javascript
  4. ส่วนนี้บอกให้รู้ว่า ให้ทำงาน function ทุกอย่างที่อยู่ด้านในทันที เมื่อ load หน้าเว็บเสร็จ ลักษณะเดียวกับ action onload นั่นล่ะครับ แต่บางสคริป ไม่จำเป็นต้องใช้ก็ได้  แต่บางตัวหากไม่สั่ง onload ก็จะไม่ทำงานครับ
  5. กระทำให้ class ที่ชื่อ testhidecontent ทั้งหมด ซ่อนการแสดงผลจากหน้าเว็บ
  6. กระทำให้ class ที่ชื่อ testhideshow เปลี่ยน css โดยให้มี cursor เป็น pointer เหมือนเราเขียน css ว่า cursor:pointer; นั่นล่ะครับ
  7. ดักจับการกระทำของ class ที่ชื่อ testhideshow ว่ามีการคลิกเมื่อไร ให้ดำเนินการตาม function ภายใน
  8. ต่อเนื่องจากบรรทัดที่ 7 เมื่อมีการคลิกเกิดขึ้นก็จะกระทำให้  class ที่ชื่อ testhidecontent เกิดการ toggle โดยการ toggle ก็คือการสลับปิดและเปิด สลับไปเรื่อย
  9. ปิดการทำงานจากข้อที่ 7
  10. ปิดการทำงานจากข้อที่ 4
  11. ปิดการทำงานจากข้อที่ 3
  12. ปิดการทำงานจากข้อที่ 2

จบแล้วครับ หากลองค่อยๆทำความเข้าใจ จะรู้ว่าใช้ไม่ยากครับ แล้วถ้าได้ลองใช้เยอะๆก็จะรู้เลย ว่าไม่ยากจนเกินไป ถ้าคนที่มีพื้นฐาน programming ก็จะไปได้เร็วหน่อย แต่ถ้าพอเข้าใจและจะเห็นว่า ปัญหาต่อไป ก็คือเราจะเอาคำสั่งของ jquery เช่น .css .hide .toggle และอื่นๆมาจากไหน และแต่ละคำสั่ง ใช้งานได้อย่างไร.....  ไม่ต้องเป็นห่วงครับ เดี๋ยวเราจัดมาให้ครับ ติดตามกันต่อไปนะครับ

Create: Modify : 2010-07-23 10:07:28 Read : 9644 URL :