Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02

8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02

1/80

JavaScript 1

CHƢƠNG 1 LỜI NÓI ĐẦU

Vớ i HTML and Microsoft FrontPage bạn đã biết cách tạo ra trang Web - tuy nhiên chỉ mớ i ở mức biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đá p ứng

các sự kiện từ phía ngườ i dùng. Hãng Netscape đã đưa ra ngôn ngữ script có tên làLiveScript để thực hiện chức năng này. Sau đó ngôn ngữ này đượ c đổi tên thànhJavaScript để tận dụng tính đại chúng của ngôn ngữ lậ p trình Java. Mặc dù có những điểmtươ ng đồng giữa Java và JavaScript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt.

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ã dễ biên dịch, trình duyệt đọc JavaScript dướ i dạng mã nguồn. Chính vì vậy bạn có thể dễ dàng học JavaScript qua ví dụ bở i vì bạn có thể thấy cách sử dụng JavaScript trên cáctrang 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ônngữ 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 JavaScriptgiố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ệnhJavaScript đượ 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ớ iclient. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các k ết quả của HTML và xử lý cáccâ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ệncủ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ụ bạn 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ộtquá trình truyền trên mạng nào. Trang HTML vớ i JavaScript đượ c nhúng sẽ kiểm tra cácgiá 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ợ plệ.

Mục đích của phần này là giớ i thiệu về ngôn ngữ lậ p trình JavaScript để bạn có thể viếtcác script vào file HTML của mình.


2/80

JavaScript 2

CHƢƠNG 2 NHẬP MÔN JAVASCRIPT

2.1.NHÚNG JAVASCRIPT VÀO FILE HTML

Bạn 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ẻ

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

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

Trong đó, sử dụng cặ p thẻ ... và nhúng một file nguồnJavaScript là đượ c sử dụng nhiều hơ n cả.

2.1.1.Sử dụng thẻ SCRIPT

Script đượ c đưa vào file HTML bằng cách sử dụng cặ p thẻ và . Các thẻ có thể xuấthiện trong phần hay của file HTML. Nếuđặt trong phần , 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ẻ 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 bạn sử dụng cú pháp sau :

// INSERT ALL JavaScript HERE

Đ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 bạnẩ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:

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ướ idạ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.

Chú ý:

Ghi chú không đƣợ c đặttrong cặp thẻ nhƣ ghi chú trong fileHTML. Cú pháp củaJavaScript tƣơ ng tự cúpháp của C nên có thể sử dụng // hay /* ... */.


3/80

JavaScript 3

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

Thuộc tính SRC của thẻ cho phép bạn 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 trangHTML).

Cú pháp:

....

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ácnhau. Các câu lệnh JavaScript nằm trong cặ p thẻ và có chứa thuộctinh SRC tr ừ khi nó có lỗi. Ví dụ bạn muốn đưa dòng lệnh sau vào giữa cặ p thẻ và :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ẫntuyệ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ệnhJavaScript 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 MIMEapplication/x-javascript. Đó là những gì mà server gửitr ở lại phần Header của file HTML. Để ánh xạ đuôi nàyvào kiểu MIME, ta thêm dòng sau vào file mime.typestrong đườ 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 , Navigatorsẽ 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(" ")

}

2.3. THẺ VÀ

Cặ p thẻ này dùng để định rõ nội dung thông báo cho ngườ i sử dụng biết trình duyệt khônghỗ tr ợ JavaScript. Khi đó trình duyệt sẽ không hiểu thẻ và nó bị lờ đi, cònđoạn mã nằm trong cặ p thẻ này sẽ đượ c Navigator hiển thị. Ngượ c lại, nếu trình duyệt có

hỗ tr ợ JavaScript thì đoạn mã trong cặ p thẻ sẽ đượ c bỏ qua. Tuy nhiên,

Chú ý

Khi b ạn mu ố n ch ỉ ra m ột xâutrích d ẫ n trong m ột xâu khác c ầns ử d ụng d ấ u nháy đơ n ( ' ) để phân đị nh xâu đó. Đi ều này chophép scr ipt nh ận ra xâu ký t ự đó.


4/80

JavaScript 4

điều này cũng có thể xảy ra nếu ngườ i sử dụng không sử dụng JavaScript trong trìnhduyệt của mình bằng cách tắt nó đi trong hộ p Preferences/Advanced.

Ví d ụ:

Trang này có sử dụng JavaScript. Do đó bạn cần sử dụng trình duyệt Netscape Navigator từ version 2.0 tr ở đi!

Hãy kích chuột vào đây để tải về phiên bản Netscape mớ i hơ n

Nếu bạn đã sử dụng trình duyệt Netscape từ 2.0 tr ở đi mà vẫn đọc đượ c dòng chữ này thì hãy bậtPreferences/Advanced/JavaScript lên

Hình 2.3: Minh hoạ thẻ NOSCRIPT

2.3. HIỂN THỊ MỘT DÒNG TEXT

Trong hầu hết các ngôn ngữ lậ p trình, một trong những khả năng cơ sở là hiển thị ra mànhình một dòng text. Trong JavaScript, ngườ i lậ p trình cũng có thể điều khiển việc xuất ramàn hình của client một dòng text tuần tự trong file HTML. JavaScript sẽ xác định điểmmà nó sẽ xuất ra trong file HTML và dòng text k ết quả sẽ đượ c dịch như các dòng HTMLkhác và hiển thị trên trang.

Hơ n nữa, JavaScript còn cho phép ngườ i lậ p trình sinh ra một hộ p thông báo hoặc xác

nhận gồm một hoặc hai nút. Ngoài ra, dòng text và các con số còn có thể hiển thị trongtr ườ ng TEXT và TEXTAREA của một form.


5/80

JavaScript 5

Trong phần này, ta sẽ học cách thức write() và writeln() của đối tượ ng document.

Đối tượ ng document trong JavaScript đượ c thiết k ế sẵn hai cách thức để xuất một dòngtext ra màn hình client: write() và writeln(). Cách gọi một cách thức của một đối tượ ngnhư sau:

object_name.property_nameDữ liệu mà cách thức dùng để thực hiện công việc của nó đượ c đưa vào dòng tham số, vídụ:

document.write("Test");

document.writeln('Test');

Cách thức write() xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức writeln() sau khi viếtxong dòng Text tự động xuống dòng. Hai cách thức này đều cho phép xuất ra thẻ HTML.

Ví dụ: Cách thức write() xuất ra thẻ HTML

Ouputting Text

This text is plain.


6/80

JavaScript 6

Ví dụ: Sự khác nhau của write() và writeln():

Khi duyệt sẽ đượ c k ết quả:

Hình 2.5: Sự khác nhau của write() và writeln()

2.4. GIAO TIẾP VỚI NGƢỜI SỬ DỤNG

JavaScript hỗ tr ợ khả năng cho phép ngườ i lậ p trình tạo ra một hộ p hội thoại. Nội dungcủa hộ p hội thoại phụ thuộc vào trang HTML có chứa đoạn script mà không làm ảnhhưở ng đến việc xuất nội dung trang.

Cách đơ n giản để làm việc đó là sử dụng cách thức alert(). Để sử dụng đượ c cách thứcnày, bạn phải đưa vào một dòng text như khi sử dụng document.write() vàdocument.writeln() trong phần tr ướ c. Ví dụ:

alert("Nhấn vào OK để tiế p tục");


7/80

JavaScript 7

Khi đó file sẽ chờ cho đến khi ngườ i sử dụng nhấn vào nút OK r ồi mớ i tiế p tục thực hiện

Thông thườ ng, cách thức alert() đượ c sử dụng trong các tr ườ ng hợ p:

Thông tin đưa và form không hợ p lệ

K ết quả sau khi tính toán không hợ p lệ

Khi dịch vụ chưa sẵn sàng để truy nhậ p dữ liệu

Tuy nhiên cách thức alert() mớ i chỉ cho phép thông báo vớ i ngườ i sử dụng chứ chưa thựcsự giao tiế p vớ i ngườ i sử dụng. JavaScript cung cấ p một cách thức khác để giao tiế p vớ ingườ i sử dụng là promt(). Tươ ng tự như alert(), prompt() tạo ra một hộ p hội thoại vớ i mộtdòng thông báo do bạn đưa vào, nhưng ngoài ra nó còn cung cấ p một tr ườ ng để nhậ p dữ liệu vào. Ngườ i sử dụng có thể nhậ p vào tr ườ ng đó r ồi kích vào OK. Khi đó, ta có thể xử lý dữ liệu do ngườ i sử dụng vừa đưa vào.

Ví dụ: Hộ p hội thoại gồm một dòng thông báo, một tr ườ ng nhậ p dữ liệu, một nút OK vàmột nút Cancel

Chươ ng trình này sẽ hỏi tên ngườ i dùng và sau đó sẽ hiển thị một thông báo ngắn sử dụngtên mớ i đưa vào. Ví dụ đượ c lưu vào file Hello.html

JavaScript Exemple

var name=window.prompt(“Hello! What‟s your name ?”,””);

document.write(“Hello ” + name + “ ! I hope you like JavaScript ”);


8/80

JavaScript 8

Khi duyệt có k ết quả:

Ví dụ này hiển thị dấu nhắc nhậ p vào tên vớ i phươ ng thức window.prompt. Giá tr ị đạtđượ c sẽ đượ c ghi trong biến có tên là name.

Biến name đượ c k ết hợ p vớ i các chuỗi khác và đượ c hiển thị trong cửa sổ của trình duyệtnhờ phươ ng thức document.write.

Bây giờ bạn đã có ý tưở ng về các chức năng có thể đạt đượ c qua JavaScript, chúng ta hãytiế p tục tìm hiểu thêm về chính ngôn ngữ này.

Hình2.1: Hiển thị cửa sổ nhậ p tên

Hình 2.2: Hiển thị lờ i chào ngườ i nhậ p


9/80

JavaScript 9

2.5. ĐIỂM LẠI CÁC LỆNH VÀ MỞ RỘNG

LỆNH/MỞ RỘNG K IỂU MÔ TẢ

SCRIPT thẻ HTML Hộ p chứa các lệnh JavaScript

SRC Thuộc tính củathẻ SCRIPT

Giữ địa chỉ của file JavaScript bên ngoài. File này phảicó phần đuôi .js

LANGUAGE thuộc tính củathẻ SCRIPT

Định rõ ngôn ngữ script đượ c sử dụng (JavaScript hoặcVBScript)

// Ghi chú trongJavaScript

Đánh dấu ghi chú một dòng trong đoạn script

/*...*/ Ghi chú trongJavaScript

Đánh dấu ghi chú một khối trong đoạn script

document.write() cách thứcJavaScript

Xuất ra một xâu trên cửa sổ hiện thờ i một cách tuần tự theo file HTML có đoạn script đó

document.writeln() Cách thức

JavaScript

Tươ ng tự cách thức document.write() nhưng viết xong

tự xuống dòng.alert() Cách thức của

JavaScriptHiển thị một dòng thông báo trên hộ p hội thoại

promt() Cách thứcJavaScript

Hiển thị một dòng thông báo trong hộ p hội thoại đồngthờ i cung cấ p một tr ườ ng nhậ p dữ liệu để ngườ i sử dụng nhậ p vào.


10/80

JavaScript 10

CHƢƠNG 3 BIẾN TRONG JAVASCRIPT

3.1. BIẾN VÀ PHÂN LOẠI BIẾN

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.

3.2. BIỂU DIỄN TỪ TỐ TRONG JAVASCRIPT

Từ tố là các giá tr ị trong chươ ng trình không thay đổi. Sauđây là các ví dụ về từ tố:

8

“The dog ate my shoe”

true

3.3. K IỂ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 ĩ alà 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ểnthành kiểu phù hợ p khi cần thiết.

Ví dụ file Variable.Html:

Datatype Example

var fruit='apples';

var numfruit=12;

numfruit = numfruit + 20;

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

document.write(temp);

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:

Chú ý

Khác v ớ i C, trongJavaScript không cóki ể u h ằng s ố CONST để bi ể u di ễ n m ột giá tr ị không đổ i nào đấ y


11/80

JavaScript 11

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ể ulogic và kiể u chuỗ i.

1.1.1.

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ânvớ 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ậ plục phân vớ i hai chữ số đầu tiên là 0x.

1.1.2.

K IỂ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ũ.

Hình 3.1: K ết quả của xử lý dữ liệu


12/80

JavaScript 12

Để 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 saudấu chấm hay E. Ví dụ:

9.87

-0.85E4

9.87E14

.98E-3

1.1.3. K IỂ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àychỉ có hai giá tr ị

true.

false.

1.1.4.

K IỂ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.\” ”);


13/80

JavaScript 13

2. XÂY DỰNG CÁC BIỂU THỨC TRONG JAVASCRIPT

ĐỊNH NGHĨA VÀ PHÂN LOẠI 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

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".

CÁC TOÁN TỬ (OPERATOR)

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.

2.1.1. 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 chotoá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 Ki ể u gán rút g ọn

x = x + y x + = y

x = x - y x - = y

x = x * y x * = y

x = x / y x / = y

x = x % y x % = y

2.1.2. 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:


14/80

JavaScript 14

== 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ánhạ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


15/80

JavaScript 15

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

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

2.1.6. 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.

^ 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ên32 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ủatoán hạng bên trái. Sau đây là các toán tử dịch chuyển:

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ành1073741822 (bở i các bit dấu đã tr ở thành một phần của số). Tất nhiên vớ isố 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 bi twise thông th ườ ng Ki ể u bi twise rút g ọn

x = x y x - >> y

x = x >>> y x >>> = y

x = x & y x & = y

x = x ^ y x ^ = y

x = x | y x | = y


16/80

JavaScript 16

BÀI TẬP

2.1.7. CÂU HỎI

Hãy đánh giá các biểu thức sau:

1. a. 7 + 5

b. "7" + "5"

c. 7 == 7

d. 7 >= 5

e. 7 = 5) && (5 > 5)

h. (7 >= 5) || (5 > 5)

2.1.8. TRẢ LỜI

Các biểu thức đượ c đánh giá như sau:

1. a. 12

b. "75"

c. true

d. true

e. true2. f. 5

g. false

h. true


17/80

JavaScript 17

3. CÁC LỆNH

Có thể chia các lệnh của JavaScript thành ba nhóm sau:

Lệnh điều kiện.

Lệnh lặ p.

Lệnh tháo tác trên đối tượ ng.

CÂU 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 đấydựa trên k ết quả của quyết định. Trong JavaScript, câu lệnh điều kiện là if...else

if ... else

Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện một nhóm lệnh nào đấy dựatrê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 ( )

{

//Các câu lệnh vớ i điều kiện đúng

}

else{

//Các câu lệnh vớ i điều kiện sai

}

Ví d ụ:

if (x==10){

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

x = 0;

}

else

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

Chú ý

Ký t ự { và } đượ c sử d ụng để tách các khố i mã.


18/80

JavaScript 18

CÂU 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

3.1.1. 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 đếnkhi biểu thức đượ c đánh giá là đúng. Sau khi k ết thúc mỗi vòng lặ p, biểuthức incrExpr đượ c đánh giá lại.

Cú pháp:

for (initExpr; ; incrExpr){

//Các lệnh đƣợ c thự c hiện trong khi lặp}

Ví d ụ:

For loop Example

for (x=1; x


19/80

JavaScript 19

Ví dụ này lưu vào file for_loop.Html.

Vòng lặ p này sẽ thực hiện khối mã lệnh cho đến khi x>10.

3.1.2. WHILE

Vòng lặ p while lặ p khối lệnh chừng nào còn đượ c đánh giá là đúng

Cú pháp:

while (){

//Các câu lệnh thự c hiện trong khi lặp

}

Ví d ụ:

x=1;

while (x


20/80

JavaScript 20

Đ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àovòng lặ p nhỏ hơ n 50, vòng lặ p sẽ k ết thúc

Ví d ụ:

while (x


21/80

JavaScript 21

{

//Các câu lệnh

}

Ví d ụ

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ộctính. K ết quả đượ c minh hoạ trên hình 5.2.

For in Example

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

for (var x in window)

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


22/80

JavaScript 22

3.1.6. NEW

Biến new đượ c thực hiện để tạo ra một thể hiện mớ i của một đối tượ ng

Cú phápobjectvar = new object_type ( param1 [,param2]... [,paramN])

Ví dụ sau tạo đối tượ ng person có các thuộc tính firstname, lastname, age, sex. Chú ýr ằng từ khoá this đượ c sử dụng để chỉ đối tượ ng trong hàm person. Sau đó ba thể hiệncủa đối tượ ng person đượ c tạo ra bằng lệnh new

New Example

function person(first_name, last_name, age, sex){

this.first_name=first_name;

this.last_name=last_name;

this.age=age;

this.sex=sex;

}

person1= new person("Thuy", "Dau Bich", "23", "Female");

person2= new person("Chung", "Nguyen Bao", "24", "Male");

person3= new person("Binh", "Nguyen Nhat", "24", "Male");

Hình 5.2: K ết quả của lệnh for...in


23/80

JavaScript 23

person4= new person("Hoàn", "Đỗ Văn", "24", "Male");

document.write ("1. "+person1.last_name+" " + person1.first_name + "
" );

document.write("2. "+person2.last_name +" "+ person2.first_name + "
");

document.write("3. "+ person3.last_name +" "+ person3.first_name + "
");

document.write("4. "+ person4.last_name +" "+ person4.first_name+"
");

3.1.7. THIS

Từ khoá this đượ c sử dụng để chỉ đối tượ ng hiện thờ i. Đối tượ ng đượ c gọi thườ ng là đốitượ ng hiện thờ i trong phươ ng thức hoặc trong hàm.

Cú pháp

this [.property]

Có thể xem ví dụ của lệnh new.

Hình 5.3: K ết quả của ví dụ lệnh New


24/80

JavaScript 24

3.1.8. WITH

Lệnh này đượ c sử dụng để thiết lậ p đối tượ ng ngầm định cho một nhóm các lệnh, bạn cóthể sử dụng các thuộc tính mà không đề cậ p đến đối tượ ng.

Cú pháp

with (object)

{

// statement

}

Ví dụ:

Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lậ p đối tượ ng ngầm định là document vàcó thể sử dụng phươ ng thức write mà không cần đề cậ p đến đối tượ ng document

With Example

with (document){

write(“This is an exemple of the things that can be done
”);

write(“With the with statment.

”);

write(“This can really save some typing”);

}


25/80

JavaScript 25

CÁC HÀM (FUNCTIONS)

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àmcó 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ônngữ 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ủahà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])

{

//function statement

}

Ví d ụ:

Ví dụ sau minh hoạ cách thức tạo ra và sử dụng hàm như là thành viên của một đối tượ ng.Hàm printStats đượ c tạo ra là phươ ng thức của đối tượ ng person

Function Example

function person(first_name, last_name, age, sex)

{

Hình 5.4: K ết quả của ví dụ lệnh with


26/80

JavaScript 26

this.first_name=first_name;

this.last_name=last_name;

this.age=age;

this.sex=sex;

this.printStats=printStats;

}

function printStats() {

with (document) {

write (" Name :" + this.last_name + " " + this.first_name + "
" );

write("Age :"+this.age+"
");

write("Sex :"+this.sex+"
");

}

}

person1= new person("Thuy", "Dau Bich", "23", "Female");

person2= new person("Chung", "Nguyen Bao", "24", "Male");

person3= new person("Binh", "Nguyen Nhat", "24", "Male");

person4= new person("Hoan", "Do Van", "23", "Male");

person1.printStats();





27/80

JavaScript 27

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 trongmột đối tượ ng nào:

eval

parseInt

parseFloat

3.1.9. 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 đốitượ 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)

Ví d ụ:

1.1.1.1.1.

Hình 8: Ví d ụ v ề hàm

Hình 5.5: K ết quả việc sử dụng hàm


28/80

JavaScript 28

Eval Example

var string=”10+ Math.sqrt(64)”;

document.write(string+ “=”+ eval(string));

3.1.10.

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àykhô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ố 10và đả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 khití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ểndạ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])

Ví d ụ:

Hình 5.6 Ví dụ hàm Eval


29/80

JavaScript 29

perseInt Exemple

document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) +"
");

document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) +"
");

Hình 5.7: Ví dụ parInt

3.1.11. 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

parseFloat (string)

Ví d ụ:


30/80

JavaScript 30

Ví dụ sau minh hoạ cách thức xử lý của parseFloat vớ i các kiểu chuỗi khác nhau. Hình 5.8minh họa k ết quả

perseFload Exemple

document.write("This script will show how diffrent strings are ");

document.write("Converted using parseFloat
");

document.write("137= " + parseFloat("137") + "
");

document.write("137abc= " + parseFloat("137abc") + "
");

document.write("abc137= " + parseFloat("abc137") + "
");

document.write("1abc37= " + parseFloat("1abc37") + "
");

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ươ ngthức cho phép bạn 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


31/80

JavaScript 31

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ácthà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 đủ: Array Exemple

function InitArray(numElements) {

this.length = numElements;for (var x=1; x


32/80

JavaScript 32

Hình 5.9: Ví dụ mảng

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ệnmộ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.

Ch ươ ng trình x ử lý s ự ki ện (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ươ ngtrình xử lý sự kiện đượ c xác định là một thuộc tính của một thẻ HTML:

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

Đ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 JavaScriptcá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ếtdướ i dạng các hàm.

Một số chươ ng trình xử lý sự kiện trong JavaScript:

onBlur Xảy ra khi input focus bị xoá từ thành phần form

onClick Xảy ra khi ngườ i dùng kích vào các thành phần hay liênk ết của form.


33/80

JavaScript 33

onChange Xảy ra khi giá tr ị của thành phần đượ c chọn thay đổi

onFocus Xảy ra khi thành phần của form đượ c focus(làm nổi lên).

onLoad Xảy ra trang Web đượ c tải.

onMouseOver Xảy ra khi di chuyển chuột qua k ết nối hay anchor.

onSelect Xảy ra khi ngườ i sử dụng lựa chọn một tr ườ ng nhậ p dữ liệu trên form.

onSubmit Xảy ra khi ngườ i dùng đưa ra một form.

onUnLoad Xảy ra khi ngườ i dùng đóng một trang

Sau đây là bảng các chươ ng trình xử lý sự kiện có sẵn của một số đối tượ ng. Các đốitượ ng này sẽ đượ c trình bày k ỹ hơ n trong phần sau.

Đối tượ ng Chươ ng trình xử lý sự kiện có sẵn

Selection list onBlur, onChange, onFocus

Text onBlur, onChange, onFocus, onSelect

Textarea onBlur, onChange, onFocus, onSelect

Button onClick

Checkbox onClick

Radio button onClick

Hypertext link onClick, onMouseOver, onMouseOut

Clickable Imagemap area onMouseOver, onMouseOut

Reset button onClick

Submit button onClick

Document onLoad, onUnload, onError

Window onLoad, onUnload, onBlur, onFocus

Framesets onBlur, onFocus

Form onSubmit, onReset

Image onLoad, onError, onAbort

Ví dụ sau là một đoạn mã script đơ n giản của chươ ng trình xử lý sự kiện thẩm định giá tr ị đưa vào trong tr ườ ng text. Tuổi của ngườ i sử dụng đượ c nhậ p vào trong tr ườ ng này vàchươ ng trình xử lý sự kiện sẽ thẩm định tính hợ p lệ của dữ liệu đưa vào. Nếu không hợ plệ sẽ xuất hiện một thông báo yêu cầu nhậ p lại. Chươ ng trình xử lý sự kiện đượ c gọi mỗikhi tr ườ ng AGE bị thay đổi và focus chuyển sang tr ườ ng khác. Hình 5.10 minh hoạ k ếtquả của ví dụ này


34/80

JavaScript 34

An Event Handler Exemple

function CheckAge(form) {

if ( (form.AGE.value120) )

{

alert("Tuổi nhậ p vào không hợ p lệ! Mờ i bạn nhậ p lại");

form.AGE.value=0;

}

}

Nhậ p vào tên của bạn:

Tên

Đệm

Họ

Age

Bạn thích mùa nào nhất:
Mùa xuân

Mùa hạ

Mùa thu

Mùa đông

Hãy chọn những hoạt động ngoài tr ờ i mà bạn yêu thích:
Đi bộ


35/80

JavaScript 35

Tr ượ t tuyết

Thể thao dướ i nướ c

Đạ p xe

Hình 5.10: Minh hoạ cho ví dụ Event Handler


36/80

JavaScript 36

BÀI TẬP

3.1.12. CÂU HỎI

1. Viết một đoạn lệnh JavaScript sử dụng cách thức confirm() và câu lệnh if...then để thực

hiện:Hỏi ngườ i sử dụng có muốn nhận đượ c một lờ i chào không

Nếu có thì hiện ảnh wellcome.jpg và một lờ i chào.

Nếu không thì viết ra một lờ i thông báo

2. Viết một đoạn lệnh JavaScript để thực hiện:

Hỏi ngườ i sử dụng: "10+10 bằng bao nhiêu?"

Nếu đúng thì hỏi tiế p: Có muốn tr ả lờ i câu thứ hai không?"

Nếu muốn thì hỏi: "10*10 bằng bao nhiêu?"

Đánh giá k ết quả bằng biểu thức logic sau đó viết ra màn hình:Đúng: "CORRECT"; Sai: "INCORRECT"

Gợ i ý: Sử dụng biến toàn cục lưu k ết quả đúng để so sánh vớ i k ết qủa đưa vào.

3. Câu lệnh nào trong các câu sau đây sử dụng sai thẻ sự kiện

a.

b.

c.

d. e.

f.

4. Điều gì xảy ra khi thực hiện script sau:

Exercise 5.4


37/80

JavaScript 37

This is my page!

5. Sử dụng vòng lặ p while để mô phỏng các vòng lặ p for sau:

a.

for (j = 4; j > 0; j --) {

document.writeln(j + "
");

}

b.

for (k = 1; k


38/80

JavaScript 38

2. Thực hiện hỏi ngườ i sử dụng:

Exercise 3.3


39/80

JavaScript 39

// OUTPUT RESULT

document.write(output);

// STOP HIDING FROM OTHER BROWSERS -->

3. Các câu sai: a, c, e. Các câu đúng: b, d, f

4. Khi chươ ng trình đượ c chạy (load), hàm wellcome sẽ thực hiện hỏi tên ngườ i sử dụng, lưu tên đó vào biến toàn cục name. Khi ngườ i sử dụng sang một địa chỉ URL khác, hàm farewell() sẽ thực hiện gửi một lờ i cảm ơ n tớ i ngườ i sử dụng.

5. Sử dụng vòng lặ p while như sau:

a.

j = 5;

while (--j > 0) {

document.writeln(j + "
");

}

b.

k = 1;

while (k


40/80

JavaScript 40

4. 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 đốitượ 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ácthuộ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 đâyform tên PHIEU_DIEU_TRAlà 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, bạn 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ẻ của document . Bên cạnh đó bạn thấy phươ ng thứcdocument.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ó haichươ ng trình xử lý sự kiện là onClick và onMouseOver. onClick đượ c gọi khi có đốitượ ng link đượ c kích, onMouseOver đượ c gọi khi con tr ỏ chuột di chuyển qua link.

Khi bạn tải một document xuống Navigator, nó sẽ tạo ra một số đối tượ ng cùng vớ i nhữnggiá 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ôngtin 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ínhcấu trúc của file HTML đó.


41/80

JavaScript 41

Sơ đồ sau sẽ minh hoạ sự phân cấ p của các đối tượ ng này

Trong sơ đồ phân cấ p này, các đối tượ ng con chính là các thuộc tính của một đối tượ ngcha. Ví dụ như một form tên là form1 chính là một đối tượ ng con của đối tượ ng document

và đượ c gọi tớ i là document.form1Tất cả các trang đều có các đối tượ ng sau đây:

navigator: có các thuộc tính tên và phiên bản của Navigator đang đượ c sử dụng, dùng cho MIME type đượ c hỗ tr ợ bở i client và plug-in đượ c cài đặttrên client.

window: là đối tượ ng ở mức cao nhất, có các thuộc tính thực hiện áp dụngvào toàn bộ cửa sổ.

document: chứa các thuộc tính dựa trên nội dung của document như tên,màu nền, các k ết nối và các forms.

location: có các thuộc tính dựa trên địa chỉ URL hiện thờ i

Window Texturea

Text

FileUpload

Password

Hidden

Submit

Reset

Radio

Checkbox

Button

Select

Plugin

Mime TypeFrame

document

Location

History

Layer

Link

Image

Area

Anchor

Applet

Plugin

Form

navigator

Option

Hình 6.1: Sơ đồ 1 - Phân cấ p đối tượ ng Navigator


42/80

JavaScript 42

history: Chứa các thuộc tính về các URL mà client yêu cầu tr ướ c đó.

Sau đây sẽ mô tả các thuộc tính, phươ ng thức cũng như các chươ ng trình xử lý sự kiệncho từng đối tượ ng trong JavaScript.

ĐỐ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 Xác định tên trình duyệt.

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

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

Ví d ụ

Ví dụ sau sẽ hiển thị các thuộc tính của đối tượ ng navigator

Navigator Object Exemple

document.write("appCodeName = "+navigator.appCodeName + "
");document.write("appName = "+navigator.appName + "
");document.write("appVersion = "+navigator.appVersion + "
");document.write("userAgent = "+navigator.userAgent + "
");


43/80

JavaScript 43

ĐỐ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ượ ngdocument, frame, vị trí đều là thuộc tính của đối tượ ng window.

4.1.1. 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ửasổ

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áicửa sổ. Đựơ c sử dụng để lấy hay đặt lại thông báo tr ạng thái và ghi đè lêndefaultStatus.

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

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

Hình 6.2: Minh hoạ cho đối tượ ng Navigator


44/80

JavaScript 44

4.1.2. 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.

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

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ệuvào tr ườ ng text.

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

thờ i gian msec.Ví dụ: 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ộtHipertext 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ủasổ thứ hai lại, ví dụ này lưa vào file window.html :

Frame Example

Load a file into window2


45/80


46/80

JavaScript 46

ĐỐ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ớ inhau 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.


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

Name - Thuộc tính NAME của thẻ

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.


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

TimeoutID = setTimeout (expression,msec) - Đánh giá expression sau khi hếtthờ i gian msec.

4.1.6. SỬ DỤNG FRAME

4.1.6.1.

a) Tạo một frame (create)Để tạo một frame, ta sử dụng thẻ FRAMESET. Mục đích của thẻ này là định ngh ĩ a mộttậ p các frame trong một trang.

Ví d ụ1 : tạo frame ( hình 17)

Frame Example

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ặcdù 2 trong số các frame đó nằm trong một frameset khác.

Top

listFrame (category html)


47/80

JavaScript 47

Bạn có thể gọi tớ i những frame tr ướ c đó bằng cách sử dụng thuộc tính frames như sau:

listFrame chính là top.frames[0]

contentFrame chính là top.frames[1]

navigatorFrame chính là top.frames[2]

Hình 6.4: K ết quả việc tạo frame trong

Ví d ụ 2 : Cũng giống như một sự lựa chọn, bạn có thể tạo ra một cửa sổ giống như ví dụ tr ướ c nhưng trong mỗi đỉnh của hai frame lại có một cửa sổ cha riêng từ navigateFrame.Mức frameset cao nhất có thể đượ c định ngh ĩ a như sau:

Frame Example

Trong file muske13.html lại tiế p tục đặt một frameset:


48/80

JavaScript 48

Frame Example

Khi đó k ết quả hiển thị của ví dụ 2 giống ví dụ 1 nhưng sự phân cấ p của các frames lạikhác hẳn:

Bạn có thể gọi tớ i các frame trên bằng cách sử dụng thuộc tính mảng frames như sau:

upperFrame chính là top.frames[0]navigatorFrame chính là top.frames[1]

listFrame chính là upperFrame.frames[0]

hoặc top.frames[0].frames[0]

contentFrame chính là upperFrame.frames[1]

hoặc top.frames[0].frames[1]

4.1.6.2. b) Cập nhật một frame (update)

Bạn có thể cậ p nhật nội dung của một frame bằng cách sử dụng thuộc tính location để đặtđịa chỉ URL và phải định chỉ rõ vị trí của frame trong cấu trúc.

Trong ví dụ trên, nếu bạn thêm một dòng sau vào navigatorFrame:

thì khi nút “Titles only” đượ c nhấn, file artist.html sẽ đượ c tải vào upperFrame, và haiframe listFrame, contentFrame sẽ bị đóng lại như chúng chưa bao giờ tồn tại.

top

upperFrame(muske13.html)

navigatorFrame(navigator.html)

listFrame (category.html)

contentFrame (titles.html)


49/80

JavaScript 49

ĐỐI TƢỢNG DOCUMENT

Đối tượ ng này chứa các thông tin về document hiện thờ i và cung cấ p các phươ ng thức để đưa thông tin ra màn hình. Đối tượ ng document đượ c tạo ra bằng cặ p thẻ và. Một số các thuộc tính gắn vớ i thẻ .

Các đối tượ ng anchor, forms, history, links là thuộc tính của đối tượ ng document. Khôngcó các chươ ng trình xử lý sự kiện cho các frame. Sự kiện onLoad và onUnLoad là cho đốitượ ng window.


alinkColor - Giống như thuộc tính ALINK.

anchor - Mảng tất cả các anchor trong document.

bgColor - Giống thuộc tính BGCOLOR.

cookie - Sử dụng để xác định cookie. fgColor - Giống thuộc tính TEXT.

forms - Mảng tất cả các form trong document.

lastModified - Ngày cuối cùng văn bản đượ c sửa.

linkColor - Giống thuộc tính LINK.

links - Mảng tất cả các link trong document.

location - URL đầy đủ của văn bản.

referrer - URL của văn bản gọi nó.

title - Nội dung của thẻ .

vlinkColor - Giống thuộc tính VLINK.


document.clear - Xoá document hiện thờ i.

document.close - Đóng dòng dữ liệu vào và đưa toàn bộ dữ liệu trong bộ đệmra màn hình.

document.open (["mineType"]) - Mở một stream để thu thậ p dữ liệu vào củacác phwong thức write và writeln.

document.write(expression1 [,expression2]...[,expressionN]) - Viết biểu thứcHTML lên văn bản trông một cửa sổ xác định.

document.writeln (expression1 [,expression2] ... [,expressionN] ) - Giống phươ ng thức trên nhưng khi hết mỗi biểu thức lại xuống dòng.

ĐỐI TƢỢNG ANCHORS

anchor là một đoạn văn bản trong document có thể dùng làm đích cho một siêu liên k ết. Nó đượ c xác định bằng cặ p thẻ và . Đối tượ ng anchor không có thuộc tính, phươ ng thức cũng như chươ ng trình xử lý sự kiện. Mảng anchor tham chiếu đến mỗianchor có tên trong document. Mỗi anchor đượ c tham chiếu bằng cách:


50/80

JavaScript 50

document.anchors [index]

Mảng anchor có một thuộc tính duy nhất là length xác định số lượ ng các anchor trongdocument, nó có thể đượ c xác định như sau:

document.anchors.length.

ĐỐI TƢỢNG FORMS

Các form đượ c tạo ra nhờ cặ p thẻ và . Phần lớ n các thuộc tínhcủa đối tượ ng form phản ánh các thuộc tính của thẻ . Có một vài phần tử (elements) là thuộc tính của đối tượ ng forms:

button

checkbox

hidden

password

radio

reset

select

submit

text

textarea

Các phần tử này sẽ đượ c trình bày sau.

Nếu document chứa một vài form, chúng có thể đượ c tham chiếu qua mảng forms. Số lượ ng các form có thể đượ c xác định như sau:

document.forms.length.

Mỗi một form có thể đượ c tham chiếu như sau:

document.forms[index]


action thuộc tính ACTION của thẻ FORM.

elements Mảng chứa tất cả các thành phần trong một form (như checkbox,

tr ườ ng text, danh sách lựa chọnencoding Xâu chứa kiểu MIME đượ c sử dụng để mã hoá nội dung của form

gửi cho server.

length Số lượ ng các thành phần trong một form.

methodThuộc tính METHOD.

target Xâu chứa tên của cửa sổ đích khi submit form


formName.submit () - Xuất dữ liệu của một form tên formName tớ i trang xử lý. Phươ ngthức này mô phỏng một click vào nút submit trên form.


51/80


52/80

JavaScript 52

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ổngngầ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.

Target - Giống thuộc tính TARGET của .

4.1.15. CÁC CHƢƠNG TRÌNH XỬ LÝ SỰ KIỆN

onClick - Xảy ra khi ngườ i sử dụng nhấn vào link.

onMouseOver - Xảy ra khi con chuột di chuyển qua link.

ĐỐI TƢỢNG MATHĐối tượ ng Math là đối tượ ng nội tại trong JavaScript. Các thuộc tính của đối tượ ng nàychứa nhiều hằng số toán học, các hàm toán học, lượ ng giác phổ biến. Đối tượ ng Mathkhông có chươ ng trình xử lý sự kiện.

Việc tham chiếu tớ i number trong các phươ ng thức có thể là số hay các biểu thức đượ cđnáh giá là số hợ p lệ.


E - Hằng số Euler, khoảng 2,718.

LN2 - logarit tự nhiên của 2, khoảng 0,693.

LN10 - logarit tự nhiên của 10, khoảng 2,302.

LOG2E - logarit cơ số 2 của e, khoảng 1,442.

PI - Giá tr ị của , khoảng 3,14159.

SQRT1_2 - Căn bậc 2 của 0,5, khoảng 0,707.

SQRT2 - Căn bậc 2 của 2, khoảng 1,414.

4.1.17.

CÁC PHƢƠNG THỨC Math.abs (number ) - Tr ả lại giá tr ị tuyệt đối của number.

Math.acos (number ) - Tr ả lại giá tr ị arc cosine (theo radian) của number. Giátr ị của number phải nămg giữa -1 và 1.

Math.asin (number ) - Tr ả lại giá tr ị arc sine (theo radian) của number. Giá tr ị của number phải nămg giữa -1 và 1.

Math.atan (number ) - Tr ả lại giá tr ị arc tan (theo radian) của number.

Math.ceil (number ) - Tr ả lại số nguyên nhỏ nhất lớ n hơ n hoặc bằng number.

Math.cos (number ) - Tr ả lại giá tr ị cosine của number.


53/80

JavaScript 53

Math.exp (number ) - Tr ả lại giá tr ị e^ number , vớ i e là hằng số Euler.

Math.floor (number ) - Tr ả lại số nguyên lớ n nhất nhỏ hơ n hoặc bằng number.

Math.log (number ) - Tr ả lại logarit tự nhiên của number.

Math.max (num1,num2) - Tr ả lại giá tr ị lớ n nhất giữa num1 và num2

Math.min (num1,num2) - Tr ả lại giá tr ị nhỏ nhất giữa num1 và num2.

Math.pos (base,exponent ) - Tr ả lại giá tr ị base luỹ thừa exponent.

Math.random (r ) - Tr ả lại một số ngẫu nhiên giữa 0 và 1. Phwong thức này chỉ thực hiện đượ c trên nền tảng UNIX.

Math.round (number ) - Tr ả lại giá tr ị của number làm tròn tớ i số nguyên gầnnhất.

Math.sin (number ) - Tr ả lại sin của number.

Math.sqrt (number ) - Tr ả lại căn bậc 2 của number.

Math.tan (number ) - Tr ả lại tag của number.

ĐỐI TƢỢNG DATE

Đối tượ ng Date là đối tượ ng có sẵn trong JavaScript. Nó cung cấ p nhiều phươ ngthức có ích để xử lý về thờ i gian và ngày tháng. Đối tượ ng Date không có thuộc tính vàchươ ng trình xử lý sự kiện.

Phần lớ n các phươ ng thức date đều có một đối tượ ng Date đi cùng. Các phươ ng thức giớ i

thiệu trong phần này sử dụng đối tượ ng Date dateVar, ví dụ:dateVar = new Date ('August 16, 1996 20:45:04');


dateVar .getDate() - Tr ả lại ngày trong tháng (1-31) cho dateVar .

dateVar .getDay() - Tr ả lại ngày trong tuần (0=chủ nhật,...6=thứ bảy) chodateVar .

dateVar .getHours() - Tr ả lại giờ (0-23) cho dateVar .

dateVar .getMinutes() - Tr ả lại phút (0-59) cho dateVar . dateVar .getSeconds() - Tr ả lại giây (0-59) cho dateVar .

dateVar .getTime() - Tr ả lại số lượ ng các mili giây từ 00:00:00 ngày 1/1/1970.

dateVar .getTimeZoneOffset() - Tr ả lại độ dịch chuyểnbằng phút của giờ địa phươ ng hiện tại so vớ i giờ quốc tế GMT.

dateVar .getYear()-Tr ả lại năm cho dateVar.

Date.parse (dateStr ) - Phân tích chuỗi dateStr và tr ả lại số lượ ng các mili giâytính từ 00:00:00 ngày 01/01/1970.

dateVar .setDay(day) - Đặt ngày trong tháng là day cho dateVar .


54/80

JavaScript 54

dateVar .setHours(hours) - Đặt giờ là hours cho dateVar .

dateVar .setMinutes(minutes) - Đặt phút là minutes cho dateVar.

dateVar .setMonths(months) - Đặt tháng là months cho dateVar .

dateVar .setSeconds( seconds) - Đặt giây là seconds cho dateVar .

dateVar .setTime(value) - Đặt thờ i gian là value, trong đó value biểu diễn số lượ ng mili giây từ 00:00:00 ngày 01/01/10970.

dateVar .setYear( years) - Đặt năm là years cho dateVar.

dateVar .toGMTString() - Tr ả lại chuỗi biểu diễn dateVar dướ i dạng GMT.

dateVar .toLocaleString()-Tr ả lại chuỗi biểu diễn dateVar theo khu vực thờ igian hiện thờ i.

Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) - Tr ả lại số lượ ngmili giây từ 00:00:00 01/01/1970 GMT.

ĐỐI TƢỢNG STRING

Đối tượ ng String là đối tượ ng đượ c xây dựng nội tại trong JavaScript cung cấ p nhiều phươ ng thức thao tác trên chuỗi. Đối tượ ng này có thuộc tính duy nhất là độ dài (length)và không có chươ ng trình xử lý sự kiện.


str.anchor (name) - Đượ c sử dụng để tạo ra thẻ (một cách động). Tham số name là thuộc tính NAME của thẻ .

str.big() - K ết quả giống như thẻ trên chuỗi str .

str.blink() - K ết quả giống như thẻ trên chuỗi str .

str.bold() - K ết quả giống như thẻ trên chuỗi str .

str.charAt(a) - Tr ả lại ký tự thứ a trong chuỗi str.

str.fixed() - K ết quả giống như thẻ trên chuỗi str .

str.fontcolor() - K ết quả giống như thẻ .

str.fontsize( size) - K ết quả giống như thẻ .

str.index0f(srchStr [,index]) - Tr ả lại vị trí trong chuỗi str vị trí xuất hiện đầutiên của chuỗi srchStr . Chuỗi str đượ c tìm từ trái sang phải. Tham số index cóthể đượ c sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi.

str.italics() - K ết quả giống như thẻ trên chuỗi str .

str.lastIndex0f(srchStr [,index]) - Tr ả lại vị trí trong chuỗi str vị trí xuất hiệncuối cùng của chuỗi srchStr . Chuỗi str đượ c tìm từ phải sang trái. Tham số index có thể đượ c sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi.

str.link(href) - Đượ c sử dụng để tạo ra một k ết nối HTML động cho chhuỗi str . Tham số href là URL đích của liên k ết.

str.small() - K ết quả giống như thẻ trên chuỗi str .


55/80

JavaScript 55

str.strike() - K ết quả giống như thẻ trên chuỗi str .

str.sub() - Tạo ra một subscript cho chuỗi str , giống thẻ .

str.substring(a,b) - Tr ả lại chuỗi con của str là các ký tự từ vị trí thứ a tớ i vị tríthứ b. Các ký tự đượ c đếm từ trái sang phải bắt đầu từ 0.

str.sup() - Tạo ra superscript cho chuỗi str , giống thẻ .

str.toLowerCase() - Đổi chuỗi str thành chữ thườ ng.

str.toUpperCase() - Đổi chuỗi str thành chữ hoa.

CÁC PHẦN TỬ CỦA ĐỐI TƢỢNG FORM

Form đượ c tạo bở i các phần tử cho phép ngườ i sử dụng đưa thông tin vào. Khi đó, nộidung (hoặc giá tr ị) của các phần tử sẽ đượ c chuyển đến một chươ ng trình trên server quamột giao diện đượ c gọi là Common Gateway Interface(Giao tiế p qua một cổng chung) gọi

tắt là CGISử dụng JavaScript bạn có thể viết những đoạn scripts chèn vào HTML của bạn để làmviệc vớ i các phần tử của form và các giá tr ị của chúng.

B ảng ?: Các ph ần t ử c ủa form

Phần tử Mô tả

button Là một nút bấm hơ n là nút submit hay nút reset

()

checkbox Một checkbox ()

FileUpload Là một phần tử tải file lên cho phép ngườ i sử dụng gửi lên một file()

hidden Một tr ườ ng ẩn ()

password Một tr ườ ng text để nhậ p mật khẩu mà tất cả các ký tự nhậ p vào đều hiểnthị là dấu (*)()

radio Một nút bấm ()

reset Một nút reset()

select

Một danh sách lựa chọn

(option1

option2)

submit Một nút submit ()

text Một tr ườ ng text ()

textArea Một tr ườ ng text cho phép nhậ p vàp nhiều dòng

default text)


56/80

JavaScript 56

Mỗi phần tử có thể đượ c đặt tên để JavaScript truy nhậ p đến chúng qua tên

4.1.20. THUỘC TÍNH TYPE

Trong mỗi phần tử của form đều có thuộc tính type, đó là một xâu chỉ định rõ kiểu của

phần tử đượ c đưa vào như nút bấm, một tr ườ ng text hay một checkbox...Xâu đó có thể là một trong các giá tr ị sau:

Text field: "text"

Radio button: "radio"

Checkbox: "checkbox"

Hidden field: "hidden"

Submit button: "submit"

Reset button: "reset"

Password field: "password"

Button: "button"

Select list: "select-one"

Multiple select lists: "select-multiple"

Textarea field: "textarea"

4.1.21. PHẦN TỬ BUTTON

Trong một form HTML chuẩn, chỉ có hai nút bấm có sẵn là submit và reset bở i vị dữ liệu

trong form phải đượ c gửi tớ i một vài địa chỉ URL (thườ ng là CGI-BIN script) để xử lý vàlưu tr ữ.

Một phần tử button đượ c chỉ định rõ khi sử dụng thẻ INPUT:

Trong thẻ INPUT, name là tên của button, thuộc tính VALUE có chứa nhãn của button sẽ đượ c hiển thị trên Navigator của browser.

Chỉ có một thẻ sự kiện duy nhất đối vớ i button là onClick . K ết hợ p vớ i nó là cách thứcduy nhất click .Phần tử buttton có khả năng mở r ộng cho phép ngườ i lậ p trình JavaScriptcó thể viết đượ c một đoạn mã lệnh JavaScript để thực thi việc thêm vào một nút bấm

trong một script.Trong ví dụ sau, thay vì sử dụng onChange, bạn có thể chỉnh sửa script để định giá biểuthức khi button đượ c bấm.

Ví dụ: Định giá một form sử dụng phần tử button.

button Example


57/80

JavaScript 57

form.results.value = eval(form.entry.value);

}

// STOP HIDING FROM OTHER BROWSERS -->

Enter a JavaScript mathematical expression:

The result of this expression is:

4.1.22. PHẦN TỬ CHECKBOX

Các phần tử checkbox có khả năng bật tắt dùng để chọn hoặc không chọn một thông tin.

Các checkbox có nhiều thuộc tính và cách thức hơ n button. Bảng dướ i đây là danh sáchcác thuộc tính và các cách thức của phần tử checkbox.

Bảng . Các thuộc tính và cách thức của phần tử checkbox.

Cách thức và thuộctính

Mô tả

checked Cho biết tr ạng thái hiện thờ i của checkbox (thuộc tính)

defaultChecked Cho biết tr ạng thái mặc định của phần tử (thuộc tính)

name Cho biết tên của phần tử đượ c chỉ định trong thẻ INPUT (thuộc

tính)

value Cho biết giá tr ị hiện thờ i của phần tử đượ c chỉ định trong thẻ INPUT (thuộc tính)

click() Mô tả một click vào checkbox (Cách thức)

Phần tử checkbox chỉ có một thẻ sự kiện là onClick

Ví dụ: Tạo hộ p checkbox để nhậ p vào một số r ồi lựa chọn tính nhân đôi và bình phươ ng:

checkbox Example


58/80

JavaScript 58

Value:

Action (default double):

Square

Result:


59/80

JavaScript 59

Trong script này, bạn đã thấy cách sử dụng thẻ sự kiện onClick cũng như thuộc tínhchecked là một giá tr ị kiểu Boolean có thể dùng làm điều kiện trong câu lệnh if...else

Bạn có thể thêm một checkbox tên là square vào form. Nếu hộ p này đượ c check, chươ ng

trình sẽ lấy giá tr ị của nó, nếu không, một thực thi đượ c mặc định sẽ nhân đôi giá tr ị củanó. Thẻ sự kiện onClick trong checkbox đượ c định ngh ĩ a:

( )

Khi đó nếu ngườ i dùng thay đổi một câu lệnh khác, form sẽ đượ c tính toán lại.

Để tạo ra sự mở r ộng cho checkbox. bạn có thể thay đổi hàm calculate() như sau:

function calculate(form,callingField) {

if (callingField == "result") { // if (1)

if (form.square.checked) { // if (2)

form.entry.value = Math.sqrt(form.result.value);

}

else {

form.entry.value = form.result.value / 2;

} //end if(2)

}

else {

if (form.square.checked) { // if (3)

form.result.value=form.entry.value*form.entry.value;}

else {

form.result.value = form.entry.value * 2;

} // end if (3)

} // end if (1)

}

4.1.23. PHẦN TỬ FILE UPLOAD

Phần tử này cung cấ p cho form một cách để ngườ i sử dụng có thể chỉ rõ một file đưa vàoform xử lý. Phần tử file Upload đượ c chỉ định rõ trong JavaScript bằng đối tượ ngFileUpload.

Đối tượ ng chỉ có hai thuộc tính là name và value, cả hai đều là giá tr ị xâu như các đốitượ ng khác. Không có cách thức hay thẻ file cho đối tượ ng này.

4.1.24. PHẦN TỬ HIDDEN

Phần tử hidden là phần tử duy nhất trong số tất cả các phần tử của form không đượ c hiểnthị trên Web browser. Tr ườ ng hidden có thể sử dụng để lưu các giá tr ị cần thiết để gửi tớ i

server song song vớ i sự xuất ra từ form (form submission) nhưng nó không đượ c hiển thị


60/80

JavaScript 60

trên trang. Mọi ngườ i có thể sử dụng trong JavaScript để lưu các giá tr ị trong suốt mộtscript và để tính toán không cần form.

Đối tượ ng hidden chỉ có hai thuộc tính là name và value, đó cũng là những giá tr ị xâugiống các đối tượ ng khác. Không có cách thức hay thẻ sự kiện nào cho đối tượ ng này.

4.1.25.

PHẦN TỬ PASSWORD

Đối tượ ng Password là đối tượ ng duy nhất trong các đối tượ ng của form mà khi gõ bất k ỳ ký tự nào vào cũng đều hiển thị dấu sao(*). Nó cho phép đưa vào những thông tin bí mậtnhư đăng ký mật khẩu...

Đối tượ ng Password có 3 thuộc tính giống tr ườ ng text là: defaultValue, name và value.Không giống vớ i hai phần tử ở trên, tr ườ ng Password có nhiều cách thức hơ n(focus(),

blur(), and select() ) và tươ ng ứng vớ i các thẻ sự kiện: onFocus, onBlur, and onSelect.

Phần này sẽ đượ c nói k ỹ hơ n trong đối tượ ng text.

4.1.26.

PHẦN TỬ RADIO

Đối tượ ng radio gần giống sự bật tắt checkbox khi có hai nút radio k ết hợ p thành mộtnhóm. Khi nhiều radio đượ c k ết hợ p thành một nhóm, chỉ có một nút đượ c chọn trong bấtk ỳ một thờ i điểm nào. Ví dụ dòng lệnh sau tạo ra một nhóm radio có ba nút tên là test:

1

2

3

Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT.

Có một vài thuộc tính để kiểm tra tr ạng thái hiện thờ i của một nhóm nút radio. Bảng sauhiển thị các thuộc tính và cách thức của đối tượ ng radio.

Bảng? . Các thuộc tính và cách thức của đối tượ ng radio.

Thuộc tính và cáchthức

Mô tả

checked Mô tả tr ạng thái hiện thờ i của phần tử radio (thuộc tính)

defaultChecked Mô tả tr ạng thái mặc định của phần tử (thuộc tính)

index Mô tả thứ tự của nút radio đượ c chọn hiện thờ i trong một nhóm

length Mô tả tổng số nút radio trong một nhóm

name Mô tả tên của phần tử đượ c chỉ định trong thẻ INPUT (thuộctính)

value Mô tả giá tr ị hiện thờ i của phần tử đượ c định ra trong thẻ INPUT(thuộc tính)

click() Mô phỏng một click trên nút radio (cách thức)

Cũng như checkbox, radio chỉ có một thẻ sự kiện là onClick.

Không có bất k ỳ một đối tượ ng form nào có thuộc tính index và length. Do một nhómradio gồm nhiều phần tử radio, nên chúng đượ c đặt trong một mảng các nút radio và đượ cđánh số từ 0. Trong ví dụ nhóm radio có tên test ở trên, nếu nhóm đó nằm trong một form


61/80

JavaScript 61

có tên là "testform", bạn có thể gọi tớ i nút radio thứ hai bằng tên "testform.test[1]" và cóthể kiểm tra giá tr ị của nó bằng "testform.test[1].checked"

Để minh hoạ rõ cách dùng đối tượ ng radio, ta xem ví dụ sau:

Ví dụ:

radio button Example

Value:

Action:

Double

Square

Result:


62/80

JavaScript 62

onChange="calculate(this.form,this.name);">

Trong ví dụ này, sự thay đổi từ checkbox ở trên là r ất khó nhận biết. Thay cho mộtcheckbox trong ví dụ tr ướ c, ở đây ta sử dụng hai nút radio vớ i hai giá tr ị khác nhau:double và square

Như ta đã biết có thể truy nhậ p đến các nút radio qua một mảng, do đó hai nút này có thể truy nhậ p bằng action[0] và action[1]. Bằng cách này, bạn chỉ cần thay đổi tham chiếuđến hàm calculate() từ form.square.checked thành form.action[1].checked.

4.1.27. PHẦN TỬ RESET

Sử dụng đối tượ ng reset, bạn có thể tác động ngượ c lại để click vào nút Reset. Cũng giốngđối tượ ng button, đối tượ ng reset có hai thuộc tính là name và value, và một cách thứcclick(), một thẻ sự kiện onClick.

Hầu hết những ngườ i lậ p trình khong sử dụng thẻ sự kiện onClick của nút reset để kiểmtra giá tr ị của nút này, đối tượ ng reset thườ ng dùng để xoá form.

Ví dụ sau minh hoạ cách sử dụng nút reset để xoá các giá tr ị của form.

Ví dụ:

reset Example

//SCRIPT>


63/80

JavaScript 63

4.1.28. PHẦN TỬ SELECT

Danh sách lựa chọn trong các form HTML xuất hiện menu drop-down hoặc danh sáchcuộn đượ c của các đối tượ ng có thể đượ c lựa chọn. Các danh dách đượ c xây dựng bằngcách sử dụng hai thẻ SELECT và OPTION. Ví dụ:

1

2

3

tạo ra ba thành phần của menu thả drop-down vớ i ba lựa chọn 1,2 và 3. Sử dụng thuộctính SIZE bạn có thể tạo ta một danh sách cuộn vớ i số phần tử hiển thị ở lần thứ nhất. Để

bật menu drop-down trong một menu cuộn vớ i hai thành phần hiển thị, bạn có thể sử dụngnhư sau:

1

2

3

Trong cả hai ví dụ trên, ngườ i sử dụng chỉ có thể có một lựa chọn. Nếu sử dụng thuộc tínhMULTIPLE, bạn có thể cho phép ngườ i sử dụng lựa chọn nhiều hơ n một giá tr ị trongdanh sách lựa chọn:

1

2

3

Danh sách lựa chọn trong JavaScript là đối tượ ng select. Đối tượ ng này tạo ra một vàithành phần tươ ng tự các button và radio.

Vớ i các thành phần lựa chọn, danh sách các lựa chọn đượ c chứa trong một mảng đượ cđánh số từ 0. Trong tr ườ ng hợ p này, mảng là một thuộc tính của đối tượ ng select gọi làoptions.

Cả việc lựa chọn các option và từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vào mảng option, ph�

Documents

Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02