- Trong HTML, việc hiển thị một nội dung gì đó lên màn hình thật đơn giản, ta chỉ cần gõ trực tiếp nội dung muốn hiển thị là xong [Xem ví dụ]
- Còn đối với JavaScript thì không được hỗ trợ hiển thị dữ liệu trực tiếp giống như trong HTML, mà phải thông qua một phương thức [Xem ví dụ]
- Dưới đây là ba cách cơ bản dùng để hiển thị nội dung lên màn hình trong JavaScript:
- Cách 1: Sử dụng alert[]
- Cách 2: Sử dụng document.write[]
- Cách 3: Sử dụng document.getElementById[].innerHTML
1] Sử dụng alert[]
- Khi sử dụng alert[], nội dung mà bạn muốn hiển thị sẽ được hiển thị bên trong một hộp thoại thông báo [Hãy bấm vào đây nếu bạn chưa biết "hộp thoại thông báo" trông như thế nào]
- Cú pháp:
alert[nội dung muốn hiển thị];Hiển thị câu "Tài liệu học Lập Trình Web" trong một hộp thoại thông báo
2] Sử dụng document.write[]
- Khi sử dụng document.write[], nội dung mà bạn muốn hiển thị sẽ được hiển thị ngay đúng vị trí mà nó được đặt trong trang web.
- Cú pháp:
document.write[nội dung muốn hiển thị];
Tài liệu học HTML
Tài liệu học JavaScript
- Nếu sau khi trang web đã được tải xong mà ta lại sử dụng đến document.write[] thì tất cả nội dung nằm bên trong phần tử sẽ bị thay thế bởi nội dung mà bạn muốn hiển thị.
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
3] Sử dụng document.getElementById[].innerHTML
- Khi sử dụng document.getElementById[].innerHTML, nội dung mà bạn muốn hiển thị sẽ được hiển thị bên trong một phần tử xác định.
- Cú pháp:
document.getElementById["id của phần tử"].innerHTML = nội dung muốn hiển thị;Hiển thị dòng chữ "Tài liệu học CSS" bên trong phần tử có id là skud
- Lưu ý: Sau khi sử dụng document.getElementById[].innerHTML, nội dung mà bạn muốn hiển thị sẽ thay thế tất cả nội dung ban đầu của phần tử.
Tất cả nội dung bên trong phần tử có id là skud sẽ bị thay thế bởi câu "Lập Trình Web"
Tài liệu học HTML
Tài liệu học JavaScript
Tài liệu học CSS
4] Một vài vấn đề trong việc viết nội dung muốn hiển thị
- Nếu nội dung mà bạn muốn hiển thị là một chuỗi ký tự, thì chuỗi ký tự đó phải được đặt bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.
- Nếu nội dung mà bạn muốn hiển thị là một số, thì số đó có thể đặt [hoặc không đặt] bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.
- Nếu chuỗi ký tự được đặt bên trong cặp dấu nháy đơn thì chuỗi đó không được chứa ký tự là dấu nháy đơn [tuy nhiên nó được phép chứa ký tự là dấu nháy kép]
Thông thường để xem một đối tượng có kiểu phức tạp trong javascript, ta thường dùng FireBug hoặc một addon tương tự. Tuy nhiên cách hiển thị các thông tin đối tượng của chúng có thể không theo ý bạn. Trong bài viết này, tôi sẽ tạo hướng dẫn cách để hiển thị một đối tượng javascript dưới dạng các table lồng nhau tùy theo độ phức tạp của chúng. Phương pháp rất đơn giản, bạn chỉ cần sử dụng đệ quy để kiểm tra kiểu đối tượng, lặp và tạo một table tương tự như công cụ LinqPad thực hiện.
Để thực hiện ví dụ, tôi sẽ tạo một đối tượng, bao gồm các property đơn giản, phức tạp và cả kiểu mảng. Phương thức tạo ra đối tượng này như sau:
function createSampleObject[]{
var school = new Object[];
school.Name = "ABC University";
school.Address = {
Country : "Vietnam",
City : "HCM"
};
var student1 = {
Name : "Nguyen A To",
Age : 13,
Address: {
Country : "Vietnam",
City : "Bien Hoa"
}
};
var student2 = {
Name : "Le Thi La",
Age : 14
};
school.students = [ student1 , student2 ]; // array
return school;
}
Đối tượng trả về của phương thức trên khi xem trong FireBug:
Tiếp đến, tôi viết một phương thức tên là dumpTable[] dùng để tạo một table của đối tượng. Phương thức này sẽ phân ra hai trường hợp:
– Nếu đối tượng là mảng, nó sẽ duyệt qua từng phần tử của mảng. Với mỗi phần tử, nó sẽ tạo một dòng mới với cột đầu tiên là chỉ số của phần tử trong mảng. Cột thứ hai chính là giá trị của phần tử được tạo ra bằng cách gọi lại phương thức dumpTable[] để chèn một bảng con [nested table] vào bên trong cột vừa tạo.
– Ngược lại, gọi một phương thức khác để tạo ra các dòng cho table.
function dumpTable[obj]
{
var output = "