Category: JavaScript

เริ่มต้นเบื้องกับ Node.js

No Comments

May 19, 2013 at 4:03 pmCategory:JavaScript

เริ่มต้นเบื้องกับ Node.js

Node.js ชื่อนี้ในช่วงหลังๆมักจะได้ยินกันบ่อยๆ node.js นั้นเป็นสิ่งใหม่ที่ถ้า google นั้นคิดค้นซึ่งมันจะทำงานได้นี้ใน chrome นั้นเองซึ่งประโยชน์ของ node.js นั้นส่วนมากเว็บหรือระบบใหญ่จะนำมาประยุกต์ใช้กับ application พวก real time ที่จะมีการตอบสนองทันที ที่มีเหตุการณ์เกิดขึ้น หรือที่เรียกว่า event-driven ซึ่งเจ้า node.js นั้นจะรันโดยอาศัย V8 JavaScript Engine เป็นตัวหลักและการพัฒนา node.js นั้นจะใช้ javascript แบบ server-side มันคงแปลกดีที่ภาษาที่เคยเป็น client – side มานาน อยู่ๆสามารถมาเป็น server – side เอาละที่นี้เรามาลองกันเลย

สำหรับผมแล้ว node.js ที่ผมลองนั้นจะเป็น version window เพราะผมไม่ได้ใช้ os ตระกูลอื่นซะเท่าไรซึ่งมันก็ support หลาย os นั้นแหละ เริ่มแรกก็ไป download ตัว install สำหรับ window ได้ที่ node.js เมื่อโหลดเสร็จก็ทำการติดตั้งได้เลย

node.js Read More…

Tags: , , , ,

เริ่มกับ Google Map อย่างง่ายด้วยการสร้าง marker

No Comments

December 20, 2012 at 2:04 pmCategory:Ajax | HTML | JavaScript

สมัยนี้การเดินทางหรือข้อมูลบน internet เกี่ยวกับสถานทีหรือแผนการเดินทางส่วนใหญ่แล้วจะใช้โปรแกรมยอดนิยมอย่าง Google Map นั้นเองวันนี้จะมาแสดงตัวอย่างการสร้าง marker บน google map ซึ่งเป็นระดับพื้นฐานที่ไม่ได้มีการใช้ google map api อะไรเลย โดยเราจะดึงค่าพิกัดลัดติจูดกับลองติจูดจาก php โดยผ่าน javascript ในลักษณะการดึงและรับส่งข้อมูลแบบ ajax นั้นเอง โดยตัวอย่างนี้จะประกอบด้วยไฟล์ 2 ไฟล์คือไฟล์ html ที่ภายในประกอบด้วย html และ javascript ส่วนอีกไฟล์จะเป็นไฟล์ php ที่จะคืนค่าพิกัดมาให้อยู่ในรูปแบบของ xml จากนั้นเมื่อดึงค่าผ่าน ajax แล้วจะทำการส่งค่าพิกัดไปให้ google map เพื่อแสดงบนแผนที่นั้นเอง

ขั้นแรกเรามาสร้างไฟล์ html ที่ใช้ ajax ในการดึงข้อมูลพิกัดและแสดงแผนที่อีกด้วย โดยให้สร้างไฟล์ที่ชื่อว่า map.html โดยมีโค้ดดังนี้ Read More…

Tags: , , , ,

แนะนำ QUnit Testing Framework สำหรับ Test JavaScript

No Comments

August 6, 2012 at 2:38 pmCategory:JavaScript

ณ ตอนนี้เทคโนโลยี web เดินมาไกลมาซึ่งตอนนี้ html สามารถทำได้หลายอย่างแต่สิ่งที่พัฒนามาพร้อมกันคือ javascript ซึ่งหากการพัฒนา javascript ที่มีการทำงานซับซ้อนมากนั้นสิ่งที่จำเป็นก็คือการทดสอบความถูกต้อง และในแต่ละภาษานั้นก็จะมีวิธีและ tool ในการทดสอบที่ต่างกัน และวันนี้ผมขอแนะนำเครื่องมือในการทดสอบ javascript ที่มีชื่อว่า QUnit ซึ่งผมว่าค่อยข้าง config เริ่มการใช้งานอย่างเลยที่เดียวขั้นแรกก็คือให้เริ่มทำการดาวโหลดไฟล์จากเว็บ

qunit

http://qunitjs.com/ ซึ่งจะแบ่งออกเป็น 2 ไฟล์คือ  qunit-1.9.0.js และ qunit-1.9.0.css ซึ่ง 1.9.0 นี้เป็นเลข version ซึ่งในอนาคตมันจะเปลี่ยนแน่นอนนะครับ Read More…

Tags: , , , ,

เล่นไฟล์เสียงด้วย HTML5 และ Jquery ตอนที่ 2

No Comments

June 24, 2012 at 7:15 amCategory:HTML | JavaScript

ต่อจากบทความก่อนหน้านี้ เล่นไฟล์เสียงด้วย HTML5 และ Jquery ตอนที่ 1 คราวนี้เราจะมาใช้ความสามารถของ Jquery เพื่อเล่นเสียงและควบคุมการเปิดปิดเสียง เริ่มต้นเราก็ก็อปปี้ไฟล์ index.html มาเป็นไฟล์ใหม่โดยผมจะตั้งชื่อว่า indexjquery.html เพื่อที่เราจะได้เห็นความแตกต่างระหว่างการใช้ tag html 5 กับ jquery ว่า แตกต่างกันอย่างไร เรามาดูโค้ดกันเลยครับตอนแรกเราก็ต้องทำการสร้าง link 2 ลิงค์ให้มี id เป็น play กับ pause เพื่อจะได้เขียน jquery เพื่อควบคุมการเล่นเสียง ต่อมาเราก็สร้างฟังก์ชั่นสำหรับเล่นไฟล์เสียงโดยใช้ javascript ดึงความสามารถในการเล่นเสียงของ browser ที่รองรับ html 5 นั้นเองหลังจากนั้นก็ให้โหลด event ของ link ทั้งสองเมื่อเริ่มโหลดหน้าเว็บ โค้ดในส่วนแรกของการสร้าง link คือ

jquery เล่นไฟล์เสียง Read More…

Tags: , , , , , ,

เล่นไฟล์เสียงด้วย HTML5 และ Jquery ตอนที่ 1

No Comments

June 7, 2012 at 1:18 pmCategory:HTML | JavaScript

หากพูดถึง HTML แล้ว ณ ตอนนี้คงเป็น เวอร์ชั่นที่ 5 แล้วหรือ HTML 5 นั้นเอง ซึ่งใน HTML 5 นี้สามารถเล่นไฟล์เสียงได้แล้วโดยไฟล์เสียงนี้แค่ใช้ tag 1 ใน HTML เท่านั้น เหมือนกับรูปภาพ เหมือน HTML 5 รองรับไฟล์เสียงแล้ว เราก็ใช้ความสามารถของ Jquery เพื่อควบคุมปุ่นในการสั่งให้เล่นแล้วก็หยุดเล่นไฟล์เสียง โดยใน HTML 5 นั้นจะรองรับไฟล์เสียง นามสกุล ogg กับ mp3 ซึ่งถ้าจะหาโปรแกรมแปลงไฟล์เสียงให้เป็น ogg ผมก็แนะนำโปรแกรม Audacity ซึ่งเป็นฟรีแวร์สามารถหา Download กันได้นะครับ Read More…

Tags: , , ,

เริ่มต้นหัดเขียน JQuery

No Comments

May 12, 2012 at 11:29 pmCategory:JavaScript

ถ้าพูดถึง Javascript ที่เป็น library แล้วคงไม่มีใครไม่รู้จัก JQuery เพราะเป็น Library ที่นิยมมาก JQuery เป็นตัวช่วยในการพัฒนา Website ที่ใช้ javascript เพราะตัว JQuery นั้นจะมีตัวช่วยทั้งในการเลือกและควบคุม element ต่างๆที่เป็น tag html ต่างๆ ทั้งที่เรากำหนดชื่อ หรือ คลาส อย่างง่ายได้รวมไปถึงการใช้งาน ajax และมี UI ต่างๆที่สวยงามให้เรียกใช้ได้มากมาย

ส่วนขั้นตอนการใช้งานก็ไม่มีอะไรมากแค่ไป download file จาก http://jquery.com/ มาแล้วทำการ include หรือเรียกใช้ใน file ที่เราต้องการเท่านั้นเอง ส่วนไฟล์ที่ทำการ download จะมีให้เลือก 2 แบบคือแบบ min จะเป็นไฟล์ที่ผ่านการบีบอัดให้เราใช้งานและมีขนาดไฟล์ขนาดเล็ก ส่วนที่เป็นชื่อไฟล์ไม่มีคำว่า min จะไม่มีการบีบอัดเหมาะสำหรับผู้ที่ต้องการนำโค้ด JQuery มาพัฒนาต่อให้เป็นแบบฉบับของตัวเอง Read More…

Tags: , , ,

Javascript: หมาไฟตามหาไอดีไม่เจอ

No Comments

November 1, 2010 at 12:41 pmCategory:JavaScript

บทความนี้เป็นบทความแรกที่เกี่ยว javascript ที่ผมเขียนซึ่งมันไม่ใช่เนื้อหาอะไรมากมายแต่จะเป็นข้อควรระวังสำหรับนักพัฒนาเว็บไซต์ที่หลงลืมเป็นบ้างครั้งในกรณีที่ใช้ browser firefox ซึ่งผมก็ขอเอาเรื่องเลยละกัน

javascript, firefox, ie, getElementById, จาวาสคลิปต์เบื้องต้น

Read More…

Tags: , , , ,