Thiết kế và lập trình Web bằng ngôn ngữ ASP - Phần 2_HTML và Javascript (Tiếp)

 dữ liệu, các hàm xử lý chuỗi,… 
 Trong javascript cung cấp sẵn các đối tƣợng 
 hộp thoại (dialog boxes) cho ngƣời dùng 
 tƣơng tác với trình duyệt trên phía client, bao 
 gồm: 
  Alert: hiển thị thông báo 
  Confirm: xác nhận thông tin ngƣời dùng 
  Prompt: tƣơng tác với ngƣời dùng bằng 
 cách cho phép nhập giá trị mới. 
a. Alert: 
 • Công dụng: dùng hiển thị thông báo cho ngƣời dùng. 
 • Cú pháp: Alert("Nội dung thông báo") 
b.Confirm: 
 • Công dụng: dùng xác nhận lại thông tin từ phía ngƣời 
 dùng. Hộp thoại trả về True nếu ngƣời dùng đồng ý. 
 • Cú pháp: Confirm("Nội dung xác nhận") 
c. Prompt: 
 • Công dụng: dùng nhận thông tin từ phía ngƣời dùng. Hộp 
 thoại trả về giá trị ngƣời dùng đã nhập. 
 • Cú pháp: Prompt("Tiêu đề yêu cầu nội dung") 
Ví dụ: alert, confirm, prompt 
 Dialog boxes 
 alert("Chào bạn"); 
 var namsinh=prompt("Bạn sinh năm mấy?"); 
 var traloi=confirm("Bạn có muốn tính tuổi của bạn không?"); 
 if (traloi==true) 
 document.write("Bạn đƣợc "+(2011-namsinh)+""); 
 else 
 document.write("Chào bạn"); 
 If .. Else .. 
Cấu trúc điều kiện 
 Switch .. Case .. 
 For .. 
 Cấu trúc lặp While .. 
 Do .. While 
a. Ví dụ: Cấu trúc điều kiện 
 1. Viết chƣơng trình giải và biện luận phƣơng trình bậc 1. 
 2. Viết chƣơng trình giải và biện luận phƣơng trình bậc 2. 
 3. Nhập 3 cạnh tam giác a , b , c: cho biết loại tam giác là 
 tam giác đều, cân, vuông cân, vuông, thƣờng. 
 4. Viết chƣơng trình kiểm tra ngày, tháng, năm có hợp lệ? 
 5. Viết chƣơng trình nhập điểm TB, cho biết xếp loại: giỏi, 
 khá, trung bình, yếu. 
 6. Viết chƣơng trình nhập năm sinh, nếu trên 18 tuổi thì in 
 ra trên trình duyệt tuổi của ngƣời này. 
b. Ví dụ: Cấu trúc lặp 
 1. Viết chƣơng trình nhập n, in ra trên trình duyệt bảng cửu 
 chƣơng thứ n. 
 2. Viết chƣơng trình nhập n, in ra in ra trên trình duyệt n 
 bảng cửu chƣơng. 
 3. Viết chƣơng trình nhập số dòng, số cột, in ra bảng biểu có 
 số dòng và số cột đã nhập. 
 4. Viết chƣơng trình nhập tháng, năm, in ra trên trình duyệt 
 ra lịch của tháng và năm đó. 
 5. Viết chƣơng trình nhập user và password, nếu nhập đúng 
 (user và password: “abc”) thì in ra trình duyệt câu “Xin 
 chào”, ngƣợc lại bắt ngƣời dùng nhập lại. 
a. Mảng: 
  Trong javascript không có kiểu dữ liệu mảng tường minh 
 (ví dụ: int mang[10]) mà chỉ hỗ trợ thông qua đối tƣợng 
 Array sẵn có và các thuộc tính và phƣơng thức mà đối 
 tƣợng này hỗ trợ. 
 • Khai báo mảng: 
  arrayObjectName = new Array(element0,element1,..) 
  Hoặc arrayObjectName = new Array(arrayLength) 
 • Ví dụ: tạo mảng gồm 5 phần tử 
 var Mang = new Array(5) 
a. Mảng: 
 • Truy cập phần tử mảng: chỉ số bắt đầu của mảng là 0 
 • Ví dụ: 
 var arrMaVung = new Array("08","04","72","65","64"); 
 var arrTenVung = new Array(5); 
 arrTenVung[0]="HCM"; 
 arrTenVung[1]="Hà Nội"; 
 arrTenVung[2]="Long An"; 
 arrTenVung[3]="Bình Dƣơng"; 
 arrTenVung[4]="Vũng Tàu"; 
 for (i=0;i<5;i++) 
 document.write(arrMaVung[i]+" "+arrTenVung[i]+""); 
a. Mảng: 
 • Thuộc tính của đối tượng Array: 
 length Trả về số phần tử của mảng 
 index Trả về chỉ mục của phần tử. 
 • Phương thức của đối tượng Array: 
 concat Nối hai mảng và trả về một mảng mới. 
 join Kết hợp tất cả các phần tử của một mảng thành một chuỗi. 
 pop Gỡ bỏ phần tử cuối cùng của một mảng và trả về phần tử đó. 
 Thêm một hoặc nhiều phần tử vào cuối một mảng và trả về độ dài 
 push 
 mới của mảng. 
 splice Chèn hoặc xoá một hoặc nhiều phần tử theo vị trí thứ k trong mảng 
 Hoán vị các phần tử của một mảng: Phần tử mảng đầu tiên trở thành 
 reverse 
 phần tử cuối cùng và ngƣợc lại 
 sort Sắp xếp các phần tử của một mảng 
b. Hàm: 
 Javascript cung cấp sẵn cho ngƣời dùng một số hàm thông dụng: 
  Hàm eval: đánh giá các biểu thức hay lệnh. 
  Hàm isFinite: xác định xem 1 số có là hữu hạn hay không? 
  Hàm isNaN: kiểm tra một biến có là số? 
  Hàm parseInt và parseFloat: chuyển đổi kiểu 
  Hàm Number và String: chuyển đổi kiểu 
 Ngoài ra, ngƣời dùng có thể định nghĩa các hàm tự tạo theo cú 
 pháp sau: 
 function functionName (argument1, argument2, …) 
 { 
 statements; 
 [return value;] 
 } 
b. Hàm: 
 function functionName (argument1, argument2, …) 
 { 
 statements; 
 [return value;] 
 } 
 Trong đó: 
  function: từ khoá bắt buộc do javascript là ngôn ngữ có tính 
 định kiểu thấp nên không cần xác định trƣớc kiểu dữ liệu trả 
 về. 
  functionName: tên hàm 
  argument1, argument2, …: tham số đầu vào 
  [return value;]: giá trị trả về của hàm nếu có 
c. Ví dụ: Mảng và Hàm 
1. Viết hàm nhập/xuất mảng gồm n phần tử, xuất ra giá trị 
 max, min của mảng. 
2. Viết chƣơng trình nhập 2 mảng a,b gồm n phần tử, trộn 2 
 mảng lại và sắp xếp theo thứ tự tăng dần. 
3. Viết hàm thêm 1 phần tử x vào mảng tại vị trí thứ k . 
4. Viết hàm thêm 1 phần tử x vào mảng đã có thứ tự tăng dần 
 sao cho sau khi thêm mảng vẫn tăng. 
5. Viết hàm xoá một phần tử x trong mảng. 
a. Giới thiệu: 
  Đối tượng là gì? 
 ĐỐI TƯỢNG 
 THUỘC PHƢƠNG 
 TÍNH THỨC 
 - Ví dụ: đối tƣợng SINHVIEN có các thuộc tính: mã sinh viên, họ tên, 
 điểm, … và các phƣơng thức: đi học, đi thi, … 
 - Truy cập thuộc tính và phƣơng thức: 
 • Tên_đối_tượng.Tên_thuộc_tính 
 • Tên_đối_tượng.Tên_phương_thức(…) 
 - Sử dụng con trỏ This cho đối tƣợng hiện hành 
a. Giới thiệu: 
  Các đối tượng javascript hỗ trợ: 
 Array Window objects 
 Document 
 Math Event 
 Frames 
 Date 
 History 
 String Location 
 Navigator 
 … 
 Screen 
b. Đối tượng cơ bản: 
 • Array: đối tƣợng dùng quản lí danh sách mảng. 
 • Math: đối tƣợng liên quan đến các phép tính toán học. 
 • String: đối tƣợng dùng để thao các với các chuỗi văn bản. 
 • Date: đối tƣợng liên quan đến ngày giờ. 
c. Đối tượng trình duyệt: 
 window: 
  Công dụng: dùng quản lý thông tin của tất cả các đối tƣợng 
 trong cửa sổ trình duyệt. 
  Các thuộc tính cơ bản: đối tƣợng window đƣợc xem là đối 
 tƣợng cơ bản (base class) của tất cả các đối tƣợng khác. 
  Các phương thức cơ bản: alert(), blur(), close(), open(), 
 focus(), navigate(). 
c. Đối tượng trình duyệt: 
 document: 
  Công dụng: dùng quản lý thông tin tài liệu HTML trong cửa 
 sổ trình duyệt (đƣợc xem là đối tƣợng con của window) 
  Các thuộc tính và phương thức: 
 Các thuộc tính: Các phƣơng thức: 
 • alinkColor • clear() 
 • bgColor • close() 
 • Body • open() 
 • fgColor • write() 
 • linkColor • writeln() 
 • location 
 • Title 
 • URL 
 • vlinkColor 
c. Đối tượng trình duyệt: 
 history: 
  Công dụng: dùng quản lý danh sách các URL đã duyệt. 
  Các thuộc tính và phương thức: 
 Các thuộc tính: Các phƣơng thức: 
 • current • back() 
 • length • forward() 
 • next • go(relPos hoặc string) 
 • previous 
c. Đối tượng trình duyệt: 
 location: 
  Công dụng: dùng quản lý thông tin URL hiện tại. 
  Các thuộc tính và phương thức: 
 Các thuộc tính: Các phƣơng thức: 
 • hash • reload() 
 • host • replace(URL) 
 • hostname 
 • href 
a. Giới thiệu: 
  Javascript quản lý sự tƣơng tác giữa ngƣời dùng và trình 
 duyệt thông qua bộ quản lý các sự kiện (Event) trên Form 
 và các đối tƣợng con trên Form. 
b. Sự kiện: (Event) 
  Sự kiện là kết quả thao tác của ngƣời dùng tác động lên đối 
 tƣợng. 
  Một sự kiện bao gồm 2 thông tin: 
  Kiểu sự kiện: click, double click, change,.. 
  Vị trí của con trỏ tại thời điểm xảy ra sự kiện. 
  Các sự kiện thƣờng gặp: 
 • onClick • onMouseOut 
 • onChange • onLoad 
 • onFocus • onUnload 
 • onBlur • onSubmit 
 • onSelect • onMouseDown 
 • onMouseOver • onMouseUp 
 c. Các sự kiện cơ bản trên các đối tượng: 
  Đối tượng window: (onLoad - onUnload) 
  Công dụng: sự kiện xảy ra khi ngƣời dùng mở trang hoặc 
 đóng trang. 
  Ví dụ: viết trang khi ngƣời dùng mở trang thì hiển thị thông 
 báo nhập Tên  xuất “Hi, welcome my pages”, sau khi đóng 
 trang thì hiển thị thông báo “Good bye, see you again !” 
 var name = ""; 
 function hello() { 
 name = prompt('Enter Your Name:','Name'); 
 alert('Hi ' + name + ', welcome to my page!'); 
 } 
 function goodbye() { 
 alert('Goodbye ' + name + ', see you again!'); 
 } 
c. Các sự kiện cơ bản trên các đối tượng: 
  Đối tượng form: 
  Sự kiện trên form đƣợc xử lý phụ thuộc vào 2 yếu tố sau: 
 • Thuộc tính sự kiện của form: Action, Method, … 
 • Việc xử lý các sự kiện của các đối tƣợng con (button, 
 textbox,..) bên trong form: onSubmid, onClick, onBlur, 
 onChange, … 
  Ví dụ về chu trình sự kiện trên form: 
c. Các sự kiện cơ bản trên các đối tượng: 
  Đối tượng form: 
  Ví dụ về chu trình sự kiện trên form: 
 Ngƣời dùng tác động lên Bộ lắng nghe sự 
 Form 
 kiện Javascript 
 Ngƣời dùng tác động lên hoạt động. 
 đối tƣợng trong Form 
 Ngƣời dùng thực hiện 
 abcdef thao tác xác nhận Form 
 ***** 
 Xử lý Form 
  phụ thuộc 
 vào các 
 thuộc tính 
 OnChange OnClick 
OnMouseOver 
 (tuỳ đối tượng) OnSubmit sự kiện 
c. Các sự kiện cơ bản trên các đối tượng: 
  Đối tượng form: 
  Ví dụ về chu trình sự kiện trên form: 
  Thuộc tính sự kiện: 
  Action: thuộc tính dùng để chuyển 
 trang hiện hành đến một trang khác theo 
 địa chỉ URL truyền vào. 
  Method: phƣơng thức gởi nội dung 
 đi: “get / post” 
 Xử lý Form 
 phụ thuộc 
 vào các 
 thuộc tính 
 OnChange OnClick 
OnMouseOver 
 (tuỳ đối tượng) OnSubmit sự kiện 
d. Các ví dụ xử lý sự kiện: 
  Ví dụ 1: thiết kế một trang gồm 3 button cho phép ngƣời 
 dùng thay đổi màu nền của trang nhƣ sau: 
d. Các ví dụ xử lý sự kiện: 
  Ví dụ 2: thiết kế một trang cho phép nhập thông tin họ tên 
 và năm sinh, xuất ra câu chào và cho biết tuổi ngƣời đó: 
 Muiten01 
d. Các ví dụ xử lý sự kiện: 
  Ví dụ 3: thiết kế một trang gồm 3 radio button cho phép 
 ngƣời dùng thay đổi hình ảnh trong trang nhƣ sau: 
d. Các ví dụ xử lý sự kiện: 
  Ví dụ 4: thiết kế một trang cho phép ngƣời dùng đăng 
 nhập, nếu thành công thì cho phép ngƣời dùng xem sản 
 phẩm trong trang sanpham.html