การใช้งาน classList ใน HTML5


หลังจากพักร้อนไปจากการเขียนบทความหลายเดือน วันนี้ได้ฤกษ์กลับมาเขียนอีกรอบวันนี้จะมาว่าในเรื่องของการใช้งาน classList ที่มากับ HTML5 อยู่ในหมวดของ Nuts and Bolts

ถ้าเรามีโจทย์ว่าต้องการทำการเพิ่มหรือลบ class ออกจาก element ใดๆ แน่นอนเราต้องนึกถึง methods addClass() หรือ removeClass() ใน jQuery แน่นอน ซึ่งถ้าเราใช้งาน jQuery อยู่ก็คงจะไม่มีปัญหาใดๆ แต่ถ้าในกรณีที่เราไม่ได้ใช้งาน jQuery เราอาจเลือกการใช้งาน classList แทนได้ ซึ่งการใช้งาน clasList ตัวนี้จะแตกต่างจากการใช้งาน jQuery เนื่องจากเป้น native JavaScript (ไม่ต้องใช้ library ใดๆ) แต่ก็แน่นอนการใช้งาน classList  จะไม่สามารถใช้งานได้ใน IE 6,7,8 แต่ถ้าในกรณีที่เราใช้งานบน mobile เราก็ไม่ต้องไปเรียกใช้ jQuery โดยเฉพาะพวกที่อยู่ค่าย Sencha Touch คงจะไม่ต้องไปเอา jquery เข้ามาเพื่อใช้งาน addClass() หรือ removeClass() อย่างเดียวแน่นอน

การใช้งาน classList จะประกอบไปด้วย method ต่างๆ ดังนี้

1
2
3
4
5
6
7
8
{
length: {number}, /* จำนวนของ class ที่ add เข้ามาใน element นั้น */
add: function() { [native code] }, /* เพิ่ม class ให้กับ element */
contains: function() { [native code] }, /* ตรวจสอบว่า element มีการ add class นั้นเข้ามาหรือไม่ */
item: function() { [native code] }, /* reference ถึง class โดย index */
remove: function() { [native code] }, /* remove class ออกจาก element */
toggle: function() { [native code] } /* ทำการ toggle class */
}

ซึ่งในตัวอย่างที่เขียนในรูปนี้จะเป็นการเขียนแบบยาวเพื่อให้เห็นการใช้งาน method ต่างๆของ classList ซึ่งเราสามารถเขียน สั้นๆเพียงบรรทัดเดียวได้ ดังนี้

1
2
3
4
5
document.querySelector('div').onclick = function(){

this.classList.toggle('active');

}

ใครที่เคยใช้ jQuery อยู่แล้วน่าจะหยิบไปใช้ได้เลยเพราะเหมือนกันมากๆ

ลองเข้าไปดู sourcecode ได้ที่ http://jsfiddle.net/irobust/hVbUp/

เปิดอบรมหลักสูตร Advance HTML5 วันที่ 17-18 ธันวาคม

หลักสูตรนี้จะเจาะลึกการใช้งาน HTML5 ในขั้นสูง ผู้เรียนจะต้องมีความเข้าใจในการเขียน JavaScript หรือ jQuery มาแล้วหรือผ่านการอบรมในหลักสูตร Essential Javascript มาก่อน เนื่องจากหลักสูตรนี้จะมีการใช้งาน JavaScript และ jQuery ค่อนข้างเยอะและเน้นทำความเข้าใจในหลึกการทำงานของ javaScript API เป็นหลัก

ราคาปกติ 5,100 บาท พิเศษวันนี้ ถ้านำ Notebook มาเอง เหลือเพียง 4,500 บาท

สามารถเข้าไปดูรายละเอียดหลักสูตรได้ ที่นี่

เปิดอบรมหลักสูตร HTML5 and CSS3 วันที่ 16-18 ธันวาคม

ในหลักสูตร HTML5 and CSS3 จะแบ่งออกเป็น 3 ส่วนหลักๆ ดังนี้

  1. เรียนรู้การใช้งาน TAG ใหม่ๆ ที่เพิ่มเติมเข้ามา
  2. การใช้งาน JavaScript API ที่จะช่วยเพิ่มประสิทธิภาพในการทำงานให้กับระบบของท่าน
  3. การใช้ความสามาถของ CSS3 ในการช่วยจัดการ layout ได้ง่ายขึ้นและมีความน่าสนใจมากขึ้น

ราคาปกติ 6,400 บาท พิเศษสำหรับผู้ที่นำ Notebook มาเอง เหลือ 5,500 บาท

สำรองที่นั่งได้ที่ ลงทะเบียน หรือ contact@irobust.co.th
สอบถามข้อมูลเพิ่มเติมได้ที่ 095-448-2314
สามารถเข้าไปดูรายละเอียดหลักสูตรได้ ที่นี่

ความแตกต่างระหว่าง canvas และ svg

compare canvas and svg
การวาดภาพ Graphic ใน HTML 5 มี 2 รูปแบบด้วยกันคือการวาดลงบน Canvas และการใช้ SVG ซึ่งทั้ง 2 แบบนั้นวาดภาพได้เหมือนกันแต่จะมีข้อแตกต่างกันคือ

ถ้าวาดลงบน Canvas ภาพจะเป็น Bitmap ซึ่งถ้า Zoom เข้าไปมากๆ ภาพจะแตกซึ่งเป็นลักษณะทั่วไปของ Bitmap และ การวาดใช้ JavaScript เมื่อต้องการแก้ไขภาพใหม่ต้อง excute JavaScript ส่วนนั้นใหม่ทั้งหมด

แต่ถ้าวาดด้วย SVG ภาพที่ได้จะเป็น Vector ไม่ว่าจะ Zoom เข้าไปเท่าไหร่ภาพก็จะไม่แตก และอีกข้อสำคัญก็คือ SVG เป็น XML ดังนั้นถ้าจะทำการแก้ไขภาพสามารถ

เขียน JavaScript เข้าไปแก้ไขข้อมูลใน DOM ได้โดยที่ไม่ต้อง execute ใหม่ เหมือนกับเราใช้ JavaScript เข้าไปแก้ไข DOM ใน HTML ธรรมดานั่นเอง

ลองเข้าไปทดสอบ Code ได้ด้วยตัวเองที่นี่
http://jsfiddle.net/DQXuv/
ไม่สามารถแสดงผลได้ใน IE 8 ลงมา

หรือเข้าไปดูผลลัพธ์แบบ Full Screen ที่นี่
http://jsfiddle.net/DQXuv/embedded/result/
ลอง Zoom โดยกด Ctrl ค้างไว้แล้วเลื่อนเมาส์ปุ่มตรงกลางขึ้น หรือหาเมนู Zoom ในแต่ละ Browser

การใช้ Modernmizr เลือก load ไฟล์ JavaScript

Modernizr เป็น JavaScript สำหรับตรวจสอบว่า Browser ที่เปิดนั้นรองรับ Feature ต่างๆ ของ HTML5 หรือไม่ แต่ไม่เพียงแต่เราจะเอา Modernizr มาทำการตรวจสอบว่า Browser นั้น Support Feature ที่เราต้องการใช้แล้วเรายังสามารถเลือกที่จะ Load JavaScript เข้ามาได้อีกด้วย
อย่างเช่นในรูปเราจะใช้ Modernizr.load() มาทำการเลือก JavaScript ที่จะ load เข้ามา โดยถ้า Browser Support ก็จะ load geo.js เข้ามา
แต่ถ้าไม่ก็จะ load geo-polyfill.js เข้ามาแทน

ใช้ modernizr ในการเลือก load JavaSCript

โดยความสามารถนี้เป็นของ JavaScript library ที่ชื่อว่า Yepnope.js
เข้าไปดูได้ที่ http://yepnopejs.com/
ซึ่งตอนที่ load Modernizr จะต้องแน่ใจว่าได้ Click เลือก Modernizr.load (yepnope.js) เข้ามาด้วย Modernizr จะทำการรวม library yepnope.js เข้ามาด้วย

นอกจากนี้ยังสามารถนำไปประยุกต์ใช้ในการ load JavaScript แบบ Asyncronous ได้อีกด้วย ลองไปทดสอบกันดูได้

การสร้าง animation บน canvas อย่างง่ายๆ

เราสามารถเขียน JavaScript เพื่อสร้าง Animation บน canvas อย่างง่ายๆ ได้ตามตัวอย่าง โดยเราจะใช้ function setInterval() ใน JavaScript เพื่อเรียก function draw()

ส่วนใน function draw() จะเป็น function ที่วาดรูปขึ้นมาใหม่ ในกรณีนี้จะใช้การวาดทับเส้นเดิม แต่เราสามารถที่ใช้ function clearRect() ทำการลบรูปทั้งหมดแล้ววาดใหม่ก็ได้

นี่เป็นหลักการของการวาดรูปใน Canvas ถ้าเราต้องการเปลี่ยนแปลงรูปเราต้องลบทิ้งแล้ววาดใหม่

canvas animation

การใช้ document.querySelector

ใน JavaScript API ที่เพิ่มขึ้นมาใน HTML5 จะมีคำสั่งในการใช้งาน selector ที่เราเคยใช้ใน jQuery มาใช้งานได้โดยที่เราไม่ต้องเอา jQuery มาใช้งาน

โดยในตัวอย่างเราจะใช้ selector => li:nth-child(3)
หมายถึง สมาชิกของ li ตัวที่ 3 ในหน้านี้มันเจอ li

 กี่ตัวก็ตามมันจะนับเอาตัวที่ 3 แล้วคืนกลับมา

เราสามารถเขียนเป็น JavaScript ได้โดยใช้คำสั่ง
document.querySelector(‘selector….ที่ต้องการ’)
ในกรณีที่ต้องการผลลัพธ์เป็น element ตัวเดียว(จะได้ผลลัพธ์ตัแรกเพียงตัวเดียว ในกรณีที่ Selector ออกมาแล้วมีมากกว่า 1 ตัว) แต่ถ้าเราต้องการผลลัพธ์ทุกตัวที่เข้าเงื่อนไข ต้องใช้
document.querySelectorAll(‘selector…’);

สามารถเข้าไปลองทดสอบและแก้ไขได้ที่
http://jsfiddle.net/irobust/5AfS8/

และเข้าไปดูผลลัพธ์แบบ Full Screen ได้ที่
http://jsfiddle.net/irobust/5AfS8/embedded/result/

Raphael JavaScript Framework สำหรับวาด graphic

ถ้าพูดถึงการวาดรูปภาพด้วย SVG ต้องทำการเขียน Tag XML ที่ยุ่งยากเต็มไปหมดต้องกำหนด Position ต่างๆกัน วุ่นวาย แต่วันนี้เรามีทางเลือกใหม่นั่นคือการใช้ Raphael ซึ่งเป็น JavaScript สำหรับการวาดภาพ Graphic ที่เป็น SVG ผลลัพธ์ที่ได้จะเป็น SVG ซึ่ง

เป็น Vector ตอนขยายภาพจะไม่แตก จะไม่เหมือนกับการใช้ JavaScript วาดลงบน Canvasณ ปัจจุบันเป็น Version 2.1 แล้วการใช้งานง่ายมาก และน่าสนใจสำหรับนำไปประยุกต์ใช้งาน ในตัวอย่างนี้จะเป็นการใช้งานเบื้องต้นโดยจะทำการสร้าง canvas ขึ้นมาก่อน อันนี้ผมใช้ตัวแปรชื่อว่า Canvas เฉยๆ ให้มันเหมือนกับวาดลงบน Canvas แต่ผลลัพธ์ที่ได้จะเป็น SVG

โดย Raphael(0 , 0, 300, 300) จะได้เป็นพื้นที่ขนาด 300 x 300( parameter ตัวที่ 3 กับ 4) เริ่มต้นที่ตำแหน่ง (0, 0) หลังจากที่ได้พื้นที่สำหรับใช้วาดรูปแล้ว ที่เหลือก็แค่วาดรูปลงกลมลงไปโดยใช้คำสั่ง circle(50, 50, 20) หมายถึง จุดศุูนย์กลางของวงกลมเริ่มต้นที่ตำแหน่ง 50, 50 นับจากมุมซ้ายบนของ Canvas แล้วก็กำหนดให้มีรัศมีเป็น 20 สุดท้ายลงสีแดง เท่านี้เอง

ลองเข้าไปแก้ไข Code ได้ที่
http://jsfiddle.net/irobust/h8Epg/

หรือดูผลลัพธ์แบบ Full Screen ได้ที่
http://jsfiddle.net/irobust/h8Epg/embedded/result/