Giáo trình JavaScript

ởi tạo này trong một hàm thì mỗi lần gọi hàm, đối tượng sẽ được 
khởi tạo một lần 
Giả sử bạn có câu lệnh sau: 
if (condition) 
 x={hi: ”there.”} 
Trong trường hợp này, JavaScript sẽ tạo ra một đối tượng và gắn nó vào biến x 
nếu biểu thức condition được đánh giá là đúng 
Còn ví dụ sau tạo ra một đối tượng myHonda với 3 thuộc tính: 
myHonda={color:”red”,wheels:4,engine:{cylinder:4,size:2.2}} 
Chú ý rằng thuộc tính engine cũng là một đối tượng với các thuộc tính của nó 
Trong Navigator 4.0, bạn cũng có thể sử dụng một khởi tạo để tạo một mảng. Cú 
pháp để tạo mảng bằng cách này khác với tạo đối tượng: 
arrayName=[element0, element1,...,elementN] 
Trong đó, arrayName là tên của mảng mới, và mỗi elementI là giá trị của phần tử 
ở vị trí đó của mảng. Khi bạn tạo một mảng bằng cách sử dụng phương pháp khởi tạo, thì 
nó sẽ coi mỗi giá trị là một phần tử trên mảng, và chiều dài của mảng chính là số các tham 
số. 
Bạn không cần phải chỉ định rõ tất cả các phần tử trên mảng mới. Nếu bạn đặt hai 
dấu phẩy vào hàng, thì mảng sẽ được tạo với những chốn trống cho những phần tử chưa 
được định nghĩa như ví dụ dưới đây: 
Nếu một mảng được tạo bằng cách khởi tạo(initializer) ở mức cao nhất, mỗi lần 
mảng đó xuất hiện trong các biểu thức, JavaScript sẽ đánh giá lại nó một lần. Ngoài ra, 
nếu sử dụng việc khởi tạo này trong một hàm thì mỗi lần gọi hàm, mảng sẽ được khởi tạo 
một lần 
Ví dụ1: Tạo một mảng coffees với 3 phần tử và độ dài của mảng là 3: 
Khoa Toan tin, Đại học Quốc gia Hà Nội 
JavaScript 70 
coffees = [“French Roast”,”Columbian”,”Kona”] 
Ví dụ 2: Tạo ra một mảng với 2 phần tử được khởi đầu và một phần tử rỗng: 
fish = [“Lion”, ,” Surgeon”] 
Với biểu thức này, fish[0] là “Lion”, fish[2] là ” Surgeon”, và fish[2] chưa được 
định nghĩa 
5.1.2. SỬ DỤNG MỘT HÀM XÂY DỰNG(CONSTRUCTOR FUNCTION) 
Bạn có thể tạo ra đối tượng của riêng mình với hai bước sau: 
1. Định nghĩa kiểu của đối tượng bằng cách viết một hàm xây dựng. 
2. Tạo ra một cá thể của đối tượng đó bằng toán tử new 
Để định nghĩa một kiểu đối tượng, ta phải tạo ra một hàm để chỉ định rõ tên, các 
thuộc tính và các cách thức của kiểu đối tượng đó. Ví dụ giả sử bạn muốn tạo một kiểu 
đối tượng ô tô với tên là car, có các thuộc tính make, model, year và color, để thực hiện 
việc này có thể viết một hàm như sau: 
function car(make, model, year ){ 
 this.make = make 
 this.model = model 
 this.year = year 
} 
 Chú ý việc sử dụng toán tử this để gán giá trị cho các thuộc tính của đối tượng 
phải thông qua các tham số của hàm. 
Ví dụ, bạn có thể tạo một đối tượng mới kiểu car như sau: 
mycar = new car(“Eagle”,”Talon TSi”,1993) 
Câu lệnh này sẽ tạo ra đối tượng mycar và liên kết các giá trị được đưa vào với các 
thuộc tính. Khi đó giá trị của mycar.make là “Eagle”, giá trị của mycar.model là “Talon 
TSi”, và mycar.year là một số nguyên 1993....Cứ như vậy bạn có thể tạo ra nhiều đối 
tượng kiểu car. 
Một đối tượng cũng có thể có những thuộc tính mà bản thân nó cũng là một đối 
tượng. Ví dụ bạn định nghĩa thêm một đối tượng khác là person như sau: 
function person(name, age, sex){ 
 this.name=name 
 this.age=age 
 this.sex=sex 
} 
Và sau đó ta tạo ra hai người mới: 
rank = new person(“Rank McKinnon”,33,”M”) 
ken = new person(“Ken John”,39,”M”) 
Bây giờ bạn định nghĩa lại hàm xây dựng car như sau: 
function car(make, model, year,owner ){ 
 this.make = make 
 this.model = model 
 this.year = year 
 this.owner = owner 
} 
Khoa Toan tin, Đại học Quốc gia Hà Nội 
JavaScript 71 
Như vậy bạn có thể tạo đối tượng kiểu car mới: 
car1 = new car(“Eagle”,”Talon TSi”,1993,rank) 
car2 = new car(“Nissan”,”300ZX”,1992,ken) 
Như vậy, thay vì phải qua một xâu ký tự hay một giá trị số khi tạo đối tượng, ta chỉ cần 
đưa hai đối tượng đã được tạo ở câu lệnh trên vào dòng tham số của đối tượng mới tạo. Ta 
cũng có thể lấy được thuộc tính của đối tượng owner bằng câu lênh sau: 
 car2.owner.name 
Chú ý rằng bạn cũng có thể tạo ra một thuộc tính mới cho đối tượng trước khi định nghĩa 
nó, ví dụ: 
car1.color=”black” 
Như vậy, thuộc tính color của đối tượng car1 được gán là “black”. Tuy nhiên, nó sẽ 
không gây tác động tới bất kỳ một đối tượng kiểu car nào khác. Nếu muốn thêm thuộc 
tính cho tất cả các đối tượng thì phải định nghĩa lại hàm xây dựng đối tượng. 
5.1.3. LẬP MỤC LỤC CHO CÁC THUỘC TÍNH CỦA ĐỐI TƯỢNG 
 Trong Navigator 2.0, bạn có thể gọi thuộc tính của một đối tượng bằng tên thuộc 
tính hoặc bằng số thứ tự của nó. Tuy nhiên từ Navigator 3.0 trở đi, nếu ban đầu bạn định 
nghĩa một thuộc tính bằng tên của nó, bạn sẽ luôn luôn phải gọi nó bằng tên, và nếu bạn 
định nghĩa một thuộc tính bằng chỉ số thì bạn cũng luôn luôn phải gọi tới nó bằng chỉ số. 
Điều này ứng dụng khi bạn tạo một đối tượng với những thuộc tính của chúng 
bằng hàm xây dựng (như ví dụ về kiểu đối tượng car ở phần trước) và khi bạn định nghĩa 
những thuộc tính của riêng một đối tượng (như mycar.color=”red”). Vì vậy nếu bạn định 
nghĩa các thuộc tính của đối tượng ngay từ đầu bằng chỉ số như mycar[5]=”25 mpg”, bạn 
có thể lần lượt gọi tới các thuộc tính khác như mycar[5]. 
Tuy nhiên điều này là không đúng đối với những đối tượng tương ứng của HTML 
như mảng form. Bạn có thể gọi tới các đối tượng trong mảng bởi số thứ tự hoặc tên của 
chúng. Ví dụ thẻ thứ hai trong một document có thuộc tính NAME là 
“myform” thì bạn có thể gọi tới form đó bằng document.form[1] hoặc 
document.form[“myForm”] hoặc document.myForm 
5.1.4. ĐỊNH NGHĨA THÊM CÁC THUỘC TÍNH CHO MỘT KIỂU ĐỐI 
TƯỢNG 
Bạn có thể thêm thuộc tính cho một kiểu đối tượng đã được định nghĩa trước bằng 
cách sử dụng thuộc tính property. Thuộc tính được định nghĩa này không chỉ có tác dụng 
đối với một đối tượng mà có tác dụng đối với tất cả các đối tượng khác cùng kiểu.Ví dụ 
sau thực hiện thêm thuộc tính color cho tất cả các đối tượng kiểu car, sau đó gắn một giá 
trị màu cho thuộc tính color của đối tượng car1: 
car.prototype.color=null 
car1.color=”red” 
5.1.5. ĐỊNH NGHĨA CÁC CÁCH THỨC 
Một cách thức là một hàm được liên kết với một đối tượng. Bạn định nghĩa một 
cách thức cũng có nghĩa là bạn định nghĩa một hàm chuẩn. Bạn có thể sử dụng cú pháp 
sau để gắn một hàm cho một đối tượng đang tồn tại: 
object.methodname = function_name 
Khoa Toan tin, Đại học Quốc gia Hà Nội 
JavaScript 72 
Trong đó object là đối tượng đang tồn tại, methodname là tên cách thức và 
function_name là tên hàm 
Bạn có thể gọi cách thức này từ đối tượng như sau: 
object.methodname() 
Bạn có thể định nghĩa cách thức cho một kiểu đối tượng bằng cách đưa cách thức 
đó vào trong hàm xây dựng đối tượng. Ví dụ bạn có thể định nghĩa một hàm có thể định 
dạng và hiển thị các thuộc tính của các đối tượng kiểu car đã xây dựng ở phần trước: 
function displayCar () { 
var result = “Abeautiful”+this.year+ “ ”+ this.make + “ ”+ this.model 
document.write(result) 
} 
Bạn có thể thêm cách thức này vào cho đối tượng car bằng cách thêm dòng lệnh 
sau vào hàm định nghĩa đối tượng 
this.displayCar= displayCar; 
Như vậy có thể định nghĩa lại đối tượng car như sau: 
function car(make, model, year,owner ){ 
 this.make = make 
 this.model = model 
 this.year = year 
 this.owner = owner 
 this.displayCar= displayCar 
} 
 Sau đó, bạn có thể gọi cách thức displayCar đối với mỗi đối tượng: 
car1.displayCar() 
car2.displayCar() 
5.1.6. SỬ DỤNG CHO CÁC THAM CHIẾU ĐỐI TƯỢNG (OBJECT 
REFERENCES) 
 JavaScript có một từ khoá đặc biệt là this mà bạn có thể sử dụng nó cùng với một 
cách thức để gọi tới đối tượng hiện thời. Ví dụ, giả sử bạn có một hàm validate dùng để 
xác nhận giá trị thuộc tính của một đối tượng nằm trong một khoảng nào đó: 
function validate(obj, lowval, hival){ 
 if ( (obj.valuehival) ) 
 alert(“Invalid value!”) 
} 
 Sau đó bạn có thể gọi hàm validate từ mỗi thẻ sự kiện onChange: 
<INPUT TYPE=”TEXT” NAME=”AGE” SIZE=3 
onChange=”validate(this,18,99)” > 
Khi liên kết với một thuộc tính form, từ khoá this có thể gọi tới form cha của đối 
tượng hiện thời. Trong ví dụ sau, myForm có chứa đối tượng Text và một nút bấm. Khi 
người sử dụng kích vào nút bấm, trường text sẽ hiển thị tên form. Thẻ sự kiện onClick của 
nút bấm sử dụng this.form để gọi tới form cha là myForm. 
Form name: 
Khoa Toan tin, Đại học Quốc gia Hà Nội 
JavaScript 73 
<INPUT TYPE=”button” NAME=”button1” 
value=”Show Form Name” 
onClick=”this.form.text1.value=this.form.name”> 
5.1.7. XOÁ ĐỐI TƯỢNG 
Trong JavaScript cho Navigator 2.0, bạn không thể xoá các đối tượng-chúng vẫn 
tồn tại trong khi bạn đã rời khỏi trang đó. Trong khi JavaScript cho Navigator 3.0 cho 
phép bạn có thể xoá một đối tượng bằng cách đặt cho nó trỏ tới giá trị Null (nếu như đó là 
lần cuối cùng gọi tới đối tượng). JavaScript sẽ đóng đối tượng đó ngay lập tức thông qua 
biểu thức gán. 
Khoa Toan tin, Đại học Quốc gia Hà Nội 
JavaScript 74 
6. BẢNG TỔNG KẾT CÁC TỪ KHOÁ 
Sau đây là các từ đựoc định nghĩa là một phần trong ngôn ngữ JavaScript và không được 
sử dụng là tên biến: 
abstract eval int static 
boolean extends interface super 
break false long switch 
byte final native synchrinized 
case finally new this 
catch float null throw 
char for package throws 
class function parseFloat transient 
const goto parseInt true 
continue if private try 
default implements protected var 
do import public void 
double in return while 
else instanceof short with 
Khoa Toan tin, Đại học Quốc gia Hà Nội 
JavaScript 75 
7. TỔNG KẾT 
Như vậy, tài liệu không những đã giới thiêu sơ qua về JavaScript, mà nó còn là sách tham 
khảo hết sức hữu ích để phát triển ứng dụng của bạn. 
Bạn có thể tham khảo toàn diện JavaScript trong quyển Teach Yourself JavaScript in 14 
Days, hoặc JavaScript Guide 
Do JavaScript là ngôn ngữ còn mới và có sự thay đổi nhanh chóng, bạn nên đến với trang 
Web của hãng Netscape (  ) để có các thông tin mới nhất về 
ngôn ngữ này. 
Khoa Toan tin, Đại học Quốc gia Hà Nội