MyCode4U

คำแนะนำสำหรับผู้หัดเขียนโปรแกรมด้วยตนเอง(ภาค 3)

admin — Tue, 12 May 2009 04:51:43 +0000

จำเป็นที่จะต้องอ่าน Text(หนังสือต่างประเทศ) หรือไม่

6. คำตอบคือ…ไม่จำเป็นครับ…จริงอยู่ที่ ebook หรือ Text Book ของต่างประเทศ ส่วนใหญ่แล้วเขียนดี เนื้อหาแน่น มีคุณภาพ แต่สำหรับผู้เริ่มต้น หรือระดับกลางๆทั่วไป ที่ยังไม่รู้ศัพท์เทคนิคมากนัก หรือคนที่ไม่ถนัดภาษาอังกฤษ หรือคนที่มีเวลาจำกัด บุคคลที่มีข้อจำกัดเหล่านี้ ถ้าไปทำตามคำแนะนำคนอื่นให้อ่านแต่ ebook หรือ text book ภาษาอังกฤษ รับรองว่า ใช้เวลาเยอะ และไม่คุ้มค่ากับเวลาที่เสียไปแน่นอนครับ ควรจะอ่านหนังสือที่เป็นภาษาไทยให้อยู่ตัวก่อน ถ้ารู้สึกว่าเบื่อแล้วค่อยลองอ่าน ebook ภาษาอังกฤษครับ

แล้วทำไมถึงยังมีคนอ่าน ebook หรือ Text Book ก็เพราะว่า เราเหล่านั้น เค้าไม่ได้มีข้อจำกัด เหมือนที่ผมเขียนไปไงครับ เค้าอาจจะเก่งภาษาอังกฤษ หรือเค้าอาจจะเขียนโปรแกรมมาจนถึงระดับที่รู้ศัพท์เทคนิคแล้ว หรืออย่างน้อยๆเค้าก็มีเวลาเยอะพอที่จะค่อยๆอ่าน ebook หรือ Text Book นั้นๆได้ครับ และแน่นอนเค้าก็ต้องได้ความรู้เยอะขึ้น เพราะหนังสือต่างประเทศมักจะสอดแทรกอะไรแปลกๆดีๆไว้ให้เราอ่านเหมือนกัน

**** หนังสือทุกเล่มไม่ว่าจะเป็นของไทย หรือต่างประเทศ เมื่อคุณอ่านมันคุณก็ได้ความรู้ทั้งนั้นหล่ะครับ ขึ้นอยู่กับความสามารถในการซึมซับความรู้ของคุณเองว่ามากน้อยเพียงใด ถ้าไม่เก่งอังกฤษการซึมซับก็จะน้อยหน่อยใช้เวลาเยอะหน่อย แบบนี้สู้เอาเวลาไปอ่านเวปไทย หรือหนังสือไทยหลายๆเล่มไม่ดีกว่าเหรอครับ ****

ทำความเข้าใจกับความรู้ที่ได้จากหนังสือ(ส่วนใหญ่)

สิ่งที่ควรจะทำความเข้าใจในอันดับแรกๆ ก่อนที่จะทำการเปิดอ่าน แล้วนำมาช่วยเราทำงาน หรือ Project คือ ต้องเข้าใจก่อนว่า หนังสือที่ขายอยู่ตามท้องตลาด โดยเฉพาะบางเรื่องที่กำลังฮิตเป็นที่นิยม ก็จะมีหนังสือที่เกี่ยวกับเรื่องนั้นๆออกมาให้เลือกเยอะแยะไปหมด และส่วนใหญ่ที่ปกหน้า หรือปกหลัง ก็มักจะมีคำที่เขียนว่า “สำหรับผู้เริ่มต้น” หรือ “เบื้องต้นถึงระดับสูง” อะไรทำนองนี้ และโดยส่วนใหญ่ผู้ที่กำลังจะหัดเขียน หรือผู้ที่กำลังหาตัวช่วยในการทำงาน ก็มักจะ “เชื่อ” คำโฆษณาเหล่านั้น และก็โดยส่วนใหญ่อีกแหละ คนที่ซื้อไปแล้วมักไม่ได้ความรู้อย่างที่คาดหวังหรืออย่างคำโฆษณา และไม่สามารถนำมาประยุกต์ทำงานได้จริง เพราะไม่เข้าใจพื้นฐานจริงๆ จากการที่ผมได้พบปัญหาของหลายๆคน รวมทั้งพบด้วยตนเอง พบว่า หนังสือ “ส่วนใหญ่” มักจะเป็นลักษณะดังนี้

เขียน ปกหน้า และปกหลัง ให้ดึงดูดความสนใจและน่าซื้อ - เช่นใช้คำว่า “สำหรับผู้เริ่มต้น” หรือ “เบื้องต้นถึงระดับสูง” ซึ่งบางเล่มเนื้อหาไม่ได้เหมาะกับผู้เริ่มต้นเลย (เช่น ผู้อ่านยังไม่มีพื้นฐานการเขียนโปรแกรม ยังไม่มีพื้นฐานการคิดอย่างเป็นขั้นตอน แต่หนังสือกลับเริ่มสอนเรื่องการเขียนโปรแกรมด้วยไวยกรณ์แบบต่างๆ หรือเริ่มสอนด้วย “ระบบพื้นฐานคอมพิวเตอร์ CPU คืออะไร RAM คืออะไร CD-ROM คืออะไร แล้วก็ข้ามไปสอนเรื่องไวยกรณ์การเขียนโปรแกรมไปเลย” ผมรู้สึกว่าเนื้อหาโดยส่วนใหญ่ไม่ค่อยช่วยให้คนศึกษาด้วยตัวเองให้อ่านแล้ว เข้าใจซักเท่าไหร่นัก และหนังสือแต่ละเล่มมักเขียนแนวนี้กันทั้งนั้น แต่หนังสือที่สอนดีๆเหมาะสำหรับผู้เริ่มต้นหรือผู้ที่ศึกษาด้วยตนเองเลยก็มี (แต่หายากหน่อย)

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

7. ถ้าเปรียบ Skill Level ความรู้ของเนื้อหาซักเรื่องนึงเป็น Level 1 2 3 4 5 6 7 8 9 10 ผมมองว่า หนังสือส่วนใหญ่ จะให้ความรู้ในระดับ Skill Level 3 - 7 ประมาณนี้ และก็ขึ้นอยู่กับผู้อ่านแต่ละคนว่าจะซึมซับได้ถึง Level ไหน และด้วยความที่ขาด พื้นฐาน Level 1 - 2 ทำให้บางครั้ง ผู้อ่านไม่สามารถประยุกต์ความรู้ที่ได้เพื่อพัฒนาให้ได้ Skill Level 8 - 10 หรือเรียกว่า “รู้แค่ตามตัวอย่างในหนังสือ แต่ไม่เข้าใจวิธีการเขียนจริงๆและไม่สามารถนำมาใช้กับงานของตัวเองได้ นอกจากลอกหนังสือมา” ดังนั้นการที่เราจะเปิดอ่านหนังสือซักหัวข้อนึง เราควรอ่านและทำความเข้าใจจริงๆ พยายามดูว่าเรื่องที่กำลังอ่านอยู่นั้นจำเป็นต้องมีความรู้พื้นฐานจากเรื่อง ใดก่อนหรือเปล่า (ถ้ามี - ก็ให้ไปหาข้อมูลในเรื่องนั้นๆมาอ่านให้เข้าใจซะก่อน) และควรหาข้อมูลจากหลายๆแหล่ง ไม่ใช่พึ่งหนังสือเพียงเล่มเดียว ถ้าเราทำแบบนี้ได้ การอ่านหนังสือในหัวข้อนั้นๆเราก็จะเข้าใจอย่างลึกซึ้งและถ้าจะนำไปประยุกต์ ใช้จริงก็คงไม่ยากสำหรับเราแล้วหล่ะครับ

**** ทักษะการอ่านหนังสือศึกษาด้วยตนเอง แต่ละคนก็จะมีวิธีที่แตกต่างกันไป สามารถแนะนำกันได้ แต่ผู้ฟังจำเป็นต้องฝึกฝนและทำให้เป็นนิสัยและรูปแบบการอ่านของตนเอง ****

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

คำแนะนำสำหรับผู้หัดเขียนโปรแกรมด้วยตนเอง(ภาค 2)

admin — Tue, 12 May 2009 04:49:01 +0000

หนังสือเล่มไหนดี (อย่า…งก…ถ้ารักจะศึกษาด้วยตัวเอง)

(อ่านข้อ 7 เสริมด้วยก็จะดีนะครับ)

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

แต่สิ่งที่อยากจะให้ทำความเข้าใจไว้ก่อนคือ หนังสือส่วนใหญ่(ไม่ใช่ทุกเล่ม) โดยเฉพาะภาษาไทย เนื้อหาจะมีน้ำๆๆๆเยอะมาก บางครั้งเขียนโยงไปโยงมา บางเล่มเนื้อหาน้ำๆเยอะเกิน บางเล่มใส่รูปซะเกลื่อนเลยฯลฯ เพื่อให้เนื้อหาแลดูเยอะและแน่น แต่จริงๆแล้ว สิ่งที่ผู้อ่านได้มาจริงๆนั้นมีไม่เท่าไหร่ ฉะนั้นการเลือกซื้อควรจะยืนอ่านๆทั้ง ปกหน้า, ปกหลัง, สารบัญ, และเนื้อหาข้างในดูประมาณนึงก่อน และบางครั้งเราจะรู้สึกได้เองว่า เล่มที่อ่านอยู่นั้น เราชอบ หรืออ่านแล้วไม่รู้เรื่อง หรือผู้เขียนใช้คำพูดที่เป็นศัพท์เทคนิคมากไปจนยากสำหรับเรา ฯลฯ ก็ตัดสินใจเอาครับ

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

**** หนังสือเพียง 1 เล่ม ไม่สามารถทำให้คุณเก่งหรือนำมาประยุกต์ทำงานได้ทั้งหมด ****(ตัวผมเอง บางครั้งผมยังต้องใช้หนังสือไม่ต่ำกว่า 3 เล่มในการทำงานเพียง 1 งานก็มีครับ)

ข้อห้าม/สิ่งที่ไม่ควรทำหลังจากที่ได้หนังสือมา

หลายคนจะเป็นแบบนี้และผมก็เคยเป็นคือ เมื่อได้หนังสือมา ก็จะเปิดเฉพาะหัวข้อที่เกี่ยวข้องกับเรื่องที่ตัวเองกำลังจะทำ แล้วก็ลอกๆตัวอย่างในหนังสือมา หัวข้อไหนไม่ตรงกับเรื่องที่เราจะทำก็ข้ามไป พอเจอหัวข้อที่ตรงอีก ก็ลอกมาอีก ฯลฯ เป็นแบบนี้อยู่เรื่อยไป เสร็จแล้วก็จะติดปัญหาว่าทำไมทำตามหนังสือแล้ว ไม่เห็นได้อย่างที่เค้ายกตัวอย่างเลย, พยายามอ่านละเอียดแล้วทำไมยังผิดอีก สุดท้ายก็โทษว่าหนังสือไม่ดีเขียนผิด -_-” ดังนั้น อย่าครับ…อย่า!!! ไม่ควรทำแบบนี้จริงๆ จะทำให้เสียเวลาโดยเปล่าประโยชน์ครับ และ ไม่จำเป็นต้องอ่านทุกตัวอักษรครับ

5. สิ่งที่ผมอยากจะแนะนำ ซึ่งเป็นหลักที่ผมใช้มาตลอดคือ เมื่อรู้โจทย์ รู้เป้าหมาย และไปซื้อหนังสือมา 1 เล่ม ผมจะอ่าน ปกหน้า ปกหลังสารบัญ และ!!!!! ทำเครื่องหมายในหัวข้อที่เราสนใจไว้ในสารบัญก่อน เช่น ในสารบัญมีห้วข้อ ก. ข. ค. ง. จ. ฉ. และผมสนใจหัวข้อ ค. กะ จ. ผมก็จะทำเครื่องหมายเอาไว้ จากนั้นก็เริ่มต้นศึกษาในหัวข้อ ค. อ่านแบบคร่าวๆก่อน 1 รอบ แล้วดูว่ามีส่วนไหนที่เราอ่านแล้วไม่เข้าใจ และมันน่าจะมีอยู่ในหัวข้อก่อนหน้า (ข้อ ก. ข.) หรือเปล่า ถ้ามีก็ให้ไปทำความเข้าใจในหัวข้อก่อนหน้าให้เรียบร้อยซะก่อน แล้วค่อยกลับมาอ่านที่หัวข้อ ค. ต่อไป เมื่อเข้าใจข้อ ค. แล้ว ผมก็จะไปศึกษาข้อ จ. ต่อ และก็ทำแบบเดียวกันกับข้อ ค.

ผมเรียกการอ่านแบบนี้ว่า “การอ่านแบบย้อนกลับ” ซึ่งการอ่านแบบนี้ จะทำให้เราได้ความรู้ในหัวข้อที่เราสนใจ มาแบบเต็มที่และเข้าใจจริงๆ ถึงแม้ผมจะไม่ได้อ่านในหัวข้อ ก. ก็คงไม่เป็นอะไรมากนัก สิ่งที่ผมสนใจ มันไม่มีส่วนไหนเกี่ยวกับหัวข้อ ก. เลย(แต่ถ้ามีก็ควรจะอ่านนะครับ) นี่เป็นคำแนะนำแบบคร่าวๆในการอ่านนะครับ ซึ่งยังมีรายละเอียดเล็กๆน้อยๆอีกเยอะ ก็แล้วแต่ว่าแต่ละคนจะมีวิธียังไง ถ้าให้ผมเขียนคงจะเยอะเกินครับ

ติดตามต่อภาค 3

คำแนะนำสำหรับผู้หัดเขียนโปรแกรมด้วยตนเอง(ไตรภาค)

admin — Mon, 11 May 2009 18:32:13 +0000

ช่วงนี้รู้สึกว่าจะเป็นช่วงที่นิสิต นักศึกษา หลายๆคนกำลังต้องทำ Project จบ กันเยอะ เกี่ยวกับการเขียนโปรแกรมในรูปแบบ และก็มีหลายคนที่เรียนมาจนถึงปี 4 แต่…ยังเขียนโปรแกรมไม่เป็นเลย หรือเขียนได้แบบลอกตามหนังสือเอา ช่วงนี้ผมก็ได้เป็นส่วนหนึ่งที่รับฟังและให้คำปรึกษากับคนเหล่านั้น(ผมเจอมา 8 คนภายใน 4 วัน) ซึ่งคำถาม คำแนะนำ หรือคำตอบก็จะเดิมๆ เหมือนๆกัน ดังนั้น ผมก็เลยคิดว่า เขียนแนะนำขั้นตอนการศึกษาการเขียนโปรแกรม(ในแบบฉบับของผมเอง ไม่ได้มีหลักการอะไร) มาแนะนำครับ เผื่อจะพอมีประโยชน์ผู้อ่านบ้างไม่มากก็น้อยครับผม

เริ่มต้นเขียนโปรแกรมยังไงดี

อืมมมมม…คำถามแบบนี้เจอเยอะมาก และคำตอบก็ไม่ได้มีหลักการอะไรตายตัวครับ ฉะนั้นผมก็เลยจะแนะนำคร่าวๆตามความคิดของผมเองนะครับ(เพราะผมทำแบบนี้เสมอ และแต่ละคนมีความคิดไม่เหมือนกัน)

1. ต้องเข้าใจ และมองภาพให้ออกก่อนว่า โปรแกรม คืออะไรมีแบบไหนบ้าง ไม่ต้องละเอียดมากก็ได้ เช่น โปรแกรมบน windows, Web ธรรมดาๆ หรือแม้แต่ Web Application เป็นต้น

2. ถ้าเรามองภาพของโปรแกรมออกแล้ว ก็กำหนด หรือวางเป้าหมายว่า เราจะทำโปรแกรมบน Windows หรือ บน Web และอยากทำโปรแกรมเกี่ยวกับอะไร

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

ส่วนใหญ่ นิสิต หรือนักศึกษา ที่ต้องทำ Project จบ มักจะผ่านข้อ 1 และ 2 มาแล้ว หรืออีกนัยนึงคือ ได้โจทย์มาแล้วนั่นเอง เช่น ให้ทำ “ระบบจัดการสต๊อกสินค้าทางอินเตอเน็ต” นั่นแสดงว่า เรารู้เป้าหมายแล้วว่าเราจะทำ โปรแกรมจัดการสต๊อกสินค้า และ เขียนเป็นลักษณะของ Web (หรือเรียกว่า Web Application)

หมายเหตุ:Web จะแบ่งเป็น 2 แบบ คือ Web ธรรมดา กับ Web Application โดย Web ธรรมดา เปรียบได้กับเวปที่มีแต่เนื้อหาอย่างเดียว สามารถ link ไปที่เวปอื่นได้ แต่ไม่สามารถเก็บข้อมูลอะไรได้ ส่วน Web Application จะเปรียบได้กับเวปที่มีการโต้ตอบกับผู้ใช้(ตัวเรา) เช่น ให้เรากรอกข้อมูล เพื่อค้นหา หรือให้เรากรอกข้อมูลเพื่อสมัครสมาชิก

3. หลังจากที่เรารู้แล้วว่า เราจะทำโปรแกรมเกี่ยวกับอะไร และทำบน Windows หรือ Web แล้ว เราก็ไปหาข้อมูล หรือหนังสือ แนวนั้นๆมาอ่าน ดังตัวอย่างด้านบน ก็ควรจะไปหาหนังสือ ที่เกี่ยวกับ การเขียนโปรแกรมบน Web มาอ่าน(และเลือกตามภาษาที่เราต้องการจะใช้เขียนโปรแกรมด้วย)

ติดตามต่อภาค 2

ภาษาคอมพิวเตอร์ VS ตัวแปลภาษา

admin — Mon, 20 Apr 2009 12:18:18 +0000

ดังที่ได้กล่าวไปในหัวข้อที่แล้วในเรื่องของ “ภาษาคอมพิวเตอร์” ซึ่งก็เปรียบได้กับ ภาษาที่คนเราใช้ติดต่อ สื่อสาร และคุยกัน เช่นภาษาไทย อังกฤษ ฝรั่งเศษ เยอรมัน ฯลฯ ดังนั้นถ้าเราจะติดต่อ สื่อสาร หรือสั่งงานคอมพิวเตอร์เราก็ต้อง ใช้ภาษาที่คอมพิวเตอร์เข้าใจ ซึ่ง “ภาษาคอมพิวเตอร์” ก็มีอยู่หลายภาษาเช่น ภาษา C, ภาษา Pascal, ภาษา Basic, ภาษา Java หรือภาษา PHP เป็นต้น เราอาจจะเลือกมาเีพียงหนึ่งภาษา(หรือมากกว่า) เพื่อนำมา “เขียน” สั่งงานให้กับคอมพิวเตอร์ ซึ่งแต่ละภาษา่ล้วนแต่เขียนด้วยภาษาอังกฤษเหมือนกัน เช่น

 Pascal |   copy code | ?  
1 Program first;
2 Uses Crt;
3 Var x : integer;
4 Begin
5  writeln(?Hello World!?);
6 End.

หรือ

 C |   copy code | ?  
1 #include 
2 main()
3 {
4  int i;
5  printf(?Hello World!n?);
6 }stdio.h>

ปัญหาที่เกิดขึ้นคือ เจ้าคอมพิวเตอร์จะแยกได้อย่างไรหล่ะว่า ชุดคำสั่งภาษาอังกฤษที่เราได้เขียนขึ้นนั้น(ดังตัวอย่างด้านบน) แต่ละชุดคำสั่ง เราใช้ภาษาใดสื่อสาร หรือสั่งงาน …. ดังนั้นจริงๆแล้ว เจ้าคอมพิวเตอร์เนี่ย เค้ารู้อยู่แค่ภาษาเดียวหล่ะครับ คือ 00101101 10111001 หรือเรียกว่าเลขฐาน 2 เช่นเราต้องการสั่งให้คอมพิวเตอร์คำนวณเลข 1+1 เราอาจจะต้องเขียนคำสั่งดังนี้ (มั่วๆนะครับ)

 LOLcode |   copy code | ?  
1 0010 0011
2 1001 1110
3 0110 1000
4 1111 1011

เห็นไม๊ครับว่า กว่าเราจะสั่งให้เจ้าคอมพิวเตอร์ บวกเลขแค่ 1+1 เราจะต้องคิดและเขียนเลขฐาน 2 ออกมาตั้งเท่าไหร่กว่าจะได้ผลลัพธ์ง่ายๆเพียงอย่างเดียว สรุปแล้ว “เจ้าคอมพิวเตอร์ มันเข้าใจอยู่เพียงภาษาเดียวคือ เลขฐาน 2″ ที่นี่เราลองมาดูตามนี้นะครับ

จากรูปด้านบน ภาษา C, ภาษา Pascal, ภาษา Basic หรือ ภาษา PHP นั้น ถือว่าเป็น “ภาษาระดับสูง” และ ภาษาที่เจ้าคอมพิวเตอร์รู้หรือชุดคำสั่งของเลขฐาน 2 นั้น ถือว่าเป็น “ภาษาแท้” ของคอมพิวเตอร์ ซึ่งยังมีภาษาอีกลักษณะนึงที่ใกล้เคียงกับ “ภาษาแท้” ของคอมพิวเตอร์ เรียกว่า “ภาษา Assembly” แต่ในที่นี้ยังไม่ขอกล่าวถึงเพราะยากเกินไปสำหรับมือใหม่

และจา่กรูปด้านบน จะเห็นว่า แม้ว่าเราจะเขียนชุดคำสั่งด้วยภาษาอะไรก็ตาม เจ้าคอมพิวเตอร์ก็ไม่เข้าใจคำสั่งเราอยู่ดี เพราะมันเข้าใจอยู่แบบเดียวคือ เลขฐาน 2 ฉะนั้น จะต้องมีเครื่องมือซัก 1 ตัวที่ใช้ในการ แปลภาษา หรือแปลชุดคำสั่งที่เราเขียน ออกมาเป็นเลขฐาน 2 แล้วนำไปสั่งงานเจ้าคอมพิวเตอร์ของเรา เครื่องมือที่ว่านี่แหละครับ เค้าเรียกว่า “ตัวแปลภาษา”

“ตัวแปลภาษา” ก็เปรียบเสมือน “ล่าม” ที่คอยแปลภาษาให้คนที่พูดคนละภาษานั้นคุยกันรู้เรื่องนั่นแหละครับ แต่มีข้อจำกัดว่า ถ้าเราเขียนชุดคำสั่งด้วยภาษาคอมพิวเตอร์ ภาษาใด ก็ต้องใช้ ตัวแปลภาษา ของภาษานั้น ยกตัวอย่างเช่น ถ้าเขียนชุดคำสั่งด้วยภาษา C ก็จะต้องใช้ตัวแปลภาษาที่ใช้สำหรับภาษา C เท่านั้น จะใช้ตัวแปลภาษาของภาษาอื่นไม่ได้ (เปรียบเสมือนกับ “ล่าม” ที่แปลได้เฉพาะภาษาอังกฤษอย่างเดียว ถ้าจะให้แปลเยอรมันก็แปลไม่ออกครับ)

เอาหล่ะครับเขียนมาซะยาว นี่ก็เป็นความหมายคร่าวๆของ “ภาษาคอมพิวเตอร์” และ “ตัวแปลภาษา” นะครับ อาจจะวกไปวนมาบ้าง ก็ต้องขออภัยไว้ ณ ที่นี้ด้วยครับ…. เฮ้อ ผมก็เพิ่งรู้นี่แหละครับว่า เขียนบทความมันยากกว่า การสอนด้วยการพูดจริงๆ วันนี้ไว้เท่านี้ก่อนนะครับ…บ๊ะบายยยย…นาย หมูเหลืองปิ้ง

Technorati Tags: Programming, Step_Programming, Translator_Language

ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic

admin — Sun, 19 Apr 2009 07:51:47 +0000

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

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <title>demo</title>
04 <script type=?text/javascript? src=?jquery.js?></script>
05 <script language=?javascript?>
06 	$(function(){
07 	$(?a#demo?).click(function(){
08 	$(?div#show_demo?).show();
09 	});
10 	$(?a#demo2?).click(function(){
11 	$(?div#show_demo?).hide();
12 	});
13 	});
14 </script>
15 <style type=?text/css?>
16 	#show_demo{
17 	width:120px;height:150px;
18 	border:1px solid #cccccc;
19 	background-color:#999999;
20 	display:none;
21 	padding:5px;
22 	overflow:hidden;
23 	}
24 </style>
25 </head>
26 <br />
27  
28 <a href=?#? id=?demo?>คลิกเพื่อแสดงข้อความที่ซ่อน</a><br />
29 <div id=?show_demo?>
30 ข้อมูล ที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
31 </div>
32 <a href=?#? id=?demo2?>คลิกเพื่อซ่อนข้อความ</a><br />
33 <body>
34 </body>
35 </html>

เนื้อหานี้นำมาจาก เวป http://www.ninenik.com/ เพื่อเป็นแหล่งเก็บข้อมูลอีกที เผื่อวันใด เวปต้นฉบับมีปัญหาครับผม

Technorati Tags: Programming, jQuery, hide_div_with_jQuery

Event ของ jquery แบบ Basic

admin — Sun, 19 Apr 2009 06:26:30 +0000

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

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <title>demo</title>
04 <script type=?text/javascript? src=?jquery.js?></script>
05 <script language=?javascript?>
06 	$(function(){
07 		$(?a#demo?).click(function(){
08 			alert(?Mouse Click?);
09 		});
10  
11 		$(?a#demo2?).mouseover(function(){
12 			alert(?Mouse Over?);
13 		});
14  
15 		$(?a#demo3?).mouseout(function(){
16 			alert(?Mouse Out?);
17 		});
18 	});
19 </script>
20 </head>
21 <br />
22  
23 <a href=?#? id=?demo?>เหตุการณ์เมื่อคลิกเมาส์</a><br />
24 <a href=?#? id=?demo2?>เหตุการณ์เมื่อเลื่อนเมาส์อยู่เหนือ</a><br />
25 <a href=?#? id=?demo3?>เหตุการณ์เมื่อเลื่อนเมาส์ออก</a><br />
26 <body>
27 </body>
28 </html>

Technorati Tags: Programming, jQuery, jQuery_sample_event

jquery สคริปแรกของคุณ

admin — Sun, 19 Apr 2009 06:16:50 +0000

มาทดลองสคริปแรกด้วย เงื่อนไข เมื่อมีการกดที่ ลิ๊งค์ แล้วให้ทำการ แสดงข้อความว่า Hello World

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <title>demo</title>
04 <script type=?text/javascript? src=?jquery.js?></script>
05 <script language=?javascript?>
06 $(function(){
07 $(?a#demo?).click(function(){  // เมื่อลิ๊งค์ หรือ แท็ก <a> ที่มี id เท่ากับ demo ถูกคลิก
08 alert(?Hello World?); // ให้แสดงข้อความ Hello World
09 });
10 });
11 </script>
12 </head>
13 <a href=?#? id=?demo?>คลิกเพื่อดูผล</a>
14 <body>
15 </body>
16 </html>

นำ Code ด้านบนนี้ไป สร้างเป็น file html และนำ file jquery.js มาอยู่ใน path เดียวกัน แ้ล้วลองเปิด file HTML ดูผลนะครับ

เนื้อหานี้นำมาจาก เวป http://www.ninenik.com/ เพื่อเป็นแหล่งเก็บข้อมูลอีกที เผื่อวันใด เวปต้นฉบับมีปัญหาครับผม

Technorati Tags: Programming, jQuery, jQuery_first_script

การกำหนด Selectors ด้วย jquery แบบ Basic

admin — Sun, 19 Apr 2009 06:12:54 +0000

jquery function จะอ้างอิง object ด้วยคำสั่ง $(”…”) Selectors ของ jquery แบบ Basic จะเป็นวิธีการอ้างอิง object ที่เป็นแท็ก html ภายในเว็บเพจของคุณ ประกอบไปด้วย

 HTML |   copy code | ?  
1 $("#id")

เป็นการเลือก object ที่มี id ตามที่กำหนด // จะแสดงตัวอย่างประกอบด้านล่าง

 HTML |   copy code | ?  
1 $(".class")

เป็นการเลือก object ที่มี class ตามที่กำหนด // จะแสดงตัวอย่างประกอบด้านล่าง

 HTML |   copy code | ?  
1 $("element")

เป็นการเลือก object ที่มี tag ตามที่กำหนด // จะแสดงตัวอย่างประกอบด้านล่าง

 HTML |   copy code | ?  
1 $("*")

เป็นการเลือก object ทั้งหมด // จะแสดงตัวอย่างประกอบด้านล่าง

 HTML |   copy code | ?  
1 $("selector1, selector2,.... selectorN")

เป็นการเลือก object แบบหลายๆ แท็ก // จะแสดงตัวอย่างประกอบด้านล่าง
ตัวอย่างประกอบ

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <script type=?text/javascript? src=?jquery.js?></script>
04 <script type=?text/javascript?>
05    $(?#mydi?).show();  // เป็นการเลือก object ที่มี id ตามที่กำหนด
06    $(?.myclass?).show(); // เป็นการเลือก object ที่มี class ตามที่กำหนด
07    $(?a?).show();  // เป็นการเลือก object ที่มี tag ตามที่กำหนด คือ tag <a>
08    $(?*?).show(); // เป็นการเลือก object ทั้งหมด
09    $(?a,p,span?).show(); //เป็นการเลือก object แบบหลายๆแท็กได้แก่ <a> <p> <span>
10 </script>
11 </head>
12 <body>
13 <a id=?myid1? href=?http://www.ninenik.com/?>Ninenik.com</a>
14 <a class=?myclass? href=?http://www.ninenik.com/?>Ninenik.com</a>
15 <a  href=?http://www.ninenik.com/?>Ninenik.com</a>
16 <p>www.ninenik.com</p>
17 <span>www.ninenik.com</span>
18 </body>
19 </html>

Technorati Tags: Programming, jQuery, jQuery_Selector

สิ่งจำเป็นก่อนการทำงานของโปรแกรม

admin — Sun, 19 Apr 2009 06:06:53 +0000

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

 HTML |   copy code | ?  
1 $(document).ready(function(){
2 // เริ่มต้นโค้ดของคุณในส่วนนี้
3 });

โค้ดที่พร้อมเขียน jquery เป็นดังนี้

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <script type=?text/javascript? src=?jquery.js?></script>
04 <script type=?text/javascript?>
05 $(document).ready(function(){
06 // เริ่มต้นโค้ดของคุณในส่วนนี้
07 });
08 </script>
09 </head>
10 <body>
11 <a href=?http://jquery.com/?>jQuery</a>
12 </body>
13 </html>

หรือสามารถเขียนในรูปแบบย่อ อีกแบบได้ด้วย

 HTML |   copy code | ?  
1 $(function(){
2 // เริ่มต้นโค้ดของคุณในส่วนนี้
3 });

หรือแบบนี้ก็ได้

 HTML |   copy code | ?  
1 jQuery(function($) {
2 // เริ่มต้นโค้ดของคุณในส่วนนี้
3 });

ซึ่งจะได้เป็น

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <script type=?text/javascript? src=?jquery.js?></script>
04 <script type=?text/javascript?>
05 $(function(){
06 // เริ่มต้นโค้ดของคุณในส่วนนี้
07 });
08 </script>
09 </head>
10 <body>
11 <a href=?http://jquery.com/?>jQuery</a>
12 </body>
13 </html>

หรือ

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <script type=?text/javascript? src=?jquery.js?></script>
04 <script type=?text/javascript?>
05 jQuery(function($) {
06 // เริ่มต้นโค้ดของคุณในส่วนนี้
07 });
08 </script>
09 </head>
10 <body>
11 <a href=?http://jquery.com/?>jQuery</a>
12 </body>
13 </html>

เลือกรูปแบบการเริ่มต้นการเขียนตามต้องการ ส่วนผมจะใช้

Technorati Tags: Programming, jQuery, work_with_jQuery

เริ่มต้นกับ jquery

admin — Sun, 19 Apr 2009 05:53:27 +0000

สร้างไฟล์สำหรับทดสอบการเรียนรู้ jquery ของคุณด้วย html อย่างง่าย

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <script type=?text/javascript? src=?path/to/jquery.js?></script>
04 <script type=?text/javascript?>
05 // ใส่โค้ดของคุณที่นี่
06 </script>
07 </head>
08 <body>
09 <a href=?http://jquery.com/?>jQuery</a>
10 </body>
11 </html>

แก้ไขบรรทัดตำแหน่งของไฟล์ jquery.js .ให้ถูกต้อง

 HTML |   copy code | ?  
1 <script type=?text/javascript? src=?js/jquery-1.2.6.min.js?></script>

พร้อมแล้วสำหรับการเขียน jquery

 HTML |   copy code | ?  
01 <html>
02 <head>
03 <script type=?text/javascript? src=?js/jquery-1.2.6.min.js?></script>
04 <script type=?text/javascript?>
05 // ใส่โค้ดของคุณที่นี่
06 </script>
07 </head>
08 <body>
09 <a href=?http://jquery.com/?>jQuery</a>
10 </body>
11 </html>

Technorati Tags: Programming, jQuery, Beginning_jQuery

1	Program first;
2	Uses Crt;
3	Var x : integer;
4	Begin
5	writeln(?Hello World!?);
6	End.

1	#include
2	main()
3	{
4	int i;
5	printf(?Hello World!n?);
6	}stdio.h>

01	<html>
02	<head>
03	<title>demo</title>
04	<script type=?text/javascript? src=?jquery.js?></script>
05	<script language=?javascript?>
06	$(function(){
07	$(?a#demo?).click(function(){
08	$(?div#show_demo?).show();
09	});
10	$(?a#demo2?).click(function(){
11	$(?div#show_demo?).hide();
12	});
13	});
14	</script>
15	<style type=?text/css?>
16	#show_demo{
17	width:120px;height:150px;
18	border:1px solid #cccccc;
19	background-color:#999999;
20	display:none;
21	padding:5px;
22	overflow:hidden;
23	}
24	</style>
25	</head>
26	<br />
27
28	<a href=?#? id=?demo?>คลิกเพื่อแสดงข้อความที่ซ่อน</a><br />
29	<div id=?show_demo?>
30	ข้อมูล ที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
31	</div>
32	<a href=?#? id=?demo2?>คลิกเพื่อซ่อนข้อความ</a><br />
33	<body>
34	</body>
35	</html>

1	$(document).ready(function(){
2	// เริ่มต้นโค้ดของคุณในส่วนนี้
3	});

1	jQuery(function($) {
2	// เริ่มต้นโค้ดของคุณในส่วนนี้
3	});

01	<html>
02	<head>
03	<script type=?text/javascript? src=?path/to/jquery.js?></script>
04	<script type=?text/javascript?>
05	// ใส่โค้ดของคุณที่นี่
06	</script>
07	</head>
08	<body>
09	<a href=?http://jquery.com/?>jQuery</a>
10	</body>
11	</html>

01	<html>
02	<head>
03	<script type=?text/javascript? src=?js/jquery-1.2.6.min.js?></script>
04	<script type=?text/javascript?>
05	// ใส่โค้ดของคุณที่นี่
06	</script>
07	</head>
08	<body>
09	<a href=?http://jquery.com/?>jQuery</a>
10	</body>
11	</html>