Sử dụng lệnh console.log xem kết quả thực hành

Học Javascript : sử dụng phương thức console.log() xem kết quả thực hành7 phút đọc

Trong Javascript có một hàm rất quan trọng mà bạn sẽ phải thường xuyên sử dụng kể cả khi đang học hay sau này khi đã đi làm, đó chính là hàm console.log().

Hàm này có nhiệm vụ in ra kết quả thực hiện câu lệnh của Javascript trong màn hình Console của trình duyệt.Hàm này có ý nghĩa vô cùng to lớn trong việc giúp chúng ta kiểm tra lỗi (debug) cú pháp Javascript.

Không những thế hàm này còn rất hữu ích khi chúng ta muốn thử nghiệm một chương trình hay câu lệnh Javascript nào đó.Với câu lệnh này việc học Javascript của chúng ta sẽ trở nên dễ dàng hơn rất nhiều.

Không để bạn phải chờ đợi lâu nữa.Chúng ta cùng đi tìm hiểu hàm này ngay thôi.

Mở màn hình Console trên trình duyệt web

Do trình duyệt Chrome là trình duyệt phổ biến nhất trên thế giới và những tài liệu hướng dẫn học Javascript đều sử dụng trình duyệt này làm mẫu nên xuyên suốt series “Tự học Javascript cơ bản” này mình sẽ làm ví dụ trên trình duyệt Chrome.

Mình đã có riêng một bài viết rất chi tiết hướng dẫn sử dụng một số chức năng của trình duyệt Chrome trên blog.Bạn có thể tham khảo bài viết đó theo link dưới đây.

hướng dẫn sử dụng Google Developer Tool 5

Để mở màn hình Console trên trình duyệt Chrome trước tiên bạn hãy mở công cụ Google Developer Tool bằng cách nhấn tổ hợp phím tắt :  Ctrl + Shift + I (Window) /  Cmd + Opt + I (Mac).Sau đó bạn di chuyển sang Tab Console như mình khoanh đỏ ở hình ảnh minh họa trên đây.

Cú pháp hàm console.log

  • Method : console.log(giá trị 1, giá trị 2,….);
  • Ý nghĩa : hiển thị thông báo kết quả trong màn hình Console của trình duyệt

Cách sử dụng lệnh console.log

index.html

Cách sử dụng hàm console.log() rất đơn giản, bạn chỉ cần thêm giá trị vào trong hàm này là xong.Như ví dụ trên đây mình muốn in ra câu thông báo Xin chào WDI Blog ! thì mình chỉ cần khai báo nó trong dấu ngoặc kép và đưa vào trong dấu ngoặc của hàm console.log() là ok.

Vì kết quả của hàm console.log() sẽ hiện ra bên trong màn hình Console của trình duyệt nên bạn cần mở file index.html trên trình duyệt trước.Sau đó bạn hãy mở màn hình Console như mình đã hướng dẫn ở trên.

Sử dụng lệnh console.log xem kết quả thực hành 1

Trên đây là kết quả sau khi mình thực hành đoạn code index.html ở trên trình duyệt Chrome.Câu thông báo Xin chào WDI Blog !  giờ đã hiện ra trong màn hình Console.

Một số ví dụ khác về hàm console.log()

Với hàm console.log() bạn có thể in ra một số giá trị như dưới đây.Có một số giá trị có lẽ hiện giờ bạn chưa hiểu nhưng cũng không sao bạn hãy cứ thực hành và xem kết quả.Mục đích của những ví dụ này là để bạn hình dung được những gì mà hàm console.log() có thể làm được.

Trong các bài tới mình sẽ giải thích chi tiết về những giá trị này cho bạn hiểu sau.Bạn hãy thay cú pháp hàm console.log() ở ví dụ trên bằng các hàm dưới đây và xem kết quả nhé.

In ra một đoạn text

 

In ra một dãy số

 

In ra một giá trị Boolean

 

In ra giá trị một biến số 

 

In ra một mảng 

 

In ra một đối tượng

 

Sử dụng lệnh console.log xem kết quả thực hành 2

Trên đây là hình ảnh kết quả sau khi thực hành các hàm console.log() mà mình đã nói.Bạn so sánh xem có giống với kết quả của bạn hay không nhé.

Một số hàm có chức năng tương tự console.log()

Hàm console.info()

In ra câu thông báo tương tự như hàm console.log().

Hàm console.error()

In ra câu thông báo dạng error với nền màu đỏ và dấu error.

Hàm console.warn()

In ra câu thông báo dạng warning với nền màu đỏ và dấu warning.

Hàm console.table()

Đây là hàm mà khi nhập vào một mảng hay đối tượng, nó sẽ trình bày cho bạn dưới dạng bảng, rất giống cách biểu diễn trong cuộc sống hàng ngày.

Hàm console.timeEnd()

Đây là một hàm để đo thời gian chạy của đoạn mã ta đưa vào. Đặt đoạn mã của bạn nằm giữa console.time()console.timeEnd(), sau khi thực hiện đoạn mã, nó sẽ in ra xem để thực hiện đoạn mã đó hết bao nhiêu thời gian.

Sử dụng lệnh console.log xem kết quả thực hành 3

Trên đây là kết quả tại màn hình Console sau khi mình thực hành các hàm trên.

Hàm console.clear()

Xóa toàn bộ kết quả thực hành trước đó trong màn hình Console.

Giờ bạn chỉ cần thêm hàm console.clear() vào dòng cuối cùng sau đó nhấn lưu lại và ra màn hình Console xem kết quả.Lúc này toàn bộ những kết quả thực hiện trước đó đều đã biến mất.Có một cách nhanh hơn để thực hiện việc này đó là sử dụng phím tắt Control + L (Window) / Command + K (Mac).

Gõ lệnh trực tiếp trên màn hình Console

Bạn có biết là bạn có thể thực hành luôn Javascript ngay trên màn hình Console không.

Sử dụng lệnh console.log xem kết quả thực hành 4

Ở cuối hình ảnh trên đây bạn có để ý thấy một dấu > màu xanh dương kèm theo dấu trỏ chuột không.Đây là vị trí bạn có thể nhập code Javascript và thực hành xem kết quả luôn.Sau khi nhập lệnh bạn hãy nhấn nút Enter (Window) / Return (Mac) để thực thi câu lệnh nhé.

Như ví dụ trong hình ảnh trên đây mình có nhập một vài câu lệnh đơn giản và kết quả hiển thị rất chính xác.Nếu có thời gian bạn hãy thử xem nhé.

Kết luận

Cách sử dụng hàm console.log() trong Javascript là kiến thức cơ bản nhưng rất quan trọng và chúng ta sẽ thường xuyên sử dụng đến nó kể từ bây giờ.

Kiến thức trong bài này tuy nhiều nhưng rất đơn giản nên mình nghĩ bạn có thể thành thạo ngay.Javascript là một ngôn ngữ lập trình khó và đòi hỏi phải có sự kiên trì mới có thể làm chủ được nó.Chúc bạn đủ kiên nhẫn để có thể tiếp tục chinh phục Javascript.

Hẹn gặp lại bạn trong bài viết tiếp theo về Javascript.

Bài viết trước

Bài viết sau

 

 

 

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x