-----
Phần j1. JS
– Chương trình đầu tiên, cách debug Javascript
Sẵn dịp học Ajax, học lại luôn kiến thức nền tảng về
Javascript, học bài bản một tí để khi đi làm đỡ phải mất thời gian đọc lại.
Đọ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ẽ 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 (trong tập tin này sẽ có HTML, CSS và Javascript), trình
duyệt sẽ xử lý mã 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 đó. Với các hàm Javascript thì sẽ được 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>
Học thêm về cách debug Javascript tại đây:
Xem từ phút thứ 16:45 đến hết.
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 17/5/2017
-----------