Đăng ký Đăng nhập

Tài liệu Bai 5 - hdsd_javascript

.PDF
8
214
118

Mô tả:

BÀI 5 HƯỚNG DẪN SỬ DỤNG JAVASCRIPT TRONG Dreamweaver Mục lục : Mục lục : ..................................................................................................................................... 1 I. Yêu cầu: ............................................................................................................................... 2 II. Javascript ............................................................................................................................ 3 1. Ví trí đặt Script trong trang web HTML: ......................................................................... 3 2. Code HTML của form trên : ........................................................................................... 3 3. Viết Javascript cho phần phần kiểm tra thông tin người dùng: ...................................... 4 4. Gọi hàm KiemTra() trong trang web:............................................................................. 5 5. Kiểm tra kết quả trang web: ........................................................................................... 5 III. Bài tập thực hành: .............................................................................................................. 6 1. Bài tập 1: Xem các cú pháp thông thường của Javascript: ........................................... 6 2. Bài tập 2 : Viết website hiển thị thông báo lỗi. ............................................................... 7 3. Bài tập 3 : Làm Highlight Menu cho trang web. ............................................................. 8 4. Bài tập 4: Viết hàm kiểm tra thông tin cho trang web cuối bài trong Bài 4. .................... 8 1 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] I. Yêu cầu: Thiết kế form có nội dung sau và viết script để kiểm tra tính đúng đắn của dữ liệu do người dùng nhập vào form sau: Chú ý: - Sử dụng lại bài tập 4a để làm tiếp. - Sử dụng Javascript/VBScript để viết hàm để kiểm tra. - Thống nhất tên các controls sử dụng trong form trên như trong Bài HDTH 4a. STT 1 2 3 4 5 - Tên control textTenDN textMatkhau textMatkhaugolai btDangky btXoa Loại control Textbox Textbox Textbox Button Button Tạo một trang web bất kỳ có tên Dangkythanhcong.htm. Trang web này sẽ hiện thị khi người dùng nhấn vào nút “Đăng ký” và việc kiểm tra dữ liệu thành công. 2 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] II. Javascript 1. Ví trí đặt Script trong trang web HTML: Vị trí Trong Code HTML thẻ thẻ Trong Trong file .js Chú ý: - Cú pháp lệnh Javascript giống với C, cuối lệnh phải có dấu “;” để kết thúc 1 dòng lệnh. Có phân biệt chữ hoa, chữ thường. 2. Code HTML của form trên :
Chú ý: Phần này, ta cần đặt tên cho form (trong VD này là DKUser). 3 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 3. Viết Javascript cho phần phần kiểm tra thông tin người dùng: 4 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 4. Gọi hàm KiemTra() trong trang web: Tại phần khai báo thẻ của trang web, sửa lại mã lệnh sau: - Thuộc tính name: Đặt tên cho form đang sử dụng. Thuộc tính method: Chọn hình thức truyền dữ liệu với server (Post/Get) Thuộc tính action: Chỉ định địa chỉ URL được gọi khi button (có thuộc tính submit) được nhấn. Thuộc tính onsubmit: Chỉ định hàm KiemTra() sẽ được gọi khi button (có thuộc tính submit) được nhấn. Nếu hàm trả về giá trị False thì thuộc tính action bị bỏ qua và ngược lại. 5. - Kiểm tra kết quả trang web: Lưu trang web lại. Nhấn F12 để mở trang web bằng IE. Tạo các trường hợp nhập dữ liệu khác nhau để kiểm tra kết quả trang web: o Lần 1: Tên đăng nhập bị bỏ trống. o Lần 2: Mật khẩu bị bỏ trống. o Lần 3: Mật khẩu ngắn hơn 5 ký tự. o Lần 4: Gõ lại mật khẩu bị bỏ trống. o Lần 5: Nhập đầy đủ, đúng các thông tin cần thiết. 5 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] III. Bài tập thực hành: 1. Bài tập 1: Xem các cú pháp thông thường của Javascript: Loại Khai báo Biến Lệnh điều kiện Cú pháp JavaScript var varname=value; if (condition) { statements; } else { statements2; } switch (expression) { case label : statements; break; default : statement; } for (initial-statement; condition; increment) { statements; } Do { statements; } while (condition); Vòng lập Khai báo hàm while (condition) { statements; } Duyệt lần lượt các phần tử của một mảng for (variable in object) { statements; } Khai báo chung function funcName(argument1,argument2,etc) { statements; } Giá trị trả về của hàm return value; Hoặc return ( value ); var string="hello“ var stringlength=string.length //stringlength=5 Đối tượng String Thuộc tính length Phương thức stringObj.anchor(anchorString) – tạo Bookmark strVariable.link(URL) GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 6 strObj.charAt(index), strObj.charCodeAt(index) string1.concat([string2[, string3[,... [, stringn]]]]) strObj.indexOf(subString[, startIndex]) MyArray = new Array(5,5); MyArray[0, 0] = "Ryan Dias"; Đối tượng Array Đối tượng Date Phương thức Join –Ghép các phần tử thành 1 chuỗi. Pop – Lấy phần tử cuối Push – Thêm 1 (hoặc nhiều phần tử) vào cuối mảng Reverse - Đổi phần tử đầu – cuối Shift – Xóa phần tử đầu khỏi mảng var my_date=new Date("October 12, 1988 13:14:00"); var my_date=new Date("October 12, 1988"); var my_date=new Date(88,09,12,13,14,00); var my_date=new Date(88,09,12); Hàm getDate(), getDay(), getMonth(), getYear(),… getTime(),… 2. Bài tập 2 : Viết website hiển thị thông báo lỗi. (Xem hướng dẫn phần mã lệnh sau) Window Alert & Confirm 7 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 3. Bài tập 3 : Làm Highlight Menu cho trang web. (Xem hướng dẫn phần mã lệnh sau) HightLight MENU
4. Bài tập 4: Viết hàm kiểm tra thông tin cho trang web cuối bài trong Bài 4. 8 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected]
- Xem thêm -

Tài liệu liên quan