Java Script ตอนที่ #2/4 DOM

จากตอนที่ #1 เราปูพื้นฐาน Java Script ไปแล้วในเรื่อง Syntax พื้นฐาน การสร้างฟังก์ชัน และการเรียกใช้งานฟังก์ชัน มาของตอนนี้ เราจะมาเก็บส่วนที่เหลือกัน ของตอนนี้โค้ดจะเยอะหน่อยนะครับ แต่ถ้ารักที่จะเขียนโปรแกรมแล้วละก็ เรื่องนี้เรื่องเล็ก พร้อมรึยัง ตามมาเลยครับ

DOM Property

เราสามารถเข้าถึง Element ต่างๆในเอกสาร HTML ได้ผ่าน DOM Object (Document Object Model: โดยปกติเมื่อเบราเซอร์โหลดเอกสาร HTML เรียบร้อยแล้วจะทำการสร้าง Tree ของ Element ขึ้นมา) นอกจากนั้นเรายังสามารถเข้าถึง property (ตัวแปรสำหรับเก็บค่าต่างๆ) และเรียกใช้ method (ฟังก์ชันของ object) ดังต่อไปนี้

document.documentElement – HTML Tag
node.nodeName     - สำหรับ Element and Attribute node
node.nodeValue    - สำหรับ Text and Attribute node
node.nodeType     - 1 สำหรับ Element Node
                  - 2 สำหรับ Attribute Node
                  - 3 สำหรับ Text Node
node.parentNode       - ตัวที่เป็นแม่ของ Node นี้ 
node.childNodes       - ลูกทั้งหมดของ Node นี้ 
node.firstChild       - ลูกตัวแรกของ Node นี้ 
node.lastChild        - ลูกตัวสุดท้ายของ Node นี้ 
node.previousSibling  - Node ตัวก่อนหน้าที่อยู่ในระดับเดียวกัน 
node.nextSibling      - Node ตัวถัดไปที่อยู่ในระดับเดียวกัน 
node.attributes       - Attribute ทุกตัวของ Node นี้

node.innerHTML        - ข้อความที่อยู่ภายใต้ <x> ...</x> ของ Node นั้น โดยจะตีความแท็ก HTML ให้ด้วย
node.innerText        - ข้อความที่อยู่ภายใต้ <x> ...</x> ของ Node นั้น โดยไม่มีการตีความ
node.id               - id ของ Node นั้น
node.name             - ชื่อ ของ Node นั้น
node.value            - ค่าของ input ตัวนั้น
node.nodeName         - ชื่อ Node (ชื่อ Tag)
node.style            - Style Sheet ของ Node นั้น (เอาไว้เซ็ต CSS)
node.className        - className ของ Node นั้น

ตัวอย่างการใช้งาน


 //Java Script
 <script>
    var ct = document.getElementById("content");
       ct.innerHTML="<h1>Hello Test</h1>";
       // ct.innerText="<h1>Hello Test</h1>";
 </script>
<!-- HTML -->
 <div id="content"></div>

DOM Method

นอกจาก property ที่สามารถเรียกใช้ได้ ยังมีส่วนของ method ที่ช่วยในการเข้าถึง สร้าง และเพิ่ม หรือแทรก Element ในขณะที่รันอยู่ได้ ซึ่งการประยุกต์ใช้เช่น การสร้างฟอร์ในการกรอกข้อมูล แล้วกดเพิ่มโดยให้โปรแกรมสร้าง Element ที่จำเป็นขึ้นมาและเพิ่มหรือแทรกเข้าไปในตอนท้ายของเอกสาร หรือตาราง ทำให้โปรแกรมน่าใช้ขึ้น

//การดึง Element ที่ต้องการ
document/node.getElementById(id)   
document/node.getElementsByTagName(tagName)

//การสร้าง Element ที่ต้องการ
document.createElement(nodeName)
document.createTextNode(nodeValue)

//การเพิ่ม หรือแทรก Element ที่ต้องการ
node.appendChild(newChild)
node.removeChild(oldChild)
node.insertBefore(newChild, oldChild)
node.replaceChild(newChild, oldChild)

ตัวอย่างการใช้งาน

<!-- index.html -->
<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="dynatable.js" type="text/javascript"></script>
 </head>
 <body>
 <div>
    Column1: <input type="text" id="c1"/><br/>
    Column2: <input type="text" id="c2"/><br/>
    <input id="btnAdd" type="button" value="Add Column"/>
 </div>
 
 <table border="1" style="width:400px;">
  <thead>
    <tr>
     <th>Col 1</th>
    <th>Col 2</th>
   </tr>
  </thead>
  <tbody id="tbd">
    <!-- สำหรับเพิ่ม row ใหม่ -->
  </tbody>
 </table>
 </body>
</html>
//dynatable.js
// ฟังก์ชันเพื่อทำให้ง่ายในการ getElementById
function ge(id){
 return document.getElementById(id);
}

function backToText(){
 ตอนนี้ this คือ input box
 this.parentNode.onclick=edit;
 this.parentNode.innerHTML= this.value;
}

// เมื่อคลิกที่เซล์ของตาราง จะแสดง input box ให้กรอกข้อมูล
function edit(){
 var data = this.innerText;
 var inp = document.createElement("input");
 inp.value=data;
 inp.onblur=backToText;
 // ตอนนี้ this คือ td ตัวที่ถูกคลิก
 this.replaceChild(inp,this.firstChild);
 this.onclick="";
 inp.focus();
}

function addData(){
 // รับค่า value จาก input box
 var c1 = ge("c1").value;
 var c2 = ge("c2").value;
 // สร้าง Element tr, td ทั้ง 2 คอลัมน์
 var tr = document.createElement("tr");
 var col1 = document.createElement("td");
 var col2 = document.createElement("td");
 col1.innerHTML = c1;
 // ติดตั้งฟังก์ชัน edit ให้กับแต่ละคอลัมน์
 col1.onclick=edit;
 col2.innerHTML = c2;
 col2.onclick=edit;
 tr.appendChild(col1);
 tr.appendChild(col2);
 ge("tbd").appendChild(tr);
}

function init(){
 // เมื่อคลิกปุ่ม btnAdd ให้ไปเรียกใช้ฟังก์ชัน addData()
 ge("btnAdd").onclick=addData;
}
// กำหนดฟังก์ชันที่จะเรียกเมื่อเอกสารโหลดเสร็จหมดแล้ว
window.onload=init;

window object

นอกจาการเข้าถึง DOM แล้ว Java Script ยังมีตัวแปรพิเศษให้เราใช้งานเพื่อความสะดวก ที่ใช้บ่อยๆคือ window

history.go(n)    n คือตัวเลข เช่น -2, -1, 0, 1 ใช้เดินหน้า ย้อนหลังในประวัติการใช้งาน
location.href    ใช้เปลี่ยนหน้า HTML ที่จะแสดงผลโดยส่ง URL ที่ต้องการ
status           ใช้เขียน/อ่าน status bar
alert(msg)       ใช้แสดง PopUp Message Box
confirm(msg)     ใช้แสดง Confirm Box โดยจะมีตัวเลือก [Yes] [No] ให้ผู้ใช้เลือก
prompt(msg)      ใช้แสดง Promp Box โดยจะมี input box ให้ผู้ใช้กรอกข้อมูล
print( )         ใช้เรียกหน้า Print Preview เพื่อพิมพ์เอกสาร
open()           เปิดหน้าต่างใหม่
close()          ปิดหน้าต่างปัจจุบัน
setInterval(someFunction, milliseconds)   กำหนดเวลาแบบวนรอบ
setTimeout(someFunction, milliseconds)    กำหนดเวลาแบบเรียกครั้งเดียว

ตัวอย่างการใช้งาน

// Java Script ใน index.html
var age = prompt("กรอกอายุของคุณ");
if(age > 18){
   location.href="page2.html";
}else{
   alert("คุณอายุไม่ถึงเกณฑ์");
   var result = prompt("ต้องการเรียกหน้านี้อีกครั้ง");
   if(result){
      history.go(0);
   }

}
// Java Script ใน page2.html
function updateTime(){
   var myclock = document.getElementById("clock");   
}

function goback(){
   history.go(-1);
}

function init(){
   setInterval(updateTime,1000);
   setTimeout(goback,10*1000);
}
window.onload=init;
<!-- HTML ใน page2.html-->
<h1 id="clock"></h1>

document object

ส่วนของ document ถึงเป็นตัวแปรที่ถูกใช้ค่อนข้างบ่อยดังนี้

getElementById(id)                ค้นหา Element ด้วย id  <div id="xxx">
 getElementByName(name)           ค้นหา Element ด้วย name  <div name="xxx">
 getElementByTagName(tagName)     ค้นหา Element ด้วย ชื่อ Tag
 write( ) , writeln( )            เขียนข้อมูลออก HTML

วิธีการ Debug Java Script

การดีบัก Java Script เราสามารถใช้ Developer Mode (โหมดสำหรับนักพัฒนา) โดยการกดปุ่ม F12  ได้ในทุกบราวเซอร์ (ถ้า FireFox ต้องลง Plug-in ของ Firebug เพิ่ม) โดยสามารถเขียนข้อมูลออกไปยัง console ได้ด้วยคำสั่งเหล่านี้

console.log(text)      
console.debug(text)    
console.info(text)
console.warn(text)
console.error(text)
** ปกติเราจะใช้ log() ส่วนของตัวอื่นๆจะขึ้นอยู่กับการสื่อความหมาย **

บทสรุป

เป็นไงบ้างครับ การใช้ Java Script กับ HTML DOM Object เราสามารถใช้สร้างสรรค์การทำงานของเว็บเราให้น่าใช้มากขึ้น จริงอยู่ที่เดี๋ยวนี้เรามี JavaScript Framework มาใช้เลือกใช้เยอะมาก ทำให้การเขียนโค้ดง่ายขึ้น และสั้นลง แต่อย่าลืมว่าพื้นฐานก็เป็นสิ่งสำคัญ ดังนั้นถ้าหากมีเวลาก็ควรจะฝึกฝนพื้นฐานเหล่านี้ให้แน่น เมื่อเจองานที่ต้องการประสิทธิภาพสูง คุณอาจจะต้องกลับมาเขียน Pure JavaScript ให้นึกถึงคำผมไว้ครับ คราวหน้าเราจะมาพูดถึงการใช้ Java Script กับ AJAX โปรดติดตามตอนต่อไปครับ

AjBee.Me  : ถ้าชอบก็กด Like ถ้าใช่ก็กด Share นะครับ