Viết mã, trong khi giải trí, cũng có thể trở nên khá tẻ nhạt.
Có những ngày khi bạn bắt đầu viết mã, nhận ra một cái gì đó không chạy và rất thất vọng. Điều khó chịu hơn nữa là khi mã của bạn chạy, nhưng bạn không thể tìm ra lý do tại sao mã hoạt động không chính xác; khi có điều gì đó trong mã của bạn, bạn cần sửa.
Đó là nơi mà bảng điều khiển JavaScript có thể hữu ích. Bảng điều khiển cho phép bạn theo dõi những gì đang diễn ra trong mã của bạn. Điều này giúp bạn dễ dàng tìm ra lỗi trong mã của mình.
Trong hướng dẫn này, chúng ta sẽ thảo luận về cách sử dụng bảng điều khiển JavaScript. Chúng tôi cũng sẽ cung cấp một ví dụ về ứng dụng sử dụng bảng điều khiển để bạn có thể nhanh chóng sử dụng bảng điều khiển JavaScript.
Bảng điều khiển JavaScript
Nhà phát triển, gặp bảng điều khiển. Bạn sẽ dành nhiều thời gian trong bảng điều khiển trong suốt thời gian làm nhà phát triển, vì vậy đó là điều mà bạn cần tự làm quen.
Bảng điều khiển là nơi bạn có thể hiển thị thông báo khi ứng dụng của bạn đang chạy và là nơi bạn có thể thao tác nội dung của trang web.
Bạn có thể yêu cầu mã của mình ghi nhật ký tin nhắn vào bảng điều khiển và chúng sẽ xuất hiện khi bạn đã hướng dẫn. Bạn cũng có thể sử dụng bảng điều khiển để sửa đổi các biến, giá trị và kiểm tra các giá trị được lưu trữ trong một biến.
Để hiển thị bảng điều khiển của bạn, bạn phải mở các công cụ dành cho nhà phát triển. Trong Chrome, bạn có thể thực hiện việc này bằng Ctrl + Shift + I trên Windows hoặc Cmd + Alt + I trên Mac. Trong Firefox, bạn có thể mở các công cụ dành cho nhà phát triển bằng Command + Option + K.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Khi bạn làm như vậy, một cửa sổ như thế này sẽ mở ra:
Mỗi trình duyệt hiện đại đều có bộ công cụ dành cho nhà phát triển riêng và có một số tính năng chung trên tất cả các trình duyệt. Đối với hướng dẫn này, chúng tôi chỉ tập trung vào bảng điều khiển.
Bắt đầu với Bảng điều khiển
Chúng ta sẽ bắt đầu bằng cách hiển thị thông báo lên bảng điều khiển. Chúng tôi có thể làm điều này mà không cần mở trang web. Tất cả những gì bạn phải làm là mở bảng điều khiển của trình duyệt và viết các câu lệnh JavaScript mà bạn muốn thực thi.
Có ba phương pháp chính mà bạn sẽ sử dụng trong bảng điều khiển:
- console.log ():Hiển thị thông báo tới bảng điều khiển.
- console.warn ():Hiển thị cảnh báo trong bảng điều khiển.
- console.error ():Hiển thị lỗi trong bảng điều khiển.
Trước khi chúng tôi tiếp tục, bạn không nên dán bất kỳ thứ gì vào bảng điều khiển của mình mà không biết mã hoạt động trước. Nhiều trang web hiện đại sẽ cảnh báo bạn chống lại điều này vì có những trò gian lận sử dụng bảng điều khiển để truy cập thông tin nhạy cảm của người dùng.
Với điều đó đã nói, hãy bắt đầu! Để hiển thị thông báo tới bảng điều khiển, chúng ta có thể sử dụng mã này:
console.log("Career Karma is logging stuff to the console!");
Ngay sau khi bạn thực hiện lệnh này, thông tin sau sẽ được trả về:
Bạn cũng có thể hiển thị lỗi và cảnh báo cho bảng điều khiển. Sự khác biệt giữa lỗi và cảnh báo và log() truyền thống là các lỗi và cảnh báo xuất hiện lần lượt bằng màu cam và màu đỏ:
console.warn("Hey, something is going on!");
console.error("Hey, your code has stopped working!");
Mã của chúng tôi trả về:
Sử dụng Bảng điều khiển trong Ứng dụng
Chúng tôi sẽ xây dựng một ứng dụng được mô phỏng theo trình nhấp cookie để giới thiệu đối tượng bảng điều khiển đang hoạt động. Ứng dụng này sẽ hiển thị một bộ đếm cho chúng ta biết hình ảnh một tách trà đã được nhấp bao nhiêu lần. Chúng tôi sẽ ghi lại mọi lần nhấp vào bảng điều khiển để có thể theo dõi khi nào chúng xảy ra.
Phát triển giao diện người dùng
Bước đầu tiên của chúng tôi là phát triển giao diện người dùng của ứng dụng. Tạo một tệp có tên “index.html” và dán vào mã sau:
<!DOCTYPE html>
<html>
<head>
<title>Tea Clicker</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<h2>Tea Clicker</h2>
<p>Click the tea cup as many times as you can!</p>
<img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" />
<p>You have clicked the tea cup <span>0</span> times.</p>
</div>
<script src="./scripts.js"></script>
</body>
</html>
Đoạn mã này hiển thị bốn mục trên trang web của chúng tôi:tiêu đề, mô tả trò chơi, hình ảnh một tách trà và thông báo cho người dùng biết họ đã nhấp vào tách trà bao nhiêu lần.
Hãy cũng thêm một số kiểu vào mã của chúng tôi để làm cho mã trông hấp dẫn. Tạo một tệp có tên “styles.css” và dán vào mã này:
.container {
background-color: lightblue;
margin: auto;
width: 50%;
padding: 40px;
text-align: center;
}
span {
color: yellow;
}
img {
border-radius: 50px;
} Những kiểu này tạo ra một chiếc hộp cho trò chơi máy nhấp trà của chúng tôi, đặt màu của bộ đếm nhấp chuột thành màu vàng và tạo các góc tròn cho hình ảnh của chúng tôi. Đây là trang web của chúng tôi bây giờ trông như thế nào:
Khi bạn nhấp vào tách trà, không có gì xảy ra. Đó là bởi vì chúng tôi chưa thêm mã JavaScript của mình. Hãy viết mã JavaScript cho ứng dụng của chúng ta.
Thêm chức năng bằng JavaScript
Khi người dùng nhấp vào tách trà, bộ đếm sẽ tăng lên một. Trước khi có thể tăng bộ đếm của mình, chúng ta cần chọn các phần tử DOM mà chúng ta sẽ làm việc với:hình ảnh và bộ đếm. DOM, hoặc Mô hình đối tượng tài liệu, các phần tử là các thẻ trên trang web của chúng tôi.
var clickCounter = document.querySelector("span");
var teaCup = document.querySelector("img"); Chúng tôi cũng sẽ thiết lập một biến theo dõi số lần tách trà đã được nhấp:
var clicks = 0;
Bước tiếp theo của chúng ta là tạo một hàm ghi nhật ký khi nút của chúng ta được nhấp và tăng bộ đếm của chúng ta lên từng cái một. Chúng tôi có thể thực hiện việc này bằng đoạn mã sau:
function createClick() {
console.log("The button has been clicked")
clicks += 1;
clickCounter.innerText = clicks;
}
Dòng đầu tiên sẽ in thông báo bảng điều khiển “Nút đã được nhấp” vào bảng điều khiển. Tiếp theo, chúng tôi thêm 1 vào bộ đếm "nhấp chuột" của mình. Sau đó, chúng tôi thay đổi nội dung của văn bản trong thẻ để phản ánh số lần nhấp được cập nhật bằng cách sử dụng phương thức innerText.
Hãy xem trang web của chúng tôi và nhấp vào hình ảnh của tách trà:
Như đã thấy, khi chúng ta nhấp vào tách trà, bộ đếm của chúng ta tăng lên một. Ngoài ra, thông báo mà chúng tôi đã chỉ định trong mã của chúng tôi được in ra bảng điều khiển. Điều này giúp chúng tôi hiểu khi nào người dùng nhấp vào tách trà.
Mặc dù đây là cách triển khai rất cơ bản của console.log() tuyên bố, trong một ứng dụng lớn hơn, bạn có thể thấy rằng việc ghi nhật ký được sử dụng rộng rãi. Phần lớn, nhật ký chỉ được lưu giữ trong các phiên bản phát triển của ứng dụng. Điều này là do người dùng không cần phải xem những gì đang diễn ra ở hậu trường. Như đã nói, ghi nhật ký vẫn là một công cụ cực kỳ có giá trị cho các nhà phát triển.
Kết luận
Bảng điều khiển là một công cụ bạn có thể sử dụng để tìm hiểu cách hoạt động của mã. Bạn có thể sử dụng nó để hiển thị thông báo gỡ lỗi khi mã của bạn chạy hoặc để theo dõi các cảnh báo và lỗi.
Bạn chỉ nên sử dụng câu lệnh ghi nhật ký nếu bạn đang phát triển ứng dụng của mình hoặc nếu bạn muốn tạo thông báo lỗi tùy chỉnh cho mã của mình, bạn có thể sử dụng để gỡ lỗi. Bạn không nên giữ quá nhiều nhật ký trong một ứng dụng web có sẵn trực tuyến.