Bài giảng Phát triển ứng dụng web bằng PHP - Javascript - Dương Khai Phong

• GVHD: Dương Khai Phong 
• Email: khaiphong@gmail.com 
• Website:  
•  
1/ Giới thiệu tổng quan Web 
2/ Ngôn ngữ HTML và JavaScript 
3/ Ngôn ngữ PHP căn bản 
4/ Các đối tượng trong PHP 
5/ PHP và hướng đối tượng 
6/ PHP và cơ sở dữ liệu MySQL 
7/ PHP và AJAX 
8/ PHP và các hệ thống mã nguồn mở 
9/ Triển khai ứng dụng PHP 
PHẦN 2 (tiếp theo): (HTML và JAVASCRIPT) 
1. Giới thiệu 
2. Kiểu dữ liệu, hằng và biến 
3. Các phép toán trong javascript 
4. Các đối tượng hộp thoại trong javascript 
5. Các cấu trúc điều khiển cơ bản 
6. Mảng và hàm trong javascript 
7. Các đối tượng trong javascript 
8. Xử lý sự kiện trong javascript 
a. Giới thiệu Javascript: 
 Với HTML ta chỉ thiết kế được trang web để hiển thị thông 
tin, không tạo ra được sự tương tác từ phía người dùng. 
 JavaScript là ngôn ngữ kịch bản (do hãng Sun 
Microsystems và Netscape phát triển từ ngôn ngữ 
LiveScripts) dùng để tạo các client-side scripts và server-
side scripts (có sự tương tác với người dùng). 
 Mặc dù có những điểm tương đồng giữa Java và JavaScipt , 
nhưng chúng vẫn là hai ngôn ngữ riêng biệt. 
 Lưu ý: trong code javascript cũng phân biệt chữ hoa và chữ 
thường. 
b. Cách nhúng Javascript vào một trang HTML: 
JavaScript có thể chèn vào một tài liệu HTML theo những cách 
sau: 
 Sử dụng thẻ SCRIPT. 
 Sử dụng một file JavaScript từ bên ngoài. 
 Sử dụng các biểu thức JavaScript trong các giá trị thuộc 
tính của thẻ 
 Sử dụng JavaScript trong các trình điều khiển sự kiện 
b. Cách nhúng Javascript vào một trang HTML: 
b.1> Sử dụng thẻ SCRIPT: 
• Khi trình duyệt gặp phải một thẻ nào đó, nó sẽ 
đọc từng dòng một cho đến khi gặp thẻ đóng . 
• Tiếp đến nó sẽ kiểm tra lỗi trong các câu lệnh Javascript. 
• Nếu gặp phải lỗi, nó sẽ cho hiển thị lỗi đó trong chuỗi các 
hộp cảnh báo (alert boxes) lên màn hình. 
• Nếu không có lỗi, các câu lệnh sẽ được biên dịch sao cho 
máy tính có thể hiểu được lệnh đó. 
b. Cách nhúng Javascript vào một trang HTML: 
b.1> Cú pháp sử dụng thẻ SCRIPT: 
// Dòng ghi chú; 
/* 
Đoạn ghi chú 
*/ 
. 
• Việc khai báo sử dụng ngôn ngữ Javascript có thể đặt bất kỳ 
vị trí nào trong cặp thẻ . Tuy nhiên, nên 
đặt các câu lệnh script trong phần và để 
đảm bảo tất cả các câu lệnh đều được đọc và biên dịch trước 
khi nó được gọi từ trong phần BODY. 
b. Cách nhúng Javascript vào một trang HTML: 
b.1> Ví dụ sử dụng thẻ SCRIPT: 
 My first page 
 document.write("Xin chao cac 
ban!"); 
 Chao mung cac ban den voi the 
gioi cua JavaScript 
b. Cách nhúng Javascript vào một trang HTML: 
b.2> Sử dụng một file JavaScript từ bên ngoài: 
• File javascript là file văn bản chứa các mã lệnh JavaScript, 
file javascript có phần mở rộng là “.js”. 
• Nó chỉ có thể chứa các câu lệnh và các hàm JavaScript, 
không thể chứa các thẻ HTML. 
• Cú pháp khai báo: 
b. Cách nhúng Javascript vào một trang HTML: 
b.2> Sử dụng một file JavaScript ở ngoài : 
 File vidu.js: 
 document.write ("Xin chao cac ban! ") 
 File nhung_javascript.html: 
 My first page 
 Chao mung den voi the gioi cua 
JavaScript 
a. Kiểu dữ liệu: 
 Việc xác định kiểu dữ liệu trong javascript được chuyển đổi 
một cách tự động trong quá trình khai báo và sử dụng các 
biến. Các kiểu dữ liệu thường dùng: 
 Kiểu số nguyên 
 Kiểu số thực 
 Kiểu ký tự 
 Kiểu chuỗi 
 Kiểu logic (True – False) 
  
b. Khai báo hằng và biến: 
 Trong javascript không cho phép định nghĩa hằng tường 
minh. 
 Các biến trong javascript phân biệt chữ hoa và chữ thường. 
 Cú pháp: var 
Khai báo biến 
var a; // biến Glocal 
var b=2; // biến Glocal 
var result=0; // biến Glocal 
result=a+b; 
document.write("Ket Qua cua ham myFunction1 la : "+result+""); 
Lệnh document.write: dùng 
để xuất thông tin trên trình 
duyệt. 
(tương tự: document.writeln) 
 Trong javascript sử dụng cả hai toán tử một 
ngôi và hai ngôi, gồm: 
 Toán tử số học: + , - , * , / , ++ , -- ,  
 Toán tử so sánh: > , = , != ,  
 Toán tử logic: AND (&&), OR (||) ,  
 Toán tử chuỗi: + (nối chuỗi) 
 Toán tử lượng giá: điều kiện (?), typeof,  
 Javascript cung cấp các thư viện hàm cho 
người dùng khá đầy đủ như: các hàm chuyển 
đổi kiểu dữ liệu, các hàm xử lý chuỗi, 
 Trong javascript cung cấp sẵn các đối tượng 
hộp thoại (dialog boxes) cho người dùng 
tương tác với trình duyệt trên phía client, bao 
gồm: 
 Alert: hiển thị thông báo 
 Confirm: xác nhận thông tin người dùng 
 Prompt: tương tác với người dùng bằng 
cách cho phép nhập giá trị mới. 
a. Alert: 
• Công dụng: dùng hiển thị thông báo cho người dùng. 
• Cú pháp: Alert("Nội dung thông báo") 
b.Confirm: 
• Công dụng: dùng xác nhận lại thông tin từ phía người 
dùng. Hộp thoại trả về True nếu người dùng đồng ý. 
• Cú pháp: Confirm("Nội dung xác nhận") 
c. Prompt: 
• Công dụng: dùng nhận thông tin từ phía người dùng. Hộp 
thoại trả về giá trị người dùng đã nhập. 
• Cú pháp: Prompt("Tiêu đề yêu cầu nội dung") 
Ví dụ: alert, confirm, prompt 
Dialog boxes 
alert("Chào bạn"); 
var namsinh=prompt("Bạn sinh năm mấy?"); 
var traloi=confirm("Bạn có muốn tính tuổi của bạn không?"); 
if (traloi==true) 
 document.write("Bạn được "+(2011-namsinh)+""); 
else 
 document.write("Chào bạn"); 
Cấu trúc điều kiện 
Cấu trúc lặp 
If .. Else .. 
Switch .. Case .. 
For .. 
While .. 
Do .. While 
a. Ví dụ: Cấu trúc điều kiện 
1. Viết chương trình giải và biện luận phương trình bậc 1. 
2. Viết chương trình giải và biện luận phương trình bậc 2. 
3. Nhập 3 cạnh tam giác a , b , c: cho biết loại tam giác là 
tam giác đều, cân, vuông cân, vuông, thường. 
4. Viết chương trình kiểm tra ngày, tháng, năm có hợp lệ? 
5 Viết chương trình nhập điểm TB, cho biết xếp loại: giỏi, 
khá, trung bình, yếu. 
6 Viết chương trình nhập năm sinh, nếu trên 18 tuổi thì in ra 
trên trình duyệt tuổi của người này. 
b. Ví dụ: Cấu trúc lặp 
2. Viết chương trình nhập n, in ra in ra trên trình duyệt n 
bảng cửu chương. 
3. Viết chương trình nhập số dòng, số cột, in ra bảng biểu có 
số dòng và số cột đã nhập. 
4. Viết chương trình nhập tháng, năm, in ra trên trình duyệt ra 
lịch của tháng và năm đó. 
5. Viết chương trình nhập user và password, nếu nhập đúng 
(user và password: “abc”) thì in ra trình duyệt câu “Xin 
chào”, ngược lại bắt người dùng nhập lại. 
1. Viết chương trình nhập n, in ra trên trình duyệt bảng cửu 
chương thứ n. 
a. Mảng: 
 Trong javascript không có kiểu dữ liệu mảng tường minh 
(ví dụ: int mang[10]) mà chỉ hỗ trợ thông qua đối tượng 
Array sẵn có và các thuộc tính và phương thức mà đối 
tượng này hỗ trợ. 
• Khai báo mảng: 
 arrayObjectName = new Array(element0,element1,..) 
 Hoặc arrayObjectName = new Array(arrayLength) 
• Ví dụ: tạo mảng gồm 5 phần tử 
var Mang = new Array(5) 
a. Mảng: 
• Truy cập phần tử mảng: chỉ số bắt đầu của mảng là 0 
• Ví dụ: 
var arrMaVung = new Array("08","04","72","65","64"); 
var arrTenVung = new Array(5); 
arrTenVung[0]="HCM"; 
arrTenVung[1]="Hà Nội"; 
arrTenVung[2]="Long An"; 
arrTenVung[3]="Bình Dương"; 
arrTenVung[4]="Vũng Tàu"; 
for (i=0;i<5;i++) 
 document.write(arrMaVung[i]+" "+arrTenVung[i]+""); 
a. Mảng: 
• Thuộc tính của đối tượng Array: 
• Phương thức của đối tượng Array: 
concat Nối hai mảng và trả về một mảng mới. 
join Kết hợp tất cả các phần tử của một mảng thành một chuỗi. 
pop Gỡ bỏ phần tử cuối cùng của một mảng và trả về phần tử đó. 
push 
Thêm một hoặc nhiều phần tử vào cuối một mảng và trả về độ dài 
mới của mảng. 
splice Chèn hoặc xoá một hoặc nhiều phần tử theo vị trí thứ k trong mảng 
reverse 
Hoán vị các phần tử của một mảng: Phần tử mảng đầu tiên trở thành 
phần tử cuối cùng và ngược lại 
sort Sắp xếp các phần tử của một mảng 
length Trả về số phần tử của mảng 
index Trả về chỉ mục của phần tử. 
b. Hàm: 
 Javascript cung cấp sẵn cho người dùng một số hàm thông dụng: 
 Hàm eval: đánh giá các biểu thức hay lệnh. 
 Hàm isFinite: xác định xem 1 số có là hữu hạn hay không? 
 Hàm isNaN: kiểm tra một biến có là số? 
 Hàm parseInt và parseFloat: chuyển đổi kiểu 
 Hàm Number và String: chuyển đổi kiểu 
 Ngoài ra, người dùng có thể định nghĩa các hàm tự tạo theo cú 
pháp sau: 
function functionName (argument1, argument2, ) 
{ 
 statements; 
 [return value;] 
} 
b. Hàm: 
function functionName (argument1, argument2, ) 
{ 
 statements; 
 [return value;] 
} 
Trong đó: 
 function: từ khoá bắt buộc do javascript là ngôn ngữ có tính 
định kiểu thấp nên không cần xác định trước kiểu dữ liệu trả 
về. 
 functionName: tên hàm 
 argument1, argument2, : tham số đầu vào 
 [return value;]: giá trị trả về của hàm nếu có 
c. Ví dụ: Mảng và Hàm 
2. Viết chương trình nhập 2 mảng a,b gồm n phần tử, trộn 2 
mảng lại và sắp xếp theo thứ tự tăng dần. 
1. Viết hàm nhập/xuất mảng gồm n phần tử, xuất ra giá trị 
max, min của mảng. 
3. Viết hàm thêm 1 phần tử x vào mảng tại vị trí thứ k . 
4. Viết hàm thêm 1 phần tử x vào mảng đã có thứ tự tăng dần 
sao cho sau khi thêm mảng vẫn tăng. 
5. Viết hàm xoá một phần tử x trong mảng. 
a. Giới thiệu: 
 Đối tượng là gì? 
ĐỐI TƯỢNG 
THUỘC 
TÍNH 
PHƯƠNG 
THỨC 
- Ví dụ: đối tượng SINHVIEN có các thuộc tính: mã sinh viên, họ tên, 
điểm,  và các phương thức: đi học, đi thi,  
- Truy cập thuộc tính và phương thức: 
• Tên_đối_tượng.Tên_thuộc_tính 
• Tên_đối_tượng.Tên_phương_thức() 
- Sử dụng con trỏ This cho đối tượng hiện hành 
a. Giới thiệu: 
 Các đối tượng javascript hỗ trợ: 
Array 
Math 
Date 
String 
Window objects 
Document 
Event 
Frames 
History 
Location 
Navigator 
Screen 
b. Đối tượng cơ bản: 
• Array: đối tượng dùng quản lí danh sách mảng. 
• Math: đối tượng liên quan đến các phép tính toán học. 
• String: đối tượng dùng để thao các với các chuỗi văn bản. 
• Date: đối tượng liên quan đến ngày giờ. 
c. Đối tượng trình duyệt: 
 window: 
 Công dụng: dùng quản lý thông tin của tất cả các đối tượng 
trong cửa sổ trình duyệt. 
 Các thuộc tính cơ bản: đối tượng window được xem là đối 
tượng cơ bản (base class) của tất cả các đối tượng khác. 
 Các phương thức cơ bản: alert(), blur(), close(), open(), 
focus(), navigate(). 
c. Đối tượng trình duyệt: 
 document: 
 Công dụng: dùng quản lý thông tin tài liệu HTML trong cửa 
sổ trình duyệt (được xem là đối tượng con của window) 
 Các thuộc tính và phương thức: 
Các phương thức: 
• clear() 
• close() 
• open() 
• write() 
• writeln() 
Các thuộc tính: 
• alinkColor 
• bgColor 
• Body 
• fgColor 
• linkColor 
• location 
• Title 
• URL 
• vlinkColor 
c. Đối tượng trình duyệt: 
 history: 
 Công dụng: dùng quản lý danh sách các URL đã duyệt. 
 Các thuộc tính và phương thức: 
Các phương thức: 
• back() 
• forward() 
• go(relPos hoặc string) 
Các thuộc tính: 
• current 
• length 
• next 
• previous 
c. Đối tượng trình duyệt: 
 location: 
 Công dụng: dùng quản lý thông tin URL hiện tại. 
 Các thuộc tính và phương thức: 
Các phương thức: 
• reload() 
• replace(URL) 
Các thuộc tính: 
• hash 
• host 
• hostname 
• href 
a. Giới thiệu: 
 Javascript quản lý sự tương tác giữa người dùng và trình 
duyệt thông qua bộ quản lý các sự kiện (Event) trên Form 
và các đối tượng con trên Form. 
b. Sự kiện: (Event) 
 Sự kiện là kết quả thao tác của người dùng tác động lên đối 
tượng. 
 Một sự kiện bao gồm 2 thông tin: 
 Kiểu sự kiện: click, double click, change,.. 
 Vị trí của con trỏ tại thời điểm xảy ra sự kiện. 
 Các sự kiện thường gặp: 
• onClick 
• onChange 
• onFocus 
• onBlur 
• onSelect 
• onMouseOver 
• onMouseOut 
• onLoad 
• onUnload 
• onSubmit 
• onMouseDown 
• onMouseUp 
c. Các sự kiện cơ bản trên các đối tượng: 
 Đối tượng window: (onLoad - onUnload) 
Công dụng: sự kiện xảy ra khi người dùng mở trang hoặc 
đóng trang. 
Ví dụ: viết trang khi người dùng mở trang thì hiển thị thông 
báo nhập Tên  xuất “Hi, welcome my pages”, sau khi đóng 
trang thì hiển thị thông báo “Good bye, see you again !” 
var name = ""; 
function hello() { 
 name = prompt('Enter Your Name:','Name'); 
 alert('Hi ' + name + ', welcome to my page!'); 
} 
function goodbye() { 
 alert('Goodbye ' + name + ', see you again!'); 
} 
c. Các sự kiện cơ bản trên các đối tượng: 
 Đối tượng form: 
Sự kiện trên form được xử lý phụ thuộc vào 2 yếu tố sau: 
• Thuộc tính sự kiện của form: Action, Method,  
• Việc xử lý các sự kiện của các đối tượng con (button, 
textbox,..) bên trong form: onSubmid, onClick, onBlur, 
onChange,  
 Ví dụ về chu trình sự kiện trên form: 
c. Các sự kiện cơ bản trên các đối tượng: 
 Đối tượng form: 
 Ví dụ về chu trình sự kiện trên form: 
abcdef 
***** 
 
Người dùng tác động lên 
Form 
Người dùng tác động lên 
đối tượng trong Form 
Bộ lắng nghe sự 
kiện Javascript 
hoạt động. 
Người dùng thực hiện 
thao tác xác nhận Form 
OnMouseOver 
OnChange 
(tuỳ đối tượng) 
OnClick 
OnSubmit 
Xử lý Form 
phụ thuộc 
vào các 
thuộc tính 
sự kiện 
c. Các sự kiện cơ bản trên các đối tượng: 
 Đối tượng form: 
Ví dụ về chu trình sự kiện trên form: 
OnMouseOver 
OnChange 
(tuỳ đối tượng) 
OnClick 
OnSubmit 
Xử lý Form 
phụ thuộc 
vào các 
thuộc tính 
sự kiện 
 Thuộc tính sự kiện: 
  Action: thuộc tính dùng để chuyển 
trang hiện hành đến một trang khác theo 
địa chỉ URL truyền vào. 
  Method: phương thức gởi nội dung 
đi: “get / post” 
d. Các ví dụ xử lý sự kiện: 
 Ví dụ 1: thiết kế một trang gồm 3 button cho phép người 
dùng thay đổi màu nền của trang như sau: 
Muiten01 
d. Các ví dụ xử lý sự kiện: 
 Ví dụ 2: thiết kế một trang cho phép nhập thông tin họ tên 
và năm sinh, xuất ra câu chào và cho biết tuổi người đó: 
d. Các ví dụ xử lý sự kiện: 
 Ví dụ 3: thiết kế một trang gồm 3 radio button cho phép 
người dùng thay đổi hình ảnh trong trang như sau: 
d. Các ví dụ xử lý sự kiện: 
 Ví dụ 4: thiết kế một trang cho phép người dùng đăng 
nhập, nếu thành công thì cho phép người dùng xem sản 
phẩm trong trang sanpham.html 
ĐH CÔNG NGHỆ THÔNG TIN  
43 
 Họ tên: 
 Mã SV: 
 Lớp: 
 Khoá: 
 Email: 
01 02  19 20 
A 
B 
C 
D 
Câu 1: Phát biểu nào sau đây là đúng để 
nhúng một tập tin javascript vào trang web: 
A. 
B. 
C. 
D. 
Câu 2: Cho biết giá trị của z trong đoạn lệnh 
sau? 
x = 1; 
y = '2'; 
z = x + y; 
A. 12 
B. 3 
C. Đoạn lệnh bị lỗi 
D. null 
Câu 3: Trong JavaScript phương thức nào 
cho phép chuyển đổi kiểu dữ liệu? 
A. Eval() 
B. parseFloat() 
C. parseInt() 
D. Tất cả đều đúng 
Câu 4: Sự kiện nào của thẻ sẽ được 
kích hoạt khi trang web được mở? 
A. onFocus 
B. onBlur 
C. onLoad 
D. onSubmit 
Câu 5: Sự kiện nào sẽ được kích hoạt khi con 
trỏ chuột di chuyển lên một đối tượng trong 
trang web? 
A. onSubmit 
B. onMouseUp 
C. onMouseOut 
D. onMouseOver 
Câu 6: Cho biết giá trị của câu lệnh sau 
"uit.edu".length? 
A. 7 
B. 8 
C. null 
D. Câu lệnh sai cú pháp 
Câu 7: Dùng câu lệnh nào để thực hiện ghi 
chú trong javascript? 
A. // 
B. /* */ 
C. Cả A và B đều sai 
D. Cả A và B đều đúng 
Câu 8: Trong javascript, dùng câu lệnh nào 
để in nội dung “Hello” trên trình duyệt? 
A. document.write('Hello'); 
B. document.write "Hello"; 
C. document.write(Hello); 
D. Cả A và B đều đúng 
Câu 9: Các đối tượng hộp thoại (dialog box) 
nào được cung cấp sẵn trong javascript? 
A. alert() 
B. confirm() 
C. prompt() 
D. Tất cả đều đúng 
Câu 10: Trong javascript, chọn câu đúng để 
khai báo một mảng số nguyên gồm 5 phần tử? 
A. int mang[5]; 
B. var mang = new Array(5) 
C. var mang = Array(5) 
D. int mang = new Array(5) 
Câu 11: Trong javascript, cho biết phương 
thức nào không tồn tại trong đối tượng Array? 
A. length 
B. concat 
C. join 
D. pop 
Câu 12: Trong javascript, để thêm một phần 
tử vào cuối mảng dùng phương thức nào? 
A. pop 
B. insert 
C. update 
D. push 
Câu 13: Cho đoạn lệnh sau, chọn câu phát 
biểu đúng? 
1. 
2. function binhphuong (a){ return a*a;} 
3. Alert(binhphuong(5)); 
4. 
A. Đoạn lệnh thông báo kết quả 25 
B. Đoạn lệnh sai ở dòng số 2 
C. Đoạn lệnh sai ở dòng số 3 
D. Tất cả đều sai 
Câu 14: Cho đoạn lệnh sau, chọn câu phát 
biểu đúng? 
1. 
2. function hoanvi(a,b){t=a;a=b;b=t;} 
3. var a=3,b=5; 
4. hoanvi(a,b); 
5. document.write(a+" va "+b); 
6. 
A. Đoạn lệnh hiển thị “3 và 5” 
B. Đoạn lệnh hiển thị “5 và 3” 
C. Đoạn lệnh sai ở dòng số 2 
D. Đoạn lệnh sai ở dòng số 5 
Câu 15: Đối tượng nào dùng quản lý thông 
tin của tất cả các đối tượng trong cửa sổ trình 
duyệt? 
A. Object 
B. Window 
C. Document 
D. Tất cả đều sai 
Câu 16: Đối tượng nào dùng quản lý thông 
tin URL hiện tại? 
A. History 
B. Locate 
C. Location 
D. Document 
Câu 17: Trong javascript, một sự kiện bao 
gồm những thông tin nào? 
A. Kiểu sự kiện và vị trí của con trỏ tại thời 
điểm xảy ra sự kiện 
B. Kiểu sự kiện và vị trí của con trỏ sau khi 
sự kiện xảy ra 
C. Đối tượng bị tác động và vị trí của con trỏ 
tại thời điểm xảy ra sự kiện 
D. Tất cả đều sai 
Câu 18: Cho biết từ khoá cần thay cho từ key 
1. 
2. key.write(a+" va "+b); 
3. 
A. window 
B. document 
C. object 
D. system.out 
Câu 19: Cho biết từ khoá cần thay cho từ key 
1. 
2. key.alert("hello"); 
3. 
A. window 
B. Không cần từ khoá nào 
C. document 
D. Cả A và B đều đúng 
Câu 20: Cho biết từ khoá cần thay cho từ key 
1. 
2. function hoanvi(key a,key 
b){t=a;a=b;b=t;} 
3. 
A. int 
B. string 
C. var 
D. không cần từ khoá nào