- reset: tạo nút thiết lập lại FORM và giá trị của các điều kiển trong FORM
Sử dụng JavaScript (tiếp theo)
(tiếp theo)
40
Sự kiện Mô tả
OnMouseOver di chuyển chuột trên đối tượng
OnMouseOut di chuyển chuột khỏi đối tượng
OnFocus khi đối tượng nhận focus
OnBlur khi đối tượng mất focus
OnLoad khi tải nội dung thông tin
30/08/2011Hệ thống web - Giới thiệu DHTML Hệ thống web - Giới thiệu DHTML
Sử dụng JavaScript
41
Chúng ta có thể viết script để:
Thay đổi màu sắc, kích thước, nội dung và vị trí của layer.
Tạo automation trên trang web như làm di chuyển các layer, thay đổi z-order để tạo các hiệu ứng đặc biệt.
Làm ẩn hoặc hiện các layer.
30/08/2011Hệ thống web - Giới thiệu DHTML Hệ thống web - Giới thiệu DHTML
Sử dụng JavaScript (tiếp theo) (tiếp theo)
42
Sử dụng thuộc tính và phương thức:
Mỗi đối tượng document có một thuộc tính
layers chứa một mãng các top-level layers
trong document.
Mỗi layer lại có một thuộc tính document.
Thuộc tính document có:
Một mãng layer chứa tất cả các top-level layer
Một mãng image chứa tất cả các image
Các mãng chứa các applet, embed, link và
Sử dụng JavaScript (tiếp theo) (tiếp theo)
43
Truy xuất layer bằng JavaScript:
Dùng name hoặc id của layer: document.layername
hoặc:
document.layers[layername]
Dùng index của layer: document.layers[index]
(index được đánh chỉ số từ 0,1,2…)
Thuộc tính length chứa chứa số lượng layer trong một document hoặc một mãng layer document.layers.length
document.layers[layer1].document.layers.length
30/08/2011Hệ thống web - Giới thiệu DHTML Hệ thống web - Giới thiệu DHTML
Sử dụng JavaScript (tiếp theo) (tiếp theo)
44
Truy xuất thuộc tính của đối tượng layer:
layerObject.propertyName
Ví dụ:
document.layers[layer1].visibility= hidden
Sử dụng phương thức của đối tượng layer:
layerObject.methodName(args)
Ví dụ:
document.layer1.moveBy(10,10)
30/08/2011Hệ thống web - Giới thiệu DHTML Hệ thống web - Giới thiệu DHTML
Sử dụng JavaScript (tiếp theo) (tiếp theo)
45
Viết script bên trong layer: <html>
<body>
<p><font color=hotpinksize=4>Move the mouse over the layer and
see what happens</font></p>
<layer id=“layer1” bgcolor=“lavender”
onMouseOver=„changeColor(“limegreen”);‟
onMouseOut=„changeColor(“red”);‟> <p>Layer content…</p>
<script>
function changeColor(newcol){
bgColor=newcol; return false;
}
</script> </body> </html>
30/08/2011Hệ thống web - Giới thiệu DHTML Hệ thống web - Giới thiệu DHTML