HTML động với các ví dụ JavaScript

Chào mừng bạn đến với Dynamic Drive, vị trí số 1 trên mạng để tải xuống DHTML & Javascripts gốc, miễn phí để nâng cao trang web của bạn

• Tập lệnh đổi mới này sử dụng hộp linh hoạt CSS để tạo các thẻ mà khi được nhấp vào sẽ mở rộng để hiển thị lượng thông tin phong phú theo cách nhỏ gọn, dễ quản lý. Hãy nghĩ về nó như một bố cục dựa trên thẻ có thể mở rộng

• Ken Burns là một loại hiệu ứng xoay và thu phóng thường được sử dụng trong sản xuất video để làm cho hình ảnh tĩnh trở nên sống động. Trình chiếu hình ảnh này thêm hiệu ứng Ken Burns tuyệt vời vào từng hình ảnh trong quá trình chuyển đổi, với khả năng hiển thị mô tả tương ứng

• Tập lệnh jQuery này làm cho việc biến bất kỳ văn bản nội tuyến nào trên trang của bạn thành một trích dẫn kéo tự động trở nên đơn giản như chiếc bánh, với hoạt ảnh tùy chọn phát để thu hút sự chú ý nhiều hơn đến chúng. Đó là một kịch bản tuyệt vời để làm nổi bật các mẩu thông tin quan trọng trong một bài báo, ngoài việc thêm phần nổi bật vào các khối nội dung dài

• Đây là một menu thả xuống trang nhã, lấy danh sách UL thông thường và biến nó thành menu mở rộng hoặc menu thả xuống tiêu chuẩn. Sử dụng nó để thay thế menu CHỌN biểu mẫu mặc định, dưới dạng danh sách mục lục mở rộng trên trang hoặc thậm chí là menu điều hướng thông thường

• Tập lệnh này sử dụng biến đổi CSS3 3d để tạo các hộp nội dung hấp dẫn nghiêng dựa trên vị trí của con chuột trong đó. Đó là một hiệu ứng tuyệt vời để áp dụng cho các trang đích, biểu mẫu chọn tham gia hoặc bất kỳ nội dung nào bạn muốn ngay lập tức hướng sự chú ý của người dùng tới

• Cửa sổ bật lên thoát được kích hoạt khi người dùng báo hiệu rằng họ sắp rời khỏi một trang, bằng cách di chuyển chuột vào vị trí hoặc thanh công cụ của trình duyệt. Tập lệnh bật lên có mục đích thoát mạnh mẽ này cho phép bạn thêm một chức năng như vậy vào trang web của mình, với sự hỗ trợ cho hơn 40 hoạt ảnh giới thiệu và hỗ trợ dự phòng trên thiết bị di động

• Tập lệnh jQuery này tự động tạo mục lục từ tất cả các tiêu đề trên trang [H1, H2, TÙY CHỈNH, v.v.], cho phép người xem dễ dàng điều hướng đến các phần chính. Đặt xem có tạo hoạt ảnh cho cơ chế cuộn hay không, giới hạn số lượng ký tự được hiển thị cho mỗi liên kết tiêu đề, v.v.

• Tập lệnh này mở rộng bất kỳ hình ảnh nào để lấp đầy toàn bộ màn hình trình duyệt khi được nhấp vào, với tùy chọn phóng to thêm hình ảnh trên chuột hoặc nhấn. Đó là lý tưởng cho hình ảnh sản phẩm hoặc đơn giản là hình ảnh có độ phân giải cao đòi hỏi một sân khấu lớn hơn

  Ngày nay, nhiều trang web hiển thị thông tin người dùng cụ thể trên trang của họ. Điều đó có nghĩa là đối với những người dùng khác nhau, các trang sẽ trông hoàn toàn khác nhau

  Điều này chỉ khả thi nếu bạn tạo tài liệu HTML theo yêu cầu bằng JavaScript. Để trở thành một nhà phát triển web chuyên nghiệp, bạn phải biết cách làm điều này

  Trong bài viết này, tôi sẽ chỉ cho bạn các phương pháp tốt nhất để tạo các phần tử HTML động và cách bạn có thể thêm các thuộc tính, kiểu CSS và lớp bằng JavaScript

  Đầu tiên, tạo một tệp HTML và JavaScript. Sau đó tải tệp JS vào tài liệu HTML của bạn. Bạn có thể tải nó theo cách cũ ở cuối thẻ

            p.innerText = "Hello World!!";
  // 
  Hello World!!
  
  console.log[p.innerText];
  // "Hello World!!"
          

  9 hoặc theo cách hiện đại ở thẻ

            p.insertAdjacentText['beforebegin', 'Hello World!!'];
  // "Hello World!!"
  // 
  
    
  
  
          

  0 bằng cách sử dụng

            p.insertAdjacentText['beforebegin', 'Hello World!!'];
  // "Hello World!!"
  // 
  
          

  1 hoặc

            p.insertAdjacentText['beforebegin', 'Hello World!!'];
  // "Hello World!!"
  // 
  
          

  2

  Nếu bạn muốn biết thêm về điều này, bạn có thể đọc bài viết này về cách sử dụng async và defer trong thẻ script

  Cách tạo HTML động và CSS trong JavaScript

  Có nhiều cách để tạo HTML động bằng JavaScript. Đây là những phương pháp sau mà bất kỳ ai cũng có thể làm theo để tạo HTML bằng JavaScript đơn giản

  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ùng

  JavaScript 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 dương

  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

  1. bấm vào một nút
  2. Gửi biểu mẫu
  3. 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 web

  Sau đâ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 đỏ

  JavaScript có thể tạo nội dung HTML động như thế nào?

  DHTML bao gồm JavaScript cùng với HTML và CSS để làm cho trang động . Sự kết hợp này làm cho các trang web trở nên động và loại bỏ vấn đề tạo trang tĩnh cho mỗi người dùng. Để tích hợp JavaScript vào HTML, Mô hình đối tượng tài liệu [DOM] được tạo cho tài liệu HTML.

  Ví dụ HTML động là gì?

  Các ví dụ đơn giản về khả năng HTML động bao gồm có màu của tiêu đề văn bản thay đổi khi người dùng di chuột qua nó và cho phép người dùng "kéo và thả" hình ảnh vào . HTML động có thể cho phép các tài liệu Web có giao diện và hoạt động giống như các ứng dụng máy tính để bàn hoặc sản phẩm đa phương tiện. . Dynamic HTML can allow Web documents to look and act like desktop applications or multimedia productions.

  JavaScript có thể đưa văn bản động vào trang HTML không?

  Đây là cách đơn giản nhất để tự động sửa đổi nội dung- sử dụng thuộc tính innerHTML . Bằng cách sử dụng thuộc tính này, được hỗ trợ trong tất cả các trình duyệt hiện đại, chúng tôi có thể gán HTML hoặc văn bản mới cho bất kỳ phần tử ngăn chặn nào [chẳng hạn như

  Thuộc tính JavaScript nào được sử dụng để viết tài liệu HTML động?

  Thuộc tính innerHTML có thể được sử dụng để viết html động trên tài liệu html.