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
Trang 1227 Nguyễn Văn Cừ – Quận 5 – Tp Hồ Chí Minh
Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn
Mã tài liệu: DT_NCM_LT_HDGD_LTWEBNC
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
Trang 2Mục lục
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
Trang 3Bà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
Trang 4GIỚ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
Trang 5GIÁ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
Trang 6HƯỚ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
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,
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
Trang 7I 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 toá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,…
Trang 8II J avaScript 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 hoàn toàn có thể xây dựng một ứng dụng Web hoà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 toà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 yê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
Trang 9II.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) }
<P>Ten cua ban <INPUT id=txtTen name=txtTen>
<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
Trang 10III 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
{ Luôn 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
Ngoà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ề nguyên 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”
Trang 11Mộ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
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 Toá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
Trang 12Cấ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 để thoá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ừ khoá 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ố nguyên tố hay không
Trang 13III.1 Demo: Sử dụng Visual InterDEV để lập trình
Trang 14IV 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
function window_onload() { alert("Khoi dong")
Trang 15<INPUT id=button1 type=button value=Button name=button1
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 toàn bộ trang web đã được hiển thị chứng tỏ sự kiện onload diễn ra sau khi toà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
Trang 16V 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 toàn cục phải được khai báo ở ngoài các hàm
và có phạm vi sử dụng trong toà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 toàn cục: Khai báo ngoà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 ngoà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 toàn cục là toà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 toàn cục Biến toà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 toàn cục trong website, bạn
var y = 10 x++
document.write("x=" + x + ", y=" +y) }
</SCRIPT>
Trang 17</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
“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
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ị
Trang 18Bà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
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
xuyên tham chiếu lại sơ
đồ đối tượng để học viên
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
Trang 19I 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ể toàn quyền kiểm soát được trang web trong khi người dùng thao tác
Trang 20II 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
Trang 21II.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
Trang 22II.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:
Truy cập các thành phần trong đối tượng
Toá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ì ngoà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”
Trang 23III Đố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 soá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ý
Trang 24III.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
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
<P><INPUT id="" type=button value="New window" name=cmdNew
onclick="return cmdNew_onclick()">
<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("http://www.yahoo.com","","toolbar=0, statusbar=0,width=200,height=300,resizable=1")
Trang 25Thuộ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 để xoá 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:
Trang 26} function cmdOn_onclick() {
window.clearInterval(id)
id = window.setInterval("time()",1000)
} function cmdOff_onclick() {
<INPUT id="" name=txtTime>
<INPUT id="" type=button value=ON name=cmdOn onclick="return cmdOn_onclick()">
<INPUT id="" type=button value=OFF name=cmdOff onclick="return cmdOff_onclick()">
if (window.confirm(“Ban co muon dong cua so nay khong?”)) window.close()
Trang 27III.2 Sử dụng đối tượng Document
Sử dụng đối tượng Document
Đối tượng document đại diện cho toàn bộ nội dung
của trang web
Mỗi trang web chỉ có một đối tượng document
Truy cập đối tượng document
Sử dụng đối tượng document
doc = window.document //sau đó sử dụng doc hoặc
Một trang web chỉ có một đối tượng document giống như chỉ có một đối tượng window Bạn có thể truy cập tới document bằng hai cách:
doc = window.document //sau đó sử dụng doc hoặc document
Cách trên thường dùng khi doc là đối tượng document của một cửa sổ mới mở Hãy xem ví dụ sau:
Ví dụ
document.write(“<H1>Hành động write của document</H1>”)
Ví dụ trên minh hoạ hành động write của đối tượng document
Ví dụ
win = window.open() doc = win.document doc.write("<a href='JavaScript:window.close()'>Close window</a>")
Ví dụ này tạo ra một trang web mới theo kiểu “on the fly” tức là không cần một file html cụ thể mà trực tiếp thông qua hành động write
Trong cả hai ví dụ, bạn có thể xem source code của trang web mới để xem kết quả của write như thế nào
Trang 28Tập hợp all
Internet Explorer từ phiên bản 4.0 cung cấp thêm tập hợp all trong đối tượng
document Mục tiêu của all là đơn giản hoá việc truy cập các đối tượng qua nhiều cấp Dưới all, bạn có thể chỉ tới bất cứ đối tượng nào, chẳng hạn một textbox nằm trong một form
Ví dụ, nếu ta có một textbox txtUserName trong form frmUserInfo, bạn có 2 cách truy cập:
document.frmUserInfo.txtUserName document.all.txtUserName
Chúng ta sẽ còn gặp lại document rất nhiều trong các phần sau, do đó, tới đây chúng tôi xin tạm dừng phần document để đề cập tới phần quan trọng nhất: xử lý form với JavaScript
Trang 29IV Đối tượng form và các thành phần
Đối tượng form và các thành phần
Sử dụng đối tượng form
Tổng quan các đối tượng trong form
Đối tượng Text
Đối tượng CheckBox và RadioButton
Đối tượng Select
JavaScript có thể thực hiện khá nhiều thao tác trên giao diện, xử lý các cửa sổ web browser, thực hiện các hiệu ứng hình ảnh,… Tuy nhiên, một trong những điểm mạnh mà nó đem lại cho người lập trình là khả năng xử lý các form nhập liệu của trang web Với khả năng này, JavaScript giúp ứng dụng thực hiện nhiều xử lý tại server, làm cho tốc độ xử lý và thời gian hồi đáp với người dùng của chương trình được cải thiện
Trong phần này, bạn sẽ học các sử dụng JavaScirpt để truy cập vào các form, đọc
và xử lý các thông tin nhập liệu trên form hay xử lý các sử kiện mà người dùng trong quá trình thao tác với form phát sinh ra cũng giống nhưng việc lập trình trên các màn hình của một ứng dụng Windows
Trang 30IV.1 Sử dụng đối tượng form
Sử dụng đối tượng form
Mỗi form được đại diện bởi một đối tượng form
Truy cập đối tượng form qua document.formshoặc document.tenForm
Thuộc tính action, target và method
Hành động submit và reset
Một form trong trang web được đại diện bởi đối tượng form Do một trang web có
thể có nhiều form JavaScript cho phép bạn truy cập các form từ đối tượng
document thông qua tập hợp forms Ví dụ, để truy cập form đầu tiên trong trang
web:
document.forms(0) hoặc
document.TênForm
Thuộc tính action, target và method
Ta đã biết rằng chức năng chính của form là để gửi dữ liệu đến server File tại server sẽ nhận dữ liệu gửi tới được chỉ ra trong thuộc tính action của tag <form> Đối tượng form cũng mô phỏng thuộc tính action một cách tương tự Với thuộc tính này, bạn có thể thay đổi file sẽ nhận dữ liệu tuỳ theo từng điều kiện nhập liệu
Ví dụ, trên form đăng nhập frmLogin bạn có một checkbox dành cho người quên password đăng nhập vào sẽ chuyển tới một trang kiểm tra email để gửi password thay vì trang kiểm tra username, password như bình thường Ta có thể viết đoạn code sau:
Ví dụ:
Nếu checkbox được chọn frmLogin.action=”SendPassword.asp”
Ngược lại frmLogin.action=”CheckPassword.asp”
frmLogin.submit()
Thuộc tính target giúp định vị kết quả xử lý của trang web trong action sẽ được hiển thị ở đâu Khi ứng dụng web thiết kế với nhiều frame, bạn có thể cần chỉ ra tên frame sẽ thể hiện kết quả trong target
Tương tự với action, bạn có thể thay đổi cách thức gửi dữ liệu từ form về server thông qua thuộc tính method method có hai giá trị là “POST” và “GET”