Hoc Jquery Trong 1h

Á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

Đô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)

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.

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

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

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

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.

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>

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

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.

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

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.

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

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

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

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

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.

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.

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

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)!

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”

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/

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

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.

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)

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

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

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/

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");

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

Hoc Jquery Trong 1h

More Related Content

What's hot (19)

Viewers also liked (8)

Similar to Hoc Jquery Trong 1h (20)

More from Dang Tuan (20)

Hoc Jquery Trong 1h