Tất cả bài viết trong series ở link dưới đây:

Theo khảo sát của tôi thì có rất nhiều bạn học sinh, sinh viên đã và đang học HTML/CSS/JS. Nhưng đa phần trong số đó gặp khó khăn trong việc áp dụng JS vào những bài tập, dự án thực tế.

Thực trạng học HTML/CSS/JS
Thực trạng học HTML/CSS/JS (Xem ảnh gốc)

Do đó, trong bài viết này tôi sẽ cố gắng làm rõ cho các bạn hiểu được cách vận dụng JS bằng cách:

  • Chỉ ra mối liên hệ giữa HTML/CSS/JS
  • Hướng dẫn phân tích chức năng trước khi thực hiện bất kì chức năng nào liên quan đến Javascript

HTML là gì ? và CSS là cái chi ? ❔

HTML là 1 ngôn ngữ được sử dụng để xây dựng lên cấu trúc hay còn gọi là nội dung của website

CSS dùng để trang trí cho nội dung HTML. Nói 1 cách đơn giản hơn thì nó hỗ trợ việc tô điểm màu sắc, kích thước, sắp xếp vị trí,...

HTML vs CSS
HTML vs CSS (Xem ảnh gốc)

Còn Javascript thì sao ? ❔

Javascript là ngôn ngữ lập trình trên môi trường web, nó lập trình hành vi của các đối tượng HTML

Nghe vẫn khó hiểu đúng ko. Vậy hãy cùng xem xét ví dụ dưới đây. Đối tượng HTML được click là 1 checkbox, khi checkbox đổi trạng thái thì nội dung text bên cạnh được gạch ngang

Đây chính là hành vi có thể được lập trình sử dụng Javascript

Hành vi ở đây là tick vào checkbox
Hành vi ở đây là tick vào checkbox (Xem ảnh gốc)

Mối liên hệ giữa HTML và Javascript ⚖️

Những định nghĩa trên sẽ trở lên vô nghĩa nếu các bạn không thể hiểu được HTML có liên hệ thế nào với Javascript

Mối liên hệ giữa HTML và Javascript được thiết lập thông qua các thẻ HTML. VD: <div>, <h2>, <p>, ...

Bạn không thể hiển thị dữ liệu lên website với javascript mà không sử dụng bất kì thẻ HTML nào

Để hình thành mối liên hệ này thì website cần cung cấp 1 chức năng cụ thể. Cụ thể như những chức năng dưới đây

  • Hệ thống bình luận bài viết
  • Ứng dụng chat
  • Chức năng giỏ hàng
  • ...

Tóm lại, mối liên hệ ở đây là chức năng mà người dùng có thể thông qua đó tương tác được với website

Không biết áp dụng Javascript vào 1 chức năng cụ thể 😕

Nhiều bạn, mặc dù hiểu mối liên hệ trên, thậm chí hiểu yêu cầu chức năng nhưng vẫn không biết áp dụng javascript để tạo ra chức năng đó như thế nào

Dựa vào kinh nghiệm của mình thì tôi nhận ra rằng, các bạn chưa biết cách phân tích chức năng để tìm ra đối tượng và hành động

Vậy thế nào là phân tích chức năng ? Chúng ra sẽ lấy 1 ví dụ cụ thể như sau: Tạo chức năng todo cho phép user

  • Tạo todo bằng cách nhập input và ấn button ADD
  • Todo được hiển thị theo dạng danh sách sau khi nhấn ADD
  • User chuyển trạng thái checkbox thì gạch bỏ todo

Học cách phân tích chức năng ✍🏻

Có 3 bước để phân tích 1 chức năng thực hiện bằng javascript

  • Tìm đối tượng mà user cần tương tác
  • Xác định đâu là hành động của user
  • Ràng buộc sự kiện, xử lý logic cho đối tượng tương ứng với hành động

Giờ ta sẽ đi vào phân tích các chức năng của Todo app ở trên để nắm được rõ hơn về cách phân tích

1/ Tạo todo bằng cách nhập input và ấn button ADD

Phân tích theo yêu cầu chức năng ta sẽ được:

  • Đối tượng 1: nút add -> do user phải nhấn vào nút add nên ta coi nó là 1 đối tượng
  • Đối tượng 2: ô input -> vì user phải nhập nội dung cho todo rồi mới có thể ấn nút add
  • Hành động: ấn button ADD

Dựa vào phân tích trên ta có thể triển khai code javascript như sau:

// tìm đối tượng sử dụng document.querySelector()
const buttonAdd = document.querySelector('#button-add')
const input = document.querySelector('#input-todo')

// ràng buộc sự kiện cho hành động ấn button ADD
buttonAdd.addEventListener('click', function(){
  // ...
})

2/ Todo được hiển thị theo dạng danh sách sau khi nhấn ADD

Tiếp tục phân tích yêu cầu số 2 ta được:

  • Todo được hiển thị theo dạng danh sách: để hiển thị được thì cần có 1 thẻ HTML. Nên trước hết, cần tìm được thẻ HTML để chứa nội dung đó
  • Sau khi nhấn ADD: nghĩa là việc hiển thị này được thực hiện sau khi user nhấn nút ADD

Triển khai code ta sẽ được

// ràng buộc sự kiện cho hành động ấn button ADD
buttonAdd.addEventListener('click', function(){
  // tìm thẻ HTML để chứa nội dung todo, 
  // vẫn sử dụng document.querySelector
  const list = document.querySelector('#list');

  // tạo ra 1 thẻ HTML <div>
  const newTodo = document.createElement('div');
  // lấy giá trị của ô input
  const value = input.value;

  // gán giá trị của input vào thẻ <div>
  newTodo.textContent = input.value;

  // chèn thẻ <div> vào danh sách
  list.appendChild(newTodo)
})

3/ User chuyển trạng thái checkbox thì gạch bỏ todo

Giờ các bạn thử phân tích hành động thứ 3 nhé. Tôi sẽ giả định rằng, todo mới được tạo sẽ bao gồm 1 thẻ <input type="checkbox"/> 

buttonAdd.addEventListener('click', function(){
  // ...

  // tiếp tục tìm thẻ <input type="checkbox"/>
  // tuy nhiên, lần này sẽ sử dụng <div> được tạo ra ở bước trên 
  const checkbox = newTodo.querySelector('.checkbox');
  checkbox.addEventListener('change', function(){
    const checked = this.checked;
    
    // tiếp theo là xử lý thêm gạch chân
    // chắc các bạn đã biết phải xử lý như nào rồi
  })

  list.appendChild(newTodo)
})

Tạm kết

Để hiểu cách vận dụng Javascript vào ứng dụng web thì hiểu được mối liên hệ giữa HTML/CSS/JS và hiểu cách phân tích chức năng là rất quan trọng.

Bài viết này tôi chỉ tóm tắt 1 số ý chính, bạn vẫn cần phải luyện tập nhiều trong những trường hợp thực tế. Hi vọng với những kiến thức này các bạn có thể hiểu cách vận dụng javascript vào những chức năng thực tế