›
›

Tài liệu hướng dẫn giảng dạy Chương trình kỹ thuật viên - Học phần 5: Lập trình web nâng cao

pdf 60 trang phuongnguyen 9730
Download
Bạn đang xem 20 trang mẫu của tài liệu "Tài liệu hướng dẫn giảng dạy Chương trình kỹ thuật viên - Học phần 5: Lập trình web nâng cao", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdftai_lieu_huong_dan_giang_day_chuong_trinh_ky_thuat_vien_hoc.pdf

Nội dung text: Tài liệu hướng dẫn giảng dạy Chương trình kỹ thuật viên - Học phần 5: Lập trình web nâng cao

  1. TRUNG TÂM TIN HỌC - ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP. HCM 227 Nguyễn Văn Cừ – Quận 5 – Tp. Hồ Chí Minh Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn TÀI LIỆU HƯỚNG DẪN GIẢNG DẠY CHƯƠNG TRÌNH KỸ THUẬT VIÊN Học phần 5 LẬP TRÌNH WEB NÂNG CAO Mã tài liệu: DT_NCM_LT_HDGD_LTWEBNC Phiên bản 1.1 – Tháng 08/04
  2. Tài liệu hướng dẫn giảng dạy Mục lục Mục lục 1 GIỚI THIỆU 3 GIÁO TRÌNH LÝ THUYẾT 4 TÀI LIỆU THAM KHẢO 4 HƯỚNG DẪN PHẦN LÝ THUYẾT 5 Bài 1 TỔNG QUAN VỀ JAVASCRIPT 5 I. Giới thiệu bài học 6 II. JavaScript và hỗ trợ của trình duyệt 7 II.1. Đoạn JavaScript đầu tiên 8 III. Sơ lược về ngôn ngữ JavaScript 9 III.1. Demo: Sử dụng Visual InterDEV để lập trình JavaScript 12 IV. Thời điểm thực hiện một đoạn Script 13 V. Phạm vi sử dụng biến 15 VI. Các đối tượng cơ sở trong JavaScript 16 Bài 2 Các đối tượng JavaScript trong trang Web 17 I. Giới thiệu bài học 18 II. Các đối tượng trong trang web 19 II.1. Sơ đồ các đối tượng trong trang web 20 II.2. Truy cập đến các đối tượng 21 III. Đối tượng window và document 22 III.1. Sử dụng đối tượng Windows 23 III.2. Sử dụng đối tượng Document 26 IV. Đối tượng form và các thành phần 28 IV.1. Sử dụng đối tượng form 29 IV.2. Tổng quan các đối tượng trong form 31 IV.3. Tổng quan các đối tượng trong form (tt) 32 IV.4. Đối tượng Text 33 IV.5. Đối tượng CheckBox và RadioButton 34 IV.6. Đối tượng Select 36 V. Kiểm tra dữ liệu nhập trên form 38 Học phần 5 – Lập Trình Web Nâng Cao Trang 1/59
  3. Tài liệu hướng dẫn giảng dạy Bài 3 Các đối tượng mở rộng trong JavaScript 39 I. Giới thiệu bài học 40 II. Xử lý các sự kiện bằng đối tượng event 41 II.1. Đối tượng event 42 II.2. Xử lý các sự kiện bàn phím 43 II.3. Xử lý các sự kiện chuột 45 III. Các đối tượng mở rộng 46 III.1. Sử dụng đối tượng Image 47 III.2. Sử dụng đối tượng location 49 III.3. Sử dụng đối tượng history 50 III.4. Sử dụng đối tượng navigator 51 IV. Làm việc với các frame 52 ĐỀ THI MẪU CUỐI NHÓM HỌC PHẦN 55 ĐỀ THI MẪU KIỂM TRA GIÁO VIÊN 59 Học phần 5 – Lập Trình Web Nâng Cao Trang 2/59
  4. Tài liệu hướng dẫn giảng dạy GIỚI THIỆU Sau khi hoàn thành khóa học, học viên sẽ có khả năng: • Sử dụng thành thạo ngôn ngữ JavaScript • Sử dụng thành thạo môi trường lập trình web Visual InterDEV • Xây dựng các ứng dụng web hoàn chỉnh Với thời lượng là 36 tiết LT và 60 tiết TH được phân bổ như sau: STT Bài học Số tiết LT Số tiết TH 1 Tổng quan về JavaScript 6 10 2 Các đối tượng JavaScript trong trang web 6 8 3 Các đối tượng JavaScript mở rộng 2 2 4 Thực tập đồ án thực tế web 22 40 Tổng số tiết : 36 60 Học phần 5 – Lập Trình Web Nâng Cao Trang 3/59
  5. Tài liệu hướng dẫn giảng dạy GIÁO TRÌNH LÝ THUYẾT Sử dụng giáo trình “Lập Trình Ứng Dụng Web” của tác giả Nguyễn Thái Hưng, in lần thứ 1. TÀI LIỆU THAM KHẢO Học phần 5 – Lập Trình Web Nâng Cao Trang 4/59
  6. Tài liệu hướng dẫn giảng dạy HƯỚNG DẪN PHẦN LÝ THUYẾT Bài 1 TỔNG QUAN VỀ JAVASCRIPT Tóm tắt Lý thuyết 6 tiết - Thực hành 10 tiết Mục tiêu Các mục chính Bài tập bắt Bài tập làm buộc thêm Giới thiệu về ngơn ngữ I. Giới thiệu bài học 1.1 – 1.10 JavaScript áp dụng trong việc xây dựng các đọan II. JavaScript và hỗ trợ của trình client-side script. Truyền duyệt đạt cho học viên những III. Sơ lược về ngơn ngữ JavaScript khái niệm quan trọng về thời điểm thực hiện của IV. Thời điểm thực hiện một đoạn một đoạn JavaScritp, biến Script và phạm vi sử dụng cũng như việc sử dụng các đối V. Phạm vi sử dụng biến tượng cơ bản của JavaScritp như String, VI. Các đối tượng cơ sở trong Date, Math, để xử lý các JavaScript dữ liệu nhập, xuất. Sau khi hồn tất bài học này, học viên cĩ thể: „ Nắm vững cú pháp của ngơn ngữ JavaScript „ Xác định thời điểm một đọan Script được thực hiện „ Sử dụng mơi trường Visual InterDEV để lập trình với JavaScript „ Sử dụng được các đối tượng cơ sở của JavaScript Học phần 5 – Lập Trình Web Nâng Cao Trang 5/59
  7. Tài liệu hướng dẫn giảng dạy I. Giới thiệu bài học Nội dung bài học „ JavaScript và hỗ trợ của trình duyệt „ Sơ lược về ngơn ngữ JavaScript „ Sử dụng Visual InterDEV „ Thời điểm thực hiện một đoạn Script „ Phạm vi của biến „ Các đối tượng cơ sở trong JavaScript Trong mơ hình 3 lớp của ứng dụng web, tới giờ này bạn cĩ thể thấy rõ vai trị xử lý của 2 lớp CSDL và web server. Nhiệm vụ của web browser lúc này vẫn chỉ là hiển thị những kết quả xử lý của web server. Thực sự, client (web browser) cũng cĩ khả năng thực hiện các xử lý, tính tốn riêng của mình. Bài này trình bày với bạn cách sử dụng JavaScript để lập trình trên Web browser. Bạn sẽ biết cách sử dụng mơi trường Visual InterDEV để viết các đoạn JavaScript, xác định thời điểm mà đoạn Script sẽ được thực hiện và làm việc với các đối tượng cơ sở của JavaScript như String, Date, Học phần 5 – Lập Trình Web Nâng Cao Trang 6/59
  8. Tài liệu hướng dẫn giảng dạy II. JavaScript và hỗ trợ của trình duyệt JavaScript và hỗ trợ của trình duyệt „ Một số xử lý đơn giản khơng cần thiết gửi về Server. Cần cĩ: { Một cơ chế thi hành chương trình tại browser { Một cơng cụ để viết chương trình cho browser „ JavaScript là cơng cụ lập trình Client Script phổ biến nhất { Được hỗ trợ bởi các web browser phổ biến { Nhiều lập trình viên Web sử dụng, chia sẻ Ứng dụng Web với HTML và ASP Với HTML và ASP hay một Server script nào khác ta hồn tồn cĩ thể xây dựng một ứng dụng Web hồn chỉnh với đầy đủ các tính năng về truy xuất và quản lý CSDL. Mơ hình ứng dụng của chúng ta đặt tồn bộ các xử lý ở Web server, mỗi lần thực hiện một chức năng client sẽ gửi yêu cầu cho Web server và chờ nhận kết quả. Nếu bạn đang thực hành trên máy đơn với Web server đặt chính tại máy mà bạn chạy trình duyệt hoặc trên một máy trong hệ thống mạng Intranet, tốc độ tương tác giữa Web server và Client sẽ khơng quan trọng hay thậm chí nhanh gần bằng tốc độ của một ứng dụng Windows Application. Tuy nhiên, nếu thử ứng dụng thực sự trên Internet, bạn sẽ thấy tốc độ là một yếu tố ảnh hưởng rất nhiều tới một ứng dụng web. Tìm cách tăng tốc độ cho ứng dụng web Nếu cân nhắc kỹ, ta thấy một số xử lý đơn giản thực ra khơng cần thiết gửi về cho Server. Ví dụ, nếu người dùng nhập dữ liệu sai hay thiếu thì gửi dữ liệu đĩ về cho Web server cũng khơng xử lý được. Vậy, những xử lý đĩ cĩ thể đặt ở vị trí nào? Cần cĩ một cơ chế thực thi chương trình được hỗ trợ bởi trình duyệt và một cơng cụ để viết chương trình chạy ngay tại trình duyệt, đĩ chính là Client Script mà chúng ta đã cĩ dịp nĩi tới. JavaScript là cơng cụ lập trình Client Script phổ biến nhất. Đầu tiên, nĩ được Nestcape xây dựng với tên gọi LiveScript. LiveScript lấy nhiều ý tưởng từ Java của Sun và sau đĩ được đổi tên thành JavaScript. Các bộ trình duyệt đầu tiên hỗ trợ JavaScript là của Nestcape, tiếp theo chân Nestcape, Microsoft cung cấp các phiên bản IE từ 4.0 hỗ trợ JavaScript để các trình duyệt web nhỏ khác “noi gương” theo. Microsoft thậm chí cịn tung ra ngơn ngữ Jscript của riêng mình bên cạnh VBScript khá giống với JavaScript của Nestcape. Với sự hỗ trợ của các trình duyệt, JavaScript liên tục được nâng cấp qua nhiều phiên bản và chứng tỏ được tính hiệu quả qua sự cuốn hút của nĩ với các nhà lập trình Web. Giờ đây trên Internet, bạn cĩ thể tìm ra vơ số những đoạn JavaScript hữu dụng cho trang web của mình. Ứng dụng của JavaScript cĩ thể nĩi chủ yếu gồm 2 phần: Kiểm tra dữ liệu nhập và trình bày giao diện cho trang web. Trong chương này và chương kế, chúng tơi sẽ tập trung vào việc kiểm tra dữ liệu nhập. Ở chương sau đĩ, bạn sẽ được cung cấp các ví dụ đa dạng cho các ứng dụng về giao diện của JavaScript. Học phần 5 – Lập Trình Web Nâng Cao Trang 7/59
  9. Tài liệu hướng dẫn giảng dạy II.1. Đoạn JavaScript đầu tiên Đoạn JavaScript đầu tiên „ Các đoạn code JavaScript cần đặt trong tag „ JavaScript phân biệt chữ HOA/thường „ Đối tượng document đại diện cho trang web và hành động write dùng để ghi một chuỗi HTML trong trang web Ví dụ function cmdOK_onclick() { document.write(frm.txtTen.value) } Doan JavaScript dau tien Ten cua ban   Khi chạy thử và nhập tên vào textbox: Click vào nút OK, tên của bạn sẽ được hiện trên một trang web khác, chỉ cĩ 1 dịng: Nguyen Thai Hung Bạn cần nắm 3 điểm cơ bản sau: Các đoạn code JavaScript cần đặt trong tag JavaScript phân biệt chữ HOA/thường Đối tượng document đại diện cho trang web và hành động write dùng để ghi một chuỗi HTML trong trang web Học phần 5 – Lập Trình Web Nâng Cao Trang 8/59
  10. Tài liệu hướng dẫn giảng dạy III. Sơ lược về ngơn ngữ JavaScript Sơ lược về ngơn ngữ JavaScript „ Câu lệnh: khai báo, điều khiển, thực thi „ Biến: khơng cĩ kiểu, cĩ thể (khơng) khai báo trước „ Chỉ cĩ một loại chương trình con: function { Luơn phải cĩ dấu () khi gọi hàm alert(“chuỗi thơng báo”) hiện lên hộp thoại thơng báo document.write(“chuỗi HTML”) ghi chuỗi HTML vào trang web promt(“nội dung nhập liệu”) hiện một hộp thoại nhập liệu Chúng tơi khơng muốn dài dịng về các chi tiết của ngơn ngữ lập trình và cũng như đã làm với VBScript, bạn sẽ dễ dàng nắm những điểm chủ chốt trong cách viết chương trình bằng JavaScript. Ngồi ra, nếu bạn từng viết C hay Java bạn sẽ khơng cần thiết phải đọc phần này. Câu lệnh Cĩ thể chia các câu lệnh trong JavaScript thành 3 loại: Các câu lệnh khai báo biến, hàm Các câu lệnh điều khiển (if, for, while) Các câu lệnh thực thiOK Về nguyên tắc, các câu lệnh thực thi và khai báo biến phải kết thúc bằng dấu ; nhưng bạn thực sự khơng cần tới hai ngĩn tay cho ký tự rườm rà này cuối mỗi dịng. Biến Điểm tương tự này bạn đã từng gặp trong VBScript: biến khơng cĩ kiểu dữ liệu. Bạn sẽ khai báo biến bằng câu lệnh: • var [= ] gán ngay một giá trị cho biến là khơng cần thiết nhưng nếu cĩ, giá trị sẽ giúp bạn dễ xác định kiểu dữ liệu của biến hơn. Biến cĩ thể là một giá trị số, chuỗi, ngày giờ hay một đối tượng. Ví dụ: var doc = document " Chú ý: Hãy cẩn thận với biểu thức cĩ nhiều biến vì JavaScript khơng làm tốt việc tự động chuyển đổi kiểu dữ liệu, thơng thường dữ liệu được chuyển thành kiểu chuỗi. Ví dụ: x = 5 y = “1” z = x + y // z = “51” Học phần 5 – Lập Trình Web Nâng Cao Trang 9/59
  11. Tài liệu hướng dẫn giảng dạy Một số hàm đơn giản Bạn sẽ cần vài hàm đơn giản để hiển thị thơng tin sau: alert(“chuỗi thơng báo”): hiện lên hộp thoại thơng báo document.write(“chuỗi HTML”): ghi chuỗi HTML vào trang web promt(“nội dung nhập liệu”): hiện một hộp thoại nhập liệu Ví dụ: nhập vào một chuỗi và hiện lại thơng báo là chuỗi vừa nhập ten = prompt(“Nhap vao ten cua ban:”) alert(“Xin chao, ” + ten) document.write(“Xin chao, ” + ten + “ ”) Các cấu trúc điều khiển Cấu if else cĩ dạng if (điều kiện){ các lệnh }else{ các lệnh } " Chú ý: Biểu thức điều kiện cần đặt trong dấu (), khi cĩ nhiều điều kiện nối với nhau bạn dùng && thay cho AND, || thay cho OR và ! thay cho NOT. Bạn cũng phải để ý rằng phép tốn so sánh bằng là: == Bộ ngoặc { } dùng để “khoanh vùng” một khối lệnh, nếu chỉ cĩ 1 lệnh bạn khơng cần đến { }. Cấu trúc lặp for cĩ dạng for (I = gt đầu;I ”) Ví dụ trên sẽ in ra trang web 10 số từ 1 đến 10, mỗi số trên một dịng. Học phần 5 – Lập Trình Web Nâng Cao Trang 10/59
  12. Tài liệu hướng dẫn giảng dạy Cấu trúc lặp while cĩ dạng while (điều kiện lặp){ khối lệnh } Chừng nào điều kiện lặp cịn đúng, vịng lặp while sẽ vẫn cịn thực hiện. Hãy xem ví dụ sau biến vịng lặp for thành while: Ví dụ: i = 1 while (i ”) i++ } Nhiều lập trình viên cũng thích viết điều kiện lặp theo kiểu while (1) và dùng câu lệnh break. break cĩ thể dùng cho cả for và while để thốt ra khỏi vịng lặp. Hàm JavaScript giống C và Java, khơng phân biệt thủ tục và hàm, tất cả các chương trình con đều coi là hàm và phải cĩ giá trị trả về. Nếu bạn khơng biết phải trả về cái gì, kiểu trả về là void. Tuy nhiên, JavaScript thậm chí khơng cĩ kiểu nên bạn dùng từ khố function để khai báo hàm, khơng cần khai báo giá trị trả về. function (danh sách các tham số){ khối lệnh } Cũng đừng ngạc nhiên khi bạn chỉ cần liệt kê danh sách các tham số, đơn giản là vì biến khơng cĩ kiểu. Nếu bạn cần trả về giá trị nào đĩ, hãy dùng lệnh return. return khơng cĩ tham số cũng sẽ kết thúc xử lý hàm ngay tại dịng được gọi. Ví dụ: function SoNT(n){ SoNT = (n > 1) for (i=2; i<n; i++) if (i % n = 0) return false } Hàm trên kiểm tra số n cĩ phải là số nguyên tố hay khơng. Học phần 5 – Lập Trình Web Nâng Cao Trang 11/59
  13. Tài liệu hướng dẫn giảng dạy III.1. Demo: Sử dụng Visual InterDEV để lập trình JavaScript Trong phần này, giáo viên sẽ trình bày các kỹ thuật sử dụng Visual InterDEV để lập trình JavaScript: Chèn vào một đọan JavaScript Bẫy các sự kiện như click, onmousedown, Sử dụng Script Outline Học phần 5 – Lập Trình Web Nâng Cao Trang 12/59
  14. Tài liệu hướng dẫn giảng dạy IV. Thời điểm thực hiện một đoạn Script Thời điểm thực hiện một đoạn Script „ Các lệnh khơng nằm trong function được thực hiện ngay lập tức „ Function chỉ thực hiện khi được gọi. Function cĩ thể được gọi { Do một sự kiện { Do một câu lệnh Khi viết chương trình, điều quan trọng mà người lập trình cần biết là thời điểm mà một dịng lệnh được thực hiện. Bạn cĩ thể chèn các đoạn JavaScript ở bất cứ đâu trong trang web tuy nhiên, thời điểm mà các script đĩ được thực hiện như sau: Các lệnh JavaScript khơng nằm trong function sẽ được thực hiện ngay khi trình duyệt xử lý trang web vào lúc khởi động Các function chỉ thực hiện khi được gọi. Một function được gọi từ một lệnh JavaScript hay bởi một sự kiện mà nĩ xử lý Một số sự kiện tự động phát sinh trong khi một số sự kiện phát sinh do tác động của người dùng Ví dụ: document.write("Phan HEAD ") function button1_onclick() { alert("Button click!!!") } function window_onload() { alert("Khoi dong") } document.write("Phan BODY ") Học phần 5 – Lập Trình Web Nâng Cao Trang 13/59
  15. Tài liệu hướng dẫn giảng dạy document.write("Ket thuc xu ly trang web") Khi thực hiện ví dụ trên, bạn sẽ thấy kết quả là trang web như sau: Trang web sẽ hiện ra trước khi hộp thơng báo “Khoi dong” hiển thị. Các đoạn document.write khơng nằm trong function và được thực hiện theo thứ tự từ trên xuống dưới trong trang web. Function windows_onload() được thực hiện do sự kiện onload của đối tượng window phát sinh. Trong trang web, đối tượng window được coi là tag . Hộp thơng báo hiện ra sau khi tồn bộ trang web đã được hiển thị chứng tỏ sự kiện onload diễn ra sau khi tồn bộ document đã được trình duyệt xử lý. Khi bạn click vào Button, hộp thơng báo “Button click!!!” hiện lên, đây là thời điểm mà function button1_onclick được thực hiện. Học phần 5 – Lập Trình Web Nâng Cao Trang 14/59
  16. Tài liệu hướng dẫn giảng dạy V. Phạm vi sử dụng biến Phạm vi sử dụng biến „ Biến cục bộ chỉ cĩ thể tham chiếu trong phạm vi của hàm mà nĩ được khai báo „ Biến tồn cục phải được khai báo ở ngồi các hàm và cĩ phạm vi sử dụng trong tồn bộ trang web Phạm vi sử dụng biến cũng là mối quan tâm khơng nhỏ của người lập trình. JavaScript cũng phân biệt hai loại biến: Biến tồn cục: Khai báo ngồi phạm vi của các function Biến cục bộ: Khai báo trong một function Phạm vi của biến cục bộ là function mà nĩ khai báo. Điều này cĩ nghĩa là các câu lệnh nằm ngồi function khi tham chiếu tới biến này thì sẽ cĩ thể gây ra lỗi. Đương nhiên là bạn khơng gặp lỗi gì cả nếu bạn tham chiếu tới biến đĩ để gán giá trị vì điều này cũng giống như bạn khai báo một biến mới vậy. Phạm vi của biến tồn cục là tồn bộ trang web. Điều này cĩ nghĩa là giữa các đoạn khác nhau, bạn vẫn cĩ thể chia sẻ một biến tồn cục. Biến tồn cục chỉ cĩ phạm vi trong một trang web, khơng liên quan gì tới trang web khác trong cùng một website, nếu bạn muốn lưu một biến tồn cục trong website, bạn sẽ cần dùng đến cookies. Ví dụ: var x = 5 function A(){ var y = 10 x++ document.write("x=" + x + ", y=" +y) } A() x y=1 document.write(" x=" + x + ", y="+y) Học phần 5 – Lập Trình Web Nâng Cao Trang 15/59
  17. Tài liệu hướng dẫn giảng dạy VI. Các đối tượng cơ sở trong JavaScript Các đối tượng cơ sở trong JavaScript „ JavaScript sử dụng các ĐỐI TƯỢNG để xử lý dữ liệu „ Các đối tượng cơ bản: String, Math, Date, Array „ Sử dụng đối tượng x = “abcde” y = x.charAt(3) //vì chỉ số tính từ 0 nên y = “d” doc = window.document doc.write(“ doc cung chinh la document”) “JavaScript”.toUpperCase() //JAVASCRIPT „ Tạo mới đối tượng a = new Array() a(2) = 3 JavaScript cung cấp các hàm cơng cụ thơng qua những đối tượng. Khi cần xử lý các loại dữ liệu cơ bản kiểu chuỗi, số, ngày giờ hay mảng ta sẽ dùng những đối tượng tương ứng: String: xử lý dữ liệu chuỗi Math: xử lý dữ liệu số Date: xử lý dữ liệu ngày, giờ Array: xử lý dữ liệu mảng Vì một biến trong JavaScript khơng cĩ kiểu dữ liệu, JavaScript sẽ dựa vào giá trị chứa trong biến để xác định biến đĩ thuộc loại đối tượng nào. Ví dụ sau đây minh hoạ cách sử dụng đối tượng String. Ví dụ: x = “abcde” y = x.charAt(3) //vì chỉ số tính từ 0 nên y = “d” Ví dụ sau minh hoạ cách gán một đối tượng cho một biến: Ví dụ: doc = document doc = window.document doc.write(“Doi tuong doc cung chinh la document”) JavaScript cũng cĩ thể áp dụng các hành động (method) hay thuộc tính (property) trực tiếp trên các giá trị. Ví dụ: “Thomas Jefferson”.toUpperCase() //THOMAS JEFFERSON “JavaScript”.length // 10 " Chú ý: Giáo viên hướng dẫn học viên sử dụng tài liệu để tham khảo các bảng liệt kê các thuộc tính và hành động thường dùng của các đối tượng. Học phần 5 – Lập Trình Web Nâng Cao Trang 16/59
  18. Tài liệu hướng dẫn giảng dạy Bài 2 Các đối tượng JavaScript trong trang Web Tóm tắt Lý thuyết 6 tiết - Thực hành 8 tiết Mục tiêu Các mục chính Bài tập bắt Bài tập làm buộc thêm Đây là bài giảng quan I. Giới thiệu bài học 2.1 – 2.5 trọng nhất của phần II. Các đối tượng trong trang web JavaScript, tập trung vào việc sử dụng các đối III. Đối tượng window và document tượng trong trang web IV. Đối tượng form và các thành phần dựa vào sơ đồ các đối tượng được trình bày ở V. Kiểm tra dữ liệu nhập trên form đầu bài giảng. Bên cạnh việc hướng dẫn sử dụng từng đối tượng cụ thể, giáo viên nên thường xuyên tham chiếu lại sơ đồ đối tượng để học viên cĩ thể nắm bắt cách truy cập vào một đối tượng cần làm việc. Sau khi hồn tất bài học này, học viên cĩ thể: „ Đọc hiểu sơ đồ các đối tượng „ Sử dụng các đối tượng window và document để quản lý trang web „ Sử dụng các đối tượng của form, truy cập và kiểm tra các dữ liệu nhập trên form. Học phần 5 – Lập Trình Web Nâng Cao Trang 17/59
  19. Tài liệu hướng dẫn giảng dạy I. Giới thiệu bài học Nội dung bài học „ Các đối tượng trong trang web „ Đối tượng window và document „ Đối tượng form và các thành phần „ Kiểm tra dữ liệu nhập trên form Ở bài trước, bạn đã nắm hết các nền tảng của JavaScript bao gồm các đối tượng cơ bản, cách đưa script vào trang web và cách xử lý các sự kiện phát sinh từ trang web. Trong bài này, chúng ta sẽ tiếp tục với những đối tượng như form, textbox, button, Làm sao để truy cập đến những đối tượng này? Chúng cĩ những thuộc tính và sự kiện gì? Nắm được những điểm này, bạn đã cĩ thể tồn quyền kiểm sốt được trang web trong khi người dùng thao tác. Học phần 5 – Lập Trình Web Nâng Cao Trang 18/59
  20. Tài liệu hướng dẫn giảng dạy II. Các đối tượng trong trang web Các đối tượng trong trang web „ Sơ đồ các đối tượng trong trang web „ Truy cập đến các đối tượng Về mặt cấu trúc, trang web cĩ thể coi là một tài liệu với các thành phần bên trong như các liên kết, hình ảnh, form, Để cĩ thể làm việc với từng thành phần đĩ, JavaScript cung cấp cho người lập trình một sơ đồ tổ chức các đối tượng phân cấp trong trang web. Dựa trên sơ đồ này, người lập trình cĩ thể truy cập và làm việc được với bất kỳ đối tượng nào. Học phần 5 – Lập Trình Web Nâng Cao Trang 19/59
  21. Tài liệu hướng dẫn giảng dạy II.1. Sơ đồ các đối tượng trong trang web Sơ đồ các đối tượng trong trang web window document form navigator text image event textarea all location radio styleSheet history checkbox link screen button anchor select option password Đọc sơ đồ đối tượng là một kỹ năng rất quan trọng của người lập trình. Hầu hết các ngơn ngữ lập trình đều sử dụng kỹ thuật lập trình hướng đối tượng, do đĩ, khi làm việc người viết chương trình chỉ cần nắm vững các đối tượng và mối liên hệ giữa chúng là cĩ thể xử lý rất nhiều cơng việc thơng thường. Dưới đây là sơ đồ các đối tượng trong trang web, sơ đồ này sẽ giúp bạn nhìn ra cách truy cập đến bất cứ đối tượng nào. window documen form navigator text image event textarea all location radio styleShee history checkbox link screen button anchor select option password Học phần 5 – Lập Trình Web Nâng Cao Trang 20/59
  22. Tài liệu hướng dẫn giảng dạy II.2. Truy cập đến các đối tượng Truy cập đến các đối tượng „ Truy cập các đối tượng: window.document.frmThongTin.txtTen „ Các thành phần của một đối tượng bao gồm thuộc tính, hành động và sự kiện „ Truy cập một đối tượng trong tập hợp qua thuộc tính tập hợp Với sơ đồ đối tượng trên, bạn cĩ thể truy cập textbox txtTen trong form frmThongTin như sau: window.document.frmThongTin.txtTen Một trang web chỉ cĩ một cửa sổ là đối tượng window. Trong cửa số chứa trang web là nội dung của trang web đĩ, đại diện bởi đối tượng document. Vì trong một trang web, bạn cĩ thể làm nhiều form nên để truy cập đến một form cụ thể, bạn cần chỉ ra tên form đĩ. Truy cập các thành phần trong đối tượng Tốn tử (.) chính là cách để bạn truy cập vào các thành phần bên trong của một đối tượng. Một đối tượng cĩ thể bao gồm các thành phần: thuộc tính, hành động và sự kiện. Thuộc tính tập hợp Trong các thuộc tính cĩ một loại thuộc tính đặc biệt là các tập hợp hay đơn giản cĩ thể coi là các mảng. Ví dụ, trong document sẽ cĩ một tập hợp các form. Tập hợp này cĩ tên là forms (chú ý đến chữ s ở cuối). Nếu trong trang web chỉ cĩ một form là frmThongTin bạn cĩ thể truy cập frmThongTin như sau: document.forms(0) document.frmThongTin Đơi khi, việc sử dụng sơ đồ đối tượng để truy cập các đối tượng trong trang web sẽ trở nên dài dịng vì ngồi việc truy cập tới đối tượng, mục tiêu chính của bạn là sử dụng những thuộc tính hay hành động của nĩ. Lúc này, ta thường khai báo thêm biến để lưu lại đối tượng muốn sử dụng: var f = document.frmThongTin f.txtTen.value = “Nguyen Thai Hung” Học phần 5 – Lập Trình Web Nâng Cao Trang 21/59
  23. Tài liệu hướng dẫn giảng dạy III. Đối tượng window và document Đối tượng window và document „ Sử dụng đối tượng Windows „ Sử dụng đối tượng Document Hai đối tượng ở cấp cao nhất trong sơ đồ các đối tượng là window và document. Hai đối tượng này nắm quyền kiểm sốt trang web và cửa sổ hiển thị nĩ. So sánh với ứng dụng trên Windows, đối tượng window cũng tương tự như đối tượng form trong khi document cĩ thể là một đối tượng chính mà form hiển thị và xử lý. Học phần 5 – Lập Trình Web Nâng Cao Trang 22/59
  24. Tài liệu hướng dẫn giảng dạy III.1. Sử dụng đối tượng Windows Sử dụng đối tượng Windows „ Đối tượng window đại diện cho cửa sổ trình duyệt chứa trang web „ Hành động open và close „ Thuộc tính status „ Hành động setInterval và clearInterval „ Hành động setTimeout và clearTimeout „ Hành động alert và confirm Trên sơ đồ đối tượng, bạn cĩ thể thấy đối tượng window nằm ở mức cao nhất, khơng cĩ đối tượng nào chứa nĩ. window đại diện cho cửa sổ chứa trang web. Hành động open và close Ví dụ: function cmdClose_onclick() { window.close() } function cmdNew_onclick() { window.open(" ") }   Ví dụ trên minh hoạ hai hành động close và open của window. Khi click vào nút New window, một cửa sổ trình duyệt mới sẽ hiện truy cập tới trang web của Yahoo!. Đây là cách mà các trang web vẫn “làm phiền” bạn mỗi khi truy cập tới nĩ, một loạt các cửa sổ popup hiện ra các trang quảng cáo! Hành động open cĩ cú pháp như sau: window.open(“URL”,”Tên cửa sổ”,”Các đặc điểm”) trong đĩ, các đặc điểm của cửa số như toolbar, statusbar, width, heigh, Ví dụ sau mở một cửa số mới khơng cĩ thanh toolbar và statusbar, rộng 200, dài 300 và cĩ thể thay đổi kích thước. window.open(" ","","toolbar=0, statusbar=0,width=200,height=300,resizable=1") Học phần 5 – Lập Trình Web Nâng Cao Trang 23/59
  25. Tài liệu hướng dẫn giảng dạy Thuộc tính status Thanh statusbar của cửa sổ trình duyệt dùng để hiển thị các thơng tin như địa chỉ URL của một mối liên kết, trạng thái download của trang web, khởi động applet, Một số trang web tận dụng JavaScript để biến statusbar thành nơi hiển thị tiêu đề trang web với các ký tự chạy qua chạy lại, Bạn cũng thường dùng statusbar khi cần đưa ra những giúp đỡ khi người dùng di chuyển chuột tới một vị trí nào đĩ trên trang web. Trong trang web của ví dụ trên, bạn cĩ thể sử dụng sự kiện onMouseOver của cmdClose để hiện thơng báo trên statusbar như “Dong cua so nay.” window.status = “Dong cua so nay.” Hành động setInterval và clearInterval window.setInterval() dùng để định khoảng chu kỳ thời gian một hành động được thi hành. Ngược lại với nĩ, window.clearInterval() dùng để xố bỏ chu kỳ thời gian mà setInterval() đã tạo ra. Để tạo ra một chu kỳ thời gian và thực hiện một hành động: id = window.setInterval(“tên hàm thực hiện”,millisecond) Để xố chu kỳ thời gian đã tạo: window.clearInterval(id) Ví dụ sau đây minh hoạ cách sử dụng setInterval và status để tạo một chuỗi chạy trên thanh statusbar: Ví dụ: complete = "JavaScript in a second" cur="" function title(){ if (cur.length==complete.length) cur="" cur+=complete.charAt(cur.length) window.status=cur } Trong ví dụ trên, để chu kỳ được tạo ra ngay khi trang web hiển thị, ta dùng sự kiện onload của đối tượng window. Nếu title() cĩ tham số, các giá trị tham số cĩ thể được truyền sau tham số millisecond ở trên, mỗi tham số cách nhau một dấu phảy (,). Học phần 5 – Lập Trình Web Nâng Cao Trang 24/59
  26. Tài liệu hướng dẫn giảng dạy Ví dụ: id = 0 function time(){ d = new Date() txtTime.value =d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear() + " - " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() } function cmdOn_onclick() { window.clearInterval(id) id = window.setInterval("time()",1000) } function cmdOff_onclick() { window.clearInterval(id) }     Trong ví dụ trên, chúng tơi làm một chiếc đồng hồ để minh hoạ cách sử dụng cả setInterval() và clearInterval(). Hành động setTimeout và clearTimeout Hai hành động này tương tự như setInterval và clearInterval, tuy nhiên, hành động chỉ được thực hiện một lần mà thơi. Hành động alert và confirm Hành động alert bạn vẫn thường sử dụng là một hành động của window. Nĩ hiển thị một hộp thơng báo chỉ cĩ nút OK. Để đưa ra một hộp thoại hỏi đáp với hai nút Yes, No bạn phải sử dụng hành động confirm. Ví dụ sau hiển thị câu hỏi “Bạn cĩ muốn đĩng cửa sổ này khơng?” trước khi quyết định đĩng cửa sổ trình duyệt: if (window.confirm(“Ban co muon dong cua so nay khong?”)) window.close() Học phần 5 – Lập Trình Web Nâng Cao Trang 25/59
  27. Tài liệu hướng dẫn giảng dạy III.2. Sử dụng đối tượng Document Sử dụng đối tượng Document „ Đối tượng document đại diện cho tồn bộ nội dung của trang web „ Mỗi trang web chỉ cĩ một đối tượng document „ Truy cập đối tượng document doc = window.document //sau đĩsử dụng doc hoặc document „ Sử dụng đối tượng document document.write(“ Hành động write của document ”) Trong sơ đồ đối tượng, đối tượng quan trọng nhất dưới window là document. document đại diện cho tồn bộ nội dung của trang web. Điều này cĩ nghĩa là nĩ chứa tất cả các thành phần của trang web bên trong. Một trang web chỉ cĩ một đối tượng document giống như chỉ cĩ một đối tượng window. Bạn cĩ thể truy cập tới document bằng hai cách: doc = window.document //sau đĩ sử dụng doc hoặc document Cách trên thường dùng khi doc là đối tượng document của một cửa sổ mới mở. Hãy xem ví dụ sau: Ví dụ document.write(“ Hành động write của document ”) Ví dụ trên minh hoạ hành động write của đối tượng document. Ví dụ win = window.open() doc = win.document doc.write(" ") Ví dụ này tạo ra một trang web mới theo kiểu “on the fly” tức là khơng cần một file .html cụ thể mà trực tiếp thơng qua hành động write. Trong cả hai ví dụ, bạn cĩ thể xem source code của trang web mới để xem kết quả của write như thế nào. Học phần 5 – Lập Trình Web Nâng Cao Trang 26/59
  28. Tài liệu hướng dẫn giảng dạy Tập hợp all Internet Explorer từ phiên bản 4.0 cung cấp thêm tập hợp all trong đối tượng document. Mục tiêu của all là đơn giản hố việc truy cập các đối tượng qua nhiều cấp. Dưới all, bạn cĩ thể chỉ tới bất cứ đối tượng nào, chẳng hạn một textbox nằm trong một form. Ví dụ, nếu ta cĩ một textbox txtUserName trong form frmUserInfo, bạn cĩ 2 cách truy cập: document.frmUserInfo.txtUserName document.all.txtUserName Chúng ta sẽ cịn gặp lại document rất nhiều trong các phần sau, do đĩ, tới đây chúng tơi xin tạm dừng phần document để đề cập tới phần quan trọng nhất: xử lý form với JavaScript Học phần 5 – Lập Trình Web Nâng Cao Trang 27/59
  29. Tài liệu hướng dẫn giảng dạy IV. Đối tượng form và các thành phần Đối tượng form và các thành phần „ Sử dụng đối tượng form „ Tổng quan các đối tượng trong form „ Đối tượng Text „ Đối tượng CheckBox và RadioButton „ Đối tượng Select JavaScript cĩ thể thực hiện khá nhiều thao tác trên giao diện, xử lý các cửa sổ web browser, thực hiện các hiệu ứng hình ảnh, Tuy nhiên, một trong những điểm mạnh mà nĩ đem lại cho người lập trình là khả năng xử lý các form nhập liệu của trang web. Với khả năng này, JavaScript giúp ứng dụng thực hiện nhiều xử lý tại server, làm cho tốc độ xử lý và thời gian hồi đáp với người dùng của chương trình được cải thiện. Trong phần này, bạn sẽ học các sử dụng JavaScirpt để truy cập vào các form, đọc và xử lý các thơng tin nhập liệu trên form hay xử lý các sử kiện mà người dùng trong quá trình thao tác với form phát sinh ra cũng giống nhưng việc lập trình trên các màn hình của một ứng dụng Windows. Học phần 5 – Lập Trình Web Nâng Cao Trang 28/59
  30. Tài liệu hướng dẫn giảng dạy IV.1. Sử dụng đối tượng form Sử dụng đối tượng form „ Mỗi form được đại diện bởi một đối tượng form „ Truy cập đối tượng form qua document.forms hoặc document.tenForm „ Thuộc tính action, target và method „ Hành động submit và reset Một form trong trang web được đại diện bởi đối tượng form. Do một trang web cĩ thể cĩ nhiều form JavaScript cho phép bạn truy cập các form từ đối tượng document thơng qua tập hợp forms. Ví dụ, để truy cập form đầu tiên trong trang web: document.forms(0) hoặc document.TênForm Thuộc tính action, target và method Ta đã biết rằng chức năng chính của form là để gửi dữ liệu đến server. File tại server sẽ nhận dữ liệu gửi tới được chỉ ra trong thuộc tính action của tag . Đối tượng form cũng mơ phỏng thuộc tính action một cách tương tự. Với thuộc tính này, bạn cĩ thể thay đổi file sẽ nhận dữ liệu tuỳ theo từng điều kiện nhập liệu. Ví dụ, trên form đăng nhập frmLogin bạn cĩ một checkbox dành cho người quên password đăng nhập vào sẽ chuyển tới một trang kiểm tra email để gửi password thay vì trang kiểm tra username, password như bình thường. Ta cĩ thể viết đoạn code sau: Ví dụ: Nếu checkbox được chọn frmLogin.action=”SendPassword.asp” Ngược lại frmLogin.action=”CheckPassword.asp” frmLogin.submit() Thuộc tính target giúp định vị kết quả xử lý của trang web trong action sẽ được hiển thị ở đâu. Khi ứng dụng web thiết kế với nhiều frame, bạn cĩ thể cần chỉ ra tên frame sẽ thể hiện kết quả trong target. Tương tự với action, bạn cĩ thể thay đổi cách thức gửi dữ liệu từ form về server thơng qua thuộc tính method. method cĩ hai giá trị là “POST” và “GET”. Học phần 5 – Lập Trình Web Nâng Cao Trang 29/59
  31. Tài liệu hướng dẫn giảng dạy Hành động submit và reset Trong ví dụ trên, bạn để ý thấy chúng tơi dùng hành động submit() của form để gửi dữ liệu về server. Bạn cĩ thể khơng cần thiết kế nút Submit cho một form rồi chờ đến lúc người dùng click nút này thì dữ liệu mới được gửi về server. Trên thực tế, đa số các form đều thiết kế giao diện hình ảnh với các nút submit là những image. Người lập trình sẽ gọi hành động submit khi cần. Ngược lại với submit là reset. Hành động reset đưa form về trạng thái ban đầu khi server vừa gửi trang web tới cho trình duyệt. Sự kiện onsubmit sự kiện onsubmit xảy ra trước khi dữ liệu của form được gửi tới server bằng cách người dùng click vào nút submit trên form. Điều này cĩ nghĩa là nếu bạn gọi hành động submit() thì sự kiện onsubmit sẽ khơng xảy ra. Hãy chạy thử ví dụ sau đây: Ví dụ: function FORM1_onsubmit() { alert("Su kien OnSubmit") } function FORM1_onreset() { alert("Su kien OnReset") } function cmdReset_onclick() { FORM1.reset() } function cmdSubmit_onclick() { FORM1.submit() } Học phần 5 – Lập Trình Web Nâng Cao Trang 30/59
  32. Tài liệu hướng dẫn giảng dạy IV.2. Tổng quan các đối tượng trong form Tổng quan các đối tượng trong form „ Tập hợp elements của form dùng để truy cập các đối tượng như textbox, checkbox, button, for (i=0;i<FORM1.elements.length;i++) alert(“Doi tuong: “ + FORM1.elements(i).name + “kieu “ + FORM1.elements(i).type) „ Truy cập trực tiếp đến các đối tượng: TênForm.tênĐốiTượng Tập hợp elements Tập hợp elements của form dùng để truy cập các đối tượng như textbox, checkbox, button, trong một form. Các đối tượng được đánh số từ 0. Ví dụ sau minh hoạ liệt kê tất cả các đối tượng cĩ trong form. Ví dụ: for (i=0;i<FORM1.elements.length;i++) alert(“Doi tuong: “ + FORM1.elements(i).name + “ kieu “ + FORM1.elements(i).type) Ví dụ sau sẽ xố trắng các textbox cĩ trong form. Ví dụ: for (i=0;i<FORM1.elements.length;i++) if (FORM1.elements(i).type=”text”) FORM1.elements(i).value=”” Bạn cũng cĩ thể truy cập trực tiếp đến các đối tượng thơng qua tên của đối tượng đĩ bằng cú pháp: tênForm.tênĐốiTượng Học phần 5 – Lập Trình Web Nâng Cao Trang 31/59
  33. Tài liệu hướng dẫn giảng dạy IV.3. Tổng quan các đối tượng trong form (tt) Tổng quan các đối tượng trong form (tt) „ Các sự kiện chung cho các đối tượng trong form { onFocus, onBlur { onClick, onMousedown, onMouseup, onMouseout, onMouseover { onKeyDown, onKeyPress, onKeyUp { onChange Các sự kiện chung cho các đối tượng trong form Để làm việc với các đối tượng, ngồi việc truy cập tới đối tượng đĩ ta cịn phải biết sử dụng các thuộc tính, hành động cũng như nắm được những sự kiện xảy ra trên đối tượng. Mỗi loại đối tượng cĩ những thuộc tính, hành động khác nhau nhưng trên ứng dụng web, các đối tượng trong form cĩ chung những sự kiện sau: „ onFocus: đối tượng nhận focus „ onBlur: đối tượng mất focus „ onClick, onMousedown, onMouseup, onMouseout, onMouseover: các sự kiện click, nhấn, thả, di chuyển chuột vào, ra khỏi đối tượng. „ onKeyDown, onKeyPress, onKeyUp: các sự kiện nhấn, thả phím trên đối tượng onChange: xảy ra trên text, textarea hay select tại thời điểm đối tượng bị mất focus khi giá trị của chúng bị thay đổi Học phần 5 – Lập Trình Web Nâng Cao Trang 32/59
  34. Tài liệu hướng dẫn giảng dạy IV.4. Đối tượng Text Đối tượng Text „ Thuộc tính quan trọng nhất của textbox là value „ Truy cập một thuộc tính của đối tượng: TênĐốiTương.TênThuộcTính function txtCertificate_onchange() { frmTestText.txtCertificate.value= frmTestText.txtCertificate.value.toUpperCase() } Thuộc tính quan trọng nhất của textbox là value. Để truy cập một thuộc tính của đối tượng, bạn sử dụng cú pháp: TênĐốiTương.TênThuộcTính Ví dụ: function txtCertificate_onchange() { frmTestText.txtCertificate.value= frmTestText.txtCertificate.value.toUpperCase() } Ví dụ trên sẽ chuyển nội dung người dùng gõ vào textbox thành chữ hoa. Học phần 5 – Lập Trình Web Nâng Cao Trang 33/59
  35. Tài liệu hướng dẫn giảng dạy IV.5. Đối tượng CheckBox và RadioButton Đối tượng CheckBox và RadioButton „ Hai thuộc tính quan trọng là checked và value { checked: được đánh dấu hay khơng { value: giá trị kể cả khi cĩ hay khơng đánh dấu „ Radio button trong cùng nhĩm phải cĩ cùng tên for (i=0;i function cmdChon_onclick() { mon = "" if (frmTestCheck.chkMon(0).checked ) mon=frmTestCheck.chkMon(0).value if (frmTestCheck.chkMon(1).checked ) mon+=" " + frmTestCheck.chkMon(1).value alert("Ban chon mon: " + mon) } Anh van Toan hoc Trong ví dụ này, chúng tơi cố ý đặt tên hai checkbox trùng nhau để minh hoạ với bạn cách dùng mảng của JavaScript để truy cập các đối tượng trùng tên. Với cách làm này, bạn sẽ áp dụng khi sử dụng đối tượng radio. Học phần 5 – Lập Trình Web Nâng Cao Trang 34/59
  36. Tài liệu hướng dẫn giảng dạy Đối tượng radio Đối tượng radio hồn tồn tương tự với đối tượng checkbox. Trong khi thiết kế các nhĩm lựa chọn (option group) bạn sẽ dùng chung một tên cho các radion button. Với cách này, trình duyệt tự động xác định một radio button thuộc vào một nhĩm hay đứng riêng lẻ. Để xác định một radion button trong nhĩm được chọn, ta sẽ chỉ cĩ một cách duy nhất là duyệt qua tồn bộ các radion button trong nhĩm. Ví dụ: for (i=0;i<frmTestOption.grpMonHoc.length;i++) if (frmTestOption.grpMonHoc(i).checked){ alert(“Ban chon mon “ + frmTestOption.grpMonHoc(i).value break } Học phần 5 – Lập Trình Web Nâng Cao Trang 35/59
  37. Tài liệu hướng dẫn giảng dạy IV.6. Đối tượng Select Đối tượng Select „ Thuộc tính selectedIndex chỉ dùng cho ComboBox „ Tập hợp options trong đối tượng select, đại diện cho các mục chọn Mon hoc Anh van Toan hoc Vat ly Hoa hoc for (i=0;i . Với ListBox (size>1) bạn cũng cĩ thể chỉ định người dùng cĩ thể cùng một lúc chọn nhiều mục hay khơng thơng qua thuộc tính multiple. Nhiệm vụ của chúng ta khi làm việc với đối tượng select là xác định ra mục option nào đang được chọn và giá trị của nĩ là bao nhiêu. Để giúp ta làm việc này, JavaScript cung cấp tập hợp options trong đối tượng select, đại diện cho các mục chọn. Với một option bạn cĩ thể xác định giá trị hay nội dung mục hiển thị thơng qua thuộc tính value và text. Option nào được chọn sẽ cĩ giá trị của thuộc tính selected là true. Như vậy ta cĩ thể dùng cách duyệt qua tập hợp options để xác định ra mục chọn. Ví dụ: function cmdChon_onclick() { for (i=0;i Học phần 5 – Lập Trình Web Nâng Cao Trang 36/59
  38. Tài liệu hướng dẫn giảng dạy Mon hoc Anh van Toan hoc Vat ly Hoa hoc Với cách làm trên, bạn sẽ xử lý tốt nhất với các ListBox cho phép chọn nhiều mục. Tuy nhiên, với những ComboBox hay ListBox chỉ chọn một mục ta cĩ thể dùng thuộc tính selectedIndex của đối tượng select. Ví dụ: sel = frmTestSelect.cboMon.selectedIndex alert(frmTestSelect.cboMon.options(sel).text) Học phần 5 – Lập Trình Web Nâng Cao Trang 37/59
  39. Tài liệu hướng dẫn giảng dạy V. Kiểm tra dữ liệu nhập trên form Kiểm tra dữ liệu nhập trên form function frm_onsubmit(){ hople = true Kiểm tra dữ liệu field 1{ thơng báo lỗi nếu sai hople = false } Kiểm tra dữ liệu field return hople } Học phần 5 – Lập Trình Web Nâng Cao Trang 38/59
  40. Tài liệu hướng dẫn giảng dạy Bài 3 Các đối tượng mở rộng trong JavaScript Tóm tắt Lý thuyết 2 tiết - Thực hành 3 tiết Mục tiêu Các mục chính Bài tập bắt Bài tập làm buộc thêm Hướng dẫn học viên sử I. Giới thiệu bài học 3.1 – 3.5 dụng các đối tượng mở II. Xử lý các sự kiện bằng đối tượng rộng trong JavaScript như event image, history, navigator Hướng dẫn III. Các đối tượng mở rộng cho học viên cách phối IV. Làm việc với các frame hợp giữa các frame trong tragn web sử dụng frameset. Sau khi hồn tất bài học này, học viên cĩ thể: „ Sử dụng đối tượng event để bẫy các sự kiện về con chuột và bàn phím „ Sử dụng các đối tượng image, history, navigator, để tăng tính tiện dụng trong giao diện của ứng dụng web „ Làm việc với các trang web sử dụng frameset Học phần 5 – Lập Trình Web Nâng Cao Trang 39/59
  41. Tài liệu hướng dẫn giảng dạy I. Giới thiệu bài học Nội dung bài học „ Xử lý các sự kiện bằng đối tượng event „ Các đối tượng mở rộng „ Làm việc với các frame Bên cạnh các đối tượng quan trọng trong sơ đồ đối tượng như window, document, form, JavaScript cịn cung cấp một loạt các đối tượng lập trình khác, giúp người lập trình cĩ khả năng xử lý hiệu quả hơn các tình huống phát sinh trong khi giao tiếp với người dùng. Các đối tượng mở rộng như history, navigator, location vượt ra phạm vi của một trang web, cho phép ghi nhớ thơng tin của những trang web đã qua, chuyển tới một trang web khác hay xác định các tính năng của web browser mà người dùng đang sử dụng. Bài này sẽ hướng dẫn bạn sử dụng các đối tượng mở rộng của JavaScript, đồng thời, trình bày một kỹ thuật để lập trình với trang web cĩ nhiều frame. Học phần 5 – Lập Trình Web Nâng Cao Trang 40/59
  42. Tài liệu hướng dẫn giảng dạy II. Xử lý các sự kiện bằng đối tượng event Xử lý các sự kiện bằng đối tượng event „ Đối tượng event „ Xử lý các sự kiện bàn phím „ Xử lý các sự kiện chuột Đối tượng event là một đối tượng “tồn diện” trong việc xử lý các sự kiện diễn ra trên trang web. Thơng qua event, người lập trình JavaScript mới cĩ thể bẫy được các sự kiện chuột và bàn phím một cách tương tự như trên các ứng dụng Windows. Học phần 5 – Lập Trình Web Nâng Cao Trang 41/59
  43. Tài liệu hướng dẫn giảng dạy II.1. Đối tượng event Đối tượng event „ Đối tượng window.event dùng để kiểm sốt các sự kiện phát sinh trong cửa sổ trình duyệt e = window.event „ Các thuộc tính quan trọng { type: loại sự kiện xảy ra { target/srcElement: đối tượng xảy ra sự kiện { which/keyCode/button: Mã ASCII bàn phím hay nút chuột được nhấn alert(window.event.type alert(window.event.target.name) Đối tượng window cung cấp một thuộc tính event để kiểm sốt các sự kiện phát sinh trong cửa sổ trình duyệt chứa trang web. Để xử lý các sự kiện nĩi chung bạn cĩ thể khai báo một biến chứa đối tượng event và truy cập các thuộc tính của nĩ. Ví dụ: e = window.event Các thuộc tính quan trọng Thuộc tính type cho biết loại sự kiện xảy ra. Giá trị của type là một chuỗi. Ví dụ: alert(window.event.type) //=”keyup” khi cĩ phím bấm Thuộc tính target cho biết đối tượng nhận sự kiện. Ví dụ: alert(window.event.target.name) //=”txtABC” Thuộc tính which cho biết mã ASCII của phím được nhấn hay số đại diện cho nút chuột trái, phải. IE khơng hỗ trợ những thuộc tính này như Netscape. Thay vào đĩ IE sử dụng cĩ thuộc tính khác như srcElement thay cho target hay keyCode, button thay cho which. Để bẫy các sự kiện của một đối tượng, bạn đã biết cách sử dụng thuộc tính cĩ tên trùng với tên sự kiện trong tag HTML tạo ra đối tượng đĩ. Một cách khác để bẫy sự kiện là gán tên hàm xử lý sự kiện cho thuộc tính cĩ tên trùng với tên sự kiện của đối tượng. Ví dụ: function document_onKeyUp(){ } document.onkeyup=document_onKeyUp Học phần 5 – Lập Trình Web Nâng Cao Trang 42/59
  44. Tài liệu hướng dẫn giảng dạy II.2. Xử lý các sự kiện bàn phím Xử lý các sự kiện bàn phím „ Thuộc tính keyCode cho biết mã ASCII của phím được gõ function txtName_keypress(){ e = window.event switch case (e.keyCode){ } } frm.txtName.onkeypress=txtName_keypress Ví dụ sau đây minh hoạ cho bạn kỹ thuật phát sinh trang web đồng thời với việc cài đặt các hàm xử lý sự kiện cho một đối tượng. Ví dụ: function button1_onclick() { win = window.open("","","width=200,height=100,resizable=0") doc=win.document doc.writeln(" ") doc.writeln(" ") doc.writeln("function txtName_keypress(){") doc.writeln(" e = window.event") doc.writeln(" alert(e.keyCode)") doc.writeln("}") doc.writeln(" ") doc.writeln(" ") doc.writeln(" ") doc.writeln(" ") doc.writeln(" ") doc.writeln(" ") doc.writeln(" ") doc.writeln(" ") doc.writeln("document.frm.txtName.value='Hello'") doc.writeln("document.frm.txtName.onkeypress=txtName_keypr ess") doc.writeln(" ") doc.writeln(" ") } Học phần 5 – Lập Trình Web Nâng Cao Trang 43/59
  45. Tài liệu hướng dẫn giảng dạy Đoạn code trong trang web được phát sinh ra được liệt kê lại dưới đây để bạn dễ trình bày cho học viên: function txtName_keypress(){ e = window.event alert(e.keyCode) } document.frm.txtName.value='Hello' document.frm.txtName.onkeypress=txtName_keypress Học phần 5 – Lập Trình Web Nâng Cao Trang 44/59
  46. Tài liệu hướng dẫn giảng dạy II.3. Xử lý các sự kiện chuột Xử lý các sự kiện chuột „ Thuộc tính button cho biết giá trị của phím chuột được bấm function doc_onmousedown(){ e = window.event if (e.button == 2){ } } document.onmousedown=doc_onmousedown Thay vì keyCode, bạn sẽ sử dụng thuộc tính button của đối tượng event khi cần xác định nút chuột được bấm. Ví dụ: e=window.event alert(e.button + " (" + e.x + "," + e.y + ")") Ví dụ sau đây minh hoạ cách ngăn những người dùng “tị mị” khỏi việc bấm chuột phải trên trang web của bạn để xem source code, lưu hình ảnh hay copy văn bản. Ví dụ: function document_onmousedown() { e=window.event if (e.type=="mousedown" && e.button==2){ //e.returnValue=0 alert("Ban khong duoc click mouse phai!!!") } } document.onmousedown=document_onmousedown " Chú ý: Dịng lệnh e.returnValue=0 là cách ngăn trình duyệt Internet Explorer xử lý sự kiện diễn ra, nĩ cĩ thể gây lỗi trong các trình duyệt khác. Học phần 5 – Lập Trình Web Nâng Cao Trang 45/59
  47. Tài liệu hướng dẫn giảng dạy III. Các đối tượng mở rộng Các đối tượng mở rộng „ Sử dụng đối tượng Image „ Sử dụng đối tượng location „ Sử dụng đối tượng history „ Sử dụng đối tượng navigator Các đối tượng mở rộng được trình bày trong phần này tuy khơng cĩ nhiều thuộc tính hay hành động nhưng đem lại cho ứng dụng của bạn nhiều chức năng tiện dụng và một giao diện hồn hảo như go back, forward; thay đổi hình ảnh; thích nghi với web browser của người dùng, Học phần 5 – Lập Trình Web Nâng Cao Trang 46/59
  48. Tài liệu hướng dẫn giảng dạy III.1. Sử dụng đối tượng Image Sử dụng đối tượng Image „ Image đại diện cho một image được hiển thị bằng tag trong trang web { document.images(“tên image”) hoặc { document.images(index) img=new Image Img.src="bluemax.jpg" Đối tượng Image đại diện cho một image được hiển thị bằng tag trong trang web. Bạn cĩ thể truy cập các đối tượng image trong trang web thơng qua tập hợp images của document: document.images(“tên image”) hoặc document.images(index) Để thể hiện hình ảnh trong một file, bạn sử dụng thuộc tính src của image: img = new Image img.src = “URL” Khi bạn chỉ ra đường dẫn cho src của một image, trình duyệt sẽ tải file được chỉ cùng với trang web. Ngược lại, nếu bạn khơng chỉ ra đường dẫn trước mà vào thời điểm trang web đã xử lý xong thì việc làm đĩ hồn tồn vơ nghĩa. Ví dụ: imgs = new Array() imgs[0]=new Image imgs[0].src="bluemax.jpg" imgs[1]=new Image imgs[1].src="terminator.jpg" imgs[2]=new Image imgs[2].src="hollowman.jpg" Học phần 5 – Lập Trình Web Nâng Cao Trang 47/59
  49. Tài liệu hướng dẫn giảng dạy i=0 function changeImage(){ document.images("imgFilm").src=imgs[i].src i++ if (i>2) i=0 } Trong ví dụ trên, chúng tơi đã tạo ra 3 đối tượng image với các file hình ảnh kèm theo ngay trong khi trang web đang được xử lý. Tại thời điểm trang web xử lý xong, sự kiện onload mới xảy ra và function changeImage() được thực hiện. Trong function changeImage(), đối tượng imgFilm được gán lại src bằng với src của một image đã tạo trước đĩ. Nếu bạn gán imgFilm.src bằng một URL thì khơng cĩ ý nghĩa gì vì lúc này, trang web đã được xử lý xong và các file được chỉ ra trong URL sẽ khơng cịn được trình duyệt tải về nữa. Học phần 5 – Lập Trình Web Nâng Cao Trang 48/59
  50. Tài liệu hướng dẫn giảng dạy III.2. Sử dụng đối tượng location Sử dụng đối tượng location „ location cung cấp thơng tin về vị trí của trang web { window.location hoặc { Location location.href=”URL” Đối tượng location cung cấp thơng tin về vị trí của trang web và được quản lý bởi window. Bạn cĩ thể truy cập tới location bằng hai cách: window.location hoặc location Ví dụ, để yêu cầu trình duyệt mở một trang web, bạn hãy gán địa chỉ trang web muốn mở cho thuộc tính href của đối tượng location: location.href=”URL” Tuy nhiên thực tế bạn cĩ thể gán URL trực tiếp vào location. Để biết các thơng tin chi tiết về location bạn cĩ thể tham chiếu các thuộc tính khác như bảng dưới đây: Thuộc Giá trị tính protocol http hostname www.calcio.com port 80 host www.calcio.com:80 pathname /schedule/seriesA.html hash href hash là giá trị bắt đầu bởi dấu #, đại diện cho một tag trong trang web. Học phần 5 – Lập Trình Web Nâng Cao Trang 49/59
  51. Tài liệu hướng dẫn giảng dạy III.3. Sử dụng đối tượng history Sử dụng đối tượng history „ history là một mảng các địa chỉ trang web mà người dùng đã mở trong cửa sổ trình duyệt { window.history hoặc { history history.back() alert(history.next) Đối tượng history là một mảng các địa chỉ trang web mà người dùng đã mở trong cửa sổ trình duyệt. history cũng được quản lý bởi window và bạn cĩ thể truy cập tới nĩ bằng hai cách: window.history hoặc history Với đối tượng history, bạn cĩ thể viết các đoạn code tương tự như việc người dùng click vào nút back hay forward trên cửa sổ trình duyệt. Ví dụ: history.back() Các thuộc tính và hành động của history được liệt kê dưới đây: Thuộc Ý nghĩa tính current URL hiện hành length Số lượng các mục trong danh sách history next URL tiếp theo previous URL trước Hành Ý nghĩa động back Di chuyển tới trang web trước forward Di chuyển tới trang web sau go(n) Di chuyển tới trang web thứ n từ vị trí hiện hành Học phần 5 – Lập Trình Web Nâng Cao Trang 50/59
  52. Tài liệu hướng dẫn giảng dạy III.4. Sử dụng đối tượng navigator Sử dụng đối tượng navigator „ navigator cung cấp thơng tin về trình duyệt mà người dùng sử dụng if (navigator.appName== “Microsoft Internet Explorer”) location = “ie_index.html” Đối tượng navigator cung cấp nhiều thơng tin về trình duyệt mà người dùng sử dụng. Trong quá trình viết code bạn sẽ cần chú ý tới đặc điểm riêng của mỗi loại trình duyệt để tin chắc rằng các lệnh mà mình viết sẽ được thực hiện chính xác. Nếu muốn ứng dụng web của mình được sử dụng phổ biến, đây là một vấn đề rất khĩ mà bạn phải đáp ứng. Thơng thường, người ta xây dựng một trang web với nhiều phiên bản cho các loại trình duyệt. Khi đĩ, navigator sẽ giúp xác định loại trình duyệt mà người dùng đang sử dụng, các plug-ins cĩ trên trình duyệt, MIME types mà trình duyệt hỗ trợ, Ví dụ: document.write(navigator.appName + ". Version: " + navigator.appVersion) Kết quả: Microsoft Internet Explorer. Version: 4.0 (compatible; MSIE 6.0; Windows NT 5.2; .NET CLR 1.1.4322; .NET CLR 1.0.3705) Ví dụ trên minh hoạ cách dùng hai thuộc tính thường dùng của navigator. appName của Netscape là Netscapte và IE là Microsoft Internet Explorer. Trường hợp muốn tận dụng các khả năng dựa trên từng phiên bản của trình duyệt, bạn hãy tham khảo tới appVersion. Học phần 5 – Lập Trình Web Nâng Cao Trang 51/59
  53. Tài liệu hướng dẫn giảng dạy IV. Làm việc với các frame Làm việc với các frame „ Khi một cửa sổ trình duyệt chứa nhiều frame, mỗi frame là một đối tượng window. „ Trong một trang web { window.top: cửa sổ trình duyệt { window.parent: cửa sổ cha win = window.parent.contain doc = win.document doc.frmABC.txtXYZ.value = “ ” Khi một ứng dụng web thiết kế để hiển thị nhiều frame thì cửa sổ trình duyệt cùng một lúc hiển thị nhiều trang web. Vì mỗi trang web nằm trong một frame nên đối tượng window của một trang web đại diện cho frame chứa trang web đĩ. Ví dụ: document.write(window.parent[0].name + " ") document.write(window.parent[1].name + " ") document.write(window.parent[1].name + " ") Trang Frameset Để truy cập tới các đối tượng trong frame khác một cách ngắn gọn, bạn cĩ thể khai báo một đối tượng doc trỏ tới đối tượng document của cửa sổ đĩ. Ví dụ: win = window.parten.TênFrame doc = win.dow Học phần 5 – Lập Trình Web Nâng Cao Trang 52/59
  54. Tài liệu hướng dẫn giảng dạy Ví dụ sau đây minh hoạ cách tận dụng frame để chống lại việc các trang web khác link website của bạn vào một frame trong website của họ. Ví dụ: //Với function TopLoad như sau: function TopLoad(){ if (window.top != window) window.top.location = window.location } Học phần 5 – Lập Trình Web Nâng Cao Trang 53/59
  55. Tài liệu hướng dẫn giảng dạy Học phần 5 – Lập Trình Web Nâng Cao Trang 54/59
  56. Tài liệu hướng dẫn giảng dạy ĐỀ THI MẪU CUỐI NHÓM HỌC PHẦN Đề thi : Học phần 5 Thời gian : 150 phút Ngày thi : / / Các kết quả lưu vào đĩa làm việc để chấm điểm Tạo thư mục SoMay_TenHV để chứa tồn bộ các tập tin được tạo ra. Ví dụ: học viên Nguyễn Thái Hưng làm bài thi tại máy số 01 sẽ tạo thư mục 01_NTHUNG. Câu 1 TỔ CHỨC WEBSITE Tạo website với sơ đồ tổ chức các trang web như sau: Hình 1.1 – Sơ đồ liên kết các trang web Trang chủ cĩ cấu trúc frameset như câu 2: Câu 2 Hàng khơng Việt Nam Các chuyến bay Thơng tin các chuyến bay Thơng tin đặt vé Chuyến bay Ngày Giờ Giá vé Hà nội – Tp. HCM 12/4/2003 9:00:00 1.325.000 Tp. HCM – Hà nội 20/4/2003 11:00:00 1.325.000 Tp. HCM – Hà nội 20/4/2003 16:20:00 1.325.000 Hình 1.2 – tổ chức Frameset của trang chủ Các liên kết trong frame bên trái sẽ được hiển thị trong frame chính: 2 1 Các chuyến bay: Liên kết tới trang CacCB.asp 2 2 Thơng tin đặt vé: Liên kết tới trang DatVe.asp Học phần 5 – Lập Trình Web Nâng Cao Trang 55/59
  57. Tài liệu hướng dẫn giảng dạy Câu 3 XÂY DỰNG CƠ SỞ DỮ LIỆU Tạo CSDL Access cĩ tên là BanVeMB.mdb với các bảng và dữ liệu như sau: ChuyenBay - Chuyến Bay Field Name Field Type Field Size Description MaCB Autonumber Mã Chuyến bay TenCB Text 50 Tên chuyến bay NgayGio DateTime Ngày giờ bay SoVe Number Integer Số vé SoVeConLai Number Integer Số vé cịn lại GiaVe Number Long integer Giá vé BanVe Yes/No Cịn bán vé = True, Hết hạn bán vé = False DatVe - Vé Field Name Field Type Field Size Description MaDatVe Autonumber Mã đặt vé MaCB Number Long integer Mã chuyến bay HoTen Text 50 Họ tên khách hàng Email Text 100 Email Password Text 20 Password SoVe Number Byte Số vé đặt Chú ý: Các field in đậm, nghiêng và gạch dưới là khố chính. Sơ đồ quan hệ giữa các bảng Dữ liệu thử ChuyenBay MaCB TenCB NgayGio SoVe SoVeConLai GiaVe BanVe 1 Hà nội -Tp. Hồ Chí Minh 4/14/2003 9:00:00 AM 100 99 1325000 Yes 2 Tp.HCM - Hà nội 4/20/2003 11:00:00 AM 150 135 1325000 Yes 3 Tp.HCM - Hà nội 4/20/2003 4:20:00 PM 150 20 1325000 Yes DatVe MaDatVe MaCB HoTen Email Password SoVe 1 3 Cty. Du Lịch Lửa Việt crm@luaviet.com luaviet 60 2 3 Cty. Saigon Tourist tour@sgtourist.com toursg 40 3 3 Nguyễn Văn Vinh nvving@yahoo.com 123vinh 4 4 3 Lê Thị Minh Giang ltmgiang@hotmail.com gianghotmail 6 5 3 Phạm Thị Nga ptnga@operamail.com thinga 10 6 3 Cty. VietHan hr@viethan.org hrviethan 10 7 1 Trần Thị Mỹ Hương ttmyhuong@yahoo.com mh 1 8 2 Cty. VietTour crm@viettour.com crmvt 15 Học phần 5 – Lập Trình Web Nâng Cao Trang 56/59
  58. Tài liệu hướng dẫn giảng dạy Câu 4 THỰC HIỆN CÁC CHỨC NĂNG Trang CacCB.asp Liệt kê thơng tin các chuyến bay cịn bán vé Ứng với mỗi chuyến bay được liệt kê là một liên kết mà khi người dùng chọn sẽ mở trang ChuyenBay.asp Trang ChuyenBay.asp Trang này hiển thị các thơng tin của chuyến bay và cho phép người dùng đặt vé. Chuyến bay Tp. Hồ Chí Minh – Hà nội - Ngày khởi hành : 20/5/2003 - Giờ khởi hành : 16:20 - Giá vé : 1.325.000 - Số vé cịn lại : 20 Đặt vé chuyến bay này Họ tên khách hàng Email Email (lặp lại) Password Password (lặp lại) Địa chỉ giao vé Số vé đặt Hình 3.1 – Trang ChuyenBay.asp Khi người dùng click vào nút Đặt vé, phải kiểm tra: Họ tên khách hàng: bắt buộc Hai địa chỉ email: bắt buộc, giống nhau Password: bắt buộc, giống nhau Địa chỉ giao vé: bắt buộc Số vé đặt phải là số và nhỏ hơn hoặc bằng số vé cịn lại. Sau khi kiểm tra dữ liệu nhập hợp lệ, gửi thơng tin đặt vé của khách hàng đến file DatVe.asp để cập nhật vào bảng DatVe. Tiếp theo, trang DatVe.asp hiểnt hị thơng tin đặt vé của chuyến bay của khách hàng. Học phần 5 – Lập Trình Web Nâng Cao Trang 57/59
  59. Tài liệu hướng dẫn giảng dạy Trang DatVe.asp Trang thơng tin đặt vé cho khách hàng biết các thơng tin về vé được đặt cho một chuyến bay. Khi người dùng click vào mục Thơng tin đặt vé trong frame bên trái, ComboBox chuyến bay chưa được chọn và chưa cĩ thơng tin đặt vé nào hiển thị. Nếu trang Thơng tin đặt vé hiển thị do kết quả đặt vé của khách hàng từ trang ChuyenBay.asp thì ComboBox chuyến bay sẽ tự động chọn chuyến bay vừa đặt vé và trang web hiển thị thơng tin đặt vé của chuyến bay đĩ. Khi người dùng chọn một chuyến bay, trang web sẽ hiển thị thơng tin đặt vé của chuyến bay đĩ. Chuyến bay Tp. Hơ Chí Minh - Hà nơi (20/4/2003 16:20) Thơng tin đặt vé Họ tên Email Số vé đặt Cty. Du Lịch Lửa Việt crm@luaviet.com 60 Cty. Saigon Tourist tour@sgtourist.com 40 Nguyễn Văn Vinh nvving@yahoo.com 4 Lê Thị Minh Giang ltmgiang@hotmail.com 6 Phạm Thị Nga ptnga@operamail.com 10 Cty. VietHan hr@viethan.org 10 Hình 3.2 – Thơng tin đặt vé Học phần 5 – Lập Trình Web Nâng Cao Trang 58/59
  60. Tài liệu hướng dẫn giảng dạy ĐỀ THI MẪU KIỂM TRA GIÁO VIÊN Nội dung kiểm tra chuyên mơn Thời gian : 180 phút Lập Trình Web Bạn hãy xây dựng ứng dụng Chat HTML như sau: - Màn hình chính của ứng dụng như hình dưới - Người dùng muốn tham gia chat phải đăng nhập. Nếu khơng, người dùng chỉ cĩ thể xem những người khác chat trên màn hình chính. o Khi đăng nhập thì người dùng chỉ cần nhập vào tên chatter mà thơi. o Nếu tên chatter chưa cĩ người nào lấy thì mới được coi là đăng nhập thành cơng và thơng tin chatter sẽ hiển thị tên. - Màn hình chính hiển thị lời thoại giữa các chatter, cứ sau 5 giây, thơng tin lời thoại lại được cập nhật một lần. - Phần màn hình bên trái liệt kê các chatter đang tham gia. - Phần màn hình phía dưới dành cho chatter gõ câu đối thoại và gửi đi. Yêu cầu: - Dựa trên yêu cầu giảng dạy mơn Lập Trình Web, bạn chỉ cĩ thể sử dụng ngơn ngữ HTML, JavaScript và ASP cùng với các cơng cụ: FrontPage, Visual InterDev. Ứng dụng được xây dựng cho Internet Explorer ver. 5 trở về sau. - Giao diện hồn tồn bằng tiếng Việt. Font chữ Unicode bảng mã UTF-8 - Cơ sở dữ liệu Access 2000 Học phần 5 – Lập Trình Web Nâng Cao Trang 59/59