DHTML - รูปแบบไฟล์ HTML แบบไดนามิก
ไฟล์ DHTML คืออะไร??
ไฟล์ที่มีนามสกุล .dhtml เป็นไฟล์ไดนามิก HTML ที่ใช้สร้างเนื้อหาไดนามิกของหน้าเว็บ องค์ประกอบเว็บที่สร้างขึ้นใน DHTML ขับเคลื่อนด้วยเหตุการณ์และไม่จำเป็นต้องโหลดหน้าซ้ำ ในกรณีส่วนใหญ่ ไฟล์ DHTML จะใช้เพื่อสร้างเนื้อหาไดนามิกของเว็บเพจ เช่น เมนูแบบเลื่อนลง เลเยอร์ลอย ปุ่มโรลโอเวอร์ และเนื้อหาไดนามิกอื่นๆ คุณเจอองค์ประกอบ html แบบไดนามิกเกือบทุกวันในชีวิตของคุณ เมื่อคุณวางเมาส์เหนือรายการเมนู และเปิดตัวเลือกเมนูย่อยเพิ่มเติม DHTML ใช้เทคโนโลยีเว็บ เช่น HTML, Javascript, HTML DOM, HTML Events และ CSS เพื่อให้ได้ไดนามิก พฤติกรรมขององค์ประกอบ
รูปแบบไฟล์ DHTML
ไฟล์ DHTML เป็นไฟล์ข้อความธรรมดาที่มีรหัส DHTML เพื่อใช้ลักษณะการทำงานแบบไดนามิกขององค์ประกอบเว็บ
DHTML DOM
DHTML Document object Model (DOM) ขึ้นอยู่กับ HTML DOM ซึ่งเป็นโครงสร้างแบบต้นไม้ที่มีองค์ประกอบ คุณลักษณะ และข้อความดังที่แสดงในภาพต่อไปนี้
สามารถใช้โหนด ‘Document’ เพื่อเรียกฟังก์ชันต่างๆ เพื่อใช้ฟังก์ชันต่างๆ ได้ ตัวอย่างต่อไปนี้ใช้เมธอด document.write() ของ JavaScript ใน DHTML
<HTML>
<head>
<title>
Method of a JavaScript
</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World");
</script>
</body>
</html>
รหัสนี้เขียนข้อความ “Hello World” เพื่อส่งออกในเบราว์เซอร์
เหตุการณ์ DHTML
| S.No. | เหตุการณ์ | เหตุการณ์ |
|---|---|---|
| 1 | onabort | เกิดขึ้นเมื่อผู้ใช้ยกเลิกการโหลดหน้าหรือไฟล์มีเดีย |
| 2 | onblur | เกิดขึ้นเมื่อผู้ใช้ออกจากวัตถุ HTML |
| 3 | onchange | เกิดขึ้นเมื่อผู้ใช้เปลี่ยนแปลงหรืออัปเดตค่าของวัตถุ |
| 4 | onclick | เกิดขึ้นหรือทริกเกอร์เมื่อผู้ใช้คลิกที่องค์ประกอบ HTML |
| 5 | ondblclick | เกิดขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ HTML สองครั้งพร้อมกัน |
| 6 | onfocus | เกิดขึ้นเมื่อผู้ใช้โฟกัสไปที่องค์ประกอบ HTML ตัวจัดการเหตุการณ์นี้ทำงานตรงข้ามกับ onblur |
| 7 | onkeydown | จะทำงานเมื่อผู้ใช้กดปุ่มบนอุปกรณ์แป้นพิมพ์ ตัวจัดการเหตุการณ์นี้ใช้ได้กับคีย์ทั้งหมด |
| 8 | onkeypress | จะทำงานเมื่อผู้ใช้กดปุ่มบนแป้นพิมพ์ ตัวจัดการเหตุการณ์นี้ไม่ได้ถูกเรียกใช้สำหรับคีย์ทั้งหมด |
| 9 | onkeyup | เกิดขึ้นเมื่อผู้ใช้ปล่อยแป้นจากแป้นพิมพ์หลังจากกดบนวัตถุหรือองค์ประกอบ |
| 10 | onload | เกิดขึ้นเมื่ออ็อบเจกต์ถูกโหลดโดยสมบูรณ์ |
| 11 | onmousedown | เกิดขึ้นเมื่อผู้ใช้กดปุ่มเมาส์เหนือองค์ประกอบ HTML |
| 12 | onmousemove | เกิดขึ้นเมื่อผู้ใช้เลื่อนเคอร์เซอร์บนวัตถุ HTML |
| 13 | onmouseover | เกิดขึ้นเมื่อผู้ใช้เลื่อนเคอร์เซอร์ไปที่วัตถุ HTML |
| 14 | onmouseout | เกิดขึ้นหรือทริกเกอร์เมื่อตัวชี้เมาส์ถูกย้ายออกจากองค์ประกอบ HTML |
| 15 | onmouseup | เกิดขึ้นหรือทริกเกอร์เมื่อปล่อยปุ่มเมาส์บนองค์ประกอบ HTML |
| 16 | onreset | ผู้ใช้ใช้เพื่อรีเซ็ตฟอร์ม |
| 17 | onselect | เกิดขึ้นหลังจากเลือกเนื้อหาหรือข้อความบนหน้าเว็บ |
| 18 | onsubmit | จะถูกเรียกใช้เมื่อผู้ใช้คลิกปุ่มหลังจากการส่งแบบฟอร์ม |
| 19 | onunload | มันถูกเรียกใช้เมื่อผู้ใช้ปิดหน้าเว็บ |