data attribute

สวัสดีครับวันนี้ผมมี Tag Html ใหม่ๆ ที่มีประโยชน์มาแนะนำให้เพื่อนๆ ได้รู้จักกันครับโดยตัว Tag ตัวนี้มีชื่อว่า data ซึ่งถูกเพิ่มเข้ามาใน HTML5 ถ้าวิว code ดูใน WebSite สมัยใหม่ๆ ก็น่าจะพอผ่านตามากันบ้างแต่มันมีประโยชน์อย่างไรใช้แบบไหน ผมจะเล่าให้ฟังนะครับ มีหลายๆ ครั้งเวลาที่เราเขียน Web page แล้วเรามีค่าบางอย่างที่ต้องการจะเขียนใส่ Tag Html ลงไปแต่เราไม่รู้จะใส่ลงใน Tag อะไรเพราะ Attribute เท่าที่เคยใช้มาก็มีเพียง id title class style และอื่นๆ อยู่ไม่กี่ตัว ยกตัวอย่างเช่นเรามีค่า ItemID=99  แล้วเราอยากใส่ค่ามันไว้ใน tag html เพื่อใช้ประโยชน์เป็น Key หรือไว้ Save  หรืออะไรก็ตามโดยที่ไม่ได้เอามาแสดงให้ User เห็นถ้าเป็นสมัยก่อนเราอาจทำแบบ Code ด้านล่าง (ดูแล้วก็ไม่น่าจะผิดอะไร)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>JavaScriptthai  Data Attribute</title>
   </head>
   <body> 
      <span itemID=99> Item A </span>
   </body>
</html>

ส่วนเรียกใช้งาน

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JavaScriptthai Data Attribute</title>

	<script src='jquery-1.9.0.min.js' ></script>

<script>
$(document).ready(function(){
    
		var items = $("#items" ).attr( "itemID");	
		alert(items);
});
</script>
</head>
<body> 
<span id='items' itemID=99> Item A 33</span>
</body>
</html>

จาก Code ด้านบนมันก็สามารถทำงานได้ปกติไม่ได้ผิดอะไร แต่การใส่ tag itemID เข้าไปมั่วๆ ซึ่งมันไม่ใช่ tag มาตรฐานของภาษา html มันมีผลต่อ Performance ของ browser ที่จะต้องมานั่งแปลว่า tag นี้มันคืออะไรจะ render แบบไหนหรือถ้าหากบาง browser บาง browser  ที่เป็นรุ่นเก่าๆ อาจจะมองว่าเป็น Error และไม่ยอม Render Control ตัวนี้ออกมาเลยทีเดียวและในวันนี้เขาก็แก้ปัญหานี้โดยออก Tag data 

โดย Tag data attributes ถูกเพิ่มเข้ามาใน Html5  ซึ่งเป็น Tag ที่กำหนดมาตรฐานสำหรับเก็บข้อมูลพิเศษส่วนที่เราต้องการจากกรณีที่ยกตัวอย่างที่ได้อธิบายไว้ก่อนหน้า วิธีการใช้งานก็ง่ายมากครับ คือเราใส่คำว่า data-* แล้วตามด้วยชื่อตัวแปลที่เราต้องการ ซึ่ง Tag data attributes สามารถทำงานได้ดีกับ Javascript และ CSS ลองดูตัวอย่างด้านล่าง

รูปแบบการใช้

data-itemID=99
data-itemID-Cat=1
data-itemID-Cat-Type=21
data-*.........

ตัวอย่างการเรียกใช้งาน data attributes JavaScript Pure

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>JavaScriptthai Data Attribute</title>

<script>
 
function GetData()
{

var item = document.getElementById('items');

//Get the values
var val1 = item.getAttribute('data-itemID');
alert(val1);

var val2 = item.getAttribute('data-itemID-Cat');
alert(val2);

//Change the values
item.setAttribute('data-itemID','Test1');
item.setAttribute('data-itemID-Cat','Test2');   //เขียนค่ากลับลงไปใน attribute

}
</script>

</head>
<body onload='GetData();'> 
<span id='items' data-itemID='99' data-itemID-Cat='A'   > Item A 33</span>
</body>
</html>

ตัวอย่างด้านบน เป็นการใช้  javascript เพียงอย่างเดียวแต่ เลยจำที่จะต้องมีการเพิ่ม function onload เข้าไปเพราะถ้าเราไม่เพิ่ม javascript มันมีการทำงานแบบ interpreter คือจะ run คำสั่งทันทีละบรรทัดยกตัวอย่างเช่นบรรทัด  จาก Code ด้านบนเราเรียกใช้  document.getElementById(‘items’); มันเจอคำสั่งนี้ก่อนมันจะทำการหา control ทันทีแต่คำสั่ง html ที่ render ยังไม่ถูกทำงานเลยไม่สามารถหา control  span  จะได้ค่า undefined  แทนทีนี้เราก็เลยเพิ่ม event onload  เพื่อรอให้ Render control เสร็จก่อนแล้วจึงค่อยเรียก function วิธีมันก็มีผลเท่ากันกับ Jquery  $(document).ready(function(){ นั่นเอง <<

$(document).ready(function(){
.....
});

ตัวอย่างเรียกใช้งาน  data attributes โดย Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JavaScriptthai Data Attribute</title>

	<script src='jquery-1.9.0.min.js' ></script>

<script>
$(document).ready(function(){
    
		 
		var items = $('#items').data('itemid');    //***ต้องเป็นตัวเล็ก ก็ไม่รู้ทำไม 
		alert(items);
		
	    var items1 = $('#items').attr('data-itemID');   
		alert(items1);
	  
	    var items2 = $('#items').data('itemid-cat');   //ต้องเป็นตัวเล็กเท่านั้น
		alert(items2);
	  
	    var items3 = $('#items').attr('data-itemID-Cat');   
		alert(items3);

});
</script>
</head>
<body> 
<span id='items' data-itemID='99' data-itemID-Cat='A'   > Item A 33</span>
</body>
</html>

หมายเหตุ หากต้องการเขียนค่ากลับ $(‘#your-button-id’).attr(‘data-itemID’, 108);

ตัวอย่างเรียกใช้งาน  data attributes โดย Css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>JavaScriptthai Data Attribute</title>

<style>
[data-warning] {
    background: red;
}
</style>
</head>
<body onload='GetData();'> 
<span id='items' data-warning> Item A 33</span>
</body>
</html>

บทความนี้เพียงแค่อยากจะให้เห็นว่า data attributes เป็นทางเลือกที่ดีทางหนึ่งในการบันทึกค่าครับ

 

 

หวังว่าคงมีประโยชน์ย้างนะครับ ^_^

Leave a Reply