Xem mẫu
- Chương 5
CĂN BẢN VỀ JAVASCRIPT
I. GIỚI THIỆU
Script hay kịch bản, theo thuật ngữ lập trình, là chương trình chạy với chế
độ thông dịch trên máy khách (client) hay máy chủ (server) nhằm tạo ra các ứng
dụng web (web base application). Xét trên phương diện:
- client-side : các script bổ sung vào trang web cho phép tạo ra các trang web
tương tác, có những hiệu ứng động dựa vào mô hình đối tượng trình duyệt (BOM:
browser object model)
- server-side: sử dụng các đối tượng liên quan để chạy các script trên server.
Các ngôn ngữ kịch bản cho phép phát triển nhanh và dễ dàng các chương
trình đơn giản hơn là các ngôn ngữ lập trình dạng biên dịch như C, C++.
Hai ngôn ngữ kịch bản thông dụng hiện nay là :
JavaScript do hãng Netscape phát triển từ năm 1995 với tên ban đầu là
LiveScript, chú ý rằng JavaScript không có liên quan gì đến ngôn ngữ lập trình
Java của hãng Sun, nó có tên như vậy là vì mục đích tiếp thị của hãng Netscape
dựa vào sự nổi tiếng của ngôn ngữ lập trình Java. Phiên bản hiện nay là
JavaScript 2.0, chạy trên nhiều trình duyệt nên rất được ưa chuộng để viết các
script cho các trang web. Trước sự phát triển và ảnh hưởng của JavaScript, hãng
Microsoft đã đưa ra JScript.
VBscript do Microsoft phát triển, VBscript là một tập con của ngôn ngữ lập
trình Visual Basic, các script viết bằng VBscript thích hợp cho môi trường
Windows, phía client nó chỉ chạy trong môi trường IE nên không được ưa chuộng,
phía server nó thích hợp với hệ điều hành Windows NT, Windows 2000 Server để
xây dựng các trang ASP.
Năm 1996, Netscape đã đệ trình JavaScript cho ECMA (European Computer
Manufacturers Association, một tổ chức phi lợi nhuận có sự tham gia của các công
ty phần mềm, máy tính lớn trên thế giới như IBM, Microsoft, NEC, Sun ..., được
thành lập năm 1991, có chức năng chuẩn hóa WWW) để chuẩn hóa, ECMA chỉ
tập trung chuẩn hóa phần lõi của JavaScript, còn khác phần khác như mô hình đối
tượng tư liệu (DOM) dành cho các nhà phát triển, do vậy vấn đề lớn nhất còn tồn
tại sự khác nhau giữa các trình duyệt là DOM.
Hiện nay, JavaScript là ngôn ngữ kịch bản chủ yếu để xây dựng các ứng
dụng web chạy phía client, tuy nhiên cần phải chú ý hai đặc điểm quan trọng:
JavaScript có thể làm được gì ?
- DHTML là tập hợp các công cụ cho phép tạo ra các trang web tương tác, có
thể thay đổi nội dung và thể hiện.
66
- - Điều khiển trình duyệt.
- Xử lý dữ liệu trong các ứng dụng cilent-side, kiểm tra tính hợp lệ dữ liệu
trong các form.
- Lưu các trạng thái trong cookies.
JavaScript không thể làm được gì ?
- Không đọc / ghi file
- Không hỗ trợ mạng
- Không tạo ra các đối tượng đồ họa.
II. CĂN BẢN VỀ JAVASCRIPT
II.1. Bộ chữ viết. Từ khóa. Tên
Bộ chữ viết :Một ngôn ngữ viết bất kỳ được xây dựng trên một bộ ký tự,
sau đó tập hợp các từ có nghĩa được gọi là từ vựng, và phải có quy tắc để viết
các từ thành câu để diễn tả hành vi, tức là phải tuân theo cú pháp (syntax) và ngữ
pháp (grammar) của ngôn ngữ đó. JavaScript sử dụng bộ ký tự sau :
- 26 chữ cái latinh (gồm 26 chữ cái lớn A,B,C,.. và 26 chữ cái nhỏ a,b,c...)
- Ký tự gạch nối _
- 10 chữ số thập phân 0,1,2,3,4,5,6,7,8,9
- Các ký hiệu toán học thông dụng +,-,*,/,=,>,
- xác định các định danh phải đảm bảo không trùng với các từ dành riêng của
JavaScript. Sau đây là một số từ dành riêng của JavaScript:
break for throw
case function true
catch if try
continue in typeof
default instanceof var
delete new void
do null while
else return with
false switch
finally this
Trong JavaScrip các định danh phân biệt chữ hoa và chữ thường. Theo
phong cách chung của JavaScript thì các định danh bắt đầu bằng một chữ cái in
thường, chữ cái của các từ tiếp theo được viết in hoa.
Ví dụ : borderLeftColor, getDate() v.v...
II.2. Kiểu dữ liệu
So với các ngôn ngữ lập trình khác, JavaScript sử dụng ít kiểu dữ liệu, hai
kiểu dữ liệu được chấp nhận :
Kiểu dữ liệu cơ sở chỉ chứa một giá trị đơn như số, chuổi ký tự và giá trị
logic.
Kiểu số như số nguyên, JavaScript chấp nhận miền giá trị kiểu nguyên
trong khoảng giữa -253 và 253 ; số dấu chấm động (floating-point numbers) được
viết dưới dạng thông thường như 3.14 hay dưới dạng khoa học như 0.5e10.
Kiểu boolean gồm hai giá trị true và false.
Kiểu chuổi ký tự là một chuổi có thể không có ký tự nào hay nhiều ký tự
được bao trong cặp dấu nháy kép hay cặp dấu nháy đơn.
Kiểu Null chỉ có một giá trị là null, có nghĩa là không có dữ liệu, chú ý rằng
zero và chuổi rỗng không phải null.
Kiểu Indefined chỉ có một giá trị indefined, có nghĩa biến đã khai báo nhưng
chưa xác định kiểu.
Infinity là từ khóa chỉ một giá trị vượt quá giới hạn xử lý của JavaScript.
NaN là một từ khóa chỉ một biểu thức không thể trả về kiểu số, ví dụ : 7*"abc";
Kiểu dữ liệu phức (composite data type) gồm các kiểu đối tượng (object),
mãng (array). Chúng ta sẽ nghiên cứu kỹ hai kiểu dữ liệu này trong phần sau của
chương này.
Chuyển kiểu dữ liệu : JavaScript là một kiểu ngôn ngữ động, cho phép ta
không cần chỉ rõ kiểu dữ liệu của một biến khi khai báo nó, kiểu dữ liệu của một
biến được tự động chuyển sang kiểu phù hợp trong quá trình thi hành script.
Ví dụ :
var result;
68
- x=1000;
st="lan cam on Ban";
result=x+st;
document.write(result);
Kết quả ta được trên màn hình : 1000 lan cam on Ban!
II.3. Hằng và Biến.
Hằng được giới thiệu từ JavaScript 1.5, được chấp nhận từ NN 6.0 và
FF 1.0 còn IE không chấp nhận, do vậy sử dụng hằng trong các script phải hết
sức cẩn thận.
Khai báo hằng :
const sopi = 3.1416;
const tencoquan="DaNang Education College";
const ok = true;
Biến : là một vùng bộ nhớ lưu trữ dữ liệu được truy xuất qua một tên
gọi, giá trị của biến có thể bị thay đổi khi kịch bản được thi hành.
- Khai báo biến bằng cách dùng từ khóa var hoặc bằng cách gán giá trị cho
biến, khác với việc khai báo biến một cách chặt chẻ như trong Pascal, JavaScript
chỉ yêu cầu khai báo biến trước khi sử dụng nó.
Ví dụ:
var new_amount;
var answer = null;
result = 'Unknown result';
result = 10;
- Phạm vi của biến phụ thuộc vào vị trí khai báo biến trong script. Nếu
biến được khai báo ngoài hàm (function), nó được xem là biến toàn cục và có thể
được sử dụng tại mọi nơi trong script, ngược lại nếu biến được khai báo trong
một hàm, nó được xem là biến cục bộ và chỉ được sử dụng trong hàm đó mà thôi.
Ví dụ :
var sum = 0; // biến toàn cục
function tinhTong(){
var a = prompt("Nhap a:"); // biến cục bộ
var b = prompt("Nhap b:"); // biến cục bộ
sum = a+b;
alert("Ket qua la:"&sum);
}
- Lưu ý : Khi một biến được sử dụng mà chưa gán giá trị thì nó sẽ có kiểu
undefined. Một biến có thể được sử dụng để chứa giá trị với nhiều kiểu dữ liệu
khác nhau.
- Khi sử dụng chuổi ký tự, ta sử dụng các ký tự đặc biệt cho những tác vụ
đặc biệt nào đó.
69
- Ký tự Ý nghĩa
\b backspace
\f form feed
\n new line, xuống dòng
\r carriage return, đưa con trỏ về đầu dòng
\t đưa con trỏ đến vị trí tab-stop
\v vertical tab
\' in ra dấu nháy đơn
\" in ra dấu nháy đôi
\\ in ra dấu gạch chéo ngược ( \ )
Ví dụ :
var st = "Shakespeare written \"To be or not to be \" ";
document.write(st);
Kết quả sẽ in ra trên màn hình là: Shakespeare written "To be or not to be";
hoten=prompt("Cho biet quy danh: ");
alert("Kinh chao:"+hoten+"\n"+"Chuc ban may man!");
II.4. Các toán tử
JavaScript cung cấp một số toán tử để thực hiện các chức năng toán học và
các chức năng khác. Toán tử sử dụng một hay nhiều biến, hằng để tạo ra một giá
trị mới, ta sử dụng các tóan tử để tạo ra các biểu thức phức tạp. Trong phần này
ta sẽ giới thiệu sơ lược những toán tử tương tự như trong các ngôn ngữ lập trình
Pascal, C và tập trung mô tả kỷ về các toán tử đặc trưng của JavaScript.
Toán tử gán (=) dùng để gán một giá trị cho một biến. JavaScript có
nhiều phương pháp thực hiện toán tử gán :
- X = 10; // giá trị 10 được gán cho biến X
- total = mathematics + physics + chemistry // gán một biểu thức cho biến.
- a+ = 3 // dạng viết rút gọn, tương tự như a = a+3; dạng rút gọn này có thể áp
dụng cho các toán tử số học và các toán tử & (and) , ^ (xor), | (or)
Các Toán tử số học: +, -, *, /, %, ++, --, các toán tử một ngôi +, -
Chú ý :
++x sẽ trả lại giá trị của x sau khi tăng x thêm 1
x++ sẽ trả lại giá trị của x trước khi tăng x thêm 1
Ví dụ :
70
- var x=1;
prior = x++;
follow = x;
st= "Gia tri ban dau cua x =1 \n"+"x++ ="+prior+"\n"+"Sau khi tang x, x="+
follow;
alert(thongbao);
Các toán tử so sánh : = =, !=, >, =, Dịch sang phải
>>> Dịch sang phải và điền đầy các bit trống bằng 0
Các ví dụ :
10 & 15 trả về 10 ( 1010 & 1111 -> 1010)
10 | 15 trả về 15 ( 1010 | 1111 -> 1111)
10 ^ 15 trả về 5 (1010 ^ 1111 -> 0101)
15 > 3, có nghĩa dịch sang phải 3 bit của dãy 1111, kết quả là 1
25>>>3, có nghĩa dịch sang phải 3 bit của dãy 11001 và điền 0 vào vị trí các bit
trống, kết quả là
Một số toán tử đặc biệt:
- Toán tử điều kiện có cú pháp: condition ? expr1 : expr2
condition là một biểu thức logic, nếu true thì toán tử trả về giá trị expr1,
ngược lại trả về giá trị expr2.
Ví dụ : status = (age>=18; "aldult" : "minor")
- Toán tử , (comma) lượng giá cả hai toán hạng và trả về tóan hạng thứ hai.
Ví dụ : x = (a++,c)*(b++,d) // tương đương với x = c*d
71
- - Toán tử typeof trả về một chuổi ký tự xác định kiểu dữ liệu của toán hạng,
kiểu dữ liệu của toán hạng có thể là : số, chuổi, logic, đối tượng (object, array,
null), function và undefined.
- Toán tử new được dùng để tạo ra một thể hiện (instance) của một kiểu đối
tượng có hàm khởi dựng. Kiểu đối tượng này có thể là do người sử dụng định
nghĩa, đối tượng dựng sẵn hay đối tượng mãng. Cú pháp :
objectName = new objectType (param1 [,param2] ... [,paramN]);
Trong đó :
objectName : tên của thể hiện đối tượng
objectType : là một hàm xác định kiểu của đối tượng.
parami : là các giá trị của các thuộc tính của đối tượng.
- Toán tử this được dùng như một từ khóa tham chiếu đến một thuộc tính của đối
tượng được gọi.
Ví dụ 1:
// đối tượng do người sử dụng định nghĩa
function nhanVien(hoten, maso, chucdanh){
this.hoten = hoten;
this.maso = maso;
this.chucdanh = chucdanh;
}
var nhanVienMoi = new nhanvien("Le Van", "001","Quan ly")
document.write("Ho va ten :" + nhanVienMoi.hoten+"");
document.write("Ma so :" + nhanVienMoi.maso+"");
document.write("Chuc danh :" + nhanVienMoi.chucdanh);
Ví dụ 2:
// Date() là đối tượng dựng sẵn của JavaScript
var homNay = new Date();
var ngay = homNay.getDate();
var thang = homNay.getMonth();
var nam = homNay.getYear();
// getDate(), getMonth, getYear() là các phương thức của Date()
document.write("Hom nay,ngay :" + ngay+"/"+thang+"/"+nam);
72
- - Toán tử delete được dùng để xóa đi một đối tượng, thuộc tính của đối tượng
hoặc một phần tử của mãng.
Cú pháp:
delete objectName
delete objectName.property
delete objectName[index]
II.5. Các biểu thức quy tắc (Regular Expressions)
Biểu thức quy tắc là các khuôn mẫu (pattern) dùng để so khớp với các
chuổi con trong một chuổi ký tự. Trong các môi trường Unix, Perl biểu thức quy
tắc là công cụ mạnh để tìm kiếm và thay thế. JavaScript sử dụng biểu thức quy
tắc từ phiên bản 1.4, nó là một đối tượng.
Một biểu thức quy tắc được cấu tạo từ một số thành phần, xét ví dụ sau:
Tham số g (global) chỉ rằng biểu thức quy tắc là toàn cục, cho phép
JavaScript xử lý tất cả các thể hiện chuổi không chỉ một lần trong cùng thời
điểm. Tham số i (is not case sensitive) chỉ rằng việc so khớp phân biệt chữ hoa và
chữ thường.
Tạo biểu thức quy tắc : có hai phương pháp
- Sử dụng ký hiệu trực kiện : re = /Da Nang/
- Sử dụng phương thức khởi tạo (hàm dựng) : re = new RegExp("Da Nang")
Ví dụ :
var re = new RegExp("Da "+"Nang")
var str=re.exec("Trung tam phat trien phan mem Dai hoc Da Nang-SDC");
alert(str);
/* phương thức exec so khớp chuổi "Da Nang" với chuổi "Trung tam ...",
* nếu tìm thấy, trả về giá trị "Da Nang", ngược lại trả về giá trị null */
Một khuôn mẫu của biểu thức quy tắc bao gồm:
Khuôn mẫu đơn : được cấu tạo bằng các ký tự mà ta muốn so sánh trực
tiếp như trong ví dụ trên.
Tổ hợp khuôn mẫu đơn và các ký tự đặc biệt : giống như việc sử dụng
toán tử LIKE của ngôn ngữ SQL, JavaScript cung cấp cho người sử dụng các ký
tự đặc biệt để xây dựng khuôn mẫu phức tạp hơn. Ví dụ với khuôn mẫu /
73
- 43*2100/ ta thực hiện so khớp với chuổi "ABCD43LD-2100EFG" ta được "43LD-
2100"
JavaScript cung cấp các ký tự đặt biệt sau đây để xây dựng khuôn mẫu:
Ký tự Ý nghĩa và ví dụ
\ Khai báo một ký tự đặc biệt có ý nghĩa sử dụng theo quy ước ở các
phần đưới.
\b (delimits a word Boundary) Xác định ranh giới của một từ
\B Xác định một vị trí không có ranh giới của từ
\d Thay cho một chữ số từ 0-9. Ví dụ /2\d\d\d/ so khớp với 2000.
\D Thay cho một chữ số hay chữ cái.
\w Thay cho một từ (word character)
\W Thay cho một nhóm ký tự không phải là từ, như dấu cách, dấu câu
\s Thay cho dấu cách, tab và ký tự xuống hàng
\S Thay cho một khoảng cách
^ So khớp với phần đầu một dòng hoặc dữ liệu nhập.
/^A/ so khớp với "Anh bộ đội" nhưng không khớp với "Sống như Anh"
$ So khớp với phần cuối một dòng hoặc dữ liệu nhập.
* So khớp với một ký tự có trước, có thể 0 hoặc nhiều lần. Ví dụ /t*ch/
so khới với "thu hoach", với "chung ta"
+ So khớp với một ký tự có trước, có thể 1 hoặc nhiều lần. Ví dụ /r+/ so
khớp với "read", hay "arrange"
? So khớp với một ký tự có trước, có thể 0 hoặc một lần. Ví dụ /e?le?/ so
khớp với "el" trong "angel" hay "le" trong "title"
. So khớp với mọi ký tự đơn, ngoại trừ ký tự newline. Ví dụ : /n./ so khớp
với "no" trong "nothing", /.n/ so khớp với "in" trong "nothing"
(x) So khớp với x và nhớ sự so khớp này. Ví dụ /(boo)/ so khớp với "green
bamboo". Khi được nhớ, chuổi con có thể được gọi lại cho sử dụng
khác.
x|y So khớp với x hoặc y. Ví dụ /ca|chim/ so khớp với "chim bay ve to"
{n} n∈N, so khớp đúng n lần ký tự đứng trước. Ví dụ /h{3}/ so khớp với
"hhh" trong chuổi "a hhhha !"
{n,} n∈N, so khớp ít nhất n lần ký tự đứng trước.
{n,m} m, n∈N; so khớp ít nhất n lầnvà nhiều nhất m lần ký tự đứng trước.
[xyz] So khớp với bất kỳ một trong các ký tự bên trong cặp ngoặc vuông. Có
thể sử dụng dấu gạch nối (-) để xác định phạm vi. Ví dụ /[^a-z]a/ so
khớp với "Ma" trong chuổi "Mary has a little lamp"
[\b] So khớp với ký tự xóa lui (backspace)
\b So khớp với biên của từ.
Biểu thức quy tắc được dùng với các phương thức biểu thức quy tắc: exec,
test và các phương thức của đối tượng String: match, search, replace, split.
Method Mô tả
74
- exec Tìm so khớp trong một chuổi, trả về chuổi con tìm được hay null
test Tìm so khớp trong một chuổi, trả về true hay false
match Phương thức String dò tìm một chuổi con. Ví dụ
var str =new String;
str="Ta di ta nho que nha";
alert(str.match(/ta/)); // trả về chuổi "ta"
search Phương thức String dò tìm một chuổi con, trả lại vị trí tìm được trong
chuổi dò tìm, nếu không tìm thấy trả về -1.
replace Phương thức String dò tìm một chuổi con và thay thế chuổi con được sử
dụng so khớp bằng một chuổi con khác.
split Phương thức String sử dụng biểu thức quy tắc hoặc chuổi cố định để
tách một chuổi vào một mãng các chuổi con
Ví dụ 1:
function checkPostal(){
// kiểm tra hợp lệ dữ liệu của form
var re5digit=/^\d{5}$/
// biểu thức quy tắc định nghĩa 5 chữ số
if (document.myform.myinput.value.search(re5digit)==-1) // nếu so khớp sai
alert("Xin vui lòng nhập 5 chữ số vào form")
}
III. CÁC CÂU LỆNH CỦA JAVASCRIPT
III.1. Câu lệnh
Các câu lệnh trong JavaScript cách nhau bằng dấu chấm phẩy (;), câu lệnh
được chia ra hai loại: câu lệnh đơn giản và câu lệnh có cấu trúc.
Câu lệnh đơn giản gồm có : phép gán, lời gọi hàm. Ví dụ:
x = 7; // phép gán
count++; // thực hiện toán tử increment
xInt = Math.round(y); // gọi hàm round của đối tượng Math và gán giá
trị cho biến xInt
window.alert("Kinh chao"); // gọi hàm alert của đối tượng window
Câu lệnh có cấu trúc gồm có : khối lệnh và các câu lệnh điều khiển
(control statements), lệnh with (dùng cho kiểu Object)
75
- Khối lệnh được bao bởi cặp ký hiệu { và }. Ví dụ:
{
x1 = (b + Math.sqrt(delta))/2*a;
x1 = (b - Math.sqrt(delta))/2*a;
window.document.write("Nghiệm là:" + x1 +"," + x2);
}
Các câu lệnh điều khiển : câu lệnh lựa chọn, câu lệnh lặp
III.2. Câu lệnh điều kiện
Trong JavaScript có hai câu lệnh điều kiện: câu lệnh if cho phép chương
trình chọn một trong hai lựa chọn và câu lệnh swich cho phép chương trình chọn
một trong nhiều lựa chọn.
III.2.1. Câu lệnh if
Cú pháp : câu lệnh if được viết theo một trong bốn dạng sau:
o if (biểu thức logic) câu lệnh ;
o if (biểu thức logic)
câu lệnh ;
o if (biểu thức logic) { khối lệnh }
o if (biểu thức logic) {
khối lệnh
}
Ví dụ :
if isNaN(x){
window.alert(x+" khong phai la mot so");
}
( Hàm isNaN kiểm tra một giá trị và trả về true nếu đó là một số, ngược lại
trả về false nếu không phải là một số)
Mệnh đề else : dùng trong trường hợp có hai sự lựa chọn tùy theo giá trị
của biểu thức logic. Dạng câu lệnh này được gọi là câu lệnh if-else. Cú pháp:
if (biểu thức logic) { khối lệnh 1; }
else {khối lệnh 2;}
Cấu trúc else if: ta thường gọi các câu lệnh if lồng nhau, dùng để chọn
một lựa chọn trong nhiều lựa chon. Có bốn cách viết câu lệnh if lồng nhau, ta
thường sử dụng hai cách viết sau:
if (biểu thức logic 1) { khối lệnh 1; } if (biểu thức logic 1) { khối lệnh 1;}
else { else if (biểu thức logic 2;) {
if (biểu thức logic 2) {khối lệnh 21;} khối lệnh 21; }
else {khối lệnh 22;} else {khối lệnh 22; }
}
Ví dụ : Giải phương trình bậc nhất một ẩn ax + b = 0
76
-
var x;
var a = window.prompt("Nhap a:");
var b = window.prompt("Nhap b:");
if (a!=0){
x=(-b/a);
window.alert("Nghiem la "+x);
}
else {
if (b!=0){
window.alert("Phuong trinh vo nghiem");
}
else {
window.alert("Phuong trinh co vo so nghiem);
}
}
Đọan script trên có thể thay bằng đọan mã sau, đơn giản và trong sáng hơn:
if (a!=0){
x=(-b/a);
window.alert("Nghiem la "+x);
}
else if (b!=0) window.alert("Phuong trinh vo nghiem");
else window.alert("Phuong trinh co vo so nghiem);
III.2.1. Câu lệnh switch
Câu lệnh switch có vai trò giống như câu lệnh if-else, câu lệnh switch
lượng giá của một biểu thức và so sánh giá trị này với một trong nhiều giá trị
trong mệnh đề case để thực hiện lệnh và thóat khỏi câu lệnh switch với câu lệnh
break. Cú pháp:
switch(biểu thức) {
case gtrị1 :
nhóm lệnh 1; break;
...
case gtrịN :
nhóm lệnh N; break;
default :
nhóm lệnh N+1;
}
Từ khóa case là một nhãn, nó đánh dấu một điểm trong mã script để thực
hiện một lệnh.
77
- Ví dụ : Nhập vào một mã số tỉnh / thành phố và in ra tên của tỉnh / thành
phố đó.
var bc = window.prompt("Nhap ma tinh/thanh pho: ");
// Lưu ý: hàm prompt trả về giá trị kiểu chuổi.
switch (bc){
case "04":
alert("Ha Noi"); break;
case "08":
alert("Tp Ho Chi Minh"); break;
case "0511":
alert("Da Nanng"); break;
default:
alert("Chua xac dinh duoc");
}
III.3. Lệnh lặp
JavaScript có các câu lệnh lặp: câu lệnh while, câu lệnh do ...while,câu
lệnh for và câu lệnh for ... in.
Để thoát ra khỏi một vòng lặp ta sử dụng lệnh break, để tiếp tục thực
hiện vòng lặp dùng lệnh continue.
III.3.1. Câu lệnh while
Cú pháp : while( biểu thức logic) {
các lệnh;
}
Ví dụ : Tính tổng các số nguyên nhập từ bàn phím, nhập 0 để kết thúc.
var sum = 0;
while (true){
i= parseInt(prompt("Nhap mot so nguyen, nhap 0 de ket thuc",0));
if (i==0) break;
sum+=i;
}
alert("Ket qua: "+sum);
III.3.2. Câu lệnh do ... while
Cú pháp :do {
các lệnh;
} while (biểu thức logic);
Ví dụ 1 : In ra màn hình các dòng tiêu đề từ 1 đến 6 (H1-H6)
78
- var i =1;
do {
document.write(""+"Tieu de thu "+i+"");
i++;
}while (i
- Đây là câu lệnh thường được dùng để truy xuất các thuộc tính của một đối
tượng mà chúng ta sẽ nghiên cứu ở chương sau.
Ví dụ
var sinhVien={
Hoten: "Nguyen Van Long",
Lop: "03CTT01",
DiChi: "Da Nang"
};
// định nghĩa một đối tượng;
for(var i in sinhVien){
document.write(sinhVien[i]+"");}
III.3.4. Câu with
Câu lệnh with chi phép ta truy xuất các thuộc tính và các phương thức một
đối tượng mà không cần xác định tên đối tượng trong các dòng lệnh.
Cú pháp : with(tên đối tượng) { lệnh;}
Ví dụ
var sinhVien={
Hoten: "Nguyen Van Long",
Lop: "03CTT01",
DiChi: "Da Nang"
};
// định nghĩa một đối tượng;
with(sinhVien){
document.write(Hoten+"");
document.write(Lop+"");
document.write(DiaChi);
}
III.4. Câu lệnh try-catch
Câu lệnh try-catch dùng để cho phép script xử lý lỗi thay vì trình duyệt. Nó
thường được dùng để thông báo một câu lệnh có xác suất lỗi cao. Cú pháp:
try{ khối lệnh;} catch{ khối lệnh xử lý lỗi;}
Ví dụ: đọan mã sau đây cố gắng in ra giá trị của một biến chưa được khai
báo và gán giá trị, không thành công sẽ thông báo lỗi.
try {document.write(unknownVariable);}
catch(e){alert(e.message);}
finally{document.write("This is the finally message.");}
// đọan mã này chỉ phù hợp với JavaScript 1.4 trở lên
80
- III.5. Câu lệnh throw
Câu lệnh throw cho phép một script khai báo một lỗi và có thể chặn bắt
bằng cách dùng câu lệnh try-catch.
Ví dụ:
try {
var i = 0;
if(i != 1) { throw "Loi nang"; }
}
catch(error)
{ if(error == "Loi nang")
document.write("This is a thrown error message:"+
" i is not one.";
}
finally
{ document.write("This is the finally message.");}
IV. CĂN BẢN VỀ HÀM TRONG JAVASCRIPT
IV.1. Định nghĩa hàm
Hàm là một khối lệnh và được gán bởi một tên. Các hàm được định nghĩa
bằng từ khóa function. Cú pháp như sau:
function tênHàm( danh sách các tham số){
khối lệnh;
return [giá trị trả về của hàm];
}
- Các tham số cách nhau bởi dấu phẩy (,), một hàm có thể không có tham
số nào. Một hàm có thể định nghĩa mà không có tham số nào nhưng các dấu ngoặc
đơn là bắt buộc.
- Trong khối lệnh, hàm có thể gọi một hàm khác và có thể gọi lại chính nó
, ta gọi hàm được định nghĩa đệ quy.
- Câu lệnh return có hai mục đích là : nó buộc thoát ra khỏi một hàm và
truyền lại một giá trị cho dòng lệnh đã gọi hàm.Nếu hàm trả về một giá trị thì nó
có thể tham gia trong các biểu thức.
Ví dụ: Định nghĩa hàm sum trả về tổng hai số.
function tong(a,b){
return a+b;
}
81
- Có những hàm không trả về giá trị, chúng chỉ thực hiện một lọat các lệnh
như các Procedure của Pascal. Hàm sau đây in ra màn hình ngày tháng của hệ
thống.
function inNgay(){
var homNay = new Date();
var ngay = homNay.getDate();
var thang = homNay.getMonth();
var nam =homNay.getYear();
document.write("Hom nay ngay: "+ngay+"-"+thang+"-"+nam);
return;
}
Trong trường hợp này hàm trả về giá trị undefined.
IV.2. Lời gọi hàm
Gọi hàm là thi hành các mã lệnh được chỉ định và các tham số được chỉ ra.
Nếu hàm không trả về giá trị, ta có lời gọi : tênHàm(danh sách tham số);
Ví dụ hàm inNgay ở trên có lời gọi hàm: inNgay();
Nếu hàm trả về giá trị ta có thể sử dụng như một thành phần của biểu
thức, được sử dụng trong các hàm khác như một giá trị, hay một giá trị trong phép
gán cho biến.
Ví dụ hàm sum(a,b) ở trên :
var x = tong(5,6);
var i = 4;
var j+=i;
var ketqua = 8+tong(i,j);
JavaScript truyền tham số (nếu tham số không phải là một đối tượng,
chúng ta sẽ nghiên cứu ở chương sau) theo giá trị, có nghĩa một hàm không làm
thay đổi giá trị của một biến toàn cục làm tham số của hàm.
Ví dụ :
var a = 10;
var b = 20;
function lamGi(bien){
bien++;
b*=2;
document.write("Gia tri moi cua tham so "+bien"+");
}
lamGi(a); // lời gọi hàm
document.write("Gia tri moi bien toan cuc a "+a);
document.write("Gia tri moi bien toan cuc b "+b);
Sau khi thực hiện script chỉ có giá trị của biến b thay đổi, còn a giữ nguyên.
82
- IV.3. Những tính chất của hàm
IV.3.1. Function Constructor
Function Constructor (trong thuật ngữ Tiếng Việt không có từ nào dịch rõ
nghĩa) trong JavaScript cho phép ta tạo ra một biến và gán nó cho biến như là một
giá trị. Ví dụ:
var q = new Function('a','b', 'return a*b;');
Một hàm được định nghĩa theo cách này kéo theo bởi biến được gán, có
nghĩa là q bây giờ có thể họat động như một hàm với hai tham số a, b và trả về
giá trị a+b.
var x = q(2,3); // kết quả trả về là một giá trị kiểu số
Hàm được xây dựng như vậy được gọi là hàm ẩn danh, bởi ta không thể
tham chiếu đến tên hàm. Ta có thể sử dụng lại hàm ẩn danh này theo một ngữ
cảnh khác mà không cần xây dựng lại hàm.
var str = q("Dai hoc ","Su phạm"); //kết quả trả về là một giá trị kiểu chuổi
IV.3.2. Tính đệ quy của hàm
JavaScript cho phép một hàm có thể định nghĩa đệ quy, xét ví dụ sau đây:
Ví dụ 1: Tính giai thừa của n, n∈N
function giaiThua(n){
if((n= =0)||(n= =1)) return 1
else {
var gt = (n*giaiThua(n-1));
return gt;
}
}
IV.3.3. Đối tượng Arguments
Tất cả hàm của JavaScript dều có thuộc tính gọi là đối tượng Arguments,
chứa danh sách các tham số được thực sự truyền cho hàm, ta dùng thuộc tính
Argumnets. lenght chỉ số tham số đã truyền cho hàm để kiểm tra tính đầy đủ của
các tham số.
Ví dụ :
function strangeEquation(x, y, q) {
if (arguments.length != 3) {
return "Invalid number of arguments";
}
var z = x * y;
var p = q - 7;
return (z * x % (y + 1)) / p;
}
Trong phần trên ta nghiên cứu về các hàm do người dùng định nghĩa,
chương sau ta sẽ nghiên cứu về các đặc điểm mạnh nhất của JavaScript :các đối
83
- tượng (của JavaScrip và của BOM- mô hình đối tượng trình duyệt) và các hàm
dựng sẵn (mà bản chất là các phương thức của các đối tượng).
V. CÁC ĐỐI TƯỢNG JAVASCRIPT
V.1. Các đối tượng của người sử dụng định nghĩa
V.1.1. Định nghĩa đối tượng
JavaScript cho phép định nghĩa một đối tượng bằng các phương pháp :
Dùng hằng chữ đối tượng (Object literals), cú pháp:
var objectName = {property1:value1, ..., propertyN:valueN};
Dùng hàm khởi dựng (constractor function) với toán tử this, cú pháp:
function functionName(parameter1,...,parameterM){
this.property1 = parameter1;
....
this.propertyM = parameterM;
this.propertyN = expression;
}
và một thể hiện của đối tượng này được tạo bằng toán tử new, cú pháp:
var objectName = new functionName(value1,...,valueM);
JavaScript 2.0 cho phép người sử dụng tạo ra các đối tượng (class) với khá
đầy đủ các tính chất của một ngôn ngữ lập trình hướng đối tượng..
V.1.2. Định nghĩa phương thức của đối tượng
JavaScript 1.5 cho phép ta tạo ra một đối tượng và một phương thức
(method) liên kết với đối tượng đó, cú pháp:
function objectName(parameters) { //khối lệnh;}
Để bổ sung thuộc tính, phương thức cho một đối tượng ta dùng thuộc tính
prototype. Cú pháp:
objectName.prototype.member 1 = value1;
V.1.4. Truy xuất các thuộc tính, phương thức của một đối tượng
- Dùng toán tử chấm (.) để truy xuất thuộc tính : objectName.property
- Gọi phương thức của đối tượng: objectName.method();
Ví dụ :
//dùng object literals
nhanVien1={hoten:'Nguyen Van Hung',diachi:'Da Nang', tuoi:22};
// tạo phương thức cho đối tượng nv được tạo ra ở dưới.
function display(){
var str = this.hoten+" "+this.diachi+" "+this.tuoi;
document.write(str);
84
- }
// dùng constructor function
function nv(ht, dc, t){
this.hoten = ht;
this.diachi = dc;
this.tuoi = t;
this.hienthi= display;
}
nhanVien2 = new nv('Nguyen Van Hung', 'Da Nang', 22);
// Truy xuất các thuộc tính và gọi phương thức của đối tượng
document.write(nhanVien1.hoten);
nhanVien2.hienthi();
V.2. Các đối tượng dựng sẵn trong JavaScript
Trong các phần trên ta đã nghiên cứu một số đối tượng của JavaScript:
Function, RegExp, sau đây ta sẽ nghiên cứu các đối tượng quan trọng khác của
JavaScript 1.5: Date, Math, Number, String.
JavaScript 2.0 ra đời năm 2003 với nhiều tham vọng hơn : lập trình cho
server-side, là một ngôn ngữ lập trình hướng đối tượng, ta không nghiên cứu trong
giáo trình này vì chưa có nhiều nhà phát triển ứng dụng web chấp nhận.
Ta có thể tạo ra một thể hiện của đối tượng từ các đối tượng có sẵn để
sử dụng, lưu ý những vấn đề sau đây:
o Tạo đối tượng bằng toán tử new : var tênĐốiTượng = new tênĐối tượng;
o Truy xuất các thuộc tính, phương thức public của đối tượng bằng toán tử
chấm (.) (khi biết rõ tên thuộc tính, tên phương thức của đối tượng) hoặc
bằng toán tử [ ] (khi không quan tâm đến tên của các thuộc tính của đối tượng)
Ví dụ 1:
var arr = new Array(5);
document.write(arr.length); // truy xuất thuộc tính length của đối tượng arr.
var toDay = new Date();
ngay = toDay.geteDate(); // truy xuất phương thức getDate() của toDay
Ví dụ 2:
document là một đối tượng của mô hình đối tượng tư liệu (DOM), ta thử liệt
kê tên các phần tử của đối tượng này phù hợp với một trình duyệt cụ thể:
for(var prop in document)
document.write("document."+prop+" = "+document[prop]+"");
// biến prop chứa giá trị là tên của thuộc tính của đối tượng document
// document[prop] chứa giá trị của thuộc tính có tên được chứa trong biến prop.
V.2.1. Đối tượng String
Để tạo ra một đối tượng String, ta sử dụng một trong 3 cú pháp:
- Sử dụng lệnh var và gán giá trị cho biến : var str = "Thành phố Đà Nẵng";
- Sử dụng toán tử gán : str = "Thành phố Hội An";
- Sử dụng toán tử new : var str = new String();
85
nguon tai.lieu . vn
