HTML5 XP session 15(2) đối tượng trong javascript T8

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (653.37 KB, 41 trang )

Hàm và Đối tượng
(Functions and Objects)

NexTGen Web

Bài 15:

Đối tượng trong JavaScript
(JavaScript Objects)

Mục tiêu bài học


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




Đối tượng window



Đối tượng document




Mơ hình đối tượng tài liệu DOM (Document Object Model) trong Javascript

Đối tượng form

Các đối tượng trình duyệt khác



Đối tượng frame



Đối tượng history



Đối tượng navigator



Đối tượng location

Building
Dynamic Web

Mơ hình đối tượng tài liệu (DOM)


DOM (Document Object Model) là kỹ thuật được sử dụng cho việc truy xuất và thao tác
các phần tử HTML.



Sử dụng phương thức, thuộc tính của các đối tượng trong mơ hình DOM bạn có thể:



Truy xuất đến các phần tử HTML.
Và có thể thay đổi cấu trúc
hiện tại của trang HTML.

Nút (node)


Tất cả các phần tử trong một trang Web được tổ chức trong một cấu trúc phân cấp và biểu diễn cho toàn
bộ tài liệu HTML.



DOM duyệt toàn bộ các phần tử có trong trang HTML, và coi chúng như là các nút.



Nút document là nút biểu diễn cho tồn bộ tài liệu HTML.



Nút document gồm có các nút phần tử (element node), các nút thuộc tính (attribute node), các nút văn bản (text node).
document là nút có cấp độ cao nhất cịn nút văn bản có cấp độ thấp nhất.



Mỗi nút trong cấu trúc phân cấp hình cây đều một nút cha và bao gồm nhiều nút con.

Nút (node)


Ví dụ
<html>
<head>
<title>Welcome</title>
</head>

<body>
<A href=“index.htm”> Click here</A>

Introduction

</body>
</html>
(The DOM as a Tree)

Thuộc tính của nút


Mỗi nút đều có thuộc tính. Các thuộc tính này thơng tin về nút.



Các thuộc tính của nút gồm:




nodeName: là tên của nút, nó chứa tên thẻ trong dạng chữ in hoa.
nodeValue: đại diện cho phần văn bản(text) có chứa trong nút. Thuộc tính này chỉ có ở các nút đại diện cho thuộc
tính khơng có ở nút document và nút phần tử.



nodeType: Kiểu của nút (nút document, nút phần tử, nút thuộc tính)

Đối tượng window


Đối tượng

window

đại diện cho cửa sổ của trình duyệt, có thể được sử dụng để truy xuất

thơng tin về trạng thái của cửa sổ, phiên bản...


Tất cả các đối tượng khác trong mơ hình DOM là con, cháu của đối tượng
được truy xuất thông qua đối tượng window.

window

location

screen

frames

document

history

forms

all
elements
input
textarea
select

navigator

window

, chúng

Đối tượng window


Thuộc tính của đối tượng window

Thuộc tính

defaultStatus

Mơ tả
Thiết lập hoặc lấy giá trị văn bản được hiểu thị mặ định trên thanh trạng thái
cuả cửa sổ trình duyệt.

closed

Xác định xem cửa sổ đã được đóng chưa.

document

Đại diện cho tài liệu HTML được tải trong cửa sổ.

history

Chứa danh sách các URL đã được viếng thăm.

location

Chứa nội dung của URL hiện tại.

name

Thiết lập hoặc lấy tên của cửa sổ.

parent

Lấy cửa số cha có chứa cửa sổ và phần tử con.

Đối tượng window


Phương thức của đối tượng window


alert(): Hiển thị một hộp thơng báo cùng với một nút OK



close(): Đóng cửa sổ hiện tại



confirm(): Hiển thị một hộp thoại thông báo có nút OK và Cancel. Thường dùng khi muốn người dùng xác nhận lại một vấn đề gì đó.



createPopup(): Tạo một cửa sổ Popup.



focus(): Đặt tiêu điểm cho cửa sổ hiện tại



print(): In nội dung có chứa bên trong phần tử hiện tại.

Building

Dynamic Web

Đối tượng window


Phương thức của đối tượng window


setInterval(“code”, milisecond): Phương thức được dùng để gọi một hàm hoặc định giá một biểu thức lặp đi lặp lại sau một khoảng thời gian (tính
bằng mili giây). [lang] cho biết ngơn ngữ kịch bản sử dụng viết trong phần “code



setTimeout(“function_name()”,milisecond,[lang]): Gọi thực hiện hàm duy nhất một lần sau khoảng thời gian (tính bằng mili giây)



open("URL", "windowName", [ "windowFeatures" ] ): Mở cửa sổ mới và tải tài liệu được chỉ ra bởi một URL hoặc mở một tài liệu trống nếu
không có một URL nào được chỉ định. Phương thức trả về đối tượng cửa sổ được mở.

Building
Dynamic Web

Đối tượng window


Ví dụ: Chữ chuyển động trên thanh trạng thái

là đối tượng đại diện cho toàn bộ tài liệu HTML.



Thơng qua đối tượng document, bạn có thể truy xuất đến các phần tử như link, anchor, …



Mỗi trang HTML chỉ có một đối tượng document



Đối tượng document được tạo khi bạn sử dụng phần tử BODY

Đối tượng document


Các tập hợp (Collections) của đối tượng document




anchors[]: tập hợp chứa thông tin về các phần tử neo (anchor) trong tài liệu.
forms[“index|formname”]: tập hợp chứa tất cả các form có trong tài liệu. Mỗi form trong tập hợp có thể được truy
xuất bằng chỉ số hoặc qua tên của nó.



images[“index|imagename”]: tập hợp chứa thơng tin về các ảnh (image) có trong tài liệu. Mỗi ảnh trong tập hợp có

thể được truy xuất bằng chỉ số hoặc qua tên của nó.



links[]: tập hợp chứa thơng tin về các liên kết (link) có trong tài liệu.

Đối tượng document


Thuộc tính









body: Trả về phần thân của tài liệu (phần tử body).
cookie: thiết lập hoặc lấy tất cả các cookie có liên quan đến tài liệu hiện tại.
domain: lấy tên miền của tài liệu hiện tại.
title: Thiết lập hoạc lấy tiêu đề của tài liệu.
bgColor: Thiết lập hoặc lấy màu nền của tài liệu.
fgColor: Thiết lập hoặc lấy màu văn bản trong tài liệu.
URL: Thiết lập hoặc lấy url của tài liệu hiện hành

Đối tượng document



Phương thức





addEventListener(): gắn bộ quản lý sự kiện cho đối tượng document
getElementById(‘id_phần_tử’): truy xuất đến một phần tử HTML bằng id được chỉ ra.
getElementsByNames(“elementName”): Truy xuất đến một tập các phần tử HTML thông qua tên. Trả về một mảng
các phần tử.





getElementsByTagName(): Truy xuất đến một tập các phần tử HTML bằng cách chỉ ra tên thẻ của chúng.
open(): Mở một stream để nhập và xuất từ phương thức write() hoặc writeln().
write(): ghi văn bản hoặc biểu thức HTML ra trang Web.

Đối tượng form


Form nhận dữ liệu từ người dùng và gửi về server.



JavaScript cho phép bạn xử lý và kiểm tra tính hợp lệ của dữ liệu trước khi gửi về server.



Trong một tài liệu HTML có thể có nhiều form.



Mỗi đối tượng form đại diện cho một form trong trang HTML.

Đối tượng form


Thuộc tính









action: Thiết lập hoặc lấy địa chỉ url của form.
enctype: chỉ ra kĩ thuật mã hóa dữ liệu của khi gửi về server.
id: thiết lập hoặc lấy id duy nhất của form.
length: trả về số phần tử có trong form.
method: chỉ ra phương pháp gửi dữ liệu về server là post hay get.
target: chỉ ra nơi mà dữ liệu của form sẽ được hiển thị.

Phương thức




submit(): gửi dữ liệu trên form về server.
reset(): reset form về lại trạng thái ban đầu.

Đối tượng form

<BODY onload=“initialize_form()”>
<form name=“frmLoginInf">

Login Information

User Name:<input type="text" name=“txt1">
Password: <input name=“txt2" type="password" size="15"> Confirm Password: <input name="txt3" type="password" size="15"> Alternate E-mail ID:<input type="text" name="txt4">
<input type="submit" name="Submit" value="Sign Up“ onclick=“submit_form()” >
<input type="reset" name="Submit2" value="Reset“ onclick=“reset_form()” >
</form>
</BODY>

<script type=“text/javascript”>
function initialize_form(){
frmLoginInf.action=“http://localhost/LoginProcess.asp”;
frmLoginInf.post=“post”;
frmLoginInf.target=“_blank”;
}
function reset_form() { frmLoginInf.reset(); }
function submit_form(){ frmLoginInf.submit(); }
</script>

Đối tượng history


history là đối tượng chứa các tập các URL đã được người dùng viếng thăm (visited) trong trình duyệt.



Đối tượng history là một mảng, do đó có thể truy xuất đến một URL cụ thể bằng cách sử dụng chỉ số của
nó trong mảng.



Thuộc tính length cho phép xác định được số lượng các URL có trong danh sách history.



Phương thức của history gồm:





back(): Lấy và hiển thị URL phía trước(previous) trong danh sách history.
forward(): Lấy và hiển thị URL tiếp theo (next) trong dánha chs history.
go(n): Hiển thị một URL được xác định. Tham số n có thể là một số hoặc một chuỗi của trang muốn chuyển đến.

Đối tượng navigator


Đối tượng navigator chứa thơng tin về trình duyệt được sử dụng phía client.



Thơng tin về trình duyệt bao gồm tên trình duyệt, phiên bản,…



Các thuộc tính của navigator








appName: trả về tên của trình duyệt
appVersion: trả về platform và phiên bản của trình duyệt.
browserLanguage: trả về ngơn ngữ hiện tại của trình duyệt.
cookieEnabled: trả về true/false. Xác định xem cookie có được cho phép dùng trong trình duyệt khơng.
platform: trả về hệ điều hành nền (Win32, Win64) phía trình duyệt.

Phương thức



javaEnabled()

Đối tượng navigator


Ví dụ về sử dụng thuộc tính và phương thức của đối tượng navigator

<SCRIPT type="text/javascript">
document.write("

Browser name: ")
document.write(navigator.appName + "

")
document.write("

Browser version: ")
document.write(navigator.appVersion + "

")
document.write("

Browser language: ")
document.write(navigator.browserLanguage + "

")
document.write("

Cookie is enabled: ")
document.write(navigator.cookieEnabled + "

")
document.write("

Operating System platform: ")
document.write(navigator.platform + "

")

if (navigator.javaEnabled())
document.write("

java is enabled

")
</SCRIPT>

Đối tượng location


Đối tượng location cho phép truy xuất thông tin của URL sau đã được tải hồn tồn vào
trình duyệt.



Thông tin của URL được truy xuất qua các thuộc tính sau:



hash: Lấy hoặc thiết lập để chuyển đến một vị trí được đánh dấu bằng thẻ neo (anchor) trong trang.

<SCRIPT type=“text/javascript”>
//chuyển đến vị trí part2 trong tài liệu

location.hash="part2“
//Lấy anchor (vị trí) có trong phần URL

document.write(location.hash);
</SCRIPT>

Đối tượng location


Thuộc tính







host: chỉ ra hoặc lấy tên host và số cổng (port) của URL.
hostname: chỉ ra hoặc lấy tên host của URL.

href: chỉ ra hoặc lấy toàn bộ URL.
pathname: chỉ ra hoặc lấy đường dẫn của URL.
port: chỉ ra hoặc lấy cổng của URL.

Đối tượng location


Phương thức





assign(URL): Tải một tài liệu mới với URL được chỉ ra.
reload(): Tải lại tài liệu hiện tại bằng cách gửi lại yêu cầu tới server.
replace(newURL): Thay thế tài liệu hiện tại bằng một tài liệu mới.

Sự kiện (Event)


Một sự kiện xảy ra khi người dùng tương tác với trang Web.



Một sự kiện thông dụng được phát sinh như click chuột, di chuyển chuột, gõ phím…



Mỗi sự kiện được kết hợp với một đối tượng event, là đối tượng cung cấp các thông tin về
sự kiện như:





Loại sự kiện
Vị trí của con trỏ tại thời điểm xảy ra sự kiện

Đối tượng Event được xem như một phần của trình xử lý sự kiện. (Nó được gửi tới trình
xử lý sự kiện như một tham số)

Building
Dynamic Web

HTML5 XP session 15(2) đối tượng trong javascript T8

Introduction

Login Information

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về