HTML động, hoặc DHTML, là một thuật ngữ được sử dụng bởi một số nhà cung cấp trình duyệt để mô tả sự kết hợp của HTML, bảng kiểu và tập lệnh phía máy khách [JavaScript, VBScript hoặc bất kỳ tập lệnh được hỗ trợ nào khác] cho phép tạo tài liệu tương tác và hoạt hình . [1] [2] Ứng dụng của DHTML đã được Microsoft giới thiệu với việc phát hành Internet Explorer 4 vào năm 1997. [3], or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts [JavaScript, VBScript, or any other supported scripts] that enabled the creation of interactive and animated documents.[1][2] The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.[3]
DHTML cho phép các ngôn ngữ tập lệnh thay đổi các biến trong ngôn ngữ định nghĩa của trang web, từ đó ảnh hưởng đến giao diện và chức năng của nội dung trang HTML "tĩnh" sau khi trang đã được tải đầy đủ và trong quá trình xem. Do đó, đặc tính động của DHTML là cách nó hoạt động trong khi một trang được xem, không phải trong khả năng tạo một trang duy nhất với mỗi tải trang.
Ngược lại, một trang web động là một khái niệm rộng hơn, bao gồm bất kỳ trang web nào được tạo khác nhau cho mỗi người dùng, tải xuất hiện hoặc các giá trị biến cụ thể. Điều này bao gồm các trang được tạo bởi tập lệnh phía máy khách và các trang được tạo bởi tập lệnh phía máy chủ [như PHP, Python, JSP hoặc ASP.NET] trong đó máy chủ web tạo nội dung trước khi gửi cho máy khách.
DHTML là tiền thân của các trang AJAX và DHTML vẫn được yêu cầu/tải lại. Theo mô hình DHTML, có thể không có bất kỳ tương tác nào giữa máy khách và máy chủ sau khi trang được tải; Tất cả việc xử lý xảy ra ở phía khách hàng. Ngược lại, AJAX mở rộng các tính năng của DHTML để cho phép trang bắt đầu các yêu cầu mạng [hoặc 'Subrequest'] cho máy chủ ngay cả sau khi tải trang để thực hiện các hành động bổ sung. Ví dụ: nếu có nhiều tab trên một trang, cách tiếp cận DHTML thuần túy sẽ tải nội dung của tất cả các tab và sau đó chỉ hiển thị động chỉ hiển thị hình thức hoạt động, trong khi AJAX chỉ có thể tải từng tab khi thực sự cần thiết.
Uses[edit][edit]
DHTML cho phép các tác giả thêm hiệu ứng vào các trang của họ khó đạt được, bằng cách thay đổi mô hình đối tượng tài liệu [DOM] và kiểu trang. Sự kết hợp của HTML, CSS và JavaScript cung cấp các cách để:
- Hiệu văn văn bản và hình ảnh trong tài liệu của họ.
- Nhúng một mã đánh dấu hoặc màn hình động khác tự động làm mới nội dung của nó với tin tức mới nhất, báo giá chứng khoán hoặc dữ liệu khác.
- Sử dụng một biểu mẫu để nắm bắt đầu vào của người dùng, sau đó xử lý, xác minh và trả lời dữ liệu đó mà không phải gửi dữ liệu trở lại máy chủ.
- Bao gồm các nút Rollover hoặc menu thả xuống.
Một cách sử dụng ít phổ biến hơn là tạo ra các trò chơi hành động dựa trên trình duyệt. Mặc dù một số trò chơi đã được tạo ra bằng cách sử dụng DHTML vào cuối những năm 1990 và đầu những năm 2000, [4] sự khác biệt giữa các trình duyệt đã gây khó khăn cho điều này: nhiều kỹ thuật phải được thực hiện trong mã để cho phép các trò chơi hoạt động trên nhiều nền tảng. Gần đây, các trình duyệt đã hội tụ theo các tiêu chuẩn web, điều này đã làm cho thiết kế của các trò chơi DHTML trở nên khả thi hơn. Những trò chơi này có thể được chơi trên tất cả các trình duyệt chính và chúng cũng có thể được chuyển sang plasma cho KDE, các tiện ích cho macOS và các tiện ích cho Windows Vista, dựa trên mã DHTML.
Thuật ngữ "DHTML" đã không sử dụng trong những năm gần đây vì nó được liên kết với các thực tiễn và quy ước có xu hướng không hoạt động tốt giữa các trình duyệt web khác nhau. [5]
Hỗ trợ DHTML với quyền truy cập DOM rộng rãi đã được giới thiệu với Internet Explorer 4.0. Mặc dù có một hệ thống động cơ bản với NetScape Navigator 4.0, nhưng không phải tất cả các phần tử HTML đều được thể hiện trong DOM. Khi các kỹ thuật kiểu DHTML trở nên phổ biến, mức độ hỗ trợ khác nhau giữa các trình duyệt web cho các công nghệ liên quan khiến chúng khó phát triển và gỡ lỗi. Sự phát triển trở nên dễ dàng hơn khi Internet Explorer 5.0+, Mozilla Firefox 2.0+ và Opera 7.0+ đã áp dụng một DOM được chia sẻ được kế thừa từ Ecmascript.
Gần đây, các thư viện JavaScript như JQuery đã trừu tượng hóa nhiều khó khăn hàng ngày trong các thao tác DOM của trình duyệt chéo.
Cấu trúc của một trang web [Chỉnh sửa][edit]
Thông thường, một trang web sử dụng DHTML được thiết lập theo cách sau:
DHTML example
function init[] {
let myObj = document.getElementById["navigation"];
// ... manipulate myObj
}
window.onload = init;
Ví dụ: Hiển thị một khối văn bản bổ sung [Chỉnh sửa][edit]
Mã sau đây minh họa một chức năng thường được sử dụng. Một phần bổ sung của trang web sẽ chỉ được hiển thị nếu người dùng yêu cầu nó.
Using a DOM function
a { background-color: #eee; }
a:hover { background: #ff0; }
#toggleMe { background: #cfc; display: none; margin: 30px 0; padding: 1em; }
Using a DOM function
Show paragraph
This is the paragraph that is only displayed on request.
The general flow of the document continues.
function changeDisplayState[displayElement, textElement] {
if [displayElement.style.display === "none" || displayElement.style.display === ""] {
displayElement.style.display = "block";
textElement.innerHTML = "Hide paragraph";
} else {
displayElement.style.display = "none";
textElement.innerHTML = "Show paragraph";
}
}
let displayElement = document.getElementById["toggle-me"];
let textElement = document.getElementById["showhide"];
textElement.addEventListener["click", function [e] {
e.preventDefault[];
changeDisplayState[displayElement, textElement];
}];
Mô hình đối tượng tài liệu [Chỉnh sửa][edit]
DHTML không phải là một công nghệ trong chính nó; Thay vào đó, nó là sản phẩm của ba công nghệ liên quan và bổ sung: HTML, bảng kiểu xếp tầng [CSS] và JavaScript. Để cho phép các tập lệnh và các thành phần truy cập các tính năng của HTML và CSS, nội dung của tài liệu được biểu diễn dưới dạng các đối tượng trong mô hình lập trình được gọi là Mô hình đối tượng tài liệu [DOM].
API DOM là nền tảng của DHTML, cung cấp giao diện có cấu trúc cho phép truy cập và thao tác hầu như bất cứ điều gì trong tài liệu. Các phần tử HTML trong tài liệu có sẵn dưới dạng cây phân cấp của các đối tượng riêng lẻ, giúp kiểm tra và sửa đổi một phần tử và các thuộc tính của nó bằng cách đọc và cài đặt các thuộc tính và bằng cách gọi các phương thức. Văn bản giữa các yếu tố cũng có sẵn thông qua các thuộc tính và phương thức DOM.
DOM cũng cung cấp quyền truy cập vào các hành động của người dùng như nhấn phím và nhấp vào chuột. Có thể chặn và xử lý các sự kiện này và các sự kiện khác bằng cách tạo các chức năng và thói quen xử lý sự kiện. Trình xử lý sự kiện nhận được quyền kiểm soát mỗi khi một sự kiện nhất định xảy ra và có thể thực hiện bất kỳ hành động thích hợp nào, bao gồm cả việc sử dụng DOM để thay đổi tài liệu.
Kiểu động [chỉnh sửa][edit]
Kiểu động là một tính năng chính của DHTML. Bằng cách sử dụng CSS, người ta có thể nhanh chóng thay đổi ngoại hình và định dạng của các phần tử trong tài liệu mà không cần thêm hoặc loại bỏ các phần tử. Điều này giúp giữ cho các tài liệu nhỏ và các tập lệnh thao túng tài liệu nhanh chóng.
Mô hình đối tượng cung cấp quyền truy cập theo chương trình cho các kiểu. Điều này có nghĩa là bạn có thể thay đổi các kiểu nội tuyến trên các yếu tố riêng lẻ và thay đổi các quy tắc kiểu bằng cách sử dụng lập trình JavaScript đơn giản.
Kiểu nội tuyến là các bài tập kiểu CSS đã được áp dụng cho một phần tử bằng thuộc tính kiểu. Bạn có thể kiểm tra và đặt các phong cách này bằng cách truy xuất đối tượng kiểu cho một yếu tố riêng lẻ. Ví dụ: để làm nổi bật văn bản trong tiêu đề khi người dùng di chuyển con trỏ chuột qua nó, bạn có thể sử dụng đối tượng kiểu để phóng to phông chữ và thay đổi màu của nó, như được hiển thị trong ví dụ đơn giản sau.
Dynamic Styles
ul { display: none; }
Welcome to Dynamic HTML
Dynamic styles are a key feature of DHTML.
Change the color, size, and typeface of text
Show and hide text
And much, much more
We've only just begun!
function showMe[] {
document.getElementById["first-header"].style.color = "#990000";
document.getElementById["unordered-list"].style.display = "block";
}
document.getElementById["clickable-link"].addEventListener["click", function [e] {
e.preventDefault[];
showMe[];
}];
Xem thêm [sửa][edit]
- Trang web động
References[edit][edit]
- ^"Câu hỏi thường gặp về mô hình đối tượng tài liệu". www.w3.org. Truy cập 2022-02-16. "Document Object Model FAQ". www.w3.org. Retrieved 2022-02-16.
- ^"Phong cách web". www.w3.org. Truy cập ngày 7 tháng 4 năm 2018. "Web Style Sheets". www.w3.org. Retrieved 7 April 2018.
- ^"Dhtml | Một cái nhìn nhanh về dhtml với các thành phần, tính năng, cần". Giáo dục. 2020-07-19. Truy cập 2022-10-13. "DHTML | A Quick Glance of DHTML with Components, Features, Need". EDUCBA. 2020-07-19. Retrieved 2022-10-13.
- ^"Web của Stephen ~ vui vẻ và các trò chơi với dhtml ~ Stephen Downes". www.downes.ca. Truy cập 2022-08-27. "Stephen's Web ~ Fun and Games With DHTML ~ Stephen Downes". www.downes.ca. Retrieved 2022-08-27.
- ^Ferguson, Russ; Heilmann, Christian [2013]. Bắt đầu JavaScript với Scripting DOM và AJAX [PDF]. Berkeley, CA: Apress. Trang & NBSP; 49 Từ68. Truy cập ngày 30 tháng 5 năm 2022. Ferguson, Russ; Heilmann, Christian [2013]. Beginning JavaScript with DOM Scripting and Ajax [PDF]. Berkeley, CA: Apress. pp. 49–68. Retrieved May 30, 2022.
Liên kết bên ngoài [Chỉnh sửa][edit]
JavaScript/DHTML
- QuirksMode, một trang web toàn diện với các ví dụ và hướng dẫn kiểm tra về cách viết mã DHTML chạy trên một số trình duyệt.
- Hướng dẫn giới thiệu DHTML