88247697-JavaScript.ppt

MỤC TIÊU
 Mô tả về JavaScript
 Nắm bắt nền tảng cú pháp của JavaScript

JavaScript là gì?
 Với HTML chúng ta đã 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 đó được đổi tên thành JavaScipt để 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ểm tương đồng giữa Java và
JavaScipt , nhưng chúng vẫn là hai ngôn ngữ riêng biệt

JavaScript là gì?
 JavaScript là ngôn ngữ kịch bản dùng để tạo các
client-side scripts và server-side scripts.
 JavaScript làm cho việc tạo các trang Web động và tương
tác dễ dàng hơn
 JavaScript làm một ngôn ngữ kịch bản được hãng Sun
Microsystems và Netscape phát triển.
 JavaScript được phát triển từ Livescript. Của Netscape
 Các ứng dụng client chạy trên một trình duyệt như
Netscape Navigator hoặc Internet Explorer.

Các hiệu ứng và các quy tắc
của JavaScript
 JavaScript có thể tăng cường tính động và tính
tương tác của các website bằng cách sử dụng các
hiệu ứng của nó.
 Cung cấp sự tương tác người dùng
 Thay đổi nội dung động
 Xác nhận tính hợp lệ của dữ liệu
 Tương tự các ngôn ngữ khác, JavaScript cũng tuân
theo các quy tắc ngữ pháp như:
 Sử dụng quy tắt chữ hoa
 Using Pairs
 Using Spaces
 Using Comments

Các công cụ của JavaScript
và môi trường thực thi
 Các công cụ sinh mã JavaScript và giao phần
mềm có giao diện phát triển ứng dụng IDE
được sử dụng giúp tự động tạo ra các đoạn mã
JavaScript code. Một vài chức năng được sinh
mã:
 Dialog Box
 Pop – up Menu Builder
 Remotes
 Môi trường thực thi
 Các Scripting ở Client
 Java Script trên Web Server

Nhúng JavaScript vào trang web
 JavaScript có thể chèn vào một tài liệu HTML theo
những cách sau :
 Sử dụng thẻ SCRIPT
 Sử dụng một file JavaScript ở ngoài
 Sử dụng các biểu thức JavaScript trong các giá trị
thuộc tính của thẻ
 Sử dụng JavaScripttrong các trình điều khiển sự
kiện

 Khi trình duyệt gặp phải một the <SCRIPT> nào đó,
nó sẽ đọc từng dòng một cho đến khi gặp thẻ đóng
</SCRIPT>.
 Tiếp đến nó sẽ kiểm tra lỗi trong các câu lệnh
Javascript.
 Nếu gặp phải lỗi, nó sẽ cho hiển thị lỗi đó trong
chuỗi các hộp cảnh báo (alert boxes) lên màn hình.
 Nếu không có lỗi, các câu lệnh sẽ được biên dịch sao
cho máy tính có thể hiểu được lệnh đó.

 Cú pháp
<script language = “JavaScript”>
<! –
JavaScript statements;
//-->
</script>

 Thuộc tính language trong thẻ script chỉ ra ngôn ngữ
mà trình duyệt sẽ dùng để biên dịch script.
 Chúng ta cũng có thể chỉ rõ phiên bản JavaScript
nào sẽ được trình duyệt sử dụng.
 Ví dụ:
<script language = “JavaScript1.2”>

  là các thẻ chú thích.
 Những thẻ này được dùng để báo cho trình duyệt bỏ
qua các câu lệnh chứa trong nó.
 <! Là thẻ mở của thẻ chú thích, //--> là thẻ đóng.
 Các thẻ này không bắt buộc phải có, nhưng ta nên
đưa chúng vào trong các đoạn script.

 Chỉ có Netscape 2.0 và các phiên bản sau đó mới hỗ
trợ JavaScript.
 Các thẻ chú thích đảm bảo các phiên bản cũ hoặc
các trình duyệt không hỗ trợ JavaScript sẽ bỏ qua
các câu lệnh được nhúng trong tài liệu HTML.

 Ví dụ
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Xin chao cac ban!");
</SCRIPT>
</HEAD>
<BODY>
<P> Chao mung cac ban den voi the gioi cua JavaScript
</BODY>
</HTML>

 Kết quả

 Trên lý thuyết các câu lệnh JavaScript có
thể được đặt ở bất kỳ nơi nào trong tài
liệu HTML.
 Tuy nhiên, nên đặt các câu lệnh script
trong phần <head> và </head> để đảm
bảo tất cả các câu lệnh đều được đọc và
biên dịch trước khi nó được gọi từ trong
phần BODY

 Dùng file bên ngoài
 Chúng ta có thể tạo ra một file riêng chứa mã
JavaScript.
 File này có thể được liên kết với một tài liệu HTML.
 Thuộc tính SRC (source) của thẻ <SCRIPT> dùng để
chỉ ra file chứa JavaScript mà nó cần sử dụng.
 Có thể dùng tên đường dẫn tương đối và tuyệt đối
trong thuộc tính SRC.

 <script language = “JavaScript” src=”filename.js”>
 </script>
 Filename là file văn bản chứa các mã lệnh
JavaScript, tên file có phần mở rộng là “.js”.
 Nó chỉ có thể chứa các câu lệnh và các hàm
JavaScript, không thể chứa các thẻ HTML.

 Ví dụ
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" src = “vidu.js”>
</SCRIPT>
</HEAD>
<BODY>
<P> Chao mung cac ban den voi the gioi cua JavaScript
</BODY>
</HTML>
 File vidu.js:
document.write (“Xin chao cac ban!”)

 Việc thực hiện chức năng liên kết các file sẽ rất có
lợi khi chia sẻ các hàm cho nhiều tài liệu HTML.
 Trong trường hợp này, ta có thể tạo ra một file .js
với các hàm thông thường. File này được liên kết với
các tài liệu cần nó.
 Nếu muốn điều chỉnh hoặc thêm vào một vài hàm,
chỉ cần thay đổi trong một file thay vì phải thực hiện
trên nhiều tài liệu HTML

 Dùng JavaScript trong trình xử lý sự kiện
 Một sự kiện là một hành động được hỗ trợ bởi một
đối tượng.
 Một trình xử lý sự kiện là đoạn mã sẽ được thực thi
nhằm đáp trả một sự kiện.
 <TAG event handler=”JavaScript code”>
 TAG là một thẻ HTML. Event handler là tên của trình
xử lý sự kiện, và JavaScript code là một loạt các câu
lệnh JavaScript được thực thi khi sự kiện được kích
hoạt.

 Ví dụ
<HTML>
<HEAD>
<SCRIPT>
function vidu()
{
alert ("Xin chao!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button"
VALUE="Bam vao day"
onClick="vidu()">
</FORM>
</BODY>
</HTML>

Thẻ <NOSCRIPT> và </NOSCRIPT>
 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ông hỗ trợ
JavaScript.
 Khi đó trình duyệt sẽ không hiểu thẻ <SCRIPT>
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ẻ <NOSCRIPT> sẽ được bỏ
qua.

Thẻ <NOSCRIPT> và </NOSCRIPT>
 Ví dụ
<NOSCRIPT>
<B> 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
<BR>
<A HREF="http://home.netscape.com/comprd/mirror/index.html">
Hãy kích chuột vào đây để tải về phiên bản Netscape mới hơn
</A>
</BR>
</NOSCRIPT>

Biến, hằng và các kiểu dữ liệu
 Biến và phân loại biến
 Biến là một tham chiếu đến một vị trí trong bộ nhớ.
 Biến dùng để chứa các giá trị có thể thay đổi khi
script đang được thực thi.
 Sử dụng các biến như tên tượng trưng cho các giá
trị trong ứng dụng.
 Tại mỗi thời điểm thực hiện, biến có thể chứa một
giá trị mới.
 Khi muốn xem, sử dụng hay thay đổi giá trị của
biến, ta chỉ cần dùng tên của biến.

 Qui ước đặt tên biến trong JavaScript
 Tên biến phải được bắt đầu bằng một chữ cái, dấu
gạch dưới (_), hoặc một dấu đôla ($)
 Các kí tự tiếp theo có thể là chữ số (0-9) hoặc chữ
cái
 Lưu ý: JavaScript có phân biệt chữ hoa và chữ
thường, nên tên biến chứa chữ hoa và chữ thường
sẽ là khác nhau
 Ví dụ biến “tong” sẽ khác với biến “Tong”

 Khai báo biến
 Sử dụng từ khóa “var” để khai báo biến, đồng thời
cũng có thể khởi tạo giá trị cho biến ngay khi khai
báo
 Ví dụ: var A = 5;
 Cũng có thể khai báo biến bằng cách gán giá trị cho
nó mà không cần từ khóa “var”
 Ví dụ: B = 7;
 Có thể khai báo nhiều biến trên cùng một dòng bằng
cách tách tên các biến bằng dấu phẩy.

 Phạm vi của biến
 Phạm vi của biến được xác định tại vị trí mà nó được
khai báo trong script.
 Một biến được khai báo ngay phần đầu của script thì
được xem là một biến toàn cục, có thể được sử
dụng mọi nơi trong ứng dụng hiện thời.
 Nếu khai báo một biến bên trong một hàm, biến đó
được gọi là biến cục bộ, và chỉ được sử dụng bên
trong hàm đó.

 Phạm vi của biến
 Sử dụng từ khóa “var” để khai báo một biến toàn
cục là tùy ý, tuy nhiên, phải sử dụng từ khóa “var”
để khai báo một biến cục bộ.
 Có thể truy xuất các biến toàn cục đã khai báo trong
một cửa sổ hoặc một khung từ một cửa sổ hoặc một
khung khác bằng cách chỉ ra tên của cửa sổ hoặc
khung đó.

 Hằng
 Hằng là những giá trị cố định có thể được dùng
trong script.
 Giá trị của hằng không bị thay đổi trong quá trình
thực hiện script.
 Có thể tạo ra một hằng số chỉ đọc cùng với tên của
nó bằng cách sử dụng từ khóa const.
 Quy ước đặt tên cho hằng giống như cho tên biến
 Ví dụ: const prefix = ‘212’;

 Hằng
 Một hằng số không thể thay đổi giá trị qua phép gán
hoặc được khai báo lại trong khi script đang thi
hành.
 Các quy tắc về phạm vi cho các hằng số giống như
cho các biến, ngoại trừ từ khóa const luôn luôn được
yêu cầu, ngay cả các hằng số toàn cục.
 Nếu từ khóa này bị bỏ quên thì đó được xem như là
một biến.
 Lưu ý: không thể khai báo một hằng số có tên trùng
với tên hàm hoặc biến trong cùng một

 Các kiểu dữ liệu trong JavaScript
 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 cần 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ụ
<SCRIPT LANGUAGE= "JavaScript">
var fruit='apples';
var numfruit=12;
numfruit = numfruit + 20;
var temp ="There are " + numfruit + " "+ fruit + ".";
document.write(temp);
</SCRIPT>

 Kết quả

 Các kiểu dữ liệu trong JavaScript
 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ó các kiểu dữ liệu như sau:
 Number (số nguyên hoặc số thực)
 Logical (hay Boolean)
 String
 Null

Các kiểu dữ liệu trong JavaScript
 Kiểu số nguyên
 Các số nguyên có thể được biểu diễn trong hệ thập
phân (cơ số 10), hệ thập lục phân (cơ số 16) và hệ
bát phân (cơ số 8)
 Một chữ số nguyên thập phân gồm có một dãy các
số mà không có số 0 đứng đầu.
 Một số 0 đứng đầu trong một chữ số nguyên cho
biết nó được biểu diễn trong hệ bát phân
 Nếu đứng đầu một chữ số nguyên là 0x (hoặc 0X)
chỉ ra nó được biểu diễn trong hệ thập lục phân

 Số nguyên thập phân bao gồm các số từ 0 đến 9.
 Số nguyên thập lục phân có thể bao gồm các số từ 0
đến 9 và các chữ cái từ a đến f và A đến F.
 Số nguyên bát phân bao gồm các số từ 0 đến 7.
 Các chữ số nguyên bát phân không được tán thành và
đã bị loại khỏi chuẩn ECMA-262 ấn bản 3.
 JavaScript vẫn hỗ trợ các chữ số nguyên bát phân để
tương thích với các phiên bản trước.

 Ví dụ về số nguyên:
42
0xFFF
-345

 Kiểu số thực (kiểu số dấu chấm động)
 Kiểu số thực có thể có các thành phần sau:
 Phần nguyên thập phân (là một số nguyên thập
phân)
 Một dấu chấm thập phân (“.”)
 Phần dư (là một số thập phân khác)
 Phần mũ

 Trong đó phần số mũ là một chữ “e” hay “E”, theo sau
là một số nguyên, có thể được đánh dấu (được đặt
trước bởi dấu “+” hoặc “-”).
 Một số dấu chấm động phải có ít nhất một con số và
một dấu chấm thập phân hoặc “e” (hay “E”).

 Ví dụ về số thực:
 3.114
 -3.1E12
 .1e12
 2E-12

 Kiểu Logical (hay 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 chuỗi chữ gồm không hoặc nhiều ký tự được đặt
trong các dấu nháy kép (“”) hoặc nháy đơn (‘’).
 Một chuỗi phải được phân định bởi các dấu trích dẫn
cùng kiểu, tức là cả hai dấu đều phải là dấu nháy đơn
hoặc đều là dấu nháy kép

 Ví dụ về các chuỗi:
 “Hello”
 ‘Error!’
 “12345”
 Ta có thể gọi bất cứ một phương thức nào của đối tượng
String trên một giá trị chuỗi chữ - JavaScript sẽ tự động
chuyển đổi chuỗi chữ thành một đối tượng String tạm,
gọi phương thức được yêu cầu, sau đó loại bỏ đối tượng
String tạm.

 Khi dùng chuỗi, ngoài các ký tự thông thường, ta cũng có
thể chèn các ký tự đặc biệt vào chuỗi đó. Các ký tự đặc
biệt sẽ thực hiện một công việc cụ thể nào đó.
Ví dụ: “one line n another line”
 Trong ví dụ trên, dấu “” kết hợp với ký tự “n” sẽ mang ý
nghĩa là sang dòng. Như vậy khi thực hiện câu lệnh trên
thì kết quả sẽ hiển thị là:
one line
another line

Ký tự Ý nghĩa
b Phím lùi (Backspace)
f Sang trang mới (Form feed)
n Sang dòng mới (new line)
r Đưa con trỏ về đầu dòng hiện tại
t Cách một khoảng Tab (Tab)

 Ngoài ra, có thể chèn một số ký tự đặc biệt khác
trong một chuỗi bằng cách đặt trước nó dấu
backslash ().
 Đây được xem là ký tự thoát (escaping character).
 Dấu backslash được dùng để bỏ qua ý nghĩa sử dụng
của ký tự đứng sau nó.
 Ví dụ nếu muốn hiển thị các ký tự ‘, “ hay trong
chuỗi thì phải đặt dấu backslash ở phía trước, đó là ’,
” và .

 Kiểu null
 Kiểu null chỉ có duy nhất một giá trị: null.
 Null mang ý nghĩa là không có dữ liệu, nó thực hiện
chức năng là giữ chỗ trong một biến với ý nghĩa là ở
đó không có hữu dụng gì.
 Số 0 hay một xâu rỗng và null là các giá trị khác nhau

Toán tử và biểu thức
 Các toán tử trong JavaScript
 Toán tử gán
 Toán tử số học
 Toán tử so sánh
 Toán tử logic
 Toán tử thao tác trên bit
 Toán tử chuỗi

Các toán tử trong JavaScript
 Toán tử gán
 Toán tử gán (dấu =) dùng để 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.
 Ví dụ x = y nghĩa là lấy giá trị của y gán cho x.
 Bên cạnh đó, JavaScript còn hỗ trợ một số kiểu toán tử
rút gọn với ý nghĩa được trình bày trong bảng sau:

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

 Các toán tử số học đòi hỏi các toán hạng là các giá trị
số (các chữ hoặc các biến) và trả về một giá trị số duy
nhất.
 Các toán tử số học tiêu chuẩn là cộng (+), trừ (-), nhân
(*) và chia (/).

 Các toán tử này làm việc giống như trong hầu hết các
ngôn ngữ lập trình khác, ngoại trừ toán tử chia (/) trả
về phép chia dấu chấm động, tức là phép chia không
cắt xén kết quả trả về như trong C hoặc Java
 Ví dụ: 1/2 sẽ trả về kết quả là 0.5 trong JavaScript,
nhưng trong C hoặc Java thì sẽ trả về kết 0.
 Ngoài ra, JavaScript còn cung cấp một số toán tử số
học khác như toán tử %, ++, -- và -.

Toán tử Mô tả Ví dụ
+ Phép cộng a = 5+6 // a = 11
- Phép trừ a = 7- 2 // a = 5
* Phép nhân a = 5*6 // a = 30
/ Phép chia a = 10+5 // a = 2
%
Phép chia lấy phần dư.
Kết quả trả về là số dư
kiểu interger trong phép
chia hai toán hạng.
a = 10%3 // a = 1

++
Toán tử nhận một toán hạng,
tăng giá trị của toán hạng này
lên một đơn vị. Giá trị trả về
tùy thuộc vào toán tử ++ nằm
trước hay nằm sau toán hạng
x = 5
a = ++x // a=6,
x=6
b = x++ // b=5,
x=6
--
toán tử nhận một toán hạng,
giảm giá trị của toán hạng này
xuống một đơn vị. Giá trị trả về
tùy thuộc vào toán tử -- nằm
trước hay nằm sau toán hạng
x = 5
a = --x // a=4,
x=4
b = x-- // b=5,
x=4
-
Toán tử trả về giá trị đối (phủ
định) của toán hạng.
a =5 thì -a = -5

 Chú ý
 Các toán tử +, -, *, /, % được gọi là các toán tử số học
hai ngôi, toán tử ++, --, - được gọi là toán tử số học
một ngôi, có nghĩa là nó chỉ có tác dụng với một toán
hạng đi kèm
 Nếu toán tử ++ hay -- kết hợp với một toán tử khác, ví
dụ như kết hợp với toán tử gán chẳng hạn, thì kết quả
trả về sẽ là khác nhau phụ thuộc vào vị trí xuất hiện
trước hay sau của ++ hay -- với tên biến, có nghĩa là y
= ++x sẽ cho ra kết quả khác với y = x++. Nếu ++
hay -- đứng trước x thì x sẽ được tăng hoặc giảm một
đơn vị trước khi giá trị x được gán cho y. Nếu ++ hay -

 JavaScript có thể chèn vào một tài liệu HTML theo
những cách sau :
 Sử dụng thẻ SCRIPT:
<script language="JavaScript">

</script>
 Sử dụng một file JavaScript ở ngoài
<script language="JavaScript" src="filename.js">
</script>
 Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ
 Sử dụng JavaScripttrong các trình điều khiển sự kiện

Chương trình dùng Msg box
và phương thứcwrite
Ví dụ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
confirm ("Are you Sure?");
alert("OK");
document.write(" Thank You !");
</SCRIPT>
</HEAD>
</HTML>
Kết quả:

Biến
 Biến là một vật chứa tham chiếu đến một vị trí ở bộ nhớ
máy tính
 Nó được sử dụng để giữ giá trị và có thể thay đổi trong
khi kịch bản thực thi
 Các biến tuân theo quy tắc đặt tên.
 Một biến được khai báo sử dụng từ khoá ‘var’.
ví dụ: var A = 10;
 Các biến có một phạm vi được xác định trong khi chúng
khai báo trong script.
 Biến toàn cục
 Biến cục bộ
 Nguyên dạng là các giá trị không đổi được dùng trong
script.

Các kiểu dữ liệu
 JavaScript có một tập các kiểu dữ liệu.
 Số (number)
 Giá trị logic (boolean)
 Chuỗi (String)
 Giá trị rỗng Null
 JavaScript phân biệt chữ hoa, chữ thường.
 Trong JavaScript, hai biến khác kiểu có thể kết hợp với nhau.
ví dụ: A = “ This apple costs Rs.” + 5
sẽ có kết quả là một chuỗi với giá trị là "This apple costs Rs. 5".

Kiểu dữ liệu – Ví dụ
Ví dụ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
var A = "12" + 7.5;
document.write(A);
</SCRIPT>
</HEAD>
</HTML>
Kết quả:

Web Page Programming
Các kiểu nguyên dạng (literal)
 Integer – là các hệ thống số thập phân, thập
lục phân và nhị phân.
 Floating- point(số thực) – Các số thập phân
có phần thập phân sử dụng “e” or “”E”và theo
sau là các số nguyên.
 String – là một chuỗi rỗng hay chuỗi ký tự
được đặt trong cặp ngoặc đơn hoặc ngoặc
kép
 Boolean–Kiểu này có hai giá trị: True or False.
 null - Kiểu null chỉ có một giá trị: null. Null
hàm ý không có dữ liệu.

Các toán tử
 Các toán tử xử lý một hoặc nhiều biến hoặc các giá trị
(các toán hạng) và trả lại giá trị kết quả.
 JavaScript sử dụng cả hai toán tử một ngôi và hai ngôn.
 Các toán tử được phân loại phụ thuộc quan hệ chúng
thực hiện như:
 Toán tử so sánh
 Toán tử logic
 Toán tử chuỗi
 Toán tử lượng giá
 Mức ưu tiên của toán tử

Toán tử số học
 Các toán tử số học lấy hai toán tử (hoặc
nguyên dạng hoặc các biến) và trả về một giá
trị số.
 Toán tử số học gồm:
 Cộng (+)
 Trừ (-)
 Nhân (/)
 Chia (%)
 Toán tử tăng (++)
 Toán tử giảm (- -)
 Toán tử phủ định (-)

Toán tử so sánh
 Toán tử so sánh so sánh các toán hạng và trả về giá trị
logic dựa trên sự so sánh có đúng hay không.
 Toán tử so sánh bao gồm:
 So sánh bằng (==)
 So sánh khác (!+)
 So sánh lớn hơn (>)
 So sánh lớn hơn hoặc bằng (>=)
 So sánh nhỏ hơn (<)
 So sánh nhỏ hơn hoặc bằng (<=)

Các toán tử logic
 Các toán tử logic dùng để kết hợp các so sánh trong
một biểu thức điều kiện.
 Bao gồm:

Ví dụ về toán tử logic
Ví dụ:
<HTML>
<HEAD>
var x = 10;
var y = 5;
alert ("The value of x is "
+ x + "The value of y is
" + y);
alert("x AND y = " + (x && y));
alert("x OR y = " + (x || y));
alert("NOT x = " + (!x));
</SCRIPT>
</HEAD>
</HTML>
Kết quả:

Toán tử chuỗi
 Toán tử chuỗi lấy các toán tử chuỗi như các toán hạng
và tạo một chuỗi mới, kết quả là một chuỗi kết hợp các
chuỗi con.
Ví dụ:
x = ‘yellow’;
y = ‘green’;
z = x + y + ‘white’; which means z is
“yellowgreenwhite”
w = y + 9, which means w is “green9”

Toán tử lượng giá
 Các toán tử chỉnh bao gồm:
 Toán tử điều kiện
(condition) ? trueVal : falseVal
Gán một giá trị xác định vào một biến nếu điều kiện đúng, trường
hợp còn lại thì gán vào biến còn lại.
ví dụ.
status = (age >= 18) ? "adult" : "minor"
 Toán tử Typeof
Toán tử typeof trả về một chuỗi chỉ ra kểu của toán hạng.
ví dụ.
var x = 5;
document.write(typeof(x));

Mức ưu tiên của toán tử
 Khi có nhiều toán tử được tính toán trong một biểu
thức, mức ưu tiên của toán tử xác định thứ tự thực
hiện của toán tử trong biểu thức đó.
 Bảng sau liệt kê mức ưu tiên của các toán tử từ thấp
đến cao:

Biểu thức
 Biểu thức được dùng để xử lý và tính toán các biến trong
các ngữ cảnh khác nhau.
 Một biểu thức là một tập giá trị hợp lý các nguyên dạng,
các biến, và các toán tử và trả về một giá trị đơn.
 Các biểu thức của JavaScript bao gồm:
 Arithmetic: tính toán một số
 Logical: tính toán một giá trị logic
 String: tính toán một chuỗi
 Các biểu thức kết hợp các biến và các nguyên dạng
thông qua các toán tử.

Biểu thức quy tắc
 Một biểu thức quy tắc là một kiểu được xác định trong việc tìm
kiếm tương ứng các ký tự kết hợp của một chuỗi.
 Các biểu thức quy tắc có thể dùng để tìm kiếm các mẫu ký tự
trong một chuỗi nhập vào từ người sử dụng.
 Biểu thức quy tắc bao gồm:
 Các mẫu đơn giản
 Các ký tự đơn giản và ký tự đặc biệt
 Các biểu thức quy tắc có thể được tạo bằng một trong hai cách:
 Sử dụng khởi tạo đối tượng
 Gọi hàm khởi tạo của đối tượng RegExpt

Sử dụng biểu thức quy tắc
 Các phương thức sử dụng trong biểu thức quy tắc bao
gồm:
 Exec, Test, Match, Search, Replace, Split
 Cú pháp dùng phương thức:
objectname.method = function_name
 Cú pháp gọi phương thức trong ngữ cảnh của đối
tượng là:
 objectname.methodname(parameters)

Ví dụ Biểu thức quy tắc
Ví dụ:
<HTML>
<HEAD>
re = /Time/
str = re.test ("Time and Tide wait
for none");
window.alert(str);
</SCRIPT>
</HEAD>
</HTML>
Kết quả:

Mảng
 Khái niệm về mảng
 Mảng được dùng để lưu một tập hợp các biến có
cùng tên.
 Chỉ số của mảng dùng để phân biệt các biến này.
 Trong JavaScript, chỉ số của mảng bắt đầu từ 0
 JavaScript không có kiểu dữ liệu mảng tường
minh. Nếu muốn sử dụng mảng, có thể sử dụng
đối tượng Array sẵn có và các phương thức để làm
việc với các mảng trong ứng dụng.

Mảng
 Khái niệm về mảng
 Đối tượng Array có các phương thức để thao tác
mảng theo nhiều cách khác nhau, như liên kết, đổi
chiều, và sắp xếp chúng.
 Đối tượng Array có một thuộc tính để xác định
chiều dài mảng và các thuộc tính khác sử dụng với
các biểu thức regular.
 Một mảng được định nghĩa là một tập thứ tự các
giá trị được tham khảo tới bằng tên và chỉ mục
của nó.

Mảng
 Tạo mảng
 Cú pháp:
arrayObjectName=new
array(element0,element1,…,elementN)
 hoặc:
arrayObjectName=new Array(arrayLength)

Mảng
 Tạo mảng
 arrayObjectName: tên của đối tượng mới hoặc
thuộc tính của đối tượng có sẵn. ArrayObjectName
là tên của đối tượng mảng mới.
 element0, element1, …, elementN là danh sách
các giá trị cho các phần tử của mảng. Mảng được
khởi tạo với các giá trị cụ thể bằng các phần tử
của nó, và thuộc tính length của mảng được thiết
lập bằng số các đối số.
 arrayLength là độ dài khởi tạo của mảng.

Mảng
 Tạo mảng
 Ví dụ, mã nguồn sau đây tạo ra một mảng có năm
phần tử:
billingMethod = new Array(5).
 Các mảng chữ cũng là các đối tượng Array. Ví dụ sau
là một mảng chữ:
coffees = [“French Roast”, “Columbian”, “Kona”]

Mảng
 Gán giá trị cho các phần tử mảng
emp[0] = “Casey Jones”
emp[1] = “Phil Lesh”
emp[2] = “August West”
Ta cũng có thể gán giá trị cho một mảng ngay khi
tạo ra nó:
myArray = new Array (“Hello”, myVar, 3.14159)

Mảng
<HTML>
<HEAD>
<SCRIPT>
myArray = new Array(3);
myArray[0] = "Ha Noi";
myArray[1] = "TP Da Nang";
myArray[2] = "TP Ho Chi Minh";
document.writeln(myArray[0] + "<BR>");
</SCRIPT>
</HEAD>
</HTML>

Mảng
 Truy cập đến các phần tử mảng
 Truy cập tới các phần tử của mảng bằng cách sử
dụng số thứ tự (hay chỉ số) của phần tử đó.
 Ví dụ: myArray = new Array (“Wind”, “Rain”)
 Tham khảo tới phần tử thứ nhất của mảng bằng
cách dùng myArray[0] và phần tử thứ hai của
mảng bằng myArray[1].

Mảng
 Truy cập đến các phần tử mảng
 Lưu ý: Chỉ mục của các phần tử bắt đầu bằng số
0, nhưng độ dài của mảng phản ánh số phần tử
của mảng.
 Ngoài cách dùng chỉ số của phần tử mảng, có thể
dùng cách chỉ ra tên của phần tử để truy cập đến
phần tử đó.
 Ví dụ: myArray[“Rain”].

Các phương thức của mảng
concat Nối hai mảng và trả về một mảng mới.
join Kết hợp tất cả các phần tử của một mảng thành một
chuỗi.
pop Gỡ bỏ phần tử cuối cùng của một mảng và trả về
phần tử đó.
push Bổ sung một hoặc nhiều phần tử vào cuối một
mảng và trả về độ dài mới của mảng.
reverse Hoán vị các phần tử của một mảng: Phần tử mảng
đầu tiên trở thành phần tử cuối cùng và ngược lại
sort Sắp xếp các phần tử của một mảng

Các câu lệnh điều điện
 Câu lệnh điều kiện được dùng để kiểm tra
điều kiện. Kết quả xác định câu lệnh hoặc
khối lệnh được thực thi.
 Các câu lệnh điều kiện bao gồm:
 If….. Else
 Switch

LỆNH LẶP
 Cấu trúc điều khiển lặp trong chương trình là các lệnh
lặp.
 Các kiểu lệnh lặp bao gồm:
 For
 Do …. While
 While
 Break & continue
 For….in
 with

Các câu lệnh vòng lặp
 Câu lệnh do..while
 Câu lệnh do…while lặp cho tới khi một điều kiện cụ
thể có giá trị là false.
 Cú pháp:
do {
statement
} while (condition)

 Câu lệnh do..while
 Câu lệnh thi hành statement một lần trước khi điều kiện
được kiểm tra.
 Nếu condition là true, thì câu lệnh được thi hành một lần
nữa.
 Tại lúc kết thúc của mỗi lần thi hành vòng lặp, điều kiện
được kiểm tra. Khi điều kiện là false, thì thi hành ngừng và
điều khiển được chuyển tới câu lệnh kế tiếp câu lệnh
do…while.

 Ví dụ: Trong ví dụ sau, vòng lặp do…while làm đi
làm lại cho đến khi biến i không còn nhỏ hơn 5 nữa.
do {
i += 1;
document.write (i);
} while (i<5)

 Câu lệnh while
 Lệnh while được dùng để thực hiện một khối lệnh chừng nào
điều kiện là true.
 Nếu có nhiều câu lệnh thực hiện trong thân của vòng lặp, phải
sử dụng cặp dấu ngoặc móc ({}) để chứa các câu lệnh đó.
 Khác biệt chính giữa vòng lặp while và do…while là các lệnh
trong thân vòng lặp while có thể không được thực hiện một
lần nào vì nó kiểm tra điều kiện trước, và có thể ngay từ ban
đầu điều kiện đã là false.

 Cú pháp:
while (condition) {
statement;
}
 Nếu điều kiện là false, thì các câu lệnh trong vòng
lặp dừng thi hành và điều khiển được chuyển tới
câu lệnh sau vòng lặp.

 Việc kiểm tra điều kiện xảy ra trước khi các câu lệnh trong
vòng lặp được thi hành.
 Nếu điều kiện trả về là true, thì các câu lệnh trong vòng lặp
được thi hành và điều kiện được kiểm tra lại một lần nữa.
 Nếu điều kiện trả về là false, thì dừng thi hành và điều khiển
được chuyển tới câu lệnh kế tiếp câu lệnh while

 Ví dụ: Vòng lặp while sau đây lặp đi lặp lại trong
khi n nhỏ hơn 3:
n = 0;
x = 0;
while (n <3){
n++;
x += n;
}

Các lệnh chuyển điều khiển trong vòng lặp
 Câu lệnh label
 Một label bao gồm một câu lệnh với một danh hiệu
cho phép tham khảo tới nó ở một nơi khác trong
chương trình.
 Cú pháp:
label:
statement
 Giá trị của label có thể là bất cứ danh hiệu nào của
JavaScript nhưng không phải là từ khóa
 statement có thể là bất cứ câu lệnh nào.

 Ví dụ: Trong ví dụ này, nhãn markLoop chỉ ra một
vòng lặp while.
markLoop:
while (theMark == true) {
doSomething ();
}

 Câu lệnh break
 Lệnh break dùng để kết thúc việc thực thi của một
câu lệnh.
 Khi sử dụng trong một vòng lặp, lệnh break làm
dừng ngay vòng lặp đó và không thực hiện thêm
nữa.
 Sử dụng câu lệnh break để thoát khỏi vòng lặp, câu
lệnh switch hoặc câu lệnh label.

 Khi sử dụng break mà không có một label, nó thoát
khỏi vòng lặp while, do…while, for hoặc câu lệnh
switch ngay lập tức và chuyển điều khiển tới câu
lệnh theo sau.
 Khi sử dụng break với một nhãn (label), nó nhảy tới
câu lệnh được gán nhãn cụ thể.

 Cú pháp của câu lệnh break như sau:
1. break
2. break label
 Dạng thứ nhất của cú pháp thoát ngay ra khỏi
vòng lặp hoặc câu lệnh switch; dạng thứ hai của
cú pháp nhảy tới câu lệnh có label đính kèm.

 Ví dụ: Ví dụ sau đây lặp đi lặp lại thông qua các
phần tử trong một mảng cho tới khi nó tìm thấy chỉ
số của một phần tử mà giá trị của nó là theValue:
for (i = 0; i < a.length; i++) {
if (a[i] = theValue)
break;
}

 Ví dụ: Hàm sau có câu lệnh break chấm dứt vòng
lặp while khi e là 3, và sau đó trả về giá trị 3*e.
function testBreak (x) {
var i = 0;
while (i<6) {
if (i == 3)
break;
i++;
}
return i*x;
}

 Câu lệnh continue
 Continue dừng ngay lần lặp hiện tại và quay lại kiểm
tra điều kiện để thực hiện lần lặp tiếp theo.
 Continue có thể được sử dụng để khởi động lại một
câu lệnh while, do…while, for hoặc câu lệnh label
 Cú pháp của câu lệnh continue như sau:
continue
continue label

 Câu lệnh continue
 Khi sử dụng câu lệnh continue mà không có label,
thì nó dừng lần lặp hiện tại của câu lệnh while,
do…while, hoặc for và tiếp tục thi hành vòng lặp ở
lần lặp tiếp theo.
 Trái với câu lệnh break, continue không kết thúc sự
thi hành của toàn bộ vòng lặp.
 Trong vòng lặp while, nó nhảy ngược trở lại phần điều
kiện.
 Trong vòng lặp for, nó nhảy tới phần incrementExpression.
 Khi sử dụng continue với một label, thì nó tiếp tục
với câu lệnh lặp được chỉ ra với label đó.

 Ví dụ: Ví dụ sau trình bày vòng lặp while với câu
lệnh continue thi hành khi giá trị của i bằng 3.
i = 0;
n = 0;
while (i<5) {
i++;
if (i == 3)
continue;
n+=i;
}

Các lệnh thao tác trên đối tượng
 Câu lệnh for…in
 Câu lệnh for…in lặp đi lặp lại một biến chỉ định trên tất cả các
thuộc tính của một đối tượng.
 Với mỗi thuộc tính riêng, JavaScript thực thi các câu lệnh có
thể. Ví dụ sử dụng câu lệnh for…in để thực hiện một khối các
câu lệnh cho mỗi phần tử của mảng.
 Cú pháp:
for (variable in object) {
statements;
}

 Ví dụ:
<HTML>
<HEAD>
<TITLE> Datatype Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
color = new Array ("red", "blue", "green");
var record = "color";
for (var prop in color){
record += prop + "=" + color[prop] + "<BR>"
}
record += "<BR>"
document.write (record)
</SCRIPT>
</HEAD>
</HTML>

 Câu lệnh with
 Câu lệnh with thiết lập đối tượng mặc định cho một tập hợp
các câu lệnh.
 JavaScript tìm kiếm bất cứ tên tuyệt đối nào nằm trong tập
hợp các câu lệnh để xác định xem các tên này có là các thuộc
tính của đối tượng mặc định hay không.
 Nếu một tên tuyệt đối so khớp với một thuộc tính, thì thuộc
tính được sử dụng nằm trong câu lệnh; nếu không thì một biến
cục bộ hoặc toàn cục được sử dụng.
 Cú pháp:
with (object) {
statements;
}

 Ví dụ: Câu lệnh with sau đây cho thấy đối tượng Math
là đối tượng mặc định. Các câu lệnh theo sau câu lệnh
with tham khảo tới thuộc tính PI và các phương thức
cos và sin mà không chỉ rõ một đối tượng. JavaScript
thừa nhận đối tượng Math cho các tham khảo này.
var a, x, y;
var r =10
with (Math) {
a = PI * r * r;
x = r * cos (PI);
y = r * sin (PI/2);
}

Bài tập thực hành
 Sử dụng prompt cho phép người dùng nhập tên vào,
sau đó hiển thị câu chào “Xin chao …..”. Trong đó …. là
tên vừa nhập.
 Viết chương trình cho phép người dùng nhập vào hai số
songuyen1 và songuyen2, kiểm tra xem songuyen1 có
chia hết cho songuyen2 không, hiện thông báo tương
ứng.
 Viết chương trình nhập vào ba con số, tìm số lớn nhất
trong ba số này.
 Viết chương trình cho phép người dùng nhập vào 1
năm, kiểm tra năm đó có phải là năm nhuận hay không

 Viết chương trình xếp loại học viên theo điểm số
nguyên như sau:
 Nhập điểm từ bàn phím (dùng prompt).
 In ra thông báo xếp loại tương ứng với điểm như sau:
 Nếu điểm là 9, 10 thì xếp loại giỏi.
 Nếu điểm là 7, 8 thì xếp loại khá.
 Nếu điểm là 5, 6 thì xếp loại trung bình.
 Nếu điểm là 0, 1, 2, 3, 4 thì xếp loại yếu.
 Nếu điểm <0 hoặc điểm>10 thì thông báo điểm
nhập vào không hợp lệ.

 Viết chương trình tính tích các số lẻ từ 1 đến 300.
 Viết chương trình cho phép người dùng nhập vào hai
số (x và n). Tính xn. Nếu xn là một số chẵn thì hiển thị
giá trị của xn màu xanh, nếu là số lẻ thì hiển thị màu
đỏ

Hàm
 JavaScript có sẵn các hàm đinh nghĩa trước
dùng trong script.
 Một vài hàm định nghĩa trước trong JavaScript
bao gồm:
 Hàm eval
 Hàm isNaN
 Hàm do người dùng tự tạo
function funcName(argument1,argument2,etc)
{ statements; }
 Gọi hàm
 Câu lệnh Return

Hàm
 Khái niệm về hàm
 Hàm là một trong những khối cơ bản được xây dựng trong
JavaScript.
 Một hàm trong JavaScript khá giống với một thủ tục hay
“chương trình con” trong ngôn ngữ lập trình.
 Một hàm được định nghĩa là một tập các câu lệnh, thực hiện
một nhiệm vụ cụ thể.
 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ề

Hàm
 Khái niệm về hàm
 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 đó.
 JavaScript hỗ trợ nhiều hàm định nghĩa sẵn mà chúng ta sẽ
sử dụng trong các script.
 Ngoài ra, người dùng có thể tự định nghĩa các hàm khác để
sử dụng.

Hàm
 Các thao tác trên hàm
 Tạo hàm
 Thao tác này sử dụng cho các hàm tự định nghĩa.
 Để sử dụng một hàm, đầu tiên ta phải tạo ra, hay còn gọi
là định nghĩa hàm, sau đó script có thể gọi nó.
 Định nghĩa một hàm là một quá trình khai báo tên của
hàm và các lệnh sẽ được thực thi khi gọi hàm.

Hàm
 Các thành phần của một hàm gồm có:
 Từ khóa function
 Tên hàm
 Danh sách các đối số của hàm, nằm trong các dấu ngoặt đơn
() và được phân cách bởi các dấu phẩy (,)
 Các câu lệnh JavaScript định nghĩa hàm, nằm trong cặp dấu
ngoặc móc {}.
 Các câu lệnh trong một hàm có thể bao gồm các lệnh gọi
đến các hàm khác đã định nghĩa trong ứng dụng hiện hành.

Hàm
 Cú pháp của một hàm như sau:
function functionName (argument1, argument2, …)
{
statements;
}
 Lưu ý: Trong JavaScript, các hàm không thể lồng nhau.
Có nghĩa là một hàm không thể được định nghĩa bên
trong thân một hàm khác.

Hàm
function myFunc(theObject) {
theObject.make = “Toyota”
}
mycar = {make:”Honda”, model:”Accord”,year:1998};
x = mycar.make; // Trả về Honda
myFunc(mycar); // Truyền đối tượng mycar cho hàm
y = mycar.make; // Trả về Toyota (thuộc tính bị thay
đổi bởi hàm)

Hàm
function map(f,a) {
var result = new Array;
for (var i = 0; i != a.length; i++)
result[i] = f(a[i]);
return result;
}
Việc gọi:
map(function(x){return x * x * x },[0, 1, 2, 5, 10]);
Trả về giá trị: [0, 1, 8, 125, 1000].

Hàm
 Gọi hàm
 Việc gọi hàm thực tế là thực hiện các hành động
cụ thể cùng với các tham biến xác định.
 Như vậy, để thực thi một hàm, ta phải gọi nó. Để
gọi một hàm ta chỉ ra tên hàm và danh sách các
tham số nếu có.
 Ví dụ, nếu chúng ta định nghĩa hàm square, ta có
thể gọi nó như sau:
square (5)

Hàm
function factorial (n) {
if ((n == 0) || (n = 1))
return 1
else {
var result = (n * factorial(n -1));
return result
}
}

Hàm
 Câu lệnh return
 Câu lệnh này được dùng để trả về một giá trị.
 Dùng lệnh return trong một hàm là không bắt
buộc vì không phải tất cả các hàm đều trả về một
giá trị cụ thể.
 Cú pháp:
return value;
hoặc:
return (value);

Hàm
<script language="javascript">
function testreturn(x){
var i=0;
while (i<6)
{
if (i ==3)
break;
i++;
}
document.write(i*x);
return (i*x);
}
</script>
</HEAD>
<BODY>
<script>
testreturn(4);
</script>
</BODY>
</HTML>

Một số hàm thông dụng được hỗ trợ bởi JavaScript
 Hàm eval
 Hàm isFinite
 Hàm isNaN
 Hàm parseInt và parseFloat
 Hàm Number và String

 Hàm eval
 Dùng để đánh giá một chuỗi mà không cần tham
chiếu đến bất kì một đối tượng cụ thể nào.
 Cú pháp:
eval (string)
 Với string là chuỗi cần được đánh giá. Chuỗi này
có thể là một biểu thức JavaScript, một câu lệnh,
hay một nhóm các câu lệnh.
 Trong biểu thức có thể bao gồm các biến và thuộc
tính của một đối tượng.

 Hàm eval
 Nếu chuỗi đại diện cho một biểu thức thì hàm eval
định giá trị biểu thức đó.
 Nếu đối số đại diện cho một hoặc nhiều câu lệnh
JavaScript, thì hàm eval thực hiện các câu lệnh
này.
 Không dùng hàm eval để định giá trị một biểu thức
số học; JavaScript định giá trị các biểu thức số học
một cách tự động.

 Hàm isFinite
 Hàm isFinite định giá trị một đối số để xác định
xem nó có phải là một số hữu hạn hay không.
 Cú pháp:
isFinite(number)
 Với number là số được định giá trị.
 Nếu đối số là NaN, dương vô cùng hoặc âm vô
cùng, phương thức này trả về false, ngoài ra nó
trả về true.

 Đoạn mã nguồn sau kiểm tra đối số
ClientInput để xác định xem nó có phải là
số hữu hạn không:
if (isFinite(ClientInput) == true)
{
/* các bước cụ thể*/

 Hàm isNaN
 Hàm isNaN định giá trị một đối số để xác định xem
nó có phải là “NaN” (Not a Number) hay không.
 Cú pháp:
isNaN(testValue)
 Với testValue là giá trị bạn muốn định giá trị.
 Các hàm parseInt và parseFloat trả về “NaN” khi
chúng định giá trị một giá trị không phải là một số.
 Hàm isNaN trả về true nếu nó được truyền giá trị
“NaN” và ngược lại là false.

 Đoạn mã nguồn sau định giá trị floatValue để xác
định xem nó có phải là một số hay không và sau đó
gọi một thủ tục phù hợp:
floatValue = parseFloat (toFloat)
if (isNaN (floatValue)) {
notFloat()
}
else {
isFloat()
}

Các đối tượng cơ bản trong JS

Mục tiêu bài học
 Làm việc trên các đối tượng cơ bản
 Sử dụng các thuộc tính và phương thức của
đối tượng

Đối tượng
 Thuộc tính (biến) dùng để định nghĩa đối tượng và
các phương thức (hàm) tác động tới dữ liệu đều nằm
trong đối tượng.
 Ví dụ: một chiếc xe hơi là một đối tượng. Các thuộc
tính của nó là cấu tạo, kiểu dáng và màu sắc. Hầu
hết các chiếc xe hơi đều có một vài phương thức
chung như go(), brake(), reverse().

Thuộc tính và phương thức
 Để truy cập thuộc tính của đối tượng, chúng
ta phải chỉ ra tên đối tượng và thuộc tính của
nó:
objectName.propertyName
 Để truy cập phương thức của đối tượng,
chúng ta phải chỉ ra tên đối tượng và thuộc
tính của nó:
objectName.method()

Cách dùng đối tượng
 Khi tạo trang web, chúng ta cần chèn:
 Các đối tượng trình duyệt
 Các đối tượng có sẵn (thay đổi phụ thuộc vào
ngôn ngữ kịch bản được sử dụng)
 HTML elements
 Chúng ta cũng có thể tạo ra các đối tượng để
sử dụng theo yêu cầu của mình.

Cây phân cấp đối tượng
Đối tượng của trình duyệt
Đối tượng kịch bản
Phần tử HTML

Câu lệnh this
 Câu lệnh ‘this’ không chỉ là một thuộc tính nội tại.
 Giá trị của nó chỉ ra đối tượng hiện hành và có thể có
các thuộc tính chuẩn chẳng hạn như tên, độ dài, và
giá trị được áp dụng phù hợp.

Câu lệnh for . . . in
 Câu lệnh For...in được dùng để lặp mỗi thuộc
tính của đối tượng hoặc mỗi phần tử của một
mảng.
 Cú pháp:
for (variable in object)
{ statements; }

Câu lệnh with
 Câu lệnh with được dùng để thực thi tập hợp
các lệnh mà các lệnh này dùng các phương
thức của cùng một loại đối tượng.
 thuộc tính được gán cho đối tượng đã được
xác định trong câu lệnh with.
 Cú pháp:
with (object) { statements; }

Toán tử new
 Toán tử new được dùng để tạo ra một thực
thể mới của một loại đối tượng
 Đối tượng có thể có sẵn hoặc do người dùng
định nghĩa
 objectName = new objectType (param1
[,param2] ...[,paramN])
Trong đó:
objectName là tên của thực thể đối tượng mới.
ObjectType là một hàm quyết định loại của đối tượng. Ví dụ Array.
Param[1, 2, . . ] là các giá trị thuộc tính của đối tượng.

Hàm eval
 Hàm eval được dùng để đánh giá một chuỗi
mã lệnh mà không cần tham chiếu đến bất
cứ đối tượng cụ thể nào.
 Chuỗi có thể là một biểu thức JavaScript, một
câu lệnh hoặc một nhóm câu lệnh
 Biểu thức có thể bao gồm nhiều biến và
nhiều thuộc tính của một đối tượng.
var x = 5;
var z = 10;
document.write(eval(“x + z + 5”));

Đối tượng String
 Đối tượng string được dùng để thao tác và làm
việc với chuỗi văn bản.
 Chúng ta có thể tách chuỗi ra thành các chuỗi
con và biến đổi chuỗi đó thành các chuỗi hoa
hoặc thường trong một chương trình.
 Cú pháp tổng quát:
stringName.propertyName
hay
stringName.methodName

Cách tạo đối tượng String
 Có 3 phương thức khác nhau để tạo ra chuỗi.
 Dùng lệnh var và gán cho nó một giá trị.
 Dùng một toán tử (=) có gán với một tên
biến.
 Dùng hàm khởi tạo String (string).

Đối tượng Math
 Đối tượng Math có các thuộc tính và phương
thức biểu thị các phép tính toán học nâng
cao.
function doCalc(x) {
var a;
a = Math.PI * x * x;
alert ("The area of a circle with
a radius of " + x + “ is " + a);
}

Đối tượng Date
 Date là một đối tượng có sẵn chứa thông tin
về ngày và giờ.
 Đối tượng Date không có thuộc tính nào.
 Nó có nhiều phương thức dùng để thiết lập,
lấy và xử lý các thông tin về thời gian.

Đối tượng Date
 Đối tượng Date lưu trữ thời gian theo số mili
giây tính từ 1/1/1970 00:00:00
DateObject = new Date(parameters)

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

Các đối tượng
 Các sự kiện thông thường trong JavaScript
 Các đối tượng trong trình duyệt – Thuộc tính
và phương thức

Đối tượng Event – Khái
niệm
 Sự kiện là kết quả của các hành động được thực hiện
bởi người sử dụng
 Một sự kiện có thể được khởi tạo bởi người sử dụng
hoặc hệ thống
 Mỗi sự kiện được kết hợp với một đối tượng Event. Đối
tượng Event cung cấp thông tin về:
 Kiểu sự kiện
 Vị trí của con trỏ tại thời điểm xảy ra sự kiện
 Đối tượng Event được xem như một phần của trình xử
lý sự kiện

Chu trình sống của sự kiện
 Chu trình sống của sự kiện thông thường bao gồm
các bước:
 Hành động của người sử dụng hoặc một điều kiện
tương ứng khi sự kiện xảy ra
 Đối tượng Event được cập nhật ngay lập tức để
phản ánh sự kiện
 Phát sinh sự kiện
 Trình xử lý sự kiện tương ứng được gọi
 Trình xử lý sự kiện thực hiện các hành động và
trả về kết quả

JavaScript Event
 Các sự kiện thông thường mà JavaScipt hỗ trợ:
• onClick
• onChange
• onFocus
• onBlur
• onMouseOver
• onMouseOut
• onLoad
• onSubmit
• onMouseDown
• onMouseUp

onClick
 Sự kiện onClick được khởi tạo khi người sử dụng click chuột
vào button hoặc các phần tử form hoặc các liên kết.
<HTML>
<HEAD>
function compute(form)
{
if (confirm("Are you sure?"))
form.result.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>
VALUE="Calculate"
ONCLICK="compute(this.form)">
<BR><BR><BR>
Result:
<INPUT TYPE="text" NAME="result"
SIZE=15 >
<BR>
</FORM>
</BODY>
</HTML>

onChange
 Sự kiện onChange xảy ra khi một phần tử form thay đổi. Điều
này có thể xảy ra khi nội dung của phần tử text thay đổi, hoặc
khi một lựa chọn trong danh sách lựa chọn thay đổi.
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY bgColor = white>
<FORM>
Please enter a number:
<INPUT type = text size = 5
onChange="checkNum(this.value)">
</FORM>
</BODY>
</HTML>

onFocus/onBlur/onMouseO
ver/onMouseOut
 onFocus
 Sự kiện onFocus được gởi đi bất cứ khi nào phần tử form trở thành
phần tử form hiện thời. Chỉ khi phần tử nhận được focus nó mới
chấp nhận dữ liệu nhập từ người dùng.
 onBlur
 Blur ngược với focus. Khi người dùng rời khỏi phần tử form, sự kiện
onBlur được kích hoạt.
 onMouseOver
 Sự kiện onMouseOver được khởi tạo khi con trỏ chuột di chuyển lên
trên một phần tử.
 onMouseOut
 Sự kiện onMouseOut được khởi tạo khi con trỏ chuột rời khỏi phần
tử đó.

onMouseOut
 Ví dụ:
<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>

onMouseOut
 Di chuyển con trỏ chuột lên trên từ Aptech, xem kết quả
xuất hiện.

onLoad/onSubmit/onMouse
Down/onMouseUp
 OnLoad
 Sự kiện onLoad được gửi đến đối tượng document khi đã tải xong
tài liệu
 onSubmit
 Sự kiện onSubmit phát sinh bất cứ khi nào người dùng gửi form đi
(sử dụng nút Submit). Sự kiện xảy ra trước khi form thật sự được
gửi đi.
 onMouseDown
 Sự kiện này được kích hoạt khi hành động nhấp chuột xảy ra.
 onMouseUp
 Sự kiện này được kích hoạt khi hành động nhả chuột xảy ra.

onResize - Example
 onResize
 Sự kiện này được kích hoạt khi sự kiện resize xảy ra, nghĩa là
khi người dùng hoặc script chỉnh kích thước cửa sổ hay frame.
<html>
<head>
<script language="JavaScript">
window.onresize= notify;
function notify()
{
alert("Window resized!");
}
</script>
</head>
<body> Please resize the
window.
</body> </html>
Kết quả:

Điều khiển các sự kiện
 Phân đoạn này của mã JavaScript chạy để đáp ứng với sự kiện được
gọi là trình điều khiển sự kiện.
NAME="docode"
onClick="DoOnClick();">
 Trình điều khiển sự kiện được xếp loại theo:
 Trình điều khiển sự kiện như là thuộc tính của thẻ HTML:
<TAG eventHandler="JavaScript Code">
 Trình điều khiển sự kiện như là thuộc tính của đối tượng:
object.eventhandler = function;

Các đối tượng trên trình
duyệt
 Trình duyệt là một ứng dụng được sử dụng để hiển thị nội dung của tài
liệu HTML.
 Các trình duyệt cũng đưa ra một số đối tượng có thể được truy cập và
sử dụng trong script .
IE Browser Objects Netscape Browser Objects

DOM
 Một tính năng quan trọng của JavaScript là ngôn ngữ dựa
trên đối tượng.
 Giúp người dùng phát triển chương trình theo môđun và có
thể sử dụng lại.
 Đối tượng được định nghĩa là một thực thể đơn nhất bao
gồm các thuộc tính và phương thức.
 Thuộc tính là giá trị của một đối tượng.
Vd: Document.bgcolor

Đối tượng Window
 Đối tượng này tương ứng với cửa sổ của trình duyệt và có
thể được sử dụng để truy xuất thông tin về trạng thái của
cửa sổ.
Các thuộc tính:
• document
• event
• history
• location
• name
• navigator
• screen
Các phương thức:
• alert
• blur
• close
• focus
• navigate
• open

Đối tượng Document
 Đối tượng này thể hiện tại liệu HTML trong cửa sổ trình duyệt
và cho phép truy xuất thông tin trong cửa số đó.
• clear
• close
• open
• write
• writeln
Các thuộc tính:
• alinkColor
• bgColor
• Body
• fgColor
• linkColor
• location
• Title
• URL
• vlinkColor

Đối tượng History
 Đối tượng này cung cấp danh sách URL được thăm
gần đây nhất của client
 Chẳng hạn, phương thức "back()" của history hiển
thị tài liệu ngay trước đó trong cửa số trình duyệt:
history.back();
Phương thức:
• back
• forward
• go

Đối tượng Location
 Đối tượng này chứa thông tin về URL hiện thời. Nó cung cấp
phương thức cho phép trình duyệt có thể tải lại URL đó.
Các thuộc tính:
• hash
• host
• hostname
• href
• assign
• reload
• replace

SỬ DỤNG FORM VÀ CÁC SỰ
KIỆN CHO CÁC PHẦN TỬ
TRONG FORM
Session 10

Mục tiêu bài học
 Làm việc với đối tượng form và các thành phần
trên Form
 Sử dụng các sự kiện của đối tượng Form
 Kiểm tra tính hợp lệ của Form

Đối tương Form
 Đối tượng Form chứa 3 thuộc tính:
 Accept
 Action
 Method
 Ví dụ:
<Form ACTION="Simple.htm“ Accept=“TEXT/HTML”
Method=“POST”>

Đối tượng Textfield (1)
 Textfield nhận biết các sự kiện onBlur, onFocus và
onChange
 onFocus xuất hiện khi nhấp chuột vào bên trong trường văn bản.
 onBlur xảy ra khi người dùng di chuyển ra khỏi trường văn bản
 onChange xảy ra khi người dùng có sự thay đổi trong trường văn
bản và sau đó di chuyển ra khỏi trường văn bản
Ví dụ:
<input type="text" name="first_text" onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
onChange="writeIt('change');">

Đối tượng Command
Button(1)
 Command button nhận biết sự kiện onClick
 onClick xuất hiện khi người sử dụng nhấp chuột
vào command button
<INPUT TYPE="button" value="Copy"
onClick="writeIt(myfm.first_text.value);">

Đối tượng Command
Button(2)

Đối tượng Checkbox(1)
 Checkbox là một đối tượng form HTML, hoạt
động theo cơ chế bật tắt
 Checkbox có thể được Check hoặc không
 Giống như nút lệnh checkbox cũng hiểu được sự
kiện onClick

Nút lệnh tuỳ chọn/Đối tượng
Radio Button (1)
 Radio buttons gần giống như checkboxes
 Sự khác biệt ở đây là chỉ có một Radio được chọn.
Khi một Radio được chọn, nó sẽ giữ nguyên sự
lựa chọn đó cho đến khi nút khác được chọn.
 Radio button hiểu được sự kiện onClick.

Nút tuỳ chọn/ Đối tượng
Radio Button (1)

ComboBox/Đối tượng
Select(1)
 Đối tượng ComboBox trong form HTML xuất
hiện giống như một danh mục sổ xuống hoặc danh
mục cuộn của các tuỳ chọn
 Có thể sử dụng thanh cuộn để thay đổi sự hiển thị
danh sách các lựa chọn
 ComboBox hỗ trợ các sự kiện onBlur, onFocus,
and onChange

ComboBox/Đối tượng Select
(2)

Kiểm tra tính hợp lệ của
Form(1)
 Việc kiểm tra rất quan trọng, vì có thể có trường
không chứa dữ liệu.
 Cũng có thể có trường chứa dữ liệu không hợp lệ.
 Xem ví dụ sau:
<HTML>
<HEAD>
<TITLE> Form Events </TITLE>
<!--

Form(2)
function validateFirstName()
{
var str= form1.fname.value;
if(str.length==0)
{
alert(" The first name cannot be empty");
return false;
}
return true
}
function validateLastName()
{
var str= form1.lname.value;
if(str.length==0)
{
alert(" The last name cannot be empty");
return false;
}
return true;
}

Form(3)
function validateEmail()
{
var str= form1.email.value;
if(str.length==0)
{
alert(" The Email field cannot be empty");
return false;
}
}
function processForm()
{
disp=open("", "result")
disp.document.write("<TITLE> Result Page </TITLE>"+"<PRE>")
disp.document.write("<H2 ALIGN='CENTER'>"+
"Thanks for signing in"+"</H2>"+"<HR>"+"<BR><BR>")
disp.document.write("First name tt: "+form1.fname.value+"<BR>")
disp.document.write("Last name tt: "+form1.lname.value+"<BR>")
disp.document.write("Email ttt: "+form1.email.value+"<BR>")
disp.document.write("Your Comments tt: "+form1.comment.value+"<BR>")
disp.document.write("<PRE>")

Form(4)
if(disp.confirm("Is this information correct"))
disp.close()
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H2 ALIGN="CENTER"> Handling Form Events</H2><HR>
<FORM name="form1"><P> First Name : <INPUT TYPE="text"
NAME="fname" size=10 onBlur="validateFirstName()">
Last Name : <INPUT TYPE="text" NAME="lname" size=15
onBlur="validateLastName()"></p>
<P> Email : <INPUT TYPE="text" NAME="email" size=10 onBlur="validateEmail()">
Comments : <TEXTAREA NAME="comment" rows=4 cols=30 > Enter your comments
</TEXTAREA></p>
<P ALIGN="CENTER"><INPUT TYPE="button" value="Submit this form"
onClick="processForm()">
<INPUT TYPE="reset"></P>
</FORM>
</BODY>
</HTML>

Form(5)

88247697-JavaScript.ppt

More Related Content

What's hot (20)

Similar to 88247697-JavaScript.ppt (20)

Recently uploaded (20)

88247697-JavaScript.ppt