Đối tượng trình duyệt

Một phần của tài liệu Bài giảng thiết kế trang web (Trang 120)

b) Phương thức

10.3.Đối tượng trình duyệt

10.3.1.window

Là đối tượng cao nhất trong mô hình DOM, là nơi chứa tất cả các thành phần của trang web.

a)Thuộc tính

Thuộc tính Miêu tả Giá trị

defaultStatus Thiết lập chuỗi thông báo trên thanh trạng thái Text

status Thiết lập thông báo trên thanh trạng thái tại thời

điểm hiện hành Text

location Xác định vị trí trang hiện tại trong cửa sổ Text URL

alwaysLowered Hiển thị cửa sổ bên dưới các của sổ khác true/false

alwaysRaised Hiển thị cửa sổ trên tất cả các cửa sổ khác true/false

fullscreen Hiển thị chế độ đầy màn hình true/false

height Thiết lập chiều cao của cửa sổ Số nguyên

width Thiết lập chiều rộng của cửa sổ Số nguyên

left Thiết lập khoảng cách từ text đến cạnh cửa sổ Số nguyên

menubar Hiển thị thanh menu bar true/false

toolbar Hiển thị thanh công cụ true/false

titlebar Hiển thị thanh tiêu đề true/false

status Hiển thị thanh trạng thái true/false

resizable Cho phép thay đổi kích thước cửa sổ true/false

scrolbars Cho phép xuất hiện thanh cuộn true/false

closed Trả về giá trị true, false. True khi cửa sổ đóng true/false

b)Phương thức

Phương thức Mô tả

close() Đóng cửa sổ hiện hành

focus() Đặt focus cho cửa sổ hiện hành

blur() Bỏ focus cho cửa sổ hiện hành

open(URL,name,

specs,replace)

Mở một cửa sổ (tab) mới

o URL : URL được nạp vào cửa sổ.

o name: tên cửa sổ .

o specs : danh sách các thuộc tính của cửa sổ: toolbars, menu, status ….(các thuộc tính phân cách bởi dấu ,

o replace: đưa cửa sổ được mở vào history (false) hoặc thay thế history của cửa sổ hiện hành (true)

Phương thức Mô tả

moveBy(dx,dy) Di chuyển cửa sổ 1 đoạn vị trí (dx,dy) so với cửa sổ hiện hành

moveTo(x,y) Di chuyển cửa sổ đến vị trí (x,y) so với màn hình

resizeBy(dx,dy) Thay đổi kích thước cửa sổ (dx,dy) so với cửa sổ hiện hành

resizeTo(x,y) Thay đổi kích thước cửa sổ

scrollBy(dx,dy) Cuộn nội dung sang phải dx, xuống dưới dy pixel

scrollTo(x,y) Cuộn nội dung trên trang đếnvị trí (x,y)

Các phương thức khác:  alert("msg")  confirm("msg")  prompt("msg","init")  setTimeout(func,millisec)  clearTimeout(ID)  setInterval(func,millisec)  clearInterval(ID) Ví dụ: window.close(); // đóng cửa sổ

window.open("http://www.w3schools.com", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");

window.open("http://www.w3schools.com");

10.3.2.location

Đối tượng này lưu thông tin về URL hiện tại. Nó cung cấp phương thức cho phép URL hiện tại có thể được tải lại

a)Thuộc tính

hostname: trả về hostname của URL hiện tại.

href: trả về đường dẫn đầy đủ đến vị trí của tài liệu hiện tại.

pathname: trả về đường dẫn tương đối đến URL hiện tại.

port: trả về cổng nhận thông tin của URL hiện tại, mặc định là cổng 80.

Ví dụ: Thay thế trang hiện tại bằng một trang khác

location.href = "new URL";

b)Phương thức

assign(URL):mở trang mới URL.

reload(): mở lại trang hiện tại.

10.3.3.history

Đối tượng này cung cấp các phương thức truy cập đến danh sách các URL được duyệt trước đó.

back(): quay trở lại trang vừa mới được ghé thăm ngay trước khi mở trang hiện tại.

forward(): quay lại trang được mở ngay sau trang hiện tại.

go(number): điều khiển trình duyệt mở trang thứ number ngay trước trang hiện tại.

Ví dụ:

history.go(-2); // quay lại trước đó 2 trang 10.3.4.document

Đối tượng document cung cấp các thuộc tính và phương thức để làm việc với toàn bộ tài liệu hiện hành gồm: form, liên kết, hình ảnh, tiêu đề, vị trí hiệnhành, màu hiện hành…Đối tượng document được định nghĩa khi tag body được xử lý trong trang HTML và nó vẫn tồn tại nếu trang được nạp. Các thuộc tính của document phản ánh thuộc tính của tag body.

Trong body có 2 sự kiện onloadunload

a)Thuộc tính

cookie : chứa tên và giá trị các cookies dành cho tài liệu hiện hành.

domain :trả về giá trị tên miền máy chủ chứa document

forms : trả về tập hợp các form trong tài liệu hiện hành

documentURI : thiết lập hoặc trả về địa chỉ của tài liệu

URL : trả về địa chỉ của tài liệu.

lastModified : trả về ngày giờ tài liệu được cập nhật gần nhất.

inputEncoding : trả về bảng mã ký tự được dùng trong tài liệu

title : thiết lập hoặc trả về tiêu đề của tài liệu (trang web)

b)Phương thức

getElementById(idValue) : trả về đối tượng element với thuộc tính id có giá trị là idValue

Ví dụ:

getElementsByName(nameValue): lấy danh sách các element (mảng các element)

với thuộc tính name có giá trị là nameValue.

getElementsByTagName(tagName) : lấy danh sách các element (mảng các element)

createElement(elementName): tạo element.

createAttribute(attName): tạo thuộc tính cho element.

createTextNode(textValue): tạo nội dung cho element

Ví dụ:

var newElement = document.createElement("h1");

var eValue = document.createTextNode("Hello World");

newElement.appendChild(eValue); //đưa nội dung vào element

var newAtt = document.createAttribute("class"); newAtt.value = "myClass";

newElement.setAttributeNode(newAtt); // đặt thuộc tính cho element

Một phần của tài liệu Bài giảng thiết kế trang web (Trang 120)