Tài liệu hướng dẫn giảng dạy - Lập trình Web nâng cao potx

TRUNG TÂM TIN HỌC - ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP. HCM
227 Nguyễn Văn Cừ – Quận 5 – Tp. Hồ Chí Minh
Tel: 8351056 – Fax 8324466 – Email:
Mã tài liệu: DT_NCM_LT_HDGD_LTWEBNC
Phiên bản 1.1 – Tháng 08/04



TÀI LIỆU HƯỚNG DẪN GIẢNG DẠY

CHƯƠNG TRÌNH KỸ THUẬT VIÊN
Học phần 5
LẬP TRÌNH WEB NÂNG CAO

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 1/59



Mục lục
Mục lục 1
GIỚI THIỆU 3
GIÁO TRÌNH LÝ THUYẾT 4
TÀI LIỆU THAM KHẢO 4
HƯỚNG DẪN PHẦN LÝ THUYẾT 5
Bài 1 TỔNG QUAN VỀ JAVASCRIPT 5
I. Giới thiệu bài học 6
II. JavaScript và hỗ trợ của trình duyệt 7
II.1. Đoạn JavaScript đầu tiên 8
III. Sơ lược về ngôn ngữ JavaScript 9
III.1. Demo: Sử dụng Visual InterDEV để lập trình JavaScript 12

IV. Thời điểm thực hiện một đoạn Script 13
V. Phạm vi sử dụng biến 15
VI. Các đối tượng cơ sở trong JavaScript 16
Bài 2 Các đối tượng JavaScript trong trang Web 17
I. Giới thiệu bài học 18
II. Các đối tượng trong trang web 19
II.1. Sơ đồ các đối tượng trong trang web 20
II.2. Truy cập đến các đối tượng 21
III. Đối tượng window và document 22
III.1. Sử dụng đối tượng Windows 23
III.2. Sử dụng đối tượng Document 26
IV. Đối tượng form và các thành phần 28
IV.1. Sử dụng đối tượng form 29
IV.2. Tổng quan các đối tượng trong form 31
IV.3. Tổng quan các đối tượng trong form (tt) 32
IV.4. Đối tượng Text 33
IV.5. Đối tượng CheckBox và RadioButton 34
IV.6. Đối tượng Select 36
V. Kiểm tra dữ liệu nhập trên form 38
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 2/59


Bài 3 Các đối tượng mở rộng trong JavaScript 39
I. Giới thiệu bài học 40
II. Xử lý các sự kiện bằng đối tượng event 41
II.1. Đối tượng event 42
II.2. Xử lý các sự kiện bàn phím 43
II.3. Xử lý các sự kiện chuột 45
III. Các đối tượng mở rộng 46

III.1. Sử dụng đối tượng Image 47
III.2. Sử dụng đối tượng location 49
III.3. Sử dụng đối tượng history 50
III.4. Sử dụng đối tượng navigator 51
IV. Làm việc với các frame 52
ĐỀ THI MẪU CUỐI NHÓM HỌC PHẦN 55
ĐỀ THI MẪU KIỂM TRA GIÁO VIÊN 59

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 3/59


GIỚI THIỆU
Sau khi hoàn thành khóa học, học viên sẽ có khả năng:
• Sử dụng thành thạo ngôn ngữ JavaScript
• Sử dụng thành thạo môi trường lập trình web Visual InterDEV
• Xây dựng các ứng dụng web hoàn chỉnh

Với thời lượng là 36 tiết LT và 60 tiết TH được phân bổ như sau:
STT Bài học Số tiết LT Số tiết TH
1 Tổng quan về JavaScript 6 10
2 Các đối tượng JavaScript trong trang web 6 8
3 Các đối tượng JavaScript mở rộng 2 2
4 Thực tập đồ án thực tế web 22 40
Tổng số tiết : 36 60

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 4/59

GIÁO TRÌNH LÝ THUYẾT
Sử dụng giáo trình “Lập Trình Ứng Dụng Web” của tác giả Nguyễn Thái Hưng, in lần thứ 1.
TÀI LIỆU THAM KHẢO
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 5/59


HƯỚNG DẪN PHẦN LÝ THUYẾT

Bài 1
TỔNG QUAN VỀ JAVASCRIPT
Tóm tắt
Lý thuyết 6 tiết - Thực hành 10 tiết
Mục tiêu Các mục chính Bài tập bắt
buộc
Bài tập làm
thêm
Giới thiệu về ngơn ngữ
JavaScript áp dụng trong
việc xây dựng các đọan
client-side script. Truyền
đạt cho học viên những
khái niệm quan trọng về
thời điểm thực hiện của
một đoạn JavaScritp, biến
và phạm vi sử dụng cũng
như việc sử dụng các đối
tượng cơ bản của
JavaScritp như String,
Date, Math,… để xử lý các

dữ liệu nhập, xuất.

Sau khi hồn tất bài học
này, học viên có thể:
 Nắm vững cú pháp
của ngơn ngữ
JavaScript
 Xác định thời điểm
một đọan Script
được thực hiện
 Sử dụng mơi
trường Visual
InterDEV để lập
trình với
JavaScript
 Sử dụng được các
đối tượng cơ sở
của JavaScript

I. Giới thiệu bài học
II. JavaScript và hỗ trợ của trình
duyệt
III. Sơ lược về ngơn ngữ JavaScript
IV. Thời điểm thực hiện một đoạn
Script
V. Phạm vi sử dụng biến
VI. Các đối tượng cơ sở trong
JavaScript
1.1 – 1.10

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 6/59


I. Giới thiệu bài học


Nội dung bài học
 JavaScript và hỗ trợ của trình duyệt
 Sơ lược về ngơn ngữ JavaScript
 Sử dụng Visual InterDEV
 Thời điểm thực hiện một đoạn Script
 Phạm vi của biến
 Các đối tượng cơ sở trong JavaScript



Trong mơ hình 3 lớp của ứng dụng web, tới giờ này bạn có thể thấy rõ vai trò xử
lý của 2 lớp CSDL và web server. Nhiệm vụ của web browser lúc này vẫn chỉ là
hiển thị những kết quả xử lý của web server. Thực sự, client (web browser) cũng
có khả năng thực hiện các xử lý, tính tốn riêng của mình.
Bài này trình bày với bạn cách sử dụng JavaScript để lập trình trên Web browser.
Bạn sẽ biết cách sử dụng mơi trường Visual InterDEV để viết các đoạn JavaScript,
xác định thời điểm mà đoạn Script sẽ được thực hiện và làm việc với các đối tượng
cơ sở của JavaScript như String, Date,…
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 7/59


II. JavaScript và hỗ trợ của trình duyệt

JavaScript và hỗ trợ của trình duyệt

Một số xử lý đơn giản khơng cần thiết gửi về
Server. Cần có:
{
Một cơ chế thi hành chương trình tại browser
{
Một cơng cụ để viết chương trình cho browser

JavaScript là cơng cụ lập trình Client Script phổ
biến nhất
{
Được hỗ trợ bởi các web browser phổ biến
{
Nhiều lập trình viên Web sử dụng, chia sẻ



Ứng dụng Web với HTML và ASP
Với HTML và ASP hay một Server script nào khác ta hồn tồn có thể xây dựng
một ứng dụng Web hồn chỉnh với đầy đủ các tính năng về truy xuất và quản lý
CSDL. Mơ hình ứng dụng của chúng ta đặt tồn bộ các xử lý ở Web server, mỗi lần
thực hiện một chức năng client sẽ gửi u cầu cho Web server và chờ nhận kết
quả.
Nếu bạn đang thực hành trên máy đơn với Web server đặt chính tại máy mà bạn
chạy trình duyệt hoặc trên một máy trong hệ thống mạng Intranet, tốc độ tương
tác giữa Web server và Client sẽ khơng quan trọng hay thậm chí nhanh gần bằng
tốc độ của một ứng dụng Windows Application. Tuy nhiên, nếu thử ứng dụng thực

sự trên Internet, bạn sẽ thấy tốc độ là một yếu tố ảnh hưởng rất nhiều tới một
ứng dụng web.
Tìm cách tăng tốc độ cho ứng dụng web
Nếu cân nhắc kỹ, ta thấy một số xử lý đơn giản thực ra khơng cần thiết gửi về cho
Server. Ví dụ, nếu người dùng nhập dữ liệu sai hay thiếu thì gửi dữ liệu đó về cho
Web server cũng khơng xử lý được. Vậy, những xử lý đó có thể đặt ở vị trí nào?
Cần có một cơ chế thực thi chương trình được hỗ trợ bởi trình duyệt và một cơng
cụ để viết chương trình chạy ngay tại trình duyệt, đó chính là Client Script mà
chúng ta đã có dịp nói tới.
JavaScript là cơng cụ lập trình Client Script phổ biến nhất. Đầu tiên, nó được
Nestcape xây dựng với tên gọi LiveScript. LiveScript lấy nhiều ý tưởng từ Java của
Sun và sau đó được đổi tên thành JavaScript. Các bộ trình duyệt đầu tiên hỗ trợ
JavaScript là của Nestcape, tiếp theo chân Nestcape, Microsoft cung cấp các phiên
bản IE từ 4.0 hỗ trợ JavaScript để các trình duyệt web nhỏ khác “noi gương” theo.
Microsoft thậm chí còn tung ra ngơn ngữ Jscript của riêng mình bên cạnh VBScript
khá giống với JavaScript của Nestcape.
Với sự hỗ trợ của các trình duyệt, JavaScript liên tục được nâng cấp qua nhiều
phiên bản và chứng tỏ được tính hiệu quả qua sự cuốn hút của nó với các nhà lập
trình Web. Giờ đây trên Internet, bạn có thể tìm ra vơ số những đoạn JavaScript
hữu dụng cho trang web của mình. Ứng dụng của JavaScript có thể nói chủ yếu
gồm 2 phần: Kiểm tra dữ liệu nhập và trình bày giao diện cho trang web.
Trong chương này và chương kế, chúng tơi sẽ tập trung vào việc kiểm tra dữ liệu
nhập. Ở chương sau đó, bạn sẽ được cung cấp các ví dụ đa dạng cho các ứng
dụng về giao diện của JavaScript.

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 8/59


II.1. Đoạn JavaScript đầu tiên

Đoạn JavaScript đầu tiên
 Các đoạn code JavaScript cần đặt trong tag
<Script></Script>
 JavaScript phân biệt chữ HOA/thường
 Đối tượng document đại diện cho trang web và
hành động write dùng để ghi một chuỗi HTML trong
trang web



Ví dụ
<HEAD>
<SCRIPT LANGUAGE=javascript>
function cmdOK_onclick() {
document.write(frm.txtTen.value)
}
</SCRIPT>
</HEAD>
<BODY>
<P>Doan JavaScript dau tien</P>
<FORM name="frm">
<P>Ten cua ban <INPUT id=txtTen name=txtTen>&nbsp;
<INPUT id=cmdOK name=cmdOK type=button value=OK
onclick="return cmdOK_onclick()"></P>
</FORM>
</BODY>
Khi chạy thử và nhập tên vào textbox:

Click vào nút OK, tên của bạn sẽ được hiện trên một trang web khác, chỉ có 1
dòng: Nguyen Thai Hung
Bạn cần nắm 3 điểm cơ bản sau:
Các đoạn code JavaScript cần đặt trong tag <Script></Script>
JavaScript phân biệt chữ HOA/thường
Đối tượng document đại diện cho trang web và hành động write dùng để ghi một chuỗi
HTML trong trang web

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 9/59


III. Sơ lược về ngơn ngữ JavaScript


Sơ lược về ngơn ngữ JavaScript

Câu lệnh: khai báo, điều khiển, thực thi

Biến: khơng có kiểu, có thể (khơng) khai báo trước

Chỉ có một loại chương trình con: function
{ Ln phải có dấu () khi gọi hàm
alert(“chuỗi thơng báo”) hiện lên hộp thoại thơng báo
document.write(“chuỗi HTML”) ghi chuỗi HTML vào trang web
promt(“nội dung nhập liệu”) hiện một hộp thoại nhập liệu



Chúng tơi khơng muốn dài dòng về các chi tiết của ngơn ngữ lập trình và cũng

như đã làm với VBScript, bạn sẽ dễ dàng nắm những điểm chủ chốt trong cách
viết chương trình bằng JavaScript.
Ngồi ra, nếu bạn từng viết C hay Java bạn sẽ khơng cần thiết phải đọc phần này.
Câu lệnh
Có thể chia các câu lệnh trong JavaScript thành 3 loại:
Các câu lệnh khai báo biến, hàm
Các câu lệnh điều khiển (if, for, while)
Các câu lệnh thực thiOK
Về ngun tắc, các câu lệnh thực thi và khai báo biến phải kết thúc bằng dấu ;
nhưng bạn thực sự khơng cần tới hai ngón tay cho ký tự rườm rà này cuối mỗi
dòng.
Biến
Điểm tương tự này bạn đã từng gặp trong VBScript: biến khơng có kiểu dữ liệu.
Bạn sẽ khai báo biến bằng câu lệnh:
• var <tên biến> [= <giá trị>]
gán ngay một giá trị cho biến là khơng cần thiết nhưng nếu có, giá trị sẽ giúp bạn
dễ xác định kiểu dữ liệu của biến hơn. Biến có thể là một giá trị số, chuỗi, ngày
giờ hay một đối tượng.
Ví dụ:
var doc = document
" Chú ý: Hãy cẩn thận với biểu thức có nhiều biến vì JavaScript khơng
làm tốt việc tự động chuyển đổi kiểu dữ liệu, thơng thường dữ liệu được chuyển
thành kiểu chuỗi.
Ví dụ:
x = 5
y = “1”
z = x + y // z = “51”
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 10/59

Một số hàm đơn giản
Bạn sẽ cần vài hàm đơn giản để hiển thị thơng tin sau:
alert(“chuỗi thơng báo”): hiện lên hộp thoại thơng báo
document.write(“chuỗi HTML”): ghi chuỗi HTML vào trang web
promt(“nội dung nhập liệu”): hiện một hộp thoại nhập liệu
Ví dụ:
nhập vào một chuỗi và hiện lại thơng báo là chuỗi vừa nhập
ten = prompt(“Nhap vao ten cua ban:”)
alert(“Xin chao, ” + ten)
document.write(“Xin chao, <b>” + ten + “</b>”)
Các cấu trúc điều khiển
Cấu if … else có dạng
if (điều kiện){
các lệnh …
}else{
các lệnh …
}
" Chú ý: Biểu thức điều kiện cần đặt trong dấu (), khi có nhiều điều kiện
nối với nhau bạn dùng && thay cho AND, || thay cho OR và ! thay cho NOT.
Bạn cũng phải để ý rằng phép tốn so sánh bằng là: ==

Bộ ngoặc { } dùng để “khoanh vùng” một khối lệnh, nếu chỉ có 1 lệnh bạn khơng
cần đến { }.
Cấu trúc lặp for có dạng
for (I = gt đầu;I <= gt cuối; I++){
khối lệnh …
}
I là biến đếm trong vòng lặp. Vòng lặp sẽ lặp trong khi điều kiện ở biểu thức thứ 2
còn đúng. Biểu thức thứ 3 chỉ ra cách thay đổi giá trị của I sau mỗi lần lặp. Tốn

tử ++ có nghĩa tăng lên 1: I = I + 1.
Ví dụ:
for ( i= 1; i <= 10; i++)
document.write(i + “<br>”)
Ví dụ trên sẽ in ra trang web 10 số từ 1 đến 10, mỗi số trên một dòng.
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 11/59


Cấu trúc lặp while có dạng
while (điều kiện lặp){
khối lệnh …
}
Chừng nào điều kiện lặp còn đúng, vòng lặp while sẽ vẫn còn thực hiện. Hãy xem
ví dụ sau biến vòng lặp for thành while:
Ví dụ:
i = 1
while (i <= 10){
document.write(i + “<br>”)
i++
}
Nhiều lập trình viên cũng thích viết điều kiện lặp theo kiểu while (1) và dùng câu
lệnh break. break có thể dùng cho cả for và while để thốt ra khỏi vòng lặp.
Hàm
JavaScript giống C và Java, khơng phân biệt thủ tục và hàm, tất cả các chương
trình con đều coi là hàm và phải có giá trị trả về. Nếu bạn khơng biết phải trả về
cái gì, kiểu trả về là void. Tuy nhiên, JavaScript thậm chí khơng có kiểu nên bạn
dùng từ khố function để khai báo hàm, khơng cần khai báo giá trị trả về.
function <tên hàm>(danh sách các tham số){
khối lệnh …

}
Cũng đừng ngạc nhiên khi bạn chỉ cần liệt kê danh sách các tham số, đơn giản là
vì biến khơng có kiểu. Nếu bạn cần trả về giá trị nào đó, hãy dùng lệnh return.
return khơng có tham số cũng sẽ kết thúc xử lý hàm ngay tại dòng được gọi.
Ví dụ:
function SoNT(n){
SoNT = (n > 1)
for (i=2; i<n; i++)
if (i % n = 0) return false
}
Hàm trên kiểm tra số n có phải là số ngun tố hay khơng.
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 12/59


III.1. Demo: Sử dụng Visual InterDEV để lập trình
JavaScript





Trong phần này, giáo viên sẽ trình bày các kỹ thuật sử dụng Visual InterDEV để
lập trình JavaScript:
Chèn vào một đọan JavaScript
Bẫy các sự kiện như click, onmousedown,…
Sử dụng Script Outline
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 13/59

IV. Thời điểm thực hiện một đoạn Script


Thời điểm thực hiện
một đoạn Script

Các lệnh khơng nằm trong function được thực hiện
ngay lập tức

Function chỉ thực hiện khi được gọi. Function có
thể được gọi
{ Do một sự kiện
{ Do một câu lệnh



Khi viết chương trình, điều quan trọng mà người lập trình cần biết là thời điểm mà
một dòng lệnh được thực hiện. Bạn có thể chèn các đoạn JavaScript ở bất cứ đâu
trong trang web tuy nhiên, thời điểm mà các script đó được thực hiện như sau:
Các lệnh JavaScript khơng nằm trong function sẽ được thực hiện ngay khi trình duyệt xử lý
trang web vào lúc khởi động
Các function chỉ thực hiện khi được gọi. Một function được gọi từ một lệnh JavaScript hay bởi
một sự kiện mà nó xử lý
Một số sự kiện tự động phát sinh trong khi một số sự kiện phát sinh do tác động của người
dùng
Ví dụ:
<HEAD>
<SCRIPT LANGUAGE=javascript>
document.write("Phan HEAD<br>")

</SCRIPT>

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
function button1_onclick() {
alert("Button click!!!")
}
function window_onload() {
alert("Khoi dong")
}
</SCRIPT>
</HEAD>
<BODY onload="return window_onload()">
<SCRIPT LANGUAGE=javascript>
document.write("Phan BODY<br>")
</SCRIPT>

<FORM name=FORM1 action="" method=post>
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 14/59


<INPUT id=button1 type=button value=Button name=button1
onclick="return button1_onclick()">
</FORM>
<SCRIPT LANGUAGE=javascript>
document.write("Ket thuc xu ly trang web")
</SCRIPT>
</BODY>

Khi thực hiện ví dụ trên, bạn sẽ thấy kết quả là trang web như sau:

Trang web sẽ hiện ra trước khi hộp thơng báo “Khoi dong” hiển thị. Các đoạn
document.write khơng nằm trong function và được thực hiện theo thứ tự từ trên
xuống dưới trong trang web.
Function windows_onload() được thực hiện do sự kiện onload của đối tượng
window phát sinh. Trong trang web, đối tượng window được coi là tag <body>.
Hộp thơng báo hiện ra sau khi tồn bộ trang web đã được hiển thị chứng tỏ sự
kiện onload diễn ra sau khi tồn bộ document đã được trình duyệt xử lý.
Khi bạn click vào Button, hộp thơng báo “Button click!!!” hiện lên, đây là thời điểm
mà function button1_onclick được thực hiện.

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 15/59


V. Phạm vi sử dụng biến


Phạm vi sử dụng biến
 Biến cục bộ chỉ có thể tham chiếu trong phạm vi
của hàm mà nó được khai báo
 Biến tồn cục phải được khai báo ở ngồi các hàm
và có phạm vi sử dụng trong tồn bộ trang web



Phạm vi sử dụng biến cũng là mối quan tâm khơng nhỏ của người lập trình.
JavaScript cũng phân biệt hai loại biến:

Biến tồn cục: Khai báo ngồi phạm vi của các function
Biến cục bộ: Khai báo trong một function
Phạm vi của biến cục bộ là function mà nó khai báo. Điều này có nghĩa là các câu
lệnh nằm ngồi function khi tham chiếu tới biến này thì sẽ có thể
gây ra lỗi.
Đương nhiên là bạn khơng gặp lỗi gì cả nếu bạn tham chiếu tới biến đó để gán giá
trị vì điều này cũng giống như bạn khai báo một biến mới vậy.
Phạm vi của biến tồn cục là tồn bộ trang web. Điều này có nghĩa là giữa các
đoạn <Script> khác nhau, bạn vẫn có thể chia sẻ một biến tồn cục. Biến tồn
cục chỉ có phạm vi trong một trang web, khơng liên quan gì tới trang web khác
trong cùng một website, nếu bạn muốn lưu một biến tồn cục trong website, bạn
sẽ cần dùng đến cookies.
Ví dụ:
<HEAD>
<SCRIPT LANGUAGE=javascript>
var x = 5
function A(){
var y = 10
x++
document.write("x=" + x + ", y=" +y)
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=javascript>
A()
x
y=1
document.write("<br>x=" + x + ", y="+y)
</SCRIPT>

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 16/59


</BODY>

VI. Các đối tượng cơ sở trong JavaScript


Các đối tượng cơ sở
trong JavaScript

JavaScript sử dụng các ĐỐI TƯỢNG để xử lý dữ liệu

Các đối tượng cơ bản: String, Math, Date, Array

Sử dụng đối tượng

Tạo mới đối tượng
x = “abcde”
y = x.charAt(3) //vì chỉ số tính từ 0 nên y = “d”
doc = window.document
doc.write(“<b>doc</b> cung chinh la document”)
“JavaScript”.toUpperCase() //JAVASCRIPT
a = new Array()
a(2) = 3



JavaScript cung cấp các hàm cơng cụ thơng qua những đối tượng. Khi cần xử lý

các loại dữ liệu cơ bản kiểu chuỗi, số, ngày giờ hay mảng ta sẽ dùng những đối
tượng tương ứng:
String: xử lý dữ liệu chuỗi
Math: xử lý dữ liệu số
Date: xử lý dữ liệu ngày, giờ
Array: xử lý dữ liệu mảng
Vì một biến trong JavaScript khơng có kiểu dữ liệu, JavaScript sẽ dựa vào giá trị
chứa trong biến để xác định biến đó thuộc loại đối tượng nào. Ví dụ sau đây minh
hoạ cách sử dụng đối tượng String.
Ví dụ:
x = “abcde”
y = x.charAt(3) //vì chỉ số tính từ 0 nên y = “d”
Ví dụ sau minh hoạ cách gán một đối tượng cho một biến:
Ví dụ:
doc = document
doc = window.document
doc.write(“Doi tuong <b>doc</b> cung chinh la document”)
JavaScript cũng có thể áp dụng các hành động (method) hay thuộc tính (property)
trực tiếp trên các giá trị.
Ví dụ:
“Thomas Jefferson”.toUpperCase() //THOMAS JEFFERSON
“JavaScript”.length // 10
" Chú ý: Giáo viên hướng dẫn học viên sử dụng tài liệu để tham khảo
các bảng liệt kê các thuộc tính và hành động thường dùng của các đối tượng.

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 17/59

Bài 2
Các đối tượng JavaScript trong trang Web
Tóm tắt
Lý thuyết 6 tiết - Thực hành 8 tiết
Mục tiêu Các mục chính Bài tập bắt
buộc
Bài tập làm
thêm
Đây là bài giảng quan
trọng nhất của phần
JavaScript, tập trung vào
việc sử dụng các đối
tượng trong trang web
dựa vào sơ đồ các đối
tượng được trình bày ở
đầu bài giảng. Bên cạnh
việc hướng dẫn sử dụng
từng đối tượng cụ thể,
giáo viên nên thường
xun tham chiếu lại sơ
đồ đối tượng để học viên
có thể nắm bắt cách truy
cập vào một đối tượng
cần làm việc.
Sau khi hồn tất bài học
này, học viên có thể:
 Đọc hiểu sơ đồ

các đối tượng
 Sử dụng các đối
tượng window và
document để quản
lý trang web
 Sử dụng các đối
tượng của form,
truy cập và kiểm
tra các dữ liệu
nhập trên form.
I. Giới thiệu bài học
II. Các đối tượng trong trang web
III. Đối tượng window và document
IV. Đối tượng form và các thành phần
V. Kiểm tra dữ liệu nhập trên form
2.1 – 2.5

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 18/59


I. Giới thiệu bài học


Nội dung bài học

Các đối tượng trong trang web

Đối tượng window và document


Đối tượng form và các thành phần

Kiểm tra dữ liệu nhập trên form



Ở bài trước, bạn đã nắm hết các nền tảng của JavaScript bao gồm các đối tượng
cơ bản, cách đưa script vào trang web và cách xử lý các sự kiện phát sinh từ trang
web. Trong bài này, chúng ta sẽ tiếp tục với những đối tượng như form, textbox,
button,… Làm sao để truy cập đến những đối tượng này? Chúng có những thuộc
tính và sự kiện gì? Nắm được những điểm này, bạn đã có thể tồn quyền kiểm
sốt được trang web trong khi người dùng thao tác.
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 19/59


II. Các đối tượng trong trang web


Các đối tượng trong trang web

Sơ đồ các đối tượng trong trang web

Truy cập đến các đối tượng



Về mặt cấu trúc, trang web có thể coi là một tài liệu với các thành phần bên trong
như các liên kết, hình ảnh, form,… Để có thể làm việc với từng thành phần đó,
JavaScript cung cấp cho người lập trình một sơ đồ tổ chức các đối tượng phân cấp

trong trang web. Dựa trên sơ đồ này, người lập trình có thể truy cập và làm việc
được với bất kỳ đối tượng nào.
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 20/59


II.1. Sơ đồ các đối tượng trong trang web


Sơ đồ các đối tượng
trong trang web
window
document
navigator
event
location
history
screen
form
image
all
styleSheet
link
anchor
text
textarea
radio
checkbox
button
select

option
password



Đọc sơ đồ đối tượng là một kỹ năng rất quan trọng của người lập trình. Hầu hết
các ngơn ngữ lập trình đều sử dụng kỹ thuật lập trình hướng đối tượng, do đó, khi
làm việc người viết chương trình chỉ cần nắm vững các đối tượng và mối liên hệ
giữa chúng là có thể xử lý rất nhiều cơng việc thơng thường.
Dưới đây là sơ đồ các đối tượng trong trang web, sơ đồ này sẽ giúp bạn nhìn ra
cách truy cập đến bất cứ đối tượng nào.

window
documen
navigator
event
location
history
screen
form
image
all
styleShee
link
anchor
text
textarea
radio
checkbox
button

select
option
password
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 21/59


II.2. Truy cập đến các đối tượng


Truy cập đến các đối tượng
 Truy cập các đối tượng:
window.document.frmThongTin.txtTen
 Các thành phần của một đối tượng bao gồm thuộc
tính, hành động và sự kiện
 Truy cập một đối tượng trong tập hợp qua thuộc
tính tập hợp



Với sơ đồ đối tượng trên, bạn có thể truy cập textbox txtTen trong form
frmThongTin như sau:
window.document.frmThongTin.txtTen
Một trang web chỉ có một cửa sổ là đối tượng window. Trong cửa số chứa trang
web là nội dung của trang web đó, đại diện bởi đối tượng document. Vì trong một
trang web, bạn có thể làm nhiều form nên để truy cập đến một form cụ thể, bạn
cần chỉ ra tên form đó.
Truy cập các thành phần trong đối tượng
Tốn tử (.) chính là cách để bạn truy cập vào các thành phần bên trong của một
đối tượng. Một đối tượng có thể bao gồm các thành phần: thuộc tính, hành động

và sự kiện.
Thuộc tính tập hợp
Trong các thuộc tính có một loại thuộc tính đặc biệt là các tập hợp hay đơn giản có
thể coi là các mảng. Ví dụ, trong document sẽ có một tập hợp các form. Tập hợp
này có tên là forms (chú ý đến chữ s ở cuối). Nếu trong trang web chỉ có một form
là frmThongTin bạn có thể truy cập frmThongTin như sau:
document.forms(0)
document.frmThongTin
Đơi khi, việc sử dụng sơ đồ đối tượng để truy cập các đối tượng trong trang web
sẽ trở nên dài dòng vì ngồi việc truy cập tới đối tượng, mục tiêu chính của bạn là
sử dụng những thuộc tính hay hành động của nó. Lúc này, ta thường khai báo
thêm biến để lưu lại đối tượng muốn sử dụng:
var f = document.frmThongTin
f.txtTen.value = “Nguyen Thai Hung”

Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 22/59


III. Đối tượng window và document


Đối tượng window và document
 Sử dụng đối tượng Windows
 Sử dụng đối tượng Document



Hai đối tượng ở cấp cao nhất trong sơ đồ các đối tượng là window và document.
Hai đối tượng này nắm quyền kiểm sốt trang web và cửa sổ hiển thị nó. So sánh

với ứng dụng trên Windows, đối tượng window cũng tương tự như đối tượng form
trong khi document có thể là một đối tượng chính mà form hiển thị và xử lý.
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 23/59


III.1. Sử dụng đối tượng Windows


Sử dụng đối tượng Windows

Đối tượng window đại diện cho cửa sổ trình duyệt
chứa trang web

Hành động open và close

Thuộc tính status

Hành động setInterval và clearInterval

Hành động setTimeout và clearTimeout

Hành động alert và confirm



Trên sơ đồ đối tượng, bạn có thể thấy đối tượng window nằm ở mức cao nhất,
khơng có đối tượng nào chứa nó. window đại diện cho cửa sổ chứa trang web.
Hành động open và close
Ví dụ:

<HEAD>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
function cmdClose_onclick() {
window.close()
}
function cmdNew_onclick() {
window.open("")
}
</SCRIPT>
</HEAD>
<BODY>
<P><INPUT id="" type=button value="New window" name=cmdNew
onclick="return cmdNew_onclick()"> &nbsp;
<INPUT type=button value=Close name=cmdClose onclick="return
cmdClose_onclick()"></P>
</BODY>
Ví dụ trên minh hoạ hai hành động close và open của window. Khi click vào nút
New window, một cửa sổ trình duyệt mới sẽ hiện truy cập tới trang web của
Yahoo!. Đây là cách mà các trang web vẫn “làm phiền” bạn mỗi khi truy cập tới
nó, một loạt các cửa sổ popup hiện ra các trang quảng cáo!
Hành động open có cú pháp như sau:
window.open(“URL”,”Tên cửa sổ”,”Các đặc điểm”)
trong đó, các đặc điểm của cửa số như toolbar, statusbar, width, heigh,… Ví dụ
sau mở một cửa số mới khơng có thanh toolbar và statusbar, rộng 200, dài 300 và
có thể thay đổi kích thước.
window.open("","","toolbar=0,
statusbar=0,width=200,height=300,resizable=1")
Tài liệu hướng dẫn giảng dạy
Học phần 5 – Lập Trình Web Nâng Cao Trang 24/59

Thuộc tính status
Thanh statusbar của cửa sổ trình duyệt dùng để hiển thị các thơng tin như địa chỉ
URL của một mối liên kết, trạng thái download của trang web, khởi động applet,…
Một số trang web tận dụng JavaScript để biến statusbar thành nơi hiển thị tiêu đề
trang web với các ký tự chạy qua chạy lại,… Bạn cũng thường dùng statusbar khi
cần đưa ra những giúp đỡ khi người dùng di chuyển chuột tới một vị trí nào đó
trên trang web. Trong trang web của ví dụ trên, bạn có thể sử dụng sự kiện
onMouseOver của cmdClose để hiện thơng báo trên statusbar như “Dong cua so
nay.”
window.status = “Dong cua so nay.”

Hành động setInterval và clearInterval
window.setInterval() dùng để định khoảng chu kỳ thời gian một hành động được
thi hành. Ngược lại với nó, window.clearInterval() dùng để xố bỏ chu kỳ thời
gian mà setInterval() đã tạo ra.
Để tạo ra một chu kỳ thời gian và thực hiện một hành động:
id = window.setInterval(“tên hàm thực hiện”,millisecond)

Để xố chu kỳ thời gian đã tạo:
window.clearInterval(id)

Ví dụ sau đây minh hoạ cách sử dụng setInterval và status để tạo một chuỗi chạy
trên thanh statusbar:
Ví dụ:
<HEAD>
<SCRIPT LANGUAGE=javascript>
complete = "JavaScript in a second"
cur=""
function title(){

if (cur.length==complete.length) cur=""
cur+=complete.charAt(cur.length)
window.status=cur
}
</SCRIPT>
</HEAD>
<BODY onload = "JavaScript:window.setInterval('title()',100)">
</BODY>

Trong ví dụ trên, để chu kỳ được tạo ra ngay khi trang web hiển thị, ta dùng sự
kiện onload của đối tượng window.
Nếu title() có tham số, các giá trị tham số có thể được truyền sau tham số
millisecond ở trên, mỗi tham số cách nhau một dấu phảy (,).