Bài giảng: PHÁT TRIỂN ỨNG DỤNG WEB

Bài giảng PHÁT TRIỂN ỨNG DỤNG WEB Lê Đình Thanh Bộ mơn Mạng Truyền thơng Máy tính Khoa Cơng nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhld@vnu.edu.vn, thanhld.vnuh@gmail.com Mobile: 0987.257.504 Bài Nội dung web Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Nội dung • • • • • HTML CSS JavaScript DOM Sự phát triển: HTML5, CSS3 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web JavaScript Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Tại sử dụng JavaScript? • HTML: – Cung cấp thẻ tạo (khai báo) đối tượng tài liệu không cung cấp khả quản lý (hủy, thay đổi thuộc tính, triệu gọi phương thức) chúng ● Ví dụ: thẻ tạo nút bấm HTML không xử lý kiện nút bấm (onclick) • JavaScript (Scripts): – Quản lý (tạo, hủy bỏ, thay đổi thuộc tính, triệu gọi phương thức) đối tượng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web JavaScript • Được sử dụng rộng rãi • Tựa C – Khác C điểm: ● ● ● ● Định kiểu không tường minh Khai báo biến từ khóa var; Định nghĩa hàm từ khóa function Khai báo mảng Array() • Sử dụng HTML: – – – Viết lệnh JavaScript cặp thẻ - phân đoạn Javascript Có thể đặt (nhiều) phân đoạn javascript đâu trang HTML Gọi hàm JavaScript thuộc tính kiện đối tượng HTML Lê Đình Thanh, Bài giảng Phát triển ứng dụng web JavaScript: Khai báo, sử dụng biến Lê Đình Thanh, Bài giảng Phát triển ứng dụng web JavaScript: Khai báo, sử dụng biến Lê Đình Thanh, Bài giảng Phát triển ứng dụng web JavaScript: Khai báo, sử dụng hàm Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Javascript: Đối tượng • Mọi thứ javascript đối tượng • Tuy nhiên, javascript không định nghĩa lớp mà trực tiếp khai báo đối tượng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Mở cửa sổ Cửa sổ trả giá trị returnValue Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Thay nội dung frame Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Thay nội dung iframe Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Truy cập điều khiển hàm javascript frame iframe Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Nhận phím bấm Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Đặt điều khiển chọn Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: In web Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Vấn đề trình duyệt Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Vấn đề • Vấn đề: Một trang web (cùng nội dung, mã nguồn) (hiển thị tương tác) khác trình duyệt khác • Ngun nhân: Có nhiều hãng tạo nhiều trình duyệt khác MS-IE, Moz.-FF, GoogleChrome, … Các hãng không thống với cách xử lý (bản chất trình duyệt trình thơng dịch) • Ví dụ: – – – window.event thể IE addEventListener hỗ trợ FF tương đương với attachEvent hỗ trợ IE style.display = “block” xử lý khác IE, FF, Chrome Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Mong muốn giải pháp • Mong muốn: Trang web thể tất trình duyệt (cross-browser) • Giải pháp: – Sử dụng đối tượng, thuộc tính, phương thức hỗ trợ xử lý trình duyệt – Tùy trình duyệt mà sinh mã cho phù hợp ● – Lấy thơng tin trình duyệt: window.clientInformation.appName/.appVersion/ Platform Khuyến cáo sử dụng trình duyệt ưu tiên Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ứng dụng mẫu: Table Sorter Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ứng dụng mẫu: Tree Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ứng dụng mẫu: Tabbed Content Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ứng dụng mẫu: Calculator Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Tiếp theo HTML5, CSS3 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web