áp dụng các thư viện (framework) javascript vào việc tạo hiệu ứng cho web

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
•

Giới thiệu về Web2.0, vai trò của Animation và
AJAX trong Web2.0
•
Giới thiệu các thư viện Javascript nổi tiếng như
Jquery, YUI, Prototype
•
Giới thiệu về CSS 2 và CSS 3
•
Demo một số ví dụ áp dụng Jquery
•
Giao lưu, trả lời câu hỏi các vấn đề liên quan

Ohisee.com
Web 2.0
•
Thuật ngữ Web 2.0
•
Các ví dụ về hiệu ứng web
–
/>ples-part1.html

Ohisee.com
Demo
•
Ví dụ về 1 số hiệu ứng web dùng Jquery Plugin
•
/>•
/>•
http://
interface.eyecon.ro/demos/drag_drop_tree.html

•
/>•
/>
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ả.
•
Trong C: #include<stdio.h>
•
Trong Javascript:
<script type="text/javascript"
src="/js/lib/lib.min.js"></script>

Ohisee.com
Tại sao nên dùng các thư viện
Javascript
•
Code nhanh hơn, ngắn gọn hơn, giảm thiểu vấn
đề cross-browser (vấn đề làm sao cho web chạy
giống nhau trên mọi trình duyệt).

Ohisee.com
Khi nào thì KHÔNG nên dùng các
thư viện Javascript có sẵn
•
Khi đang học về Javascript
•
Không “giết gà bằng dao mổ trâu”.
•
Khi tự xây dựng các thư viện Javascript cho
riêng mình.

Ohisee.com
Có những loại thư viện Javascript
nào?

Ohisee.com
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 hỗ trợ bởi công ty 37 Signals

Ohisee.com
Tổng quan về Jquery
•

Đưa ra vào tháng 1 năm 2006 bởi John Resig
(đang làm Team Leader tại công ty Mozilla –
công ty làm ra Firefox)
•
Phát triển rất nhanh.
•
Rất nhiều lập trình viên khắp thế giới tham gia
phát triển và viết Plugin cho nó.

Ohisee.com
Tổng quan về YUI
•
Ra mắt tháng 2 năm 2006 bởi Yahoo!
•
Phát triển và hỗ trợ trong nội bộ công ty Yahoo.
•
Mục đích chuẩn hóa về JavaScript cho nội bộ
công ty, nhưng cho phép mọi người đều được
sử dụng.

Ohisee.com
Tổng quan về Dojo
•
Phát triển vào đầu năm 2005 bởi Alex Russell +
Co.
•
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
So sánh Jquery với các thư viện
khác
•
Khác với Prototype và mooTools
–

Nó không phá hoại global namespace của bạn.
•
Khác với YUI
–
Nó rất ngắn gọn, cô đọng
–
YUI: YAHOO.util.Dom.getElementsByClassName()
–
Jquery: $()
•
Khác với Dojo
–
Bạn có thể học nó trong Nửa Tiếng (với điều kiện
bạn đã nắm vững CSS)!

Ohisee.com
Tóm tắt lại kiến thức về CSS
•
Để học Jquery, bạn buộc phải nắm vững CSS
#nav => mọi element có id=“nav”
div#intro h2 => mọi element h2
nằm trong div có id=“intro”
#nav li.current a => mọi element
a nằm trong element li với
class=“current” nằm trong phần
tử bất kỳ có id=“nav”

Ohisee.com
CSS 2 và CSS 3
•

CSS 2
–
/>•
CSS 3
–
/>
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
nó để có thể tự viết ra Plugin của riêng mình
hoặc chỉnh sửa mã nguồn Jquery.
•
Cấp 3: tham khảo Jquery để tự viết ra thư viện
yourname.js nổi tiếng thế giới như Jquery.