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 Khoa Công nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhld@vnu.edu.vn Mobile: 0987.257.504 Chương Quản lý trang web JavaScript Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Nội dung • • • • • • JavaScript DOM BOM Quản lý trang web SOP Vấn đề trình duyệt 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, Java  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 Mảng ánh xạ • 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 Khai báo, sử dụng biến Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Khai báo, sử dụng biến Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Khai báo, sử dụng hàm Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Mảng • Khai báo  Chính tắc   Rút gọn   var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; var myCars=new Array("Saab", "Volvo", "BMW"); Nguyên thủy  var myCars=["Saab", "Volvo“, "BMW"]; • Truy cập phần tử   var name=myCars[0]; myCars[0]="Saab"; 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, Google-Chrome, … 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.opacity hỗ trợ từ IE 9.0, FF 2.0, Chrome 4.0 trở lên 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 AJAX JSON Lê Đình Thanh, Bài giảng Phát triển ứng dụng web