Tài liệu hướng dẫn giảng dạy - Lập trình Web nâng cao potx

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 Mã tài liệu: DT_NCM_LT_HDGD_LTWEBNC Phiên bản 1.1 – Tháng 08/04 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 liệu hướng dẫn giảng dạy Học phần 5 – Lập Trình Web Nâng Cao Trang 1/59 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 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 2/59 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 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 3/59 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 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 4/59 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 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 5/59 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 buộc Bài tập làm thêm Giới thiệu về ngơn ngữ JavaScript áp dụng trong việc xây dựng các đọan client-side script. Truyền đạt cho học viên những khái niệm quan trọng về thời điểm thực hiện của một đoạn JavaScritp, biến và phạm vi sử dụng cũng như việc sử dụng các đối tượng cơ bản của JavaScritp như String, Date, Math,… để xử lý các 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 I. Giới thiệu bài học II. JavaScript và hỗ trợ của trình duyệt III. Sơ lược về ngơn ngữ JavaScript IV. Thời điểm thực hiện một đoạn Script V. Phạm vi sử dụng biến VI. Các đối tượng cơ sở trong JavaScript 1.1 – 1.10 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 6/59 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,… 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 7/59 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 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. 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 8/59 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 <Script></Script>  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ụ <HEAD> <SCRIPT LANGUAGE=javascript> function cmdOK_onclick() { document.write(frm.txtTen.value) } </SCRIPT> </HEAD> <BODY> <P>Doan JavaScript dau tien</P> <FORM name="frm"> <P>Ten cua ban <INPUT id=txtTen name=txtTen>&nbsp; <INPUT id=cmdOK name=cmdOK type=button value=OK onclick="return cmdOK_onclick()"></P> </FORM> </BODY> 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 <Script></Script> 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 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 9/59 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 { Ln 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ề ngun 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 <tên biến> [= <giá trị>] 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” [...]... phần 5 – Lập Trình Web Nâng Cao Trang 11/59 Tài liệu hướng dẫn giảng dạy III.1 Demo: Sử JavaScript dụng Visual InterDEV để lập trình 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 Tài liệu hướng dẫn giảng dạy IV... 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 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 Đây là bài giảng quan trọng nhất của phần JavaScript, tập... 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 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,... 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 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 navigator event location... thêm Các đối tượng trong trang web III Bài tập bắt buộc Kiểm tra dữ liệu nhập trên form 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 Tài liệu hướng dẫn giảng dạy I Giới thiệu bài học Nội... statusbar=0,width=200,height=300,resizable=1") Học phần 5 – Lập Trình Web Nâng Cao Trang 23/59 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,…... button1_onclick được thực hiện Học phần 5 – Lập Trình Web Nâng Cao Trang 14/59 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... 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 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 Học phần 5 – Lập Trình Web Nâng Cao Trang 13/59 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 . Tháng 08/04 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 liệu hướng dẫn giảng dạy Học phần 5 – Lập Trình Web Nâng Cao Trang 1/59 . 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 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. khơng. 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 12/59 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