Bài giảng Lập trình ứng dụng mạng - Javascript - Nguyễn Hồ Minh Đức

1
JAVASCRIPT
ThS. Nguyễn Hồ Minh Đức
 2
GIỚI THIỆU VỀ JAVASCRIPT 
 Javascript ra đời với tên gọi LiveScript, sau đó Nescape 
đổi tên thành Javascript. Tuy nhiên giữa Java và 
Javascript có rất ít các điểm chung dù rằng cú pháp của 
chúng có thể có những điểm giống nhau.
 Ngôn ngữ Javascript được tạo bởi Nescape vào năm 
1996 và được đưa vào trong trình duyệt Nescape 
Navigator 2.0 của họ thông qua trình biên dịch để đọc và 
thực hiện các mã lệnh Javascript được kèm theo trong 
các trang HTML..
 Javascript là một ngôn ngữ kịch bản (script) để viết kịch 
bản cho phía client. Client side là những yêu cầu của 
người sử dụng được xử lý tại máy khách. Thông thường 
những yêu cầu này là tính tóan, kiểm tra tính hợp lệ của 
dữ liệu hay các hiệu ứng, các yêu cầu này thường không 
liên quan đến nguồn cơ sở dữ liệu trên server.
 3
1. Đặc điểm của JAVASCRIPT:
a) Javascript là một ngôn ngữ kịch bản được viết 
chung với HTML. 
b) Javascript là trình thông dịch.
c) Javascript là ngôn ngữ động vì các đối tựơng 
có khả năng tương tác với nhau thông qua 
người sử dụng hoặc các sự kiện. 
d) Là ngôn ngữ hướng đối tượng. Phân biệt chữ 
hoa, chữ thường 
e) Được hỗ trợ bởi tất cả các trình duyệt như 
Nescape và Internet Explorer
f) JavaScript có khả năng tạo và sử dụng các 
đối tượng(Object)
 4
1. Các đối tượng trong JavaScript gồm 2 nhóm:
a) Các object có sẳn trong JavaScript 
JavaScript cung cấp một bộ các Built–in Object để cung 
cấp các thông tin về sự hiện hành của các đối tượng 
được load trong trang Web và nội dung của nó, các đối 
tượng này gồm phương thức (method) làm việc với các 
thuộc tính (properties) của nó.
a) Các Object do người lập trình xây dựng:
Định nghĩa thuộc tính, phương thức của đối tượng:
Cú pháp:
ObjectName.PropertiesName
ObjectName.Method()
 5
CẤU TRÚC CỦA ĐOẠN JAVASCRIPT
1. Nhúng Javascript vào tập tin HTML
Các l nh Javascriptệ
 Có thể viết nhiều đọan mã Javascript trong 
cùng một tập tin HTML. 
 Các khối mã Javascript có thể đặt bất kỳ vị trí 
nào trong trang HTML. 
 6
Ví dụ 1: 
document.write(“What is your name? ”);
N i dung c a trangộ ủ
 7
Sử dụng tập tin JavaScript bên ngoài:
Có thể viết một tập tin Javascript riêng và sau đó 
kết nối với một hoặc nhiều tập tin trang web khác 
nhau.
Cú pháp:
<Script SRC=”fileJavascript.js” Language="javascript" 
>
JavaScript program
 8
Lưu ý: trong thẻ JavaScript ta có thể bỏ thuộc tính 
SRC và Language, khi đó ngôn ngữ mặc định là 
JavaScript .
1. Môi trường viết JAVASCRIPT:
− Frontpage
− Notepad
− Visual InterDev
− Dreamweaver để viết mã Javascript, 
Dreamweaver hổ trợ phân biệt từ khóa bằng màu 
chữ, hổ trợ các hàm, thuộc tính của các tag, giúp 
người sử dụng thuận tiên trong việc thiết kế và 
viết chương trình
 9
CÚ PHÁP CƠ BẢN CỦA LỆNH
1. Lệnh đơn và khối lệnh:
 Lệnh đơn: là một câu lệnh được kết thúc bằng 
dấu chấm phẩy(;). Trong JavaScript cuối mỗi câu 
lệnh ta có thể dùng dấu (;) hoặc không dùng dấu 
gì cả .
 Khối lệnh: là tập hợp nhiều câu lệnh đơn được 
bao bọc bởi cặp dấu {}
2. Lời chú thích trong chương trình: trình duyệt sẽ 
bỏ qua khi thông dịch chương trình. JavaScript hổ 
trợ 2 loại chú thích:
− Chú thích trên một dòng: dùng cặp dấu //
− Chú thích trên nhiều dòng: dùng cặp dấu /**/
 10
1. Xuất dữ liệu ra trang Web: JavaScript hỗ trợ 2 
phương thức hiển thị dữ liệu ra trang Web là: 
+ document.write() 
+ document.writeln()
− Nếu dữ liệu là chuổi phải được đặt trong cặp 
nháy kép. 
− Nếu xuất giá trị của biến thị không cần đặt trong 
nháy
− Có thể dùng dấu + để nối các chuổi và biến
document.write(“String ” + variable );
− Nếu xuất tag HTML thì cặp tag đó cũng phải đặt 
trong cặp dấu nháy kép
 11
Ví dụ:
document.write (“Tr ng ĐH TĐT TP.HCM");ườ
document.write(" Tr ng ĐH TĐT TP.HCM ườ
");
a =“ĐH TĐT TP.HCM”
document.write(“Tr ng “ + a);ườ
 12
1. Sử dụng document.writeln() và tag :
 Dùng với tag 
document.writeln() 
 Nếu không có cặp tag 
 document.writeln() tạo một khoảng trắng
xuất dữ liệu và xuống dòng
 13
Ví dụ:
document.writeln("Hello");
document.writeln("World");
 14
BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT
1. Biến
− Biến là tên của một phần tử trong chương 
trình, được sử dụng để lưu trữ thông tin do 
người dùng nhập vào hoặc kết quả trung gian 
của quá trình tính toán
− Trong Javascript khi khai báo biến không cần 
xác định kiểu dữ liệu cho biến, do đó khi một 
biến được khai báo thì nó có thể chứa bất kỳ 
kiểu dữ liệu nào.
 15
a) Cách khai báo biến: Trong JavaScript, để khai 
báo biến dùng từ khoá var, cũng có thể bỏ qua 
từ khóa var.
var VariableName;
Ví dụ:
var a ;
Hoặc a=5;//khai báo và khởi tạo
− Một biến có thể được khai báo và khởi tạo 
hoặc không khởi tạo giá trị ban đầu
− Muốn khai báo nhiều biến cùng một lúc thì liệt 
kê tên biến kế tiếp nhau cách nhau bởi dấu (,)
 16
− Một biến có thể chứa bất kỳ kiểu dữ liệu nào, giá 
trị của biến có tác dụng từ vị trí khai báo trở đi
Ví dụ:
var a=”Hello World”;
a=1999 ;
a) Cách xuất giá trị của biến: 
document.write(VariableName )
Ví dụ:
var a=”Hello World”;
a=1999 ;
document.write(a)
 17
a) Quy tắc đặt tên biến: 
Tên biến gồm các chữ cái và số, không dùng các 
ký tự đặc biệt như: ( , [ , { , # , & . theo nguyên 
tắc sau:
a) Tên biến phải bắt đầu bằng ký tự hoặc ký tự 
gạch dưới( _ )
b) Không bắt đầu bằng ký tự số.
c) Không chứa khoảng trắng, tên biến phải gợi 
nhớ
d) Không trùng với từ khoá của JavaScript 
 18
abstract extends Int super
boolean false interface switch
break final Long synchronized
byte finally native this
case float new throw
catch for null throws
char Function package transient
class goto private true
const if protected try
continue implements public var
default import return val
do In short while
double instanceof static with
else
Các từ khoá trong JavaScript 
 19
a) Tầm vực của biến: là tầm ảnh hưởng của biến 
trong chương trình. Có 2 loại biến:
 Biến toàn cục : được khai báo ngoài các 
hàm. Phạm vi hoạt động của biến là từ vị trí 
khai báo trở về sau trong chương trình.
 Biến cục bộ: được khai báo trong chương 
trình con. Phạm vi hoạt động của biến là từ vị 
trí khai báo đến kết thúc chương trình con.
Lưu ý: Nếu tên biến toàn cục và cục bộ trùng 
nhau thì biên được sử dụng trong hàm là biến 
cục bộ.
 20
1. Dữ liệu: Có 4 loại dữ liệu
a) Kiểu số: một biến kiểu số chứa bất kỳ giá trị số 
nào: số thập phân, số nguyên, số dạng chấm 
phẩy động.
b) Kiểu chuổi: một biến kiểu chuổi có thể chứa một 
nhóm ký tự (Chữ cái, ký tự số, khoảng trắng, các 
ký tự đặc biệt, ). Giá trị chuổi phải đặt trong cặp 
dấu nháy đôi (“ “) hoặc đơn (‘ ‘) 
Ví dụ: 
var s1, s2, s3 ;
s1=”Hello World” ;
s2=’Hello World ‘ ;
 21
a) Kiểu Boolean: Là dữ liệu chỉ có 2 giá trị False 
hoặc True thường dùng trong trường hợp biến 
hoặc hàm chỉ nhận một trong 2 trạng thái 
đúng hoặc sai.
b) Kiểu Null: trả về giá trị rỗng 
1. Tóan tử:
a) Tóan tử số học 
 22
Tóan Tử Chức Năng Ví dụ Kết quả
+ cộng x=2; x+2 4
- Trừ x=2; 5-x 3
* Nhân x=4; x*5 20
/ Chia 5/2 2.5
% Chia lấy phần dư 5%2 1
++ Tăng 1 x=5; x++ 6
-- Giảm 1 x=5; x-- x=4
 23
Tóan Tử Ví dụ Tương đương
= x = y 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
a)Toán tử gán
 24
Tóan Tử Chức Năng Ví dụ
= = bằng 5==8 returns false
!= Không bằng 5!=8 returns true
> lớn hơn 5>8 returns false
< nhỏ hơn 5<8 returns true
>= lớn hợn hoặc bằng 5>=8 returns false
<= nhỏ hơn hoặc bằng 5<=8 returns true
a)Toán tử so sánh
 25
Tóan Tử Chức Năng Ví dụ
&& Và x =6; y =3 ;
(x 1) returns true
|| hoặc x = 6 ; y =3
(x==5 || y==5) returns false
! not x=6; y =3;
!(x==y) returns true
a)Toán tử logic
 26
a) Toán tử chuỗi 
Ký hiệu: + : Là phép toán nối hai chuỗi 
Ví dụ:
txt1=”Welcome to”;
txt2=“JavaScript!";
document.write(''+txt1+txt2+''); 
 27
a) Tóan tử Điều kiện: 
Cú pháp: (Điều kiện) ? value1: value2
− Nếu biểu thức điều kiện đúng thì trả về giá trị value 1 
− Nếu biểu thức điều kiện sai thì trả về giá trị value 2 
Ví dụ:
document.write((day="Saturday")? "Weekend": 
"Not Saturday")
 28
a. Một số ký tự đặc biệt: 
− \n : new line
− \t : tab
− \b : BackSpace
− \& : dấu &
− \”: dấu “ 
Ví dụ:
document.write ("You \& i sing \"Happy 
Birthday\".") 
JAVASCRIPT - Functions
ThS. Nguyễn Hồ Minh Đức
ĐỊNH NGHĨA
Hàm là một đọan chương trình có thể được sử dụng 
nhiều lần trong một chương trình để thực hiện một 
tác vụ nào đó.
• Cách xây dựng hàm: Dùng từ khoá function để 
định nghĩa hàm. 
Cú pháp:
function FunctionName ( List_Parameter ) 
{
Khai báo các bi n s d ng trong hàm ;ế ử ụ
Các câu l nh trong JavaScript th c hi n tác ệ ự ệ
v ;ụ
[return [giá tr /bi u th c] ];ị ể ứ
}
− FunctionName: là tên hàm do người lập trình đặt. 
Qui tắc đặt tên hàm giống như tên biến. 
− Sau FunctionName là cặp dấu ngoặc ( ) chứa 
danh sách tham số hình thức. 
− Nếu hàm không có tham số thì sau 
FunctionName cũng phải có cặp dấu ngoặc ( )
− List_Parameter: là danh sách các tham số hình 
thức, nếu có nhiều tham số có thì các tham số 
phải cách nhau bởi dấu phẩy, các tham s này ố
không ch ra ki u d li u c th và cũng không ỉ ể ữ ệ ụ ể
c n t khoá var.ầ ừ
− Câu lệnh return: để kết thúc hàm. nếu hàm có giá trị 
trả về thì return để trả về giá trị
− Sau Return có thể chứa hoặc không chứa một giá trị 
cụ thể hoặc một biểu thức tính toán. 
Ví dụ:
function Display(user , pwd)
{
 document.write(“Ten cua ban la:” + user) ;
 document.write(“Mat khau cua ban la:” + pwd) ;
 return ;
}
1. Cách gọi hàm: Hàm sẽ không thực hiện cho đến khi 
nó được gọi.
− Đối với hàm có đối số ta gọi tên hàm và danh sách 
các giá trị truyền cho đối số đó 
FunctionName(argument1,argument2,etc)
− Đối với hàm không có đối số ta chỉ cần gọi tên hàm 
FunctionName()
− Đối với hàm không có giá trị trả về :
NameFunction(parameter) . 
− Đối với hàm có giá trị trả về :phải gán giá trị trả về 
cho biến
variable= NameFunction(parameter) 
Ví dụ:
Function
function tong(a , b)
{
 c=a+b;
 document.write(c);
}
tong(2,3);
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT
• Hàm alert(): dùng hiển thị một hộp thông báo có 
nút OK
Cú pháp:
alert(“nội dung thông báo”)
Ví dụ:
Function
alert("Hello World")
1. Hàm prompt(): Tạo hộp thoại chứa 2 nút OK 
,Cancel và một textbox để người sd nhập nội dung, 
giá trị trả về của hàm prompt là nội dung nhập trong 
textbox
Cú pháp:
prompt(“nội dung”,giá trị khởi tạo);
ví dụ:
a=prompt("Your Lastname:");
b=prompt("Your FirstName:");
document.write("Your FullName is :"+ a + ' ' + b)
1. Hàm confirm(): Hiển thị hộp thông báo có 2 nút OK và 
Cancel. Hàm trả về giá trị true nếu người sử dụng click 
OK và ngược lại thì trả về giá trị false.
Cúp pháp:
variable=confirm(“Chuoi thong bao”);
Ví dụ:
a=prompt("nhap so a :");
b=prompt("nhap so b");
c=confirm( a +' lon hon '+ b+'?')
if(c == true)
document.write( a +" > "+b )
else
document.write( a +" < "+b )
1. Các hàm thông dụng của chuổi và số:
a) Hàm eval(): Trả về giá trị số của một chuổi số
Cú pháp:
eval(chuổi số)
Ví dụ: 
var str1=”123”, str2=”456”;
 str= str1+str2;
document.write(str); //k t qu :123456ế ả
Ví dụ:
a = eval(prompt(“Nh p s a:”));ậ ố
b = eval(prompt(“Nh p s b:”));ậ ố
c = a+b ;
document.write(c)
a) Hàm ParseInt(strNum) 
− Trả về một số nguyên từ chuổi strNum. 
− Nếu strNum theo sau là ký tự chữ thì các ký tự 
này sẽ bị bỏ qua. 
− Nếu strNum không bắt đầu bằng số thì hàm này 
trả về giá trị NaN (Not a Number)
Ví dụ :
var strNum=”123.8” , kq;
kq=parseInt(strNum) //kq=123
strNum=”a123”
kq=parseInt(strNum) //kq=NaN
strNum=”123.8abc” 
kq=parseInt(strNum) //kq=123
a) Hàm parseFloat(strNum):
− Hàm trả về một số thực từ chuổi strNum. 
− Nếu chuổi strNum bắt đầu là số và theo sau là 
các ký tự chữ thì các ký tự này bị bỏ qua. 
− Nếu chuổi strNum bắt đầu từ ký tự chữ thì hàm 
trả về giá trị NaN.
Ví dụ:
var strNum=”123.8” , kq;
kq=parseFloat(strNum) //kq=123.8
strNum=”a123.8”
kq=parseFloat(strNum) //kq=NaN
strNum=”123.8abc” 
kq=parseFloat(strNum) //kq=123.8
a) Hàm isNaN(str): 
Hàm trả về giá trị True nếu str là chuổi, ngược lại 
là False nếu str là chuổi số.
Ví dụ :
var str=”123abc”, kq;
kq=isNaN(str); //kq=true
str=”123.8”
kq=isNaN(str); //kq=false 
1. Các hàm thiết lập thời gian: 
a) Hàm setTimeout( ): Báo cho JavaScript thực hiện một 
lệnh JavaScript sau một khoảng thời gian nào đó. 
− Hàm trả về một ID (duy nhất đối với mỗi hàm 
setTimeout thực hiện một lệnh) 
− Giá trị ID này dùng để xoá khoảng thời gian đã thiết lập 
nếu không cần thực hiện hàm Timeout nữa 
Cú pháp:
IdTime=setTimeout(“Command JavaScript”, delayTime);
− Command JavaScript : có thể là lời gọi hàm hoặc là 
một câu lệnh đơn 
− delayTime :là khoảng thời gian chờ để thi hành 
Command JavaScript, được tính bằng mili giây. 
Ví dụ: 
Idq=setTimeout(“alert(‘I love you’)”,1000) ; 
Cứ 1000 mili giây thì thông báo “I love you” một lần.
a) Hàm clearTimeout():Huỷ thời gian đã thiết 
lập bởi setTimeout(). 
Cú pháp:
clearTimeout(IdTime);
Ví dụ:
clearTimeout(Idq);
a) Hàm setInterval() và clearInterval():
Ý nghĩa và tham số giống như setTimeout() và 
clearTimeout() .