Đang tải... (xem toàn văn)
Bài giảng Thiết kế Web - Chương 17 giới thiệu về mô hình đối tượng. Các nội dung chính trong chương này gồm có: Mô hình DOM (Document Object Model), các đối tượng có sẵn trong Javasript. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.
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ử cịn 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 Ngồ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 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 a) 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 location Thiết lập trả giá trị màu liên kết tài liệu 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 write("str") viết chuỗi vào tài liệu 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 hồ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 status thiết lập thông báo thời điểm hành Text location Xác định vị trí trang cửa sổ URL history Xác định phần tử history 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 Cửa sổ đóng cửa sổ cha bị đóng Yes/no directories Hiển thị Button thư mục Yes/no fullscreen hiển thị chế độ đầy hình Yes/no height thiết lập chiều cao cửa sổ số ngun 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 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") Hiển thị hộp thọai xác nhận với hai nút Cancel OK focus() Đưa trỏ cửa sổ hiệnhành MoveBy(x,y) Di chuyển cửa sổ đến vị trí đọan pixel so với cửa sổ hành MoveTo(x,y) 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 : danh sách thuộc tính "FeatureList") cửa sổ: toolbars, menu, status … print() in nội dung cửa sổ hành 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() Hủy việc download cửa sổ Tương tự việc đóng cửa sổ trình duyệt resizeBy(dx,dy) Thay đổi kích thước cửa sổ sang phải dx, dy pixel resizeTo(x,y) Thay đổi kích thước x, y pixel scrollBy(dx,dy) cuộn nội dung sang phải dx, xuống dy pixel Ví dụ: Objwindow.close() Từ khố 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
... số) setHours() Thiết lập lại cho hệ thống ( từ 0-2 4) setMinutes() Thiết lập lại phút cho hệ thống ( từ 0-5 9) setMonth() Thiết lập lại tháng cho hệ thống ( từ 0-1 1) setSeconds() Thiết lập lại giây... getHours() Trả hệ thống (từ 0-2 3) getMinutes() Trả phút hệ thống (từ 0-5 9) getSeconds() Trả giây hệ thống (từ 0-5 9) getMilliseconds() Trả giá trị millisecond from 0-9 99) setFullYear() Thiết lập lại năm... date getDate() Trả giá trị ngày ( số nguyên từ 1-3 1) tháng getDay() Trả giá trị ngày tuần ( số nguyên từ 0-6 Sunday=0) getMonth() Trả tháng năm (from 0-1 1 0=January, 1=February) getFullYear() Trả