DOM และพื้นฐาน jQuery
ทำความเข้าใจกับ DOM DOM ย่อมาจาก Document Object Model หัวของเว็บ <head></head> ลิงก์ <a></a> รายการลิสต์ <li></li> Model คือ รูปแบบการจัดการ โดยแสดงเป็นลำดับชั้นของการเชื่อมโยงแต่ละออบเจ็กต์ โดย มีมาตรฐานที่กำหนดไว้แน่นอน เพื่อให้สามารถอ้างอิง หรือใช้งานออบเจ็กต์ได้
โหนดใน DOM ในแต่ละแท็กจะถือเป็น 1 โหนด โดยแต่ละโหนด สามารถแบ่งได้เป็นประเภทย่อย คือ Node.ELEMENT คือ โหนดที่เป็นแท็ก เช่น <a> Node.ATTRIBUTE คือ โหนดที่แสดงชื่อแอตทริบิวต์ เช่น href=http://www.google.co.th Node.TEXT คือ โหนดที่เก็บข้อความที่แสดงบนแท็กนั้นๆ เช่น <a href=‘#’>โปรดคลิก</a> Node.COMMENT คือ โหนดที่เก็บข้อความที่เป็นคำอธิบาย
การอ้างอิงโหนด การอ้างอิงโหนดจะต้องมีการกำหนดแอตทริบิวต์ที่ชื่อว่า class หรือ id ให้กับ แต่ละแท็ก class จะใช้อ้างอิงกับหลาย ๆ แท็กพร้อมกัน id จะเป็นการเฉพาะเจาะจงแท็กใดแท็กหนึ่งโดยเฉพาะ
การอ้างอิงโหนดโดยใช้ id document.getElementById(“ชื่อ id”); <!DOCTYPE HTML> <html> <head> <title>HTML5</title> <meta charset=“utf-8/> </head> <body> <input type="text" id="myName" value="Pathom"/> </body <script> alert(document.getElementById("myName").value); </script> </html>
การอ้างอิงโหนดโดยใช้ชื่อแท็ก การอ้างอิงโดยชื่อแท็ก document.getElementByTagName(“ชื่อแท็ก”); ผลลัพธ์ที่ได้จะอยู่ในรูปของอาร์เรย์ <!DOCTYPE HTML> <html> <head> <title>HTML5</title> <meta charset=“utf-8/> </head> <body> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> </body> <script> var myTitle = document.getElementsByTagName("title"); var myLinks = document.getElementsByTagName("a"); console.log("title = " + myTitle[0].innerHTML); console.log("number of link = " + myLinks.length); console.log("link text 1 = " + myLinks[0].innerHTML); console.log("link text 2 = " + myLinks[1].innerHTML); </script> </html>
เพิ่มข้อมูลใน HTML ด้วย JavaScript การเพิ่มหรือแก้ไขข้อมูลใน HTML โดยใช้ JavaScript จะอาศัยหลักการ ของ DOM เพื่อแทรกเอลิเมนต์เข้าไปใน DOM โดยมีขั้นตอนดังนี้ สร้างเอลิเมนต์เข้ามาใหม่ เพิ่มเอลิเมนต์ไปยัง Document แก้ไขข้อความในเอลิเมนต์
การสร้างเอลิเมนต์ใหม่ ใช้เมธอดที่ชื่อว่า createElement โดยระบุชื่อแท็กที่ต้องการสร้าง เชื่อมเอลิเมนต์ใหม่โดยใช้เมธอดชื่อว่า appendChild และแก้ไขข้อความด้วย innerHTML <!DOCTYPE HTML> <html> <head> <title>HTML5</title> <meta charset=“utf-8/> </head> <body> <li id="myList"><a href="#">list 1</a></li> </body> <script> var myElement = document.getElementById("myList"); var myNewElement = document.createElement("li"); myElement.appendChild(myNewElement); myNewElement.innerHTML = "new list"; </script> </html>
การเพิ่มข้อมูลโดยการสร้าง Text Node แก้ไขข้อความที่อยู่ในแต่ละแท็กได้ง่าย ใช้เมธอด createTextNode ในการสร้างข้อความ ใช้เมธอด appendChild ในการเชื่อมข้อความ <!DOCTYPE html> <html> <body> <p>create a Text Node.</p> <button onclick="myFunction()">Click</button> <script> function myFunction() { var t = document.createTextNode("Hello "); document.body.appendChild(t); } </script> </body> </html>
รู้จักกับอีเวนต์ เพื่อให้เว็บเพจสามารถโต้ตอบกับผู้ใช้ได้ อีเวนต์ คือสิ่งที่เกิดขึ้นเมื่อมีการคลิกเมาส์ เลื่อนเมาส์ การโหลดเวบเพจ การกรอก ข้อมูล การส่งข้อมูลจากฟอร์ม การกดปุ่มคีย์บอร์ด ฯลฯ อีเวนต์สำหรับการใช้งานใน JavaScript จะขึ้นต้นด้วยคำว่า on เช่น onclick onload onmouseover onblue onfocus
การใช้อีเวนต์สำหรับการโต้ตอบกับผู้ใช้แบบ onclick <!DOCTYPE html> <html> <body> <p>create a Text Node.</p> <button onclick="myFunction()">Click</button> <script> function myFunction() { alert(‘Click button’); } </script> </body> </html>
การใช้งาน onfocus และ onblur
ตัวอย่างโค้ด HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>onfocus and onblue</title> </head> <body> <form> Name <input type="text" id="myName"> <br> Surname <input type="text" id="mySurname"> <input type="submit" name="submit" value="Click"> </form> <script src="script.js"></script> </body> </html>
ตัวอย่างโค้ด script.js var myName = document.getElementById("myName"); myName.onfocus = function(){ if(myName.value == "fill name"){ myName.value = ""; } myName.onblur = function(){ if(myName.value == ""){ myName.value = "fill name";
การหน่วงเวลา จะใช้คำสั่ง setInterval(ชื่อฟังก์ชัน,เวลาเป็นมิลิวินาที); เพื่อหน่วงเวลา จะใช้คำสั่ง clearInterval(ชื่อฟังก์ชัน) เพื่อหยุดการหน่วงเวลา <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image change</title> </head> <body> <img id="myImage" src="main.jpg" with="400px" height="500px"> <script src="script.js"></script> </body> </html>
คำสั่ง script.js var myImage = document.getElementById("myImage"); imageArray = ["1.jpg","2.jpg","3.jpg"]; imageIndex = 0; function changeMyImage(){ myImage.setAttribute("src",imageArray[imageIndex]); imageIndex++; if(imageIndex>=imageArray.length){ imageIndex=0; } var mySetChange = setInterval(changeMyImage,3000); myImage.onclick = function(){ clearInterval(mySetChange);