Làm thế nào để viết HTML động?
|
“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 Show
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 độngDHTML bao gồm bốn thành phần hoặc ngôn ngữ sau
HTML4. 0HTML 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 CSSCSS 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 JavaScriptJavaScript 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 DOMDOM 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 DHTMLSau đây là cách sử dụng DHTML (HTML động)
Đặc điểm của DHTMLSau đây là các đặc điểm hoặc tính năng khác nhau của DHTML (HTML động)
Sự khác biệt giữa HTML và DHTMLBả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 DHTMLJavaScript 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ápTà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à HTMLMã 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 DOMVớ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 DHTMLVớ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 CSSChú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 DHTMLMộ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ả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. onclickIt 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 onclick, đượ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 DOMDHTML 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 đỏ Ví dụ về HTML động là gì?DHTML là viết tắt của Dynamic Hypertext Markup language i. e. , HTML động. HTML động không phải là ngôn ngữ lập trình hay đánh dấu mà là thuật ngữ kết hợp các tính năng của nhiều công nghệ phát triển web khác nhau để tạo các trang web động và tương tác .
Làm cách nào để đặt giá trị động trong HTML?Thuật toán . Bước 1 - Xác định khóa/s được sử dụng để tạo đối tượng Bước 2 - Tạo một đối tượng và sử dụng các phím được xác định ở trên Bước 3 - Áp dụng JSON. stringify() trên đối tượng đã tạo ở trên để hiển thị đối tượng HTML động nghĩa là gì?HTML động là thuật ngữ chung cho sự kết hợp của các thẻ Ngôn ngữ đánh dấu siêu văn bản (HTML) và các tùy chọn có thể làm cho các trang Web trở nên sinh động và tương tác hơn so với các phiên bản HTML trước đó. Much of dynamic HTML is specified in HTML 4.0.
HTML có thể tạo trang web động không?HTML động có thể hoạt động với HTML, JavaScript, XML và CSS để tạo các trang web động và tương tác . HTML động cho phép các nhà phát triển tạo hiệu ứng trên một trang mà nếu không thì không thể. Ngoài ra, nó cho phép các lập trình viên sử dụng kết hợp các công nghệ tạo trang web và hoạt hình. |
