Chương MƠ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT I KHÁI NIỆM Trình duyệt ứng dụng dùng để hiển thị nội dung tư liệu HTML Các trình duyệt đưa số đối tượng để script truy cập, đối tượng tổ chức theo mơ hình phân cấp, gọi mơ hình đối tượng trình duyệt (BOM, Browser Object Model) BOM đóng vai trị API (Application Programming Interface) cho việc lập trình ứng dụng tảng web cho client-side hay cách khác: mơi trường trình duyệt, JavaScript dựa vào mơ hình để truy xuất đối tượng trang web để cập nhật nội dung, cấu trúc kiểu dáng đối tượng Mỗi đối tượng BOM tập hợp gồm : - Các thuộc tính (Properties) - Các phương thức (Methodes) - Các kiện (Events) kết hợp đối tượng Trong giáo trình này, trình bày đối tượng BOM IE 5.0 NN 6.0 sử dụng số nét đặc sắc mơ hình đối tượng trình duyệt IE NN IE Browser Objects NN Browser Objects Trong IE BOM, đối tượng lớn đối tượng window, NN BOM, đối tượng window đối tượng navigator ngang cấp Sự khác IE BOM NN BOM chủ yếu đối tượng thuộc tính phương thức đối tượng Lưu ý : số tài liệu đề cập đến khái niệm DOM, mơ hình đối tượng tư liệu (Document Object Model), lĩnh vực rộng lớn chủ yếu dành cho XML Thuật ngữ BOM xa lạ với tài liệu tiếng Việt, nhiên P.Kantor thuộc Đại học New York sử dụng khái niệm giáo trình 93 II CÁC ĐỐI TƯỢNG CỦA MƠ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT Có đối tượng trình duyệt: window, document, event, frame, history, location, navigator, screen, mimeType plugin; ta nghiên cứu đối tượng quan trọng, đối tượng quan trọng đối tượng document II.1 Đối tượng window Đối tượng window miêu tả cửa sổ hiển thị trang web, cung cấp khả truy xuất đến đối tượng trạng thái nắm bắt kiện xảy cửa sổ II.1.1: Các thuộc tính - defaultStatus: dịng thơng báo xuất trạng thái cửa sổ trình duyệt - status : dịng thơng báo tạm thời xuất trạng thái cửa sổ trình duyệt - frames : mảng frame chứa bên cửa sổ trình duyệt - location : URL tệp tin tư liệu HTM mở cửa sổ thời - name : tên cửa sổ - closed : xác định trạng thái cửa sổ có đóng hay khơng - top : trả sổ cha nằm phía - parent : tham chiếu đến cửa sổ chứa cửa sổ khác - self, window : cửa sổ thời - external : trả host trang web - openner : cửa sổ mở, thuộc tính openner trỏ đến cửa sổ cha II.1.2: Các phương thức - alert : hiển thị hộp hội thoại chứa thông báo ứng dụng xác định - confirm : hiển thị hộp hội thoại chứa thông báo ứng dụng xác định hai nút lệnh Yes, No; phương thức trả true | false tùy thuộc người sử dụng ấn nút yes hay no - prompt : hiển thị hộp hội thoại chứa thông báo ứng dụng xác định text box để người sử dụng nhập liệu Phương thức trả 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 thời hay ứng dụng HTML (HTA) - open : mở cửa sổ nạp tệp tư liệu HTML cho URL Cú pháp : window.open(URL, windowName, features); Trong feature sắc thái cửa sổ mới, tham số tùy chọn Một số thc tính giá trị : o height | width | left | = x ; xác định kích thước cửa sổ khoảng cách bên trái với cửa sổ tại, đơn vị tính pixel o location | menubar | scrollbars | toolbar : thêm địa chỉ, vào cửa sổ (gán giá trị yes sau thuộc tính để xác định) o resizable : cửa sổ thay đổi kích thước Ví dụ : window.open("chuong1.htm","wChap1","width=400, height=200") ; 94 - print : in trang web thời máy in - setTimeOut(); - focus: chuyển cửa sổ vừa mở tiến đến phía trước Ví dụ : VietNamNet - blur : ngược lại với phương thức focus(), đưa cửa sổ mở phía sau - resizeTo(x, y) : thay đổi kích thước cửa sổ với width =x 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ái đến (x,y) - moveBy(m.y) : tăng giảm tọa độ đỉnh trái cửa sổ với m, n pixel -setInterval(câu lệnh JavaScript, số milli giây) : thực câu lệnh JavaScript khoảng thời gian, hàm trả lại thời gian để hàm clearInterval() loại bỏ -setTimeout(câu lệnh JavaScript, số milli giây): thực câu lệnh JavaScript lần sau thời gian định tính milli giây -clearTimeout(số milli giây) : xóa bỏ đồng hồ báo Lưu ý : cửa sổ trình duyệt, ta muốn in (File-Print hay sử dụng phương thức print) trang web giấy in mà không muốn in header footer Page Setup xóa trống mã định dạng text box sau: II.1.3 Các kiện Có kiện kết hợp với đối tượng window: onblur, onfocus, onload, onresize, onunload Ta nghiên cứu phần II.2 II.2 Mơ hình kiện (Event model) Mơ hình kiện IE NN bao gồm hai thành phần , nhiên chi tiết có nhiều điểm khác - Đối tượng Event, xem giao diện kiện để lập trình script - Danh sách kiện, kiện xem thuộc tính nội thẻ HTML II.2.1 Đối tượng kiện (Event Object) Sự kiện kết hành động người sử dụng hay hệ thống tạo ra, JavaScript ngơn ngữ hướng kiện, sử dụng để đón bắt kiện chúng xảy thực hành động Thông qua việc nắm bắt xử lý kiện, JavaScript truy cập đến đối tượng DOM để cập nhật, thay đổi thuộc tính đối tượng, tạo nên trang web tương tác động, khả mà Microsoft IE gọi DHTML Đối tượng event 95 Trong IE DOM : đối tượng event đối tượng đối tượng window cịn NN DOM đối tượng ngang cấp với đối tượng window, mơ hình đối tượng tư liệu đối tượng event có thuộc tính , phương thức khác cho bảng sau, khác biệt quan trọng cần lưu ý Các thuộc tính đố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 altKey x x ctlKey x x shiftKey x x cancelBubble clientX, clientY screenX, screenY pageX, pageY offsetX, offsetY fromElement toElement srcElement target type keyCode x x x x x x x x x x x x x x x x Diễn tả Trả true người sử dụng ấn phím ALT kiện xảy ngược lại Trả true người sử dụng ấn phím CTRL kiện xảy ngược lại Trả true người sử dụng ấn phím SHIFT kiện xảy ngược lại Trả true muốn ngưng bọt kiện Tọa độ góc trái trang web, tính pixel Tọa độ hình vị trí xảy kiện Tọa độ cửa số trang vị trí xảy kiện Tọa độ cửa số trang vị trí xảy kiện Trả phần tử HTML mà từ trỏ chuột Trả phần tử HTML mà từ trỏ chuột vào Đối tượng mà kiện diễn Trả đối tượng mà kiện diễn Loại kiện Trả mã Unicode phím ấn xuống Ví dụ : người sử dụng ấn nút chuột vào button , kiện onclick phát sinh, thông tin kiện cập nhật đối tượng Event: Đọan mã sau cho ta thuộc tính quan trọng đối tượng event IE DOM function listInfo(){ // Lưu ý: script chạy Internet Explorer var str="Event.Type:"+event.type+"\n"+ "Event.clientX,Y: ("+event.clientX+","+event.clientY+")"+"\n"+ "Event.offsetX,Y:("+event.offsetX+","+event.offsetY+")"+"\n"+ "Event.srcElement.tagName:"+event.srcElement.tagName; alert(str); } 96 Ví dụ : Trong trang web có phần tìm kiếm, việc thực gõ chữ Việt textbox script điều khiển dựa vào thuộc tính keyCode đối tượng event Đọan mã sau minh họa giá trị keyCode (theo bảng mã Unicode) phím ấn IE DOM NN DOM có khác biệt việc mô tả đối tượng Event Đọan mã sau liệt kê tất thuộc tính đối tượng Event: for(prop in event) { document.write("event."+prop+"");} II.2.2 Ngăn chặn bọt kiện (Event Bubbling) Trong DOM, phần tử trang web tổ chức theo phân cấp, kiện xảy đối tượng xảy đối tượng cha nó, tượng gọi bọt kiện Ngược lại với bọt kiện chảy tràn kiện (Event Flow), kiện xảy cấp cao ảnh hưởng đến cấp thấp Ví dụ: function cancelBubble(the){ var str=document.getElementById(the); if(str.tagName=="P") event.cancelBubble=true; //(1) /* script chạy IE 6.0 lẫn NN 7.1 thay dòng lệnh (1) event.cancelBubble=true; đủ */ alert("Thẻ P"); } PARAGRAPH
Nếu khơng có dịng lệnh (1) click PARAGRAPH xảy kiện onClick thẻ thẻ hai hộp hội thoại xuất Dịng lệnh (1) có tác dụng ngăn chặn bọt kiện, lúc click PARAGRAPH có hàm CancelBubble thực mà thơi Trong script ta sử dụng phương thức thuộc tính hai trình duyệt chấp nhận : phương thức getElementByID (sẽ trình bày mục Document 97 Object) thuộc tính event.cancelBubble (đã trình bày trên), kỹ thuật gọi cross-browser II.2.3 Các kiện Tập hợp kiện thành phần DOM thành phần JavaScript, phần tử trang web kết hợp với số kiện kiện khác trình duyệt hay cách khác thẻ HTML có thuộc tính kiện xác định Cách sử dụng: Danh sách kiện thông dụng sử dụng cho IE NN : NSD : Người sử dụng Event onAbort Áp dụng cho phần tử Mô tả & Sử dụng image NSD dỡ bỏ việc nạp ảnh ckick vào liên kết hay ấn nút lệnh Stop onBlur window, frame NSD rời khỏi tiêu điểm từ window, frame phần tử form hay tất phần tử form onFocus window, frame Được kích họat NSD thiết lập tiêu phần tử form điểm đối tượng window, frame, onClick link, button, check Được kích họat NSD ấn nút trái box, v.v chuột lên đối tượng onChange text field, text area, Được kích họat NSD thay đổi giá trị select list phần tử onLoad window, document, Được kích họat sau trình duyệt tải applet, framset, image, xong tư liệu HTML , applet hay image link, object, script, style onUnLoad window, document, Được bẩy (trigger) NSD loại bỏ tư liệu framset HTML khỏi trình duyệt onMouseDown button, link, document Được kích họat NSD ấn phím chuột onMouseUp button, link, document Được kích họat NSD thả phím chuột onMouseOver textarea, link, layer , Được kích họat NSD di chuyển trỏ image, button chuột phần tử onMouseOut textarea, link, layer, Được kích họat NSD di chuyển trỏ image, button chuột khỏi phần tử onResize window, frame Được kích họat kích thước đối tượng bị thay đổi onScroll window, frame Được kích họat NSD sử dụng cuộn cửa sổ onKeyDown textbox, text area Được kích họat NSD ấn phím onKeyUp textbox, text area Được kích họat NSD nhả phím onKeyPress textbox, text area Được kích họat NSD gõ phím Ví dụ 1: Sử dụng kiện onLoad để tự động mở trang web khác xuất phía trước trang web 98 Ví dụ 2: Sử dụng kiện onKeyDown để nhận diện phím bấm có phải phím số hay khơng, không trỏ khỏi textbox Đây phương pháp kiểm tra hợp lệ liệu nhập mà không sử dụng kiện onBlur function check(){ var kcode=event.keyCode; if(kcode>47 && kcode=0)||(parseInt(objD.value) Họ tên sinh viên Điểm thi Phần tử text area - Thẻ HTML : - Các thuộc tính : id, name,value, rows, cols, style, tableIndex, disabled - Các kiện : onFocus, onBlur, onChange Ví dụ : 106 Phần tử button - Thẻ HTML : - Các thuộc tính : value, style, - Các kiện : onClick, onMouseOver, onMouseOut, Hai kiểu đặc biệt phần tử button có kiểu : reset submit Ví dụ : xây dựng script thay đối biểu biện nút lệnh ứng với hai kiện chuột function ch(bg,fco){ var nt=document.getElementById("bt"); nt.style.backgroundColor=bg; nt.style.color=fco // sử dụng nt.value để thay đổi nhãn nút lệnh }