Home / Developer  / Programming Language  / JavaScript

บทความ Life Hack! เบาๆ แต่แสบสันวันนี้คือการแนะนำ APIs ของ JavaScript เก๋ๆ มาควบคุมการทำงานของอุปกรณ์โทรศัพท์มือถือผ่าน Mobile Web Browser 

ตัวอย่างการสร้างเกม Rock Paper Scissors หรือ เป่ายิ๊งฉุบ ด้วย LEAP Motion กับ Javascript กับงานที่ไป Contribute Repo ร่วมกับนักพัฒนาคนอื่น

บทเรียน Javascript กับของเล่นใหม่ Leap Motion สำหรับ Detect มือและนิ้วของเราผ่านอุปกรณ์แสกนแล้วทำการ Rigged กระดูกมือเราให้ใช้งานร่วมกับ โปรแกรมได้

บทเรียนการเขียนโปรแกรม Javascript ร่วมกับ Facebook SDK เวอร์ชัน 2  สาธิตด้วยการเจาะความเป็นส่วนตัวเพื่อตอบคำถามว่า สรุปแล้ว Facebook มันเป็นส่วนตัวจริงหรือ? 

คนที่เริ่มต้นเขียนเกม 3 มิติตอนนี้จะต้องเรียนรู้หลักการเคลื่อนที่ของวัตถุเกร็ง หรือ Rigidbody ทำงานร่วมกับ Physics และ Gravity บน Unity 3D

บทเรียนสำหรับการอธิบายเรื่องของวิธี Import 3D Models และ Model อื่นๆ ลงไปในเกม เรียกว่าการสร้าง Game Object ขึ้นมาสำหรับออกแบบ Scene ที่ของเกมบน Unity 3D

บทเรียนการพัฒนาเกม 3มิติ หรือ 3D Game สำหรับคนที่สนใจเกี่ยวกับการพัฒนาเกม ที่รองรับทั้งบน PC, Mobile และ Web Based ก็คงต้องยกให้ Unity เป็นตัวเลือกแรก

บทเรียนเริ่มต้นสำหรับการพัฒนาเกมด้วย JS Framework ร่วมกับ Cocos Code IDE สำหรับทดสอบเกมที่ใช้งานได้จริง และ Feature แต่ละตัวของ Cocos Code IDE ครับ

เว็บไซต์ Daydev.com นั้นได้เคยนำเสนอบทความด้านการพัฒนาเกมบน iOS ด้วย Cocos2D, Cocos2D-x มาบ้างแล้วรอบนี้มีเครื่องมือ Cocos Code IDE มาแนะนำให้ลองเล่นกัน

หลายวันก่อน ผมได้ทำการลองใช้ IE 11 และพบว่ามันเริ่ม พัฒนาแล้วครับ เริ่มมีการสนับสนุน เหล่านักพัฒนามากขึ้น โดยเฉพาะ Developer Tools เครื่องมือที่ช่วยตรวจสอบ การทำงานของเว็บ เหมือน firebug ได้มีการพัฒนามากขึ้น โดยเริ่มมีการ เพิ่มฟังก์ชัน เข้ามาใหม่ เยอะเลยครับ เรียกได้ว่า ทำขึ้นมาใหม่เลย

โดยส่วนทีเราจะไปสำรวจนั้น มีอยู่ 8 ส่วนดังนี้ครับ

  1. Dom Explorer
  2. Console
  3. Debugger
  4. Network
  5. UI Responsivness
  6. Profiles
  7. Memory
  8. Emulation

ดังนั้นวันนี้ ผมจะพาเดินสำรวจ เจ้า Developer Tool ตัวนี้กัน โดยผมขอแบ่งเป็น 2 ภาคนะครับ เพราะฟีเจอร์ของมัน มันเยอะมว้ากๆ

วิธีการใช้งาน Developer Tool ใน IE11

เหมือนกับ Web Browser ตัวอื่น ๆ ครับ กด F12 หรือคลิกขวาเลือก Inspect Element เพื่อเปิด Developer Tool ขึ้นมา

dom explorer tab in ie 11 developer tools

เปิดมาก็จะเจอ DOM Explorer เป็น Tab แรก

DOM Explorer – แก้ไข HTML และ CSS ง่าย ๆ แบบ WYSIWYG

DOM Explorer จะมีหน้าที่ตรวจสอบรายละเอียดของ HTML และ CSS ซึ่งวิธีการใช้งานนั้น ไม่ยากครับ

inspect element with ie 11 developer tools

คลิกที่ไอคอนข้าง ๆ คำว่า DOM Explorer จากนั้นคลิกที่ส่วนใดก็ได้ในหน้าเว็บที่เราต้องการดูโค้ดครับ

edit html in ie 11 developer tools

พอเลือกเสร็จ เราก็สามารถแก้ไข ได้เลย ความเมพของมันคือ มี Auto-Complete ให้ด้วย ดังในรูปด้านบนครับ

edit css in ie 11 developer tools

ต่อไปเราก็ไปแก้ ไข CSS ตรงนี้จะบอกรายละเอียดว่า ตรงนี้มาจากไฟล์ไหน บรรทัดที่เท่าไหร่

computed tab in ie 11 developer tools

Tab Computed นี้จะแสดง CSS style ทั้งหมดที่จัดการ DOM Element ตัวนี้อยู่ รวมหมดทั้งที่สืบทอดมาจาก Parent Element ด้วย

layout tab in ie 11 developer tools

Tab Layout จะแสดง Diagram ของ Box model ใช้ปรับแต่ง css ตัวที่ทำหน้าที่จัดตำแหน่งทั้งบน ล่าง ซ้าย ขวา (Margin / Padding / Border นั่นเอง)

event tab in ie 11 developer tools

Tab Events จะแสดง รายชื่อของ DOM Element ที่ถูกมัดเข้ากับตัว Javascript

event tab in ie 11 developer tools

Tab Changes นี้จะใช้แสดงประวัติของการแก้ไข CSS

การใช้งาน console เพื่อจัดการ Javascript

แทบนี้จะใช้ ตรวจสอบการทำงานของ ไฟล์ HTML, CSS, Javascript และจะแสดงข้อความแจ้งเตือน ได้หลายระดับ ตั้งแต่ Info ยัน Error อย่างที่ได้ไฮไลต์ไว้ในภาพ

console section in ie 11 developer tools

ไฮไลต์ด้านล่างสุดคือ ปุ่มที่ใช้จัดการตัว ช่องกรอกข้อมูล ด้านล่าง

สิ่งที่เราสามารถทำได้ใน Tab นี้คือการ สั่งให้ Javascript ทำงานโดยตรงเลย แถมมี Auto-Complete ให้อีก ผมขอรวบรวมคำสั่งที่มีประโยชน์ มาให้เพื่อนๆ ลองก็อบไปเล่นดูนะครับ

คำสั่งด้านล่างนี้ จะอยู่ในตระกูล console นะครัพ กล่าวคือ ต้องใช้คำว่า console แล้วก้ตามด้วยจุด

  • clear – ใช้ลบข้อความใน console ออก
  • log – ใช้ตรวจสอบค่าของตัวแปร
  • trace – ใช้ในการตรวจสอบผังการทำงานของ javscript
  • dir – ใช้ในการแสดงค่าทั้งหมดของ object

การพิมพ์โค้ดลงใน Console ทีละหลายบรรทัด

ตรงช่องนี้ พอเรากรอกไปแล้ว อยากจะขึ้นบรรทัดใหม่ พอ enter ไปแล้ว มันก็จะทำงานไปเลย
แต่ถ้ากดปุ่มที่ผมไฮไลต์ไว้
single line in comnsole

ช่องจะขยายตัวขึ้นมาให้เรา ใส่สคริปได้เพิ่มขึ้น

multi line in comnsole

Debugger ตัวช่วย debug Javascript

Debugger จะช่วยเรา ตรวจสอบรายละเอียด การทำงานของ Javascript แบบละเอียด เราต้องการใช้เจ้าตัวนี้ต่อเมื่อ:

  • เกิด error โดยไม่ทราบสาเหตุ
  • ค่าที่ออกมาไม่เป็นไปตามที่ คาดหวัง
  • อยากจะรู้ว่าตัวแปร นี้ถูกใช้งานโดยฟังก์ชันไหมบ้าง
  • อยากแกะ Javascript เป็น
  • อยากเรียนรู้ Javascript แบบรวดเร็ว

ต่อไปเรามาดูวิธี การทำงานของ เจ้า Debugger เป็นส่วนๆ ไปครับ

ตรวจสอบการทำงาน ด้วย breakpoint

set dreak point in debugger

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

Check Box ด้านหน้าคือ ให้เราเลือกว่าจะเปิด ปิด break point นี้ไหม

สั่งให้ break point ทำงานโดยกดปุ่มดังภาพครับ

start break point in debugger

พอกดแล้ว ก็จะเป็นดังนี้ครับ

breakpoint on fire

ด้านซ้ายจะเป็นตำแหน่งที่ javascript ทำงานถึง ด้านขวา จะเป็นรายการ ค่าทั้งหมดของตัวแปร ในไฟล์นี้

ตอนนี้ เราสามารถตรวจสอบ ค่าของตัวแปรได้แบบง่ายๆ เพียงแค่เอาเมาไปวาง ไว้ที่ชื่อตัวแปร

show varible value

ต่อไปเราสามารถ สั่งให้ javascript ทำงานไปในแบบ ทีละขั้นทีละตอนได้ โดยใช้แทบเครื่องมือ ด้านบน

เข้าใจการทำงานของ Step ใน Debug

จะเห็นว่าเรามี step การ debug ที่หลากหลายมาก การที่จะไปแกะไฟล์ของคนอื่นได้นั้น เราต้องเข้าใจส่วนนี้ก่อนเลยครับ

  • step over เป็นการทำงานแบบวิ่งไปตามโค้ดแบบ บรรทัดต่อบรรทัด เมื่อมีการเรียกใช้ฟังก์ชันอื่น ตัว debuger จะไม่กระโดดเข้าไป
  • step into การทำงานเหมือน step out แต่แตกต่างที่ มันจะกระโดด ไปยังบรรทัดแรกของ ฟังก์ชันที่เจอ แล้วก็จะกลับมายัง บรรทัดที่เรียกต่อ
  • step out ง่ายๆ ครับ เจอคลาสไหนก็วิ่ง เข้าไปหมด
  • Stop on new worker ทำการหยุดเมื่อ worker ถูกสร้างขึ้น

การ Debug เฉพาะโค้ดของเรา

ถ้าเกิดเราต้องการใช้ step out แล้วต้องวิ่งเข้าไปใน jQuery หละครับ คงได้กดจนมือบวมแน่
เพื่อป้องกัน เราต้องกดปุ่มนี้ทิ้งไว้ครับ 

การจับตาดูการเปลี่ยนแปลงค่าในตัวแปร

monitor variabel value

ตอนนี้ เราสามารถจับตาดูการเปลี่ยนแปลงค่า ในตัวแปรได้แบบ ใกล้ชิดเลยครับ

การคลายโค้ดที่ถูกบีบอัด

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

obfuscate javascript

วิธีแก้ก็ง่าย ๆ ครับ ใน IE11 Developer Tool เพียงแต่เรากดปุ่มนี้ เท่านั้น

deobfuscate javascript

บันทึกประวัติ การโหลดหน้าเว็บ ด้วย Network Tab

network tab in ie 11 developer tools

เราจะทำอะไรใน Tab นี้ได้บ้าง?

ทำได้แค่ ดูรายละเอียดของการโหลด

หลังจากสำรวจทั้งหมดแล้ว ยังพบว่า ในส่วนนี้ยังสู้ chrome และ firefox ไม่ได้ครับ ยังยิง ajax ซ้ำก็ไม่ได้ และถ้ามีการใช้งานหลาย process ก็ยังตรวจจับไม่ได้

สรุป

แม้จะยังสู้ chrome และ firefox ไม่ได้ในเรื่องฟังก์ชัน แต่ด้าน UI ได้ใจผมไปเต็มๆ ครับ สำหรับตอนหน้า เราจะไปสำรวจแทบ UI responsiveness,Profile,Memory กับ Emulation กันต่อ สำหรับตอนนี้ เริ่มจะยาวแล้ว เดี๋ยวจะเบื่อกัน สวัสดีครับ ออ ถ้าชอบก็สามารถ ติดตามผลงานอื่นๆของผม ได้ที่ laraveltut.com ครับ

POST TAGS:

เข้าสู่ฤดูกาลแข่งขัน World Cup in Brazil 2014 แล้วนะครับ หลายคนอยากทำ API หน้าเว็บดึงตารางอัพเดต Score ก็ขอแนะนำ API OpenFootball และ FootballJS ครับ

jMapping เป็น jQuery Plugin ตัวหนึ่งที่ใช้งานร่วมกับ Google Maps เน้นการปรับแต่ง และติดตั้งที่ง่ายมากครับแค่ Javascript ไม่กี่บรรทัดก็แสดงผล Interactive ได้

ตัวอย่างการใช้งาน Google Maps JavaScript API v3 ในการวางรูปภาพ Complex Marker ด้วยภาพกราฟิกนามสกุล png ลงไปใน Google Maps ให้น่าสนใจกว่า Marker ตัวเดิม

วิธีการเขียนโปรแกรมร่วมกับ Google Maps JavaScript API v3 ที่เน้นในการ Render Maps หรือแผนที่ของเราให้สวยงามโดยการทำงานเน้นที่ Javascript และ Google Maps API

วิธีการหนึ่งสำหรับหลายท่านที่มีไฟล์ HTML และ Java script อย่าง Web Pages ที่เป็น HTML5 สำหรับไปเดโมงานสามารถ Host ผ่าน Google Drive ได้แบบใช้งานฟรีครับ

หลายคนสอบถามเรื่องของ HTML5 ด้วย Sencha Touch กับทางผมมาว่า สามารถเขียนแอพฯ ร่วมกับ Google Map APIs ได้หรือไม่ ลองมาดูกันครับ

ถ้ามีปัญหาเรื่องการพัฒนาแอพฯ ทั้ง Web Apps, iOS Apps, Android Apps เกี่ยวกับ Convert Currency อัตราแลกเปลี่ยนเงิน มาดูวิธีเกรียนๆ สั้นๆ ผ่าน API ง่ายๆ ครับ

คราวนี้จะพาไปดูวิธีการดึงข้อมูล Web Service เพื่อเอาข้อมูลของ Video บน YouTube ผ่าน YouTube API เวอร์ชัน 2.1 ด้วย Javascript แบบง่ายๆ

การทำ LikeGate อีกวิธีสำหรับคนที่ต้องการสร้างยอด Like บน Fan Page ผ่าน WordPress ก็คือการใช้ Plugin ชื่อ Facebook Tab Manager

บทเรียนเบื้องต้นในการสร้าง Web Application ประเภท Task Manager โดยใช้ Dropbox Datastore API มาพัฒนาร่วมกับ Javascript SDK ของ Dropbox อย่างง่ายสำหรับมือใหม่

บทเรียนสำหรับนักพัฒนา Hybrid HTML5 Framework อย่าง Sencha Touch รอบนี้คือการนำ Nested List มาดึงข้อมูลร่วมกับระบบหลังบ้านที่พัฒนาจากภาษา PHP อย่างง่าย

POST TAGS:

Open Source น่าสนใจสำหรับสร้างนวัตกรรม Web Technology ที่ผมอยากจะแนะนำวันนี้คือ JSNES ญาติห่างๆ ของ node.js ไว้ใช้เล่นเกมเก่าๆ บน Famicom บนเว็บไซต์

บางครั้งหากทำการอัพโหลดไฟล์แอพพลิเคชันที่พัฒนาด้วย Sencha Touch ขึ้นไปบนเว็บไซต์แล้วโหลดช้า เราต้องใช้ Sencha CMD ในการช่วย Publish ตัวไฟล์ทั้งหมดจะเร็วขึ้น

POST TAGS:

อีกวิธีการใช้การพัฒนาแอพพลิเคชันในรูปแบบ Hybrid Framework ให้ทำงานบนแพลตฟอร์ม iOS นั้นคือ Sencha Touch บน Phonegap ด้วย XCode 

วิธีการเปลี่ยน Theme ของ Sencha Touch ด้วยการ Compile ไฟล์ scss เป็น css ใหม่ด้วยการติดตั้งชุดพัฒนาของ SASS และ Compass ผ่าน Ruby ให้ได้มาตรฐาน CSS3

บทเรียนนี้จะเป็นการพัฒนา Mobile Web App ด้วย Framework Sencha Touch 2 ด้วยการทำงานร่วมกับ Webservice รูปแบบ JSON ครับ

หลังจากที่ออกเวอร์ชันหลายเวอร์ชันมากตอนนี้ก็มาถึงเวอร์ชัน 2.2.0 กับเจ้า Sencha Touch บทเรียนต่อไปนี้คือการสร้างแอพฯ ใหม่ของเราเป็น Sencha Cmd ครับ

สำหรับนักพัฒนาที่สนใจแพลตฟอร์มของ Facebook SDK หรือ Graph API อาจจะชอบ ชุด Source Code ตัวนี้อย่าง Sociogram เพราะถือว่าเป็นตัวอย่างที่น่าศึกษาตัวหนึ่ง

วิธีการเขียนเกมบน HTML5 ด้วย Cocos2d X และ JavaScript จากตอนแรกที่เรียกตัวละคร รอบนี้เป็นการโหลดกราฟิกตัวศัตรูให้เคลื่อนไหวด้วยฟังก์ชัน Interval เวลา

เริ่มต้นเขียนเกมบน HTML5 ด้วย Framework ที่ชื่อ Cocos2D X สำหรับ HTML5 ด้วยภาษาโปรแกรม JavaScript ให้เล่นได้ทุกอุปกรณ์ทั้งเว็บและสมาร์ทโฟน