Ngu ngơ học làm web (17) - Làm quen và debug với lập trình JavaScript

tiếp theo của: Ngu ngơ học làm web (16) - Tổng quan về javascript
---------

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]
-----------