ฟอนต์ฟอรั่ม

jQuery ref. แบบไทยๆ
ตัวอย่างน้อยไปหน่อย แต่ก็โอเค  :12:

http://code.function.in.th/jquery (http://code.function.in.th/jquery)

:25:

เดี๋ยวนี้พวก jquery นี่กำลังมามากๆ
เห็นว่าหลายบ. เขาเริ่มไม่เอา flash เพราะว่าเปิดใน iphone หรือ อื่นๆ ไม่ได้
ต้องหาอะไรวื้บๆ ด้วยการใช้ไอ้พวกนี้แหละ

ช่าย ทับถมอีก่ออยู่ทุกวัน :30:

 :07: ไม่เอาแฟลช!!

แยกกระทู้เป็น jquery เลยดีมั้ย

(เอาไปอยู่ห้อง flash  :49:)

ลบห้องแฟลชออกก็หมดเรื่อง :52:

แตกจู๋ jquery ก็ดีนะครับ อยากศึกษาดู

แตกมาแล้วจ้ะ


เอาล่ะ งานเข้าพี่เจนแล้ว เชิฺญสอนได้เลยครับ :46:

ตูรู้เรื่องซะที่ไหนเล่า  :0705:

จู้ๆ

เย้ พี่เจน เริ่มเลยครับ   :30:

 :25: กรี้ด

 :05: เชอะ พี่แอนอ้ะ..

แต่ช่วงนี้ก็เล่น jQuery บ่อยนะฮะ ว่างๆ มาสอนมั่ง :25:

ก่อสอนเลย

เอาเลยๆ  :25:

เอ่อ เคยเห็นใน joomla ไม่รู้มันคืออะไร

หน้าตามันก็คือภาษายุกยิกอย่างนึง (ใช่ไหม)

มี plugin สนุกๆ เยอะนะครับไอ้ jquery เนี่ย แต่ script มันบวมอะ :05:


http://ftp.upic.me/show/14944200 (http://ftp.upic.me/show/14944200)
เหมือนอย่างหน้าเนี้ย แค่ไอ้ปุ่มหมุนรูปด้านขวานั่นก็ซัดไป 3 plugin แล้ว

jquery
jquery-rotate
jquery-tooltip
jquery-tooltip-slide

ไหนจะ jquery lightbox ที่ใช้คลิกขยายรูปใหญ่ๆ อีก :05:

เดี๋ยวมี google maps api อีกตัวด้วย :07a: นี่ก็ตัวใหญ่

 :25:  แปะๆ

อ้างคำพูดจาก: X11 เมื่อ 16 ก.ค. 2010, 22:14 น.
:25:  แปะๆ

แปะรอพี่เจนสอน  :25:

ไปตามต้นกบมาสอนไป๊  :07:

ไอซ์ด้วย

สนใจ :25:

คือชอบมันวิ้บๆ นี่แหละ แต่ยังไม่เคยไปศึกษาดูซักที ว่ามันเขียนยังไง ภาษาหน้าตาเป็นยังไง



เพิ่งศึกษา PHP ได้อาทิตย์ดียวเอง เอาให้จบทีละภาษาก่อนดีกว่า  :05:

พี่เจนสู้สู้ :25:

 :25:

มึงนั่นแหละอีบิ๊ก สอนคู่กะพี่เจนเลย :07:

ผ่านไป 2 หน้า มีแต่โบ้ย  :30:

เดี๋ยวก็สแกนหนังสือมาแปะแม่มเลย   :58:

จะแตกมาทำไมเนี่ย  :30:

อ้างคำพูดจาก: blackRabbit เมื่อ 17 ก.ค. 2010, 12:38 น.
จะแตกมาทำไมเนี่ย  :30:

:30:

กลับประเด็นดีกว่า สงสัยว่า jquery (แต่แรกผมชอบพิมพ์ว่า jqwerty) มันคืออะไร ในภาษาของพี่ๆครับ
อีกอย่างคือเห็นในแอนอร่อยมี jquery ในเวิร์ดเพรส เราจะประยุกต์ใช้..ได้ยังไงครับ :09:

แปะๆ รอพี่เจนอีกคน

เอาสั้นๆ ง่ายๆ jQuery คือ java script library ที่สามารถเข้าถึง+จัดการกับส่วนต่างๆ ของหน้าเว็บได้ เช่น HTML, CSS
และสามารถดักจับเหตุการณ์ต่างๆ ตามที่ java script จะทำได้
ทำให้เอามาประยุกต์ใช้สร้างลูกเล่นวืบๆ ได้เยอะแยะตามที่เห็นในแอนอร่อย

ทีนี้ไอ้ลูกเล่นพวกนี้ ไม่ต้องเป็น jQuery ก็ทำได้เหมือนกัน
แต่ jQuery มันเจ๋งตรงที่มันเตรียมเครื่องมือจัดการโน่นนี่นั่นมาให้หมด

คนที่พอเข้าใจ java script, รู้จัก HTML DOM ก็จะเอามาประยุกต์ใช้ได้ง่ายมากๆ  :12:
เลยทำให้เกิด jQuery Plugin โผล่ขึ้นมาให้เราเลือกใช้กันบานตะไทเช่นนี้แล :25:

ขอบคุณครับพี่เจน  :25:

แปลเป็นภาษาแอนว่า ปกติเราต้องมานั่งเขียน JavaScript เยอะแยะให้มันเกิดอะไรวื้บๆ
แต่ไอ้ jQuery เนี่ยมีฝรั่งเขาเขียนรวบเป็นชุดๆ ให้อยู่แล้ว
แค่อัญเชิญตัวแม่มันมาประทับ (เรียก jquery.js)
ตามด้วยตัวลูก (เขาเรียกปลั๊กอิน) จะให้เป็นอะไรก็แล่วแต๊
(เช่นจิ้มแล้ววื้บๆ หรือเด้ง หรือเปลี่ยนสี หรือโหลดหน้าอื่นมาเสียบแทน ฯลฯ)

ส่วนใน WordPress นั้น
เขามีตัวแม่ประทับ ติดตั้งควบไว้อยู่แล้วครับ
ถ้าอยากใช้ตัวลูกตัวไหนก็เอามาเสียบได้เลย ไม่ต้องเรียกแม่ซ้ำอีกที

ทั้งหมดนี่คืออธิบายภาพรวมนะ ให้ตูเขียน แน่นอน เขียนไม่เป็น :52:

โอเคจบแล้วสำหรับ jquery  :47:

อ้างคำพูดจาก: ปิยะ เมื่อ 17 ก.ค. 2010, 14:26 น.

โอเคจบแล้วสำหรับ jquery  :47:

:0705:

 :05: เหมือนจะง่าย แต่สำหรับเราคงยาก

แบบว่า wp , joomla เป็นแม่
ส่วน extension ที่โหลดๆมาใส่ คือลูกๆของมันที่มีคนทำมาให้ใช้แล้ว



งี้เหรอ ?

เปล่าๆ
คือ..
jQ เนี่ยมันคือการเขียน javascript ให้เป็นคำสั่งรวมๆ กันง่ายๆ
แล้ว jQ เนี่ยมันก็มีคนเอาไปเขียนนู่นนี่มากมาย
เวลาจะใช้ก็ต้องไปเรียกใช้ jQ

ตัวแม่ในที่นี้หมายถึง jQ
แต่ wp มันเรียก jQ ให้เลย
ก็ไม่ต้องมาเรียกเอง เอาสคริปของ jQ มาวางก็ใช้ได้เลย ประมาณนั้น

ยิ่งงง

ไม่ใช่ครับ

ไอ้คำว่าแม่ของแอนอันนั้นหมายถึงโบว์ เฮ้ย ไม่ใช่ๆ หมายถึงตัวไฟล์ที่ชื่อว่า jquery-[version].js ซึ่งเป็นตัวรวบรวมจัดการอะไรต่างๆ นาๆ ให้เราเอามาเขียนโปรแกรมต่อยอดได้สะดวกขึ้น ไม่ต้องเขียนแบบถึกๆ เหมือนเมื่อโบราณกาล :58:


เปรียบเทียบให้เข้าใจง่ายขึ้น(รึเปล่า?)
มอง wp หรือ joomla เป็น OS Windows
jQuery คือ library ซึ่งมีอยู่แล้วใน windows
ทีนี้สมมุติเราจะเขียนโปรแกรมขึ้นมาอันนึง เอาเป็น notepad ก็แล้วกัน
เราสามารถเรียกใช้หน้าต่างการเปิดไฟล์, การเซฟไฟล์ หรือการรับข้อมูลจากคีย์บอร์ด จาก library ของ windows ได้เลย
โดยไม่ต้องมานั่งเขียนโค๊ดหาตำแหน่งเมาส์ หรือเขียนการรับค่าจากคีย์บอร์ดพวกนี้เอง

งงกว่าเดิมใช่มั้ย  :05:


โอว ปั่นกันกระจุย มีคนตัดหน้าคุณตั้ง 2 คนแน่ะ

เออใช่ๆ นั่นแหละๆ
มีตัวพ่อ มัตัวแม่ มีตัวลูก
งงกว่าเก่า :30:

 :07: โอว ปั่นกันกระจุย มีคนตัดหน้าคุณตั้ง 2 คนแน่ะ

:30: จริงๆเข้าใจแบบนั้นก็ถูกนะครับ แนวคิดมันคืออย่างงั้นเลย

เนื้อหามันค่อนข้าง programming ก็น่างงจริงๆแหละ

มันเหมือนกัน คำสั่งสำเร็จรูป น่ะครับ เราไม่ต้องเขียนโค้ดเองทั้งหมด
แค่โยน ค่าตั้งต้นเข้าไป เดี๋ยวมันจะส่งผลลัพธ์ออกมาให้เอง

ยกตัวอย่างง่ายๆ เราจะหาพื้นที่วงกลม ปกติต้องคำนวณ ใส่สูตรเอาเอง
แต่มีวิธีที่ง่ายกว่านั้น คือหันไปถามเพื่อน  :30:

เรา : เฮ้ย วงกลมรัศมี 7 cm เส้นรอบวงเท่าไหร่
เพื่อน : 44 cm

เราได้คำตอบ โดยที่เราไม่จำเป็นต้องรู้ว่าคำนวณยังไงด้วยซ้ำ

นั่นแหละเพื่อนเราคือ jquery ครับ

----
ถ้าเพื่อนตอบว่าไม่รู้ก็ตัวใครตัวมันครับ  :30:

อะไม่พ่อแม่ลูกก็ได้ :30:

- เขียนเว็บใช้ html
- ทำเอฟเฟกบนเว็บใช้ javascript
- ทำเอฟเฟกเวอร์ javascript มันต้องเขียนเยอะ เลยมีคนจับมารวมกันเป็นก้อนๆ ให้เรียกใช้ง่ายๆ ในชื่อ jQuery
- แล้วก็มีคนเอา jQuery มาเขียนต่อเป็นเอฟเฟกแบบต่างๆเป็น plugin ต่างๆ

ทีนี้
- เวลาจะใช้ jQuery ต้องไปเรียก jquery-[version].js
- แต่ใน wp ไม่ต้องเรียกเองเพราะ wp มันเรียกให้

นั่นแหละๆ

เอ้า จบ.... ล๊อกกระทู้เลยครับ :58:

ตอนแรกเหมือนจะเข้าใจแล้วนะ

มาเจอตัวพ่อตัวแม่นี่กลับไปงงเหมือนเดิมแล้ว  :58:

:52:

เข้าใจหล่ะครับ.. ล๊อคกระทู้เลย :52:

ตะกี้ก็แนะนำกันไปแล้ว
ต่อไปพี่เจนจะพาพวกเราเข้าสู่บทที่ 1 กันนะครับ :12:

Lesson one  บทที่หนึ่ง ... ง ง

จุ๋ย จุ๋ยส์ - บทที่ ๑ [Lesson 1] Music Video (http://www.youtube.com/watch?v=BP3AU9Usqe0#)

R-A-T แรทหนู

บทที่ 1
http://jquery.com/ (http://jquery.com/)
บทที่ 2
http://jqueryui.com/ (http://jqueryui.com/)

จบละ :47:

ใครมาสอนซักคนสิอยากรู้เหมือนกัน :05a:

ลทที่ 1 ว่ากันด้วยนเรื่อง selector เตอ้ออๆๆๆๆ    :37:





ตอนนี้ตูเมา เดี่ยวสร้่างแล้วว่ากันอีกที 

เอาตอนเมาๆ นี่แหละ :07:

ขอเริ่มด้วยการพัฒนาหน้าเว็บก่อนแล้วกันนะครับ
หน้าเว็บหลักก็ประกอบด้วย
  - HTML สำหรับการแสดงผลบนหน้าเว็บ(Webpage Rendering)
  - Media and Objects เช่น ภาำพ เสียง flash ..etc เพื่อให้เว็บมีความน่าสนใจ
  - Cascading Style Sheets (CSS) ตามชื่อของมันที่คนไทยมักใช้ทับศัพท์ในหลายๆที่ว่าสไตล์คือเป็นตัวกำกับรูปแบบการแสดงผลในของ Website (เน้นคำว่า Website คือมันมากกว่า 1 หน้า
  - Javascript เป็น script (บทกำกับ หรือ โปรแกรมเล็กๆ)ที่จะใช้กำหนดการทำงานของเว็บในส่วนต่างๆ ซึ่งในส่วนประกอบของหน้าเว็บ(Document Object Model(DOM))

:07: กรี๊ดดดด จานเหนกมา พวกเราหลบ

หลบไปไหน
นั่งเรียนต่อสิ :07:
:46:

จากส่วนประกอบที่สำคัญในการเขียนโปรแกรมกำกับหน้าเว็บก็คือ Javascript ซึ่งมีแหล่งข้อมูลหรือตำรามากมายเืพื่อใช้เขียนโปรแกรมกำกับหน้าเว็บ เลยมีคนคิดว่าทำไมไม่ทำเป็นชุดคลัง(JavaScript library)ของ Javascript ให้ใช้กันเลยละ? ก็มีคนและทีมพัฒนาที่พยายามสร้าง  library กันมากมายเพื่อให้ใช้กันมากมาย ก็มีตัวที่นิยมใช้ก็มี Ext Core (http://www.sencha.com/products/core/),MooTools (http://mootools.net/),Ext JS (http://www.sencha.com/deploy/dev/examples/) และ 1 ในนั้นคือ jQuery (http://jquery.com/) ซึ่ง jQuery มีขนาดเล็กแต่สามารถทำอะไรได้หลายอย่างที่จำเป็นในการเขียน Javascript
คุณสมบัติของ jQuery ได้แก่
- รูปแบบของภาษา(syntax)ง่ายต่อการจัดการ ท่องไปส่วนต่างๆ(navigate a document/document traversing) และ เลือกส่วนต่างๆของหน้าเว็บ(select DOM elements) โดยการเขียนไม่ยึดติดกับ browser
- จัดการเหตุการณ์(event handling) ต่างๆได้ดี  เพิ่ม Event ลงในหน้าเว็บตามแต่ใจต้องการ
- การจัดการ CSS สามารถเพิ่ม/ลบ class ,id
- ทำ Effects and Animating ได้ดี
- ทำส่วนติดต่อกับ AJAX ได้ดี (Ajax interactions)  ได้ง่ายขึ้นโค้ดสั้นลง
- สามารถสืบทอดคุณสมบัติของ Jquery (มีลักษณะของ OOP)
- สามารถจัดการและสร้าง User Interface
- Jquery สามารถใช้งาน ร่วมกับ server-side scripting languages ได้หลากหลายภาษา ไม่ว่าจะเป็น PHP,JSP,Perl,ASP.Net
- ที่สำคัญสามารถเพิ่มขยายความสามารถของ Library โดย Plugins

note:
 Library ของ Javascript ซึ่งเป็นกรอบการทำงาน(JavaScript frameworks) สามารถดูได้จาก wiki อันนี้ (http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)

ตัวที่ทำให้ jQuery มีน่าสนใจขึ้นมาก็คือการทำ Slide หรือ Galleries แบบวืบๆได้ดี เช่น Galleria (http://galleria.aino.se/)
แล้ว jQuery ทำอะไรได้
- ดูได้จากที่นี่ (ห้ามพลาด) 50+ Amazing Jquery Examples (http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html)
- ถ้ามีส่วนเสริมก็ทำอย่างนี้ได้ 45+ Fresh Out of the oven jQuery Plugins (http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html) และ 37 More Shocking jQuery Plugins (http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html)

ถ้าสนใจจะเริ่มหรือดูตัวอย่างได้ที่ไหน
- ขั้นแรก download โลด ที่ http://jquery.com/ (http://jquery.com/)
- ขั้นถัดมาอ่านๆๆๆลองๆๆๆ โดยสามารถหาตัวอย่างและข้อมูลภาษาไทยได้ดังนี้
  http://www.jquery.in.th/ (http://www.jquery.in.th/) ตัวอย่าง classic คือ Hello World (http://www.jquery.in.th/jquery-hello-world/)
  http://www.jquerytips.com/ (http://www.jquerytips.com/)
  http://www.select2web.com/tag/jquery (http://www.select2web.com/tag/jquery)
  http://sites.google.com/site/jqueryprogrammer/  (http://sites.google.com/site/jqueryprogrammer/)
 

อ้อ อีกอย่างที่ทำให้ jQuery ติดตลาดเพราะบริษัทใหญ่ๆให้การต้อนรับ แม้กระทั่ง Microsoft ซึ่งผนวก jQuery เข้ากับเครื่องมือพัฒนาหลัก Visual Studio
 

 

แถม HTML5 (กันการตกยุค) ^^

http://www.youtube.com/v/EdDc7sWjCL4

:46: :25: ขอบคุณครับ ชอบๆ เริ่มต้นทำความเข้าใจได้เลย


ทีนี้อยากทราบภาษา ปกม.หน่อยครับ ไม่รู้จักจริงๆ :05:
DOM / OOP คืออะไรครับ :05:

DOM : Document Object Model << ส่วนต่างๆ ของหน้าเว็บอย่างที่ อจ. ซัน บอกนั่นแหละ
OOP : Object-Oriented Programming << แปลเป็นภาษามนุษย์ว่าอะไรดีล่ะ

:25:  เดี๋ยวว่างแล้วตามมาเรียนต่อนะ

OOP การโปรแกรมเชิงวัตถุ  :25: 

มองทุกสิ่งเป็นวัตถุ มีคุณสมบัติ และ สามารถทำอะไรบางอย่างได้

ไอ้วัตถุเนี่ยแหละงงครับ
มีคนพูดกันเยอะแต่ก็นึกไม่อกว่ามันยังไงต่อ :05:

ให้นึกว่าเป็น block ละกันครับ

เว็บนึงก็คือกล่องใหญ่ๆ กล่องนึง
ในกล่องมีอันโน่นอันนี่ยัดๆ ไปเรื่อยๆ ซ้อนๆ กัน
แต่ละกล่องก็จะมีข้อมูลในกล่อง(หรือไม่มีก็ได้) หรืออาจมีกล่องซ้อนอยู่อีก

ประมาณนี้แหละครับ
ทีนี้พอมันซ้อนๆ กันหลายกล่องเราก็ต้องมีวิธีอ้างอิงกล่องให้ถูกต้อง
ซึ่ง jquery ใช้วิธีอ้างอิงแบบเดียวกับ css เลยครับ

ถ้าเคยเขียน css มาแล้วก็เหมือนกันเป๊ะๆ เลย


อย่างสมมติ css

div#wrapper { .... }

ใน jquery เวลาจะทำอะไรกับไอ้ div อันนี้ก็เรียกโดย $("div#wrapper") หรือ $("#wrapper") ได้เลยครับ

อ้างคำพูดจาก: iannnnn เมื่อ 17 ก.ค. 2010, 23:27 น.
ไอ้วัตถุเนี่ยแหละงงครับ
มีคนพูดกันเยอะแต่ก็นึกไม่อกว่ามันยังไงต่อ :05:

โอ้ อาจจะต้องอธิบายกันยาวหน่อยนะครับ เรื่องของ OOP

เพราะจะมีเรื่องคุณสมบัติของ OOP อีกหลายประการเลย

ซึ่งการถ่ายทอดคุณสมบัติที่ลุงซันกล่าวไว้ ก็เป็นหนึ่งในนั้นครับ

อ๋อๆ ในทางวิชาการเรเรียกมันว่า "ดุ้น" ใช่ไหมครับ

อ้างคำพูดจาก: ต้น เมื่อ 17 ก.ค. 2010, 23:42 น.
โอ้ อาจจะต้องอธิบายกันยาวหน่อยนะครับ เรื่องของ OOP

เพราะจะมีเรื่องคุณสมบัติของ OOP อีกหลายประการเลย

ซึ่งการถ่ายทอดคุณสมบัติที่ลุงซันกล่าวไว้ ก็เป็นหนึ่งในนั้นครับ

สรุปแล้วคืออย่าไปสนมันอะครับ

อ้างคำพูดจาก: icez เมื่อ 17 ก.ค. 2010, 23:46 น.
สรุปแล้วคืออย่าไปสนมันอะครับ

ครับ อย่างที่ไอซ์ว่า อาจจะรู้ว่ามันมี OOP อยู่ในนั้น แต่อาจจะไม่ต้องสนมันมากก็ได้ครับ

เราก็ยังสามารถเล่นกับ JQuery ได้อย่างสนุกอยู่  ถ้าสนใจเรื่อง OOP จริงๆ ก็  ...











หาอ่านครับ  :47:






อ้อ แตกออกมาว่าด้วยเรื่องของ OO Programming เลยน่าจะดีกว่า

DOM ไม่เคยเรียน
เรียนแต่ OOP  :05:

อ้างคำพูดจาก: X11 เมื่อ 16 ก.ค. 2010, 22:14 น.
:25:  แปะๆ

OOP นี่ผมเรียนเป็นเทอมกว่าจะเข้าใจ  :3005:

เนื้อหาน่างง และต้องมีพื้นฐาน programming พอควร

--
เวลาเรียนอาจารย์จะไม่เรียก inheritance แต่จะเรียกว่า สืบสันดาน แบบเน้นๆ  :30:

ขอ DOM กับ OOP แบบจริงจังหน่อยได้มั้ยครับ

อยากรู้ อยากรู้  :25:

Document Object Model(DOM) พูดแบบง่ายๆก็แล้วกันนะครับ มันคือรูปแบบ(Model) ที่จะบอกว่าส่วนประกอบของ หน้าเว็บ HTML(หรือ อาจเป็น XML ก็ได้) ประกอบด้วยส่วนต่างๆอะไรบ้าง ดูในรูปที่อ้างจากองค์การกำหนดมาตรฐานเว็บ(W3C)และคนเขียน Web Browser และ JavaScipt คนแรก(คือ Netscape) แล้วกันนะครับ

อ้างอิงจาก DOM ของ Netscape
(http://www.wdvl.com/Authoring/DHTML/DOM/Images/nav_hier.gif)

อ้างอิงมาตรฐาน DOM ขององค์การกำหนดมาตรฐานเว็บ(W3C)แ
(http://www.w3.org/TR/2004/PR-DOM-Level-3-Core-20040205/images/dom-architecture.png)
(http://www.w3.org/TR/2004/PR-DOM-Level-3-Core-20040205/images/table.png)

อ่านข้อกำหนดของ DOM ได้ที่ http://www.w3.org/TR/2004/PR-DOM-Level-3-Core-20040205/introduction.html (http://www.w3.org/TR/2004/PR-DOM-Level-3-Core-20040205/introduction.html)

อธิบาย OOP ก็นึกตามนี้นะ

ดุกเขียนฟังก์ชั่นขึ้นมา 2 อัน (ก็เป็นโปรแกรมอ่ะล่ะ)
ฟังก์ชั่นที่ 1 ชื่อหมี ฟังก์ชั่นหมีอันนี้สามารถพูดคำว่าอะไรก็ได้ ได้ 100 ครั้ง
ฟังก์ชั่นที่ 2 ชื่อกล้วย ฟังก์ชั่นกล้วย สามารถผวนคำได้ทุกคำในโลก


ทีนี้ OOP ทำงานยังไง

ดุกก็ทำหน้าเว็บเพจอันนึง ดุกต้องการให้หน้าเพจนี้ รับคำอะไรก็ได้ผ่านไมค์ พอ run โปรแกรมแล้ว
โปรแกรมจะพูดคำผวนจากคำที่เราพูดใส่ไมค์นั้นได้ 100 ครั้ง

ดุกก็ไปเรียกไอ้ฟังก์ชั่นหมี กับฟังก์ชั่นกล้วยมาก่อน เพราะจะใช้งานในหน้าเพจนี้แหละ
เสร็จปั๊บดุกก็สั่งฟังก์ชั่นกล้วยให้ผวนคำอะไรก็ได้จากการรับข้อมูล สมมติว่าพูดใส่โปรแกรมละกัน
และก็สั่งให้ฟังก์ชั่นหมีพูดคำนั้นออกมา 100 ครั้ง


พอรันโปรแกรมปั๊บ เราพูดใส่ไมค์ไปว่า "อรทักษแอฟ"
โปรแกรมก็จะพูดคำว่า "แอฟทักษอร" 100 ครั้ง ค่ะ



ซึ่งแน่นอนว่าเว็บ 1 เว็บไม่ได้มีโปรแกรมนี้อันเดียวแน่ ๆ
เวลาดุกเขียนโปรแกรมอื่นนอกจากนี้แล้ว
ต้องการคุณสมบัติการทำงานของฟังก์ชั่นหมี ที่พูดได้ 100 ครั้งโดยไม่ต้องมานั่งพิมพ์คำสั่งให้มันพูดเป็นจำนวนร้อยบรรทัด
หรือเขียนคำสั่ง for / while loop ซ้ำ ๆ กันในเว็บเดียว แต่มีหลายเพจ
(ที่จริงสามารถ include มาได้โดยที่ไม่ต้องมาเขียนใหม่ในทุก ๆ หน้าเพจใหม่)
สู้ไปเรียกฟังก์ชั่นหมีมารับข้อมูลไปประมวลผลไปเลยจะง่ายกว่า โค้ดดิ้งสะอาดกว่า (ไม่รก) แถมโปรแกรมประมวลผลไวกว่าด้วยค่ะ

การเขียนโปรแกรมแนว Object-oriented programming ขอพูดคราวๆแล้วกันนะครับ (ใครมีประเด็นไหนถามเอาอีกทีแล้วกันนะครับ)
เดิมการเขียนโปรแกรมจะเน้นการเขียนแบบเชิงกระบวนการ(Procedural Programming) แต่ในโลกความเป็นจริงสิ่งต่างๆรอบตัวเรามักอิงจากวัตถุ(Object-oriented) การเขียนโปรแกรมก็น่าจะประยุกต์จากแนวคิดของเชิงวัตถุได้ (ในภาษาไทยนั้นวัตถุจะหมายถึงสิ่งจับต้องได้ แต่ Object-oriented อาจเป็นทั้งนามประธรรมและรูปประธรรมได้) แนวความคิดของการเขียนโปรแกรมแบบ OOP มีอะไรบ้าง พูดคราวๆดังนี้
ในโลกของ OOP เรามักจะยกตัวอย่างของ Object เป็น โทรศัพท์ (เรามาดูว่าภาพรวมของโทรศัพท์ในแนวความคิดของ Object มีอะไรบ้าง)

หมายเหตุ: เราจะแทนลักษณะของการเขียนโปรแกรมเชิงวัตถุว่า Class ซึ่งเป็นการจัดจำพวกวัตถุที่มีลักษณะเดียวกัน เช่น Class ของเก้าอี้,Class ของโต๊ะ หรือ Class ของโทรศัพท์ Nokia N-Series ถ้าพูดถึงตัวใดตัวหนึ่ง(Instance)ใน Class เราจะเรียกสิ่งนั้นว่า Object

- ซ่อนส่วนรายละเอียดและข้อมูลไว้ภายใน เปิดเผยเฉพาะส่วนที่จะนำไปใช้งานเท่านั้น ซึ่งเรียกว่าการห่อหุ้ม(Encapsulation) คือเราไม่จำเป็นต้องรู้ว่าภายในโทรศัพท์จะมีอะไรบ้าง เรารู้แค่วิธีใช้มัน(method) หรือ มีอะไรจะเกิดจากมันบ้าง(Event) เช่น มีเสียงเรียกเข้า
- สามารถสืบทอดได้(Instance) เช่นเรามีต้นแบบของโทรศัพท์รุ่นใดรุ่นหนึ่ง เราก็สามารถพัฒนาต่อยอดโทรศัพท์รุ่นดังกล่าวโดยไม่จำเป็นต้องเริ่มทำใหม่ทั้งหมด แค่เพิ่มบางสิ่งบางอย่างเข้าไป หรือ ตัดบางสิ่งบางอย่างออก หรือ เปลี่ยนแปลงบางสิ่ง(Override) เช่นเดียวกับการเขียนโปรแกรม ถ้ามีการเขียนต้นฉบับ(Class) เราสามารถสืบทอด Class นั้นไปใช้งานได้เลย ข้อดีก็คือเมื่อคนเขียน Class ต้นฉบับได้สมบูรณ์เราสามารถนำส่วนนั้นมาใช้งานได้อย่างมีประสิทธิภาพ(ไม่ต้องกลัวหรือกังวลใดๆเพราะเขียนไว้ดีอยู่แล้ว) เราแค่มาเพิ่ม/ลด/เปลี่ยนแปลงส่วนต่างๆที่เราต้องการเท่านั้น (ในเรื่อง jQuery ก็คือเขามีส่วนต้นฉบับให้เราจะมาเพิ่ม/ลด/เปลี่ยนแปลงได้โดยส่วนที่เหลือยังคงสภาำพการทำงานหรือใช้งานได้ดีเหมือนเดิม .. ลองนึกถึงโทรศัพท์ที่ส่วนต่างๆใช้งานได้ดีอยู่แล้ว แต่เอามาเพิ่ม/ลด/เปลี่ยนแปลงบางส่วน เอาง่ายๆเช่น เอากล้อง 2 ล้านออก เอา 5 ล้านใส่ .. ฯลฯ)

เอาแค่นี้ก็พอได้ส่วนที่เกี่ยวข้องกับ jQuery แล้วนะครับ ส่วนรายละเอียดเรื่อง OOP มีอีกมาก สามารถศึกษาได้จาก http://en.wikipedia.org/wiki/Object-oriented_programming (http://en.wikipedia.org/wiki/Object-oriented_programming) รวมถึงการพัฒนาของ OOP ไปอีกขั้นในแบบ Design Pattern (http://en.wikipedia.org/wiki/Design_pattern_%28computer_science%29) หาอ่านและศึกษาได้ในตำราการเขียนโปรแกรมยุดใหม่ได้นะครับ

แค่นี้แล้วกันเนอะ เดี๋ยวจะชวนปวดหัว  :35:

อ้างคำพูดจาก: ดุกศรี เมื่อ 18 ก.ค. 2010, 00:50 น.
....
......
........
ซึ่งแน่นอนว่าเว็บ 1 เว็บไม่ได้มีโปรแกรมนี้อันเดียวแน่ ๆ
เวลาดุกเขียนโปรแกรมอื่นนอกจากนี้แล้ว
ต้องการคุณสมบัติการทำงานของฟังก์ชั่นหมี ที่พูดได้ 100 ครั้งโดยไม่ต้องมานั่งพิมพ์คำสั่งให้มันพูดเป็นจำนวนร้อยบรรทัด
หรือเขียนคำสั่ง for / while loop ซ้ำ ๆ กันในเว็บเดียว แต่มีหลายเพจ
(ที่จริงสามารถ include มาได้โดยที่ไม่ต้องมาเขียนใหม่ในทุก ๆ หน้าเพจใหม่)
สู้ไปเรียกฟังก์ชั่นหมีมารับข้อมูลไปประมวลผลไปเลยจะง่ายกว่า โค้ดดิ้งสะอาดกว่า (ไม่รก) แถมโปรแกรมประมวลผลไวกว่าด้วยค่ะ

อันนี้ยังเป็นตัวอย่างที่ใกล้เคียงแต่ยังไปไม่ถึง OOP ครับ ยังเป็นลักษณะของ Procedural Programming ที่อาจมี subroutine หรือ function มาช่วยงาน

OOP
For example is vehicle
And one type of vehicle is car

Car object is made by wheel, engine, roof, seat, etc
Each part on OOP meaning can do something that part special

Wheel can cycling.
Engine can run motor and generate house power.
Seat can sit.

On each part is o object and can construct to cooperate to do something done

In this case each part make car can run.

:)

:3005: ขอบคุณทุกคนครับ อ้ะต่อๆ

ต่อเรื่อง class จากลุงซัน

Class ที่สร้างมามันจะอารมณ์ประมาณพิมพ์เขียวครับ

เช่น คลาสรถยนต์

มี attributes (คุณสมบัติ) ดังนี้
- ราคา
- ยี่ห้อ
- เครื่องยนต์
- วัสดุ
ฯลฯ

และมี method (ความสามารถ - ฟังก์ชันการใช้งาน) ดังนี้
- เคลื่อนที่
- เร่งความเร็ว
- เลี้ยว
- เบรค
ฯลฯ

--
จากนั้น ผมจะสร้างรถขึ้นมา ผมก็สร้างจาก class นี้นี่แหละ ก็มันเป็นพิมพ์เขียวนี่นา

จากนั้นไม่พอ วันดีคืนดี เกิดสงคราม บริษัทรถของผมต้องเปลี่ยนไปผลิตรถถัง!!

ไม่ยากครับ ผมก็แค่สร้างคลาส รถถัง ให้สืบทอดคลาสจากรถยนต์มา แล้วทำการติดตั้งอาวุธให้มันอีกที
ไม่ต้องนั่งเขียนวิธีทำให้รถถังวิ่งใหม่

--
ถ้าจะยกตัวอย่างให้ดูเป็นโปรแกรมมิ่งหน่อย ก็เช่น
คลาสของกระจู๋ (กระทู้นั่นแหละ  :51:)

ผมก็ออกแบบเลย ให้ใน 1 กระจู๋มีอะไรบ้าง (เริ่มสร้างพิมพ์เขียว)

Attribute
- ชื่อหัวข้อ
- ข้อความในกระจู๋
- ข้อความตอบกลับในกระจู๋
ฯลฯ

Method
- ตอบกระจู๋
- แก้ไขกระจู๋
- แตกหน่อ
ฯลฯ

--

ทีนี้ พอมีคนกด ตั้งกระจู๋ ระบบก็จะทำการสร้างกระจู๋ใหม่ จากคลาสกระจู๋ที่ออกแบบไว้

แล้วถ้าจะทำให้ตั้งโพลได้
เราก็แค่สร้างคลาสใหม่ ชื่อโพล ให้ คลาสโพล สืบทอดคลาสจาก คลาสกระจู๋
แล้วทำการติดตั้งปลั๊กอิน เพื่อสร้างโพลเข้าไป เป็นอันเรียบร้อย

ไม่ต้องเขียนโค้ดใหม่ให้คลาสโพล มันตั้งโพสต์กระจู๋ ตอบจู๋ได้ทันทีจากการสืบทอดคลาสจาก คลาสกระจู๋

อ๊ะ เพิ่งมาเห็น ตอบกันไปหมดแล้ว
แถมอธิบายดีเสียด้วย  :07:





ดีจัง  :30:
(ใช้มุกลุงอ๋าห์)

เรากำลังหลุดจากโลก jQuery ไปสู่ Beginner Programmer แล้วสินะ สินะ  :3005:


ต่อครับๆ เหมือนเอาความรู้ตลอด 4ปี มาย่อ เหลือ 4วัน  :25b:

แล้ว class กับ ID ละครับ

เข้ามาเรียน :46:

อ้างคำพูดจาก: blackRabbit เมื่อ 18 ก.ค. 2010, 08:44 น.
แล้ว class กับ ID ละครับ

ถ้าพูดถึงตรงนี้คงหมายถึงใน html นะครับ


class => (นักเรียนใน)ห้องเรียน
ID => นักเรียน (เจาะไปที่คน)


เพราะงั้น การอ้างถึงห้องเรียน อาจเจอนักเรียนมากกว่า 1 คนก็ได้
ส่วนการอ้างถึงนักเรียน (ID) ไปเลย ยังไงก็ต้องเจอแค่คนเดียว

แสดงว่า class กับ ID นี่มันเฉพาะของ HTML เหรอครับ

มันมีในภาษาอื่นด้วยนี่สิครับ :30: เลยไม่อยากไปพูดถึงเพราะเดี๋ยวจะตีกันเปล่าๆ



อย่าง java นี่...
class ก็ต้นแบบของ object (พอจะนึกภาพให้คล้ายๆ กันกับ class ใน html/css ได้อยู่ แต่ไม่ได้เหมือนขนาดนั้น)
ส่วน id ก็คือระบุลงไปถึงตัว object เลย

 :56: พี่เจนไม่สอน ไอซ์สอนเลย

class กับ id ตูรู้แค่ว่าใน 1 หน้า html
class มีได้หลายชิ้น แต่ id มีได้ชิ้นเดียว  :30: :30:

+ ให้คุณครูทุกท่าน  :27:

:33a: หนุกๆ ต่อเลย

หายใจเข้าลึกๆ ตั้งสติ

เดี๋ยวกลับมาอ่านใหม่อีกสักสองสามรอบ

ฮึบๆ

PTT นี้ขายน้ำมันนะครับ

ใช่ๆ ตอนนี้ใช้ไอ้เจ้า เจคิวรี่ นี่แหละ ทำ ไรท์บ๊อก   :53:

 :25: แปะๆ

ขอถามเลยครับ  :25:


ถ้าสมมุติว่าทำงานในลักษณะนี้

(http://img3.f0nt.com/19/42d634be621d56edf5b58e47600419d5.jpg)


คือมีหน้า product แล้วกดคลิกเลือก product แล้วมีรายละเอียดขึ้นมา
มี text มีรูป มีคำสั่ง ฯลฯ หรือซ้อน jq ให้กด หรือ วื้บๆ ภาพอีกชั้นได้ไหมเอ่ย
หลักการแบบนี้ เขาทำกันยังไงครับ
แยกเป็นหน้าๆ (product ทีละตัวๆไป) แล้วใช้ jq เรียกหน้านั้นๆมา

หรือว่าเขียนอัดในหน้าเดียวเลยครับ


และใช้ jq ยังไงให้ได้ effect ตามรูปครับ
:46: :46: :46:

jq
สามารถลดจำนวนหน้าให้น้อยลง หรือว่าอยู่ภายในหน้าเดียวเหมือน flash พอจะเป็นไปได้มั้ยครับ

เขียนแยกเป็นหน้าๆ ครับ แล้วใช้พวก lightbox (http://delicious.com/search?p=lightbox&chk=&context=userposts%7Ciannnnn&fr=del_icio_us&lc=) มาเรียกเอาอีกที

เย้ เลิกใช้ flash ทำเว็บ แล้วโว้ย  :30:

เค้าเลิกกันไปตั้งนานแล้วลุง  :58:

อ้าว  :08:
ไอ้ก่อยังใช้อยู่เลย

lightbox นี่เจ๋งไปเลย วื้บๆโชว์ภาพสวยมาก แต่โชว์เป็น กรอบ html หน้าใหม่ไม่ได้ใช่มั้ยครับ
ต้องใช้ thickbox

พวก script แนว lightbox  ส่วนใหญ่ก็เปิดจาก html ไฟล์ใหม่ได้นะ บางตัวอาจจะเรียกเป็น iframe

มันจะมีตัวที่ฉลาดๆ น่ะครับ
ถ้ารักจะกดหน้าใหม่ก็กดไป แต่ถ้ากดธรรมดาก็ขึ้นเป็น Lightbox วื้บๆ

มีตัวเสียตังค์ด้วย  :30: :05:

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts (http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts)
10 อันดับ Lightbox เจ๋งๆ :25:

ส่วนมากผมใช้อันแรก (jQuery Lightbox)  กับ Fancybox ล่ะ

อ้างคำพูดจาก: LAYIJI เมื่อ 19 ก.ค. 2010, 16:56 น.
อ้าว  :08:
ไอ้ก่อยังใช้อยู่เลย

:1105:




เค้าเริ่มลดๆ ปริมาณแฟลชไปแล้วฮ่ะป๋า
มารัก jQuery แทน :56:

ฮั่นแน่ ลาก่อน :56:

 :56: ว้าว

:05: อย่าเพิ่งไล่เค้าออกซี่

สิ้นปีนี้ว่าจะมาลองหัดวิชานี้ดูครับ
จะได้ทำเป็นกะเขามั่ง


Source Order เรื่องง่ายๆที่ไม่ควรมองข้าม | jQuery Tutorials in Thailand. (http://www.jquery.in.th/jquery-source-order/)

อันนี้เขาอธิบายการอัญเชิญตัวลูก-ตัวแม่มาแสดงครับ

ขออภัยที่ขุดมันขึ้นมาครับ   :25:

แบบว่าอยากคุยเรื่อง Jquery บ้างอะ  :05:
กลับมาคุยกันก่อน  :05:

เอ็งนั่นแหละเริ่มก่อนเลย รู้เรื่องกว่าชาวบ้านแถวนี้ตั้งเยอะ :30:

 :32:

เดี๋ยวจะลองหาจาก delicious ของพี่แอน มาลองแกะแล้วกันครับ :32:
ถ้ารู้เรื่องเดี๋ยวจะมาบอกต่อ  :12:

 :02: มาช่วยแก้ของ zheza มั่งจิ

ดูง่าย สบายตา  :25:


(http://img3.f0nt.com/15/6120d8e5f1679d50e013b1a585b1521e.png) (http://img3.f0nt.com/15/6120d8e5f1679d50e013b1a585b1521e.png)

บทที่หนึ่งก่อนคน้าบ :07c:

มาแปะรอบทที่หนึ่ง  :25:

เค้ารอแกนั่นแหละ  :07:

 :25:

เข้ามารอด้วยคนครับ

อ้างคำพูดจาก: JanΣ เมื่อ 15 ส.ค. 2010, 02:02 น.
เค้ารอคุณนาวินนั่นแหละ  :07:

เห็นข่าว jQuery Mobile
เขาบอกว่ามันเอามาแทนไอ้ตัวเดิมได้เลย
เพราะลองออกแบบมาสำหรับ Mobile ก็ไม่ต้องกลัวอะไรอีกแล้ว

ยังไงครับ งง :58:

http://jquerymobile.com/gbs/ (http://jquerymobile.com/gbs/)

เรื่องโมบาย ไม่ค่อยรู้เรื่องครับ
แต่เท่าที่อ่าน ๆ ดู จากตาราง

jQuery core is working to support all A and B grade browsers.

มันก็มีข้อจำกัดอยู่เหมือนกัน  :40:

http://www.learningjquery.com/2008/03/working-with-events-part-1 (http://www.learningjquery.com/2008/03/working-with-events-part-1)
บทความสอน jQuery เบื้องต้น ว่าด้วยเรื่องอีเวนต์จ้ะ

อ่านรู้เรื่องนะ :25:

 :25: :25:

http://jqfundamentals.com/book/ (http://jqfundamentals.com/book/)

สอน jQuery พื้นฐานครับ

:25:

http://www.jquery.in.th/jquery-mobile-alpha-1-released/ (http://www.jquery.in.th/jquery-mobile-alpha-1-released/)
jQuery Mobile เริ่มออกรุ่นอัลฟ่ามาให้ลองแล้วครับ

jQuery 1.4.3 Offline Learning Kit

http://addyosmani.com/blog/jq143offlinelearningkit/ (http://addyosmani.com/blog/jq143offlinelearningkit/)

อย่าเอาแต่แปะลิงค์เซ่ สอนด้วยๆ :07:

อ้างคำพูดจาก: JanΣ เมื่อ 29 ต.ค. 2010, 12:04 น.
อย่าเอาแต่แปะลิงค์เซ่ สอนด้วยๆ :07:

ขุด :58: :58: :58: :58:





jQuery's Best Friends | by Alex Sexton (http://jquerysbestfriends.com/#slide65)
พรีเซนต์แนะนำ jQuery ครับ
เจ๋งดี อ่านง่าย แต่ทนอ่านไม่จบ มันเอารูปแฟนมาโชว์

ไปเรียนตรงนี้ก็ได้นะ

http://www.w3schools.com/jquery/default.asp (http://www.w3schools.com/jquery/default.asp)

ค่อย ๆ เรียนไปทีละบท มีตัวอย่างให้ดูด้วยแค่จิ้ม try it yourself  :56:

ใครมี lightbox แบบคลิก next ได้แล้วมี save image  ได้มั่งครับ

ลองจิ้มเลือกเอาสักอันในนี้ครับ
http://delicious.com/iannnnn/lightbox (http://delicious.com/iannnnn/lightbox)