Thứ Hai, 15 tháng 4, 2013

Các Phương Pháp Nhúng Javascript Vào HTML.











Ngôn ngữ Javascript họat động tương tác với Ngôn ngữ HTML. Bởi vì chương trình dịch Mã Javascript đã được tích hợp vào Trình duyệt, do vậy cũng giống nhiều ngôn ngữ thiết kế Web khác (như CSS), Javascript cung cấp 3 phướng pháp chèn mã vào trang HTML như sau:


3 Phương pháp nhúng Javascript vào HTML:


Phương pháp 1: Nhúng trực tiếp trong trang HTML hoặc khai báo trong thành phần <Head></Head>-Heading Embed
Nhúng trực tiếp các đọan mã vào trang HTML.
Xem ví dụ:






<html>
<head>
<title>Nhúng trong trang</title>
</head>
<body bgcolor="#FFFFF" text="#000000">
<script language="javascript" type="text/javascript">
<!--
document.write("Hello, World!!!");
//-->
</script>
</body>
</html>

Trong đó: <script language="javascript"> là khai báo ngôn ngữ scripting đang dùng. Thẻ này và khai báo này là bắt buộc trong trường hợp bạn sử dụng nhiều Scripting language trên cùng một trang. Phần khai báo: type="text/javascript" có thể có hoặc không, tùy theo ứng dụng đoạn codes này vào mục đích nào cho trang HTML(như trong trường hợp này là cho Text). Khai báo: <!-- dùng để che giấu script với các trình duyệt không hỗ trợ Javascript. Tuy vậy hầu hết các Trình duyệt mới đều hỗ trợ Jvascript để đáp ứng nhu cầu của Web. Và kế đến là các codes để chạy đoạn mã Javascript, trong ví dụ này là document.write("Hello, World!!!");, là một phương pháp viết text ra trình duyệt của Javascript. Khai báo: //--> để đóng khóa mở <!--. Trong trường hợp bạn không muốn che giấu Javascript thì bạn có thể bỏ hai khóa này.

Cuối cùng, để đóng đoạn mã, chúng ta dùng thẻ đóng: </script>

Một các nhúng khác là đặt trong thành phần <Head></Head>, như ví dụ dưới đây:

Xem ví dụ 2:






<Head>
<script language="javascript" type="text/javascript">
message = "No Download Please!";
function NoRightClick(b) {
if(((navigator.appName=="Microsoft Internet Explorer")&&(event.button > 1))
||((navigator.appName=="Netscape")&&(b.which > 1))){
alert(message);
return false;
}
}
document.onmousedown = NoRightClick;
</script>
</Head>

Đoạn Codes trên đây dùng để chận phím bên phải. Khi phím này click vào trang Web có chứa đọan mã này thì trình duyệt hiển thị cảnh báo "No DownLoad Please".

Phương pháp 2: Call an external file- Gọi một file từ ngòai.
Giả sử bạn có một tập tin Javascript dài và phức tạp và File này cần đặt trong tất cả các trang HTML hoặc ASP. Nếu như trang nào bạn cũng phải chèn đoạn mã như phương pháp 1 thì mất nhiều thời gian và phải kiểm tra đoạn codes. Để giảm kích thước của trang Web và đở tốn thời gian, Javascript cho chúng ta 1 phương pháp chèn đoạn mã Javascript bằng cách gọi từ ngoài vào. Muốn gọi tập tin Javascript, trước hết tập tin đó phải có phần mở rộng là .js. Và trong tập tin này không được chứa thẻ mở và đóng <script></script>

Xem ví dụ:

Ví dụ bạn có tập tin tooltip.js và muốn tập tin này được chèn vào các trang Web, thì trong mỗi trang Web bạn dùng đoạn Codes này ở phần <Head></Head> hoặc tại vị trí nơi bạn muốn trang Web tương tác với mã HTML như sau:

<script language="javascript" src="tooltip.js"> </script>Trong đó tập tin tooltip.js là tập tin được lưu với phần mở rộng .js. Trong tập tin này chứa dòng code sẽ là các đoạn code và các hàm điều khiển tooltip. Khi đó tại vị trí cần hiển thị tooltip, bạn chỉ việc gọi các Function thông qua các Event handler. Ngoài ra các đoạn mã Javascript hợp lệ Form cũng dùng phương pháp này, nhưng với điều kiện các tham chiếu đến các vùng trong Form phải cùng tên với các khai báo trong hàm Hợp Lệ Form. Chúng ta sẽ đề cập đến phương pháp tham chiếu đối tượng và thuộc tính trong các bài học và ví dụ về Javacript.

Phương pháp 3: Nhúng trong câu-Inline Implementation
Ngoài hai phương pháp trên dành cho các đoạn Codes Javascript dài và phức tạp, Javascript cung cấp 1 phương pháp đơn giản dành cho các Event handlers hoặc gọi các đối tượng như Javascript:window.location... Dưới đây là một ví dụ sử dụng Event Handler để thay đổi màu nền của Thẻ Table Data (TD).

Xem ví dụ:

<td onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor='blue' " bgcolor="blue"><a href="Link đến trang tài liệu html">Tên của đường link</a></td>Trong đó: onMouseOver và onMouseOut là 2 event handlers (tạm dịch là: Lệnh điều khiển 1 sự kiện, bộ quản lý sự kiện) điều khiển chuột. Nghĩa là: Khi chuột đặt lên đường Link(onMouseOver) thì This=đối tượng này, Style=Phong cách của đối tượng này. backgroundColor: đặc tính của đối tương là màu nền của TD thành đỏ, khi chuột rời khỏi Link (OnMouseOut) thì background của TD chuyển sang màu xanh. Và giá trị màu nền mặt nhiên của TD là màu xanh. Chúng ta sẽ đề cập đến lệnh này nhiều hơn. Phương pháp này được dùng khi đọan code ngắn và thực hiện một công việc nhỏ nào đó.

0 nhận xét:

Đăng nhận xét