Lập trình và thiết kế web 1 - Bài 5: Hướng dẫn sử dụng JavaScript trong DreamWeaver

GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 1 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 GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 2 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 Tên control Loại control 1 textTenDN Textbox 2 textMatkhau Textbox 3 textMatkhaugolai Textbox 4 btDangky Button 5 btXoa 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. GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 3 II. Javascript 1. Ví trí đặt Script trong trang web HTML: Vị trí Code HTML Trong thẻ // Lệnh Javascript Function bool A() { return true; } Trong thẻ // Lệnh Javascript 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). GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 4 3. Viết Javascript cho phần phần kiểm tra thông tin người dùng: <!-- Ẩn dấu phần mã lệnh Javacript function KiemTra() { myFrmObj = document.DKUser // Lay doi tuong form DKUser // if (myfrmObj.textTenDN.value == "") // Lenh nay tuong duong voi lenh duoi day if (document.DKUser.textTenDN.value == "") { // Hien thi thong bao window.alert("Ten dang nhap khong duoc de trong."); document.DKUser.textTenDN.focus(); return false; } else if (document.DKUser.textMatkhau.value == "") { window.alert("Mat khau khong duoc de trong."); document.DKUser.textMatkhau.focus(); return false; } else if (document.DKUser.textMatkhau.value.length < 5) { window.alert("Mat khau ngan qua."); document.DKUser.textMatkhau.focus(); return false; } else if (document.DKUser.textMatkhau.value != document.DKUser.textMatkhaugolai.value) { window.alert("Mat khau go lai khong dung."); document.DKUser.textMatkhaugolai.focus(); return false; } return true; } GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 5 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. GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 6 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 Cú pháp JavaScript Khai báo Biến var varname=value; Lệnh điều kiện if (condition) { statements; } else { statements2; } switch (expression) { case label : statements; break; default : statement; } Vòng lập for (initial-statement; condition; increment) { statements; } Do { statements; } while (condition); 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 hàm Khai báo chung function funcName(argument1,argument2,etc) { statements; } Giá trị trả về của hàm return value; Hoặc return ( value ); Đối tượng String var string="hello“ var stringlength=string.length //stringlength=5 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] 7 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 <!-- x = window.confirm("Please chose YES or NO button!"); if (x) window.alert("You have chosen YES. Thank you!"); else window.alert("You have chosen NO. Thank you!"); //--> strObj.charAt(index), strObj.charCodeAt(index) string1.concat([string2[, string3[,... [, stringn]]]]) strObj.indexOf(subString[, startIndex]) Đối tượng Array MyArray = new Array(5,5); MyArray[0, 0] = "Ryan Dias"; 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 Đối tượng Date 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(),… GVLT: Lương Vĩ Minh – [email protected] – Trần Thị Bích Hạnh – [email protected] 8 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 function HightLight(what, onoff) { var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu'); what.className = className; } <td width="200" class="mainmenu" OnMouseOver="HightLight(this, 1)" OnMouseOut="HightLight(this, 0)">Khoa CNTT - Truong DHKHTN <td width="200" class="mainmenu" OnMouseOver="HightLight(this, 1)" OnMouseOut="HightLight(this, 0)">W3Schools 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.