Khác biệt giữa HTML, CSS và JavaScript — thứ mà tầng Web server vẽ ra

Bài viết này nói về ba thứ tạo nên tầng Web server: HTML, CSS và JavaScript.

Chúng được viết ở những chỗ tách biệt là index.html, style.css và script.js, vì thứ mà chúng quyết định là khác nhau.

Ba file không đến cùng một lúc.

Cả ba file đều do trình duyệt nhận, và bên nạp chúng cũng như bên chạy chúng đều là trình duyệt.

HTML viết ra màn hình có những gì, bằng loại thành phần và thứ tự

HTML (HyperText Markup Language, ngôn ngữ viết ra màn hình có những gì bằng loại thành phần và thứ tự) được viết trong index.html.

Mỗi thành phần của màn hình là một phần tử (element), tên và thiết lập gắn vào phần tử là thuộc tính (attribute), còn ký hiệu cho biết phần tử bắt đầu và kết thúc ở đâu là thẻ (tag).

index.html của form đặt chỗ được tạo nên từ ba thứ này.

<form>
  <input type="date">
  <button type="button" id="reserve" class="action">Đặt chỗ</button>
  <p id="message"></p>
</form>

id và class là những cái tên để sau đó CSS và JavaScript chọn ra thành phần.

Một id chỉ dùng một lần trên một trang, còn class thì gắn cho bao nhiêu phần tử cũng được.

Các phần tử có thể lồng nhau, và phần tử button nằm bên trong phần tử form.

Phần tử head chứa tiêu đề trang và tên các file được dùng, còn thứ hiện ra màn hình chỉ là phần bên trong phần tử body.

index.html chỉ viết ra có những gì

Thứ bạn viết trong index.html chỉ là màn hình có những gì.

Thẻ cho biết loại của từng thành phần, bạn viết nội dung và thứ tự chúng xếp hàng, còn id và class gắn ở thẻ mở là những cái tên để sau đó file khác chọn ra thành phần ấy.

CSS gom việc phần tử trông thế nào vào một file riêng

CSS (Cascading Style Sheets, ngôn ngữ viết ra cách hiển thị phần tử HTML dưới dạng quy tắc về màu, kích thước và bố cục) chỉ quyết định vẻ ngoài.

style.css có dạng như sau.

.action {
  background-color: #2a6f97;
  color: white;
  border-radius: 8px;
}

.action ở đầu là phần chỉ định quy tắc áp cho phần tử nào.

Ba dòng trong dấu ngoặc nhọn được áp cho mọi phần tử có class là action.

Bên trong style.css, những quy tắc như vậy xếp nối tiếp nhau.

Khi một màn hình có ba nút, số chỗ phải sửa để đổi màu thay đổi tùy theo bạn viết cách hiển thị ở đâu.

Bạn cũng có thể viết cách hiển thị vào thuộc tính style của phần tử, nhưng khi đó bạn lặp lại cùng một thay đổi đúng bằng số phần tử.

Gom vào style.css thì chỉ phải sửa 1 chỗ.

style.css chọn theo tên rồi quyết định cách hiển thị

Việc style.css làm chỉ là liệt kê thành phần nào được hiển thị ra sao.

Thành phần nào thì chọn theo tên class hoặc id đã gắn trong index.html, và nó không thêm thành phần cũng không sửa chữ.

JavaScript phản ứng với thao tác và sửa lại màn hình

Màn hình chỉ có HTML và CSS thì sau khi hiện ra, nội dung không đổi.

Hiện dòng chữ khi nút được bấm là phần việc của JavaScript trong tầng Web server.

script.js có dạng như sau.

const button = document.querySelector("#reserve");
button.addEventListener("click", () => {
  document.querySelector("#message").textContent = "Đã gửi đặt chỗ";
});

document ở dòng đầu là tên chỉ toàn bộ trang mà trình duyệt đã nạp.

#reserve đứng sau là cách viết để chọn phần tử có id là reserve, và ký hiệu trước tên cho biết đó là class hay id.

Ba file nối với nhau bằng những cái tên đã gắn trong index.html.

addEventListener ở dòng thứ hai là phần đăng ký việc sẽ làm khi có click.

() => { } đứng sau là dạng viết trong đó bạn đặt phần xử lý sẽ chạy khi nút được bấm vào giữa hai dấu ngoặc nhọn.

Một việc xảy ra như cú click này, khi trình duyệt báo cho chương trình biết người dùng vừa thao tác gì, chính là sự kiện (event).

Sự kiện không chỉ có mỗi click.

Bạn đăng ký trước rằng khi có sự kiện nào thì làm gì.

Màu đổi khi rê chuột lên là do CSS, còn việc gửi form là do trình duyệt làm.

script.js cũng về đến trình duyệt của người dùng và đọc được nội dung, nên bạn không viết vào đó những giá trị không được cho người khác thấy.

script.js chỉ chạy khi được gọi

script.js chỉ đăng ký trước rằng khi cái này được bấm thì làm việc kia.

Phần xử lý mà trình duyệt gọi khi nút được bấm sẽ sửa lại thành phần của màn hình, nhưng nội dung index.html không đổi; và vì script.js về đến trình duyệt của người dùng nên bạn không viết vào đó những giá trị không được cho người khác thấy.

Trình duyệt tạo DOM từ HTML, áp CSS rồi vẽ, sau đó JavaScript sửa lại

Trình duyệt không hiện nguyên chữ trong HTML ra, mà dựng phần lồng nhau của các phần tử thành dữ liệu.

Đó chính là DOM (Document Object Model, dữ liệu xếp các phần tử giữ nguyên cách lồng nhau).

Thứ bạn thấy trên màn hình là hình vẽ của DOM này.

Phần xử lý mà script.js đăng ký cũng đang chờ trong cùng bộ nhớ trình duyệt với DOM.

Ba file đến riêng lẻ và hợp lại thành một DOM bên trong trình duyệt.

Trang bạn thấy trên màn hình là hình vẽ của DOM này.

Việc áp CSS vào DOM, tính toán vị trí cùng kích thước rồi vẽ ra chính là rendering (kết xuất).

Thứ bị sửa lại chỉ là DOM trong bộ nhớ của trình duyệt.

index.html đã đến nơi và các file đặt trên server công khai đều giữ nguyên.

Nội dung muốn giữ lại thì gửi đến tầng App và lưu vào tầng DB.

Cách viết JavaScript và bài tập chạy nó trong trình duyệt được nói đến trong khóa Nhập môn JavaScript.

Màn hình là hình vẽ của DOM

Trình duyệt dựng phần lồng nhau của các thành phần từ index.html nhận được, rồi thêm màu và kích thước theo quy tắc trong style.css và vẽ ra.

Thứ mà script.js sửa lại chính là bản đã dựng đó, nên khi bạn tải lại trang, nó được dựng lại từ các file đã đến và nội dung đã sửa biến mất.