Phân biệt Pseudo-elements và Pseudo-classes

Mình đang dự định ra một series về CSS từ lý thuyết đến thực hành luôn vì mình đọc tài liệu trên mozilla thấy cực hay nếu vừa học vừa chia sẻ ra thì nó vừa giúp mình nhớ bài hiệu quả vừa giúp mọi người đọc tài liệu một cách “smart” nhất có thể. Mọi người có góp ý gì về ý tưởng này của mình thì bình luận phía dưới nhé nếu beat_brick nhiều quá thì không dám hê hê.

Cả 2 khái niệm mình đề cập đến đầu tiêu đè nó thuộc về pseudo-selectors dịch nôm na ra là “bộ chọn giả” tức là các selectors này là trạng thái hoặc thuộc tính của selector đã được quy định trước. Chúng không chọn các phần tử, hay đúng hơn là một phần của các phần tử nhất định hoặc các phần tử chỉ trong các ngữ cảnh nhất định. Chúng có hai loại chính: pseudo-classespseudo-elements. Ok giờ bắt đầu đi sâu hơn vào phân tích nhé:

Pseudo-classes


A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state. For example, you might want to style a link element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Một lớp giả CSS là một từ khóa được thêm vào phía cuối của selector và đứng sau một dấu  (:), nó được dùng để chỉ rõ bạn muốn định dạng cho phần tử được chọn nhưng chỉ khi nó ở trong một trạng thái nhất định. Ví dụ, bạn muốn định dạng một liên kết chỉ khi nó được hover hoặc một checkbox khi nó bị disabled hoặc một phần tử là con thứ nhất của cha trong cây DOM.

keyword_pseudo_classes

Continue reading

Advertisements

Làm việc hiệu quả với dữ liệu thông qua Console.table()

Chào tất cả mọi người, chắc hẳn mọi người đã biết về DevTools của Google rồi phải không? Hôm nay mình sẽ giới thiệu với các bạn về một chức năng cực kỳ hữu ích để quan sát dữ liệu xem tương tác từ server trả về dữ liệu có đúng không, có đủ fields hay không nhé.
Console.table() sẽ giúp bạn lấy dữ liệu ra dưới dạng bảng để quan sát và xem các trường của đối tượng đó 😀 Nào đi xuống ví dụ cho dễ hiểu nhé

Khai báo dữ liệu để thử trước nhé:

let data = [
{
“_id”: “5ba58fdcd4bf0ddbeeec5341”,
“picture”: “http://placehold.it/32×32”,
“age”: 20,
“eyeColor”: “brown”,
“name”: “Mckee Parker”,
“gender”: “male”,
“company”: “KATAKANA”,
“email”: “mckeeparker@katakana.com”,
“phone”: “+1 (912) 526-3879”,
“latitude”: -5.081202,
“longitude”: 169.83552,
“tags”: [
“dolor”,
“occaecat”,
“mollit”,
“labore”,
“dolor”,
“proident”,
“duis”
]
},
{
“_id”: “5ba58fdc20d2114d935e5226”,
“picture”: “http://placehold.it/32×32”,
“age”: 23,
“eyeColor”: “brown”,
“name”: “Pauline Meyer”,
“gender”: “female”,
“company”: “EARTHPURE”,
“email”: “paulinemeyer@earthpure.com”,
“phone”: “+1 (846) 472-2630”,
“latitude”: -79.883639,
“longitude”: -83.842653,
“tags”: [
“do”,
“ex”,
“nostrud”,
“consectetur”,
“aliqua”,
“est”,
“consectetur”
]
},
{
“_id”: “5ba58fdc0f3a4a916c76e6ac”,
“picture”: “http://placehold.it/32×32”,
“age”: 31,
“eyeColor”: “blue”,
“name”: “Janette Bryant”,
“gender”: “female”,
“company”: “KYAGURU”,
“email”: “janettebryant@kyaguru.com”,
“phone”: “+1 (850) 578-2179”,
“latitude”: -70.490236,
“longitude”: 81.918946,
“tags”: [
“cupidatat”,
“veniam”,
“dolor”,
“cillum”,
“Lorem”,
“cillum”,
“qui”
]
}
];

Ok bây giờ sẽ thử 2 thằng console.log()console.table() nhé.

  • Console.log(data) : như bình thường mọi người debug với javascript thôi phải không

Capture

  • Console.table(data)

Capture2

Tada kì diệu chưa? Mọi người biết rồi beat_brick mình nhẹ tay nhé. Hàm này cực có ích để kiểm tra dữ liệu các mảng có các object bên trong, kiểm tra các trường có trả về đủ dữ liệu hay không hoặc để trực quan hơn khi học Javascript chẳng hạn. Cảm ơn mọi người đã theo dõi mọi thông tin về tài liệu các bạn có thể theo dõi thêm tại: https://developers.google.com/web/tools/chrome-devtools/console/console-reference

 

Sự khác nhau của null, 0, undefined, empty trong Javascript?

Trong javascript, chúng ta rất dễ nhầm lẫn giữa các định nghĩa, giá trị, kiểu dữ liệu ở tiêu đề mà mình đưa ra giữa null, 0, undefined, empty. Hôm nay mình sẽ cố gắng giải thích ngắn gọn xúc tích nhất cho mọi người cùng hiểu để không nhầm lẫn nữa nhé, nếu có sai sót gì mọi người có thể bình luận bên dưới bài viết đẻ cùng hoàn thiệt bài viết  nhé.
1. NULL
– Null có nghĩa là giá trị rỗng hoặc giá trị không tồn tại, nó có thể được sử dụng để gán cho một biến như là một đại diện không có giá trị. Tức là biến đõ đã được gán giá trị và giá trị đó là null đại diện cho không có giá trị.
Capture
2. UNDEFINED
– Undefined có nghĩa là không xác định. Trong javascript, khi bạn khai báo một biến nhưng chưa gán giá trị cho nó, giá trị của biến đó sẽ là undefined.
Capture2
3. Giá trị 0
– Biến đó đã có giá trị và giá trị của nó là 0. Giá trị của biến đó đã được xác thực và tồn tại.
Capture3
– Mọi người có thể thấy typeof của nó là number tức là nó có kiểu dữ liệu là số và giá trị của nó là 0 nhé.
4. Giá trị Empty
– Empty là giá trị rỗng là biến đó đã được gán giá trị rỗng vào đó hoặc một mảng không chứa giá trị nào nhưng đã được gán dấu [] thì độ dài của nó là 0 vậy mảng đó là mảng rỗng nhé mọi người, không có phần tử trong mảng.
Capture4
Trên đây là một số chia sẻ của mình mọi người đọc nếu không hiểu hãy bình luận ngay nhé :D. Cảm ơn mọi người đã đọc bài!