DHTML LÀ GÌ?
DHTML là mở rộng của HTML làm tăng hiệu ứng trình bày văn bản. Nó làm cho trang Web sinh động hơn, ví dụ một đoạn text có thể thay đổi kích cỡ, màu sắc hoặc những hình ảnh di chuyển từ vị trí này qua vị trí khác trên Web page, phản hồi lại tác động của người dùng.
DHTML kết hợp nhiều đặc tính của các trình duyệt, kết hợp giữa CSS và script để người lập trình khắc phục layout không linh động và sự giới hạn về tính tương tác trong HTML
DHTML cung cấp người lập trình khả năng lập trình truy xuất đến DOM (Document Object Model) cho trang HTML. Điều khiển DOM bằng script cho phép chúng ta truy xuất bất cứ đối tựơng nào trên trang, chỉnh sửa nội dung, vị trí, thuộc tính CSS và thêm các thuộc tính mở rộng.
DHTML là client-side scripting. Nó cho phép một trang Web được thay đổi sau khi trang Web này được load bằng browser mà không gửi yêu cầu cho Web Server để thực hiện update.
Trong FrontPage, bạn có thể sử dụng thanh công cụ DHTML Effects để làm tăng cường hiệu ứng cho các element mà không cần lập trình.
LỊCH SỬ PHÁT TRIỂN
Một vài năm trước khi Microsoft giới thịêu Internet Explorer 4 lần đầu tiên đã làm thay đổi hướng phát triển Web client-side. Nó xuất hiện ở khắp mọi nơi, được đính kèm với các version của Window và được giới thiệu như một kỹ thuật mới gọi là DHTML. Nhưng do sự khó khăn của các trình duyệt lúc bấy giờ, thập niên 90, sự phản đối của người dùng tăng lên, sự triển khai DOM và CSS không phù hợp giữa các browsers làm cho DHTML không thể phát triển. DHTML được giới thiệu trở lại vào năm 1997 cùng với sự phát triển của các Browsers thế hệ 4x.
DHTML là yếu tố chính cho việc phát triển Internet Explorer, Netscape cũng phát triển DHTML sau đó, và triển khai một phiên bản DHTML không mấy thành công, NN4. NN6 đã thay đổi nhiều hơn, và bây giờ Netscape hỗ trợ cho DOM Level 1, dù NN6 đã thực hiện điều này trước đây.
DHTML được Microsoft và Netscape xem là cách mới hiệu quả để làm cho trang web tương tác hơn. Cả Microsoft và Netscape chia sẻ cùng khái niệm nhưng họ đã thực hiện khái niệm này khác nhau. Netscape cung cấp tag <LAYER> kết hợp chặt chẽ với Javascript và Style Sheet trong điều khiển xác định vị trí, trong khi đó Microsoft sử dụng Active X và CSS Style Sheet kết hợp chặt chẽ ngôn ngữ scripting như Jscript (phiên bản JavaScript của Microsoft) hay VBScript để điều khiển xác định vị trí.
Microsoft đưa các đặc tính DHTML vào phiên bản Internet Explorer 4.0. Các đặc tính khoá trong DHTML của Microsoft là: Cascading Style Sheets, Document Object Model (DOM), và Data Binding. Microsoft Internet Explorer 5 cung cấp một đặc tính dễ sử dụng cho phép người thiết kế web và người phát triển cải thiện to lớn giao diện và thể hiện trang web. Sử dụng sức mạnh thuộc tính động, có thể khai báo giá trị property không chỉ như hằng số mà còn là những công thức (formula). Formula sử dụng trong property dynamic có thể tham chiếu giá trị property từ các element khác.
DHTML của Netscape, các layer có thể trong suốt hoặc không trong suốt, một layer có thể được đặt trên hay dưới layer khác. Netscape cũng cung cấp “Dynamic Fonts”, người sử dụng có thể gửi font với document và người xem có thể thấy những font này trên web page khi họ không cài đặt font này trên máy. Nếu muốn thiết kế web page bằng Nescape, người dùng phải có Navigator 4.0 trên máy.
CẤU TRÚC CỦA DHTML
DHTML có 4 phần:
• Document Object Model (DOM)
• Scripts
• Cascading Style Sheets (CSS)
• XHTML
1. DOM
DOM cho phép bạn truy xuất đến bất cứ phần nào trang web của bạn để thay đổi nó bằng DHTML. Mỗi phần của một trang Web được chỉ ra bởi DOM và sử dụng tên quy định nhất quán của nó bạn có thể truy xuất chúng và thay đổi thuộc tính. DOM chỉ ra element có thể bắt được những thay đổi được gọi là event, giống như di chuyển chuột qua một element (onmouseover), loading một trang (onload), submitting một form (onsubmit), click trên một form input field (onfocus)…
2. Scripts
Scripts đựơc viết bằng JavaScrip hay VBScript là 2 ngôn ngữ script phổ biến được sử dụng để kích hoạt DHTML. Bạn sử dụng một ngôn ngữ script để điều khiển đối tượng đưa ra trong DOM.
3. CSS
CSS được sử dụng trong DHTML để điều khiển giao diện và trực quan của Web page. Style sheets định nghĩa màu, font của text, màu background, hình ảnh, và việc sắp xếp các objects trên trang. Sử dụng script va’ DOM, bạn có thể thay đổi style của rất nhiều element (như color, position, hay size), bạn có thể thực hịên với hầu như bất cứ tốc độ băng thông và processor nào.
4. XHTML
XHTML hay HTML 4.x được sử dụng để tạo trang và tạo các element cho CSS và DOM làm việc. Không có gì đặc biệt về XHTML cho DHTML – nhưng cần có XHTML hợp lý.
ĐẶC TÍNH CỦA DHTML
Có 4 đặc tính chính của DHTML:
• Thay đổi tag và property
• Real-time positioning
• Dynamic fonts (Netscape Communicator)
• Data binding (Internet Explorer)
1. Thay đổi tag và property
Đây là một đặc tính phổ biến nhất của DHTML. Nó cho phép bạn thay đổi đặc tính của một HTML tag phụ thuộc vào một event bên ngoài của browser (như click chuột, time, hay date…). Bạn có thể sử dụng điều này để preload thông tin lên một trang web, và không hiện nó trừ khi người xem click vào một đường link chỉ định.
2. Real-time positioning
Objects, images, và text di chuyển quanh Web page cho phép bạn chơi những game tương tác với người xem hay làm cho màn hình sống động hơn.
3. Dynamic fonts
Đây là đặc tính chỉ có trong Netscape. Netscape phát triển điều này để giải quyết vấn đề người thiết kế không biết font nào sẽ được thể hiện trên system của người xem. Với Dynamics font, font được mã hoá và được download cùng Web page để Web page luôn luôn thể hiện đúng như người thiết kế dự tính.
4. Data binding
Đây là đặc tính riêng của IE. Microsoft phát triển Data binding để cho phép người dùng truy xuất dễ dàng đến databases từ Web site. Nó tương tự như việc sử dụng CGI để truy xuất database, nhưng dùng một ActiveX control để chạy. Đặc tính này rất ưu thế nhưng khó sử dụng cho người viết mới biết DHTML.
VÍ DỤ
Ví dụ: Đặc trưng của một trang web sử dụng DHTML được cấu thành như sau:
<html>
<head>
<title>DHTML example</title>
<script type=”text/javascript”>
function init() {
myObj = document.getElementById(‘navigation’);
// …. adding code source
}
window.onload = init;
</script>
</head>
<body>
<div id=”navigation”></div>
</body>
</html>
Thường thì mã JavaScript được lưu giữ trong một tập tin riêng, đựơc nạp vào trang web bằng cách liên kết đến tập tin chứa mã java script:
<script type=”text/javascript” src=”script.js”></script>
Ví dụ: Hiển thị một đoạn văn bản được thêm vào
Đoạn mã dưới đây minh hoạ một chức năng thừơng đựơc sử dụng. Phần thêm vào của trang web sẽ chỉ được hiển thị nếu người dùng yêu cầu nó. Như trong e-learning chức năng này sử dụng để hiển thị gợi ý được thêm vào.
<html>
<head><title>Ví dụ</title>
<style type=”text/css”>
<!–
h2 {background-color: lightblue; width: 100%}
a {font-size: larger; background-color: goldenrod}
a:hover {background-color: gold}
#example1 {display: none; margin: 3%; padding: 4%; background-color:
limegreen}
–>
</style>
<script type=”text/javascript”>
<!–
function changeDisplayState (id) {
e = document.getElementById(id);
if (e.style.display == ‘none’ || e.style.display == ”) {
e.style.display = ‘block’;
showhide.innerHTML = ‘Dấu ví dụ’};
else {
e.style.display = ‘none’;
showhide.innerHTML = ‘Hiển thị ví dụ’;
}
}
//–>
</script>
</head>
<body>
<a id=”showhide” href=”#”
onclick=”java script:changeDisplayState(‘example1′) “>Hiển thị ví dụ</a>
<div id=”example1″>Đây là ví dụ: văn bản chỉ hiển thị khi bấm chuột vào
lin kết.</div>
<p>Thêm văn bản thường…<p>
</body>
</html>
Một ứng dụng trình diễn
S5 là một ứng dụng của DHTML hoạt động trong các trình duyệt hiện đại (bao gồm IE 6): Một tập tin XHTML chứa một slideshow có thể xem được trên chế độ projector theo từng slide một (trình duyệt đựơc thiết lập ở chế độ tàn màn hình) như một trang web đơn hoặc có thể in được như một bản tin phát tay. Với DHTML thì việc điều hướng được xây dựng một cách linh động. Những chuyển động đơn giản là điều có thể. Định dạng sẽ được thực hiện bởi CSS.
VỊ TRÍ HIỆN NAY
Hiện nay, sau nhiều năm DHTML được giới thiệu lần đầu tiên, mọi thứ đã trở nên tốt hơn mặc dù không nhiều lắm. Nhưng vì sự hỗ trợ giới hạn của CSS và XML cùng với mô hình DOM độc quyền, sử dụng những browser cũ bắt buộc các nhà phát triển phải viết nhiều version cho mỗi trang, nên nó vô cùng tốn kém. Phần lớn các trang trên World Wide Web vẫn hoàn toàn sử dụng HTML, không có bất cứ link tương tác nào và form đơn giản.
Kỹ thuật DHTML hiện đang ở trong giai đoạn phát triển, với NS 4 và IE 4 làm khác biệt hoàn toàn sự triển khai kỹ thụât này.
DHTML trong IE 4 vượt trội và linh hoạt hơn hẳn DHTML trong NS 4.
TƯƠNG LAI
DHTML thất bại trong việc trở thành chương trình client-side chuẩn khi Macromedia cho ra kỹ thụât Flash. Bằng cách sử dụng cài đặt client-side code, Flash pages phá vỡ tính không tương thích của các trình duyệt web. Hơn 98% các browsers hỗ trợ Flash.
Java cũng trở thành đối thủ của DHTML. Dạo qua các trang game Yahoo hay AOL dù tối hay ngày bạn sẽ thấy hàng trăm ngàn người chơi game đựơc phát triển bằng Java applet. Applet, được hỗ trợ bởi ngôn ngữ Java. Flash scripting và DHTML không đủ khả năng hay tốc độ nhanh, và quá khó để thực hiện.
ƯU ĐIỂM, KHUYẾT ĐIỂM
1. Ưu điểm
Khi nghĩ đến dynamic HTML, bạn cần nhớ đến những ưu điểm của HTML chuẩn, đặc biệt khi một trang được load từ server, nó sẽ không thay đổi cho đến khi nhận được request khác từ server. Dynamic HTML cho bạn nhiều điều khiển hơn qua HTML element và cho phép bạn thay đổi bất cứ khi nào mà không cần chuyển về Web server.
Với DHTML chúng ta có thể chỉnh sửa HTML page trong khi nó được hiển thị và cung cấp nội dung linh họat cho người xem. Vì DHTML sử dụng component mà browser đã hỗ trợ như HTML, Cascading Style Sheets (CSS), JavaScript, và DOM, nó không đòi hỏi xác định quyền và ứng dụng phía server. Bạn không cần phải biết các ngôn ngữ lập trình khác hay scripting khác như client GUI yêu cầu. Bạn không cần lo lắng về sự khác biệt giữa file source và file binary.
2. Khuyết điểm
Một số điểm yếu của DHTML là khó khăn khi phát triển và gỡ rối vì sự phong phú và đa dạng của một số lượng lớn các trình duyệt. Việc phát triển cho các trình duyệt phổ biến như Xnternet Explorer 5.0+, Mozilla Firefox, Netscape 6.0+, và Opera 7.0+, có vẻ dễ dàng hơn nhờ sự chia sẻ DOM.
DHTML TRONG NETSCAPE VÀ IE
Kỹ thuật DHTML trong Nescape 4.x và Internet Explorer 4.x
NHẬN XÉT
DHTML làm cho Web page trở nên sống động và tương tác hơn với người dùng. Với sự phát triển của các Browser hiện nay người sử dụng không còn phải lo lắng khi lướt qua những trang DHTML. Bên cạnh những ưu điểm vượt trội, DHTML vẫn còn một số khuyết điểm mà hầu hết các chương trình thường vấp phải. Thời gian tới những khuyết điểm này sẽ được khắc phục trong các phiên bản DHTML mới của Microsoft và Netscape.
THUẬT NGỮ
• ActiveX: 1 tập hợp kỹ thụât cho phép các thành phần mềm tương tác với một thành phần khác trong môi trường mạng, bất chấp ngôn ngữ của thành phần được tạo ra, được dùng làm chính yếu để phát triển nội dung tương tác của World Wide Web.
• Web browser (trình duyệt web): Phần mềm phiên dịch đánh dấu của các file bằng HTML, định dạng chúng sang các trang web, và thể hiện chúng cho ngừơi dùng.
• Script: Một tập các chỉ lệnh dùng để báo cho chương trình biết cách thực hiện một thủ tục qui định, như đăng nhập vào hệ thống thư điện tử chẳng hạn. Các script được cài sẵn trong một số chương trình.
• Hypertext Transfer Protocol-HTTP: Giao thức truyền siêu văn bản
• Hyperlink: Siêu liên kết.
• HTTP address: địa chỉ HTTP, ví dụ http://www.microsoft.com
• Hypertext: Văn bản của một tài liệu truy tìm không theo tuần tự. Các link liên kết các trang tài liệu với nhau.
(forums.2it.in)
