Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Hello các bạn. Chúng ta lại tiếp tục với chuỗi bài viết học Javascript cơ bản. Trong bài viết này, chúng ta sẽ tìm hiểu về JavaScript console thông qua các ví dụ nhé.

console.log() trong JavaScript

Trên các trình duyệt hiện nay đều có bảng điều khiển web (web console) để giúp chúng ta debugging hay gỡ lỗi. Hôm nay chúng ta sẽ tìm hiểu về method console.log() trong Javascript được sử dụng để hiện các thông tin theo ý muốn của chúng ta tới web console.

let number = 29;
console.log(29);   // 29

Trên web console, vd như chrome sẽ hiện lên kết quả là 29. Để truy cập web console của chrome các bạn nhấn F12 hoặc ctrl + shift + J.

Để thao tác nhanh với chrome, mình có tổng hợp một số phím tắt các bạn có thể xem tại bài viết: Phím tắt Chrome cực hay mà Web Developer nên biết.

Sau khi sử dụng phím trên thì chúng ta cùng thao tác trên web console này thử nhé.

console.log ví dụ

Trên web console chúng ta có thể thực hiện viết các đoạn mã Javascript rất tiện luôn 😄.

console.log() Syntax

Cú pháp của console.log() cũng rất đơn giản, các bạn chỉ cần truyền giá trị cần in ra console vào console.log().

console.log(truyền giá trị cần in vào đây);

Ví dụ

  1. In ra console dòng chữ Học JS cơ bản

Chúng ta sẽ truyền string ở trên vào console.log, hoặc các bạn có thể gán dòng chữ trên vào một biến.

Cách 1:
console.log("Học JS cơ bản"); // Chuỗi phải đặt trong "" hoặc ''

Cách 2:
let text = "Học JS cơ bản";
console.log(text);

Output của chúng ta sẽ được như sau:

Học JS cơ bản
  1. Tính tổng và in kết quả
const number1 = 10;
const number2 = 20;

Cách 1:
console.log(number1 + number2); // 30

Cách 2:
const sum = number1 + number2;
console.log(sum); // 30

Như bạn có thể thấy từ các ví dụ trên, method console.log() giúp chúng ta dễ dàng xem giá trị của một biến. Đó là lý do tại sao nó thường được sử dụng để testing/debugging code.

Đối tượng console cũng có nhiều phương thức khác với console.log() vd như console.table(). Mình đã viết một bài giới thiệu về method này. Các bạn có thể đọc bài viết ở đây: console.table() javascript.

🎨 Nếu muốn style console bạn có thể tham khảo bài viết: Style console.log sử dụng CSS bạn đã biết chưa?.


Hy vọng bài viết giúp ích cho các bạn. Chúc các bạn học tốt 😁😁😁

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.