---------
Phần 17.
Làm quen và debug với lập trình JavaScript
Đọc và làm theo hướng dẫn của tác giả Thehalfheart
(freetuts.net).
Bài 1: JavaScript là gì? Viết ứng dụng JavaScript đầu tiên
Để ý làm các bài tập ở cuối mỗi bài viết.
Ghi lại một số ý:
- Trình duyệt web sẽ thông dịch/biên dịch và thực thi mã của JavaScript
- Mã của JavaScript được trình duyệt nhận ra bởi thẻ
<script></script>
- Mã của JavaScript sẽ nằm lẫn lộn với mã HTML và CSS, khi
xử lý tập tin .html (giả sử trong tập tin này có HTML, CSS và JavaScript),
trình duyệt sẽ xử lý mã HTML, CSS theo thứ tự từ trên xuống dưới, từ trái qua phải, gặp
cái gì xử lý cái đó, sau đó đến các đoạn mã JavaScript. Riêng với các hàm
JavaScript thì sẽ được trình duyệt biên dịch rồi để đó, chờ có lệnh gọi hàm thì
các đoạn mã ở trong hàm sẽ được thực thi.
- Có ba chỗ để đặt mã JavaScript khi làm web:
+ internal: đặt trong trang .html, bất kì
chỗ nào
+ external: đặt
ngoài trang .html, trong tập tin có đuôi .js, sau đó gọi tập tin này ở trong
trang .html
+ inline: đặt
trong thẻ HTML
Ví dụ một chương trình JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
</head>
<body>
Nhập nội dung:
<input type="text" id="text"><br>
<button
id="click-me">Xuất thông báo</button>
<script>
var
bt = document.getElementById('click-me');
bt.addEventListener('click',
function() {
var
content = document.getElementById('text').value;
alert(content);
});
</script>
</body>
</html>
Giải thích đoạn mã trên:
Tạo một ô nhập liệu có id=“text” và một nút bấm có id=“click-me”
Nhập nội dung: <input
type="text" id="text"><br>
<button
id="click-me">Xuất thông báo</button>
Khai báo biến bt, biến này tham chiếu tới nút có id=“click-me”,
nút này là một element của HTML (một nút của HTML DOM), nếu nút này không tồn
tại, bt sẽ có giá trị là null; document là một đối tượng của JavaScript nó tham
chiếu đến nút gốc của HTML DOM.
var bt =
document.getElementById('click-me');
Thực hiện gắn vào biến bt một phương thức, để lắng nghe xem
có sự kiện nào đó xảy ra hay không? Và khi sự kiện xảy ra thì thực hiện hành
động tương ứng.
bt.addEventListener();
Sự kiện được lắng nghe ở đây là động tác click chuột ‘click’.
Khi có sự kiện ‘click’ xảy ra thì thực hiện nội dung trong hàm function() {};
Function(){
// lấy nội
dung của ô nhập liệu có id= “text”
// gán vào
biến content
var content =
document.getElementById('text').value;
// và xuất ra màn hình
alert(content);
}
Học thêm về cách tìm và sửa lỗi (debug) JavaScript tại đây:
Xem từ phút thứ 16:45 đến hết.
Xem thêm clip tiếng Việt: https://www.youtube.com/watch?v=3kTnW2tAnz8
Ghi lại một số ý liên quan đến debug:
- Mở trang web cần debug
- Mở cửa sổ Developer tools (hoặc F12)
- Tại cửa sổ Developer tools, chọn tab Console để xem thông
báo lỗi liên quan đến JavaScript (nếu có)
- Tại cửa sổ Developer tools, chọn tab Sources
- Tại khung cửa sổ bên trái (Sources), tìm và mở tập tin
chứa mã JavaScript
- Tại khung cửa sổ ở giữa (chứa mã JavaScript), bấm vào chỉ
số hàng để đánh dấu một hoặc nhiều điểm dừng (breakpoint) để xem quá trình chạy
của đoạn mã. Hàng nào được đánh dấu sẽ có màu xanh tại chỉ số dòng, và sẽ xuất
hiện ở khung cửa sổ bên phải, mục Breakpoints.
- Refesh trang web và chạy các thao tác trên trang web để
kích hoạt các đoạn mã JavaScript.
- Sử dụng các nút Resume, Step over, Step into, Step out.
Tại mục Watch, bấm vào dấu +, nhập tên biến để quan sát nội dung, các thuộc
tính của biến.
- Học thêm các chức năng khác liên quan đến debug JavaScript.
Ví dụ, về viết JavaScript trong thẻ HTML:
<button id="click-me"
onclick="alert('hi')">Xuất thông báo</button>
Ví dụ, về gọi JavaScript từ tập tin bên ngoài:
[vidu.js]
var bt = document.getElementById('click-me');
bt.addEventListener('click',
function() {
var
content = document.getElementById('text').value;
alert(content);
});
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
</head>
<body>
Nhập nội dung:
<input type="text" id="text"><br>
<button
id="click-me">Xuất thông báo</button>
<script src="vidu.js"></script>
</body>
</html>
-----------
Cập nhật [3/9/2020]
-----------