Hướng dẫn tạo Script đơn giản go top trong html
1. Các bạn tạo 1 trang html với nội dung:
Go To Top
2. Tạo code javascript go top như sau
$[".btnGotop"].on["click", function[e]{
$["html, body"].animate[{ scrollTop: 0 }, "slow"];
}];
Chúc các bạn thành công.
1] Sự kiện là gì !?
- Thông thường, sự kiện là những hành động của người dùng khi tương tác lên phần tử HTML.
- Ví dụ:
- Khi người dùng click chuột vào phần tử, đó là một sự kiện.
- Khi người dùng gõ văn bản vào textfield, đó là một sự kiện.
- Khi người dùng di chuyển con trỏ vào phần tử, đó là một sự kiện.
- ....
=> Ví dụ, bạn hãy thử
=> Ví dụ, bạn hãy thử
=> Ví dụ, bạn hãy thử
Di chuyển con trỏ vào đây
2] Các sự kiện trong JavaScript
- Trong JavaScript, mỗi sự kiện sẽ tương ứng với một cái tên.
- Dưới đây là danh sách một vài sự kiện phổ biến mà ta thường dùng trong JavaScript.
title | Sự kiện xảy ra khi người dùng click chuột vào phần tử |
ondblclick | Sự kiện xảy ra khi người dùng click kép chuột vào phần tử |
onmouseenter | Sự kiện xảy ra khi người dùng di chuyển con trỏ vào phần tử |
onmouseleave | Sự kiện xảy ra khi người dùng di chuyển con trỏ ra khỏi phần tử. |
onkeydown | Sự kiện xảy ra khi người dùng đang nhấn một phím |
onkeyup | Sự kiện xảy ra khi người dùng nhả phím ra |
oncopy | Sự kiện xảy ra khi người dùng sao chép nội dung của phần tử |
oncut | Sự kiện xảy ra khi người dùng cắt nội dung của phần tử |
onpaste | Sự kiện xảy ra khi người dùng dán nội dung vào phần tử |
onchange | Sự kiện xảy ra khi người dùng thay đổi giá trị của phần tử |
Bạn sẽ được tìm hiểu đầy đủ tất cả các sự kiện trong bài hướng dẫn nâng cao về sự kiện
3] Bắt sự kiện là gì !?
- "Bắt sự kiện" là khi một sự kiện nào đó xảy ra thì ta muốn JavaScript phản ứng lại với sự kiện đó bằng việc thực thi một đoạn mã xác định.
- Ví dụ, tôi muốn khi người dùng thì câu lệnh alert['Xin chào JavaScript'] sẽ được thực thi.
- Ví dụ, tôi muốn:
- Khi người dùng di chuyển con trỏ vào phần tử này thì màu nền của phần tử này sẽ chuyển sang màu hồng [tức là câu lệnh this.style.backgroundColor='pink' được thực thi]
- Khi người dùng di chuyển con trỏ ra khỏi phần tử này thì màu nền của phần tử này sẽ chuyển sang màu trắng [tức là câu lệnh this.style.backgroundColor='white' được thực thi]
4] Cách bắt sự kiện trong JavaScript
- Trước khi bắt sự kiện thì ta cần phải xác định rõ ba thành phần:
- [1] Phần tử dùng để xảy ra sự kiện.
- [2] Sự kiện sẽ xảy ra.
- [3] Đoạn mã sẽ được thực thi khi sự kiện xảy ra.
- Dưới đây là cú pháp dùng để bắt sự kiện:
Khi người dùng click kép chuột vào nút "Xem kết quả" thì đoạn mã:
var a = 100;
var b = 50;
var result = [a + b]*2;
alert['Kết quả của biểu thức là: ' + result] sẽ được
thực thi.
Xem kết quả
Xem ví dụ
Khi người dùng click chuột vào nút "Xin chào" thì hàm hello[] sẽ được thực thi
Xin chào
function hello[]{
var name = "Nguyễn Thành Nhân";
var year = 1993;
var str = "Tôi tên " + name + " sinh năm " + year;
document.getElementById["demo"].innerHTML = str;
}
Xem ví dụ
- Lưu ý: Với cùng một phần tử, ta có thể bắt cho nó nhiều sự kiện.
Phần tử
- Khi người dùng di chuyển con trỏ vào nó thì sự kiện onmouseenter xảy ra và câu lệnh this.style.backgroundColor='yellow' sẽ được thực thi.
- Khi người dùng di chuyển con trỏ vào nó thì sự kiện onmouseleave xảy ra và câu lệnh this.style.backgroundColor='gray' sẽ được thực thi.
#demo{
width:300px;
height:200px;
background-color:gray;
}
Xem ví dụ
- Lưu ý:
- Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy kép thì trong đoạn mã tuyệt đối không được chứa ký tự là dấu nháy kép.
- Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy đơn thì trong đoạn mã tuyệt đối không được chứa ký tự là dấu nháy đơn.
Xin chào
Xin chào
Xin chào
Xin chào
5] Một số ví dụ khác
Xem ví dụ
Tài liệu hướng dẫn học lập trình web
Xem ví dụ
HTML
CSS
JavaScript
MySQL
PHP
Xem ví dụ