รวมเรื่องราวฉบับอยากเขียน by Ta

ซีรีย์บทความชุด

developer

ซีรีย์: JavaScript/Fundamental for beginner

รวมเนื้อหาการใช้ภาษา JavaScript สำหรับมือใหม่ ตั้งแต่หลักการ แนวคิด การทำงานกับเว็บทั้งฝั่งclient-server library&frameworkที่น่าสนใจ จนถึงมาตราฐานการเขียนแบบใหม่ ES6 (ECMAScript6)

บทความล่าสุด

125-cover

All About OOP – ตอนที่ 3 Polymorphism หลากรูป หลายลักษณ์

อ่านตอนก่อนหน้านี้ได้ที่ มาถึงข้อสุดท้ายของคอนเซ็ปแนวคิดแบบ OOP กันแล้ว นั่นคือ Polymorphism (โพลีโมร์ฟิซึม – คำศัพท์ที่เจอครั้งแรกออกไม่ออกเลยว่าต้องออกเสียงว่าอะไร) ภาษาไทยแปลออกมาว่า “การพ้องรูป” บอกตรงๆ เลยว่าเป็นหัวข้อที่เขียนยากมาก ถ้าอ่านแล้วยังไม่เข้าใจ ตอนหลังจะมีตัวอย่างให้นะ (อย่าเพิ่งเลิกงานล่ะ) ในบทความที่แล้วเราพูดถึง Inheritance หรือการสืบทอดไปแล้วซึ่งพูดถึงการส่งต่อโค้ดส่วนที่เหมือนๆ กันลงไปยังคลาสลูก แล้วนำคลาสลูกไปใช้โดยไม่ต้องเขียนโค้ดใหม่ทั้งหมด … แต่สำหรับ Polymorphism จะเป็นกระบวนท่าต่อเนื่องมาอีกทีด้วยมุมมองที่กลับกัน คือ เราจะเขียน child-class เพื่อปรับปรุงการทำงานของ parent-class แทน (ปรับปรุงเฉยๆ ไม่ได้แก้ไขโค้ด) ตัวอย่างเช่น กำหนดให้เรามีคลาสของวัตถุที่สามารถบินได้ ของเรียกว่า Flyable ละกัน

ต่อมา...

127-cover

JavaScript ฉบับมือใหม่ – ตอนที่ 2 มารู้จักECMAScript6กันดีกว่า

ภาษาโปรแกรมนั้นมีการปรับปรุงไปเรื่องๆ JavaScript ก็เช่นกัน ถ้าย้อนไปดูประวัติของมันจะพบว่ามันเกิดขึ้นมาเพื่อทำงานง่ายๆ ให้เบราเซอร์มี interactive กับผู้ใช้ได้นิดหน่อยเท่านั้น โดยที่คนสร้างคงไม่ได้คาดว่ามันจะเดินทางมาไกลขนาดนี้ ทำให้ต้องออกเวอร์ชั่นใหม่ๆ ที่มีฟีเจอร์เหมือนภาษาระดับสูงภาษาอื่นมา ซึ่งตัวที่เราควรจะรู้จักในขณะนี้คือ เวอร์ชั่นที่ 6 หรือ ES6 (ถ้าเรียกตามปีคือ ES2015) ที่ปัจจุบันเบราเซอร์ที่รองรับการเขียน JavaScript แบบ ES6 ก็มีมากขึ้นเยอะแล้ว เพราะมันออกมาตั้งหนึ่งปีแล้ว (จริงๆ ตอนนี้เขากำลังจะไป ES7 กันแล้วล่ะ) ในบทความนี้จะมาแนะนำฟีเจอร์ใหม่ๆ ที่เพิ่มเข้ามาใน ES6 สำหรับคนที่เคยเขียนแต่แบบ ES5 อาจจะต้องปรับตัวตามซะหน่อยนะ let กับ const จากเดิมเวลาเราจะประกาศตัวแปรในภาษา JavaScript เราจะใช้คำสั่ง var...

120-cover

JavaScript ฉบับมือใหม่ – ตอนที่ 1 พื้นฐานการเขียนJS

JavaScript ถือว่าเป็นหนึ่งในภาษายอดนิยมที่สุดในยุคนี้ มีคนใช้งานมันเยอะมาก แต่ในขณะเดียวกันมันก็เป็นภาษาที่คนไม่เข้าใจเยอะที่สุดเช่นกัน โดยเฉพาะมือใหม่ทั้งหลาย เพราะแค่จะศึกษาก็เจอชื่อต่างๆ นานา เช่น jQuery Angular npm node.js React หรืออะไรต่อมิอะไรมากมายจนไม่รู้จะเริ่มจากไหน แต่ถ้าถามเรา เราแนะนำให้คุณเริ่มต้นจากพื้นฐานคือตัว JavaScript เพียวๆ ซะก่อน ถ้าเก่งแล้วค่อยขยับไปใช้ตัวอื่นๆ บทความชุดนี้จะพูดถึงพื้นฐาน JavaScript คร่าวๆ แนะนำแนวทางการใช้งานฉบับโปรแกรมเมอร์มือใหม่ แต่คำว่ามือใหม่ในที่นี้หมายถึงคนที่อาจจะไม่เคยเขียน JavaScript มาก่อนไม่ใช่มือใหม่ในโลกโปรแกรมมิ่งนะ เรื่องของ logic & algorithm พื้นฐานที่โปรแกรมเมอร์ควรจะรู้กันเราจะถือว่าคุณผู้อ่านรู้แล้วยกเว้นถ้ามันน่าสนใจจริงๆ เอ้า งั้นเริ่มกันเลย JavaScript ไม่ใช่ Java แม้ว่าทั้งสองภาษาจะมีคำว่า “จาว่า” อยู่ในชื่อเหมือนกัน...

cover

[รีวิว-เรื่องย่อ] Kimi no Na wa: 君の名は。 – 2016 (Your name, ชื่อของเธอคือ…) (★★★)

君の名は。Kimi no Na wa – (Your name…) (2016) ให้คะแนน (★★★) ข้อมูลเบื้องต้น ชื่อเรื่อง: 君の名は。 ชื่อเรื่องภาษาอังกฤษ: Your name แนวเรื่อง: แฟนตาซี/ดราม่า/วิทยาศาสตร์ วันฉาย: 26/8/2016 (ญี่ปุ่น), 13/10/2016 (ไทย) เว็บไซต์: http://www.kiminona.com เรื่องย่อ ว่าด้วยเรื่องของเด็กหนุ่มสาวหนึ่งคู่ ทาคิ – เด็กหนุ่มนักเรียน ม.ปลาย ที่เติบโตในเมืองใหญ่โตเกียว กับ มิทสึฮะ – เด็กสาว ม.ปลาย ที่โตมาในหุบเขาแถบชนบท ซึ่งแม้ทั้งสองดูจะมีชีวิตที่แตกต่างกัน แต่สิ่งหนึ่งที่ทั้งสองเหมือนกันคือต่างแสวงหาการใช้ชีวิตในแบบของอีกคน...

123-cover

All About OOP – ตอนที่ 2 เจาะลึก Inheritance เมื่อคลาสมีผู้สืบทอดได้

อ่านตอนก่อนหน้านี้ได้ที่ ในโลก OOP เกิดขึ้นจากแนวความคิดหลักคือ “reuse เอากลับมาใช้ซ้ำ” ซึ่งเป็นสาเหตุที่ทำให้เกิดคอนเซ็ปที่สองตามมากคือ “ความเป็น abstract” ย้อนอดีตกันนิดนึง แนว คิดของ Object Oriented นั้นมีมานานมากแล้ว ประมาณปี 1960 (ใครเกิดทันบ้าง แน่นอนว่าเราเกิดไม่ทัน ฮา) โดยนักวิทยาศาสตร์คอมพิวเตอร์ 2 คนคือ Ole-Johan Dahl และ Kristen Nygaard ในยุคนั้นการเขียนโปรแกรมจะเขียนกับแบบ imperative แบบบน-ลง-ล่าง เขียนแบบสอนคอมพิวเตอร์เป็นขั้นๆ แบบ how-to … ทั้งสองคนต้องการสร้างภาษาคอมพิวเตอร์ใหม่ชื่อว่า SIMULA I ซึ่งเป็นภาษาสำหรับการทำ simulation...

122-cover

All About OOP – ตอนที่ 1 มารู้จัก class และ object กันเถอะ

บทความนี้ไม่ใช่บทความสอนสร้าง class ว่าเขียนโค้ดยังไง แต่เป็นการแนะนำการเขียนโค้ดโดยใช้ประโยชน์จากสิ่งที่ OOP เตรียมไว้ให้ได้มากที่สุด ดังนั้นพื้นฐานความรู้ขั้นต่ำสุดในบทความชุดนี้คือคุณควรจะอยู่ในระดับ “อ่านโค้ดง่ายๆ ออก” ไม่ต้องเก่งมากก็พอแล้ว   เปิดซีรีย์บทความใหม่ All About OOP … บทความชุดนี้จะพูดถึงแนวคิดการเขียนโปรแกรมในรูปแบบ Object Oriented Programming ซึ่งเป็นแนวคิดและสไตล์การเขียนโปรแกรมที่โปรแกรมเมอร์ (หรือ Developer) คงพบเจอกัน โปรเจคเกือบทุกโปรเจคที่ทำ หรือแม้แต่โค้ดที่โหลดมาใช้จากอินเตอร์เน็ทส่วนใหญ่มันจะอยู่ในรูปของ class และ object เสมอ เอาจริงๆ ตอนเขียนนี่ก็ยังลังเลอยู่นะว่าจะพูดถึงเรื่องอะไรบ้างดี เพราะผู้เขียนก็ยังไม่ได้เทพ OOP ขนาดบรรลุแล้ว แต่ก็เอาน่ะ ถ้ารอต่อไปก็คงไม่ได้เขียนแน่ๆ ดังนั้นหากบทความมีข้อผิดพลาดอะไรคุณสามารถคอมเมนท์แสดงความคิดเห็นได้นะ บทความชุดนี้จะพูดถึงอะไรบ้าง ที่กะไว้คร่าวๆ...

13555506_1167938326580649_1553250334_o

ฉันมีเสื้อเว็บเป็นของตัวเองแล้วนะ

บอกเลยว่าบล๊อกนี้คือโฆษณานะ หึหึหึ ไม่มีอะไร แค่อยากบันทึกไว้อย่างเป็นทางการว่าเว็บเราดำเนินมาถึงจุดที่มีเสื้อเว็บเป็นของตัวเองแล้ว!? … ลงวันที่ 5 ก.ค. 2016 โดยตอนนี้เป็นเวอร์ชั่น 1.0-beta (ยาวไปมั้ย แค่เวอร์ชั่นเสื้อ?) เป็นรุ่นทดลองทำ ถ้าเวิร์คจะลองออกแบบใหม่ให้สวยกว่านี้แล้วทำหลายๆ ตัว สำหรับตอนนี้ยังไม่มีจำหน่ายนะ แต่ถ้าอยากได้ติดต่อกลับไมค์ได้ (ง่ายสุดคือคอมเมนท์ทิ้งข้างล่างไว้พร้อมข้อมูลติดต่อกลับ) เสื้อเป็นแบบสกรีนหน้าหลัง กับร้าน monamafia ที่ทำเสื้อให้ได้เร็วมาก คือจะใช้ใส่ไปเอ้าติ้งวันที่ 7 ก.ค. แต่ดันมานึกได้วันที่ 1 ก.ค. ว่าอยากได้เสื้อเว็บ ก็เลยออกแบบแล้วสั่งซื้อไป ตอนแรกก็ไม่คิดว่ามันจะมาส่งทัน แต่ปรากฏว่าทางร้านทำเสร็จวันที่ 3 ส่งถึงบ้านวันที่ 5 … ซัก 1 วัน...

116-cover

มือใหม่หัดถ่ายรูป – ตอนที่ 6 Focal Length รวมทุกเรื่องของทางยาวโฟกัส

เรื่องที่เราจะพูดถึงกันวันนี้อาจจะยากอยู่สักหน่อยเพราะพื้นฐานของมันจะเกี่ยวกับฟิสิกส์และคณิตศาสตร์อยู่เล็กน้อย แต่ไม่ต้องห่วงว่าจะอ่านไม่รู้เรื่อง … ใครคิดว่าตัวเองเจอหลักการฟิสิกส์เข้าไปต้องมึนแน่นอนให้ข้ามไปอ่านหัวข้อที่ 2 ได้เลย กดเพื่อเปิด/ปิดเนื้อหาที่เกี่ยวกับฟิสิกส์เลย ฟิสิกส์: กระจกและเลนส์ 50.5 ตั้งชื่อหัวข้อแบบนี้เพราะว่าบล๊อกนี้ไม่ใช่บล๊อกสอนฟิสิกส์ เลยเอาแค่ครึ่งเดียวพอ (ปกติวิชาเรียนจะชอบตั้งชื่อว่า Physics 101 ไงล่ะ) เพื่อที่จะได้เข้าใจทางยาวโฟกัสมากขึ้น เราต้องเริ่มจากที่มาของมันจริงๆ นั่นคือการเดินทางของแสงผ่านกระจกโค้งหรือเลนส์นั่นเอง ตามที่เราเรียนๆ กันมา เลนส์มี 2 ชนิดคือ เลนส์เว้า (Concave Lens) ที่ส่วนกลางของเลนส์เว้าเข้าไป และ เลนส์นูน (Convex Lens) ที่ส่วนกลางของเลนส์นูนออกมา … ก็ตามชื่อนั่นแหละ ซึ่งการที่มันไม่เป็นกระจกตรงๆ ทำให้แสงถูกหักเหเฉไปทางอื่น ดูรูปข้างล่างนะ เลนส์เว้าจะทำให้แสงกระจายออกส่วนเลนส์นูนจะรวมแสงเข้าด้วยกัน แต่ไม่ว่ามันจะรวมหรือกระจายแสง...

119-cover

[ทริป] @Hokkaido ~ ท่องธรรมชาติรอบเกาะฮอกไกโด 2016

เพิ่งไปเที่ยวญี่ปุ่นรอบที่ 2 มา (ครั้งแรกคือเมื่อ 5 ปีที่แล้ว ตอนนั้นไปแถวภาคกลาง โตเกียว-เกียวโต-โอซาก้า) ครั้งนี้ไปกันที่เกาะที่อยู่เหนือสุดของญี่ปุ่นคือ ฮอกไกโด นั่นเอง และเนื่องจากเป็นคนที่คิดว่าการท่องเที่ยวคือการไปพ้กผ่อน ครั้งนี้เราก็เลยไปกับทัวร์แน่นอนเพราะมันสบายและถูกกว่าไปเอง ที่เลือกๆ มามีหลายเจ้าแต่ที่รายการ+เวลาโอเคสุดคือของ Go Holiday ที่ต้องจองผ่าน Quality Express Tour (Qetour)  อีกทีนึง ตารางการท่องเที่ยวแบ่งเป็น 7 วัน แต่วันแรกกับวันสุดท้ายอยู่บนเครื่องบินดังนั้นไม่นับละกัน นับ day#1 จริงๆ คือวันที่ 2 ตามรายการทัวร์ ถ้าดูจากแผนที่ข้างล่างคือคุ้มมาก เพราะไปรอบเกาะเลย ขาดจุดสำคัญบางที่เช่น ฮาโกดาเตะ ฟุราโนะ และ วักกะไน...

118-cover

เรื่องของ this ใน JavaScript และวิธีการใช้ bind, call, apply

ติดตามอ่านบทความเกี่ยวกับ JavaScript อื่นๆ ได้ที่ สำหรับคนที่เคยเขียนโปรแกรมแบบ OOP (ใครไม่รู้จักไปอ่านเพิ่มเติมได้ที่นี่) น่าจะคุ้นเคยกับตัวแปรที่ชื่อว่า this ซึ่งโดยปกติแล้วจะหมายถึงตัว object ที่กำลังอ้างถึงอยู่ เช่น

ตัวอย่างข้างบน คลาสมีการประกาศตัวแปรชื่อ x เอาไว้ เมื่อเราจะสั่งงานใน method ให้ทำอะไรกับตัวแปร x นี่เราจะต้องขึ้นด้วยการบอกว่า this.x เพื่อเป็นการบอกว่าเราจะยุ่งกับ x ที่เป็นตัวแปรของคลาสข้างนอกโน้นนะ (ในบางภาษาเช่น Java สามารถละคีย์เวิร์ด this ได้แต่ตามหลักคือมันก็จะใส่ this ให้เองนั่นแหละ) แต่มีอยู่ภาษาหนึ่งที่คีย์เวิร์ด this ทำตัวไม่ค่อยเหมือนภาษาชาวบ้านคนอื่นเขาเท่าไหร่ นั่นคือ JavaScript