----
2.2.3 Sử dụng console.log()
Các trình duyệt web hiện đại, Node.js, cũng như các môi trường
phát triển JavaScript khác (mà có hỗ trợ việc ghi dữ liệu ra console) đều đang
sử dụng rất nhiều các phương thức để ghi log (ghi vết), trong đó phổ biến nhất
là phương thức console.log().
Trong các trình duyệt, phương thức console.log() chủ yếu được
sử dụng trong việc tìm và sửa lỗi (debug).
Trong cửa sổ console của JavaScript (Developer tool), gõ lệnh
sau và gõ Enter,
console.log(‘Hello wordl’);
Kết quả của lệnh trên sẽ ghi ra console thông tin sau :
Ở ví dụ trên, hàm console.log() đã in ra dòng chữ “hello
world” và trả về giá trị undefined. Lý do là hàm console.log() không trả về một
giá trị tường minh.
Quan sát giá trị của
biến
Có thể sử dụng console.log() để quan sát giá trị của biến
thuộc kiểu bất kì. Chỉ việc đưa tên biến vào làm đối số của hàm console.log().
Ví dụ, nhập vào cửa sổ console đoạn lệnh sau, (bấm shift +
Enter để xuống hàng), bấm Enter để thực thi đoạn mã,
var foo='bar';
console.log(foo);
Kết quả của đoạn mã trên sẽ ghi ra console thông tin sau:
Nếu muốn xuất nhiều giá trị, đơn giản chỉ việc sử dụng dấu
phẩy để ngăn cách giữa các giá trị.
Ví dụ,
var thisVar = 'first value';
var thatVar = 'second value';
console.log('thisVar:', thisVar, 'thatVar:',thatVar);
Kết quả của đoạn mã trên sẽ ghi ra console thông tin sau:
Khi xuất kết quả, giữa các giá trị sẽ được tự động thêm một
khoảng trắng.
Placeholders
Có thể xuất ra console theo kiểu “đặt chỗ trước”
(placeholders).
Ví dụ,
var greet = 'Hello';
var who = 'World';
console.log('%s, %s', greet, who);
[Kết quả xuất ra cửa sổ console là]
Hello, World
Xuất một đối tượng
Có thể sử dụng console.log() để xuất một đối tượng, cách này
thường được sử dụng để xuất một kết quả trả về dưới dạng JSON của một lời gọi
API.
Ví dụ,
console.log({
'Email': '',
'Groups': {},
'Id': 33,
'IsHiddenInUI': false,
'IsSiteAdmin': false,
'LoginName': 'i:0#.w|virtualdomain\\user2',
'PrincipalType': 1,
'Title': 'user2'
});
[Kết quả]
Xuất phần tử HTML
Có thể sử dụng console.log() để xuất phần tử bất kì có trong
cây DOM.
Ví dụ,
Đọc thêm về chủ đề Console để tìm hiểu các khả năng khác của
nó.
2.2.4 Sử dụng DOM API
Có thể sử dụng thuộc tính textContent để xuất nội dung văn bản ra giao diện trang web. Tương
tự chức năng của thuộc tính innerHTML.
Ví dụ,
[HTML]
<p id="paragraph"></p>
Sử dụng đoạn mã JS sau để chèn phần nội dung cho phần tử p,
và nội dung này sẽ được hiển thị trên giao diện trình duyệt.
[JS]
document.getElementById('paragraph').textContent = 'Hello World';
Ví dụ sau sẽ tạo thêm một phần tử (p), gán nội dung cho phần
tử p, và gắn phần tử p vào cuối trang web,
[HTML]
<body>
<h1>Thêm
phần tử vào trang web</h1>
</body>
[JS]
var element = document.createElement('p');
element.textContent = 'Hello World';
document.body.appendChild(element);
2.2.5 Sử dụng window.alert()
Phương thức window.alert() được sử dụng để xuất nội dung ra
cửa sổ trình duyệt dưới dạng một cửa sổ thông báo. Đối số của hàm chính là nội
dung cần xuất.
Vì window là đối tượng kiểu toàn cục (global object), nên có
thể sử dụng ở dạng viết rút gọn là alert(). Hai cách viết sau là tương đương,
window.alert(message);
alert(message);
Ví dụ,
window.alert('hello');
alert('hello');
Lưu ý: vì alert() hoạt động theo kiểu hộp thoại modal (modal
prompt), nên đoạn mã gọi phương thức này sẽ bị dừng để đợi tương tác từ người
dùng. Hộp thoại kiểu modal là hộp thoại do chương trình chính gọi ra, và nó phải
được đóng trước khi có thể thực thi các lệnh tiếp theo của chương trình, mục
đích để đảm bảo chương trình không bị rơi vào trạng thái mất kiểm soát.
Ví dụ,
alert('Dừng!');
console.log('Alert đã được đóng!');
Tuy nhiên, trong đặc tả thực tế vẫn cho phép các đoạn mã được
kích hoạt bởi các sự kiện khác thực thi ngay cả khi hộp thoại modal chưa được
đóng.
Trong thực tế, phương thức alert() không được khuyến khích sử
dụng vì nó ảnh hưởng không tốt đến trải nghiệm người dùng. Phương thức alert()
chỉ nên sử dụng trong quá trình tìm và sửa lỗi.
Trình duyệt Chrome 46.0 không cho phép chạy phương thức
alert() trong phần tử iframe. Ví dụ,
<body>
<iframe
src="" frameborder="0">
<script>
alert('inside iframe');
</script>
</iframe>
<script>
alert('outside
iframe');
</script>
</body>
2.2.6 Sử dụng window.prompt()
Cách đơn giản nhất để lấy được dữ liệu do người dùng nhập
vào là sử dụng phương thức window.prompt().
Cú pháp,
window.prompt(text,
[default]);
– text: nội dung
được hiển thị trong hộp thoại
– default: giá trị
mặc định cho ô nhập liệu
Ví dụ,
var age = window.prompt('How old are you?');
console.log(age); //in giá trị do người dùng nhập vào
[Kết quả]
Nếu người dùng nhập một giá trị, rồi bấm nút OK, giá trị sẽ
được trả về. Ngược lại, nếu người dùng bấm Cancel, giá trị null sẽ được trả về.
Giá trị trả về của phương thức prompt() luôn là kiểu chuỗi
(string), trừ khi người dùng bấm nút Cancel, giá trị trả về sẽ là null. Với
trình duyệt Safari, khi người dùng bấm nút Cancel, giá trị trả về sẽ là một chuỗi
rỗng (empty string). Từ giá trị trả về kiểu chuỗi, lập trình viên có thể chuyển
qua các dạng dữ liệu khác để xử lý.
Chú ý:
– Trong khi cửa sổ prompt đang hiển thị, người dùng không thể
truy cập các vùng khác của trang web, vì cửa sổ prompt thuộc kiểu modal.
– Từ Chrome 46.0, phần tử iframe không cho phép chạy phương
thức prompt, trừ trường hợp thuộc tính sandbox được thiết lập là cho phép modal
được chạy.
Cập nhật [28/8/2018]
-----------
Xem thêm: Học làm web (61) - JS căn bản (3)