Hiển thị thông báo lên console firebug giống Facebook

DOWNLOAD

Xin chào tất cả các bạn, hôm nay mình sẽ hướng dẫn các bạn xây dựng một plugin nho nhỏ cho website của mình, tuy đơn giản nhưng nó vô cùng thú vị và lạ mắt. Đó chính là show thông báo lên console firebug giống như Facebook. Cái này chắc nhiều bạn cũng thấy hoài nhưng không biết Facebook làm như thế nào phải không? Bây giờ mình sẽ hướng dẫn các bạn làm chức năng nay chỉ với vào dòng code. Nào bắt tay vào làm thôi!

1. Cú pháp

Trước tiên, đây là demo show thông báo của Facebook:

Để có thể làm được như thế, các bạn chỉ cần thực hiện cú pháp sau:

var codeCSS = "property: value;";
console.log("%cSometext", codeCSS);

Ví dụ:

var codeCSS = "color: red;";
console.log("%cFreetuts", codeCSS);

hoặc sử dụng cú pháp

cosole.log("%cSometext", "property: value;");
Ví dụ:

console.log("%cFreetuts", "color: red;");
Trong đó:

  • %c: là cú pháp để bắt đầu một text cần style
  • codeCSS: là biến chứa đoạn css để style cho text
  • property: là thuộc tính trong CSS
  • value: là các giá trị tương ứng với các thuộc tính trong CSS

2. Tiến hành thực hiện

Bây giờ các bạn tạo file console.html và dán đoạn code nào vào:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hiển thị thông báo lên console firebug giống Facebook - Freetuts.net</title>
</head>
<body>
  
<script>
  console.log('%cDừng lại!', 'color: red; font-size: 50px; font-family: sans-serif; text-shadow: 1px 1px 5px #000;');
  console.log('%cCó vẻ như bạn đang cố tình hack website của chúng tôi!', 'color: #444; font-size: 25px; font-family: sans-serif;');
  console.log('%cTruy cập http://domain.com/selfxss để biết thêm thông tin chi tiết.', 'color: #444; font-size: 25px; font-family: sans-serif;');
</script>
</body>
</html>
Sau đó các bạn chạy và xem kết quả:

Về cái url, các bạn chỉ cần nhập đúng định dạng là nó tự tạo đường dẫn luôn nhé!

Đoạn code thông báo này các bạn nên đặt ở vị trí đầu tiên trong các dòng code javascript để tránh không hiển thị được khi xảy ra lỗi nào đó.

3. Lời kết

Qua bài này, các bạn có thể thêm một plugin hay hay cho website/blog của mình rồi đấy! Nếu có thắc mắc gì các bạn cứ comment bên dưới hoặc đăng bài trên group kèm theo link hướng dẫn để được hỗ trợ nhanh nhất. Cảm ơn các bạn đã theo dõi, chúc các bạn thành công!

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

-------------------#####-------------------

-------------------#####-------------------

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM