Trang HTML động sử dụng JavaScript

JavaScript được tạo thành từ nhiều Đối tượng tích hợp được sử dụng cho nhiều tác vụ. Ví dụ, bài tập Toán và Nối đã sử dụng đối tượng Math

Một đối tượng JavaScript khác được xây dựng trong đối tượng được gọi là đối tượng tài liệu. Để JavaScript có thể hoạt động và thao tác với HTML, nó cần phải có một số cách để truy cập và khám phá trang HTML mà nó được đính kèm. Mô hình đối tượng tài liệu cung cấp một khung mà JavaScript có thể điều hướng qua, chọn, thay thế và thêm vào các khu vực hiện có của trang HTML

ký hiệu dấu chấm

Ký hiệu dấu chấm cho phép các đối tượng JavaScript hoạt động. Dấu chấm trong câu lệnh JavaScript có nghĩa là phần tử bên phải dấu chấm là thuộc tính hoặc phương thức của đối tượng ở bên trái dấu chấm

//object.method
document.write("hello");

var myName = "Andrew";
//object.property
myName.length;

Ký hiệu dấu chấm là phương pháp chính để điều hướng và ảnh hưởng đến DOM (và cả trang HTML). Đối tượng tài liệu là tham chiếu mà JavaScript sử dụng để chỉ toàn bộ tài liệu HTML mà nó được đính kèm. Mọi câu lệnh JavaScript tham chiếu hoặc thay đổi một phần của tài liệu HTML cần bắt đầu bằng tham chiếu đến đối tượng tài liệu

Trong đối tượng tài liệu là một số đối tượng con đề cập đến các phần của tài liệu HTML. Ví dụ, tài liệu. hình ảnh giữ một tham chiếu đến tất cả các hình ảnh có trong trang HTML cụ thể đó. Cũng đã được đề cập là tài liệu phương pháp. write() có thể được sử dụng để chèn văn bản vào trang HTML. Các khu vực khác của đối tượng tài liệu sẽ được đề cập sau trong khóa học này

Ví dụ trực tiếp

Sử dụng mô hình đối tượng tài liệu, JavaScript có thể viết HTML vào một trang web cho phép các trang được tạo với thông tin động chẳng hạn như kết quả tính toán hoặc phản hồi đối với đầu vào của người dùng, điều không thể thực hiện được khi chỉ sử dụng HTML

Ví dụ bên dưới sử dụng đối tượng ngày trong JavaScript để cập nhật trang này với ngày và giờ hiện tại

Ví dụ trực tiếp

Tài liệu. viết(); . Phương pháp này hiện hoạt động trên tất cả các nền tảng trình duyệt (tại một thời điểm nó không hoạt động) khi được biên dịch cùng với trang (như ví dụ này)

Nếu trang yêu cầu một phần nội dung của nó được cập nhật để đáp ứng với điều gì đó mà người dùng thực hiện thì kỹ thuật này sẽ không đủ. Sử dụng tài liệu. viết();

Có một số phương pháp để thay đổi nội dung của trang sau khi trang đã được tải và hiển thị cho người dùng, phương pháp đơn giản và linh hoạt nhất là InternalHTML

bên trongHTML

Đây là một cách rất linh hoạt để lập trình viên truy cập và thay đổi các phần của trang HTML bằng JavaScript. InternalHTML được Microsoft đi tiên phong vào cuối những năm 1990 và mặc dù chưa bao giờ được chính thức đưa vào đặc tả JavaScript nhưng nó đã được chấp nhận và đưa vào TẤT CẢ các nền tảng trình duyệt chính (chắc chắn là tất cả những nền tảng mà bạn cần quan tâm)

Khi InternalHTML được sử dụng ở bên trái của phép gán (hãy nhớ toán tử gán là = ) thì bên phải của toán tử gán được sử dụng để thay thế vùng đã chỉ định của trang HTML. Ví dụ

pageElement.innerHTML = "
Hello World
"

sẽ dẫn đến nội dung của pageElement bị thay thế bằng một đoạn chứa cụm từ "Xin chào thế giới"

Khi được sử dụng ở bên phải của một nhiệm vụ, InternalHTML trả về nội dung của khu vực cụ thể của trang HTML để JavaScript có thể kiểm tra hoặc thay đổi nó. Ví dụ

// document.firstChild = the DTD (which has no content of it's own)
// nextSibling of the DTD =  (which contains the HTML page) 
var wholeHTMLPage = document.firstChild.nextSibling.innerHTML;

Khi InternalHTML được sử dụng kết hợp với một phương thức toàn cầu khác, getElementById(), kết quả là hoàn toàn dễ dàng truy cập vào ít nhiều toàn bộ trang HTML

Trước khi chúng ta thấy InternalHTML hoạt động, hãy xem nhanh getElementById()

getElementById()

Phương pháp này cho phép JavaScript dễ dàng truy cập vào bất kỳ phần nào của trang HTML trong đó một ID cụ thể đã được sử dụng. Ví dụ

document.getElementById("header");

Khi thẻ có ID cụ thể được yêu cầu đã được trả lại, thẻ có thể được gán cho một biến, như thế này

var headerBlock = document.getElementById("header");

hoặc thao tác trực tiếp, như thế này

document.getElementById("header").innerHTML = "
Hello World
";

Để tất cả chúng cùng nhau

Trong ví dụ sau, trang tải và đợi người dùng nhấp vào nút có nhãn "Nhập tên của bạn". Khi họ thực hiện một chức năng JavaScript có tên là modifyExample được chạy bởi trình xử lý sự kiện onClick() được đính kèm với nút. Hàm modifyExample mở rộng hộp nhắc để thu thập tên người dùng. Sau đó, hàm sử dụng getElementById() để tham chiếu phần của trang HTML mà nó sẽ sửa đổi. Cuối cùng, hàm thay đổi nội dung của khối HTML đã chỉ định để phản ánh bất kỳ nội dung nào mà người dùng đã nhập vào hộp nhắc

Ví dụ trực tiếp

Tên của bạn sẽ xuất hiện ở đây

Tất nhiên, khi bạn thực hành nhiều hơn một chút với JavaScript, bạn có thể viết tất cả những điều trên dưới dạng một dòng trực tiếp vào trình xử lý sự kiện trong thẻ. Khi làm điều này, tập lệnh không còn cần phải được gói trong một chức năng. ;)

Làm cách nào để viết HTML động bằng JavaScript?

Làm cách nào để tạo một trang web động trong JavaScript?

JavaScript có được sử dụng cho các trang Web động không?