Giáo trình Lập trình mạng (Phần 2)

Chƣơng 3: LẬP TRÌNH SCRIPT

3.1. Javascript

3.1.1. Giới thiệu Javascript

JavaScript là ngôn ngữ dƣới dạng script có thể gắn với các file HTML. Nó không

đƣợc biên dịch mà đƣợc trình duyệt diễn dịch. Không giống Java phải chuyển thành các

mã để biên dịch, trình duyệt đọc JavaScript dƣới dạng mã nguồn. Chính vì vậy Chúng ta có

thể dễ dàng học JavaScript qua ví dụ bởi vì Chúng ta có thể thấy cách sử dụng JavaScript

trên các trang Web.

JavaScript là ngôn ngữ dựa trên đối tƣợng, có nghĩa là bao gồm nhiều kiểu đối tƣợng,

ví dụ đối tƣợng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không là ngôn

ngữ hƣớng đối tƣợng nhƣ C++ hay Java do không hỗ trợ các lớp hay tính thừa kế.

JavaScript có thể đáp ứng các sự kiện nhƣ tải hay loại bỏ các form. Khả năng này cho

phép JavaScript trở thành một ngôn ngữ script động.

Giống với HTML và Java, JavaScript đƣợc thiết kế độc lập với hệ điều hành. Nó có

thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngoài ra JavaScript

giống Java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào file của ngƣời dùng.

Các trình duyệt web nhƣ Nescape Navigator 2.0 trở đi có thể hiển thị những câu lệnh

JavaScript đƣợc nhúng vào trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửi

đầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới

client. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả của HTML và xử lý các

câu lệnh JavaScript khi nào chúng xuất hiện.

Các câu lệnh JavaScript đƣợc nhúng trong một trang HTML có thể trả lời cho các sự

kiện của ngƣời sử dụng nhƣ kích chuột, nhập vào một form và điều hƣớng trang. Ví dụ

Chúng ta có thể kiểm tra các giá trị thông tin mà ngƣời sử dụng đƣa vào mà không cần đến

bất cứ một quá trình truyền trên mạng nào. Trang HTML với JavaScript đƣợc nhúng sẽ

kiểm tra các giá trị đƣợc đƣa vào và sẽ thông báo với ngƣời sử dụng khi giá trị đƣa vào là

không hợp lệ.

Mục đích của phần này là giới thiệu về ngôn ngữ lập trình JavaScript để Chúng ta có

thể viết các script vào file HTML của mình.

3.1.2. Nhúng Javascript trong trang web

Chúng ta có thể nhúng JavaScript vào một file HTML theo một trong các cách sau

đây:

- Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>

- Sử dụng các file nguồn JavaScript

- Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML

83

- Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó

Trong đó, sử dụng cặp thẻ <SCRIPT>...</SCRIPT> và nhúng một file nguồn

JavaScript là đƣợc sử dụng nhiều hơn cả.

Sử dụng thẻ SCRIPT

Script đƣợc đƣa vào file HTML bằng cách sử dụng cặp thẻ <SCRIPT> và

<\SCRIPT>. Các thẻ <SCRIPT> có thể xuất hiện trong phần <HEAD> hay <BODY> của

file HTML. Nếu đặt trong phần <HEAD>, nó sẽ đƣợc tải và sẵn sàng trƣớc khi phần còn

lại của văn bản đƣợc tải.

Thuộc tính duy nhất đƣợc định nghĩa hiện thời cho thẻ <SCRIPT> là

―LANGUAGE=― dùng để xác định ngôn ngữ script đƣợc sử dụng. Có hai giá trị đƣợc định

nghĩa là "JavaScript" và "VBScript". Với chƣơng trình viết bằng JavaScript Chúng ta sử

dụng cú pháp sau :

// INSERT ALL JavaScript HERE

</SCRIPT>

Điểm khác nhau giữa cú pháp viết các ghi chú giữa HTML và JavaScript là cho phép

Chúng ta ẩn các mã JavaScript trong các ghi chú của file HTML, để các trình duyệt cũ

không hỗ trợ cho JavaScript có thể đọc đƣợc nó nhƣ trong ví dụ sau đây:

<!-- From here the JavaScript code hidden

// INSERT ALL JavaScript HERE

// This is where the hidden ends -->

</SCRIPT>

Dòng cuối cùng của script cần có dấu // để trình duyệt không diễn dịch dòng này dƣới

dạng mã JavaScript. Các ví dụ trong chƣơng này không chứa đặc điểm ẩn của JavaScript

để mã có thể dễ hiểu hơn.

Sử dụng một file nguồn JavaScript

Thuộc tính SRC của thẻ <SCRIPT> cho phép Chúng ta chỉ rõ file nguồn JavaScript

đƣợc sử dụng (dùng phƣơng pháp này hay hơn nhúng trực tiếp một đoạn lệnh JavaScript

vào trang HTML).

Cú pháp:

....

</SCRIPT>

Thuộc tính này rấy hữu dụng cho việc chia sẻ các hàm dùng chung cho nhiều trang

khác nhau. Các câu lệnh JavaScript nằm trong cặp thẻ <SCRIPT> và </SCRIPT> có chứa

84

thuộc tinh SRC trừ khi nó có lỗi. Ví dụ Chúng ta muốn đƣa dòng lệnh sau vào giữa cặp thẻ

<SCRIPT SRC="..."> và </SCRIPT>:

document.write("Không tìm thấy file JS đƣa vào!");

Thuộc tính SRC có thể đƣợc định rõ bằng địa chỉ URL, các liên kết hoặc các đƣờng

dẫn tuyệt đối, ví dụ:

Các file JavaScript bên ngoài không đƣợc chứa bất kỳ thẻ HTML nào. Chúng chỉ

đƣợc chứa các câu lệnh JavaScript và định nghĩa hàm.

Tên file của các hàm JavaScript bên ngoài cần có đuôi .js, và server sẽ phải ánh xạ

đuôi .js đó tới kiểu MIME application/x-javascript. Đó là những gì mà server gửi trở lại

phần Header của file HTML. Để ánh xạ đuôi này vào kiểu MIME, ta thêm dòng sau vào

file mime.types trong đƣờng dẫn cấu hình của server, sau đó khởi động lại server:

type=application/x-javascript

Nếu server không ánh xạ đƣợc đuôi .js tới kiểu MIME application/x-javascript ,

Navigator sẽ tải file JavaScript đƣợc chỉ ra trong thuộc tính SRC về không đúng cách.

Trong ví dụ sau, hàm bar có chứa xâu "left" nằm trong một cặp dấu nháy kép:

function bar(widthPct)

{

document.write(" <HR ALIGN='LEFT' WIDTH="+widthPct+"%>")

}

3.1.3. Cách đặt biểu thức cho các thuộc tính của thẻ HTML

Chúng ta có thể dùng biểu thức JavaScript làm giá trị cho thuộc tính của thẻ HTML.

Các giá trị đó đƣợc thực hiện một cách động mỗi khi trang đƣợc trình duyệt tải vào. Cú

pháp nhƣ sau:

& {expression};

Trong đó expression là biểu thức JavaScript sẽ đƣợc thực hiện.

Chẳng hạn ta có thể định nghĩa một biến chứa độ rộng. Chúng ta có thể dùng biến này

để xác định độ rộng của một đƣờng kẻ ngang trên trang Web. Trong ví dụ sau đây, giá trị

độ rộng đƣợc đặt là 10:

Ví dụ 3.1: tạo fiel Example.html nhƣ sau

<HTML>

<HEAD>

var linewidth = 10;

</SCRIPT>

<BODY>

85

<H2>Đăt biểu thꢀc cho các thuộc tính của HTML</H2>

</BODY>

</HTML>

Khi mã đƣợc thực thi, thì phần tử HR sẽ dùng giá trị của biến linewidth nhƣ minh họa

trong hình sau:

Hình 3.1. Kết quả chꢀy ví dụ 3.1

3.1.4. Dùng Javascript cho trình xử lí sự kiện

JavaScript là ngôn ngữ định hƣớng sự kiện, nghĩa là sẽ phản ứng trƣớc các sự kiện

xác định trƣớc nhƣ kích chuột hay tải một văn bản. Một sự kiện có thể gây ra việc thực

hiện một đoạn mã lệnh (gọi là các Chƣơng triình xử lý sự kiện) giúp cho chƣơng trình có

thể phản ứng một cách thích hợp.

Event Handler

Một đoạn mã hay một hàm đƣợc thực hiện để phản ứng trƣớc một sự kiện gọi là

Chƣơng trình xử lý sự kiện. Chƣơng trình xử lý sự kiện đƣợc xác định là một thuộc tính

của một thẻ HTML:

tagName eventHandler = "JavaScript Code or Function"

Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trƣờng văn bản thay đổi:

INPUT TYPE=TEXT NAME="AGE" onChange="CheckAge()"

Đoạn mã của Chƣơng trình xử lý sự kiện không là một hàm; nó là các lệnh của

JavaScript cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thành các module

nên viết dƣới dạng các hàm.

3.1.5. Các kiểu dữ liệu

Khác với C++ hay Java, JavaScript là ngôn ngữ có tính định kiểu thấp. Điều này có

nghĩa là không phải chỉ ra kiểu dữ liệu khi khai báo biến. Kiểu dữ liệu đƣợc tự động

chuyển thành kiểu phù hợp khi cần thiết.

Ví dụ 3.2: file Variable.Html:

<HTML>

86

<HEAD>

<TITLE> Datatype Example </TITLE>

var fruit='apples';

var numfruit=12;

numfruit = numfruit + 20;

var temp ="There are " + numfruit + " " + ".";

document.write(temp);

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Các trình duyệt hỗ trợ JavaScript sẽ xử lý chính xác ví dụ trên và đƣa ra kết quả dƣới đây:

Trình diễn dịch JavaScript sẽ xem biến numfruit có kiểu nguyên khi cộng với 20 và

có kiểu chuỗi khi kết hợp với biến temp.

Trong JavaScript, có bốn kiểu dữ liệu sau đây: kiểu số nguyên, kiểu dấu phẩy động,

kiểu logic và kiểu chuỗi.

Kiểu nguyên (Interger)

Số nguyên có thể đƣợc biểu diễn theo ba cách:

- Hệ cơ số 10 (hệ thập phân) - có thể biểu diễn số nguyên theo cơ số 10, chú ý

rằng chữ số đầu tiên phải khác 0.

- Hệ cơ số 8 (hệ bát phân) - số nguyên có thể biểu diễn dƣới dạng bát phân với

chữ số đầu tiên là số 0.

- Hệ cơ số 16 (hệ thập lục phân) - số nguyên có thể biểu diễn dƣới dạng thập lục

phân với hai chữ số đầu tiên là 0x.

Kiểu dấu phẩy động (Floating Point)

Một literal có kiểu dấu phẩy động có 4 thành phần sau:

- Phần nguyên thập phân.

- Dấu chấm thập phân (.).

- Phần dƣ.

- Phần mũ.

87

Để phân biệt kiểu dấu phẩy động với kiểu số nguyên, phải có ít nhất một chữ số theo

sau dấu chấm hay E. Ví dụ:

9.87

-0.85E4

9.87E14

.98E-3

Kiểu logic (Boolean)

Kiểu logic đƣợc sử dụng để chỉ hai điều kiện : đúng hoặc sai. Miền giá trị của kiểu

này chỉ có hai giá trị:

- true.

- false.

Kiểu chuỗi (String)

Một literal kiểu chuỗi đƣợc biểu diễn bởi không hay nhiều ký tự đƣợc đặt trong cặp

dấu " ... " hay '... '. Ví dụ:

“The dog ran up the tree”

The dog barked

“100”

Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ), ví dụ:

document.write(“ \”This text inside quotes.\” ”);

3.1.6. Các toán tử

Toán tử đƣợc sử dụng để thực hiện một phép toán nào đó trên dữ liệu. Một toán tử có

thể trả lại một giá trị kiểu số, kiểu chuỗi hay kiểu logic. Các toán tử trong JavaScript có thể

đƣợc nhóm thành các loại sau đây: gán, so sánh, sꢁ học, chuỗi, logic và logic bitwise.

Gán

Toán tử gán là dấu bằng (=) nhằm thực hiện việc gán giá trị của toán hạng bên phải

cho toán hạng bên trái. Bên cạnh đó JavaScript còn hỗ trợ một số kiểu toán tử gán rút gọn.

Kiểu gán thông thường

x = x + y

Kiểu gán rút gọn

x + = y

x = x – y

x - = y

x = x * y

x * = y

x = x / y

x / = y

x = x % y

x % = y

So sánh

Ngƣời ta sử dụng toán tử so sánh để so sánh hai toán hạng và trả lại giá trị đúng hay

sai phụ thuộc vào kết quả so sánh. Sau đây là một số toán tử so sánh trong JavaScript:

88

== Trả lại giá trị đúng nếu toán hạng bên trái bằng toán hạng bên phải

!= Trả lại giá trị đúng nếu toán hạng bên trái khác toán hạng bên phải

>

Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn toán hạng bên phải

>= Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn hoặc bằng toán hạng

bên phải

<

Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn toán hạng bên phải

<= Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn hoặc bằng toán hạng

bên phải

Số học

Bên cạnh các toán tử cộng (+), trừ (-), nhân (*), chia (/) thông thƣờng, JavaScript còn

hỗ trợ các toán tử sau đây:

var1% var2

Toán tử phần dƣ, trả lại phần dƣ khi chia var1 cho var2

Toán tử phủ định, có giá trị phủ định toán hạng

-

var++

var--

Toán tử này tăng var lên 1 (có thể biểu diễn là ++var)

Toán tử này giảm var đi 1 (có thể biểu diễn là --var)

Chuỗi

Khi đƣợc sử dụng với chuỗi, toán tử + đƣợc coi là kết hợp hai chuỗi.

ví dụ:

"abc" + "xyz" được "abcxyz"

Logic

JavaScript hỗ trợ các toán tử logic sau đây:

expr1 && expr2

Là toán tử logic AND, trả lại giá trị đúng nếu cả

expr1 và expr2 cùng đúng.

expr1 || expr2

! expr

Là toán tử logic OR, trả lại giá trị đúng nếu ít nhất

một trong hai expr1 và expr2 đúng.

Là toán tử logic NOT phủ định giá trị của expr.

Bitwise

Với các toán tử thao tác trên bit, đầu tiên giá trị đƣợc chuyển dƣới dạng số nguyên 32

bit, sau đó lần lƣợt thực hiện các phép toán trên từng bit.

& Toán tử bitwise AND, trả lại giá trị 1 nếu cả hai bit cùng là 1.

|

Toán tử bitwise OR, trả lại giá trị 1 nếu một trong hai bit là 1.

89

^

Toán tử bitwise XOR, trả lại giá trị 1 nếu hai bit có giá trị khác nhau

Ngoài ra còn có một số toán tử dịch chuyển bitwise. Giá trị đƣợc chuyển thành số

nguyên 32 bit trƣớc khi dịch chuyển. Sau khi dịch chuyển, giá trị lại đƣợc chuyển thành

kiểu của toán hạng bên trái. Sau đây là các toán tử dịch chuyển:

<<

Toán tử dịch trái. Dịch chuyển toán hạng trái sang trái một số lƣợng bit bằng

toán hạng phải. Các bit bị chuyển sang trái bị mất và 0 thay vào phía bên

phải. Ví dụ: 4<<2 trở thành 16 (số nhị phân 100 trở thành số nhị phân 10000)

Toán tử dịch phải. Dịch chuyển toán hạng trái sang phải một số lƣợng bit

bằng toán hạng phải. Các bit bị chuyển sang phải bị mất và dấu của toán

hạng bên trái đƣợc giữ nguyên. Ví dụ: 16>>2 trở thành 4 (số nhị phân 10000

trở thành số nhị phân 100)

>>

>>> Toán tử dịch phải có chèn 0. Dịch chuyển toán hạng trái sang phải một số

lƣợng bit bằng toán hạng phải. Bit dấu đƣợc dịch chuyển từ trái (giống >>).

Những bit đƣợc dịch sang phải bị xoá đi. Ví dụ: -8>>>2 trở thành

1073741822 (bởi các bit dấu đã trở thành một phần của số). Tất nhiên với số

dƣơng kết quả của toán tử >> và >>> là giống nhau.

Có một số toán tử dịch chuyển bitwise rút gọn:

Kiểu bitwise thông thường

x = x << y

Kiểu bitwise rút gọn

x << = y

x = x >> y

x - >> y

x = x >>> y

x = x & y

x >>> = y

x & = y

x = x ^ y

x ^ = y

x = x | y

x | = y

3.1.7. Các biểu thức

Tập hợp các literal, biến và các toán tử nhằm đánh giá một giá trị nào đó đƣợc gọi là

một biểu thức (expression). Về cơ bản có ba kiểu biểu thức trong JavaScript:

- Số học: Nhằm để lƣợng giá giá trị số. Ví dụ (3+4)+(84.5/3) đƣợc đánh giá

bằng 197.1666666667.

- Chuỗi: Nhằm để đánh giá chuỗi. Ví dụ "The dog barked" + barktone + "!" là

The dog barked ferociously!.

- Logic: Nhằm đánh giá giá trị logic. Ví dụ temp>32 có thể nhận giá trị sai.

JavaScript cũng hỗ trợ biểu thức điều kiện, cú pháp nhƣ sau:

(condition) ? valTrue : valFalse

90

Nếu điều kiện condition đƣợc đánh giá là đúng, biểu thức nhận giá trị valTrue,

ngƣợc lại nhận giá trị valFalse. Ví dụ: state = (temp>32) ? "liquid" : "solid"

Trong ví dụ này biến state đƣợc gán giá trị "liquid" nếu giá trị của biến temp lớn

hơn 32; trong trƣờng hợp ngƣợc lại nó nhận giá trị "solid".

3.1.8. Khai báo biến, mảng

Tên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch dƣới. Các chữ số

không đƣợc sử dụng để mở đầu tên một biến nhƣng có thể sử dụng sau ký tự đầu tiên.

Phạm vi của biến có thể là một trong hai kiểu sau:

- Biến toàn cục: Có thể đƣợc truy cập từ bất kỳ đâu trong ứng dụng.

đƣợc khai báo nhƣ sau :

x = 0;

- Biến cục bộ: Chỉ đƣợc truy cập trong phạm vi chƣơng trình mà nó khai báo. Biến

cục bộ đƣợc khai báo trong một hàm với từ khoá var nhƣ sau:

var x = 0;

Biến toàn cục có thể sử dụng từ khoá var, tuy nhiên điều này không thực sự cần thiết.

Mảng (Array)

Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhƣng Netscape tạo ra phƣơng

thức cho phép Chúng ta tự tạo ra các hàm khởi tạo mảng nhƣ sau:

function InitArray(NumElements){

this.length = numElements;

for (var x=1; x<=numElements; x++){

this[x]=0

}

return this;

}

Nó tạo ra một mảng với kích thƣớc xác định trƣớc và điền các giá trị 0. Chú ý rằng

thành phần đầu tiên trong mảng là độ dài mảng và không đƣợc sử dụng.

Để tạo ra một mảng, khai báo nhƣ sau:

myArray = new InitArray (10)

Nó tạo ra các thành phần từ myArray[1] đến myArray[10] với giá trị là 0. Giá trị các

thành phần trong mảng có thể đƣợc thay đổi nhƣ sau:

myArray[1] = "Nghệ An"

myArray[2] = "Lào"

Sau đây là ví dụ đầy đủ:

<TITLE> Array Exemple </TITLE>

91

function InitArray(numElements) {

this.length = numElements;

for (var x=1; x<=numElements; x++){

this[x]=0

}

return this;

}

myArray = new InitArray(10);

myArray[1] = "Nghệ An";

myArray[2] = "Hà Nội";

document.write(myArray[1] + "<BR>");

document.write(myArray[2] + "<BR>");

</SCRIPT>

</HEAD>

</HTML>

3.1.9. Cách lệnh điều kiện

Câu lệnh điều kiện cho phép chƣơng trình ra quyết định và thực hiện công việc nào

đấy dựa trên kết quả của quyết định. Trong JavaScript, câu lệnh điều kiện là if...else

Câu lệnh này cho phép Chúng ta kiểm tra điều kiện và thực hiện một nhóm lệnh nào

đấy dựa trên kết quả của điều kiện vừa kiểm tra. Nhóm lệnh sau else không bắt buộc phải

có, nó cho phép chỉ ra nhóm lệnh phải thực hiện nếu điều kiện là sai.

Cú pháp:

if ( <điều kiện> )

{

<Công việc 1>

}

else

{

<Công việc 2>

}

Ví dụ 3.3:

if (x==10){

document.write(“x bằng 10, đặt lại x bằng 0.”);

x = 0;

92

}

else

document.write(“x không bằng 10.”);

3.1.10. Các lệnh lặp

Câu lệnh lặp thể hiện việc lặp đi lặp lại một đoạn mã cho đến khi biểu thức điều kiện

đƣợc đánh giá là đúng. JavaScipt cung cấp hai kiểu câu lệnh lặp:

. for loop

. while loop

Vòng lặp for

Vòng lặp for thiết lập một biểu thức khởi đầu - initExpr, sau đó lặp một đoạn mã cho

đến khi biểu thức <điều kiện> đƣợc đánh giá là đúng. Sau khi kết thúc mỗi vòng lặp, biểu

thức incrExpr đƣợc đánh giá lại.

Cú pháp:

for (<Biểu thức khởi tꢀo>; <điều kiện> ; <Biểu thức tăng giảm>){

<Công việc>

}

Ví dụ 3.4:

<TITLE>For loop Example </TITLE>

for (x=1; x<=10 ; x++) {

y=x*25;

document.write("x ="+ x +";y= "+ y + "<BR>");

}

</SCRIPT>

</HEAD>

</HTML>

While

Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn đƣợc đánh giá là đúng

Cú pháp:

while (<điều kiện>)

{

<Công việc>

}

Ví dụ 3.5:

93

x=1;

while (x<=10){

y=x*25;

document.write("x="+x +"; y = "+ y + "<BR>");

x++;

}

Kết quả của ví dụ này giống nhƣ ví dụ trƣớc.

Break

Câu lệnh break dùng để kết thúc việc thực hiện của vòng lặp for hay while. Chƣơng

trình đƣợc tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp.

Cú pháp :

break;

Đoạn mã sau lặp cho đến khi x lớn hơn hoặc bằng 100. Tuy nhiên nếu giá trị x đƣa

vào vòng lặp nhỏ hơn 50, vòng lặp sẽ kết thúc

Ví dụ 3.6:

while (x<100)

{

if (x<50) break;

x++;

}

Continue

Lệnh continue giống lệnh break nhƣng khác ở chỗ việc lặp đƣợc kết thúc và bắt đầu

từ đầu vòng lặp. Đối với vòng lặp while, lệnh continue điều khiển quay lại <điều kiện>;

với for, lệnh continue điều khiển quay lại incrExpr.

Cú pháp :

Continue;

Ví dụ 3.7: Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 và tiếp tục tăng lên 10

x=0;

while (x<=10)

{

document.write(“Giá trị của x là:”+ x+”<BR>”);

if (x=5)

{

x=8;

continue;

}

94

x++;

}

For...In

Câu lệnh này đƣợc sử dụng để lặp tất cả các thuộc tính (properties) của một đối

tƣợng. Tên biến có thể là một giá trị bất kỳ, chỉ cần thiết khi Chúng ta sử dụng các thuộc

tính trong vòng lặp. Ví dụ sau sẽ minh hoạ điều này

Cú pháp:

for (<variable> in <object>)

{

<Công việc>

}

Ví dụ 3.8:

Ví dụ sau sẽ lấy ra tất cả các thuộc tính của đối tƣợng Window và in ra tên của mỗi

thuộc tính. Kết quả đƣợc minh hoạ trên hình 5.2.

<HTML>

<HEAD>

<TITLE>For in Example </TITLE>

document.write("The properties of the Window object are: <BR>");

for (var x in window)

document.write(" "+ x + ", ");

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

3.1.11. Hàm (function)

JavaScript cũg cho phép sử dụng các hàm. Mặc dù không nhất thiết phải có, song các

hàm có thể có một hay nhiều tham số truyền vào và một giá trị trả về. Bởi vì JavaScript là

ngôn ngữ có tính định kiểu thấp nên không cần định nghĩa kiểu tham số và giá trị trả về

của hàm. Hàm có thể là thuộc tính của một đối tƣợng, trong trƣờng hợp này nó đƣợc xem

nhƣ là phƣơng thức của đối tƣợng đó.

Lệnh function đƣợc sử dụng để tạo ra hàm trong JavaScript.

Cú pháp:

function fnName([param1],[param2],...,[paramN])

{

95

//function statement

}

Ví dụ 3.9:

function person(first_name, last_name, age, sex)

{

this.first_name=first_name;

this.last_name=last_name;

this.age=age;

this.sex=sex;

this.printStats=printStats;

}

Các hàm có sẵn

JavaScript có một số hàm có sẵn, gắn trực tiếp vào chính ngôn ngữ và không nằm

trong một đối tƣợng nào:

. eval

. parseInt

. parseFloat

Eval

Hàm này đƣợc sử dụng để đánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các

đối tƣợng của thuộc tính đều có thể đƣợc đánh giá. Đặc biệt hết sức hữu ích khi đánh giá

các biểu thức do ngƣời dùng đƣa vào (ngƣợc lại có thể đánh giá trực tiếp).

Cú pháp:

returnval=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java)

Parseint

Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số thứ hai (tham số

này không bắt buộc). Hàm này thƣờng đƣợc sử dụng để chuyển các số nguyên sang cơ số

10 và đảm bảo rằng các dữ liệu đƣọc nhập dƣới dạng ký tự đƣợc chuyển thành số trƣớc khi

tính toán. Trong trƣờng hợp dữ liệu vào không hợp lệ, hàm parseInt sẽ đọc và chuyển dạng

chuỗi đến vị trí nó tìm thấy ký tự không phải là số. Ngoài ra hàm này còn cắt dấu phẩy

động.

Cú pháp:

parseInt (string, [, radix])

Parsefloat

Hàm này giống hàm parseInt nhƣng nó chuyển chuỗi thành số biểu diễn dƣới dạng

dấu phẩy động.

Cú pháp:

96

parseFloat (string)

3.1.12. Các đối tƣợng trong Javascript

Nhƣ đã nói JavaScript là ngôn ngữ lập trình dựa trên đối tƣợng, nhƣng không hƣớng

đối tƣợng bởi vì nó không hỗ trợ các lớp cũng nhƣ tính thừa kế. Phần này nói về các đối

tƣợng trong JavaScript và hình 6.1 chỉ ra sơ đồ phân cấp các đối tƣợng.

Trong sơ đồ phân cấp các đối tƣợng của JavaScript, các đối tƣợng con thực sự là các

thuộc tính của các đối tƣợng bố mẹ. Trong ví dụ về chƣơng trình xử lý sự kiện trƣớc đây

form tên PHIEU_DIEU_TRA là thuộc tính của đối tƣợng document và trƣờng text AGE là

thuộc tính của form PHIEU_DIEU_TRA. Để tham chiếu đến giá trị của AGE, Chúng ta

phải sử dụng: document.PHIEU_DIEU_TRA.AGE.value

Các đối tƣợng có thuộc tính (properties), phƣơng thức (methods), và các chƣơng trình

xử lý sự kiện (event handlers) gắn với chúng. Ví dụ đối tƣợng document có thuộc tính title

phản ánh nội dung của thẻ <TITLE> của document. Bên cạnh đó Chúng ta thấy phƣơng

thức document.write đƣợc sử dụng trong nhiều ví dụ để đƣa văn bản kết quả ra document.

Đối tƣợng cũng có thể có các chƣơng trình xử lý sự kiện. Ví dụ đối tƣợng link có hai

chƣơng trình xử lý sự kiện là onClick và onMouseOver. onClick đƣợc gọi khi có đối tƣợng

link đƣợc kích chuột vào, onMouseOver đƣợc gọi khi con trỏ chuột di chuyển qua link.

Khi Chúng ta tải một document xuống Navigator, nó sẽ tạo ra một số đối tƣợng cùng

với những giá trị các thuộc tính của chúng dựa trên file HTML của document đó và một

vài thông tin cần thiết khác. Những đối tƣợng này tồn tại một cách có cấp bậc và phản ánh

chính cấu trúc của file HTML đó.

97

Window

Texturea

Text

navigator

Plugin

Mime Type

Layer

Link

FileUpload

Password

Hidden

Submit

Reset

Frame

document

Location

History

Image

Area

Anchor

Applet

Plugin

Form

Radio

Checkbox

Button

Select

Option

Hình 3.3. Các đối tƣợng của JavaScript

1) Đối tƣợng navigator

Đối tƣợng này đƣợc sử dụng để đạt đƣợc các thông tin về trình duyệt nhƣ số phiên

bản. Đối tƣợng này không có phƣơng thức hay chƣơng trình xử lý sự kiện.

Các thuộc tính

appCodeName Xác định tên mã nội tại của trình duyệt (Atlas).

AppName

AppVersion

userAgent

Xác định tên trình duyệt.

Xác định thông tin về phiên bản của đối tƣợng navigator.

Xác định header của user - agent.

Ví dụ 3.10: Hiển thị các thuộc tính của đối tƣợng navigator:

<HTML>

<HEAD>

<TITLE> Navigator Object Exemple </TITLE>

document.write("appCodeName = "+navigator.appCodeName + "<BR>");

98

document.write("appName = "+navigator.appName + "<BR>");

document.write("appVersion = "+navigator.appVersion + "<BR>");

document.write("userAgent = "+navigator.userAgent + "<BR>");

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Hình 3.3: Minh hoꢀ cho đối tƣợng Navigator

2) Đối tƣợng window

Đối tƣợng window nhƣ đã nói ở trên là đối tƣợng ở mức cao nhất. Các đối tƣợng

document, frame, vị trí đều là thuộc tính của đối tƣợng window.

Các thuộc tính

. defaultStatus - Thông báo ngầm định hiển thị lên trên thanh trạng thái của cửa

sổ

. Frames - Mảng xác định tất cả các frame trong cửa sổ.

. Length - Số lƣợng các frame trong cửa sổ cha mẹ.

. Name - Tên của cửa sổ hiện thời.

. Parent - Đối tƣợng cửa sổ cha mẹ

. Self - Cửa sổ hiện thời.

. Status - Đƣợc sử dụng cho thông báo tạm thời hiển thị lên trên thanh thạng thái

cửa sổ. Đựơc sử dụng để lấy hay đặt lại thông báo trạng thái và ghi đè lên

defaultStatus.

. Top - Cửa sổ ở trên cùng.

. Window - Cửa sổ hiện thời.

Các phƣơng thức

. alert ("message") -Hiển thị hộp hội thoại với chuỗi "message" và nút OK.

99

. clearTimeout(timeoutID) -Xóa timeout do SetTimeout đặt. SetTimeout trả lại

timeoutID

. windowReference.close -Đóng cửa sổ windowReference.

. confirm("message") -Hiển thị hộp hội thoại với chuỗi "message", nút OK và

nút Cancel. Trả lại giá trị True cho OK và False cho Cancel.

. [windowVar = ][window]. open("URL", "windowName", ["windowFeatures"] ) -

Mở cửa sổ mới.

. prompt ("message" [,"defaultInput"]) - Mở một hộp hội thoại để nhận dữ liệu

vào trƣờng text.

. TimeoutID = setTimeout(expression,msec) - Đánh giá biểu thức expresion sau

thời gian msec.

Ví dụ 3.11: Sử dụng tên cửa sổ khi gọi tới nó nhƣ là đích của một form submit hoặc

trong một Hipertext link (thuộc tính TARGET của thẻ FORM và A).

Trong ví dụ tạo ra một tới cửa sổ thứ hai, nhƣ nút thứ nhất để mở một cửa sổ rỗng,

sau đó một liên kết sẽ tải file doc2.html xuống cửa sổ mới đó rồi một nút khác dùng để

đóng của sổ thứ hai lại, ví dụ này lƣa vào file window.html:

<HTML>

<HEAD>

<TITLE>Frame Example </TITLE>

</HEAD>

<BODY>

<FORM>

<INPUT

TYPE="button"

VALUE="Open

Second

Window"

onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=2

00')">

<P>

Load a file into window2 </A>

</P>

<INPUT TYPE="button" VALUE="Close Second Window"

onClick="msgWindow.close()">

</FORM>

</BODY>

</HTML>

100

Hình 3.4: Minh hoꢀ cho đối tƣợng cửa sổ

Các chƣơng trình xử lý sự kiện

 onLoad - Xuất hiện khi cửa sổ kết thúc việc tải.

 onUnLoad - Xuất hiện khi cửa sổ đƣợc loại bỏ.

3) Đối tƣợng Location

Các thuộc tính của đối tƣợng location duy trì các thông tin về URL của document

hiện thời. Đối tƣợng này hoàn toàn không có các phƣơng thức và chƣơng trình xử lý sự

kiện đi kèm. Ví dụ 3.12: http:// www.abc.com/ chap1/page2.html#topic3

Các thuộc tính

 hash - Tên anchor của vị trí hiện thời (ví dụ topic3).

 Host - Phần hostname:port của URL (ví dụ www.abc.com ). Chú ý rằng đây

thƣờng là cổng ngầm định và ít khi đƣợc chỉ ra.

 Hostname - Tên của host và domain (ví dụ www.abc.com ).

 href - Toàn bộ URL cho document hiện tại.

 Pathname - Phần đƣờng dẫn của URL (ví dụ /chap1/page2.html).

 Port - Cổng truyền thông đƣợc sử dụng cho máy tính host, thƣờng là cổng

ngầm định.

 Protocol - Giao thức đƣợc sử dụng (cùng với dấu hai chấm) (ví dụ http:).

 Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI.

4) Đối tƣợng Frame

Một cửa số có thể có một vài frame. Các frame có thể cuộn một cách độc lập với

nhau và mỗi frame có URL riêng. frame không có các chƣơng trình xử lý sự kiện. Sự kiện

onLoad và onUnLoad là của đối tƣợng window.

101

Các thuộc tính

 frames - Mảng tất cả các frame trong cửa sổ.

 Name - Thuộc tính NAME của thẻ <FRAME>

 Length - Số lƣợng các frame con trong một frame.

 Parent - Cửa sổ hay frame chứa nhóm frame hiện thời.

 self - frame hiện thời.

 Window - frame hiện thời.

Các phƣơng thức

. clearTimeout (timeoutID) - Xoá timeout do setTimeout lập. SetTimeout trả lại

timeoutID.

. TimeoutID = setTimeout (expression,msec) - Đánh giá expression sau khi hết

thời gian msec.

Sử dụng frame

Để tạo một frame, ta sử dụng thẻ FRAMESET. Mục đích của thẻ này là định nghĩa

một tập các frame trong một trang.

Ví dụ 3.13: tạo frame

<HTML>

<HEAD>

<TITLE>Frame Example </TITLE>

</FRAMESET >

</FRAMESET >

</HEAD>

</HTML>

Sơ đồ sau hiển thị cấu trúc của các frame: Cả 3 frame đều trên cùng một cửa sổ cha,

mặc dù 2 trong số các frame đó nằm trong một frameset khác.

102