CHƯƠNG 3 : THIẾT KẾ TRANG WEB
4.Sử dụng VBScript và JavaScript trong các trang web
TRANG WEB
Thuở ban đầu, các trang web thường là tĩnh. Nghĩa là nội dung của trang web tải về mọi máy là như nhau và bất biến. Một trong các cách để tăng tính động cho các trang web tĩnh đó là chèn vào các
đoạn chương trình viết bằng các ngơn ngữ lập trình script như
VBScript và JavaScript. Các đoạn chương trình như vậy thường
được gọi đoạn mã thực hiện ở phía client (client-side script). Nghĩa
là các đoạn chương trình này sẽ được tải về client và trình duyệt sẽ
đóng vai trị như là trình thơng dịch các đoạn mã này mỗi khi thực
hiện chúng.
Các đoạn chương trình thực hiện ở client thường thực hiện các công việc không quá phức tạp như: thực hiện một số thao tác đơn giản trên các đối tượng của trang web, kiểm tra tính hợp lệ của form nhập liệu, thực hiện việc trình bày động của các đối tượng trên trang web (thay đổi màu sắc, kích thước, ...) ...
4.1. Cách chèn các đoạn chương trình
VBScript/JavaScript vào trang HTML
Sử dụng tag <SCRIPT>, trong đó ghi rõ ngơn ngữ lập trình dùng
để viết mã chương trình. Các tag <!--và --> dùng để nhắc các trình
duyệt khơng hiển thị các đoạn mã bên trong nếu nó khơng hiểu tag <SCRIPT>. Ví dụ: <SCRIPT LANGUAGE="JavaScript"> <!-- document.writeln(“Hello World!”) --> </SCRIPT>
Các đoạn mã script có thể đặt giữa cặp tag <HEAD> và
</HEAD>. hay giữa cặp tag <BODY> và </BODY>. Tuy nhiên nên
đặt tất cả các đoạn mã script trong tag <HEAD> và </HEAD> để dễ
kiểm soát và chắc chắn rằng các đoạn mã này đã được đọc và
thông dịch trước các thành phần trong <BODY>. Ví dụ: <HTML>
<HEAD>
<TITLE>Place Your Order</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--
Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org
Function CanDeliver(Dt)
CanDeliver = (CDate(Dt) - Now()) > 2 End Function
-->
</SCRIPT> </HEAD> ...
4.2. Tương tác với các đối tượng trên trang web
Mọi thành phần trong trang web đều được xem là đối tượng lập trình: tồn bộ trang web được xem là một đối tượng, các form, ô
nhập liệu, nút nhấn, … đều là đối tượng. Chính vì vậy mà ta có thể tham chiếu đến các thuộc tính cũng như gọi các phương thức của
các đối tượng này theo cách thông thường của lập trình hướng đối tượng.
Đối tượng document là đối tượng quan trọng nhất đối với các (adsbygoogle = window.adsbygoogle || []).push({});
chương trình thực hiện tại client vì nó đại diện cho chính trang web hiện hành. Nghĩa là mọi thao tác muốn thay đổi, tham chiếu, ... đến các đối tượng, các thành phần trên trang web hiện hành như form, văn bản, ... đều phải thông qua đối tượng này.
Ví dụ: Để kết xuất dữ liệu ra trang web hiện hành, ta dùng các
hàm write và writeln của đối tượng document. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- document.writeln("Welcome to my site!"); //--> </SCRIPT> <br> <SCRIPT LANGUAGE="VBScript"> <!--
document.write "This site is under construction" //-->
</SCRIPT> </BODY> </HTML>
Đối tượng window là đối tượng đại diện cho cửa sổ mà trong đó
trang web hiển thị. Thơng thường, trình duyệt sẽ tạo ra đối tượng
window khi nó mở một trang HTML.
Để hiển thị các hộp thông báo, ta dùng các hàm alert, confirm
và prompt của đối tượng window. Ví dụ: <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!--
x = window.confirm("Are you sure you want to quit?");
if (x) window.alert("Thank you.") else window.alert("Good choice.") //--> </SCRIPT> </BODY> </HTML>
Ví dụ sau dùng để đặt thơng báo ngay trong thanh trạng thái, ta dùng: window.status=”Welcome to my website”
4.3. Xử lí các sự kiện khi tương tác với các thành phần của trang web
Sự kiện onclick là sự kiện được phát sinh khi người dùng nhấn chuột vào một đối tượng trên trang web ví dụ như button, hyperlink, .. . Để gắn các hàm xử lí sự kiện này vào đối tượng mỗi khi nó được phát sinh, thông thường ta thực hiện theo cách sau:
• Tạo một hàm để xử lí sự kiện đó. Hàm này đặt trong cặp tag
<SCRIPT>.
• Trong đối tượng cần gắn hàm xử lí sự kiện, ta thêm dịng có
cú pháp: <tên sự kiện>=<hàm xử lí sự kiện> vào bên trong. Lưu ý thêm thuộc tính LANGUAGE để xác định ngơn ngữ của script chèn vào
Ví dụ sau minh họa việc gắn hàm xử lí sự kiện onclick trên hai
đối tượng nút nhấn: <HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> <!-- Sub vbsEventHandler
147
window.alert("VBScript Event Handler")
End Sub --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- function jsEventHandler() {
window.alert ("JavaScript Event Handler"); }
-->
</SCRIPT> </HEAD> <BODY>
<INPUT TYPE=BUTTON NAME="vbsBtn" VALUE="VBS Test" LANGUAGE="VBScript" onclick="vbsEventHandler()"> <INPUT TYPE=BUTTON NAME="jsBtn" VALUE=" JS Test " LANGUAGE="JavaScript" onclick="jsEventHandler();"><br> </BODY>
</HTML>
Đối với VBScript, nếu bạn đặt tên một hàm có dạng <tên đối (adsbygoogle = window.adsbygoogle || []).push({});
tượng>_<tên sự kiện>, thì hàm này sẽ được xem như là hàm xử lí
sự kiện cho đối tượng đã nêu trên. Ví dụ: <HTML>
<HEAD>
<SCRIPT LANGUAGE="VBScript"> <!--
Sub vbsBtn_OnClick
window.alert("VBScript Event Handler")
End Sub
-->
</SCRIPT> </HEAD> <BODY>
<INPUT TYPE=BUTTON NAME="vbsBtn" VALUE="VBS Test"> </BODY>
</HTML>