áp dụng các thư viện (framework) javascript vào việc tạo hiệu ứng cho web

Áp dụng các thư viện Framework Javascript vào việc tạo hiệu ứng cho WebNgười thuyết trình: Đặng Minh Tuấn... Mục đích của buổi Seminar• Đưa đến khái niệm cơ bản về các thư viện Javascrip

Á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

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à paste

copy-and-• 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ư

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

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

– Wordpress, Amazon, IBM.

• Một số công ty Web Việt Nam dùng Jquery:

– NAISCORP(socbay), VCCORP(baamboo),

VINAGAME(zing)…

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.

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

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

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