Component phần 1: cơ bản về DOM

Sau khi đã tiêu hóa lượng lớn nội dung về CSS ở bài trước, thì bài này sẽ là một mảng hoàn toàn khác. Sẽ có liên quan nhiều đến Javascript nên hãy kết hợp google thêm về Javascript cơ bản.

Phân loại giao diện

Có nhiều cách chia các loại giao diện, cách chia là khác nhau với mỗi người. Tuy nhiên với mình thì hay chia thành 3 loại:

Layout: đây không hẳn là "giao diện", mà giống như "cấu trúc", "cách sắp xếp" giao diện hơn. Tuy nhiên có nhiều loại layout khác nhau, và bạn phải viết code cho nó. Nên hãy coi nó là 1 loại giao diện.

Elements: đây là những phần giao diện nhỏ lẻ, nhìn thấy được, trực quan, góp phần tạo nên bộ nhận diện thương hiệu của 1 website. VD: Nút bấm, ô nhập liệu, Chữ tiêu đề, chữ body... Việc thể hiện màu sắc, font chữ, và các loại style khác trên những Elements này sẽ tạo nên 1 sự "quen thuộc" để tạo nên sự nhận diện.

Widgets: đây là những phần giao diện to hơn. Lắp ghép từ các Elements để tạo thành 1 nội dung gì đó cho website của bạn. Widgets thường sẽ là những phần giao diện có chứa logic đặc trưng của website của bạn, tức là nó sẽ làm việc nhiều với dữ liệu, hiển thị dữ liệu của website của bạn, xử lý dữ liệu.

Cả 3 thành phần Layout, Elements và Widgets này đều sẽ cần sử dụng đi sử dụng lại xuyên suốt các page của bạn. 1 Page = 1 vài Layout + 1 vài Widgets. Do đó khi xây dựng website bạn cần xây dựng Layout, Elements và Widgets trước.

Giới thiệu về DOM

1 phần giao diện (Elements hoặc Widgets) ngoài việc hiển thị, còn cần tương tác với người sử dụng. HTML CSS dùng để hiển thị, và Javascript sẽ như 1 bộ điều khiển giao diện để tương tác lại với người dùng.

Vậy chính xác Javascript điều khiển cái gì? Đó là DOM. Hiểu 1 cách đơn giản, HTML là code, khi được chạy bởi Browser, sẽ được chuyển thành DOM. DOM là biến Javascript, là Object của Browser (Không có môi trường Browser thì k có DOM).

1 trang web sẽ có nhiều DOM, để chọn được DOM cần tìm thì sử dụng querySelector và querySelectorAll (còn nhiều nữa nhưng 2 cái này dễ dùng nhất) . Dùng được ở cấp độ toàn trang (document.querySelector) hoặc ở cập độ trong phạm vi 1 element nhất định (element.querySelector)

các DOM sẽ có lưu thông tin về nội dung hiển thị (chữ, ảnh, các trạng thái,..) và có những method riêng tùy theo loại để tương tác

OK dưới đây mình sẽ điểm qua 1 số các loại DOM quan trọng.

Tất cả mọi tag HTML

DOM các thông tin quan trọng
- classList: thông tin class của element
- innerHTML: các tag HTML con (dạng string)
- outterHTML: mã code HTML của element hiện tại
- style: object chứa style của element. Có thể thay đổi giá trị để thấy giao diện thay đổi trực tiếp
- parentElement: DOM element cấp cao hơn 1 bậc.
- previousElementSibling: DOM ngay trước đó
- nextElementSibling: DOM ngay sau đó
DOM các method quan trọng
- classList.add: VD element.classList.add("abc") sẽ thêm class abc vào element
- classList.remove: dùng để xóa class
- classList.toggle: dùng để thêm class nếu không có hoặc xóa nếu đã có.
- classList.contains: dùng để kiểm tra xem có class đó không. trả về true/false
- remove: chạy element.remove() sẽ xóa luôn element đó đi
- onclick: là listener để báo tin khi người dùng click vào element. (Kéo xuống cuối trang để hiểu hơn về Listener)
- onMouseOver, onMouseEnter, onMouseLeave: là listener báo tin khi có trỏ chuột trỏ vào / trỏ ra element. (Khá giống với việc dùng :hover bên CSS)
- append: chèn DOM vào làm element con ở cuối cùng
- insertAdjacentHTML: chèn mã HTML vào làm element con ở cuối cùng

Tag Input

Tag <input />: Dùng để tạo ô nhập liệu

DOM các thông tin quan trọng
- value: giá trị nhập liệu. Có thể thay đổi giá trị để thấy giao diện thay đổi trực tiếp.
- name: khai báo tên của input, khá quan trọng khi dùng trong form.
- type: kiểu của input, phổ biến nhất là text, number, password, file, checkbox
- checked: dùng cho checkbox để biểu thị đã được check hay chưa
DOM các method quan trọng
- oninput: là listener báo tin khi input đang được gõ chữ.
- onchange: là listener báo tin khi input thay đổi value (khá giống oninput nhưng mất độ báo thưa hơn)
- focus: chạy element.focus() sẽ giống việc click trỏ chuột vào ô input, sẽ có dấu nháy để nhập chữ
- blur: chạy element.blur() sẽ giống như click trỏ chuột ra ngoài ô input, mất dấu nháy sẽ không nhập đc chữ nữa

Tag Button

Tag <form />: Là tổ hợp input và button

DOM các thông tin quan trọng
- innerHTML: thường là chữ của nút bấm
- type: thường nếu có type="submit" thì sẽ submit form
DOM các method quan trọng
- onclick: như trên

Tag Form

Tag <form />: Là tổ hợp input và button

DOM các thông tin quan trọng
- action: thường là địa chỉ url khi submit form thì sẽ redirect đến đây
- method: thường là GET hoặc POST. cái này sẽ liên quan đến HTTP Method sẽ giới thiệu sau
- innerHTML: chứa các input và button. Đặc biệt nếu input có name, thì ở cấp độ form có thể trỏ thẳng vào input đó bằng việc dùng element[name] mà không cần querySelector
DOM các method quan trọng
- onsubmit: là listener báo tin khi form được submit. (user click button, hoặc bấm enter). có thể chặn việc redirect bằng việc gọi event.preventDefault()
- submit: chạy element.submit() sẽ submit form

Tag Img và Iframe

Tag <img />: Dùng để hiển thị ảnh. Tag <iframe />: Dùng để nhúng 1 website khác vào. 2 tag này nhìn chung về mặt cấu trúc khá giống nhau.

DOM các thông tin quan trọng
- src: url của ảnh/website
DOM các method quan trọng
- onload: là listener báo tin khi nội dung đã được load xong. Cái này dùng để ứng dụng khi chưa load xong có thể show ra 1 cái thanh loading.
- onerror: là listener báo tin lỗi khi load nội dung, die ảnh hay die web hoặc gì đó. Cái này dùng để thay thế nội dung lỗi bằng ảnh mặc định

Tag a

Tag <a />: dùng để chèn link vào text/ảnh/khối giao diện

DOM các thông tin quan trọng
- href: đường dẫn, có thể là link full hoặc link relative (sẽ tự chèn domain web hiện tại vào đâu). hoặc có thể là id của 1 element trên trang.

Giới thiệu về Listener

Trong mục method mình có nhắc đến Listener, các listener thường có từ on ở đầu, là việc lắng nghe sự kiện (chủ yếu được thực hiện bởi người dùng) để báo tin về cho code của mình.

Khác với các method khác có thể chạy bằng cách gọi trực tiếp. VD: element.remove(). Thì với Listner bạn cần gán cho nó 1 function thì khi báo tin đến, nó sẽ chạy cái function được gán. VD:

const buttonElement = document.querySelector('button');
if (buttonElement) {
  buttonElement.onclick = function(event) {
    alert('You clicked me');
  }
}

Lưu ý: việc dùng querySelector không phải lúc nào cũng tìm thấy DOM (có thể viết sai query, hoặc element đã bị xóa, hoặc chưa đc tạo...). Trong các trường hợp đó sẽ trả về null, nên cần check bằng if trước khi gán listener.

function listener lúc nào cũng sẽ có 1 biến event để mang nhiều thông tin về event đó. tuy nhiên không phải lúc nào chúng ta cũng cần thiết sử dụng. nên một số chỗ sẽ viết là function() {} thay vì function(event) {}

Thử làm 1 todo list sử dụng kiến thức đã học

Đề bài: Tạo 1 trang web về todo list thỏa mãn các yêu cầu:

có 1 ô nhập nội dung của todo, enter hoặc bấm nút sẽ thêm nội dung vừa nhập vào danh sách todo
hiển thị danh sách các todo đã nhập
mỗi todo sẽ có 1 checkbox, nếu checkbox đã check thì coi như là todo đó đã xong, hiện thanh gạch xuyên ngang todo đó
mỗi todo có nút xóa
có một nút để xóa tất cả các todo

Phân tích:

sử dụng form và listener onsubmit để xử lý khi nhập thêm todo mới
sử dụng innerHTML để tạo danh sách todo. sử dụng template string để chèn giá trị trực tiếp vào html
sử dụng listener onclick để xử lý các button
sử dụng listener onchange để xử lý việc checkbox được tích.

tham khảo Bài làm:

https://youtu.be/zbrN8Hc4Ti4

Component phần 1: cơ bản về DOM

Comments

[vn-vi] Đi sâu về việc giao diện website

Component phần 2: Tách biệt giữa dữ liệu và giao diện

More from this blog

CRUD dữ liệu, headless CMS

Login phần 2, API, Firebase Authentication

Login, Signup, kiểm tra tình trạng đăng nhập

Responsive Header

Component phần 6: Tổng kết và hệ thống hóa lại về UI Builder, Web Component và React

Phân loại giao diện

Giới thiệu về DOM

Tất cả mọi tag HTML

Tag Input

Tag Button

Tag Form

Tag Img và Iframe

Tag a

Giới thiệu về Listener

Thử làm 1 todo list sử dụng kiến thức đã học

Command Palette

Comments

[vn-vi] Đi sâu về việc giao diện website

Component phần 2: Tách biệt giữa dữ liệu và giao diện

More from this blog

Phân loại giao diện

Giới thiệu về DOM

Tất cả mọi tag HTML

Tag Input

Tag Button

Tag Form

Tag Img và Iframe

Tag a

Giới thiệu về Listener

Thử làm 1 todo list sử dụng kiến thức đã học