Một số sự kiện thường dựng:
- Sự kiện Click chuột (onClick) được kớch hoạt khi chuột được click
- Sự kiện di chuyển chuột vào bờn trong phần tử (onMouseOver) được kớch hoạt khi chuột di chuyển chuột từ ngoài vào trong phần tử.
- Sự kiện di chuột ra ngoài (onMouseOut) được kớch hoạt khi di chuyển chuột từ bờn trong phần tử ra khỏi phần tử.
- Sự kiện nhấn phớm (onKeyUp) được kớch hoạt khi người dựng nhấn một phớm.
Thay đổi thuộc tớnh của cỏc phần tử HTML
Để thay đổi thuộc tớnh của một phần tử HTML nào đú trong trang bằng lệnh JavaScript, bạn viết như sau:
document.all.<Giỏ trị ID của thẻ>.style.<Tờn thuộc tớnh> = <Giỏ trị mới>
Trong đú:
• <Giỏ trị ID của thẻ>chớnh là giỏ trị mà bạn đặt cho thuộc tớnh ID, vớ dụ: <H2ID= ‘TieuDe’> THAY ĐỔI THUỘC TÍNH CỦA THẺ </H2> thỡ <giỏ trị ID của thẻ> trong trường hợp này sẽ là ‘TieuDe’.
• <Tờn thuộc tớnh> là tờn thuộc tớnh cần thay đổi. Bạn cú thể tra trong tài liệu đó
được giỏo viờn phỏt: “Danh sỏch cỏc thuộc tớnh”. Vớ dụ : text-align, font-size, color v.v…
• <Giỏ trị mới>là những giỏ trị hợp lệ cho thuộc tớnh cần thay đổi. (Bạn cũng tra trong tài liệu “Danh sỏch cỏc thuộc tớnh”).
** Lưu ý:Nếu bạn muốn thay đổi thuộc tớnh của một phần tử thỡ bắt buộc bạn phải gỏn cho thẻ đú một giỏ trị ID duy nhất (Như vớ dụ ở trờn).
Định nghĩa tầng trong IE và Netscape
Định nghĩa tầng trong IE
Để định nghĩa tầng trong IE, bạn chỉ cần đặt thuộc tớnh position cho style.
Vớ dụ: <H2 style = “position:absolute;”>Thẻ H2 này được đặt trờn một tầng </H2> Tuy nhiờn, với cỏch định nghĩa ở trờn thỡ mỗi tầng chỉ chứa được một phần tử. Nờu bạn muốn một tầng chứa được nhiều hơn một phần tử thỡ bạn định nghĩa tầng bằng cặp thẻ <DIV> hoặc <SPAN> như sau:
<DIV ID = ‘Tang1’ style = “position:absolute”> <Đặt cỏc phần tử khỏc vào đõy, vớ dụ : >
<H1> Phần tử này nằm trờn tầng 1 </H1> <input type = button value = “Move”> <img src = “file://c:/anh1.jpg”>
<a href = “http://www.echip.com.vn”> Trang chủ của bỏo E-Chip </a> </DIV>
Mỗi tầng khi tạo ra, bạn nờn gỏn thuộc tớnh ID cho tầng đú một giỏ trị duy nhất (Khụng trựng với ID của bất kỳ thẻ nào trong trang). Bạn hoàn toàn cú thể thực hiện cỏc thao tỏc đối với tầng như :
• Ẩn tầng, vớ dụ : document.all.Tang1.style.visibility = ‘hidden’ • Hiện tầng, vớ dụ : document.all.Tang1.style.visibility = ‘visible’
• Di chuyển tầng sang trỏi 5 pixel, vớ dụ: document.all.Tang1.style.pixelLeft -= 5 • Di chuyển tầng sang phải 5 pixel, vớ dụ: document.all.Tang1.style.pixelLeft +=
5
• Di chuyển tầng lờn trờn 5 pixel, vớ dụ: document.all.Tang1.style.pixelTop -= 5 • Di chuyển tầng xuống dưới 5 pixel, vớ dụ:
Định nghĩa tầng trong Netscape
Trong Netscape, việc định nghĩa (tạo ra) tầng cú phần dễ dàng hơn với thẻ LAYER : <LAYER name = “Tang1”>
<Đặt cỏc phần tử khỏc vào đõy, vớ dụ : > <H1> Phần tử này nằm trờn tầng 1 </H1> <input type = button value = “Move”> <img src = “file://c:/anh1.jpg”>
<a href = “http://www.manguon.com”> Trang chứa nhiều mẹo vặt về IT </a> </LAYER>
Để ẩn / hiện tầng được tạo bởi thẻ LAYER thụng qua lệnh JavaScript, bạn viết : • document.<Tờn của tầng>.visibility = 'hidden' (để ẩn tầng) (adsbygoogle = window.adsbygoogle || []).push({});
• document.<Tờn của tầng>.visibility = 'show' (để hiện tầng)
Trong đú :<Tờn của tầng> chớnh là giỏ trị của thuộc tớnh name.
**Lưu ý:Để truy cập đến một tầng, trong IE sử dụng giỏ trị của thuộc tớnh ID, trong khi đú Netscape sử dụng giỏ trị của thuộc tớnhname.
• Vớ dụ :document.Tang1.visibility = 'hidden' Để ẩn tầng cú tờn là Tang1 tạo ra ở trờn.
Để di chuyển tầng bằng JavaScript, bạn viết:
• document.<Tờn tầng>.left= <Giỏ trị> (Di chuyển sang trỏi hoặc phải) • document.<Tờn tầng>.top= <Giỏ trị> (Di chuyển lờn | xuống)
Trong đú:<giỏ trị> õm để di chuyển lựi, giỏ trị dương để di chuyển tiến. • Vớ dụ di chuyển tầng lờn trờn thờm 10 pixel
◦ document.Tang1.top-= 10
• Vớ dụ di chuyển tầng sang phải thờm 10 pixel ◦ document.Tang1.left+= 10
• Vớ dụ, di chuyển tầng đến vị trớ cỏch mộp trờn cửa sổ trỡnh duyệt 100px, và cỏch mộp trỏi 50 pixel.
◦ document.Tang1.top = 100 ◦ document.Tang1.left = 50