Hoc Jquery Trong 1h

21,267 views
21,065 views

Published on

Học Jquery trong 1 giờ, Học Jquery Cơ bản, Jquery tutorial

Published in: Technology, News & Politics
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
21,267
On SlideShare
0
From Embeds
0
Number of Embeds
1,551
Actions
Shares
0
Downloads
811
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Hoc Jquery Trong 1h

  1. 1. Á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
  2. 2. Đôi nét về người thuyết trình <ul><li>Đặc biệt yêu thích các vấn đề liên quan đến clientside (Web Standard, HTML, CSS, Javascript). </li></ul><ul><li>Đã 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) </li></ul>
  3. 3. Mục đích của buổi Seminar <ul><li>Đư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. </li></ul><ul><li>Áp dụng Jquery vào việc tạo các hiệu ứng sinh động cho Web. </li></ul>
  4. 4. Nội dung chính <ul><li>Giới thiệu về Web2.0, vai trò của Animation và AJAX trong Web2.0 </li></ul><ul><li>Giới thiệu các thư viện Javascript nổi tiếng như Jquery, YUI, Prototype </li></ul><ul><li>Giới thiệu về CSS 2 và CSS 3 </li></ul><ul><li>Demo một số ví dụ áp dụng Jquery </li></ul><ul><li>Giao lưu, trả lời câu hỏi các vấn đề liên quan </li></ul>
  5. 5. Web 2.0 <ul><li>Thuật ngữ Web 2.0 </li></ul><ul><li>Các ví dụ về hiệu ứng web </li></ul><ul><ul><li>http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html </li></ul></ul>
  6. 6. Demo <ul><li>Ví dụ về 1 số hiệu ứng web dùng Jquery Plugin </li></ul><ul><li>http:// www.ericmmartin.com/simplemodal / </li></ul><ul><li>http:// jquery.bassistance.de /validate/demo/ </li></ul><ul><li>http:// interface.eyecon.ro/demos/drag_drop_tree.html </li></ul><ul><li>http:// interface.eyecon.ro/demos/sort.html </li></ul><ul><li>http:// gmarwaha.com /blog/?cat=8 </li></ul>
  7. 7. Câu hỏi: Bạn muốn viết code JavaScript theo cách nào? <ul><li>Tìm (trong sách hoặc trên Internet) và copy-and-paste. </li></ul><ul><li>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. </li></ul><ul><li>Muốn làm gì thì viết từ đầu. </li></ul>
  8. 8. Thế nào là Javascript Framework <ul><li>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ả. </li></ul><ul><li>Trong C: #include< stdio.h > </li></ul><ul><li>Trong Javascript: </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;/js/lib/ lib.min.js &quot;></script> </li></ul></ul>
  9. 9. Tại sao nên dùng các thư viện Javascript <ul><li>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). </li></ul>
  10. 10. Khi nào thì KHÔNG nên dùng các thư viện Javascript có sẵn <ul><li>Khi đang học về Javascript </li></ul><ul><li>Không “giết gà bằng dao mổ trâu”. </li></ul><ul><li>Khi tự xây dựng các thư viện Javascript cho riêng mình. </li></ul>
  11. 11. Có những loại thư viện Javascript nào?
  12. 12. Thế nào là một thư viện Javascript tốt? <ul><li>Hỗ trợ trong việc giải quyết các vấn đề thường gặp (sử lý DOM, AJAX…) </li></ul><ul><li>Cross-browser </li></ul><ul><li>Có tài liệu hướng dẫn sử dụng chi tiết. </li></ul><ul><li>Dễ dùng </li></ul><ul><li>Ít xung khắc với các thư viện Javascript khác. </li></ul>
  13. 13. Các thư viện mã nguồn mở
  14. 15. Giới thiệu các thư viện nổi tiếng
  15. 16. Tổng quan về Prototype <ul><li>Bắt đầu từ đầu 2005 bởi Sam Stephenson </li></ul><ul><li>Nhanh chóng phát triển, gắn liền với cộng đồng Ruby on Rails </li></ul><ul><li>Được hỗ trợ bởi công ty 37 Signals </li></ul>
  16. 17. Tổng quan về Jquery <ul><li>Đư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) </li></ul><ul><li>Phát triển rất nhanh. </li></ul><ul><li>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ó. </li></ul>
  17. 18. Tổng quan về YUI <ul><li>Ra mắt tháng 2 năm 2006 bởi Yahoo! </li></ul><ul><li>Phát triển và hỗ trợ trong nội bộ công ty Yahoo. </li></ul><ul><li>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. </li></ul>
  18. 19. Tổng quan về Dojo <ul><li>Phát triển vào đầu năm 2005 bởi Alex Russell + Co. </li></ul><ul><li>Cộng đồng phát triển lớn. </li></ul><ul><li>Nhiều công ty lớn hỗ trợ (IBM, AOL) </li></ul><ul><li>Thư viện rất lớn, hỗ trợ rất nhiều chức năng. </li></ul>
  19. 20. Tại sao chọn JQuery <ul><li>Dễ dùng, code ngắn gọn, dễ hiểu </li></ul><ul><li>File thư viện nhỏ gọn </li></ul><ul><li>Có nhiều Plugin </li></ul><ul><li>Nhiều công ty lớn dùng nó: </li></ul><ul><ul><li>Google, BBC, Digg, </li></ul></ul><ul><ul><li>Wordpress, Amazon, IBM. </li></ul></ul><ul><li>Một số công ty Web Việt Nam dùng Jquery: </li></ul><ul><ul><li>NAISCORP(socbay), VCCORP(baamboo), VINAGAME(zing)… </li></ul></ul><ul><li>Note: Right Tool for Right Job </li></ul>
  20. 21. So sánh Jquery với các thư viện khác <ul><li>Khác với Prototype và mooTools... </li></ul><ul><ul><li>... Nó không phá hoại global namespace của bạn. </li></ul></ul><ul><li>Khác với YUI... </li></ul><ul><ul><li>... Nó rất ngắn gọn, cô đọng </li></ul></ul><ul><ul><li>YUI: YAHOO.util.Dom.getElementsByClassName() </li></ul></ul><ul><ul><li>Jquery: $() </li></ul></ul><ul><li>Khác với Dojo... </li></ul><ul><ul><li>... 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)! </li></ul></ul>
  21. 22. Tóm tắt lại kiến thức về CSS <ul><li>Để học Jquery, bạn buộc phải nắm vững CSS </li></ul>#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”
  22. 23. CSS 2 và CSS 3 <ul><li>CSS 2 </li></ul><ul><ul><li>http://www.w3.org/TR/REC-CSS2/selector.html </li></ul></ul><ul><li>CSS 3 </li></ul><ul><ul><li>http://www.w3.org/TR/css3-selectors/ </li></ul></ul>
  23. 24. Jquery và hàm $() <ul><li>$().ready ( function() { </li></ul><ul><li>…………………………… . </li></ul><ul><li>} ) ; </li></ul><ul><li>So sánh với </li></ul><ul><li>window.onload = function() { </li></ul><ul><li>…… . </li></ul><ul><li>} ; </li></ul>
  24. 25. 3 mức độ sử dụng Jquery <ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul>
  25. 26. Demo về Jquery, so sánh nó với cách làm bình thường (raw code) <ul><li>Bài toán 1: Tạo ra bảng kiểu ngựa vằn (zebra) </li></ul>
  26. 27. <ul><li>DEMO </li></ul><ul><li>Cách 1: </li></ul><ul><ul><li>Dùng HTML + CSS </li></ul></ul><ul><li>Cách 2: </li></ul><ul><ul><li>Dùng Javascript theo cách bình thường </li></ul></ul><ul><li>Cách 3: </li></ul><ul><ul><li>Dùng Jquery </li></ul></ul><ul><li>Tham khảo: </li></ul><ul><li>http://www.langtags.com/jses/articles/20061119/a218618280.html </li></ul>
  27. 28. Demo về Jquery, so sánh nó với cách làm bình thường (raw code) <ul><li>Bài toán 2: Validate email trong form </li></ul>
  28. 29. <ul><li>DEMO </li></ul><ul><li>Cách 1: </li></ul><ul><ul><li>Dùng Javascript theo cách bình thường </li></ul></ul><ul><li>Cách 2: </li></ul><ul><ul><li>Dùng Jquery </li></ul></ul><ul><li>Tham khảo: </li></ul><ul><li>http://jquery.bassistance.de/validate/demo/ </li></ul>
  29. 30. Khi làm AJAX có thể áp dụng Jquery không? <ul><li>Có thể áp dụng Jquery! </li></ul><ul><li>Ví dụ (không DEMO) </li></ul><ul><li>Dùng AJAX theo cách bình thường </li></ul><ul><ul><li>http://www.w3schools.com/Ajax/ajax_server.asp </li></ul></ul><ul><li>Dùng AJAX áp dụng Jquery </li></ul><ul><ul><li>http://docs.jquery.com/AJAX </li></ul></ul><ul><ul><li>$(&quot;#feeds&quot;).load(&quot;feeds.html&quot;); </li></ul></ul>
  30. 31. Giao lưu <ul><li>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: </li></ul><ul><ul><li>http://ohisee.com/?p=906 </li></ul></ul>

×