Mô hình dom

CHƯƠNG XVII 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, Tất đối tượng Javascript tổ chức phân cấp dạng hình gọi mô hình DOM (Document Object Model), Ở mức đối tượng window biểu thị cho khung hay cửa sổ trình duyệt, phần tử lại đối tượng window  Để truy xuất đến đối tượng IE thay đổi liệu cho phần tử dùng thuộc tính ID , tất đối tượng trang có ID window document event frame history location document form Reset submit button check box select hidden password text radio textarea anchor applet class element plug-in embed style ID tag image layer link navigator screen Mục đích mô hình DOM:  Để định nghĩa tổ chức phân cấp thể phần hồ sơ web  Cho phép thay đổi cấu trúc thông qua việc 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  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 Tuy nhiên ta bỏ qua đối tượng window thao tác cửa sổ hành Ví dụ: window.location  Ngoài đối tượng chương trình xây dựng sẳn, tạo thêm đối tượng cần thiết cho nhu cầu sử dụng  Mỗi đối tượng có thuộc tính, phương thức kiện a) Thuộc tính (Properties): nơi chứa 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 Ví dụ function ZoomIn() { Idh1.width=Idh1.width +10; Idh1.height=Idh1.height + 5; } function ChangeImg(file) { Idh1.src=file ; } b) 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ã kịch gọi xử lý kiện  Cách sử dụng kiện: muốn điều khiển kiện, ta thêm kiện vào thẻ HTML  Cú pháp: < TagName eventhandler=”JavaScriptCommand”>  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 c) 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() Thuộc tính Mô tả alinkcolor Thiết lập trả giá trị màu liên kết xem tài liệu bgcolor Thiết lập trả giá trị màu tài liệu cookie Chứa giá trị cookies dành cho tài liệu hành domain Trả giá trị tên miền máy chủ chứa document fgcolor Thiết lập trả giá trị màu chữ tài liệu lastmodified Trả giá trị ngày cuối mà tài liệu cập nhật linkcolor Thiết lập trả giá trị màu liên kết tài liệu location mở trang web referrer Returns the URL of the document that loaded the current document title Trả giá trị tựa đề tài liệu url Trả đường dẫn củ tài liệu hành vlinkcolor Thiết lập trả giá trị màu liên kết xem tài liệu b) Phương thức đối tượng document Phương thức Mô tả clear() Xóa tài liệu close() Đóng tài liệu focus() Đưa trỏ đối tượng trang open([“mimetype”]) Mở stream để thu thập liệu phương thức write writeln viết chuỗi vào tài liệu write("str") writeln("str") viết chuỗi vào tài liệu xuống dòng c) Sự kiện tác động đối tượng document Cú pháp: document.event_name="someJavaScriptCode"  OnBlur  OnClick  OnDblClick  OnFocus  OnKeyDown  OnKeyPress  OnKeyUp  OnMouseDown  OnMouseMove  OnMouseOut  OnMouseOver  OnMouseUp  OnMouseUp Đối tượng trình duyệt (Navigator Object) Đối tượng trình duyệt chứa đựng thông tin trình duyệt web client Có hai trình duyệt web  Nescape Navigator  Internet Explorer Mặc dù hai hỗ trợ mô hình đối tượng ngôn ngữ Javascript có số đối tượng cách truy cập vào thành phần thuộc tính hai trình duyệt có khác Muốn cho ứng dụng chạy hoàn chỉnh trình duyệt người lập trình phải xác định chương trình chạy trình duyệt version để xử lý đọan code tốt Thuộc tính Mô tả appName Tên trình duyệt appVersion Phiên trình duyệt cookieEnabled platform Nền hệ điều hành appCodeName Xác định tên nội trình duyệt (Atlas) Ví dụ: Navigator Object Exemple document.write("appCodeName = "+navigator.appCodeName + ""); document.write("appName = "+navigator.appName + ""); document.write("appVersion = "+navigator.appVersion + ""); document.write("userAgent = "+navigator.userAgent + ""); Đối tượng Window Là đối tượng cao mô hình DOM, nơi chứa tất thành phần trang web a) Các thuộc tính Windows: Thuộc tính Mô tả Giá trị defaultStatus thiết lập chuổi t/báo trạng thái Text location thiết lập thông báo thời điểm Text hành Xác định vị trí trang cửa sổ URL history Xác định phần tử history status alwaysLowered hiển thị cửa sổ bên sổ khác Yes/no alwaysRaised hiển thị cửa sổ tất cửa sổ khác Yes/no Dependent Yes/no directories Cửa sổ đóng cửa sổ cha bị đóng Hiển thị Button thư mục fullscreen hiển thị chế độ đầy hình Yes/no height thiết lập chiều cao cửa sổ số nguyên hotkeys Cho phép dùng phím nóng Yes/no Thiết lập k/cách từ text đến cạnh cửa sổ số nguyên left Yes/no location hiển thị hộp location Yes/no menubar hiển thị menu bar Yes/no resizable Cho phép thay đổi kích thước cửa sổ Yes/no scrolbars xuất /không xuất cuộn Yes/no status Hiển thị trạng thái Yes/no titlebar hiển thị tiêu đề Yes/no toolbar hiển thị công cụ Yes/no width Xác định độ rộng cửa sổ số nguyên closed trả giá trị true, false True cửa sổ đóng true, false Ví dụ: window.defaultStatus=”String” window.status=”String” window.location=”URL” Ta mở trang web lệnh: window.location.href=”URL” Phương Thức Mô tả alert("msg") Hiển Thị hộp thọai thông báo blur() Di chuyển trỏ đến cửa sổ hành clearinterval(ID) Hủy thời gian thiết lập setinterval() clearTimeout(ID) Hủy thời gian thiết lập setTimeout() close() Đóng cửa sổ hành confirm("msg") focus() MoveBy(x,y) MoveTo(x,y) Hiển thị hộp thọai xác nhận với hai nút Cancel OK Đưa trỏ cửa sổ hiệnhành Di chuyển cửa sổ đến vị trí đọan pixel so với cửa sổ hành Di chuyển cửa sổ qua trái lên đọan pixel cụ thể so với cửa sổ hành URL : đc trang web nạp vào cửa sổ open(URL,"windowname", WindowName: tên cửa sổ "FeatureList") FeatureList : danh sách thuộc tính cửa sổ: toolbars, menu, status … in nội dung cửa sổ hành print() prompt("msg","reply") Hiển thị hộp thoại nhập liệu setTimeout(func,millisec) Thiết lập thời gian mili giây để gọi hàm stop() resizeBy(dx,dy) resizeTo(x,y) scrollBy(dx,dy) scrollTo(x,y) Hủy việc download cửa sổ Tương tự việc đóng cửa sổ trình duyệt Thay đổi kích thước cửa sổ sang phải dx, dy pixel Thay đổi kích thước x, y pixel cuộn nội dung sang phải dx, xuống dy pixel cuộn nội dung trang đốn vị trí x,y Ví dụ: Objwindow.close()  Từ khoá self: trường hợp muốn thao tác cửa sổ hành ta dùng từ khoá self thay cho đối tượng window Ví dụ : đóng cửa sổ hành: Self.close() window.close() Ví dụ: Đoạn Script đóng, mở cửa sổ trình duyệt [...]... Math.method([value]) Phương thức Mô tả abs(x) Trả về giá trị tuyệt đối của biến x acos(x) Trả về giá trị arccosine của x ceil(x) Trả về số nguyên lớn hơn hoặc bằng x floor(x) Trả về số nguyên nhỏ hơn hoặc bằng x log(x) Trả về giá trị log của x max(x,y) Trả về giá trị lớn nhất trong hai số x và y min(x,y) Trả về giá trị nhỏ nhất trong hai số x và y pow(x,y) Trả về giá trị x lũy thừa y random() Trả về giá trị một... b) Các phương thức của đối tượng Date(): Để truy xuất phương thức của đối tượng dùng cú pháp variableName.Method() Phương thức Date() getDate() getDay() getMonth() getFullYear() getYear() getHours() Mô tả trả về đối tượng date Trả về giá trị ngày ( số nguyên từ 1-31) trong tháng Trả về giá trị ngày trong tuần ( số nguyên từ 0-6 Sunday=0) Trả về tháng trong năm (from 0-11 0=January, 1=February) Trả... String():  StringLength=stringVariable.length  StringLength=”This is a string”.length c) Các phương thức của String:Các phương thức của String để thực hiện các thao tác trên nội dung của chuỗi: Phương thức Mô tả anchor("name Tham số name là thuộc tính NAME của tag ") Ví dụ str.anchor(“name” ) big() Trả về một chuỗi đặt trong cặp thẻ str.big() Bold() Trả về một chuỗi in đậm str.bold() charAt(index)... "") document.write(arrName.push("Ola","Jon") + "") document.write(arrName.pop() + "") document.write(arrName.shift() + "") 2 Đối tượng Date() : Cung cấp thông tin về ngày, giờ trên môi trường client Dùng thiết lập ngày tháng năm và giờ hiện hành trên trang web a) Cách khai báo: Có 2 cách khai báo  Cách 1: Khai báo và khởi tạo var variableName= new Date(“month, day, year, hours : ...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, Tất đối tượng Javascript tổ chức phân cấp dạng hình gọi mô hình DOM (Document... Đối tượng Window Là đối tượng cao mô hình DOM, nơi chứa tất thành phần trang web a) Các thuộc tính Windows: Thuộc tính Mô tả Giá trị defaultStatus thiết lập chuổi t/báo trạng... applet class element plug-in embed style ID tag image layer link navigator screen Mục đích mô hình DOM:  Để định nghĩa tổ chức phân cấp thể phần hồ sơ web  Cho phép thay đổi cấu trúc thông