1. DOM trong HTML là gì ?

DOM (The Document Object Model) là một giao diện lập trình cho các document HTML. Nó đại diện cho trang để các chương trình có thể thay đổi cấu trúc, kiểu và nội dung của tài liệu. DOM đại diện cho tài liệu dưới dạng các nút và đối tượng.

2. Điểm khác nhau của thẻ <span>  và <div> là gì?

span là phần tử nội tuyến (inline).

div là phần tử khối (block).

Bạn nên dùng các thẻ div để chứa (bọc) các phần của tài liệu, còn các thẻ span để chứa các phần nhỏ của văn bản, hình ảnh, v…v…

Lưu ý: Không được đặt một phần tử cấp khối trong một phần tử nội tuyến.

Ví dụ:

<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>

3. Các thẻ Meta là gì?

Thẻ meta là các đoạn văn bản mô tả nội dung của trang; các thẻ meta không xuất hiện trên chính trang mà chỉ xuất hiện trong mã nguồn của trang.

Các thẻ meta về cơ bản chính là các mô tả nội dung nhỏ giúp cho các công cụ tìm kiếm biết nội dung của một trang web.

Ví dụ:

<head>
<meta charset="UTF-8">
<meta name="description" content="Description search engines use">
<meta name="keywords" content="Keywords, of, your, page">
<meta name="author" content="Me">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

4. Điểm khác nhau của ID selector và Class selector trong CSS?

ID là duy nhất. Mỗi phần tử chỉ có thể có một ID và trang HTML chỉ có thể có một phần tử có ID đó

Class thì ngược lại. Bạn có thể sử dụng cùng một class trên nhiều phần tử và một phần tử có thể có nhiều class.

Mọi thông tin tạo kiểu cần được áp dụng cho nhiều đối tượng trên một trang nên được thực hiện với một class.

5. Làm thế nào để áp dụng các quy tắc CSS cụ thể cho một media?

Quy tắc @media được sử dụng trong các truy vấn media để áp dụng các kiểu khác nhau cho các loại/ thiết bị media khác nhau.

Ví dụ:

/* Change the background color of the any <div> element to "red" when the browser window is 600px wide or less */
@media only screen and (max-width: 600px) {
div {
    background-color: red;
}
}

6. Trong CSS Pseudo-class là gì?

Một Pseudo class trong CSS được dùng để xác định trạng thái đặc biệt của một phần tử. Nó có thể được kết hợp với một bộ chọn CSS (selector) để thêm hiệu ứng cho các phần tử hiện có dựa trên trạng thái của chúng.

/*
Any <a> element which the user's pointer is hovering will go green
*/
a:hover {
color: green;
}
/* Selects any <a> that has been visited and makes the text purple*/
a:visited {
color: purple;
}

7. Điểm khác biệt giữa relative, fixed, absolute và statically positioned element là gì?

  • Relative là phần tử được định vị tương đối so với vị trí bình thường của nó.
  • Fixed là phần tử được định vị liên quan đến cửa sổ trình duyệt.
  • Absolute là phần tử được đặt hoàn toàn vào vị trí gốc đầu tiên của nó.
  • Static đây là giá trị mặc định, tất cả các phần tử theo thứ tự khi chúng xuất hiện trong tài liệu.

8. PUT và POST khác nhau như thế nào?

PUT: Thay thế tài nguyên đích bằng payload yêu cầu. Có thể được sử dụng để cập nhật hoặc tạo một tài nguyên mới.

POST: Thực hiện xử lý tài nguyên cụ thể trên payload. Có thể được sử dụng cho các hành động khác nhau bao gồm tạo tài nguyên mới, tải lên tệp hoặc gửi biểu mẫu web.

9. Long-Polling, Websockets và Server-Sent Events khác nhau thế nào?

  • Long-Polling mở một yêu cầu HTTP và vẫn mở cho đến khi nhận được bản cập nhật. Khi nhận được bản cập nhật, một yêu cầu mới sẽ được mở ngay lập tức khi vẫn đang chờ bản cập nhật tiếp theo.
  • Websocket Giao thức WebSocket cho phép giao tiếp liên tục, hai chiều giữa máy chủ và máy khách. Đối với thử nghiệm này, Primus được sử dụng để tóm tắt nhiều hoạt động của giao thức.
  • Server-Sent Event Các sự kiện do máy chủ gửi dựa trên kết nối HTTP lâu dài, nơi các bản cập nhật liên tục được gửi đến máy khách.

10. Sự khác biệt giữa cookies, session storage, and local storage?

Local storage như tên gọi (bộ nhớ cục bộ) là bộ nhớ của trình duyệt, có khả năng lưu trữ vô thời hạn lên tới 10MB, session storage (bộ nhớ phiên) cũng như vậy, nhưng như tên gọi của nó, bộ nhớ này dựa trên phiên và sẽ bị xóa sau khi đóng trình duyệt của bạn. Bộ nhớ phiên lưu trữ được ít hơn, lên đến 5MB.

Cookie là dữ liệu rất nhỏ lưu trữ trong trình duyệt, có thể lưu trữ đến 4KB và có thể được truy cập thông qua máy chủ hoặc trình duyệt.

11. CORS là gì?

CORS là viết tắt của Cross-Origin Resource Sharing.

CORS là một cơ chế trình duyệt cho phép truy cập có kiểm soát vào các tài nguyên nằm bên ngoài một miền nhất định. Nó mở rộng và thêm tính linh hoạt cho chính sách cùng nguồn gốc.

12. Promise là gì?

Promise được dùng để xử lý các hoạt động bất đồng bộ. Chúng có thể xử lý nhiều hoạt động bất đồng bộ một cách dễ dàng và cung cấp khả năng xử lý lỗi tốt hơn so với callback và event.

13. Các state khác nhau trong promise?

Một promise có 3 state:

  • fullfilled: hoàn thành
  • rejected: lỗi/ không thể hoàn thành
  • pending: đang chờ

14. Hoisting trong JavaScript là gì?

Hoisting là một thuật ngữ được dùng để mô tả sự di chuyển của các biến và hàm lên đầu phạm vi của chúng, ở đấy chúng ta có thể xác định được biến hoặc hàm đó.

15. Các giá trị falsy trong JavaScript là gì?

Là giá trị khi được chuyển đổi thành boolean sẽ trở thành sai.

Bất kỳ giá trị nào dưới đây:

''
0
null
undefined
NaN
false
-0
0n // BigInt, when used as a boolean, follows the same rule as a Number

Bài viết được dịch từ đây.

Lịch khai giảng lớp Web Frontend 5 tháng có giới thiệu việc làm tại Techmaster