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– http://www.noupe.com/jquery/50-amazing-jqu

ery-examples-part1.html

Ohisee.com

Demo

• Ví dụ về 1 số hiệu ứng web dùng Jquery Plugin

• http://www.ericmmartin.com/simplemodal/

• http://jquery.bassistance.de/validate/demo/

• 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ả.

• 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– http://www.w3.org/TR/REC-CSS2/selector.ht

ml

• 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 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.

Ohisee.com

Demo về Jquery, so sánh nó với cách làm bình thường (raw code)

• Bài toán 1: Tạo ra bảng kiểu ngựa vằn (zebra)

Ohisee.com

DEMO

• Cách 1:– Dùng HTML + CSS

• Cách 2:– Dùng Javascript theo cách bình thường

• Cách 3:– Dùng Jquery

Tham khảo:http://www.langtags.com/jses/articles/20061119/

a218618280.html

Ohisee.com

Demo về Jquery, so sánh nó với cách làm bình thường (raw code)

• Bài toán 2: Validate email trong form

Ohisee.com

DEMO

• Cách 1:– Dùng Javascript theo cách bình thường

• Cách 2:– Dùng Jquery

Tham khảo:

http://jquery.bassistance.de/validate/demo/

Ohisee.com

Khi làm AJAX có thể áp dụng Jquery không?

• Có thể áp dụng Jquery!

• Ví dụ (không DEMO)

• Dùng AJAX theo cách bình thường– http://www.w3schools.com/Ajax/

ajax_server.asp

• Dùng AJAX áp dụng Jquery– http://docs.jquery.com/AJAX

$("#feeds").load("feeds.html");

Ohisee.com

Giao lưu

• Hỏi đáp về CSS, Jquery, thực tế áp dụng CSS và Jquery tại các công ty phần mềm ở Việt Nam:

– http://ohisee.com/?p=906