Ngu ngơ học làm web (j1) - JS - Chương trình đầu tiên, cách debug Javascript

Tiếp theo của: Ngu ngơ học làm web (j) -
-----

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
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web