Dynamic HTML คือ
รูปแบบการเขียนโปรแกรมที่ช่วยเพิ่มประสิทธิภาพให้เวบดูดีมีลูกเล่นและน่าสนใจมากขึ้น
Dynamic HTML มี 2 ส่วน คือ Static (คงที่) ใช้ HTML สร้างส่วนนี้ และส่วน Dynamic (เปลี่ยนแปลง) ใช้เทคโนโลยีช่วยในการสร้างได้ เช่น
เทคโนโลยีฝั่งเซิร์ฟเวอร์ (Server-Side Script) เช่น ASP (Active Server Pages), PHP
(Personal Home Page), JPS (JavaServer Pages)
และเทคโนโลยีฝั่งไคลแอนท์
(Client-Side
Script) เช่น VBScript,
JavaScript
Dynamic HTML หรือ DHTML คือ ส่วนเพิ่มเติมที่ช่วยให้ HTML
ดูไม่น่าเบื่อ ตัวช่วยคือ JavaScript,
VBScript, CSS (Cascading Style Sheet)
โครงสร้างของ DHTML มี 3 ชั้น คือ
1. เนื้อหา
(Content) ใช้ HTML
ในการนำเสนอเนื้อหาในหน้าเวบ เช่น ข้อความ, ภาพ, เสียง, วีดีโอ และอื่น ๆ
2. 2. นำเสนอ
(Presentation) ใช้ CSS
ในการจัดรูปแบบ ตำแหน่ง สี ความสวยงามในการนำเสนอเนื้อหาจาก HTML
3. 3. ปฏิบัติ
(Behavior) ใช้ JavaScript หรือ VBScript สร้างการทำงาน การเปลี่ยนแปลง
และลูกเล่นให้กับ HTML และ CSS
JavaScript คือ ภาษาจาวาชุดเล็กที่มีการใช้งานง่าย
สามารถเขียนลงในไฟล์โค้ด HTML ได้ เป็นตัวช่วยให้เวบเพจมีความสามารถด้านต่างๆ ได้มากขึ้น
CSS หรือ Cascading
Style Sheets คือ
ภาษาที่ใช้ในการกำหนดรูปแบบการแสดงผลบนหน้าเวบเพจให้มีระเบียบสวยงามมากขึ้น
โครงสร้าง
HTML
รูปแบบ
<html>
<head>
<title>ข้อความบนไตเติล
(ถ้ามี)</title>
<style>กำหนดสไตล์ชีตให้แท็กต่าง
ๆ (ถ้ามี)</stlye>
<script language=”ชื่อภาษาใช้เขียนสคริปต์”>คำสั่งสคริปต์ (ถ้ามี)</script>
</head>
<body>
<แท็กต่าง ๆ>…</…>
</body>
</html>
ใน HTML ไฟล์จะประกอบด้วย 2 ส่วน คือ ส่วน head
เป็นส่วนที่แสดงรายละเอียดของหน้าเวบ เช่น กำหนดภาษาที่ใช้ ชนิดฟอนต์ ขนาดฟอนต์
และอื่นๆ อีกทั้งยังกำหนดแท็ก <title>... </title>,
<style>… </style> ใช้กำหนด style sheet,
<script language=”ชื่อภาษาใช้เขียนสคริปต์>…</script>
ใช้กำหนดภาษาสคริปต์ เช่น JavaScript, VBScript เป็นต้น <meta ข้อกำหนดของเมต้า /> กำหนดชุดตัวอักษรไทยเพื่อใช้กับหน้าเวบ, กำหนดลูกเล่นตอนโหลดหน้าเวบ,
ตั้งหน้าเวลาการโหลดหน้าเอกสารซ้ำ (refresh) และส่วน <body>…</body>
ใช้แสดงเนื้อหา และองค์ประกอบเวบทั้งหมด
รู้จักกับ
tag ใน HTML
มี 2 ชนิด คือ แบบคู่ <tag>....</tag>
และแบบเดี่ยว <tag/> แท็กใน HTML
จะถูกมองเป็น object เสมอ ดังนั้นแท็กใน HTML 1 หน้าจะประกอบด้วยออบเจ็กต่างๆ มากมายมารวมกัน เช่น ออบเจ็กตาราง (tag
<table>) จะเกิดจากออบเจ็กแถว (tag
<tr>) และออบเจ็กคอลัมน์
(tag <td>) นำมาประกอบกัน
และภายในแท็กจะประกอบ 2 ส่วน คือ คุณสมบัติ (attribute) และเหตุการณ์ (event)
attribute คือ ส่วนขยายของแท็ก ทำให้แท็กมีลักษณะเฉพาะตัวจากแท็กอื่น
เช่น <font
size=5> ส่วนที่ไม่ได้กำหนดจะมีค่า
attribute
เริ่มต้น
attribute ส่วนใหญ่จะเกี่ยวข้องกับการแสดงผล เช่น width,
hight, color, size หรือ align
เป็นต้น
event เป็นส่วนที่ใช้จับเหตุการณ์ที่แท็กหรือออบเจ็กที่สนใจ เช่น on
click, ondbclick เช่น <img
scr="test.gif" width="200"
onclick="this.width="500"> เมื่อมีการคลิกที่แท็ก img จะมีการเปลี่ยนความกว้างของแท็กออบเจ็ก img
จาก 200 เป็น 500
HTML event Table
Categogy
|
Attribute
|
Description
|
Mouse
|
onclick
|
เกิดเหตุการณ์เมื่อคลิก
|
ondbclick
|
เกิดเหตุการณ์เมื่อดับเบิ้ลคลิก
|
|
onmousedown
|
เกิดเหตุการณ์เมื่อคลิกเมาส์ค้าง
|
|
onmouseup
|
เกิดเหตุการณ์เมื่อปล่อยเมาส์บนแท็ก
|
|
onmouseover
|
เกิดเหตุการณ์เมื่อเลื่อนเมาส์มาอยู่บนแท็ก
|
|
onmousemove
|
เกิดเหตุการณ์เมื่อเลื่อนเมาส์ไปมาบนแท็ก
|
|
onmouseout
|
เกิดเหตุการณ์เมื่อเลื่อนเมาส์ออกนอกแท็ก
|
|
Keyboard
|
onkeypress
|
เกิดเหตุการณ์เมื่อกดและปล่อยปุ่ม
|
onkeydown
|
เกิดเหตุการณ์เมื่อกดปุ่ม
|
|
onkeyup
|
เกิดเหตุการณ์เมื่อปล่อยปุ่ม
|
|
HTML
|
onload
|
เกิดเหตุการณ์เมื่อเปิดหน้าเวบ
|
frame/object
|
onunload
|
เกิดเหตุการณ์เมื่อปิดหน้าเวบหรือเปลี่ยนไปดูหน้าเวบอื่น
|
onabort
|
เกิดเหตุการณ์เมื่อหยุดโหลดก่อนโหลดครบ
|
|
onerror
|
เกิดเหตุการณ์เมื่อเกิดข้อผิดพลาดขณะโหลด
|
|
onresize
|
เกิดเหตุการณ์เมื่อปรับขนาดหน้าเวบ
|
|
onscroll
|
เกิดเหตุการณ์เมื่อเลื่อนหน้าเวบขึ้นลง
|
|
HTML
|
onselect
|
เกิดเหตุการณ์เมื่อข้อความในออบเจ็ก
input,
textarea
|
form
|
onchange
|
เกิดเหตุการณ์เมื่อแก้ไขข้อมูลในออบเจ็ก
input,
select, textarea
|
onsubmit
|
เกิดเหตุการณ์ฟอร์ม
submit
|
|
onreset
|
เกิดเหตุการณ์ฟอร์ม
reset
|
|
onfocus
|
เกิดเหตุการณ์ออบเจ็กได้รับโฟกัส
|
|
onblur
|
เกิดเหตุการณ์ออบเจ็กเสียโฟกัส
|
หมายเหตุ: โฟกัส (focus) คือ
สิ่งที่บอกว่าเรากำลังทำงานกับออบเจ็กใด ในช่วงเวลาหนึ่งๆ
จะมีออบเจ็กที่ได้รับการโฟกัสแค่ 1 ตัวเท่านั้น
และออบเจ็กที่สามารถรับการโฟกัสได้มีดังนี้ label, input,
select, textarea & button
Update: 10 มค. 12
.........
ไม่มีความคิดเห็น:
แสดงความคิดเห็น