Học làm web (60) - JS căn bản (2)

Tiếp theo của: Học làm web (59) - JS căn bản (1)
----

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: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (61) - JS căn bản (3)