24/05/2018, 22:47

Các đối tượng của trình duyệt trong JavaScript

Kết thúc chương này, bạn có thể: Làm việc với các sự kiện phổ biến trong JavaScript Làm việc với các đối tượng của trình duyệt Thuộc tính Phương thức Các sự kiện là hành động do người dùng sinh ra. Chúng ta có thể làm cho trang ...

Kết thúc chương này, bạn có thể:

Làm việc với các sự kiện phổ biến trong JavaScript
Làm việc với các đối tượng của trình duyệt
- Thuộc tính
- Phương thức

Các sự kiện là hành động do người dùng sinh ra. Chúng ta có thể làm cho trang web dễ tương tác hơn bằng cách tạo ra các trình xử lý sự kiện đáp ứng các sự kiện do người dùng tạo ra. Trong chương này, chúng ta sẽ học các sự kiện mà trình duyệt hỗ trợ và cách tạo ra các trình xử lý sự kiện cho các sự kiện này. Cũng trong chương này, chúng ta sẽ đề cập đến các đối tượng của trình duyệt.

Đối tượng Event - Khái niệm

Các chương trình JavaScript thường là hướng sự kiện. Các sự kiện là các hành động xảy ra trên trang web. Một sự kiện có thể do người dùng tạo ra – click chuột vào một button - hoặc do hệ thống tạo ra – thay đổi kích thước của trang.

Hầu hết các trình duyệt đều hỗ trợ một đối tượng Event. Mỗi sự kiện có một đối tượng Event tương ứng. Đối tượng Event cung cấp thông tin về sự kiện - loại sự kiện và vị trí của con trỏ tại thời điểm xảy ra sự kiện. Khi một sự kiện được phát sinh, nó được gửi đi như một đối số đến trình xử lý sự kiện. Dĩ nhiên, phải có một trình xử lý sự kiện trong trường hợp này.

K hi người dùng nhấp chuột, sự kiện onmousedownđược phát sinh.

Đối tượng Event chứa những thông tin sau:

Loại sự kiện - Trong trường hợp này là nhấp chuột
Vị trí x và y của con trỏ khi nhấp chuột
Nút chuột nào được nhấn
Các phím bổ trợ (Control, Alt, Meta, hoặc Shift) được nhấn vào thời điểm xảy ra sự kiện.

Đối tượng Event không thể được sử dụng trực tiếp với đối tượng window. Nó được sử dụng như một phần của trình xử lý sự kiện.

Một sự kiện bắt đầu bằng hành động hoặc điều kiện khởi tạo sự kiện và kết thúc bằng việc đáp lại của trình xử lý sự kiện. Vòng đời của một sự kiện thông thường gồm những bước sau:

Hành động người dùng hoặc điều kiện tương ứng với sự kiện xảy ra.
Đối tượng Event được cập nhật tức thì nhằm phản ánh trạng thái của sự kiện.
Sự kiện được kích hoạt.
Trình xử lý sự kiện tương ứng được gọi.
Trình xử lý sự kiện thực hiện hành động của nó và trả về điều khiển cho chương trình.

Tập hợp các sự kiện tương ứng với các phần tử khác nhau trên trang là một phần của mô hình đối tượng tài liệu (Document Object Model), chứ không phải của JavaScript. Nghĩa là, các sự kiện được một phần tử nào đó hỗ trợ có thể khác nhau trên các trình duyệt.

Sau đây là một số sự kiện thường được hầu hết các đối tượng hỗ trợ:

onClick

Sự kiện onClick được tạo ra bất cứ khi nào người dùng nhấp chuột lên các phần tử form nào đó (button, checkbox, radio button, và phần tử select), hoặc lên các hyperlink.

<HTML>
   <HEAD>
       <SCRIPT LANGUAGE="JavaScript">
          function compute(form) 
          {
            if (confirm("Are you sure?"))
 		form.kết quả.value = eval(form.expr.value)
            else
 		alert("Please come back again.")
           }
     </SCRIPT>
  </HEAD>
  <BODY>
      <FORM>
          Enter an expression:
          <INPUT TYPE="text" NAME="expr" SIZE=15 ><BR><BR>
          <INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
          <BR><BR><BR>
 	   Kết quả:
           <INPUT TYPE="text" NAME="kết quả" SIZE=15 >
           <BR>
     </FORM>
  </BODY>
</HTML>

Kết quả đoạn mã trong ví dụ 2 được minh hoạ ở hình 1.

Kết quả của ví dụ 2

onChange
Sự kiện onChange xảy ra bất cứ khi nào một phần tử form thay đổi. Điều này có thể xảy ra khi nội dung của một trường văn bản thay đổi, hoặc khi một chọn lựa trong danh sách chọn lựa thay đổi. Tuy nhiên, sự kiện onChange không được tạo ra khi một radio button hoặc một checkbox được nhấp. Thay vào đó, sự kiện onClick sẽ được tạo ra.

Sự kiện onChange được gửi đi khi một phần tử hoàn tất việc thay đổi. Vì vậy, khi một textbox đang được hiệu chỉnh, sự kiện onChange chỉ được phát sinh sau khi việc hiệu chỉnh đã hoàn tất, và khi người dùng thoát khỏi textbox đó.
```
<HTML>
  <HEAD>
	<SCRIPT LANGUAGE="JavaScript">
		 
   </SCRIPT>
  </HEAD>
  <BODY bgColor = white>
      <FORM>
	Please enter a number: 
        <INPUT type = text size = 5 onChange="checkNum(this.value)">
      </FORM>
 </BODY>
</HTML>
   
```
Hình 2 và 3 minh hoạ kết quả của đoạn mã trong ví dụ 3

Kết quả của ví dụ 3

Nếu chúng ta nhập vào một giá trị số:
Kết quả của ví dụ 3(Khi nhập một giá trị số)

onFocus
Sự kiện onFocus được gửi đi bất cứ khi nào một phần tử form trở thành phần tử hiện thời. Chỉ khi một phần tử nhận được focus nó mới nhận được input từ người dùng. Điều này có thể xảy ra khi người dùng nhấp chuột lên phần tử, hoặc sử dụng phím Tab hoặc Shift+Tab (di chuyển tớI các phần tử trên form).

onBlur
Blur ngược với focus. Khi người dùng rời khỏi một phần tử trên form, sự kiện onBlur được kích hoạt. Đối với một số phần tử, nếu nội dung của nó cũng bị thay đổi, thì sự kiện onChange cũng được kích hoạt.
```
<HTML>
  <BODY BGCOLOR="lavender">
     <FORM>
         <INPUT type = text name = text1 
         onblur="(document.bgColor='aqua')" 
         onfocus="(document.bgColor='dimgray')">
     </FORM>
   </BODY>
</HTML>
    
```
Khi textbox nhận được focus, màu nền sẽ chuyển sang DIMGRAY, khi mất focus (blur), màu nền sẽ chuyển sang AQUA.
Kết quả của ví dụ 4 – Blur (hình trái) and focus (hình phải)

onMouseOver
Sự kiện onMouseOver được tạo ra bất cứ khi nào con trỏ chuột di chuyển lên trên một phần tử.

onMouseOut

Sự kiện onMouseOut được tạo ra bất cứ khi nào con trỏ chuột di chuyển ra khỏi phần tử đó.

<html>
 <head>
    <script language = "javascript">
       var num =0
       function showLink(num)
       {
           if (num==1) 
           {
            document.forms[0].elements[0].value= "You have selected Aptech";
           }
           if (num==2) 
           {
            document.forms[0].elements[0].value = "You have selected Asset";
           }
           if (num==3) 
           {
            document.forms[0].elements[0].value = "You have selected Arena";
           }
        }
     </script>
  </head>
  <body>
     <form>
         <input type=text size=60 >
     </form>
     <a href='#' onMouseOver="showLink(1)"document.bgcolor= "  green">Aptech</a><br>
     <a href='#' onMouseOver="showLink(2)">Asset</a><br>
     <a href='#' onMouseOver="showLink(3)">Arena</a><br>
  </body>
</html>

Khi di chuyển chuột qua Aptech, kết quả được hiển thị như sau.

Kết quả của ví dụ 5

OnLoad
Sự kiện onLoad (áp dụng cho đối tượng body) được phát sinh khi đã tải xong tài liệu. Nó cũng được phát sinh khi một ảnh đã tải xong.
```
 
<HTML>
    <HEAD>
         <TITLE>Hello </TITLE>
    </HEAD>
    <BODY onLoad="alert('Hello')">
    </BODY>
</HTML>

    
```
Kết quả :
Kết quả của ví dụ 6

onSubmit
Sự kiện onSubmit được tạo ra bất cứ khi nào người dùng truyền dữ liệu từ form đi (thường sử dụng nút Submit). Sự kiện xảy ra trước khi form thật sự được gửi đi. Thật ra, trình xử lý sự kiện tương ứng với sự kiện này có thể ngăn chặn form không được gửi đi bằng cách trả về giá trị false. Cách này dùng đê kiểm tra sự hợp lệ của dữ liệu nhập vào.

onMouseDown
Sự kiện này được kích hoạt khi hành động nhấp chuột xảy ra. Nghĩa là, khi người dùng nhấp chuột. Đây là trình xử lý sự kiện cho các đối tượng button, document, và link.

onMouseUp
Sự kiện này được kích hoạt khi hành động nhả chuột xảy ra. Nghĩa là, khi người dùng thả chuột. Đây là trình xử lý sự kiện cho đối tượng button, document, và link.
```
<HTML>
    <BODY BGCOLOR="lavender">
       <FORM>
          <INPUT type = button name = text1 value="Change Color"
          onmousedown="(document.bgColor='aqua')"
          onmouseup="(document.bgColor='limegreen')"
       </FORM>
    </BODY>
</HTML>
    
```
Hình dưới đây hiển thị kết quả của ví dụ 7
Kết quả của ví dụ 7

onResize
Sự kiện này được kích hoạt khi hành động thay đổi kích thước cửa sổ xảy ra. Nghĩa là, khi người dùng hoặc một script làm thay đổi kích thước một cửa sổ hay frame. Đây là trình xử lý sự kiện cho các đối tượng Window.
```
<html>
    <head>
       <script language="JavaScript">
          window.onresize= notify;
          function notify() 
          {
            alert("Window resized!");
          }
       </script>
    </head>
    <body>
        Please resize the window.
    </body>
</html>
    
```
Khi thay đổi kích thước cửa sổ, kết quả xuất hiện như sau:

Kết quả của ví dụ 8

Khi một sự kiện được khởi tạo, chúng ta có thể tạo một đoạn mã JavaScript để đáp ứng lại sự kiện. Đoạn mã này được gọi là trình xử lý sự kiện. Trình xử lý sự kiện có thể là một câu lệnh đơn, một tập hợp các câu lệnh hoặc một hàm

   <INPUT TYPE="button" 
    NAME="docode" 
    onClick="DoOnClick();">

Khi nhấp chuột vào một button, sự kiện onClick được khởi tạo. Sự kiện onClick gọi hàm DoOnClick và thực thi những câu lệnh bên trong hàm.

Trình xử lý sự kiện cho các thẻ HTML
Để khởi tạo trình xử lý sự kiện cho thẻ HTML, chúng ta phải chỉ định thẻ và thuộc tính trình xử lý sự kiện. Sau đó chúng ta gán mã JavaScript. Đoạn mã phải được đặt trong cặp dấu nháy kép.
```
<TAG eventHandler="JavaScript Code">
    
    
```
Các đối số chuỗi phải được đặt trong cặp dấu nháy đơn.
```
 
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!" onClick="window.open('mydoc.html', 'newWin')">
```
Thay vì sử dụng nhiều câu lệnh JavaScript, hàm sẽ giúp cho việc thiết kế chương trình tốt hơn. Chúng ta sẽ gọi hàm khi cần thiết. Hơn nữa các hàm đó có thể được dùng bởi các phần tử khác.

Câu lệnh này gán hàm greeting() cho trình xử lý sự kiện onLoad của window. Thuộc tính trình xử lý sự kiện được tham chiếu đến hàm greeting chứ không phảI lờI gọi đến hàm greeting()
```
<HTML>
      <HEAD>
      	<TITLE>My Home Page</TITLE>
    	<SCRIPT LANGUAGE="JavaScript">
    	   function greeting() {
    	      alert("Welcome to my world");
    	   }
    	</SCRIPT>
      </HEAD>
      <BODY onLoad="greeting()">
      </BODY>
</HTML>
    
```
Kết quả:

Kết quả ví dụ 9

Trình xử lý sự kiện như là những thuộc tính
Chúng ta cũng có thể gán một hàm cho một trình xử lý sự kiện của một đối tượng. Cú pháp như sau:
```
 object.eventhandler = function;
```

window.onload = greeting;

Chúng ta xem lại ví dụ trên và sử dụng trình xử lý sự kiện như những thuộc tính:

<HTML>
        <HEAD>
    	     <TITLE>My Home Page</TITLE>
              <SCRIPT LANGUAGE="JavaScript">
    		 
    	  </SCRIPT>
      </HEAD>
</HTML>

Kết quả sẽ tương tự như hình 9

Điểm mạnh của kĩ thuật này là tính linh hoạt. Chúng ta có thể thay đổI nhanh chóng các trình xử lý sự kiện khi được yêu cầu.

Trình duyệt là một ứng dụng được dùng để hiển thị nội dung của một trang HTML. Các trình duyệt cũng cung cấp một số đối tượng có thể được truy cập và sử dụng trong script. Đối tượng trình duyệt cũng hoạt động như các đối tượng lưu chứa đối với phần tử HTML trong một trang Web.

Netscape và Microsoft đã phát triển mô hình đối tượng tài liệu riêng của mình (DOM). Hai mô hình này có thể không tuơng thích với nhau.

Đối tượng window thể hiện cửa sổ của trình duyệt. Tất cả những đối tượng khác trong mô hình được kế thừa từ đối tượng window và được truy cập thông qua đối tượng window. Có thể có thêm các đối tượng window khác. Các đối tượng này thể hiện các cửa sổ con và được xem như các Frame. Những đối tượng cửa sổ này được truy cập thông qua tập hợp các Frame.

Trong phần này chúng ta sẽ tìm hiểu các đối tượng mà Internet Explorer và Netscape Navigator cung cấp cùng với một số thuộc tính và phương thức liên quan đến chúng.

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

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

Mô hình đối tượng (DOM)

Một đặc điểm quan trọng của JavaScript là ngôn ngữ dựa trên đối tượng. Điều này hỗ trợ cho người sử dụng phát triển chương trình theo môđun và có thể được sử dụng lại. JavaScript không hoàn toàn là ngôn ngữ hướng đối tượng, nhưng nó hỗ trợ một vài đặc điểm hướng đối tượng.

Một đối tượng có thể được định nghĩa như một thực thể đơn bao gồm các thành phần dữ liệu gọI là các thuộc tính (Property) và thành phần chức năng gọI là các phương thức (Method).

Một thuộc tính là một giá trị gắn với một đối tượng. Tất cả các đối tượng JavaScript chuẩn đều có những thuộc tính như thế.

Document.bgcolor

Đối tượng Window

Thể hiện các cửa sổ của trình duyệt và có thể được dùng để lấy thông tin về trạng thái của cửa sổ. Nó cũng được sử dụng để hiển thị đối tượng document và truy cập các sự kiện xảy ra trong cửa sổ và những đặc điểm của trình duyệt ảnh hưởng đến cửa sổ

Khi trình duyệt mở tài liệu HTML nó thường tạo ra một đối tượng window. Tuy nhiên, nếu một tài liệu co sử dụng một hay nhiều Frame thì trình duyệt tạo ra một đối tượng window cho tài liệu ban đầu và tạo thêm các đối tượng window nữa cho mỗi Frame. Các đốI tượng window mớI được tạo ra đó là các cửa sổ con của cửa sổ ban đầu, chúng có thể bị ảnh hưởng bởI các hành động xảy ra trên cửa sổ cha.

Nếu chúng ta đóng cửa sổ ban đầu thì tất cả các cửa sổ con đều bị đóng

Thuộc tính

Tên	Mô tả
document	Thể hiện tài liệu HTML trong cửa sổ của trình duyệt.
event	Thể hiện trạng thái của một sự kiện, chẳng hạn như phần tử mà trong đó sự kiện xuất hiện, trạng thái của các phím trên bàn phím, vị trí của chuột, trạng thái của các nút trên chuột.
history	Lưu trữ thông tin của những URL đã được viếng thăm.
location	Lưu trữ thông tin của URL hiện tại.
name	Thiết lập hoặc khôi phục tên của window hoặc Frame.
navigator	Lưu trữ thông tin của trình duyệt.
screen	Lưu trữ thông tin về kích cỡ và dạng đầy đủ của màn hình mà người dùng sử dụng.
status	Thiết lập hoặc khôi phục thông báo trên thanh trạng thái của cửa sổ trình duyệt.

Những phương thức

Tên	Mô tả
Alert	Hiển thị một hộp chứa thông báo do ứng dụng định nghĩa.
Blur	Làm cho đối tượng mất focus và kích hoạt sự kiện onblurt.
Close	Đóng cửa sổ trình duyệt hiện thời hoặc ứng dụng HTML.
Focus	Đặt một điều khiển là focus và thực thị đoạn lệnh được chỉ ra trong sự kiện onload.
navigate	Tải URL được chỉ định vào cửa sổ hiện thời.
open	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.

Các thuộc tính của window, phương thức và tập hợp các tên là các từ khóa dùng riêng không được dùng làm tên biến và các thủ tục thông thường.

Đối tượng Document

Thể hiện tài liệu HTML trong cửa sổ trình duyệt và được dùng để lấy thông tin về tài liệu, kiểm tra và sửa đổi các phần tử HTML và văn bản trong tài liệu, vàxử lý sự kiện.

<HTML>
      <HEAD>
    	<TITLE>The Document Object</TITLE>
    	   <script language="JavaScript">
    		alert(document.title);
    	   </SCRIPT>
       </HEAD>
</HTML>

Kết quả:

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

Các thuộc tính

Tên	Mô tả
aLinkColor	Thiết lập hay lấy màu của tất cả các liên kết động trong tài liệu.
bgColor	Thiết lập hay lấy màu nền của đối tượng document.
Body	Chỉ ra phần đầu và phần cuối của thân tài liệu.
fgColor	Thiết lập hay lấy màu (văn bản) nền trên cùng của tài liệu.
linkColor	Thiết lập hay lấy màu của các liên kết tài liệu.
location	Chứa các thông tin về URL hiện tại.
Title	Chứa tiêu đề của tài liệu.
URL	Thiết lập hay lấy URL cho tài liệu hiên thời.
vlinkColor	Thiết lập hay lấy màu của các liên kết mà người dùng đã viếng thăm.

Các phương thức

Tên	Mô tả
Clear	Xóa tài liệu hiện thời.
Close	Đóng một luồng dữ liệu xuất và hiển thị dữ liệu nhận được.
Open	Mở một tài liệu để nhận dữ liệu từ phương thức write hoặc writeln.
Write	Viết một hay nhiều biểu thức HTML đến một tài liệu trong cửa sổ được chỉ định.
Writeln	Viết một hay nhiều biểu thức HTML được theo sau bởi một dấu xuống dòng đến một tài liệu trong cửa sổ được chỉ định.

Đối tượng History

Đối tượng này cung cấp một danh sách các URL được viếng thăm gần đây nhất. Bởi các thông tin về những trangmà người dùng đã viếng thăm trước đó được xem là các thông tin cá nhân. ĐốI tượng history không cho chúng ta nhìn thấy các URL mà ta đã duyệt qua. Tuy nhiên, nó cung cấp các phương thức giúp ta di chuyển trong danh sách các trang đã duyệt trước đó. Ví dụ phương thức back() của đốI tượng history hiển thị trang tài liệu vừa mớI duyệt gần đây nhất.

history.back();

Phương thức go(number) yêu cầu trình duyệt chuyển đến một tài liệu xác định trong danh sách các trang đã duyệt qua.

Nếu là số âm, ví dụ như history.go(-2) thì trình duyệt sẽ chuyển từ tài liệu hiện thời đến các tài liệu trước nó trong danh sách các trang đã duyệt qua (ví dụ này cũng giống như khi ta nhấn nút Back 2 lần).

Nếu là số dương, trình duyệt sẽ chuyển từ tài liệu hiện thời đến các tài liệu sau nó trong danh sách các trang đã duyệt qua.

Các phương thức

Tên	Mô tả
back	Nạp URL trước đó trong danh sách các trang đã duyệt qua.
forward	Nạp URL đứng sau URL hiện tạI trong danh sách các trang đã duyệt qua
go	Nạp một URL xác định trong danh sách các trang đã duyệt qua.

Đối tượng 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

Các thuộc tính

Tên	Mô tả
Hash	Thiết lập hay lấy phần dữ liệu sau dấu # trong thuộc tính href
host	Thiết lập hay lấy tên máy chủ và số cổng của URL.
hostname	Thiết lập hay lấy phân tên của máy chủ của URL.
href	Thiết lập hay lấy toàn bộ URL như một chuỗi.

Các phương thức

Tên	Mô tả
assign	Nạp một tài liệu HTML mới.
reload	Nạp lại một trang hiện thời.
replace	Thay thế tài liệu hiện thời bằng cách tải một tài liệu khác vớI URL xác định.

Sự kiện là các hành động xảy ra trên trang Web.

Mỗi sự kiện được gắn với một đối tượng Event.

Một sự kiện bắt đầu bằng hành động hoặc điều kiện khởi tạo sự kiện đó và kết thúc bằng sự đáp ứng lại từ trình xử lý sự kiện.

Tập hợp các sự kiện tương ứng với các phần tử trang khác nhau là một phần trong mô hình đối tượng tài liệu (DOM) chứ không phải của JavaScript.

Khi một sự kiện được kích hoạt, chúng ta chỉ ra một đoạn mã JavaScript sẽ được thực hiện để đáp ứng lại sự kiện. Phần mã lệnh này được gọi là trình xử lý sự kiện.

Trình duyệt là một ứng dụng được sử dụng để hiển thị nội dung của một tài liệu HTML.

Trình duyệt cũng có một số đối tượng có thể được truy cập và sử dụng trong script.

Đối tượng window thể hiện cửa sổ của trình duyệt.

Tất cả các đối tượng khác trong mô hình DOM thừa kế từ đối tượng window và được truy cập thông qua nó.

Sự kiện onClick được hỗ trợ bởi
- Textbox
- Button
- radio button
Sự kiện onChange xảy ra khi phần tử ____Form______thay đổi.
Sự kiện onFocus được thực hiện khi một phần tử form trở thành phần tử form hiện thời.
Đúng/Sai
Sự kiện __________được tạo ra khi con trỏ chuột di chuyển lên trên một phần tử.
Đối tương_________ thể hiện cửa sổ của trình duyệt và có thể được sử dụng để lấy thông tin về trạng thái của cửa sổ.
_________ trình bày tài liệu HTML trong cửa sổ trình duyệt và được sử dụng để lấy thông tin về tài liệu kiểm tra và sửa đổi các phần tử HTML và văn bản trong tài liệu, vàxử lý sự kiện.