Bài giảng môn: Coreldraw - Chương XVII (tiếp) Mô hình đối tượng

CHƯƠNG XVII(tt)MÔ HÌNH ĐỐI TƯỢNG Đối tượng form Form là một thành phần dùng để thu thập dữ liệu, thông tin từ người dùng. Mỗi phần tử trong form là một đối tượng trong DOM. Do đó mỗi phần tử trên form cũng có những sự kiện và phương thức của nóCác sự kiện của các phần tử trên form . Phần tử Tên sự kiện Button onClickCheckboxonClickFormOnSubmit, onResetTextboxOnBlur,OnChange,OnFocus,OnselectRadioOnClickReset buttonOnClickDropdown menuOnBlur,onChange,onFocus,onSelectSubmit button OnClickTextareaOnBlur,OnChange,OnFocus,OnselectT/tínhMô tảVí dụActionTrả về đường dẫn (URL) đến tập tin xử lý của form thứ i Document.forms[i].actionLengthTrả về số form trên trang webHoặc trả về số phần tử trên form thứ iCountform=document.forms.lengthCountfield=document.forms[i].lengthNameTrả về giá trị tên của form thứ iNameform=document.forms[i].nameMethodCác định phương thức của form thứ iMethodform=document.forms[i].methodelementsmảng element chứa các phần tử trên form document.forms[i].elements[j].valueThuộc tính của formVí dụ: function kq() { sptform=document.form1.length document.form1.spt.value=sptform tenform=document.forms[0].name document.form1.formname.value=tenform }Các thuộc tính trên mảng element T/ tính Mô tả Ví dụ Name Xác định tên của phần tử j trên form thứ i.document.forms[i].elements[j].nameTypeXác định lọai của đối tượng document.forms[i].elements[j].typeValueXác định giá trị của phần tử thứ j trong form i. document.forms[i].elements[j].valueCheckedXác định phần tử thứ j có được checked khôngdocument.form[i].elements[j].checkedtrả về giá trị true hoặc falseDisabledThiết lập chế độ vô hiệu hóa đối tượngdocument.form[i].elements[j].disabledisDisableKiểm tra phần tử có bị vô hiệu hóa hay khôngdocument.form[i].elements[j].isDisablereadOnlyCho phép/không thay đổi nội dung của phần tử document.forms[i].elements[j].readOnlyVí 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;}Phương thức trên mảng element Focus (): Đưa con trỏ về lại text box hoặc dropdownmenu document.forms[i].elements[j].focus()Ví dụ:document.form1.user.focus(); Lưu ý: Nếu ta đang làm việc trên document hiện hành, thì có thể bỏ qua document nameForm.nameField.property hoặc nameForm.nameField.methodCác phần tử trên fromThao tác trên trường radio Để lấy giá trị của trường radio ta phải sử dụng đến mảng element. Duyệt qua tất cả các phần tử và kiểm tra phần tử đó có được checked không ? Cú pháp:Countfield=nameform.lengthfor(var i=0 ; i function chontrinhduyet() { count=document.form1.length; for(i=0; iVí dụ : Checkboxfunction check(){ coffee=document.forms[0].coffee answer=document.forms[0].answer txt="" for (i = 0; iThao tác trên dropdownmenuThuộc tính và phương thức của dropdownmenuThuôc tínhThuộc tính Mô tả Ví dụ length Trả về số phần tử trong danh sách dropdownmenu.spt=nameform.namefield.lengthselectedIndextrả về chỉ số của phần tử được chọn trong danh sáchspt=nameform.namefield.selectedIndexoptionsmảng option được đánh chỉ số từ 0->spt-1Ví dụ:function chonkhoa(){ option=document.forms[0].khoa.options[document.forms[0].khoa.selectedIndex].text txt=document.forms[0].chon.value txt=txt + option document.forms[0].chon.value=txt}THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG Thay đổi nội dung trên trang dựa vào inner và outer Ta dùng đặc tính inner và outer để thay đổi nội dung hoặc lấy giá trị của một vùng nào đó trên trang web.Phân biệt giữa inner và outer Inner là nội dung chứa bên trong của đối tượng chứa ID. Inner gồm cóInnerHTML lấy nội dung text và tag HTML bên trong đối tượng IDinnerText: chỉ lấy nội dung text bên trong dối tượng IDOuter là phần inner và bản thân đối tượng chứa ID. Outer gồm có outerHTML lấy nội dung text và tag HTML của cả đối tượng IDouterText : lấy nội dung textVí dụ:Monitor SAMSUNGinnerouterVí dụ:Var s1,s2s1=Intro.outerTexts2=Intro.innerTextthì s1 và s2 đều nhận giá trị Monitor SAMSUNG Ví dụs1=Intro.outerHTMLs2=Intro.innerHTMLThì s1=Monitor SAMSUNGVà s2=Monitor SAMSUNGVí dụ:thiết kế form có dạng: function chonsp() { prod=document.form1.masp.value; hinhsp=document.forms[0].hinh.options[document. forms[0].hinh.selectedIndex].text; price=document.form1.giasp.value; ma.innerText=prod; hinh.innerText=hinhsp; gia.innerText=price }function ChangeImage(path) { h.innerHTML="" }Gọi hàm ChangeImage(value) hình 1 hình 2 hình 3