Xửlý các sựkiện bằng đối tượng event
Đối tượng event
Xửlý các sựkiện bàn phím Xửlý các sựkiện chuột
Đối tượng event là một đối tượng “tồn diện” trong việc xử lý các sự kiện diễn ra trên trang web. Thơng qua event, người lập trình JavaScript mới cĩ thể bẫy được các sự kiện chuột và bàn phím một cách tương tự như trên các ứng dụng Windows.
Học phần 5 – Lập Trình Web Nâng Cao Trang 42/59
II.1. Đối tượng event
Đối tượng event
Đối tượng window.event dùng đểkiểm sốt các sự kiện phát sinh trong cửa sổtrình duyệt
Các thuộc tính quan trọng
{ type: loại sựkiện xảy ra
{ target/srcElement: đối tượng xảy ra sựkiện
{ which/keyCode/button: Mã ASCII bàn phím
hay nút chuột được nhấn e = window.event
alert(window.event.type alert(window.event.target.name)
Đối tượng window cung cấp một thuộc tính event để kiểm sốt các sự kiện phát sinh trong cửa sổ trình duyệt chứa trang web. Để xử lý các sự kiện nĩi chung bạn cĩ thể khai báo một biến chứa đối tượng event và truy cập các thuộc tính của nĩ.
Ví dụ:
e = window.event
Các thuộc tính quan trọng
Thuộc tính type cho biết loại sự kiện xảy ra. Giá trị của type là một chuỗi.
Ví dụ:
alert(window.event.type) //=”keyup” khi cĩ phím bấm
Thuộc tính target cho biết đối tượng nhận sự kiện.
Ví dụ:
alert(window.event.target.name) //=”txtABC”
Thuộc tính which cho biết mã ASCII của phím được nhấn hay sốđại diện cho nút chuột trái, phải. IE khơng hỗ trợ những thuộc tính này như Netscape. Thay vào đĩ IE sử dụng cĩ thuộc tính khác như srcElement thay cho target hay keyCode,
button thay cho which.
Để bẫy các sự kiện của một đối tượng, bạn đã biết cách sử dụng thuộc tính cĩ tên trùng với tên sự kiện trong tag HTML tạo ra đối tượng đĩ. Một cách khác để bẫy sự kiện là gán tên hàm xử lý sự kiện cho thuộc tính cĩ tên trùng với tên sự kiện của đối tượng. Ví dụ: function document_onKeyUp(){ … } document.onkeyup=document_onKeyUp
Học phần 5 – Lập Trình Web Nâng Cao Trang 43/59
II.2. Xử lý các sự kiện bàn phím
Xử lý các sựkiện bàn phím
Thuộc tính keyCode cho biết mã ASCII của phím được gõ (adsbygoogle = window.adsbygoogle || []).push({});
functiontxtName_keypress(){ e = window.event
switch case (e.keyCode){ …
… } }
frm.txtName.onkeypress=txtName_keypress
Ví dụ sau đây minh hoạ cho bạn kỹ thuật phát sinh trang web đồng thời với việc cài đặt các hàm xử lý sự kiện cho một đối tượng.
Ví dụ: <HEAD> <SCRIPT LANGUAGE=javascript> function button1_onclick() { win = window.open("","","width=200,height=100,resizable=0") doc=win.document doc.writeln("<head>") doc.writeln("<SCRIPT LANGUAGE=javascript>") doc.writeln("function txtName_keypress(){") doc.writeln(" e = window.event") doc.writeln(" alert(e.keyCode)") doc.writeln("}") doc.writeln("<\/SCRIPT>") doc.writeln("<\/head>") doc.writeln("<body>") doc.writeln("<form name=frm>")
doc.writeln("<input type=text name=txtName>") doc.writeln("<BR><BR><center><a href='javascript:window.close()'>Close</a><\/center>") doc.writeln("<\/form>") doc.writeln("<SCRIPT LANGUAGE=javascript>") doc.writeln("document.frm.txtName.value='Hello'") doc.writeln("document.frm.txtName.onkeypress=txtName_keypr ess") doc.writeln("<\/SCRIPT>") doc.writeln("<\/body>") } </SCRIPT>
Học phần 5 – Lập Trình Web Nâng Cao Trang 44/59
</HEAD> <BODY>
<P><INPUT type=button value=Button name="button1"
LANGUAGE=javascript onclick="return button1_onclick()"></P> </BODY>
Đoạn code trong trang web được phát sinh ra được liệt kê lại dưới đây để bạn dễ trình bày cho học viên:
<head> <SCRIPT LANGUAGE=javascript> function txtName_keypress(){ e = window.event alert(e.keyCode) } </SCRIPT> </head> <body> <form name=frm>
<input type=text name=txtName> <BR><BR><center><a href='javascript:window.close()'>Close</a></center> </form> <SCRIPT LANGUAGE=javascript> document.frm.txtName.value='Hello' document.frm.txtName.onkeypress=txtName_keypress </SCRIPT> </body>
Học phần 5 – Lập Trình Web Nâng Cao Trang 45/59
II.3. Xử lý các sự kiện chuột
Xửlý các sựkiện chuột
Thuộc tính buttoncho biết giá trịcủa phím chuột được bấm functiondoc_onmousedown(){ e = window.event if (e.button== 2){ … … } } document.onmousedown=doc_onmousedown
Thay vì keyCode, bạn sẽ sử dụng thuộc tính button của đối tượng event khi cần xác định nút chuột được bấm.
Ví dụ:
e=window.event
alert(e.button + " (" + e.x + "," + e.y + ")")
Ví dụ sau đây minh hoạ cách ngăn những người dùng “tị mị” khỏi việc bấm chuột phải trên trang web của bạn để xem source code, lưu hình ảnh hay copy văn bản.
Ví dụ:
<HEAD>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript> function document_onmousedown() {
e=window.event
if (e.type=="mousedown" && e.button==2){ //e.returnValue=0
alert("Ban khong duoc click mouse phai!!!") } } </SCRIPT> <SCRIPT LANGUAGE=javascript> document.onmousedown=document_onmousedown </SCRIPT> </HEAD>
" Chú ý: Dịng lệnh e.returnValue=0 là cách ngăn trình duyệt Internet Explorer xử lý sự kiện diễn ra, nĩ cĩ thể gây lỗi trong các trình duyệt khác. (adsbygoogle = window.adsbygoogle || []).push({});
Học phần 5 – Lập Trình Web Nâng Cao Trang 46/59 III. Các đối tượng mở rộng Các đối tượng mởrộng Sửdụng đối tượng Image Sửdụng đối tượng location Sửdụng đối tượng history Sửdụng đối tượng navigator
Các đối tượng mở rộng được trình bày trong phần này tuy khơng cĩ nhiều thuộc tính hay hành động nhưng đem lại cho ứng dụng của bạn nhiều chức năng tiện dụng và một giao diện hồn hảo như go back, forward; thay đổi hình ảnh; thích nghi với web browser của người dùng,…
Học phần 5 – Lập Trình Web Nâng Cao Trang 47/59
III.1. Sử dụng đối tượng Image
Sửdụng đối tượng Image
Image đại diện cho một image được hiển thịbằng tag <img> trong trang web
{ document.images(“tên image”)hoặc
{ document.images(index)
img=new Image Img.src="bluemax.jpg"
Đối tượng Image đại diện cho một image được hiển thị bằng tag <img> trong trang web. Bạn cĩ thể truy cập các đối tượng image trong trang web thơng qua tập hợp images của document:
document.images(“tên image”) hoặc document.images(index)
Để thể hiện hình ảnh trong một file, bạn sử dụng thuộc tính src của image:
img = new Image img.src = “URL”
Khi bạn chỉ ra đường dẫn cho src của một image, trình duyệt sẽ tải file được chỉ cùng với trang web. Ngược lại, nếu bạn khơng chỉ ra đường dẫn trước mà vào thời điểm trang web đã xử lý xong thì việc làm đĩ hồn tồn vơ nghĩa.
Ví dụ:
<HEAD>
<SCRIPT LANGUAGE=javascript>
imgs = new Array()
imgs[0]=new Image imgs[0].src="bluemax.jpg" imgs[1]=new Image imgs[1].src="terminator.jpg" imgs[2]=new Image imgs[2].src="hollowman.jpg"
Học phần 5 – Lập Trình Web Nâng Cao Trang 48/59 i=0 function changeImage(){ document.images("imgFilm").src=imgs[i].src i++ if (i>2) i=0 } </SCRIPT> </HEAD> <BODY onload="javascript: window.setInterval('changeImage()',300)"> <img name="imgFilm" src="bluemax.jpg">
</BODY>
Trong ví dụ trên, chúng tơi đã tạo ra 3 đối tượng image với các file hình ảnh kèm theo ngay trong khi trang web đang được xử lý. Tại thời điểm trang web xử lý xong, sự kiện onload mới xảy ra và function changeImage()được thực hiện. Trong function changeImage(), đối tượng imgFilm được gán lại src bằng với src của một image đã tạo trước đĩ. Nếu bạn gán imgFilm.src bằng một URL thì khơng cĩ ý nghĩa gì vì lúc này, trang web đã được xử lý xong và các file được chỉ ra trong URL sẽ khơng cịn được trình duyệt tải về nữa.
Học phần 5 – Lập Trình Web Nâng Cao Trang 49/59
III.2. Sử dụng đối tượng location
Sửdụng đối tượng location
locationcung cấp thơng tin vềvịtrí của trang web
{ window.location hoặc
{ Location
location.href=”URL”
Đối tượng location cung cấp thơng tin về vị trí của trang web và được quản lý bởi window. Bạn cĩ thể truy cập tới location bằng hai cách: (adsbygoogle = window.adsbygoogle || []).push({});
window.location hoặc location
Ví dụ, để yêu cầu trình duyệt mở một trang web, bạn hãy gán địa chỉ trang web muốn mở cho thuộc tính href của đối tượng location:
location.href=”URL”
Tuy nhiên thực tế bạn cĩ thể gán URL trực tiếp vào location.
Để biết các thơng tin chi tiết về location bạn cĩ thể tham chiếu các thuộc tính khác như bảng dưới đây: Thuộc tính Giá trị protocol http hostname www.calcio.com port 80 host www.calcio.com:80 pathname /schedule/seriesA.html hash href http://www.calcio.com:80/schedules/seriesA.html
Học phần 5 – Lập Trình Web Nâng Cao Trang 50/59
III.3. Sử dụng đối tượng history
Sử dụng đối tượng history
historylà một mảng các địa chỉtrang web mà người dùng đã mởtrong cửa sổtrình duyệt
{ window.history hoặc
{ history history.back() alert(history.next)
Đối tượng history là một mảng các địa chỉ trang web mà người dùng đã mở trong cửa sổ trình duyệt. history cũng được quản lý bởi window và bạn cĩ thể truy cập tới nĩ bằng hai cách:
window.history hoặc history
Với đối tượng history, bạn cĩ thể viết các đoạn code tương tự như việc người dùng click vào nút back hay forward trên cửa sổ trình duyệt.
Ví dụ:
history.back()
Các thuộc tính và hành động của history được liệt kê dưới đây:
Thuộc tính
Ý nghĩa
current URL hiện hành
length Số lượng các mục trong danh sách history
next URL tiếp theo
previous URL trước
Hành
động
Ý nghĩa
back Di chuyển tới trang web trước forward Di chuyển tới trang web sau
go(n) Di chuyển tới trang web thứ n từ vị trí hiện hành
Học phần 5 – Lập Trình Web Nâng Cao Trang 51/59
III.4. Sử dụng đối tượng navigator (adsbygoogle = window.adsbygoogle || []).push({});
Sử dụng đối tượng navigator
navigatorcung cấp thơng tin vềtrình duyệt mà người dùng sửdụng
if (navigator.appName== “Microsoft Internet Explorer”) location = “ie_index.html”
Đối tượng navigator cung cấp nhiều thơng tin về trình duyệt mà người dùng sử dụng. Trong quá trình viết code bạn sẽ cần chú ý tới đặc điểm riêng của mỗi loại trình duyệt để tin chắc rằng các lệnh mà mình viết sẽđược thực hiện chính xác. Nếu muốn ứng dụng web của mình được sử dụng phổ biến, đây là một vấn đề rất khĩ mà bạn phải đáp ứng. Thơng thường, người ta xây dựng một trang web với nhiều phiên bản cho các loại trình duyệt. Khi đĩ, navigator sẽ giúp xác định loại trình duyệt mà người dùng đang sử dụng, các plug-ins cĩ trên trình duyệt, MIME types mà trình duyệt hỗ trợ,…
Ví dụ:
document.write(navigator.appName + ".<br> Version: " + navigator.appVersion)
Kết quả:
Microsoft Internet Explorer.
Version: 4.0 (compatible; MSIE 6.0; Windows NT 5.2; .NET CLR 1.1.4322; .NET CLR 1.0.3705)
Ví dụ trên minh hoạ cách dùng hai thuộc tính thường dùng của navigator. appName của Netscape là Netscapte và IE là Microsoft Internet Explorer. Trường hợp muốn tận dụng các khả năng dựa trên từng phiên bản của trình duyệt, bạn hãy tham khảo tới appVersion.
Học phần 5 – Lập Trình Web Nâng Cao Trang 52/59
IV. Làm việc với các frame
Làm việc với các frame
Khi một cửa sổtrình duyệt chứa nhiều frame, mỗi frame là một đối tượng window.
Trong một trang web
{ window.top: cửa sổtrình duyệt
{ window.parent: cửa sổcha
win = window.parent.contain doc = win.document
doc.frmABC.txtXYZ.value = “…”
Khi một ứng dụng web thiết kếđể hiển thị nhiều frame thì cửa sổ trình duyệt cùng một lúc hiển thị nhiều trang web. Vì mỗi trang web nằm trong một frame nên đối tượng window của một trang web đại diện cho frame chứa trang web đĩ.
Ví dụ: <body> <script language=javascript> document.write(window.parent[0].name + "<BR>") document.write(window.parent[1].name + "<BR>") document.write(window.parent[1].name + "<BR>") </script> </body> Trang Frameset <frameset rows="64,*">
<frame name="banner" scrolling="no" noresize target="contents" src="…">
<frameset cols="150,*">
<frame name="contents" target="main" src=""> <frame name="main" src="new_page_2.htm"> </frameset>
</noframes> </frameset>
Để truy cập tới các đối tượng trong frame khác một cách ngắn gọn, bạn cĩ thể khai báo một đối tượng doc trỏ tới đối tượng document của cửa sổđĩ.
Ví dụ:
win = window.parten.TênFrame doc = win.dow
Học phần 5 – Lập Trình Web Nâng Cao Trang 53/59
… (adsbygoogle = window.adsbygoogle || []).push({});
Ví dụ sau đây minh hoạ cách tận dụng frame để chống lại việc các trang web khác link website của bạn vào một frame trong website của họ.
Ví dụ:
<body onload=”return TopLoad()”> //Với function TopLoad như sau: function TopLoad(){
if (window.top != window)
window.top.location = window.location }
Học phần 5 – Lập Trình Web Nâng Cao Trang 55/59
ĐỀ THI MẪU CUỐI NHÓM HỌC PHẦN
Đề thi :
Học phần 5
Thời gian : 150 phút
Ngày thi : …/…/…
*** Các kết quả lưu vào đĩa làm việc để chấm điểm ***
Tạo thư mục SoMay_TenHV để chứa tồn bộ các tập tin được tạo ra. Ví dụ: học viên Nguyễn Thái Hưng làm bài thi tại máy số 01 sẽ tạo thư mục 01_NTHUNG.
Câu 1 TỔ CHỨC WEBSITE
Tạo website với sơđồ tổ chức các trang web như sau:
Hình 1.1 – Sơđồ liên kết các trang web
Trang chủ cĩ cấu trúc frameset như câu 2:
Câu 2
Hàng khơng Việt Nam
Các chuyến bay Thơng tin đặt vé
Thơng tin các chuyến bay
Chuyến bay Ngày Giờ Giá vé
Hà nội – Tp. HCM 12/4/2003 9:00:00 1.325.000 Tp. HCM – Hà nội 20/4/2003 11:00:00 1.325.000 Tp. HCM – Hà nội 20/4/2003 16:20:00 1.325.000
Hình 1.2 – tổ chức Frameset của trang chủ
Các liên kết trong frame bên trái sẽđược hiển thị trong frame chính:
2..1Các chuyến bay: Liên kết tới trang CacCB.asp
Học phần 5 – Lập Trình Web Nâng Cao Trang 56/59
Câu 3 XÂY DỰNG CƠ SỞ DỮ LIỆU
Tạo CSDL Access cĩ tên là BanVeMB.mdb với các bảng và dữ liệu như sau:
ChuyenBay - Chuyến Bay (adsbygoogle = window.adsbygoogle || []).push({});
Field Name Field Type Field Size Description
MaCB Autonumber Mã Chuyến bay
TenCB Text 50 Tên chuyến bay NgayGio DateTime Ngày giờ bay SoVe Number Integer Số vé
SoVeConLai Number Integer Số vé cịn lại GiaVe Number Long integer Giá vé
BanVe Yes/No Cịn bán vé = True, Hết hạn bán vé = False
DatVe - Vé
Field Name Field Type Field Size Description
MaDatVe Autonumber Mã đặt vé
MaCB Number Long integer Mã chuyến bay HoTen Text 50 Họ tên khách hàng Email Text 100 Email Password Text 20 Password SoVe Number Byte Số vé đặt
Chú ý: Các field in đậm, nghiêng và gạch dưới là khố chính.
Sơđồ quan hệ giữa các bảng
Dữ liệu thử
ChuyenBay
MaCB TenCB NgayGio SoVe SoVeConLai GiaVe BanVe
1Hà nội -Tp. Hồ Chí Minh 4/14/2003 9:00:00 AM 100 991325000 Yes 2Tp.HCM - Hà nội 4/20/2003 11:00:00 AM 150 1351325000 Yes 3Tp.HCM - Hà nội 4/20/2003 4:20:00 PM 150 201325000 Yes
DatVe
MaDatVeMaCB HoTen Email Password SoVe
1 3Cty. Du Lịch Lửa Việt crm@luaviet.com luaviet 60 2 3Cty. Saigon Tourist tour@sgtourist.com toursg 40 3 3Nguyễn Văn Vinh nvving@yahoo.com 123vinh 4 4 3Lê Thị Minh Giang ltmgiang@hotmail.com gianghotmail 6 5 3Phạm Thị Nga ptnga@operamail.com thinga 10 6 3Cty. VietHan hr@viethan.org hrviethan 10 7 1Trần Thị Mỹ Hương ttmyhuong@yahoo.com mh 1 8 2Cty. VietTour crm@viettour.com crmvt 15
Học phần 5 – Lập Trình Web Nâng Cao Trang 57/59
Câu 4 THỰC HIỆN CÁC CHỨC NĂNG
Trang CacCB.asp
Liệt kê thơng tin các chuyến bay cịn bán vé
Ứng với mỗi chuyến bay được liệt kê là một liên kết mà khi người dùng chọn sẽ mở trang ChuyenBay.asp
Trang ChuyenBay.asp
Trang này hiển thị các thơng tin của chuyến bay và cho phép người dùng đặt vé.
Chuyến bay Tp. Hồ Chí Minh – Hà nội
- Ngày khởi hành : 20/5/2003 - Giờ khởi hành : 16:20 - Giá vé : 1.325.000 - Số vé cịn lại : 20
Đặt vé chuyến bay này
Họ tên khách hàng Email Email (lặp lại) Password Password (lặp lại) Địa chỉ giao vé Số vé đặt Hình 3.1 – Trang ChuyenBay.asp
Khi người dùng click vào nút Đặt vé, phải kiểm tra: (adsbygoogle = window.adsbygoogle || []).push({});
Họ tên khách hàng: bắt buộc
Hai địa chỉ email: bắt buộc, giống nhau Password: bắt buộc, giống nhau Địa chỉ giao vé: bắt buộc
Số vé đặt phải là số và nhỏ hơn hoặc bằng số vé cịn lại.
Sau khi kiểm tra dữ liệu nhập hợp lệ, gửi thơng tin đặt vé của khách hàng đến file DatVe.asp để cập nhật vào bảng DatVe. Tiếp theo, trang DatVe.asp hiểnt hị thơng tin đặt vé của chuyến bay của khách hàng.
Học phần 5 – Lập Trình Web Nâng Cao Trang 58/59
Trang DatVe.asp
Trang thơng tin đặt vé cho khách hàng biết các thơng tin về vé được đặt cho một chuyến bay.
Khi người dùng click vào mục Thơng tin đặt vé trong frame bên trái, ComboBox chuyến bay chưa được chọn và chưa cĩ thơng tin đặt vé nào hiển thị.
Nếu trang Thơng tin đặt vé hiển thị do kết quả đặt vé của khách hàng từ trang ChuyenBay.asp thì ComboBox chuyến bay sẽ tựđộng chọn chuyến bay vừa đặt vé và trang web hiển thị thơng tin đặt vé của chuyến bay đĩ.
Khi người dùng chọn một chuyến bay, trang web sẽ hiển thị thơng tin đặt vé của chuyến bay đĩ.
Chuyến bay Tp. Hơ Chí Minh - Hà nơi (20/4/2003 16:20)
Thơng tin đặt vé
Họ tên Email Số vé đặt
Cty. Du Lịch Lửa Việt crm@luaviet.com 60 Cty. Saigon Tourist tour@sgtourist.com 40 Nguyễn Văn Vinh nvving@yahoo.com 4 Lê Thị Minh Giang ltmgiang@hotmail.com 6 Phạm Thị Nga ptnga@operamail.com 10 Cty. VietHan hr@viethan.org 10
Học phần 5 – Lập Trình Web Nâng Cao Trang 59/59
ĐỀ THI MẪU KIỂM TRA GIÁO VIÊN
Nội dung kiểm tra chuyên mơn
Thời gian : 180 phút
Lập Trình Web
Bạn hãy xây dựng ứng dụng Chat HTML như sau: - Màn hình chính của ứng dụng như hình dưới
- Người dùng muốn tham gia chat phải đăng nhập. Nếu khơng, người dùng chỉ cĩ thể xem