JavaScript

Các cách hiển thị dữ liệu với JavaScript

Các cách hiển thị dữ liệu với JavaScript
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

JavaScript có thể hiển thị dữ liệu theo 4 cách sau:
  1. Hiển thị dữ liệu vào HTML element, bằng cách sử dụng innerHTML
  2. Hiển thị dữ liệu vào HTML element, bằng cách sử dụng document.write()
  3. Hiển thị thông qua alert box, bằng lệnh window.alert()
  4. Hiển thị vào console của trình duyệt, bằng lệnh console.log()
1. Hiển thị dữ liệu vào HTML element, bằng cách sử dụng innerHTML
1. Hiển thị dữ liệu vào HTML element, bằng cách sử dụng innerHTML

– Để truy cập một phần tử HTML, JavaScript có thể sử dụng phương thức document.getElementById(id).

– Thuộc tính id là một định danh không trùng lặp dùng để xác định, phân biệt các phần tử HTML với nhau. Thuộc tính innerHTML xác định nội dung HTML:

Ví dụ:
[code language=”javascript”]document.getElementById("demo").innerHTML = "Welcome to Minh Hoàng Blog!";[/code] Try it »

Thay đổi thuộc tính innerHTML của một phần tử HTML là một cách phổ biến để hiển thị dữ liệu trong HTML.

2. Hiển thị dữ liệu vào HTML element, bằng cách sử dụng document.write()
2. Hiển thị dữ liệu vào HTML element, bằng cách sử dụng document.write()

Sử dụng document.write() để hiển thị dữ liệu khi debug, test thì rất tiện:

Ví dụ:
[code language=”javascript”]document.write("Welcome to Minh Hoàng Blog!");[/code] Try it »

Sau khi nội dung của trang HTML đã được load đầy đủ, sử dụng document.write() sẽ xóa tất cả nội dung HTML đã load xong đó:

Ví dụ:
[code language=”javascript”]<button type="button" onclick="document.write(‘Welcome to Minh Hoàng Blog!’)">Try it</button>[/code] Try it »

Phương thức document.write() CHỈ nên được sử dụng khi debug, test.

3. Hiển thị thông qua alert box, bằng lệnh window.alert()
3. Hiển thị thông qua alert box, bằng lệnh window.alert()

Chúng ta có thể sử dụng một alert box để hiển thị dữ liệu:

Ví dụ:
[code language=”javascript”]window.alert("Welcome to Minh Hoàng Blog!");[/code] Try it »
4. Hiển thị vào console của trình duyệt, bằng lệnh console.log()
4. Hiển thị vào console của trình duyệt, bằng lệnh console.log()

Để debug, chúng ta có thể sử dụng phương thức console.log() để hiển thị dữ liệu.

Ví dụ:
[code language=”javascript”]console.log("Welcome to Minh Hoàng Blog!");[/code] Try it »
Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp bạn đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Translate »