“Tài liệu của JavaScript. phương thức createElement[]” với thuộc tính “textContent” được sử dụng để viết mã HTML động trong JavaScript. Sử dụng phương thức createElement[], bạn có thể tạo một phần tử HTML nhất định và thuộc tính textContent được sử dụng để đặt nội dung văn bản
cú pháp
Sử dụng cú pháp đã cho để tạo phần tử HTML trong JavaScript
tài liệu. createElement['tagName']
Thí dụ
Here, first, we will create a paragraph in a JavaScript file using the HTML
tag passed in a “createElement[]” method:
const văn bản = tài liệu. createElement['p'];
Sử dụng thuộc tính textContent để đặt văn bản trong một đoạn văn
văn bản. textContent = "Chào mừng đến với Linuxhint";
Cuối cùng, in văn bản trên trang web bằng cách sử dụng “tài liệu. viết phương pháp
tài liệu. viết[ văn bản. nội dung văn bản];
Tại đây, bạn có thể thấy trong kết quả, chúng tôi đã viết thành công văn bản trên trang web bằng JavaScript
Phương pháp 2. Viết mã HTML động bằng cách sử dụng thuộc tính InternalHTML
Để viết mã HTML động bằng JavaScript, hãy sử dụng “tài liệu. createElement[]” với thuộc tính “textContent” hoặc thuộc tính “innerHTML”. Ở phương thức đầu tiên, bạn không cần bất kỳ mã HTML nào, trong khi ở thuộc tính innerHTML, bạn cần truy cập phần tử HTML và thực hiện thao tác trên phần tử đó. Trong hướng dẫn này, chúng tôi đã mô tả các phương pháp viết mã HTML động bằng JavaScript
HTML động không phải là ngôn ngữ đánh dấu hay ngôn ngữ lập trình mà nó là thuật ngữ kết hợp các tính năng của các công nghệ phát triển web khác nhau để tạo các trang web động và tương tác
Ứng dụng DHTML được Microsoft giới thiệu cùng với việc phát hành phiên bản thứ 4 của IE [Internet Explorer] vào năm 1997
Các thành phần của HTML động
DHTML bao gồm bốn thành phần hoặc ngôn ngữ sau
- HTML4. 0
- CSS
- JavaScript
- DOM
HTML4. 0
HTML là ngôn ngữ đánh dấu phía máy khách, là thành phần cốt lõi của DHTML. Nó xác định cấu trúc của một trang web với các thành phần hoặc thẻ cơ bản được xác định khác nhau
CSS
CSS là viết tắt của Cascading Style Sheet, cho phép người dùng hoặc nhà phát triển web kiểm soát kiểu dáng và bố cục của các thành phần HTML trên trang web
JavaScript
JavaScript là ngôn ngữ kịch bản được thực hiện ở phía máy khách. Các trình duyệt khác nhau hỗ trợ công nghệ JavaScript. DHTML sử dụng công nghệ JavaScript để truy cập, kiểm soát và thao tác các phần tử HTML. Các câu lệnh trong JavaScript là các lệnh thông báo cho trình duyệt thực hiện một hành động
DOM
DOM là mô hình đối tượng tài liệu. Nó là một tiêu chuẩn w3c, là một giao diện lập trình tiêu chuẩn cho HTML. Nó chủ yếu được sử dụng để xác định các đối tượng và thuộc tính của tất cả các thành phần trong HTML
Công dụng của DHTML
Sau đây là cách sử dụng DHTML [HTML động]
- Nó được sử dụng để thiết kế các trang web hoạt hình và tương tác được phát triển trong thời gian thực
- DHTML giúp người dùng bằng cách tạo hiệu ứng động cho văn bản và hình ảnh trong tài liệu của họ
- Nó cho phép các tác giả thêm các hiệu ứng trên các trang của họ
- Nó cũng cho phép các tác giả trang bao gồm các menu thả xuống hoặc các nút cuộn qua
- Thuật ngữ này cũng được sử dụng để tạo các trò chơi hành động dựa trên trình duyệt khác nhau
- Nó cũng được sử dụng để thêm mã đánh dấu trên các trang web khác nhau, cần tự động làm mới nội dung của chúng
Đặc điểm của DHTML
Sau đây là các đặc điểm hoặc tính năng khác nhau của DHTML [HTML động]
- Tính năng chính và đơn giản nhất của nó là chúng ta có thể tạo trang web động
- Dynamic Style là một tính năng cho phép người dùng thay đổi phông chữ, kích thước, màu sắc và nội dung của trang web
- Nó cung cấp phương tiện để sử dụng các sự kiện, phương thức và thuộc tính. Và, cũng cung cấp tính năng tái sử dụng mã
- Nó cũng cung cấp tính năng trong các trình duyệt để liên kết dữ liệu
- Sử dụng DHTML, người dùng có thể dễ dàng tạo phông chữ động cho các trang web hoặc trang web của mình
- Với sự trợ giúp của DHTML, người dùng có thể dễ dàng thay đổi các thẻ và thuộc tính của chúng
- Chức năng trang web được nâng cao vì DHTML sử dụng hiệu ứng băng thông thấp
Sự khác biệt giữa HTML và DHTML
Bảng sau đây mô tả sự khác biệt giữa HTML và DHTML
HTML [Ngôn ngữ đánh dấu siêu văn bản]DHTML [Ngôn ngữ đánh dấu siêu văn bản động]1. HTML đơn giản là một ngôn ngữ đánh dấu. 1. DHTML không phải là một ngôn ngữ, nhưng nó là một tập hợp các công nghệ phát triển web. 2. Nó được sử dụng để phát triển và tạo các trang web. 2. Nó được sử dụng để tạo và thiết kế các trang web hoặc trang web hoạt hình và tương tác. 3. Ngôn ngữ đánh dấu này tạo ra các trang web tĩnh. 3. Khái niệm này tạo ra các trang web động. 4. Nó không chứa bất kỳ mã kịch bản phía máy chủ nào. 4. Nó có thể chứa mã kịch bản phía máy chủ. 5. Các tập tin của HTML được lưu trữ với. html hoặc. phần mở rộng htm trong một hệ thống. 5. Các tệp của DHTML được lưu trữ với. phần mở rộng dhtm trong một hệ thống. 6. Một trang đơn giản được tạo bởi người dùng mà không sử dụng tập lệnh hoặc kiểu được gọi là trang HTML. 6. Một trang do người dùng tạo bằng các công nghệ HTML, CSS, DOM và JavaScript được gọi là trang DHTML. 7. Ngôn ngữ đánh dấu này không cần kết nối cơ sở dữ liệu. 7. Khái niệm này cần kết nối cơ sở dữ liệu vì nó tương tác với người dùngJavaScript DHTML
JavaScript có thể được bao gồm trong các trang HTML, điều này tạo ra nội dung của trang dưới dạng động. Chúng ta có thể dễ dàng gõ mã JavaScript trong thẻ hoặc của trang HTML. Nếu chúng tôi muốn thêm tệp nguồn bên ngoài của JavaScript, chúng tôi có thể dễ dàng thêm bằng theattribute
Sau đây là các ví dụ khác nhau, mô tả cách sử dụng công nghệ JavaScript với DHTML
Tài liệu. viết phương pháp
Tài liệu. write[] của JavaScript, ghi đầu ra vào một trang web
ví dụ 1. Ví dụ sau chỉ đơn giản sử dụng tài liệu. write[] của JavaScript trong DHTML. Trong ví dụ này, chúng tôi nhập mã JavaScript vào thẻ
Kiểm tra nó ngay bây giờđầu ra
Sự kiện JavaScript và HTML
Mã JavaScript cũng có thể được thực thi khi một số sự kiện xảy ra. Giả sử, người dùng nhấp vào một phần tử HTML trên trang web và sau khi nhấp vào, hàm JavaScript được liên kết với phần tử HTML đó sẽ tự động được gọi. Và, sau đó các câu lệnh trong hàm được thực hiện
ví dụ 1. Ví dụ sau hiển thị ngày và giờ hiện tại với sự kiện JavaScript và HTML [Onclick]. Trong ví dụ này, chúng tôi nhập mã JavaScript vào thẻ
Kiểm tra nó ngay bây giờđầu ra
Giải trình
Trong đoạn mã trên, chúng tôi đã hiển thị ngày và giờ hiện tại với sự trợ giúp của JavaScript trong DHTML. Trong thẻ nội dung, chúng tôi đã sử dụng thẻ liên kết, đề cập đến chính trang đó. Khi bạn nhấp vào liên kết, chức năng của JavaScript được gọi
Trong hàm JavaScript, chúng tôi sử dụng phương thức alert[] trong đó chúng tôi nhập hàm date[]. Hàm date hiển thị ngày giờ trong hộp thoại cảnh báo trên trang web
JavaScript và HTML DOM
Với phiên bản 4 của HTML, mã JavaScript cũng có thể thay đổi nội dung bên trong và các thuộc tính của sự kiện HTML
ví dụ 1. Ví dụ này kiểm tra Điểm của một sinh viên theo tiêu chí tỷ lệ phần trăm bằng JavaScript và HTML DOM. Trong ví dụ này, chúng tôi nhập mã JavaScript vào thẻ
Kiểm tra nó ngay bây giờđầu ra
Giải trình
Trong đoạn mã trên, chúng tôi kiểm tra Điểm của học sinh với sự trợ giúp của JavaScript trong DHTML. Trong mã JavaScript, chúng tôi đã sử dụng phương thức checkGrade[], phương thức này được gọi khi chúng tôi nhấp vào nút. Trong chức năng này, chúng tôi đã lưu trữ giá trị trong biến p. Giá trị được lấy trong trường đầu vào. Khi giá trị được lưu trữ, sau đó chúng tôi chuyển đổi giá trị của p thành số nguyên và lưu trữ giá trị chuyển đổi trong x, vì giá trị trong p là văn bản
Sau đó, chúng tôi sử dụng câu lệnh if-else-if để tìm điểm theo tỷ lệ phần trăm
CSS với JavaScript trong DHTML
Với phiên bản 4 của HTML, mã JavaScript cũng có thể thay đổi kiểu dáng như kích thước, màu sắc và khuôn mặt của phần tử HTML
ví dụ 1. Ví dụ sau thay đổi màu của văn bản
Kiểm tra nó ngay bây giờđầu ra
Giải trình
Trong đoạn mã trên, chúng tôi đã thay đổi màu của văn bản bằng cách sử dụng cú pháp sau
Cú pháp trên được sử dụng trong hàm JavaScript, được thực hiện hoặc gọi khi chúng ta nhấp vào các nút HTML. Các nút HTML khác nhau chỉ định màu của văn bản
DHTML CSS
Chúng ta có thể dễ dàng sử dụng CSS với trang DHTML với sự trợ giúp của JavaScript và HTML DOM. Với sự giúp đỡ của điều này. Phong cách. property=câu lệnh kiểu mới, chúng ta có thể thay đổi kiểu của phần tử HTML hiện được sử dụng. Hoặc, chúng tôi cũng có thể cập nhật kiểu của bất kỳ phần tử HTML cụ thể nào theo tài liệu. getElementById[id]. Phong cách. thuộc tính = câu lệnh new_style
ví dụ 1. Ví dụ sau sử dụng DHTML CSS để thay đổi kiểu của phần tử hiện tại
Kiểm tra nó ngay bây giờđầu ra
Giải trình
Trong đoạn mã trên, chúng tôi đã sử dụng cái này. Phong cách. câu lệnh color='blue', hiển thị màu của văn bản là xanh lam
ví dụ 2. Ví dụ sau sử dụng CSS DHTML để thay đổi kiểu của phần tử HTML
Kiểm tra nó ngay bây giờđầu ra
Giải trình
Trong đoạn mã trên, chúng tôi đã sử dụng phần tử var = tài liệu. getElementById['demo']. Phong cách. màu = màu mới;
Sự kiện DHTML
Một sự kiện được định nghĩa là thay đổi sự xuất hiện của một đối tượng
Bắt buộc phải thêm các sự kiện trong trang DHTML. Không có sự kiện, sẽ không có nội dung động trên trang HTML. Sự kiện là một thuật ngữ trong HTML, kích hoạt các hành động trong trình duyệt web
Giả sử, bất kỳ người dùng nào nhấp vào một phần tử HTML, thì mã JavaScript được liên kết với phần tử đó được thực thi. Trên thực tế, trình xử lý sự kiện bắt các sự kiện do người dùng thực hiện và sau đó thực thi mã
Ví dụ về các sự kiện
- bấm vào một nút
- Gửi biểu mẫu
- Tải hình ảnh hoặc tải trang web, v.v.
Bảng sau mô tả Trình xử lý sự kiện được sử dụng trong DHTML
S. Không. Sự kiệnKhi nó xảy ra1. onabortNó xảy ra khi người dùng hủy tải trang hoặc tệp phương tiện. 2. onblurNó xảy ra khi người dùng rời khỏi một đối tượng HTML. 3. onchangeNó xảy ra khi người dùng thay đổi hoặc cập nhật giá trị của một đối tượng. 4. titleIt xảy ra hoặc kích hoạt khi bất kỳ người dùng nào nhấp vào phần tử HTML. 5. ondblclickNó xảy ra khi người dùng nhấp vào một phần tử HTML hai lần cùng nhau. 6. onfocusNó xảy ra khi người dùng tập trung vào một phần tử HTML. Trình xử lý sự kiện này hoạt động ngược lại với onblur. 7. onkeydownNó kích hoạt khi người dùng nhấn một phím trên thiết bị bàn phím. Trình xử lý sự kiện này hoạt động cho tất cả các phím. 8. onkeypressIt kích hoạt khi người dùng nhấn một phím trên bàn phím. Trình xử lý sự kiện này không được kích hoạt cho tất cả các phím. 9. onkeyupXảy ra khi người dùng nhả phím khỏi bàn phím sau khi nhấn vào một đối tượng hoặc phần tử. 10. onloadIt xảy ra khi một đối tượng được tải hoàn toàn. 11. onmousedownXảy ra khi người dùng nhấn nút chuột trên phần tử HTML. 12. onmousemoveXảy ra khi người dùng di chuyển con trỏ trên một đối tượng HTML. 13. onmouseoverXảy ra khi người dùng di chuyển con trỏ qua một đối tượng HTML. 14. onmouseoutXảy ra hoặc kích hoạt khi con trỏ chuột được di chuyển ra khỏi phần tử HTML. 15. onmouseupXảy ra hoặc kích hoạt khi thả nút chuột trên phần tử HTML. 16. onresetNó được người dùng sử dụng để đặt lại biểu mẫu. 17. onselectNó xảy ra sau khi chọn nội dung hoặc văn bản trên trang web. 18. onsubmitĐược kích hoạt khi người dùng nhấp vào nút sau khi gửi biểu mẫu. 19. onunloadIt được kích hoạt khi người dùng đóng một trang webSau đây là các ví dụ khác nhau sử dụng các trình xử lý sự kiện khác nhau, giúp chúng ta hiểu khái niệm về các sự kiện DHTML
ví dụ 1. Ví dụ này sử dụng trình xử lý sự kiện title, được sử dụng để thay đổi văn bản sau khi nhấp vào
Kiểm tra nó ngay bây giờđầu ra
ví dụ 2. Ví dụ này sử dụng trình xử lý sự kiện onsubmit, đưa ra cảnh báo sau khi nhấp vào nút gửi
Kiểm tra nó ngay bây giờđầu ra
DHTML DOM
DHTML DOM là viết tắt của Dynamic HTML Document Object Model
Nó là một tiêu chuẩn w3c, là một giao diện lập trình tiêu chuẩn cho HTML. Nó chủ yếu được sử dụng để xác định các đối tượng và thuộc tính của tất cả các thành phần trong HTML. Nó cũng định nghĩa các phương thức để truy cập các phần tử HTML
Thí dụ. Chương trình sau đây giúp hiểu khái niệm về DHTML DOM. Ví dụ này thay đổi màu của văn bản và tự động hiển thị văn bản bằng màu đỏ