Viết mã, tuy thú vị, nhưng cũng có thể trở nên nhàm chán.
Có những ngày bạn bắt đầu viết mã, nhận ra thứ gì đó không chạy, và rất bực bội. Thậm chí còn khó chịu hơn khi mã chạy, nhưng bạn không thể tìm ra tại sao nó không hoạt động đúng; khi có thứ gì đó trong mã bạn cần sửa.
Đó là nơi console JavaScript hữu ích. Console cho phép bạn theo dõi điều gì đang xảy ra trong mã. Điều này giúp dễ dàng tìm ra lỗi trong mã.
Trong hướng dẫn này, chúng ta sẽ thảo luận cách sử dụng console JavaScript. Chúng ta cũng cung cấp ví dụ ứng dụng dùng console để bạn nhanh chóng thành thạo console JavaScript.
Console JavaScript
Nhà phát triển, gặp console. Bạn sẽ dành nhiều thời gian trong console trong thời gian làm nhà phát triển, nên nó là thứ bạn cần làm quen.
Console là nơi bạn có thể hiển thị thông báo khi ứng dụng đang chạy và nơi bạn có thể thao tác nội dung trang web.
Bạn có thể bảo mã ghi thông báo ra console và chúng sẽ xuất hiện khi bạn yêu cầu. Bạn cũng có thể dùng console để sửa đổi biến, giá trị và kiểm tra giá trị lưu trong biến.
Để hiển thị console, bạn phải mở công cụ phát triển. Trong Chrome, làm bằng Ctrl + Shift + I trên Windows hoặc Cmd + Alt + I trên Mac. Trong Firefox, mở công cụ phát triển bằng Command + Option + K.
Khi làm vậy, cửa sổ như sau sẽ mở:
Mọi trình duyệt hiện đại đều có bộ công cụ phát triển riêng và có nhiều tính năng chung. Hướng dẫn này chỉ tập trung vào console.
Bắt đầu với Console
Chúng ta bắt đầu bằng hiển thị thông báo ra console. Chúng ta có thể làm mà không cần trang web mở. Chỉ cần mở console trình duyệt và viết câu lệnh JavaScript bạn muốn thực thi.
Có ba phương thức chính bạn sẽ dùng trong console:
- console.log(): Hiển thị thông báo ra console.
- console.warn(): Hiển thị cảnh báo trong console.
- console.error(): Hiển thị lỗi trong console.
Trước khi tiếp tục, bạn không nên dán bất cứ thứ gì vào console mà không biết mã đó làm gì. Nhiều trang hiện đại cảnh báo chống lại việc này vì có lừa đảo dùng console truy cập thông tin nhạy cảm của người dùng.
Đã nói vậy, hãy bắt đầu! Để hiển thị thông báo ra console, dùng mã:
console.log("Career Karma đang ghi log vào console!");
Ngay khi thực thi lệnh, sau đây trả về:
Bạn cũng có thể hiển thị lỗi và cảnh báo ra console. Khác biệt giữa lỗi/cảnh báo và câu lệnh log() truyền thống là lỗi và cảnh báo xuất hiện màu cam và đỏ:
console.warn("Này, có chuyện gì đang xảy ra!"); console.error("Này, mã của bạn đã ngừng hoạt động!");
Mã trả về:
Sử dụng Console trong Ứng dụng
Chúng ta sẽ xây dựng app mô phỏng cookie clicker để trình diễn đối tượng console. App này hiển thị bộ đếm cho thấy ảnh cốc trà được nhấp bao nhiêu lần. Chúng ta log mỗi lần nhấp ra console để theo dõi khi nào xảy ra.
Phát triển Front-End
Bước đầu phát triển front-end ứng dụng. Tạo file "index.html" và dán mã:
<!DOCTYPE html> <html> <head> <title>Tea Clicker</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="container"> <h2>Tea Clicker</h2> <p>Nhấp vào cốc trà nhiều lần nhất có thể!</p> <img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" /> <p>Bạn đã nhấp cốc trà <span>0</span> lần.</p> </div> <script src="./scripts.js"></script> </body> </html>
Mã hiển thị bốn mục trên trang: tiêu đề, mô tả game, ảnh cốc trà và thông báo cho người dùng biết họ nhấp cốc trà bao nhiêu lần.
Hãy thêm kiểu dáng để đẹp hơn. Tạo file "styles.css" và dán mã:
.container { background-color: lightblue; margin: auto; width: 50%; padding: 40px; text-align: center; } span { color: yellow; } img { border-radius: 50px; }
Kiểu dáng tạo hộp cho game, đặt màu bộ đếm nhấp vàng và bo góc ảnh. Trang web hiện trông như sau:
Khi nhấp cốc trà, không xảy ra gì. Đó là vì chưa thêm mã JavaScript. Hãy viết mã JavaScript cho ứng dụng.
Thêm chức năng bằng JavaScript
Khi người dùng nhấp cốc trà, bộ đếm tăng 1. Trước khi tăng bộ đếm, chọn phần tử DOM chúng ta làm việc: ảnh và bộ đếm. DOM (Document Object Model) là các thẻ trên trang web.
var clickCounter = document.querySelector("span"); var teaCup = document.querySelector("img");
Chúng ta cũng thiết lập biến theo dõi số lần cốc trà được nhấp:
var clicks = 0;
Bước tiếp theo tạo hàm log khi nút được nhấp và tăng bộ đếm 1. Làm bằng mã:
function createClick() { console.log("Nút đã được nhấp") clicks += 1; clickCounter.innerText = clicks; }
Dòng đầu in thông báo console "Nút đã được nhấp". Tiếp theo, cộng 1 vào bộ đếm "clicks". Sau đó thay đổi nội dung văn bản trong thẻ <span> phản ánh số nhấp cập nhật dùng phương thức innerText.
Xem trang web và nhấp ảnh cốc trà:
Như thấy, khi nhấp cốc trà bộ đếm tăng 1. Thêm vào đó, thông báo chỉ định trong mã in ra console. Điều này giúp hiểu khi nào người dùng nhấp cốc trà.
Mặc dù đây là triển khai cơ bản của console.log(), trong ứng dụng lớn bạn có thể thấy logging dùng rộng rãi. Phần lớn, log chỉ giữ ở phiên bản phát triển. Vì người dùng không cần thấy điều gì xảy ra hậu trường. Tuy nhiên, logging vẫn công cụ vô giá cho nhà phát triển.
Kết luận
Console là công cụ bạn dùng để học cách mã hoạt động. Bạn dùng để hiển thị thông báo gỡ lỗi khi mã chạy hoặc theo dõi cảnh báo và lỗi.
Bạn chỉ nên dùng câu lệnh logging nếu đang phát triển ứng dụng, hoặc muốn tạo thông báo lỗi tùy chỉnh cho mã để gỡ lỗi. Bạn không nên giữ quá nhiều log trong ứng dụng web trực tuyến.