Các đối tượng JavaScript do trình duyệt cung cấp


Trình duyệt là một ứng dụng được dùng để hiển thị nội dung của một tài liệu HTML. Các trình duyệt đưa ra một số đối tượng có thể được truy cập và sử dụng trong script. Các đối tượng trình duyệt hoạt động như những “thùng đựng đối tượng” (container object) cho các thành phần HTML trên trang Web (các đối tượng trình duyệt coi các thành phần HTML như những thành viên của mình và cho phép truy cập trực tiếp vào các thành viên đó). Nestcape và Microsoft đã phát triển mô hình DOM riêng của họ, đồng thời các đối tượng trình duyệt họ cung cấp lại có những sự khác biệt riêng. Sau đây tớ chỉ xin giới thiệu 4 đối tượng trình duyệt chung cơ bản và hay dùng nhất mà cả hai hãng cùng cung cấp.
1. Đối tượng Window:

Đối tượng Window là đối tượng ở cấp cao nhất trong hệ thống các đối tượng của JavaScript. Nó diễn tả cửa sổ trình duyệt và có thể được sử dụng để khôi phục thông tin về tình trạng cửa sổ, cũng như hiển thị đối tượng tài liệu và thao tác với các sự kiện xảy ra trong cửa sổ. Tất cả các đối tượng khác đều có thể được truy cập thông qua window.
Khi trình duyệt mở một tài liệu HTML, nó sẽ tự động tạo một đối tượng window. Tuy nhiên nếu một tài liệu định nghĩa thên một hay nhiều frame, trình duyệt sẽ tạo một đối tượng window cho tài liệu gốc và thêm một đối tượng window cho mỗi frame. Nói cách khác thì mỗi đối tượng window được tự động tạo ứng với mỗi thể hiện của thẻ <body> hoặc thẻ <frameset>. Những đối tượng được thêm là những đối tượng con của đối tượng nguyên gốc và có thể bị ảnh hưởng bởi những hoạt động xảy ra tại đối tượng gốc. Chẳng hạn khi ta đóng đối tượng window gốc, tất cả các đối tượng con sẽ bị đóng theo.
* Các thuộc tính:

document: Diễn tả tài liệu HTML được đặt trong đối tượng trình duyệt.
history: Chứa thông tin về các URL được thăm quan bởi client.
location: Chứa thông tin về URL hiện tại.
event: Diễn tả trạng thái của một sự kiện như một thành phần khi sự kiện được xảy ra, trạng thái của bàn phím, vị trí chuột, và tình trạng nút bấm chuột.
name: Đặt hoặc khôi phục tên window hoặc frame.
status: Cú pháp window.status = chuỗi_đặt_tại_status_bar Đặt hoặc khôi phục thông tin tại thanh trạng thái (status bar) ở dưới cùng của cửa sổ trình duyệt.
closed: Trả về việc có hay không một cửa sổ đã được đóng.
opener: Trả về việc tham chiếu đến cửa sổ đã mở ra một cửa sổ khác.

* Các phương thức:

alert(): Cú pháp window.alert(thông_tin) Hiển thị một box thông báo với một tin nhắn và nút OK.
confirm(): Cú pháp var x = confirm(thông_báo) Hiện hộp thoại với một tin nhắn, một nút OK và một nút Cancel. Nếu ấn OK x sẽ nhận giá trị true, ấn Cancel sẽ nhận giá trị false.
prompt(): Cú pháp var x = prompt(thông_báo,chuỗi_mặc_định_được_ gán_cho_x) Hiển thị hộp thoại cho phép người dùng nhập thông tin tại một textbox.
focus(): Đặt focus cho cửa sổ hiẹn tại.
blur(): Bỏ các focus từ cửa sổ hiện tại.
close(): Đóng cửa sổ hiện tại.
open(): Cú pháp window.open(URL[,cách_thức_mở,kích_cỡ]) Mở một cửa sổ mới. Cách thức mở ở đây chẳng hạn “_blank” mở ra với cửa sổ trình duyệt mới, “_self” mở tại chính cửa sổ hiện tại.
print(): In nội dung trang hiện tại.
setInterval(): Định một biểu thức với khoảng thời gian xác định.
setTimeout(): Định một biểu thức sau một lượng mili giây xác định.
moveTo(): Di chuyển cửa sổ tới vị trí xác định.

Để mở một đối tượng window con ta cần xác định tên của frame hoặc iframe cần mở hoặc số thứ tự của nó trong các frame có trong tài liệu (hệ thống sẽ tự động đánh số các frame từ 0 đến hết và thưo thứ tự từ trên xuống, điều này cũng đúng với các form, textbox, checkbox, radiobutton, button… ta cũng có thể truy cập teo dạng này), sau đó sử dụng cấu trúc window[tên].thuộc_tính/phương_thức.

2. Đối tượng history:

Đối tượng này cung cấp một danh sách các URL mới được client thăm quan. Nó cho phép ta điều khiển trình duyệt quay trở lại những trang đã ghé thăm kể từ khi bật trình duyệt. Đối tượng history sẽ được giải phóng kể ngay khi cửa sổ được đóng lại. Đối tượng history cung cấp 3 phương thức như sau:
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(): Cú pháp history.go(number) Điều khiển trình duyệt mở trang thứ number ngay trước trang hiện tại.
Ví dụ: Xét tính huống ta đã mở 4 trang trình tự lần lượt như sau: trang a, trang b, trang c và trang d. Hiện tại trình duyệt đang mở trang c. Khi đó lệnh history.go(1) tương đương history.back() sẽ điều khiển trình duyệt quay lại mở trang b, lệnh history.go(2) ứng với điều khiển trình duyệt mở lại trang a và lệnh history.go(-1) tương đương với lệnh history.forward() điều khiển trình duyệt mở trang d.

3. Đối tượng location:

Đối tượng này bảo vệ thông tin về URL hiện tại. Nó cung cấp một số phương thức và thuộc tính cho phép phân tích và thao tác với URL hiện tại.
Các thuộc tính:
hostname: Đặt hoặc 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.
Các phương thức:

assign(): Mở trang mới. Cú pháp: location.assign(URL).
reload(): Mở lại trang hiện tại.
replace(): Thay thế trang hiện tại bằng một trang mới. Cú pháp: location.replace(URL).

4. Đối tượng document:

Được dùng để diễn tả toàn bộ tài liệu HTML và có thể được dùng để truy cập đến tất cả các thành phần trong trang. Cũng như hai đối tượng history và location, đối tượng document cũng là một phần của đối tượng window và có thể được truy cập thông qua đối tượng window.
Thuộc tính:
title: Đặt hoặc trả về tiêu đề trang. Cú pháp: document.title = tiêu_đề.
aLinkColor: Đặt hoặc trả về màu của tất cả các đường link đang hoạt động trong tài liệu.
vlinkColor: Đặt hoặc khôi phục màu của các đường link đã được người dùng ghé thăm.
bgColor: Đặt hoặc khôi phục màu nền của tài liệu.
Phương thức:
write(): In ra màn hình một chuỗi ký tự.
writeln(): In ra màn hình một chuỗi ký tự kết thúc là một dấu cách.
Ngoài ra đối tượng document còn có thể truy cập đến các thành phần HTML như sau:
form: Truy cập đến các form trong tài liệu. Từ đó lại có thể tiếp tục truy cập đến các nút con của form như textbox, checkbox… Chẳng hạn trong tài liệu có form tên là f, textbox tên là txt textbox này nằm trong form f. Khi đó muốn thao tác với textbox txt, chẳng hạn gán giá trị cho textbox txt ta làm như sau: document.f.txt.value = giá_trị, document.f.txt.className = tên_lớp_style dùng để thay đổi tên lớp style của đối tượng. document.forms.length trả về tổng số form được dùng trong trang.
anchors: Truy cập đến các thẻ <a> trong tài liệu.
images: Truy cập đến các thẻ <img> trong tài liệu.
links: Truy cập đến các đường link trong tài liệu.

Sưu tầm

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s