JavaScript – Wikipedia tiếng Việt

JavaScript là một ngôn ngữ
lập trình dựa trên nguyên mẫu
với cú pháp phát triển từ C. Giống như C, JavaScript có khái niệm
từ khóa
, do đó, JavaScript gần như không thể được mở rộng.
Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (
input/output
) riêng. Trong khi C sử dụng
thư viện
xuất/nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập.
Trên
trình duyệt
, rất nhiều
trang web
sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ
HTML
như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,... Ở
Việt Nam
, JavaScript còn được ứng dụng để làm
bộ gõ tiếng Việt
giống như bộ gõ hiện đang sử dụng trên trang
Wikipedia tiếng Việt
. Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn
W3C
DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm
DHTML
Ajax
và
SPA
Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong
tập tin
PDF
của
Adobe Acrobat
và
Adobe Reader
. Điều khiển Dashboard trên
hệ điều hành
Mac OS X
phiên bản 10.4 cũng có sử dụng JavaScript. Công nghệ
kịch bản linh động
active scripting
) của Microsoft có hỗ trợ ngôn ngữ JScript làm một ngôn ngữ kịch bản dùng cho hệ điều hành.
JScript.NET
là một ngôn ngữ tương thích với
CLI
gần giống JScript nhưng có thêm nhiều tính năng lập trình hướng đối tượng.
Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một ngôn ngữ
đa nền tảng
khi có thể chạy trên cả môi trường máy chủ cũng như môi trường nhúng.
Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần như giống nhau.
Dấu cách
tab
và
ký tự dòng mới
sử dụng bên ngoài một chuỗi ký tự được gọi là
khoảng trắng
. Khác với C, khoảng trắng trong JavaScript có thể ảnh hưởng trực tiếp tới ý nghĩa của câu lệnh. Sử dụng phương pháp "tự động thêm
dấu chấm phẩy
", bất cứ một dòng JavaScript nào thích hợp sẽ được coi là một câu lệnh hợp lệ (giống như có dấu chấm phẩy trước ký tự dòng mới).
Tuy trong phần lớn trường hợp, dấu chấm phẩy trước khi kết thúc một dòng JavaScript là không cần thiết để đoạn
mã nguồn
hoạt động chính xác,
lập trình viên
nên sử dụng dấu chấm phẩy sau mỗi câu lệnh để đoạn mã nguồn dễ nhìn hơn. Ngoài ra, do đặc thù của JavaScript - chuyên dùng trên trang web, kích cỡ của đoạn mã nguồn là quan trọng, có một số
phần mềm
có thể làm giảm kích cỡ của đoạn mã nguồn JavaScript bằng cách bỏ đi những khoảng trắng không cần thiết, để những phần mềm này hoạt động chính xác, lập trình viên cần thêm dấu chấm phẩy vào cuối mỗi câu lệnh.
Cú pháp
chú thích
của JavaScript giống với
C++
. Lập trình viên có thể chú thích trên nhiều dòng bằng cách bao bọc chú thích với /* và */ hoặc sử dụng // để chú thích từ vị trí // đến hết dòng.
// Đây là chú thích trên một dòng.
/*
Đây là chú thích trên nhiều dòng.
Đây là chú thích 1
Đây là chú thích 2
*/
Trước khi sử dụng
biến
trong JavaScript, lập trình viên không nhất thiết phải khai báo biến. Có 3 cách để định nghĩa biến trong JavaScript:
// ECMAScript 5 trở về trước
var
tên_biến
// Từ ECMAScript 6
let
ten_bien
const
ten_hang
// giá trị của biến khi được khai báo bằng const không thay đổi được giá trị
Ngoài ra, lập trình viên có thể chỉ việc gán cho biến một giá trị để sử dụng biến đó. Biến được định nghĩa ngoài tất cả các
hàm
hoặc được sử dụng mà không khai báo với cú pháp
var
sẽ được coi là
biến toàn cục
, những biến này có thể sử dụng trên toàn trang web. Biến được khai báo với
var
bên trong một hàm là biến cục bộ của hàm đó và chỉ có thể sử dụng được bên trong hàm đó.
Từ ECMAScript 6 trở đi, có thể khai báo với
let
và
const
để chỉ biến có thể thay đổi hoặc không thay đổi được.
Một
toán tử
xác định phép toán sẽ được thực hiện trên các giá trị của các
biến
, và các biểu thức. Javascript cung cấp nhiều loại toán tử khác nhau để thực hiện việc tính toán, và đánh giá từ đơn giản đến phức tạp.
Các toán tử của Javascript được phân thành sáu thể loại dựa trên loại hành động của chúng thực hiện với các toán hạng. Bao gồm toán tử số học, toán tử quan hệ, toán tử luận lý, toán tử thao tác bit, toán tử gán, toán tử đặc biệt.
Các toán tử số học là các toán tử nhị phân, khi chúng thực hiện các phép tính cơ bản trên hai toán hạng. Toán tử xuất hiện ở giữa hai toán hạng, cho phép bạn thực hiện các phép tính với giá trị số và chuỗi. Các toán tử bao gồm:
(cộng),
(trừ),
(nhân),
(chia),
(chia lấy dư).
Ví dụ:
var
result
result
// result = 6
result
// result = -2
result
// result = 8
result
// result = 0.5
result
// result = 2
Các toán tử tăng và giảm là các toán tử đơn hạng, vì chúng chỉ thực hiện được trên một toán hạng duy nhất. Toán tử tăng làm tăng giá trị lên 1, trong khi toán tử giảm làm giảm giá trị xuống 1, các toán tử có thể được đặt trước, hoặc sau toán hạng. Các toán tử bao gồm:
++
(tăng),
--
(giảm).
Ví dụ:
var
var
++
// x = 3, y = 2
++
// x = 3, y = 3
--
// x = 1, y = 2
--
// x = 1, y = 1
Toán tử quan hệ là các toán tử dùng để so sánh giữa hai toán hạng. Sau khi thực hiện một so sánh, chúng trả lại một giá trị true (đúng) hay false (sai). Các toán tử bao gồm:
==
(bằng nhau),
!=
(khác nhau),
===
(bằng nhau và cùng loại),
!==
(khác nhau và khác loại),
(lớn hơn),
(nhỏ hơn),
>=
(lớn hơn hoặc bằng),
<=
(nhỏ hơn hoặc bằng).
Ví dụ:
var
result
result
==
"3"
// result = true
result
!=
// result = false
result
===
"3"
// result = false
result
!==
"3"
// result = true
result
// result = false
result
// result = true
result
>=
// result = true
result
<=
// result = true
Các toán tử luận lý là các toán tử nhị phân thực hiện các phép toán logic trên hai toán hạng. Chúng thuộc loại toán tử quan hệ, vì chúng trả về một giá trị boolean. Các toán tử bao gồm:
&&
(và),
||
(hoặc),
(phủ định).
Ví dụ:
var
var
result
result
==
&&
==
);
// result = false
result
==
||
==
);
// result = true
result
==
);
// result = true
Toán tử điều kiện còn được biết đến với tên gọi
toán tử 3 ngôi
. Cú pháp của toán tử này như sau:
điều_kiện
biểu_thức_đúng
biểu_thức_sai
Toán tử này sẽ trả lại giá trị là kết quả của biểu_thức_đúng nếu điều_kiện có giá trị boolean bằng true, ngược lại nó sẽ trả lại giá trị bằng biểu_thức_sai.
Cú pháp
if... else
dùng trong trường hợp muốn rẽ nhánh theo điều kiện. Cú pháp này tương đương với nếu x thì làm y, còn nếu không thì làm z. Các câu lệnh
if... else
có thể lồng trong nhau.
Cú pháp:
if
biểu_thức_1
khối
lệnh
được
thực
hiện
nếu
biểu
thức
đúng
else
if
biểu_thức_2
khối
lệnh
được
thực
hiện
nếu
biểu
thức
sai
và
biểu
thức
đúng
else
khối
lệnh
được
thực
hiện
nếu
cả
hai
biểu
thức
trên
đều
sai
Ví dụ:
var
prompt
"Nhập vào giá trị của x:"
);
parseFloat
);
if
isNaN
))
if
alert
"x > 0"
);
else
if
==
alert
"x = 0"
);
else
alert
"x < 0"
);
else
alert
"giá trị bạn nhập không phải là một số"
);
Đoạn mã nguồn trên mở một hộp thoại yêu cầu nhập vào một giá trị số, sau đó hiển thị thông báo số đó lớn hơn 0, bằng 0 hay nhỏ hơn 0.
Cú pháp
switch
cũng là cú pháp điều kiện như
if... else
hay toán tử tam phân. Tuy nhiên, cú pháp
switch
thường được dùng khi chỉ cần so sánh bằng với số lượng kết quả cần kiểm tra lớn. Cách sử dụng cú pháp
switch
switch
biểu_thức_điều_kiện
case
kết_quả_1
khối
lệnh
cần
thực
hiện
nếu
biểu_thức_điều_kiện
bằng
kết_quả_1
break
case
kết_quả_2
khối
lệnh
cần
thực
hiện
nếu
biểu_thức_điều_kiện
bằng
kết_quả_2
break
default
khối
lệnh
cần
thực
hiện
nếu
biểu_thức_điều_kiện
cho
ra
một
kết
quả
khác
break
Sau mỗi khối lệnh trong một mục kiểm tra kết quả (trừ mục
default
), lập trình viên cần phải thêm vào
break
Vòng lặp
while
có mục đích lặp đi lặp lại một khối lệnh nhất định cho đến khi biểu thức điều kiện trả về
false
. Khi dùng vòng lặp
while
phải chú ý tạo lối thoát cho vòng lặp (làm cho biểu thức điều kiện có giá trị
false
), nếu không đoạn mã nguồn sẽ rơi vào
vòng lặp vô hạn
, là một
lỗi lập trình
. Vòng lặp
while
thường được dùng khi lập trình viên không biết chính xác cần lặp bao nhiêu lần. Cú pháp của vòng lặp
while
như sau:
while
biểu_thức_điều_kiện
khối
lệnh
cần
thực
hiện
nếu
biểu_thức_điều_kiện
trả
về
true
Về cơ bản, vòng lặp
do... while
gần như giống hệt như vòng lặp
while
. Tuy nhiên, trong trường hợp biểu thức điều kiện trả về
false
ngay từ đầu, khối lệnh trong vòng lặp
while
sẽ không bao giờ được thực hiện, trong khi đó, vòng lặp
do... while
luôn đảm bảo khối lệnh trong vòng lặp được thực hiện ít nhất một lần. Ví dụ:
do
alert
"do... while"
);
// Bạn sẽ nhận được thông báo "do... while" một lần duy nhất
while
);
Cú pháp của vòng lặp
do... while
như sau:
do
khối
lệnh
while
biểu_thức_điều_kiện
);
Vòng lặp
for
thường được sử dụng khi cần lặp một khối lệnh mà lập trình viên biết trước sẽ cần lặp bao nhiêu lần. Cú pháp của vòng lặp
for
như sau:
for
biểu_thức_khởi_tạo
biểu_thức_điều_kiện
biểu_thức_thay_đổi_giá_trị
Khối
lệnh
cần
lặp
Khi bắt đầu vòng lặp
for
, lập trình viên cần khởi tạo một biến nhất định bằng biểu_thức_khởi_tạo để dùng trong biểu_thức_điều_kiện, nếu biểu_thức_điều_kiện trả về
true
, khối lệnh cần lặp sẽ được thực hiện, sau khi thực hiện xong khối lệnh cần lặp, biểu_thức_thay_đổi_giá_trị sẽ được thực hiện, tiếp theo, biểu_thức_điều_kiện sẽ lại được kiểm tra, cứ như vậy cho đến khi biểu_thức_điều_kiện trả về
false
, khi đó vòng lặp sẽ kết thúc.
Vòng lặp
for... in
dùng để lặp qua tất cả các thuộc tính của một đối tượng (hay lặp qua tất cả các phần tử của một mảng). Cú pháp của vòng lặp này như sau:
for
biến
in
đối_tượng
khối
lệnh
cần
thực
hiện
có
thể
sử
dụng
đối_tượng
biến
để
truy
cập
từng
thuộc
tính
phần
tử
của
đối
tượng
Hàm là một khối các câu lệnh với một danh sách một hoặc nhiều
đối số
(có thể không có đối số) và thường có tên (mặc dù trong JavaScript hàm không nhất thiết phải có tên). Hàm có thể trả lại một giá trị. Cú pháp của hàm như sau:
//ECMAScript 5 trở về trước
function
tên_hàm
đối_số_1
đối_số_2
//câu lệnh
//ECMAScript 6 trở đi
const
tên_hàm
đối_số_1
đối_số_2
)=>{
// là arrow function
//câu lệnh
//Thực thi
tên_hàm
);
// Gọi hàm tên_hàm với hai đối số 1 và 2 ứng với đối_số_1 và đối_số_2
tên_hàm
);
// Gọi hàm tên_hàm với đối_số_1 có giá trị 1, đối_số_2 có giá trị undefined
Trong JavaScript, khi gọi hàm không nhất thiết phải gọi hàm với cùng số đối số như khi định nghĩa hàm, nếu số đối số ít hơn khi định nghĩa hàm, những đối số không được chuyển cho hàm sẽ mang giá trị
undefined
Các kiểu cơ bản sẽ được chuyển vào hàm
theo giá trị
, đối tượng sẽ được chuyển vào hàm
theo tham chiếu
Hàm là
đối tượng hạng nhất
trong JavaScript. Tất cả các hàm là đối tượng của nguyên mẫu
Function
. Hàm có thể được tạo và dùng trong phép toán gán như bất kỳ một đối tượng nào khác, và cũng có thể được dùng làm đối số cho các hàm khác. Do đó, JavaScript hỗ trợ
hàm cấp độ cao
. Ví dụ:
Array
prototype
fold
function
value
functor
var
result
value
for
var
this
length
++
result
functor
result
this
]);
return
result
var
sum
10
].
fold
function
return
});
Đoạn mã nguồn trên sẽ trả lại kết quả là 55.
Vì hàm trong JavaScript là đối tượng, lập trình viên có thể khởi tạo hàm ẩn danh:
Một ví dụ sử dụng hàm ẩn danh trong JavaScript:
document
onkeypress
function
alert
"Bạn vừa nhấn một phím trên bàn phím"
);
Hàm trên sẽ hiển thị thông báo khi một số phím trên
bàn phím
có thể gây sự kiện
onkeypress
được nhấn.
Mặc định, tất cả các thành phần của đối tượng thuộc phạm vi công cộng (
public
). Trong JavaScript, không có khái niệm thành phần riêng hay thành phần được bảo vệ (
private
và
protected
), tuy nhiên những tính năng này có thể được giả lập.
Mảng trong JavaScript là một bảng liên kết
chỉ mục
đến giá trị. Trong JavaScript, tất cả các đối tượng đều có thể liên kết chỉ mục đến giá trị, nhưng mảng là một đối tượng đặc biệt có thêm nhiều tính năng xử lý chỉ mục và dữ liệu đặc biệt (ví dụ:
push
join
, v.v.)
Mảng trong JavaScript có thuộc tính
length
. Thuộc tính
length
của JavaScript luôn luôn lớn hơn số chỉ mục lớn nhất trong mảng một đơn vị. Trong phần lớn ngôn ngữ lập trình, những thuộc tính có tính năng như
length
thường là thuộc tính
chỉ đọc
, tuy nhiên, với JavaScript, lập trình viên có thể thay đổi thuộc tính
length
. Bằng cách thay đổi thuộc tính
length
, lập trình viên có thể làm mảng lớn hơn hoặc nhỏ hơn (và xóa đi những chỉ mục lớn hơn hoặc bằng thuộc tính
length
mới).
Mảng trong JavaScript là
mảng rải rác
, có nghĩa là cho dù lập trình viên có một mảng như sau:
var
test
new
Array
();
test
test
100
Trong trường hợp này, dù mảng có đến chỉ mục mang số 100 thì mảng cũng chỉ chiếm bộ nhớ của hai số 0 và 5. Tuy nhiên, thuộc tính
length
sẽ có giá trị 101 do chỉ mục lớn nhất của mảng trong ví dụ trên là 100.
Ngoài ra, mảng cũng có thể được khai báo một cách ngắn gọn, cách này thông thường được sử dụng:
Một số ví dụ về mảng:
var
test
new
Array
10
);
// Tạo một mảng 10 chỉ mục
var
test2
new
Array
,,
);
// Tạo một mảng với bốn giá trị và 5 chỉ mục
var
test3
new
Array
();
test3
"1"
123
// Hoàn toàn đúng cú pháp
Lập trình viên cũng có thể định nghĩa cấu trúc bằng đối tượng như sau:
var
myStructure
name
first
"Mel"
last
"Smith"
},
age
33
hobbies
"chess"
"jogging"
};
Cú pháp định nghĩa cấu trúc bằng đối tượng trên có một chuẩn trên danh nghĩa là
JSON
Đối tượng trong JavaScript là một thực thể có tên xác định và có
thuộc tính
trỏ đến giá trị, hàm hoặc cũng có thể là một đối tượng khác. Có nghĩa là, đối tượng trong JavaScript là một
mảng kết hợp
associative array
) tương tự như mảng trong
PHP
hay
từ điển
trong
Python
PostScript
hoặc
Smalltalk
JavaScript có một số đối tượng định nghĩa sẵn, bao gồm mảng (
Array
), boolean (
Boolean
), ngày tháng (
Date
), hàm (
Function
),
toán học
Math
),
số
Number
), đối tượng (
Object
),
biểu thức tìm kiếm
RegExp
),
chuỗi
String
), symbol (
Symbol
). Các đối tượng khác là đối tượng dùng để truy cập và điều khiển các khía cạnh của trình duyệt, bao gồm window, history, navigator, location, screen, document, form,..
Từ ECMAScript 6 trở đi, Javascript đã hỗ trợ
class, interface
giúp việc lập trình hướng đối tượng trở nên dễ dàng hơn.
Lập trình viên có thể thêm hoặc xóa thuộc tính hoặc hàm trong đối tượng sau khi đối tượng đã được tạo. Để làm việc này cho tất cả các đối tượng được tạo từ cùng một hàm khởi tạo, lập trình viên có thể sử dụng thuộc tính
prototype
của hàm khởi tạo để truy cập đối tượng nguyên mẫu. Lập trình viên không nhất thiết phải tự xóa các đối tượng đã tạo, JavaScript tự động
gom rác
tất cả những biến không còn được dùng nữa.
Ví dụ:
function
samplePrototype
()
this
attribute1
"someValue"
// thêm một thuộc tính cho đối tượng
this
attribute2
234
// thêm thuộc tính nữa cho đối tượng
this
function1
testFunction
// thêm một hàm vào đối tượng
function
testFunction
()
alert
this
attribute2
);
//hiển thị 234
var
sampleObject
new
samplePrototype
// khởi tạo một đối tượng
sampleObject
function1
();
// gọi hàm function1 của đối tượng sampleObject
sampleObject
attribute3
123
// thêm một thuộc tính nữa cho đối tượng sampleObject
delete
sampleObject
attribute1
// xóa bỏ 1 thuộc tính
delete
sampleObject
// xóa bỏ đối tượng
Tùy theo
môi trường phát triển
, sửa lỗi JavaScript có thể sẽ rất khó khăn. Với dùng trên trang web, hiện tại, các trình duyệt dựa trên
Gecko
(như Mozilla,
Mozilla Firefox
) có công cụ
tìm diệt lỗi
rất tốt (
Venkman
), ngoài ra còn kèm theo một công cụ kiểm tra DOM.
Các phiên bản mới hơn của JavaScript (như bản dùng trên Internet Explorer 5 và Netscape 6) hỗ trợ mệnh đề
quản lý lỗi
try... catch... finally
, mệnh đề này bắt nguồn từ Java giúp lập trình viên quản lý
lỗi thời gian chạy
hoặc quản lý
ngoại lệ
xuất phát từ
cú pháp throw
. Cú pháp của mệnh đề này như sau:
try
Khối
lệnh
cần
thực
hiện
có
thể
gây
lỗi
catch
error
Khối
lệnh
cần
thực
hiện
trong
trường
hợp
có
lỗi
finally
Khối
lệnh
luôn
được
thực
hiện
Trong cú pháp trên error là một đối tượng
Error
có hai thuộc tính theo chuẩn ECMAScript phiên bản 3:
error.message
: Thông điệp diễn giải lỗi
error.name
: Tên lỗi
Tuy nhiên mỗi trình duyệt sử dụng một bản JavaScript khác nhau, trong các trình duyệt lớn và phổ dụng không có trình duyệt nào hoàn toàn tuân thủ theo chuẩn ECMAScript phiên bản 3. Ví dụ như Internet Explorer 6 SP 1 có thêm hai thuộc tính:
error.number
: Bí số của lỗi
error.description
: Thông điệp diễn giải lỗi
Còn Mozilla Firefox 1.07 có thêm ba thuộc tính:
error.fileName
: Tên tập tin xảy ra lỗi
error.lineNumber
: Dòng xảy ra lỗi
error.stack
: Cả hai thuộc tính trên gộp lại trong một chuỗi ký tự
Phần
finally
là không bắt buộc. Lập trình viên hoàn toàn có thể sử dụng
try... catch
mà không có
finally
Các
ngôn ngữ lập trình kịch bản
rất dễ bị ảnh hưởng bởi lỗi, hơn nữa, mỗi một trình duyệt, mỗi một
công ty
ứng dụng JavaScript một cách hoàn toàn khác nhau nên lập trình viên JavaScript thường phải dành rất nhiều thời gian sửa lỗi để đảm bảo đoạn mã nguồn của mình sẽ hoạt động tốt. Trong những trang HTML mà thẻ
script
và các đoạn mã HTML khác xen kẽ lẫn nhau, lỗi cú pháp có thể được phát hiện dễ dàng hơn bằng cách để mỗi hàm trong một thẻ
script
riêng biệt hoặc có thể sử dụng nhiều tệp.js khác nhau. Trong nhiều trường hợp, cách này còn giúp tránh làm hỏng cả trang web trong trường hợp có lỗi trong một đoạn mã nguồn.