เบซิกเบสิก jQuery

[กวางจ้ะ]

อธิบาย 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 รวมถึงการพัฒนาของ OOP ไปอีกขั้นในแบบ Design Pattern หาอ่านและศึกษาได้ในตำราการเขียนโปรแกรมยุดใหม่ได้นะครับ

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

[ลุงซัน]

....
......
........
ซึ่งแน่นอนว่าเว็บ 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.

:)

[iannnnn]

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

[Earthchie]

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

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

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

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

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

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

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

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

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

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

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

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

--

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

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

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

[ณต]

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





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

[IM]

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


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

[Rabbitinblack]

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

[Ou!]

เข้ามาเรียน

[icez]

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

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


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


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

[Rabbitinblack]

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

[icez]

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



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

[Rabbitinblack]

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

[JΛNΣ]

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