á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 – http://www.noupe.com/jquery/50-amazing-jquery-exam ples-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... (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/a21861828 0.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... 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... 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. .. 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. .. Đư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... 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á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. 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 đề. 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