บทความ

กำลังแสดงโพสต์จาก ธันวาคม, 2020

[PHP] Trait ใช้งานยังไง?

 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() {

[BDO] วิธีผ่านเควสซีซั่น "สารอาหารที่เต็มเปี่ยม กระดูกที่แข็งแรง !" (ราวกับแซลมอนที่สวนทางน้ํา)

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

[เขียนโปรแกรม] Recursive function คืออะไร?

รูปภาพ
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 เข้าไปจะได้ตามภาพนี้ สรุป Recursiv

[Arknights] แนะนำตัวละคร 6 ดาวที่ควรปั้น

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

[Vue.js] ทำ component ให้รองรับ v-model ด้วยตัวเอง

รูปภาพ
 บทความนี้ผมจะถือว่าผู้อ่านมีความรู้เรื่อง 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

[PHP] Interface มีไว้ทำอะไร?

มาถึงคราวของ 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 สัตว์ต่าง ๆ

[PHP] Abstract 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

[JavaScript] async, await ใช้งานยังไง?

รูปภาพ
 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)

[JavaScript] Promise คืออะไร

รูปภาพ
 ก่อนจะไปเริ่มกัน เราต้องเข้าใจคำว่า 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 บอกว่างานสำเร็จ และคืนค่า 777 ไ

[JavaScript] Array .sort() ใช้งานยังไง?

รูปภาพ
 Array.sort() โดย default ของมันคือการแปลงค่าใน array เป็น string แล้วจับมาเรียงลำดับตามตัวอักษร แต่ก็รองรับการทำ custom sorting แบบอื่น ๆ ซึ่งอยู่ที่เราเขียนเลยว่าจะให้มันทำงานยังไง บทความนี้ตัวอย่างผมจะเน้นเขียนแบบ Arrow function หากใครยังไม่เข้าใจให้ลองอ่านวิธีการเขียนก่อนนะครับตาม link ตัวอย่างการใช้แบบ default const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort();//เรียกแบบนี้ได้เลย console.log(months); // ค่าที่ได้: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // ค่าที่ได้: Array [1, 100000, 21, 30, 4] จะเห็นว่ามันไม่มองค่าตัวเลขเป็นตัวเลข แต่เป็นการเทียบ string แทน โครงสร้างโค้ดการทำ custom sorting ในตัวอย่างด้านล่างจะเป็น callback function ที่ใช้สำหรับโยนให้ .sort() โดยค่า a และ b จะตั้งชื่อยังไงก็ได้ และเราจะทราบแค่ว่าเป็นค่า 2 ค่าที่มาเทียบกันเท่านั้น โดยเบื้องหลังการทำงานก็ขึ้นอยู่กับ compiler ของแต่ละ browser หรือ platform ว

[JavaScript] Array .reduce() ใช้งานยังไง?

รูปภาพ
 .reduce() เป็น built-in function ของ Array ใน JavaScript ใช้งานเพื่อที่จะจัดการกับ array ก้อนนั้นเพื่อให้ได้ค่า ๆ นึงออกมา ยกตัวอย่างเช่น การทำ function sum เพื่อบวกรวมตัวเลขที่อยู่ใน array ทั้งหมดออกมาเป็นค่า sum ค่าเดียว โดย function นี้จะมี syntax หน้าตาแบบนี้ arr.reduce(callback ( accumulator, //ผลจากแต่ละรอบ loop currentValue, //ค่าของสมาชิก array ปัจจุบัน [, index //(optional) index ของ array ปัจจุบัน [, array]] //(optional) เป็น callback ของก้อน array ที่เรานำมาใช้เรียก .reduce โดยปกติมักไม่ได้ใช้ค่านี้ ) [, initialValue] //(optional) ค่าตั้งต้นของ function ซึ่งถ้าเราไม่ใส่ function จะใช้สมาชิกตัวแรกของ array เป็นค่าตั้งต้น //สังเกตดี ๆ คือค่าตั้งต้นนี้จะอยู่นอก callback function ) ขอใช้ตัวอย่าง function sum จากบทความ " Rest parameters คืออะไร " มาเป็นตัวอย่างอีกครั้งละกัน ตัวอย่างแรกลองเขียน callback function ทั่วไปก่อน function sum(...args) { return args.reduce(function(accumulator, currentValue) { return accumulator + currentValue

[JavaScript] Rest parameters คืออะไร

รูปภาพ
 บทความที่ก่อนได้เคยพูดถึง Spread syntax (...)  ไปแล้ว รอบนี้มาพูดถึงสิ่งที่หน้าตาเหมือนกันแต่ใช้งานแตกต่างกันโดยสิ้นเชิงคือ Rest parameters (Rest syntax) เป็นการประกาศ function ขึ้นมาให้สามารถรับ arguments "เท่าไหร่ก็ได้" โดยค่า arguments ที่ถูกส่งมาจะถูกรวบเป็น array ก้อนเดียว แล้วนำไปใช้ต่อ ซึ่งโดยปกติจะพบเห็นได้ทั่วไปใน built-in function ที่มีมาให้ใช้อยู่แล้ว ยกตัวอย่างเช่น Math.max(arg1, arg2, ..., argN); //หาค่าสูงสุด console.log(arg1, arg2, ..., argN); // log ตัวแปรออกมาดูค่าในหน้าต่าง Console แต่เราเองก็สามารถนำมาใช้ประโยชน์ในการสร้าง function เพื่อไว้ใช้งานเองหรือเผื่อให้คนอื่นนำไปใช้งานได้สะดวกขึ้นก็ได้ ขอยกตัวอย่างเป็น function sum ไว้ใช้บวกรวมตัวเลขทั้งหมดที่ส่งเข้ามาใน function function sum(...args) { let total = 0; for (let num of args) { total += num; } return total; } console.log(sum(1, 2)); //3 console.log(sum(1, 2, 3)); //6 console.log(sum(1, 2, 3, 4, 5)); //15 แต่ function ด้านบนจะเจอปัญหาว่าถ้าค่าที่ส่งเข้ามาไม่ใช่ตัวเลขล่ะ? บางค่

[รีวิวเกม] Guardian Tales

รูปภาพ
 Guardian Tales เป็นเกมบนมือถือทั้ง Android และ iOS ตัวเกมเป็นแนว Hero collector + RPG ที่ผสมทั้ง action ทั้ง puzzle และ secret มากมายในแต่ละด่าน กราฟฟิกเป็นตัวการ์ตูนน่ารัก สไตล์ Chibi จุดเด่น / ข้อดีของเกม ภาพน่ารัก มีสไตล์เป็นของตัวเองชัดเจน มีด่านให้เล่นเยอะมาก เล่นเพลินติดงอมแงม รู้ตัวอีกทีคือค่า energy หมดไปแล้ว ด่านหลาย ๆ ด่านมีความท้าทาย ทั้งยากทั้งง่ายปนกันไป ไม่ได้มีแค่ด่านต่อสู้ ด่านที่ให้แก้แต่ puzzle ก็มี secret ในด่านเยอะ เก็บให้หมดถึงจะได้ 3 ดาวของด่าน และได้รับเพชรไปเปิดกาชา เนื้อเรื่องดีมาก น่าติดตาม แถมแฝงมุกมาให้ขำเรื่อย ๆ ระบบการต่อสู้เป็นสไตล์ ARPG  ตัวละครค่อนข้างเยอะ มีระบบคอมโบสกิลแบบลูกโซ่ (chaining skill) เช่น บางสกิลจะใช้ต่อได้เมื่อศัตรูติดลอย ถ้าใครเคยเล่น Gate Six น่าจะนึกภาพออก มีระบบให้ปลดล็อคเยอะ ต้องเล่นผ่านเนื้อเรื่องไปเรื่อย ๆ มีระบบ PVP มี Guild Raid Boss  กิจกรรมมีมาเรื่อย ๆ ไม่ขาด มีระบบ auto ให้เมื่อผ่านด่านไปแล้ว และ auto repeat ลงซ้ำด่านสำหรับด่านหาวัตถุดิบได้เมื่อผ่าน 3 ดาว จุดด้อย / ข้อเสียของเกม ถึงแม้จะมี auto แต่ด้วยความที่ด่านยาวมาก และมี

[Arknights] แนะนำตัวละคร 4 ดาว

รูปภาพ
 หลังจากจบไกด์ก่อนหน้านี้ไป  [Arknights] แนะนำตัวละคร 1-3 ดาว สำหรับมือใหม่ มาอีกไกด์สำหรับตัวละคร 4 ดาวกับเกม Arknights ในบรรดา 4 ดาวส่วนมากจะไม่จำเป็นต้องปั้นขึ้น E2 จะมีเฉพาะบางตัวเท่านั้นที่แนะนำให้ขึ้น E2 มาเริ่มกันเลย Myrtle Vanguard ที่ต้องขึ้น E2 และสกิล 1 ต้องอัพถึงขั้น M3 เป็นตัวละคร 4 ดาวเพียงตัวเดียวที่มีศักยภาพดีมากจนนำไปใช้ในท้ายเกมได้ เป็น 1 ในตัวละครที่สามารถปั่น DP ได้ไวที่สุด (ณ ปัจจุบันที่เขียนบทความยังไม่มีตัวธง 5 ดาวเข้าเกม) แต่ปัญหาคือต้องเปิดจากตู้เท่านั้น ทำให้ยากต่อการหามาใช้งานสำหรับสายฟรี แต่ถ้าได้มาก็ควรจะปั้นเมื่อมีโอกาส  ข้อเสียของเธอคือ block ได้ 1 ตัว และระหว่างใช้สกิลจะไม่สามารถ block ศัตรูได้ จำเป็นต้องใช้ในด่านที่ไม่ต้องรีบวางตัวละครมา block เพิ่มเติม: Elysium ตัวธง 5 ดาวเข้าเกมแล้วแต่ก็ยังมาแทนน้องธงไม่ได้อยู่ดี เพราะความปั้นยากของเขา Courier สำหรับตัวนี้ E1 ก็พอใช้งานได้แล้ว  หามาใช้ได้ง่าย และใช้ได้ยาว ๆ เป็น Vanguard สาย Defense ที่พลังป้องกันสูง ยังสามารถ block ศัตรูได้ 2 ตัว เหมาะกับใช้ในช่วงแรกของด่านที่ต้องมีตัวมา block ทางไม่ให้ศัตรูผ่านไปไ