Phần tử html nhật ký giao diện điều khiển

Ở những bài trước, chúng ta đã tìm hiểu về kiểu dữ liệu, phạm vi hoạt động của biến trong Javascript (JS) cũng như nền tảng kiến ​​thức mà các bạn cần có ở các bài trước. Trong bài học này, chúng ta sẽ tìm hiểu về Javascript và HTML DOM

DOM được viết tắt của "Mô hình đối tượng tài liệu" (DOM - Mô hình đối tượng tài liệu), giúp chúng ta khi sử dụng Javascript có thể truy cập vào các thành phần trong HTML để lấy dữ liệu cũng như có thể cung cấp về cấu trúc

Vậy làm thế nào để có thể đọc được DOM cũng như các thành phần trong HTML?

(Vui lòng bật F12 trên Chrome/Firefox và chuyển sang Tab Console để xem kết quả)

1. Get the value of HTML tag only

	
	
	


	

		
Hãy đọc tôi đi.
	
	

Kết quả

Hãy đọc tôi đi.
Hãy đọc tôi đi.

• Qua ví dụ trên, để có thể đọc dữ liệu của thẻ “p” bên trong thẻ “div” hay bất kỳ thẻ nào bao quanh nó. Chúng ta cần đặt cho nó một “id” không được gắn kết trong Website. Giống như việc bạn dùng số CMND thì chỉ có 1 mình bạn có số đó mà thôi
• And when me used function “document. getElementById()” và truyền cho nó “id” của vùng cần lấy, các bạn sẽ thấy tôi đã lấy toàn bộ dữ liệu của thẻ “p” mà chúng ta đã định nghĩa là “id”. Và để lấy giá trị bên trong thẻ “p” thì chúng ta chỉ cần truy cập vào phương thức “innerHTML” là có thể lấy được dữ liệu như mong muốn

Ghi chú

• Giăm bông. tài liệu. getElementById(id)
• Argument

1. ID. tên của thẻ HTML đã được ấn định HTML

• Biến mức độ phổ biến. rất nhiều ứng dụng
• thực tế. used very many to could get data as mong muốn trong tài liệu HTML

2. Change the value of HTML tag only

	
	
	


	

		
Hãy đọc tôi đi.
	
	

Kết quả

Tôi đã bị ghi đè.
Tôi đã bị ghi đè.

• Sau khi thực nghiệm ví dụ trên, các bạn đã thấy chuỗi “Hãy đọc tôi đi” đã bị ghi đè thành “Tôi đã bị ghi đè.” thông qua phương thức “innerHTML” mà chúng ta đã dùng ở ví dụ trước đó và gán cho nó giá trị mới giúp thay đổi dữ liệu của thẻ do chúng ta định nghĩa “id” cho nó trong HTML.
• Đồng thời, chuỗi “Tôi đã bị ghi đè” do ảnh hưởng của thẻ HTML và cụ thể ở đây là “” giúp cho chuỗi của chúng ta in đậm bên ngoài màn hình. Nhưng khi chúng ta nhận dữ liệu từ Console thì nó cũng sẽ bao gồm luôn thẻ HTML của chúng ta.

3. Show the computer time

Trong ví dụ này, chúng ta sẽ cùng xem cách hiển thị thời gian bằng JS được thực hiện như thế nào nhé

Kết quả

14:36:46

• Để có thể hiển thị thời gian, chúng ta cần khởi động tạo đối tượng “Date” để có thể sử dụng các phương thức truy xuất thời gian như “getHours(), getMinutes(), getSeconds()…”. Sau đó, chúng ta sẽ tìm thẻ có “id” chỉ định để hiển thị đúng nơi chúng ta cần

Tuy nhiên, khi các bạn chạy thử ví dụ này, các bạn sẽ thấy rằng thời gian chúng ta bắt chỉ là thời gian tĩnh và được chạy khi trang web khởi động, nó không tự động chạy như thời gian trên hệ thống của chúng ta. Vì sao làm vậy để có thể làm được điều đó?

• Kết quả sẽ không khác ví dụ trên, nhưng các bạn sẽ thấy thời gian của chúng ta được cập nhật liên tục theo hệ thống cứ mỗi “1000ms” (1 giây) thông qua hàm “setInterval()” mà chúng ta được học trong . Và hàm này có cách viết rất giống bài học Anonymous Function and Closure mà chúng ta đã học trước đó. Đối số thời gian thứ 2 của hàm “setInterval()” chính là thời gian hàm được gọi lại mỗi lần
• Tuy nhiên, nếu như bạn tinh mắt, bạn có thể sẽ thấy khi chúng ta vừa vào trang web thì chúng ta sẽ thấy nó có một khoảng thời gian bị trì hoãn trước khi trang web có thể cập nhật thời gian cho chúng ta. Đó là bởi vì hàm “setInterval()” chỉ gọi hàm sử dụng để cập nhật thời gian của chúng ta sau một khoảng thời gian mà ta đã ấn định trước đó

Ngoài ra, chúng ta còn có cách ghi khác và cách truyền đối số vào trong hàm khi được gọi bởi hàm “setInterval()”. Nhưng phạm vi của các biến khi được truyền vào hàm chắc chắn sẽ khiến nhiều bạn hoang mang.

Hãy chạy thử và cảm nhận, các bạn sẽ thấy rất bất ngờ đấy. Bởi vì kết quả trả về cho chúng ta sẽ có nội dung như sau

	
	
	


	Hẹn giờ
	mili-giây