Kotenarok

v-model เป็นพื้นฐานสำคัญของ Vue.js ที่ใช้เพื่อผูกข้อมูลกับตัวแปร เมื่อ user กรอกข้อมูลเข้ามาจะทำให้ตัวแปรที่ผูกนั้นได้รับ value จาก user ด้วย หรือในทางกลับกันถ้าหาก โค้ดของเราแก้ไขค่าตัวแปรนั้น user ก็จะเห็นค่าที่เปลี่ยนไปตามที่โค้ดเราเขียนเช่นกัน เรียกว่า "two-way data binding" v-model สามารถใช้งานได้กับ input พื้นฐานทั้งหมด ดูโค้ดตัวอย่างได้ตามนี้ Input Text <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> จากตัวอย่างด้านบนเราผูก value กับตัวแปรชื่อ message ผ่าน v-model เมื่อ user กรอกข้อมูลเข้ามาที่ input ข้อความที่แสดงตรง <p> ก็จะอัพเดทตามไปด้วย ตัวอย่างอื่น ๆ Textarea <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> Checkbox <input type="checkbox" id="checkbox" v-model="checked...

 Trait ใน PHP จะเหมือนกับเป็นลูกผสมระหว่าง class แม่ที่ทำมาให้ extends และ interface โดยที่ trait นั้นสามารถถูกเรียกใช้ได้หลาย trait ใน class เดียวกัน เหมือนการ implements interface แต่ตัว trait นั้นไม่ต้องประกาศ function เป็น abstract เลย ประโยชน์ของ trait คือการที่เรารวมเอา "ลักษณะ" ของโค้ดที่ใช้งานบ่อยมาไว้ในที่เดียวเพื่อให้สะดวกต่อการนำไปใช้ซ้ำ คุณสมบัติของ Trait เรียกใช้ได้มากกว่า 1 trait เหมือนการ implements interface อยากประกาศ function หรือ property ก็ทำได้หมด ทั้ง public, protected, private หรือ static (ข้อนี้จะให้ความรู้สึกเหมือน extends class) การเรียกใช้ trait จะเสมือนกับการก๊อปโค้ดทั้งยวงใน trait ไปแปะใน class ที่เรียกใช้ และใช้งานได้ตามนั้นเลย โดยเฉพาะ scope หากประกาศเป็น private ไว้ ก็จะใช้ได้เฉพาะภายใน class ที่เรียกใช้ trait <?php trait ExampleTrait { private privateFunc() { echo 'This is private function'; } } class ParentClass { use ExampleTrait; //เรียกใช้ trait หากมีมากกว่า 1 ขั้นด้วย , public function parentFunc() { ...

 จากเกม Black Desert Online วิธีผ่านเควสซีซั่น "สารอาหารที่เต็มเปี่ยม กระดูกที่แข็งแรง !" เมื่อเราทำเควสมาจนถึงเมืองเวเรีย และจบเควส "ราวกับแซลมอนที่สวนทางน้ำ" ที่ตัวนากชื่อ "คลีโอ" แล้ว ให้กดกินปลาทอดเท่านี้ก็จะผ่านเควสซีซั่นนี้แล้วครับ

Recursive function คือการที่ function เรียกใช้ตัวมันเองวนไปเรื่อย ๆ จนกว่าจะถึง break case คือหยุดเรียก function โดยมันเป็นรูปแบบการ loop รูปแบบหนึ่ง ซึ่ง recursive function จะพบเห็นได้ในทุกภาษาคอมพิวเตอร์ แต่ในบทความนี้จะขอเขียนโค้ดตัวอย่างแบบไม่ยึดติด syntax ของภาษาใดภาษาหนึ่งละกัน ตัวอย่างที่ 1: Factorial ตัวอย่างแรกขอยกอะไรง่าย ๆ อย่าง factorial  ละกัน function factorial(n) { if (n <= 1) { return 1; } return n * factorial(n - 1); } จากตัวอย่างโค้ดจะเห็นว่า function มีการเรียกตัวมันเอง หากเราเรียก function โดยส่งเลข 5 ให้ไป การทำงานจะเป็นดังรูปนี้ จะสังเกตเห็น if statement ตรงนี้คือ break case จะไม่เรียก function ต่อแล้วเพื่อให้จบการทำงาน ตัวอย่างที่ 2: Fibonacci Fibonacci จะเจอบ่อยมากในโจทย์จำพวก recursive function หน้าตาโค้ดจะเป็นตามด้านล่างนี้ function fib(n) { if (n <= 1) { return n; } return fib(n - 1) + fib(n - 2); } อันนี้จะเริ่มยากขึ้นมานิดนึง เพราะแบ่งการเรียก function ออกมาเป็น 2 ตัวด้วยกัน ถ้าเราส่งเลข 5 เข้าไปจะได้ตามภาพนี้ สรุป Recu...

 บทความนี้จะมานำเสนอตัวละคร 6 ดาวที่"ส่วนตัว"คิดว่าควรจะปั้นไว้ใช้ เนื่องจากเห็นหลาย ๆ กิจกรรมต้องมี ไม่งั้นแทบจะเรียกได้ว่า"ไม่มีทางผ่าน" จะไล่ไปตั้งแต่ตัวที่ใช้บ่อยที่สุดไล่ลงไป แต่ก็ขอแนะนำให้หาข้อมูลจากหลาย ๆ แหล่งประกอบการตัดสินใจไปด้วย อาจจะมีข้อมูลอื่น ๆ ที่มีประโยชน์กับคุณเพิ่มเติมก็ได้ ในบทความนี้จะไม่ลงลึกถึงขั้นอธิบายความสามารถสกิล จะเน้นว่าต้องอัพอะไรมากกว่า และจะทำแยกบทความของแต่ละตัวละครเพื่อลงลึกอีกทีว่าแต่ละสกิลทำอะไรได้ ทีนี้ก็มาเริ่มกันเลย Blaze Guard ตีหมู่เลื่อยไฟฟ้า หนึ่งในตัวที่มีโจมตีกายภาพอันดับต้น ๆ ของเกม สกิล 2 ถ้าให้ดีอัพให้ถึง M3 ได้ใช้แน่นอน บัฟโจมตีและป้องกันถาวรทั้งเกม(แต่ชาร์จนาน) เพิ่มระยะโจมตีเป็น 2 ช่องด้านหน้าด้วย Surtr Guard สายตีเวทย์ เป็น 1 ในตัวที่โจมตีเวทย์รุนแรงที่สุดในเกม สกิล 3 อัพให้ถึง M3 แล้วจะได้พลังโจมตีเวทย์ที่แรงทะลุจักรวาล Thorns Guard ตีไกลที่สามารถอัพเกรดตัวเองด้วยสกิลทำให้ระยะโจมตีเทียบเท่ากับ Sniper ได้เลย ทำดาเมจได้แรงด้วย สกิล 3 อัพให้ถึง M3 ใช้ในเกม 2 รอบจะได้รับสกิลถาวรตลอดเกม  Eyjafjalla น้องแกะ เป็นสายเว...

 บทความนี้ผมจะถือว่าผู้อ่านมีความรู้เรื่อง Vue.js มาแล้วในระดับหนึ่ง เนื่องจากไม่ใช่บทความสอนการเขียน Vue.js แต่เป็นส่วนเสริมเรื่องการทำ component ขึ้นมาเองแล้วรองรับการใช้งาน v-model (ถ้ายังไม่รู้ว่า v-model คืออะไร แนะนำให้ศึกษาเพิ่มเติมมาก่อน) ทำให้รองรับ v-model ยังไง? v-model มันคือการส่งข้อมูลไปกลับระหว่าง parent component และ child component ซึ่งถูกเรียกว่า two-way binding คือค่าของตัวแปรจะถูกส่งไปกลับระหว่าง 2 component นี้ ค่าตั้งต้นของการทำ v-model คือ component จะรับค่าผ่าน props ที่ชื่อว่า value และส่งค่ากลับไปด้วย event ที่ชื่อ input ขอยกตัวอย่างโค้ดง่าย ๆ เป็น EmailInput.vue ตามนี้ละกันครับ <template> <input type="email" @input="handleInput" /> </template> <script> export default { props: ['value'], data: () => ({ email: null }), created() { if (this.value) { this.email = this.value; } }, methods: { handleInput (e) { this.email = e.target.value; this.$em...

มาถึงคราวของ Interface หลังจากจบบทความ Abstract class ไป โดยตัว Interface จะมีความแตกต่างตรงที่ function ทุกตัวที่อยู่ในนี้ต้องเป็น public และ abstract function ทั้งหมด ซึ่งหน้าที่ของ Interface คือการกำหนดความสามารถบางอย่างให้กับ Class ที่ implements Interface ไปใช้ ซึ่งสามารถ implements ได้มากกว่า 1 Interface มาดูตัวอย่างโค้ดกัน โค้ดชุดนี้นำมาจากเว็บ  W3Schools Online Web Tutorials  โดยในโค้ดจะเป็น class เกี่ยวกับสัตว์ Interface Animal บอกว่า สัตว์สามารถทำเสียงได้ แต่จะทำเสียงอะไรก็ขึ้นกับ class ของสัตว์ที่ implements ไปนั่นเอง <?php // Interface สัตว์บอกว่าสัตว์ทำเสียงร้องได้ interface Animal { public function makeSound(); } // Class definitions class Cat implements Animal { public function makeSound() { echo " เมี้ยว "; } } class Dog implements Animal { public function makeSound() { echo " โฮ่ง "; } } class Mouse implements Animal { public function makeSound() { echo " จี๊ด "; } } // สร้าง object ของ class สัตว์ต่าง ๆ...

 บทความนี้จะออกแนววิชาการหน่อย ส่วนตัวคิดว่ามีโอกาสน้อยที่เราจะได้เขียน Abstract class ไว้ใช้เอง ส่วนมากจะเจอตาม library หรือ framework ต่าง ๆ ที่ทำมาให้คนอื่นใช้เสียมากกว่า Abstract Class คืออะไร Abstract class คือ class ที่"ไม่สมบูรณ์" กล่าวคือมี abstract function ประกอบอยู่ (จริง ๆ ถึงไม่มีก็ประกาศเป็น Abstract class ได้ แต่มักไม่ทำกัน แต่ถ้ามี abstract function เมื่อไหร่ compiler จะบังคับให้เราประกาศเป็น Abstract class ทันที) โดย abstract function จะเป็น function ที่ถูกบังคับให้ class ลูก override function ทับเมื่อ extends abstract class มาใช้ ประโยชน์ของมันคือการวาง guideline ให้คนอื่นมาใช้เพื่อพัฒนาโค้ดของเราต่อไป อาจจะมีบาง function ที่ต้องโดนเรียกใช้แน่ ๆ แต่ content ของ function จะขึ้นอยู่กับ class ลูกที่ extends ไป ยกตัวอย่าง <?php abstract class LivingThings { protected $scientificName;//สิ่งมีชีวิตมีชื่อวิทยาศาสตร์ abstract public function hasLegs() : boolean; abstract public function canFly() : boolean; } // Child classes class Cobra extends Living...

 async, await เป็นตัวช่วยจัดการ Promise ให้ดูอ่านง่ายขึ้น จะเห็นผลมากหากเราต้องจัดการกับ Promise มากกว่า 1 ตัว การใช้ async มีข้อจำกัดว่าต้องใช้กับ function เท่านั้น เราจะลองแปลงโค้ดจากบทความที่แล้ว ให้อยู่ในรูปของ async / await async function test() { let myPromise = new Promise((resolve, reject) => { let x = 0; //ลองสลับเลขเพื่อดูผลลัพธ์เมื่อสำเร็จและล้มเหลว if (x == 0) { resolve("OK"); } else { reject("x must be 0"); } }); try { let msg = await myPromise;//await เพื่อรอรับผลลัพธ์จากกรณีที่สำเร็จ console.log("Success: " + msg); } catch (msg) { console.log("Error: " + msg);//ใช้ try / catch ดักกรณีที่ล้มเหลว } } test();//เรียกใช้ function ให้ทำงาน อ้างอิง: async function - JavaScript | MDN (mozilla.org) Async/await (javascript.info)

 ก่อนจะไปเริ่มกัน เราต้องเข้าใจคำว่า asynchronous ก่อนเป็นอันดับแรก asynchronous คือการทำงานแบบไม่ต้องการรอผลลัพธ์ ยกตัวอย่างง่าย ๆ เช่น การรอคิวเข้าร้านอาหาร ถ้าเป็น synchronous คือเราต้องรอจนกว่าจะได้คิว (เหมือนรอผลลัพธ์) ถึงจะเข้าไปในร้านได้ แต่ถ้าเป็นการทำงานแบบ asynchronous เราจะไม่ยืนรอคิวหน้าร้าน เราจะไปเดินเล่นเตร็ดเตร่ หรือทำธุระอย่างอื่น จนกว่าร้านค้าจะโทรมาตามเรา (ร้านค้าบอกผลลัพธ์เราว่าได้คิวแล้ว) แล้วจึงค่อยกลับมาเข้าร้าน หมายเหตุ: เหมือนเคย หากใครยังไม่เข้าใจ arrow function แนะนำให้กดกลับไปอ่านก่อนนะครับ Promise คืออะไร? Promise คือ object ตัวนึ่งที่ใช้จัดการการทำงานแบบ asynchronous โดยตัว Promise จะมีการให้เราจัดการด้วยว่าถ้าการทำงานสำเร็จให้ return  อะไร หรือถ้าล้มเหลวให้ return อะไร  การจัดการกับงานที่สำเร็จเราจะใช้ .then ในการจัดการ ส่วนงานที่ล้มเหลวเราจะจัดการด้วย .catch  const promiseA = new Promise( (resolve, reject) => { setTimeout(() => {//ให้ทำงานส่วนนี้หลังจาก 1 วินาที (1000 millsec) resolve(777); //ใช้ resolve บอ...