Ở phần trước chúng ta đã tìm hiểu về cú pháp cũng như cấu trúc hoạt động của ngôn ngữ javascript và đã thực hành một số ví dụ đơn giản để thấy được luồng hoạt động của nó như thế nào. Cơ bản gồm những thành phần như là biến, kiểu dữ liệu(lưu trữ dữ liệu trong javascript), các toán tử ở đã học ở lớp 1 đến lớp 5 và các toán tử chúng ta đã được học trong những ngôn ngữ lập trình khác. Thêm vào đó là một số quy định trong cú pháp của javascript cũng như mục đích sử dụng như chú thích mã nguồn, các khái niệm giá trị bất định… và một số phần còn lại cũng như những khái niệm mới hơn sẽ được trình bày trong tài liệu này.

I. Mục đích:

• Biết được khái niệm và cấu trúc của một đối tượng (Document Object Model – DOM) trong HTML cũng như tương tác bằng các kiến thức đã học.
• Hiểu và sử dụng được Javascript để sử dụng trong việc tương tác với DOM để điều khiển hành vi của cấu trúc nội dung html.
• Nắm được cú pháp sử dụng cơ bản, mục đích sử dụng, một số phương thức phổ biến trong jQuery và áp dụng trong DOM.

II. Nội dung:

1. Document Object Model – DOM:

DOM là một giao diện lập trình trong một số tài liệu đánh dấu siêu văn bản như HTML, XML…, nó cung cấp cho người dùng một cấu trúc như là cấu trúc cây, và nó còn cung cấp cho người dùng các phương thức để truy xuất cũng như xử lý các phần tử trong cây.

Được tạo nên khi trình duyệt web hoàn tất tải về một trang web, và sử dụng mới mục đích để xác định các thành phần khác nhau trong tài liệu html như là phần nào là heading, phần nào là paragraph…

Cụ thể hơn, khi trình duyệt web load xong trang web dưới đây, thì sẽ nhận được một cấu trúc cây tương ứng(DOM).

Khi duyệt web, chúng ta sẽ có 2 side, 1 là ở phía người dùng(Browser) cái còn lại là WebServer để phản hồi yêu cầu từ phía người dùng. Và nó được thể hiện như hình sau:

Như vậy Javascript sẽ tương tác với tài liệu html thông qua DOM và một số khái niệm cũng như một số API để Javascript có thể tương tác với DOM sẽ được trình bày ở phần dưới đây.

2. Javascript và DOM:

Trong bài viết trước, chúng ta cũng đã thấy một số các cú pháp sử dụng Javascript tương tác với DOM. Nhưng cụ thể hơn, Javascript có thể làm gì trên đối tượng này:

• Thay đổi các thành phần (element) trong HTML.
• Thay đổi các thuộc tính của các thành phần.
• Thay đổi style (CSS) của các thành phần.
• Xóa các thuộc tính của các thành phần hoặc các thành phần trong HTML.
• Thêm thành phần mới vào và thêm thuộc tính cho thành phần.
• Tạo mới các sự kiện trong HTML.
• Tác động tới các sự kiện đã có trong HTML.

Với các tác vụ trên, chúng ta đã có thể làm được rất nhiều thứ với tài liệu HTML bằng Javascript, bắt sự kiện cho các thẻ input submit, các button hoặc các đối tượng có hỗ trợ. Thay đổi nội dung HTML của một số thành phần như paragraph, nội dung text của các thẻ head…

Để sử dụng được các chức năng này thì một danh sách các giao diện chính trong DOM được cung cấp cho người dùng để có thể thực hiện các tác vụ trên. Trong bài trước, một biến toàn cục đã được giới thiệu là biến window. Biến này đại diện cho trình duyệt, các phương thức hỗ trợ giúp tác động tới các thành phần ở trình duyệt. Còn biến document cũng được tạo như là một biến cục bộ và là node root trong DOM.

Một số khái niệm khác như thành phần(element) là một node trong cấu trúc cây, danh sách node (nodeList), attribute (thuộc tính của thành phần), danh sách node theo tên (namedNodeMap).

Tuy nhiên chúng ta chỉ quan tâm tới các API phố biến trong các trang web gồm:

• Nhóm các phương thức selector:

Chọn element có một id cụ thể(element):

var section = document.getElementById('container');

Chọn các element có cùng tên thẻ(nodeList):

var listLi = document.getElementsByTagName('li');

Chọn element đầu tiên có tên class cụ thể(element):

var logo = document.getElementsByClassName('logo')[0];

• Nhóm các phương thức xử lý trên từng thành phần(element):

Tạo một thành phần(element) mới:

var newElement = document.createElement('p');
document.body.appendChild(newElement);
newElement.innerHTML = 'New paragraph';
newElement.style.color = 'red';
newElement.setAttribute('class', 'content');
newElement.addEventListener('click', function(){
    alert('click');
});

• Nhóm các phương thức của biến window:

window.alert('Hiển thị popup tin nhắn');
window.scrollTo(0, 0);

Trên đây là một số API thường xuyên gặp, nếu quan tâm hơn tới DOM, bạn cũng có thể tìm hiểu thêm tại đây.

3. jQuery và DOM:

Ở phần trên chúng ta đã tìm hiểu về cấu trúc của DOM, và một số API giúp tương tác với tài liệu html bằng javascript. Nhưng một vấn đề khó khăn là ở hiện tại, có khá nhiều trình duyệt web cho người dùng lựa chọn, và mỗi cái này nó cung cấp một interface DOM khác nhau. Và một bộ thư viện sinh ra để giải quyết việc này, đó là jQuery.

Với một câu khẩu hiệu: “Write less do more”, jQuery có thể làm được rất nhiều việc chỉ với một số câu lệnh ngắn hơn so với Javascript và nó là một bộ thư viện của Javascript. Vì vậy, tương tự với javascript và DOM, jQuery cũng thực hiện được các công việc tương tự:

• Chọn các thành phần(element) trong html (dựa vào cấu trúc của DOM).
• Thay đổi nội dung của một thành phần trong html.
• Bắt sự kiện cho các thành phần(element).
• Tạo hiệu ứng chuyển động(animation).
• Tương tác với internet để cập nhật nội dung.

Cú pháp cơ bản:

jQuery(<code>);

Và chúng ta đã biết mục tiêu jQuery sinh ra là để làm gì và sợ bộ về những thứ mà nó có thể làm, việc tìm hiểu chuyên sâu mình không đề cập tới vì vấn đề đó là do quá trình làm việc và tích lũy kinh nghiệm của từng người.

Một phần quan trọng không thể thiếu là thêm jQuery vào trong tài liệu html, bản thân jQuery là thư viện của javascript không hơn không kém, và cái thư viện của nó cũng nằm gỏn gọn trong 1 file js. Các bạn có thể down về tại đây và thêm vào trang web của mình tương tự như thêm một script javascript bình thường.

Các bạn cũng có thể sử dụng link tuyệt đối để bỏ vào html như sau:

3.1. Bộ chọn(Selectors):

Đầu tiên, để có thể tương tác với các thành phần trong DOM, chúng ta phải tìm được nó(select), và tương tự như cú pháp select các thành phần trong tài liệu html(selector), jQuery cũng xây dựng những bộ selector tương tự như CSS.

       

Đơn giản hơn, jQuery còn có một cú pháp đơn giản và ngắn gọn hơn để select các thành phần trong DOM là ký tự “$” thay cho “jQuery”: $(“h1”).

Bộ selector của jQuery kế thừa từ selector của CSS, vì vậy những cú pháp selector đều giống như CSS, kể cả các pseudo selector. Nhưng cơ bản và thường dùng nhất vẫn là 3 bộ selector cơ bản:

• Select bằng tên thẻ html: $(“h1”);

• Select bằng tên class của các thành phần: $(“.container”);

• Select bằng id duy nhất của thành phần: $(“#content”);

Trên cơ sở đó các bộ lọc đặc biệt hơn bằng cách kết hợp các bộ selector trên lại với nhau. Và các bạn có thể tham khảo thêm tại đây.

3.2. Thay đổi nội dung html:

Để thay đổi nội dung của các thành phần trong DOM, cơ bản chúng ta có 3 phương thức phổ biến là $().text(), $().html() và $().val(). Mỗi phương thức này đều đã xây dựng sẵn cho người dùng 2 overload function. Nếu truyền tham số vào cho các phương thức này thì sẽ là hàm gán(set) giá trị cho thành phần được select. Ngược lại nếu không truyền tham số thì nó là hàm lấy giá trị(get) của thành phần tương ứng với phương thức.

Xem ví dụ sau các bạn sẽ hiểu hơn về công dụng cũng như là cách thức sử dụng của các phương thức trên:

3.3. Bắt sự kiện cho các thành phần(element):

3.3.1. Sự kiện ready:

Về sự kiện cho các đối tượng, chúng ta sẽ trình bày khái quát chung về cú pháp sử dụng và một số phương thức phổ biến và đầu tiên trong jQuery không thể bỏ qua được đó là sự kiện ready, khi trình duyệt gửi yêu cầu lên server và server trả về các file nội dung trang web ví dụ như là html, css và javascript, thì trong lúc đó có thể code Javascript sẽ được thực thi trước khi DOM được trình duyệt load xong.

Và đương nhiên nếu DOM load chưa xong mà code Javascript đã select thành phần trong DOM thì sẽ không tìm thấy và xảy ra lỗi.

Vì vậy chúng ta phải đảm bảo DOM đã load hết nội dung html trước khi thực hiện select các thành phần trong html, và để thực hiện điều đó chúng ta sẽ sử dụng phương thức ready mà jQuery cung cấp.

Cú pháp:

$(document).ready(function(){
     <select các element và xử lý>
});

Như vậy ngay khi DOM load xong nội dung html thì hàm function ở trong ready sẽ được gọi và thực thi, ở trong hàm này sẽ là các selector, các xử lý với các element được select…

3.3.2. Các sự kiện phổ biến khác:

Ngoài ready, các sự kiện phổ biến như click, keypress, keyup…, khi người dùng click vào element đã có bắt sự kiện thì hàm callback tương ứng sẽ được thực thi. Vì khi được biên dịch thì hàm callback sẽ được lưu lại và có sự kiện tương ứng xảy ra thì hàm callback này sẽ được gọi và thực thi.

Cú pháp:

$(<element>).<event>(<callback function>);

Ví dụ:

$(“button”).click(function(){
    alert(“Bạn đã click vào button”);
});//Một hộp thoại sẽ xuất hiện khi bạn click vào một button bất kỳ.

3.4. Các chức năng hiệu ứng:

Ngoài các chức năng trên, jQuery còn có thể thay đổi style cho một thành phần(phương thức css), tạo hiệu ứng chuyển động tạo cảm giác mượt mà cho người duyệt web(phương thức animate, toggle, hide, show…). Rất nhiều các phương thức có thể phục vụ cho tác vụ này, nhưng vì nó nhiều nên mình cũng không liệt kê hết ở đây và sẽ gửi link cho các bạn tham khảo tại đây.

3.5. Các chức năng bên thứ 3:

Về chức năng này chúng ta sẽ có những buổi tìm hiểu và đi sâu thêm sau khi có thể lập trình server side và sẽ thực hành trực tiếp để dễ nhìn ra vấn đề cũng như tác dụng của nó hơn. Liệt kê ra thì một số phương thức như là: ajax, post, get…

Hồ Quốc Toản

III. Tài liệu tham khảo:

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

http://api.jquery.com/

https://www.codeschool.com/courses/try-jquery