Trình duyệt là một ứng dụng dùng để hiển thị các nội dung của một tƣ liệu HTML. Các trình duyệt cũng đã đƣa ra một số đối tƣợng để các script có thể truy cập, các đối tƣợng này đƣợc tổ chức theo một mô hình phân cấp, gọi là mô hình đối tƣợng trình duyệt (BOM, Browser Object Model). Trong 9 đối tƣợng của BOM, đối tƣợng quan trọng nhất là đối tƣợng document. BOM đóng vai trò nhƣ là một API (Application Programming Interface) cho việc lập trình các ứng dụng trên nền tảng web cho client-side hay cách khác: chính trong môi trƣờng trình duyệt, JavaScript dựa vào mô hình này để truy xuất các đối tƣợng trên một trang web để cập nhật nội dung, cấu trúc và kiểu dáng của đối tƣợng
Mỗi đối tƣợng trong BOM là một tập hợp gồm : - Các thuộc tính (Properties)
- Các phƣơng thức (Methodes)
Ngoài ra còn có các sự kiện (Events) có thể kết hợp trên đối tƣợng xác định.
Trong giáo trình này, ngƣời viết dựa trên quan điểm của Peter Kantor (Đại học Hudson Valley, NY), chỉ trình bày về BOM mà không trình bày về DOM (Document Object Madel) vốn là một lĩnh vực rộng lớn, phù hợp cho XML hơn. Tuy nhiên, các tham khảo về DOM cũng có những lợi ích khi lập trình web.
Trong IE BOM, đối tƣợng lớn nhất là đối tƣợng window, còn trong NN BOM, đối tƣợng window và đối tƣợng navigator là ngang cấp.
Sự khác nhau giữa IE BOM và NN BOM chủ yếu là các đối tƣợng và các thuộc tính và phƣơng thức của mỗi đối tƣợng.
Có 9 đối tƣợng trình duyệt: window, document, event, frame, history, location, navigator, screen, mimeType và plugin; ta sẽ lần lƣợt nghiên cứu các đối tƣợng quan trọng, còn đối tƣợng quạn trọng nhất là document đƣợc tách ra một phần riêng.
Đối tƣợng window
Đối tƣợng window miêu tả cửa sổ đang hiển thị trang web, cung cấp các khả năng truy xuất đến các đối tƣợng con của nó và các trạng thái cũng nhƣ nắm bắt các sự kiện xảy ra trên cửa sổ này.
Các thuộc tính
- defaultStatus: dòng thông báo xuất hiện trên thanh trạng thái của cửa sổ trình duyệt. - status : dòng thông báo tạm thời xuất hiện trên thanh trạng thái của cửa sổ trình duyệt.
- frames : mảng các frame đƣợc chứa bên trong cửa sổ trình duyệt - location : URL của tệp tin tƣ liệu HTM đƣợc mở trong cửa sổ hiện thời - name : tên của cửa sổ
- closed : xác định trạng thái của cửa sổ có đƣợc đóng hay không. - top : trả về sổ cha nằm phía trên nhất.
- parent : tham chiếu đến cửa sổ chứa một cửa sổ khác - self, window : chỉ cửa sổ hiện thời.
- external : trả về host của trang web
- openner : khi một cửa sổ đƣợc mở, thuộc tính openner trỏ đến cửa sổ cha của nó.
Các phương thức
- alert : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định. - confirm : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định và hai nút lệnh Yes, No; phƣơng thức trả về true | false tùy thuộc ngƣời sử dụng ấn nút yes hay no.
- prompt : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định và một text box để ngƣời sử dụng nhập liệu. Phƣơng thức trả về một dữ liệu kiểu chuỗi. Cú pháp
: window.prompt(dòng nhắc, giá trị mặc nhiên);
- close : đóng cửa sổ trình duyệt hiện thời hay một ứng dụng HTML (HTA).
- open : mở một cửa sổ mới và nạp tệp tƣ liệu HTML đƣợc cho bởi URL. Cú pháp : window.open(URL, windowName, features);
Trong đó feature là các sắc thái của cửa sổ mới, đây là tham số tùy chọn. Một số thuôc tính và giá trị :
o height | width | left | = x ; xác định kích thƣớc của cửa sổ và khoảng cách bên trái với cửa sổ hiện tại, đơn vị tính bằng pixel.
o location | menubar | scrollbar | toolbar : thêm thanh địa chỉ, ... vào cửa sổ (gán giá trị yes sau mỗi thuộc tính để xác định)
o resizable : cửa sổ có thể thay đổi kích thƣớc
Ví dụ : window.open("chuong1.htm","wChap1","width=400, width=200"); - print : in trang web hiện thời ra máy in.
- setTimeOut();
- focus: chuyển cửa sổ vừa mở tiến đến phía trƣớc.
Ví dụ : <a href ="#onClick="window.openner.location="http://www.vnn.vn"; {window.focus();} VietNamNet </a>
- resizeTo(x, y) : thay đổi kích thƣớc cửa sổ với width =x và height=y. - resizeBy(m, n) : với m,n Z, tăng / giảm kích thƣớc cửa sổ với m,n pixel. - moveTo(x,y) : di chuyển cửa sổ đến vị trí với tạo độ đỉnh trên trái đến (x,y) - moveBy(m.y) : tăng giảm tọa độ đỉnh trên trái của cửa sổ với m, n pixel
-setInterval(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript trong khoảng thời gian, hàm này trả lại thời gian để hàm clearInterval() có thể loại bỏ nó.
-setTimeout(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript một lần sau một thời gian nhất định tính bằng milli giây.
-clearTimeout(số milli giây) : xóa bỏ đồng hồ báo giờ.
Các sự kiện
Có 5 sự kiện đƣợc kết hợp với đối tƣợng window: onblur, onfocus, onload, onresize, onunload. Ta sẽ nghiên cứu ở phần II.2 dƣới đây.
Mô hình sự kiện (Event model)
Mô hình sự kiện trong IE và NN bao gồm hai thành phần , tuy nhiên về chi tiết có nhiều điểm khác nhau.
- Đối tượng Event, đƣợc xem là một giao diện sự kiện để lập trình các script.
- Danh sách các sự kiện, mỗi sự kiện đƣợc xem nhƣ là một thuộc tính nội tại của mỗi thẻ HTML.
Đối tượng sự kiện (Event Object)
Sự kiện là kết quả của một hành động do ngƣời sử dụng hay hệ thống tạo ra, JavaScript là một ngôn ngữ hƣớng sự kiện, có thể sử dụng để đón bắt các sự kiện này khi chúng xảy ra và thực hiện các hành động. Thông qua việc nắm bắt và xử l sự kiện, JavaScript có thể truy cập đến các đối tƣợng của BOM để cập nhật, thay đổi thuộc tính của đối tƣợng, tạo nên trang web tƣơng tác và động, đây chính là khả năng mà Microsoft IE gọi là DHTML.
Đối tượng event
Trong IE BOM : đối tƣợng event là một đối tƣợng con của đối tƣợng window còn trong NN BOM thì nó là một đối tƣợng ngang cấp với đối tƣợng window, và trong mỗi mô hình đối tƣợng tƣ liệu đối tƣợng event có các thuộc tính , phƣơng thức khác nhau đƣợc cho trong các bảng sau, đây là sự khác biệt quan trọng cần lƣu .
Các thuộc tính của đối tƣợng event:
(IE 6: Event Object có 38 thuộc tính, NN 8: Event Object có 201 thuộc tính)
Properties IE NN Diễn tả
altKey x x Trả về true nếu ngƣời sử dụng ấn phím ALT trong khi sự kiện xảy ra và ngƣợc lại
ctlKey x x Trả về true nếu ngƣời sử dụng ấn phím CTRL trong khi sự kiện xảy ra và ngƣợc lại
shiftKey x x Trả về true nếu ngƣời sử dụng ấn phím SHIFT trong khi sự kiện xảy ra và ngƣợc lại
cancelBubble x x Trả về true nếu muốn ngƣng sự nổi bọt sự kiện clientX, clientY x x Tọa độ góc trên trái của trang web, tính bằng pixel screenX, screenY x x Tọa độ của màn hình tại vị trí xảy ra sự kiện pageX, pageY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện offsetX, offsetY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện fromElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi ra
Properties IE NN Diễn tả
toElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi vào keyCode x x Phím đƣợc sử dụng để kích họat sự kiện
srcElement x Đối tƣợng mà sự kiện diễn ra trong đó target x Trả về đối tƣợng đầu tiên mà sự kiện diễn ra type x x Loại sự kiện
keyCode x x Trả về mã Unicode của phím đƣợc ấn xuống
Ngăn chặn sự nổi bọt sự kiện (Event Bubbling)
Trong BOM, các phần tử của trang web đƣợc tổ chức theo một cây phân cấp, do vậy một sự kiện xảy ra trên đối tƣợng con có thể đƣợc xảy ra trên đối tƣợng cha của nó, hiện tƣợng này gọi là sự nổi bọt sự kiện. Ngƣợc lại với sự nổi bọt sự kiện là sự chảy tràn sự kiện
(Event Flow), sự kiện xảy ra ở cấp cao sẽ ảnh hƣởng đến các cấp thấp hơn. Ví dụ: <HTML> <HEAD> <SCRIPT language="JavaScript"> function cancelBubble(the){ var str=document.getElementById(the); if(str.tagName=="P") event.cancelBubble=true; //(1) /* script này chạy trên IE 6.0 lẫn NN 7.1
có thể thay dòng lệnh (1) bằng event.cancelBubble=true; là đủ */ alert("Thẻ P");
}
</SCRIPT> </HEAD>
<BODY onClick="alert('Thẻ BODY');">
<P id="idP" onClick="cancelBubble('idP');return false;"> PARAGRAPH</P> </BODY>
</HTML>
Nếu không có dòng lệnh (1) ở trên thì khi click trên PARAGRAPH sẽ lần lƣợt xảy ra sự kiện onClick trên thẻ <P> rồi trên thẻ <BODY> và hai hộp hội thoại lần lƣợt xuất hiện. Dòng lệnh (1) có tác dụng ngăn chặn sự nổi bọt sự kiện, lúc này khi click trên PARAGRAPH chỉ có hàm CancelBubble đƣợc thực hiện mà thôi.
Trong script trên ta sử dụng các phƣơng thức và thuộc tính đƣợc cả hai trình duyệt chấp nhận : phƣơng thức getElementByID (sẽ trình bày trong mục Document Object) và thuộc tính event.cancelBubble (đã trình bày trên), kỹ thuật nhƣ vậy gọi là cross-browser.
Các sự kiện
Tập hợp các sự kiện là thành phần của BOM chứ không phải là thành phần của JavaScript, mỗi phần tử trên trang web đƣợc kết hợp với một số sự kiện và các sự kiện này khác nhau trên mỗi trình duyệt hay cách khác mỗi thẻ HTML có những thuộc tính sự kiện xác định.
Lưu ý: giữa Microsoft và Netscape sử dụng các thuật ngữ liên quan đến mô hình sự kiện khá khác nhau, tuy nhiên nội dung đều nhƣ nhau: MS gọi event thì Netscape gọi event handler ...). Để thống nhất, trong giáo trình này chúng ta sử dụng thuật ngữ theo Microsoft.
<tag_name event_name = "câu lệnh JavaScript;"> ...
Danh sách các sự kiện thông dụng đƣợc sử dụng cho IE và NN : NSD : Ngƣời sử dụng
Event Áp dụng cho phần tử Mô tả & Sử dụng khi
onAbort image NSD dỡ bỏ việc nạp ảnh khi ckick vào một liên kết hay ấn nút lệnh Stop
onBlur window, frame và cả các phần tử của form
NSD rời khỏi tiêu điểm từ window, frame hay tất cả phần tử của form
onFocus window, frame và cả các phần tử của form
Đƣợc kích họat khi NSD thiết lập tiêu điểm trên đối tƣợng window, frame,...
onClick link, button, check box, v.v.
Đƣợc kích họat khi NSD ấn nút trái của chuột lên đối tƣợng
onChange text field, text area, select list
Đƣợc kích họat khi NSD thay đổi giá trị của phần tử
onLoad window, document, applet, framset, image, link, object, script, style
Đƣợc kích họat sau khi trình duyệt đã tải xong tƣ liệu HTML , applet hay image...
onUnLoad window, document, framset
Đƣợc bẩy (trigger) khi NSD loại bỏ tƣ liệu HTML khỏi trình duyệt.
onMouseDown button, link, document Đƣợc kích họat khi NSD ấn một phím chuột onMouseUp button, link, document Đƣợc kích họat khi NSD thả một phím chuột onMouseOver textarea, link, layer ,
image, button ...
Đƣợc kích họat khi NSD di chuyển con trỏ chuột trên phần tử
onMouseOut textarea, link, layer, image, button
Đƣợc kích họat khi NSD di chuyển con trỏ chuột ra khỏi phần tử
onResize window, frame Đƣợc kích họat khi kích thƣớc đối tƣợng sắp bị thay đổi
onScroll window, frame Đƣợc kích họat khi NSD sử dụng thanh cuộn của cửa sổ
onKeyDown textbox, text area Đƣợc kích họat khi NSD ấn một phím onKeyUp textbox, text area Đƣợc kích họat khi NSD nhả một phím onKeyPress textbox, text area Đƣợc kích họat khi NSD gõ một phím
Ví dụ 1: Sử dụng sự kiện onLoad để tự động mở trang web khác xuất hiện phía trƣớc trang web hiện tại.
<HTML>
<BODY onLoad="window.open('vd.htm','wVD','height=100, width=300);"> <!- Nội dung trang web ->
</BODY></HTML>
Đối tƣợng history
Đối tƣợng history lƣu giữ các URL mà ngƣời sử dụng đã mở bằng trình duyệt. window.history có các thuộc tính và phƣơng thức sau :
Thuộc tính
- lenght : danh sách URL trong history - current: URL của tƣ liệu HTML hiện hành - next: URL của tƣ liệu HTML tiếp sau
- previous : URL của tƣ liệu HTML đƣợc mở liền trƣớc.
Các phương thức
- back() : trở lại trang trƣớc - forward() : đi đến trang kế tiếp
- go() : nhận tham số là một URL hay một số (-1,0,1) để đi đến trang xác định. Trong IE: -1 tƣơng ứng với trang trƣớc, 0: trang hiện tại, 1: trang kế tiếp.
Đối tƣợng location
Đối tƣợng location chứa các thông tin về giao thức, host, port, liên kết, đƣờng dẫn, tên tệp tƣ liệu HTML của tệp tƣ liệu HTML đƣợc xem từ client, đồng thời cho phép thiết lập URL cho đối tƣợng window .
Các thuộc tính
- host : tên webserver - hostname : tên miền
- href : đƣờng dẫn đầy đủ của liên kết
- pathname : đƣờng dẫn và tên tệp tin của liên kết - port : cổng URL
- protocol : giao thức thực hiện liên kết.
- search : trả về một chuỗi là thông tin nhận đƣợc từ một trang web khác gửi đến theo phƣơng pháp GET.
Để biết các thuộc tính của đối tƣợng location ta sử dụng đọan script sau: for(prop in location){
document.write(prop+": "+location[prop]+"<br>";}
Đối tƣợng navigator
Đối tƣợng navigator chứa các thông tin về trình duyệt: tên, phiên bản, tên mã, ngôn ngữ thể hiện, hệ điều hành...
Các thuộc tính (đƣợc IE và NN sử dụng): - Appname : tên trình duyệt
- AppVersion : phiên bản của trình duyệt - appCodeName : tên mã của trình duyệt - platform : hệ điều hình của trình duyệt
Để biết các thuộc tính của đối tƣợng navigator ta sử dụng đọan script sau: for(prop in navigator){
document.write(prop+": "+ navigator [prop]+"<br>";}
Chú ý : Trong IE BOM navigator là đối tƣợng con của window, còn trong NN BOM navigator ngang cấp với window.
Đối tƣợng screen
Đối tƣợng screen chứa các thuộc tính liên quan đến độ phân giải màn hình, khả năng màu sắc và kích thƣớc màn hình tính bằng pixel:
- AvailHeight : Chiều cao của màn hình hệ thống, không kể thanh tác vụ - AvailWidth : Chiều rộng của màn hình hệ thống, không kể thanh tác vụ - ColorDepth : Số bít dùng để thể hiện màu cho mỗi pixel
- Height : Độ phân giải tính theo chiều đứng của màn hình - Width : Độ phân giải tính theo chiều ngang của màn hình
Đọan script sau sẽ thay đổi kích thƣớc và canh giữa cửa sổ trình duyệt trên màn hình của ngƣời sử dụng :
var newTopLeftX=(screen.availWidth-640)/2.0; var newTopLeftY =(screen.availHeight-480)/2.0; window.resizeTo(640,480);
window.moveTo(newTopLeftX, newTopLeftY);
Đối tƣợng document
document là đối tƣợng tƣ liệu, chứa tất cả phần tử HTML của trang web. Đây là đối tƣợng quan trọng nhất trong mô hình đối tƣợng trình duyệt, cho đến nay giữa IE và NN không có nhiều khác biệt: các đối tƣợng all, filter và selection chỉ có trong IE BOM còn đối tƣợng layer vốn là một đặc trƣng của NN, nay đã không tồn tại trong các phiên bản NN 6.0 hay cao hơn.
CÂU HỎI VÀ BÀI TẬP
1. Viết một script cho lại các mục của trình đơn để giải phƣơng trình bậc nhất, phƣơng trình bậc hai một ẩn
2. Viết một script cho phép nhập dữ liệu vào mãng. Hãy sắp xếp mãng đó theo phƣơng thức Sort và in ra kết quả (Sử dụng phƣơng thức document.write biến)
3. Viết một script cho phép nhập một chuỗi k tự. Cho biết độ dài của chuỗi, số từ trong chuỗi, xóa bỏ các khoảng trống không có nghĩa trong chuỗi.
4. Tạo một lịch gồm có các thông tin : ngày, tháng, năm để ngƣời sử dụng có thể tra cứu thông tin theo thời gian đã lựa chọn (không dùng đối tƣợng ActiveX)
(Tạo lịch giống đối tƣợng ActiveX, nhƣng chỉ sử dụng JavaScript: tham khảo tại địa chỉ http://javascript.internet.com/calendars/dynamic.html hay thƣ viện JavaScript trên http://www.echip.com)
Chƣơng 4: NGÔN NGỮ KỊCH BẢN VBSCRIPT
4.1. Mở đầu
VBScript là ngôn ngữ kịch bản chính để lập trình ứng dụng web phía server khi sử dụng công nghệ ASP. Các định danh trong VBScript không phân biệt chữ hoa hay chữ thƣờng.
VBScript cho phép các lập trình viên phát triển website tạo các trang web động cho ngƣời dùng sử dụng các trình duyệt web nhƣ Internet Explorer mà với HTML, ta không có đƣợc nhiều những khả năng này. VBScript có thể làm những việc đơn giản nhƣ in ra ngày tháng hiện tại, truy cập vào các hệ thống file Server hay web Server và cung cấp các công cụ để ta có thể phát triển các ứng dụng web.