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-
jquery-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_dro
p_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.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 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

¦

‡ 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/a2186182
80.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

¦


‡ 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.a
sp
‡ 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