công nghệ website - chương xvii mô hình đối tượng

MƠ HÌNH ĐỐI TƯỢNG I MƠ HÌNH DOM (Document Object Model)  Đối tượng – Mơ hình đối tượng: – Mỗi thành phần trang web xem đối tượng, Các đối tượng Javascript tổ chức phân cấp dạng hình gọi mơ hình DOM – Cao đối tượng window biểu thị cho khung hay cửa sổ trình duyệt, phần tử lại window  Để truy xuất đến đối tượng dùng thuộc tính ID, đối tượng có ID I MƠ HÌNH DOM (Document Object Model)  Mục đích mơ hình DOM: – Để định nghĩa tổ chức phân cấp thể – – – – phần tài liệu web Thay đổi cấu trúc cách thêm bớt nội dung Cung cấp cách thức quan sát, thao tác đặc tính nội dung trang web Cung cấp thông tin cách tương tác mục trang web với người dùng Nó cho phép thơng báo kiện gây chuột bàn phím I MƠ HÌNH DOM (Document Object Model)  Muốn truy cập vào đối tượng phải truy cập vào đối tượng chứa trước, dùng dấu chấm (.) để phân cách đối tượng Ví dụ: window.location  Có hai loại đối tượng: – Do chương trình xây dựng sẵn – Đối tượng người lập trình xây dựng  Mỗi đối tượng có thuộc tính, phương thức kiện I MƠ HÌNH DOM (Document Object Model)  Thuộc tính (Properties): mơ tả thơng tin đối tựơng Ví dụ: Trong tag Img có thuộc tính src, width, height, Để thay đổi kích thước hình ta dựa vào thuộc tính Id Idh1 Idh1.width, Idh1.height Idh1.src I MƠ HÌNH DOM (Document Object Model)  Sự kiện (event): hành động, việc xảy trang web click chuột, di chuyển chuột,… – Sự kiện xử lý đoạn mã script gọi xử lý kiện  Cách sử dụng kiện: đưa kiện vào thẻ HTML  Cú pháp: – TagName: tên tag – eventhandler: tên kiện – JavaScript Command: gọi hàm xử lý kiện Tên kiện Ý nghĩa Onmousedown Phát sinh người sdụng nhấn chuột Onmouseover Phát sinh người sdụng d/chuyển chuột lên đối tượng Onmouseout Phát sinh người sdụng d/chuyển chuột đtượng Onkeypress Phát sinh người sử dụng nhấn phím Onfocus Phát sinh đối tượng nhận tiêu điểm Onblur Phát sinh rời khỏi đối tượng Onclick - Người dùng click chuột vào đối tượng - Một đối tượng có tiêu điểm, người sd nhấn enter -Một checkbox nút chọn có tiêu điểm, người sd nhấn phím Spacebar Onload - Phát sinh đối tượng tải xuống OnUnload - Phát sinh đối tượng nạp trở lại chuyển trang Onresize - Phát sinh cửa sổ bị thay đổi kích thước Onselect - Phát sinh đối tựơng chọn Onchange - Phát sinh đối tượng thay đổi giá trị Onsubmit - Phát sinh Form Submit I MƠ HÌNH DOM (Document Object Model)  Phương thức Method(): Là hàm đươc xây dựng trước có tác dụng làm thay đổi thuộc tính đối tượng  Cách truy xuất vào phương thức đối tượng Object_name.Method() II Xây dựng đối tượng – Bước 1: Định nghĩa đối tượng cách xây dựng hàm cho đối tượng gồm phương thức thuộc tính function Object(List Parameter) { this.property1= Parameter1; this.property2= Parameter2; … this.method1=functionName1; this.method2=functionName2; …} II Xây dựng đối tượng Trong – Từ khố this để tham chiếu đến đối tượng tạo – Câu lệnh this.property1= Parameter1: gán giá trị Parameter1 cho thuộc tính property1 – Muốn xây dựng phương thức cho đối tượng gán hàm định nghĩa sẵn cho phương thức Tên_Đối_tượng.prototype.Tên_Hàm=function(){ //… } IV.2.Các thuộc tính phần tử form T/ tính Mơ tả Ví dụ Xác định tên document.forms[i].elements[j].name Name phần tử j form thứ i Type Xác định lọai đối tượng Xác định giá trị phần tử thứ j Value form i document.forms[i].elements[j].type document.forms[i].elements[j].value IV.2.Các thuộc tính phần tử form Checked Disabled isDisable readOnly Xác định phần tử thứ j có checked khơng Thiết lập chế độ vơ hiệu hóa đối tượng Kiểm tra phần tử có bị vơ hiệu hóa hay khơng Cho phép/khơng thay đổi nội dung phần tử document.form[i] elements[j].checked trả giá trị true false document.form[i].elements[j] disabled document.form[i].elements[j] isDisable document.forms[i].elements[j] readOnly IV.2.Các thuộc tính phần tử form Ví dụ: function loadform() { document.form1.ok.disabled=true; } function validateform() { a=document.form1.user.value; if(a!="") document.form1.ok.disabled=false; else document.form1.ok.disabled=true; } IV.3 Phương thức phần tử form  Focus (): Đưa trỏ lại text box dropdownmenu document.forms[i].elements[j].focus() Ví dụ: document.form1.user.focus(); Lưu ý: – Nếu làm việc document hành, bỏ qua document nameForm.nameField.property nameForm.nameField.method V Thao tác đối tượng form  Thao tác trường radio – Để lấy giá trị trường radio ta phải sử dụng đến mảng element Duyệt qua tất phần tử kiểm tra phần tử có checked khơng ?  Cú pháp: Countfield=nameform.length for(var i=0 ; i