Ohisee.com
Áp dụng các thư viện
(Framework) Javascript
vào việc tạo hiệu ứng cho Web
Người thuyết trình: Đặng Minh Tuấn

Ohisee.com
Đôi nét về người thuyết trình
•
Đặc biệt yêu thích các vấn đề liên quan đến
clientside (Web Standard, HTML, CSS,
Javascript).
•
Đã làm một số dự án liên quan đến tối ưu hóa
clientside code cho Microsoft (CSS Adapters) và
NAISCORP (www.socbay.com)

Ohisee.com
Mục đích của buổi Seminar
•
Đưa đến khái niệm cơ bản về các thư viện
Javascript nói chung, và 1 thư viện Javascript
nổi tiếng là Jquery, nói riêng.
•
Áp dụng Jquery vào việc tạo các hiệu ứng sinh
động cho Web.

Ohisee.com
Nội dung chính
•

•
http://
interface.eyecon.ro/demos/drag_drop_tree.html
•
http://interface.eyecon.ro/demos/sort.html
•
http://gmarwaha.com/blog/?cat=8

Ohisee.com
Câu hỏi: Bạn muốn viết code
JavaScript theo cách nào?
•
Tìm (trong sách hoặc trên Internet) và copy-and-
paste.
•
Tập hợp những đoạn code Javascript thường
dùng vào một nơi, khi cần đoạn nào thì lấy đoạn
đó ra, và chỉnh sửa bổ sung.
•
Muốn làm gì thì viết từ đầu.

Ohisee.com
Thế nào là Javascript Framework
•
Javascript framework, hay thư viện Javascript,
hay Javascript Library, là khái niệm tương tự các
thư viện trong lập trình C như: stdlib, stdio.
Không ai lập trình C mà không dùng một thư
viện nào cả.
•

Thế nào là một thư viện Javascript
tốt?
•
Hỗ trợ trong việc giải quyết các vấn đề thường
gặp (sử lý DOM, AJAX…)
•
Cross-browser
•
Có tài liệu hướng dẫn sử dụng chi tiết.
•
Dễ dùng
•
Ít xung khắc với các thư viện Javascript khác.

Ohisee.com
Các thư viện mã nguồn mở

Ohisee.com

Ohisee.com
Giới thiệu các thư viện nổi tiếng

Ohisee.com
Tổng quan về Prototype
•
Bắt đầu từ đầu 2005 bởi Sam Stephenson
•
Nhanh chóng phát triển, gắn liền với cộng đồng
Ruby on Rails
•

•
Cộng đồng phát triển lớn.
•
Nhiều công ty lớn hỗ trợ (IBM, AOL)
•
Thư viện rất lớn, hỗ trợ rất nhiều chức năng.

Ohisee.com
Tại sao chọn JQuery
•
Dễ dùng, code ngắn gọn, dễ hiểu
•
File thư viện nhỏ gọn
•
Có nhiều Plugin
•
Nhiều công ty lớn dùng nó:
–
Google, BBC, Digg,
–
Wordpress, Amazon, IBM.
•
Một số công ty Web Việt Nam dùng Jquery:
–
NAISCORP(socbay), VCCORP(baamboo),
VINAGAME(zing)…
•
Note: Right Tool for Right Job

Ohisee.com

tử bất kỳ có id=“nav”

Ohisee.com
CSS 2 và CSS 3
•
CSS 2
–
http://www.w3.org/TR/REC-CSS2/selector.html
•
CSS 3
–
http://www.w3.org/TR/css3-selectors/

Ohisee.com
Jquery và hàm $()
$().ready(function() {
…………………………….
});
So sánh với
window.onload = function() {
…….
};

Ohisee.com
3 mức độ sử dụng Jquery
•
Cấp 1: dùng trực tiếp Jquery hoặc Plugin của nó
mà không cần hiểu bản chất.
•
Cấp 2: hiểu bản chất của Jquery và Plugin của