Giáo trình Thiết kế và lập trình Web (Phần 1)

BỘ GIAO THÔNG VẬN TẢI 
TRƢỜNG ĐẠI HỌC HÀNG HẢI 
BỘ MÔN: KỸ THUẬT MÁY TÍNH 
KHOA: CÔNG NGHỆ THÔNG TIN 
BÀI GIẢNG 
THIẾT KẾ VÀ LẬP TRÌNH WEB 
TÊN HỌC PHẦN : THIẾT KẾ VÀ LẬP TRÌNH WEB 
MÃ HỌC PHẦN : 17313 
TRÌNH ĐỘ ĐÀO TẠO : ĐẠI HỌC CHÍNH QUY 
DÙNG CHO SV NGÀNH : CÔNG NGHỆ THÔNG TIN 
HẢI PHÒNG - 2009 
 - 1 - 
MỤC LỤC 
Chƣơng 1: TỔNG QUAN .......................................................................................................... 5 
1.1. Internet ............................................................................................................................ 5 
1.1.1. Lịch sử mạng Internet .............................................................................................. 5 
1.1.2. Một số khái niệm liên quan đến mạng Internet ....................................................... 5 
1.1.3 World Wide Web ...................................................................................................... 6 
1.1.4. Thƣ điệntử (E-mail) ................................................................................................. 9 
1.2. Các kiểu mạng ................................................................................................................. 9 
1.3. Kiến trúc Client – server ............................................................................................... 10 
Chƣơng 2: NGÔN NGỮ SIÊU VĂN BẢN HTML ................................................................. 12 
2.1. Khái niệm cơ bản về ngôn ngữ HTML ......................................................................... 12 
2.2. Lập trình web với ngôn ngữ HTML .............................................................................. 12 
2.2.1. Các thành phần cơ bản của html ............................................................................ 12 
2.2.2. Cấu trúc tệp HTML ................................................................................................ 13 
2.3. Các thẻ cơ bản trong HTML ......................................................................................... 13 
2.3.1. Thẻ giải thích ......................................................................................................... 13 
2.3.2. Các thẻ định dạng văn bản ..................................................................................... 13 
2.3.3. Tạo liên kết (link) .................................................................................................. 16 
2.3.4. Một số kí tự đặc biệt trong HTML......................................................................... 17 
2.3.5. Các thẻ dùng thiết kế bảng ..................................................................................... 17 
2.3.6. Các thẻ tạo Frame .................................................................................................. 18 
2.3.7. Các thẻ dùng tạo Form ........................................................................................... 19 
CHƢƠNG 3. NGÔN NGỮ KỊCH BẢN JAVASCRIPT ......................................................... 21 
3.1. Mở đầu .......................................................................................................................... 21 
3.2. Cú pháp cơ bản JavaScript ............................................................................................ 21 
3.2.1. Kiểu dữ liệu............................................................................................................ 22 
3.2.2. Hằng và biến .......................................................................................................... 23 
3.2.3. Các toán tử ............................................................................................................. 23 
3.2.4 Câu lệnh .................................................................................................................. 26 
3.2.5 Câu lệnh điều kiện .................................................................................................. 26 
3.2.6 Câu lệnh lặp ............................................................................................................ 28 
3.3. Tƣơng tác giữa JavaScript và HTML ............................................................................ 30 
3.3.1. Sử dụng thẻ ......................................................................................... 30 
3.3.2. Sử dụng các tệp tin bên ngoài ................................................................................ 31 
3.4. Các đối tƣợng của trình duyệt ....................................................................................... 31 
Chƣơng 4: NGÔN NGỮ KỊCH BẢN VBSCRIPT .................................................................. 38 
4.1. Mở đầu .......................................................................................................................... 38 
4.2. Cú pháp cơ bản của VBScrip ........................................................................................ 38 
4.2.1. Khai báo hằng, biến, mảng .................................................................................... 38 
4.2.2. Chú thích ................................................................................................................ 39 
4.2.3. Các toán tử ............................................................................................................. 39 
4.2.4. Các cấu trúc điều khiển .......................................................................................... 39 
 - 2 - 
4.2.5. Hàm và Thủ tục ...................................................................................................... 40 
4.3. Tƣơng tác giữa VBScript và HTML ................................................................................. 41 
4.4. Các đối tƣợng của trình duyệt ....................................................................................... 42 
4.4.1. Đối tƣợng ERR ...................................................................................................... 42 
4.4.2. Đối tƣợng kịch bản DICTIONARY ....................................................................... 43 
4.4.3. Đối tƣợng FileSystemObject ................................................................................. 43 
Chƣơng 5: ACTIVE SERVER PAGE. ..................................................................................... 46 
5.1. Mô hình các lớp ............................................................................................................. 46 
5.2. Thiết lập WebServer...................................................................................................... 47 
5.2.1. ASP (Active Server Page) ..................................................................................... 47 
5.2.2. Trang ASP .............................................................................................................. 47 
5.2.3. IIS (Internet Information Server) ........................................................................... 48 
5.3. Xử l các yêu cầu của IIS .............................................................................................. 48 
5.4. Mô hình đối tƣợng ......................................................................................................... 49 
5.5. Các đối tƣợng của ASP ................................................................................................. 50 
5.5.1. Đối tƣợng Application ........................................................................................... 50 
5.5.2. Đối tƣợng AspError ............................................................................................... 52 
5.5.3. Đối tƣợng ObjectContext ....................................................................................... 52 
5.5.4. Đối tƣợng Response ............................................................................................... 53 
5.5.5. Đối tƣợng Request ................................................................................................. 55 
5.5.6. Đối tƣợng Server .................................................................................................... 58 
5.5.7. Đối tƣợng Session .................................................................................................. 60 
 - 3 - 
YÊU CẦU VÀ NỘI DUNG CHI TIẾT 
Tên học phần: Thiết kế và lập trình Web Loại học phần: 4 
Bộ môn phụ trách giảng dạy: Kỹ thuật máy tính Khoa phụ trách: CNTT 
Mã học phần: 17313 Tổng số TC: 3 
TS tiết L thuyết Thực hành/Xemina Tự học Bài tập lớn Đồ án môn học 
60 45 15 0 x 0 
Điều kiện tiên quyết: 
Sinh viên phải học xong các học phần sau mới đƣợc đăng k học phần này: 
Mạng máy tính, Truyền số liệu. 
Mục tiêu của học phần: 
- Cung cấp các kiến thức cơ bản về dịch vụ Web 
- Xây dựng Website. 
Nội dung chủ yếu 
- Mô hình mạng, ngôn ngữ lập trình. 
- Xây dựng site 
Nội dung chi tiết của học phần: 
TÊN CHƢƠNG MỤC 
PHÂN PHỐI SỐ TIẾT 
TS LT BT TH KT 
Chƣơng I. Tổng quan 3 7 
1.1. Internet 1 
1.2. Các kiểu mạng 1 
1.3. Kiến trúc Web 1 
Chƣơng II. Ngôn ngữ siêu văn bản HTML 8 5 3 
2.1. Khái niệm cơ bản về ngôn ngữ HTML 1 
2.2. Lập trình Web với ngôn ngữ HTML 1 
2.3. Các thẻ cơ bản trong HTML 3 
Chƣơng III. Ngôn ngữ kịch bản JavaScript. 10 6 3 1 
3.1. Mở đầu 0,5 
3.2. Cú pháp cơ bản JavaScript 2 
3.3. Tƣơng tác giữa JavaScript và HTML 2 
3.4. Các đối tƣợng của trình duyệt 1,5 
Chƣơng IV. Ngôn ngữ kịch bản VBcript. 24 6 15 3 
4.1. Mở đầu 0,5 
4.2. Cú pháp cơ bản VBScript 2 
4.3 Tƣơng tác giữa VBScript và HTML 2 
4.4. Các đối tƣợng của trình duyệt 1,5 
Chƣơng V. Active Server Page. 17 10 6 1 
5.1. Mô hình các lớp 2 
5.2. Thiết lập Web Server 2 
5.3. Xử l các yêu cầu của IIS 2 
5.4. Mô hình đối tƣợng 2 
5.5. Các đối tƣợng ASP 2 
Nhiệm vụ của sinh viên : 
Tham dự các buổi thuyết trình của giáo viên, tự học, tự làm bài tập do giáo viên giao, 
tham dự các buổi thực hành, các bài kiểm tra định kỳ và cuối kỳ, hoàn thành bài tập lớn 
theo yêu cầu. 
 - 4 - 
Tài liệu học tập : 
- Andy Budd, Cameron Moll và Simon Collison - CSS Mastery Advanced Web 
Standards Solutions – Nhà xuất bản Apress 2006 
- Paul Wilton - Beginning JavaScript. Second Edition – Nhà xuất bản Wrox, 2004 
John Gosney, ASP Programming for the absolute beginner – Nhà xuất bản No Starch 
Press, 2002 
- Scott Mitchell và James Atkinson, Teach yourself Active Server Pages 3.0 – Nhà xuất 
bản SAMS,2000 
- Jason Butler , ASP Data Access for Beginners – www.w3schools.com 
- Nguyễn Thị Thanh Trúc – Thiết kế và lập trình Web với ASP – Đại học Quốc gia 
thành phố Hồ Chí Minh, 2003 
Hình thức và tiêu chuẩn đánh giá sinh viên: 
- Đánh giá dựa trên tình hình tham dự buổi học trên lớp, các buổi thực hành, điểm kiểm 
tra thƣờng xuyên và điểm kết thúc học phần. 
- Hình thức thi cuối kỳ : thi viết. 
Thang điểm: Thang điểm chữ A, B, C, D, F 
Điểm đánh giá học phần Z = 0.4X + 0.6Y. 
Bài giảng này là tài liệu chính thức và thống nhất của Bộ môn Kỹ thuật máy tính, Khoa 
Công nghệ Thông tin và đƣợc dùng để giảng dạy cho sinh viên. 
Ngày phê duyệt: 15 / 6 / 2010 
Trƣởng Bộ môn: ThS. Ngô Quốc Vinh 
 - 5 - 
Chƣơng 1: TỔNG QUAN 
1.1. Internet 
1.1.1. Lịch sử mạng Internet 
Mạng Internet là mạng máy tính lớn nhất trên toàn cầu. Internet hay gọi tắt là NET đƣợc 
xem là mạng của các mạng (network of networks) dùng để trao đổi thông tin trên toàn thế 
giới, còn gọi là Siêu xa lộ thông tin (Information Superhighway). 
Ngày nay mạng Internet là một mạng công cộng kết nối hàng trăm triệu máy tính trên 
toàn thế giới. Về mặt vật l , mạng Internet sử dụng một phần của toàn bộ các tài nguyên của 
mạng viễn thông công cộng; về mặt kỹ thuật, mạng Internet sử dụng tập các giao thức TCP/IP 
do Vinton Gray Cerf và Robert Kahn xây dựng từ năm 1973 tại Trƣờng Đại học Stanford. Hai 
mô phỏng của công nghệ mạng Internet là Intranet và Extranet. 
Từ năm 1969, Bộ Quốc phòng Mỹ đã xây dựng mạng ARPANET, (ARPA là từ viết tắt 
của Advanced Research Projects Agency), tƣởng ban đầu của mạng Arpanet là dùng để trao 
đổi thông tin giữa các cơ quan chính phủ và các trung tâm nghiên cứu của các trƣờng đại học 
Mỹ. Điều đặc biệt ở mạng này là mạng vẫn hoạt động khi một phần của nó bị phá hủy trong 
các trƣờng hợp chiến tranh hoặc thiên tai. Sau đó mạng ARPANET chia làm hai mạng: 
 MILINET chỉ dùng cho các mục đích quân sự 
 Một mạng mới gọi là ARPANET dùng cho các mục đích phi quân sự 
Đến năm 1972, một mạng khác là CSNET (Computer Science Research Network) đƣợc 
nối với ARPANET. CSNET đƣợc tạo ra để liên kết các mạng độc lập khác. Tại thời điểm này 
đƣợc xem là ngày khai sinh ra mạng INTERNET. Vào năm 1980, tổ chức National Science 
Foundation đã xây dựng mạng NSFNET để liên kết đến các mạng chính, đây là mạng có tốc 
độ cao, dùng để kết nối các siêu máy tính trung tâm của NSF. 
Công nghệ mạng ngày càng phát triển, nhiều mạng mới đƣợc hình thành và kết nối với 
mạng ARPANET, CSNET và NSFNET. Tất cả mạng này kết nối với nhau và trở thành một 
mạng có tên gọi là INTERNET. Cuối cùng hai mạng Arpanet và Csnet ngƣng họat động, 
mạng Nsfnet trở thành mạng chính nối kết các mạng khác trên Internet. 
1.1.2. Một số khái niệm liên quan đến mạng Internet 
Địa chỉ IP 
Các máy tính trong mạng Internet/ Intranet trao đổi thông tin với nhau theo chuẩn 
truyền thông gọi là giao thức TCP/IP. Đây là giao thức cung cấp dịch vụ truyền các gói dữ 
 - 6 - 
liệu (IP datagrams) theo địa chỉ IP bằng cách chọn đƣờng (routing) trong mạng thông qua 
cổng kết nối (gateway). Để việc trao đổi thông tin trong mạng Internet thực hiện đƣợc, mỗi 
máy tính trong mạng cần phải đƣợc cấp một định danh (Identify) để phân biệt các máy với 
nhau, mỗi máy đƣợc gán cho một nhóm số gọi là địa chỉ IP (IP Address) hay nói cách khác 
địa chỉ IP dùng xác định đối tƣợng nhận và gửi thông tin trên Internet. Địa chỉ IP gồm 4 nhóm 
số thập phân có giá trị từ 0 đến 255, phân các nhau bằng dấu chấm (.) 
Trên thực tế, địa chỉ IP hiện tại (IP version 4) có 32 bit chia thành 4 octet (mỗi octet có 
8 bit), các octet tách biệt nhau bằng dấu chấm (.) 
Ví dụ : 11001011. 01100010. 01010011.00110101 
Để tiện việc quản l và phân phối địa chỉ, ngƣời ta chia các địa chỉ IP thành 3 phần : 
 31 0 Thứ tự các bit 
 Class ID Network ID Host ID 
Các địa chỉ IP đƣợc chia thành 5 lớp tùy theo giá trị của 3 byte đầu tiên: A,B,C,D,E. 
Riêng lớp D và E, Tổ chức Internet đang để dành cho các mục đích khác, không phân phối. 
Địa chỉ IP tự nó không chứa thông tin về mô tả mạng, subnet đi kèm với mỗi địa chỉ cung cấp 
thông tin này. 
Class Vùng địa chỉ l thuyết Số mạng sử 
dụng tối đa 
Số máy chủ trên 
từng mạng 
Subnet 
A 0.0.0.0 đến 127.0.0.0 126 16.777.214 255.0.0.0 
B 128.0.0.0 đến 191.255.0.0 16.382 65.534 255.255.0.0 
C 192.0.0.0 đến 223.255.255.0 2.097.150 254 255.255.255.0 
Địa chỉ IP trên Internet do ICANN chịu trách nhiệm phân bổ. Địa chỉ IP thƣờng đƣợc 
các ISP (Internet Service Provider) quản l . Trung tâm mạng Internet vùng Châu Á - Thái 
bình dƣơng (APNIC) phân phối cho VDC 8 địa chỉ ở lớp C, có thể phân phối cho 8 mạng từ 
203.162.0.0 đến 203.162.7.0. Ở Việt Nam, cơ quan VNNIC (Vietnam Internet Network 
Inforrmation Center) thuộc Bộ Bƣu chính – Truyền thông chịu trách nhiệm quả ... g phiên bản của nó, có thể là 
:"JavaScript 1.5", "JScript 5.6", "ECMAscript 262", "VBscript". 
- type = "text/js" báo cho trình duyệt biết tệp tin bên ngoài có thể có phần mở rộng là .js 
hay .txt đều đƣợc, đây là thuộc tính tùy chọn. 
- SCR xác định URL dẫn đến một tệp tin JavaScript đặt bên ngoài tệp HTML. 
Khi muốn sử dụng các biểu thức của JavaScript để làm giá trị thuộc tính cho một thẻ 
HTML ta dùng cú pháp: thuộc tính ="&{biểu thức};". 
Ví dụ : 
 var d=70; 
 Nội dung 1 Nội dung 2 
3.4. Các đối tƣợng của trình duyệt 
Trình duyệt là một ứng dụng dùng để hiển thị các nội dung của một tƣ liệu HTML. Các 
trình duyệt cũng đã đƣa ra một số đối tƣợng để các script có thể truy cập, các đối tƣợng này 
đƣợc tổ chức theo một mô hình phân cấp, gọi là mô hình đối tƣợng trình duyệt (BOM, 
Browser Object Model). Trong 9 đối tƣợng của BOM, đối tƣợng quan trọng nhất là đối tƣợng 
document. BOM đóng vai trò nhƣ là một API (Application Programming Interface) cho việc 
lập trình các ứng dụng trên nền tảng web cho client-side hay cách khác: chính trong môi 
trƣờng trình duyệt, JavaScript dựa vào mô hình này để truy xuất các đối tƣợng trên một trang 
web để cập nhật nội dung, cấu trúc và kiểu dáng của đối tƣợng 
Mỗi đối tƣợng trong BOM là một tập hợp gồm : 
- Các thuộc tính (Properties) 
- Các phƣơng thức (Methodes) 
Ngoài ra còn có các sự kiện (Events) có thể kết hợp trên đối tƣợng xác định. 
Trong giáo trình này, ngƣời viết dựa trên quan điểm của Peter Kantor (Đại học Hudson 
Valley, NY), chỉ trình bày về BOM mà không trình bày về DOM (Document Object Madel) 
vốn là một lĩnh vực rộng lớn, phù hợp cho XML hơn. Tuy nhiên, các tham khảo về DOM 
cũng có những lợi ích khi lập trình web. 
 Trong IE BOM, đối tƣợng lớn nhất là đối tƣợng window, còn trong NN BOM, đối 
tƣợng window và đối tƣợng navigator là ngang cấp. 
 Sự khác nhau giữa IE BOM và NN BOM chủ yếu là các đối tƣợng và các thuộc tính 
và phƣơng thức của mỗi đối tƣợng. 
 - 32 - 
 Có 9 đối tƣợng trình duyệt: window, document, event, frame, history, location, 
navigator, screen, mimeType và plugin; ta sẽ lần lƣợt nghiên cứu các đối tƣợng quan trọng, 
còn đối tƣợng quạn trọng nhất là document đƣợc tách ra một phần riêng. 
Đối tƣợng window 
Đối tƣợng window miêu tả cửa sổ đang hiển thị trang web, cung cấp các khả năng truy 
xuất đến các đối tƣợng con của nó và các trạng thái cũng nhƣ nắm bắt các sự kiện xảy ra trên 
cửa sổ này. 
Các thuộc tính 
- defaultStatus: dòng thông báo xuất hiện trên thanh trạng thái của cửa sổ trình duyệt. 
- status : dòng thông báo tạm thời xuất hiện trên thanh trạng thái của cửa sổ trình 
duyệt. 
- frames : mảng các frame đƣợc chứa bên trong cửa sổ trình duyệt 
- location : URL của tệp tin tƣ liệu HTM đƣợc mở trong cửa sổ hiện thời 
- name : tên của cửa sổ 
- closed : xác định trạng thái của cửa sổ có đƣợc đóng hay không. 
- top : trả về sổ cha nằm phía trên nhất. 
- parent : tham chiếu đến cửa sổ chứa một cửa sổ khác 
- self, window : chỉ cửa sổ hiện thời. 
- external : trả về host của trang web 
- openner : khi một cửa sổ đƣợc mở, thuộc tính openner trỏ đến cửa sổ cha của nó. 
Các phương thức 
 - alert : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định. 
 - confirm : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định 
và hai nút lệnh Yes, No; phƣơng thức trả về true | false tùy thuộc ngƣời sử dụng ấn nút yes 
hay no. 
 - prompt : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định và 
một text box để ngƣời sử dụng nhập liệu. Phƣơng thức trả về một dữ liệu kiểu chuỗi. Cú pháp 
: window.prompt(dòng nhắc, giá trị mặc nhiên); 
 - close : đóng cửa sổ trình duyệt hiện thời hay một ứng dụng HTML (HTA). 
 - open : mở một cửa sổ mới và nạp tệp tƣ liệu HTML đƣợc cho bởi URL. Cú pháp : 
window.open(URL, windowName, features); 
Trong đó feature là các sắc thái của cửa sổ mới, đây là tham số tùy chọn. Một số thuôc 
tính và giá trị : 
o height | width | left | = x ; xác định kích thƣớc của cửa sổ và khoảng cách bên trái với 
cửa sổ hiện tại, đơn vị tính bằng pixel. 
o location | menubar | scrollbar | toolbar : thêm thanh địa chỉ, ... vào cửa sổ (gán giá trị 
yes sau mỗi thuộc tính để xác định) 
o resizable : cửa sổ có thể thay đổi kích thƣớc 
Ví dụ : window.open("chuong1.htm","wChap1","width=400, width=200"); 
 - print : in trang web hiện thời ra máy in. 
 - setTimeOut(); 
 - focus: chuyển cửa sổ vừa mở tiến đến phía trƣớc. 
Ví dụ : <a href ="#onClick="window.openner.location=""; 
{window.focus();} VietNamNet 
- blur : ngƣợc lại với phƣơng thức focus(), đƣa cửa sổ đang mở ra phía sau. 
 - 33 - 
- resizeTo(x, y) : thay đổi kích thƣớc cửa sổ với width =x và height=y. 
 - resizeBy(m, n) : với m,n Z, tăng / giảm kích thƣớc cửa sổ với m,n pixel. 
 - moveTo(x,y) : di chuyển cửa sổ đến vị trí với tạo độ đỉnh trên trái đến (x,y) 
 - moveBy(m.y) : tăng giảm tọa độ đỉnh trên trái của cửa sổ với m, n pixel 
-setInterval(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript trong 
khoảng thời gian, hàm này trả lại thời gian để hàm clearInterval() có thể loại bỏ nó. 
 -setTimeout(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript một lần 
sau một thời gian nhất định tính bằng milli giây. 
-clearTimeout(số milli giây) : xóa bỏ đồng hồ báo giờ. 
Các sự kiện 
 Có 5 sự kiện đƣợc kết hợp với đối tƣợng window: onblur, onfocus, onload, onresize, 
onunload. Ta sẽ nghiên cứu ở phần II.2 dƣới đây. 
Mô hình sự kiện (Event model) 
 Mô hình sự kiện trong IE và NN bao gồm hai thành phần , tuy nhiên về chi tiết có 
nhiều điểm khác nhau. 
 - Đối tượng Event, đƣợc xem là một giao diện sự kiện để lập trình các script. 
 - Danh sách các sự kiện, mỗi sự kiện đƣợc xem nhƣ là một thuộc tính nội tại của mỗi 
thẻ HTML. 
Đối tượng sự kiện (Event Object) 
 Sự kiện là kết quả của một hành động do ngƣời sử dụng hay hệ thống tạo ra, 
JavaScript là một ngôn ngữ hƣớng sự kiện, có thể sử dụng để đón bắt các sự kiện này khi 
chúng xảy ra và thực hiện các hành động. Thông qua việc nắm bắt và xử l sự kiện, 
JavaScript có thể truy cập đến các đối tƣợng của BOM để cập nhật, thay đổi thuộc tính của 
đối tƣợng, tạo nên trang web tƣơng tác và động, đây chính là khả năng mà Microsoft IE gọi là 
DHTML. 
 Đối tượng event 
Trong IE BOM : đối tƣợng event là một đối tƣợng con của đối tƣợng window còn 
trong NN BOM thì nó là một đối tƣợng ngang cấp với đối tƣợng window, và trong mỗi mô 
hình đối tƣợng tƣ liệu đối tƣợng event có các thuộc tính , phƣơng thức khác nhau đƣợc cho 
trong các bảng sau, đây là sự khác biệt quan trọng cần lƣu . 
Các thuộc tính của đối tƣợng event: 
(IE 6: Event Object có 38 thuộc tính, NN 8: Event Object có 201 thuộc tính) 
Properties IE NN Diễn tả 
altKey x x Trả về true nếu ngƣời sử dụng ấn phím ALT trong khi sự 
kiện xảy ra và ngƣợc lại 
ctlKey x x Trả về true nếu ngƣời sử dụng ấn phím CTRL trong khi 
sự kiện xảy ra và ngƣợc lại 
shiftKey x x Trả về true nếu ngƣời sử dụng ấn phím SHIFT trong khi 
sự kiện xảy ra và ngƣợc lại 
cancelBubble x x Trả về true nếu muốn ngƣng sự nổi bọt sự kiện 
clientX, clientY x x Tọa độ góc trên trái của trang web, tính bằng pixel 
screenX, screenY x x Tọa độ của màn hình tại vị trí xảy ra sự kiện 
pageX, pageY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện 
offsetX, offsetY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện 
fromElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi ra 
 - 34 - 
Properties IE NN Diễn tả 
toElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi vào 
keyCode x x Phím đƣợc sử dụng để kích họat sự kiện 
srcElement x Đối tƣợng mà sự kiện diễn ra trong đó 
target x Trả về đối tƣợng đầu tiên mà sự kiện diễn ra 
type x x Loại sự kiện 
keyCode x x Trả về mã Unicode của phím đƣợc ấn xuống 
Ngăn chặn sự nổi bọt sự kiện (Event Bubbling) 
Trong BOM, các phần tử của trang web đƣợc tổ chức theo một cây phân cấp, do vậy 
một sự kiện xảy ra trên đối tƣợng con có thể đƣợc xảy ra trên đối tƣợng cha của nó, hiện 
tƣợng này gọi là sự nổi bọt sự kiện. Ngƣợc lại với sự nổi bọt sự kiện là sự chảy tràn sự kiện 
(Event Flow), sự kiện xảy ra ở cấp cao sẽ ảnh hƣởng đến các cấp thấp hơn. 
Ví dụ: 
function cancelBubble(the){ 
var str=document.getElementById(the); 
if(str.tagName=="P") event.cancelBubble=true; //(1) 
/* script này chạy trên IE 6.0 lẫn NN 7.1 
có thể thay dòng lệnh (1) bằng event.cancelBubble=true; là đủ */ 
alert("Thẻ P"); 
} 
 PARAGRAPH 
 Nếu không có dòng lệnh (1) ở trên thì khi click trên PARAGRAPH sẽ lần lƣợt xảy ra 
sự kiện onClick trên thẻ rồi trên thẻ và hai hộp hội thoại lần lƣợt xuất hiện. 
Dòng lệnh (1) có tác dụng ngăn chặn sự nổi bọt sự kiện, lúc này khi click trên PARAGRAPH 
chỉ có hàm CancelBubble đƣợc thực hiện mà thôi. 
Trong script trên ta sử dụng các phƣơng thức và thuộc tính đƣợc cả hai trình duyệt 
chấp nhận : phƣơng thức getElementByID (sẽ trình bày trong mục Document Object) và 
thuộc tính event.cancelBubble (đã trình bày trên), kỹ thuật nhƣ vậy gọi là cross-browser. 
Các sự kiện 
 Tập hợp các sự kiện là thành phần của BOM chứ không phải là thành phần của 
JavaScript, mỗi phần tử trên trang web đƣợc kết hợp với một số sự kiện và các sự kiện này 
khác nhau trên mỗi trình duyệt hay cách khác mỗi thẻ HTML có những thuộc tính sự kiện xác 
định. 
 Lưu ý: giữa Microsoft và Netscape sử dụng các thuật ngữ liên quan đến mô hình sự 
kiện khá khác nhau, tuy nhiên nội dung đều nhƣ nhau: MS gọi event thì Netscape gọi event 
handler ...). Để thống nhất, trong giáo trình này chúng ta sử dụng thuật ngữ theo Microsoft. 
 Cách sử dụng: 
 - 35 - 
 ... 
Danh sách các sự kiện thông dụng đƣợc sử dụng cho IE và NN : 
NSD : Ngƣời sử dụng 
Event Áp dụng cho phần tử Mô tả & Sử dụng khi 
onAbort image NSD dỡ bỏ việc nạp ảnh khi ckick vào một 
liên kết hay ấn nút lệnh Stop 
onBlur window, frame và cả các 
phần tử của form 
NSD rời khỏi tiêu điểm từ window, frame hay 
tất cả phần tử của form 
onFocus window, frame và cả các 
phần tử của form 
Đƣợc kích họat khi NSD thiết lập tiêu điểm 
trên đối tƣợng window, frame,... 
onClick link, button, check box, 
v.v. 
Đƣợc kích họat khi NSD ấn nút trái của chuột 
lên đối tƣợng 
onChange text field, text area, 
select list 
Đƣợc kích họat khi NSD thay đổi giá trị của 
phần tử 
onLoad window, document, 
applet, framset, image, 
link, object, script, style 
Đƣợc kích họat sau khi trình duyệt đã tải xong 
tƣ liệu HTML , applet hay image... 
onUnLoad window, document, 
framset 
Đƣợc bẩy (trigger) khi NSD loại bỏ tƣ liệu 
HTML khỏi trình duyệt. 
onMouseDown button, link, document Đƣợc kích họat khi NSD ấn một phím chuột 
onMouseUp button, link, document Đƣợc kích họat khi NSD thả một phím chuột 
onMouseOver textarea, link, layer , 
image, button ... 
Đƣợc kích họat khi NSD di chuyển con trỏ 
chuột trên phần tử 
onMouseOut textarea, link, layer, 
image, button 
Đƣợc kích họat khi NSD di chuyển con trỏ 
chuột ra khỏi phần tử 
onResize window, frame Đƣợc kích họat khi kích thƣớc đối tƣợng sắp 
bị thay đổi 
onScroll window, frame Đƣợc kích họat khi NSD sử dụng thanh cuộn 
của cửa sổ 
onKeyDown textbox, text area Đƣợc kích họat khi NSD ấn một phím 
onKeyUp textbox, text area Đƣợc kích họat khi NSD nhả một phím 
onKeyPress textbox, text area Đƣợc kích họat khi NSD gõ một phím 
Ví dụ 1: Sử dụng sự kiện onLoad để tự động mở trang web khác xuất hiện phía trƣớc 
trang web hiện tại. 
Đối tƣợng history 
Đối tƣợng history lƣu giữ các URL mà ngƣời sử dụng đã mở bằng trình duyệt. 
window.history có các thuộc tính và phƣơng thức sau : 
Thuộc tính 
- lenght : danh sách URL trong history 
- current: URL của tƣ liệu HTML hiện hành 
- next: URL của tƣ liệu HTML tiếp sau 
 - 36 - 
- previous : URL của tƣ liệu HTML đƣợc mở liền trƣớc. 
Các phương thức 
- back() : trở lại trang trƣớc 
- forward() : đi đến trang kế tiếp 
- go() : nhận tham số là một URL hay một số (-1,0,1) để đi đến trang xác định. Trong 
IE: -1 tƣơng ứng với trang trƣớc, 0: trang hiện tại, 1: trang kế tiếp. 
Đối tƣợng location 
 Đối tƣợng location chứa các thông tin về giao thức, host, port, liên kết, đƣờng dẫn, tên 
tệp tƣ liệu HTML của tệp tƣ liệu HTML đƣợc xem từ client, đồng thời cho phép thiết lập 
URL cho đối tƣợng window . 
Các thuộc tính 
- host : tên webserver 
- hostname : tên miền 
- href : đƣờng dẫn đầy đủ của liên kết 
- pathname : đƣờng dẫn và tên tệp tin của liên kết 
- port : cổng URL 
- protocol : giao thức thực hiện liên kết. 
- search : trả về một chuỗi là thông tin nhận đƣợc từ một trang web khác gửi đến 
theo phƣơng pháp GET. 
Để biết các thuộc tính của đối tƣợng location ta sử dụng đọan script sau: 
for(prop in location){ 
document.write(prop+": "+location[prop]+"";} 
Đối tƣợng navigator 
Đối tƣợng navigator chứa các thông tin về trình duyệt: tên, phiên bản, tên mã, ngôn ngữ 
thể hiện, hệ điều hành... 
Các thuộc tính (đƣợc IE và NN sử dụng): 
- Appname : tên trình duyệt 
- AppVersion : phiên bản của trình duyệt 
- appCodeName : tên mã của trình duyệt 
- platform : hệ điều hình của trình duyệt 
Để biết các thuộc tính của đối tƣợng navigator ta sử dụng đọan script sau: 
for(prop in navigator){ 
document.write(prop+": "+ navigator [prop]+"";} 
Chú ý : Trong IE BOM navigator là đối tƣợng con của window, còn trong NN BOM 
navigator ngang cấp với window. 
Đối tƣợng screen 
 Đối tƣợng screen chứa các thuộc tính liên quan đến độ phân giải màn hình, khả năng 
màu sắc và kích thƣớc màn hình tính bằng pixel: 
- AvailHeight : Chiều cao của màn hình hệ thống, không kể thanh tác vụ 
- AvailWidth : Chiều rộng của màn hình hệ thống, không kể thanh tác vụ 
- ColorDepth : Số bít dùng để thể hiện màu cho mỗi pixel 
- Height : Độ phân giải tính theo chiều đứng của màn hình 
- Width : Độ phân giải tính theo chiều ngang của màn hình 
 - 37 - 
Đọan script sau sẽ thay đổi kích thƣớc và canh giữa cửa sổ trình duyệt trên màn hình 
của ngƣời sử dụng : 
var newTopLeftX=(screen.availWidth-640)/2.0; 
var newTopLeftY =(screen.availHeight-480)/2.0; 
window.resizeTo(640,480); 
window.moveTo(newTopLeftX, newTopLeftY); 
Đối tƣợng document 
document là đối tƣợng tƣ liệu, chứa tất cả phần tử HTML của trang web. Đây là đối 
tƣợng quan trọng nhất trong mô hình đối tƣợng trình duyệt, cho đến nay giữa IE và NN không 
có nhiều khác biệt: các đối tƣợng all, filter và selection chỉ có trong IE BOM còn đối tƣợng 
layer vốn là một đặc trƣng của NN, nay đã không tồn tại trong các phiên bản NN 6.0 hay cao 
hơn. 
CÂU HỎI VÀ BÀI TẬP 
1. Viết một script cho lại các mục của trình đơn để giải phƣơng trình bậc nhất, phƣơng 
trình bậc hai một ẩn 
2. Viết một script cho phép nhập dữ liệu vào mãng. Hãy sắp xếp mãng đó theo phƣơng 
thức Sort và in ra kết quả (Sử dụng phƣơng thức document.write biến) 
3. Viết một script cho phép nhập một chuỗi k tự. Cho biết độ dài của chuỗi, số từ trong 
chuỗi, xóa bỏ các khoảng trống không có nghĩa trong chuỗi. 
4. Tạo một lịch gồm có các thông tin : ngày, tháng, năm để ngƣời sử dụng có thể tra cứu 
thông tin theo thời gian đã lựa chọn (không dùng đối tƣợng ActiveX) 
(Tạo lịch giống đối tƣợng ActiveX, nhƣng chỉ sử dụng JavaScript: tham khảo tại địa chỉ 
 hay thƣ viện JavaScript trên