Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 6: Javascript

1Javascript
Luong Tran Hy Hien
2Nội dung
1. Tổng quan
2. Một ví dụ
3. Ngôn ngữ JavaScript
4. Một số hàm khác
1. Tổng quan
• Là ngôn ngữ Client-side script hoạt động 
trên trình duyệt của người dùng (client).
• Chia sẻ xử lý trong ứng dụng web. Giảm 
các xử lý không cần thiết trên server.
• Giúp tạo các hiệu ứng, tương tác cho 
trang web.
3
Nhúng Javascript vào trang web
Định nghĩa script trực tiếp trong trang html:
<!--
// Lệnh Javascript
-->
Nhúng sử dụng script cài đặt từ 1 file .js khác:
Nhúng Javascript vào trang web
some statements
some statements
method()
// gọi thực hiện các phương thức được định nghĩa
// trong “Tên_file_script.js”
some javascript statements
Nhúng Javascript vào trang web
• Đặt giữa tag và : đoạn
script sẽ thực thi ngay khi trang web được
mở.
• Đặt giữa tag và : Đoạn
script trong phần body được thực thi khi
trang web đang mở (sau khi thực thi các
đoạn script có trong phần ).
• Số lượng đoạn script là không hạn chế.
6
72. Một ví dụ
Sử dụng JavaScript
document.write(“Hello world!”);
document.write(“Hello world!”);
83. NGÔN NGỮ JAVASCRIPT
3.1 Giới thiệu
3.2 Cú pháp và quy ước
3.3 Kiểu dữ liệu
3.4 Khai báo biến, phạm vi biến
3.5 Toán tử
3.6 Một số đối tượng dữ liệu
3.7 Cấu trúc điều khiển
3.8 Hàm
3.9 Lớp - Đối tượng
93.1. Giới thiệu
JavaScript thường dùng
tạo hiệu ứng cho các ảnh trong trang web
trò chơi (game)
trả lời các sự kiện: nhấn chuột, di chuyển chuột,
đọc và ghi các thẻ HTML
kiểm tra tính xác thực của dữ liệu
phát hiện trình duyệt được sử dụng để duyệt web
tạo cookie
...
10
3.2. Cú pháp và quy ước
• Ghi chú: theo cú pháp của C++
– Ghi chú dòng: //
– Ghi chú đoạn: /*  */
11
3.2. Cú pháp và quy ước
break do if switch typeof
case else in this var
catch false instanceof throw void
continue finally new true while
TỪ KHÓA
12
3.2. Cú pháp và quy ước
abstract double goto native static
boolean enum implements package super
byte export import private synchronized
char extends int protected throws
class final interface public transient
const float long short volatile
debugger
TỪ KHÓA
13
3.2. Cú pháp và quy ước
arguments encodeURI Infinity Object String
Array Error isFinite parseFloat SyntaxError
Boolean escape isNaN parseInt TypeError
Date eval Math RangeError undefined
decodeURI EvalError NaN ReferenceError unescape
decodeURIComponent Function Numbe RegExp URIError
TỪ KHÓA
14
3.3. Kiểu dữ liệu
Biến trong JavaScript lưu bất kỳ giá trị của kiểu dữ liệu nào
15
3.4. Khai báo biến, phạm vi biến
• Cách đặt tên biến
– Bắt đầu bằng một chữ cái hoặc dấu _
– A..Z,a..z,0..9,_ : phân biệt HOA, Thường
• Sử dụng từ khóa var để khai báo biến
• Ví dụ: var i;
• Gán giá trị cho biến: 
– i = 10;
– i = “Mười”;
• Một biến chưa được gán giá trị thì sẽ có giá trị là 
“undefined”
16
3.4. Khai báo biến, phạm vi biến
• Phạm vi của biến gắn liền với vùng chương
trình nó được khai báo
• Biến toàn cục có phạm vi hoạt động trên toàn bộ
tài liệu (khai báo ngoài hàm)
• Biến khai báo trong hàm chỉ có tác dụng bên
trong hàm
• Một biến toàn cục được tồn tại từ khi nó được
khai báo cho đến trang web đã đóng
• JavaScript không có khái niệm phạm vi theo
khối
Đổi kiểu dữ liệu
• Biến tự đổi kiểu dữ liệu khi giá trị mà nó lưu 
trữ thay đổi
Ví dụ:
var x = 10; // x kiểu Number
x = “hello world !”; // x kiểu String
• Có thể cộng 2 biến khác kiểu dữ liệu
Ví dụ:
var x;
x = “12” + 34.5; // KQ: x = “1234.5”
• Hàm parseInt(), parseFloat() : Đổi KDL từ 
chuỗi sang số.
18
3.5. Toán tử
19
3.6. Một số đối tượng dữ liệu
• String Object
• Number Object
• Date Object
• Math Object
• Array Object
• ActiveX Object
20
3.6. Một số đối tượng dữ liệu - String
• length: chiều dài của chuổi
• constructor: Dùng để kiểm tra kiểu của biến
• prototype: Bổ sung prototype hàm cho một 
đối tượng
• Nối kết các chuỗi bằng toán tử + 
Thuộc tính
21
3.6. Một số đối tượng dữ liệu - String
Thuộc tính
22
3.6. Một số đối tượng dữ liệu - String
Phương thức
23
3.6. Một số đối tượng dữ liệu - String
Phương thức
24
3.6. Một số đối tượng dữ liệu - String
Phương thức
25
3.6. Một số đối tượng dữ liệu -
String Phương thức
26
3.6. Một số đối tượng dữ liệu -
Number
• Kiểu dữ liệu số nguyên, số thực
• Bắt đầu bằng ký số “0”: Số nguyên hệ bát 
phân
• Bắt đầu bằng “0x”: Số nguyên hệ thập lục 
phân
• VD: Cho biết giá trị thập phân tương ứng 
của các number sau:
– 125 = ?
– 010 = ? 014 = ? 028 = ?
– 0xFF = ? 0x3.12 = ?
27
3.6. Một số đối tượng dữ liệu -
Number
• constructor
• prototype
• MAX_VALUE (khoảng = 1.79E+308)
• MIN_VALUE (khoảng = 5.00E-324)
• NaN
• NEGATIVE_INFINITY (= -MAX_VALUE)
• POSITIVE_INFINITY (= -MIN_VALUE)
Thuộc tính
28
3.6. Một số đối tượng dữ liệu -
Number
Phương thức
• toExponential
numObj.toExponential([fractionDigits])
• toFixed
numObj.toFixed([fractionDigits])
• toPrecision
numObj.toPrecision([precision])
• toString
objectname.toString([radix])
radix : [2; 8; 10; 16] (các hệ cơ số)
29
3.6. Một số đối tượng dữ liệu - Number
Phương thức
30
• Chuyển chuổi thành số
parseInt(); parseFloat();
parseInt(“42”) // result = 42
parseInt(“42.33”) // result = 42
parseFloat(“42.33”) // result = 42.33
3 + 3 + parseInt(“3”) // result = 9
• Chuyển số thành chuỗi (auto)
3 + “3” // result = “33”
3 + 3 + “3” // result = “63”
(“”+ 2500) // result = “2500”
(“”+ 2500).length // result = 4
• isNaN(number) true nếu number khác NaN
• isFinite(number) true nếu number khác NaN, 
NEGATIVE_INFINITY, POSITIVE
3.6. Một số đối tượng dữ liệu -
Number Phương thức
31
3.6. Một số đối tượng dữ liệu - Math
32
3.6. Một số đối tượng dữ liệu - Date
Argument Description Example
None
Creates object with the current date and 
time.
var rightNow = new Date(); 
"month,dd, yyyy 
hh:mm:ss"
Creates object with the date represented 
by the specified month, day (dd ), 
year ( yyyy ), hour (hh), minute (mm), 
and second (ss). Any omitted values 
are set to zero.
var birthDay = new Date("March 
24, 1970"); 
Milliseconds
Creates object with date represented as 
the integer number of milliseconds after 
the epoch.
var someDate = new 
Date(795600003020); 
yyyy, mm, dd
Creates object with the date specified by 
the integer values year (yyyy), 
month (mm), and day (dd).
var birthDay = new Date(1970, 2, 
24); 
yyyy, mm, dd, 
hh, mm, ss
Creates object with the date specified by 
the integer values for the year, month, 
day, hours, minutes, and seconds.
var birthDay = new Date(1970, 2, 
24, 15, 0, 0); 
yyyy, mm, dd, 
hh, mm, ss, ms
Creates object with the date specified by 
the integer values for the year, month, 
day, hours, seconds, and milliseconds.
var birthDay = new Date(1970, 2, 
24, 15, 0, 250); 
33
3.6. Một số đối tượng dữ liệu - Date
34
3.6. Một số đối tượng dữ liệu - Date
35
3.6. Một số đối tượng dữ liệu -
Array
• var arrayObj = new Array();
• var arrayObj = new Array([size]);
• var arrayObj = new Array([element0[, 
element1[, ...[, elementN]]]]);
• var arrayObj = new Array(Array);
• Chỉ số của mảng bắt đầu từ 0
36
3.6. Một số đối tượng dữ liệu - Array
Thuộc tính và Phương thức
37
3.6. Một số đối tượng dữ liệu - Array
38
3.6. Một số đối tượng dữ liệu - Array
39
3.6. Một số đối tượng dữ liệu - Array
Mảng nhiều chiều
40
3.6. Một số đối tượng dữ liệu - ActiveX
41
3.6. Một số đối tượng dữ liệu - ActiveX
Một ví dụ
42
3.7. Cấu trúc điều khiển
• Điều kiện if
• Điều khiển switch
• Vòng lặp for
• Vòng lặp while
• Vòng lặp do  while
• Vòng lặp for  in
• Từ khóa break, continue
43
3.7. Cấu trúc điều khiển
• Hầu hết cấu trúc điều khiển trong JavaScript 
giống với C++
• Trong phần này ta chỉ đề cập cấu trúc điều 
khiển của JavaScript không có trong C++
Câu lệnh if
if (condition) 
{
statement[s] if true
} 
else 
{
statement[s] if false
}
Ví dụ:
var x = 5, y = 6, z;
- if (x == 5) { if (y == 6) z = 17; } else z = 20;
Câu lệnh switch
switch (expression) 
{
case label :
statementlist
case label :
statementlist
...
default :
statement list
}
Ví dụ :
var diem = “G”;
switch (diem) {
case “Y”:
document.write(“Yếu");
break;
case “TB”:
document.write(“Trung bình");
break;
case “K”:
document.write(“Khá");
break;
case “G” :
document.write(“Giỏi");
break;
default:
document.write(“Xuất sắc")
}
Vòng lặp for
for ([initial expression]; [condition]; 
[update expression]) {
statement[s] inside loop
}
Ví dụ:
var myarray = new Array();
for (i = 0; i < 10; i++) 
{
myarray[i] = i;
}
Vòng lặp while
while (expression) 
{
statements
}
Ví dụ:
var i = 9, total = 0;
while (i < 10)
{
total += i * 3 + 5;
i = i +5;
}
Vòng lặp do.. while
do 
{
statement
}while (expression);
Ví dụ:
var i = 9, total = 0;
do 
{
total += i * 3 + 5;
i = i +5;
} while (i > 10);
3.8 Hàm trong Javascript
• Dạng thức khai báo chung:
function Tên_hàm(thamso1, thamso2,..)
{
}
• Hàm có giá trị trả về:
function Tên_hàm(thamso1, thamso2,..)
{
return (value);
}
3.8 Hàm trong Javascript
• Ví dụ:
function Sum(x, y)
{
tong = x + y;
return tong;
}
• Gọi hàm:
var x = Sum(10, 20);
51
3.9. Lớp - Đối tượng
52
3.9. Lớp - Đối tượng
53
4. Một số hàm khác
54
4. Một số hàm khác
4. Một số hàm khác
• alert
• confirm
• prompt
55
Alert, Confirm, Prompt (1)
• Tương tác với người dung sử dụng hộp 
thoại
• window.alert(msg);
– Thông báo một nội dung đến người dùng 
(người dùng chỉ click OK).
• var r = window.confirm(msg);
– Thực hiện thông báo có ghi nhận người dung 
xác nhận (OK, Cancel). Trả về true nếu người 
dung click OK, ngược lại trả về false
Alert, Confirm, Prompt (2)
• var r = 
window.prompt(msg,default);
– Trình bày thông báo cho người dùng nhập 
liệu. Người dùng nhập liệu và click nút OK, 
Clear, hoặc Cancel.
– Trả về chuỗi người dùng nhập hoặc chuỗi 
rỗng nếu click OK. 
– Trả về null nếu click nút Cancel.
Alert, Confirm, Prompt (3)
alert(
“Chương trình cộng 2 số\n" +
“Bạn nhập vào giá trị 2 số\n" +
“Chương trình sẽ hỏi bạn có muốn thực hiện phép 
cộng không?\n"
);
var first, second, num1, num2, sum;
firstNumber = window.prompt(
“Nhập số thứ nhất", "0");
document.write("", “Bạn nhập " + first);
second = window.prompt(
“Nhập số thứ hai", "0");
document.write("", “Bạn nhập " + second);
Alert, Confirm, Prompt (4)
var ok = confirm(
“Bạn có muốn cộng 2 số?");
if (ok)
{
num1 = parseInt(first);
num2 = parseInt(second);
sum = num1 + num2;
document.write("", “Tổng của " +
first + " và" + second + " là " + sum);
}
Q & A
THE END