Chức năng là các phương pháp bạn tự thiết lập để thực hiện công việc cho mình. Bất cứ điều gì bạn cần đạt được thông qua JavaScript, bạn có thể viết một hàm cho nó. Các hàm tiết kiệm rất nhiều thời gian vì đầu ra của chúng phụ thuộc vào đầu vào mà bạn cung cấp cho chúng. Vì vậy, một chức năng có thể được sử dụng để thực hiện một số nhiệm vụ
Trang này được cập nhật lần cuối vào ngày 21-08-2012
Cấu trúc chức năng cơ bản
Bây giờ chúng ta đã biết về trình xử lý sự kiện, biến và câu lệnh, đã đến lúc kết hợp tất cả kiến thức của chúng ta lại với nhau — để tạo các hàm. Các chức năng là con ngựa của JavaScript. Một chức năng cơ bản trông như thế này
function addNumbers[a,b]
{
var c = a+b;
return c;
}
Hàm này sẽ cộng hai số bất kỳ mà chúng ta đưa vào với nhau rồi gửi lại hoặc return tổng. Đầu tiên, chúng tôi nói rằng chúng tôi đang xác định một function và đặt tên cho nó. Các dấu ngoặc đơn giữ các đối số của hàm [ở đây, chúng là a và b]. Đây là những biến đặc biệt nhận các giá trị mà bạn đưa ra khi gọi hàm, nghĩa là bạn có thể gán cho hàm hai số bất kỳ và hàm có thể cộng chúng lại với nhau. Giờ đây, hàm này có thể được gọi từ bất kỳ đâu trên trang và bất cứ khi nào được gọi, mã giữa các dấu ngoặc nhọn sẽ được thực thi, với các đối số bạn đã truyền vào sẽ được thay thế trong
Gọi một chức năng
Không giống như các dòng mã thông thường, các chức năng chỉ bắt đầu hoạt động khi bạn gọi chúng. Chúng ta có thể gọi chức năng này trong quá trình tập lệnh nhúng thông thường, như vậy
document.write["Two plus Three is " + addNumbers[2,3]];
Cuộc gọi này làm cho a 2 và b 3, thêm chúng và xuất ra
document.write["Two plus Three is " + addNumbers[2,3]];0, sau đó được ghi vào trang. Lệnh gọi hàm được thay thế bằng bất kỳ giá trị
return nào, giống như tên biến được thay thế bằng giá trị của nó. Chúng ta cũng có thể sử dụng chức năng này để thêm giá trị cho một sự kiện. Nhấp vào các liên kết sau để thêm các số và được thông báo về câu trả lời. .
Bây giờ bạn có thể thấy chức năng này có thể mang lại cho bạn sự linh hoạt như thế nào. Tất cả các liên kết này đều được tạo theo cùng một cách, trông như thế này
document.write["Two plus Three is " + addNumbers[2,3]];2
Để làm cho một liên kết không đi đến đâu nhằm mục đích thực thi một tập lệnh, chúng tôi đặt
document.write["Two plus Three is " + addNumbers[2,3]];3 thành một liên kết đến một neo trên trang và sau đó tắt hành động mặc định bằng cách đặt
document.write["Two plus Three is " + addNumbers[2,3]];4 thành
document.write["Two plus Three is " + addNumbers[2,3]];5. Việc thực thi hàm khá đơn giản — để thay đổi kết quả đầu ra, chúng ta chỉ cần sửa đổi lệnh gọi để chuyển các giá trị mới cho các đối số mỗi lần
Khi bạn đã đọc qua phần hướng dẫn tiếp theo về các đối tượng và thuộc tính, bạn thậm chí sẽ có thể làm điều này
Một hàm có thể có nhiều hoặc ít đối số như bạn đang làm việc và chúng có thể là số hoặc chuỗi. Chỉ cần thêm nhiều biến đối số vào định nghĩa hàm, phân tách từng biến bằng dấu phẩy. Nếu bạn gọi một hàm với số lượng đối số sai [ít hơn hoặc nhiều hơn nó được định nghĩa là sử dụng], bạn sẽ gặp lỗi
Bạn cũng có thể định nghĩa một hàm không có đối số hoặc giá trị trả về,
function popup[]
{
alert['You clicked on the page'];
}
Các loại chức năng này sẽ làm điều tương tự mỗi khi bạn sử dụng chúng
Trở lại
Khi bạn return từ một chức năng, nó sẽ ngừng thực thi. Nếu có nhiều dòng mã hơn trong định nghĩa hàm sau câu lệnh return, chúng sẽ không được thực thi. Bạn cũng có thể trả về chuỗi và biến boolean. Ví dụ: khi bạn đang xác thực một biểu mẫu, bạn có thể kiểm tra xem biểu mẫu có được điền chính xác hay không bằng một hàm và trả về true hoặc false để quyết định xem biểu mẫu có được gửi hay không
Bạn có thể sử dụng return để dừng tập lệnh trước khi chạy.
document.write["Two plus Three is " + addNumbers[2,3]];9 là đối tượng của Internet Explorer chứa tất cả các thành phần trang trong đó [nó là cấu trúc DOM độc quyền của Microsoft]. Vì vậy, nếu chúng tôi viết một tập lệnh sử dụng IE DOM, chúng tôi sẽ muốn đảm bảo rằng không có trình duyệt nào thuộc các loại khác thử thực thi mã, vì chúng sẽ gặp phải một đống lỗi. Để thực hiện điều này, chúng tôi kiểm tra xem
document.write["Two plus Three is " + addNumbers[2,3]];9 có được hỗ trợ hay không. Nếu không, chúng tôi kết thúc kịch bản. Nếu đúng như vậy, trình duyệt sẽ tiếp tục cho đến khi đạt đến giá trị
return 'thực'if [!document.all] {
return;
}
// Internet Explorer-specific DHTML begins here
Phát hiện hỗ trợ tốt hơn và cụ thể hơn sẽ được đề cập sau
sửa lỗi
Ngay cả khi mã hóa thông qua các ví dụ trong một số hướng dẫn trước, bạn có thể đã gặp phải một số lỗi JavaScript. Chúng xuất hiện ở khắp mọi nơi, ngay cả đối với những lập trình viên giàu kinh nghiệm nhất, nhưng may mắn là chúng thường không quá khó để tìm thấy. Có một số cách để tìm ra vấn đề và một số lỗi phổ biến mà tôi sẽ đề cập ở đây
Lỗi tập lệnh thường sẽ tự hiển thị trên thanh trạng thái. Nếu bạn đã định cấu hình trình duyệt của mình đúng cách, bạn cũng có thể để trình duyệt bật lên cảnh báo khi mỗi lỗi xảy ra. Internet Explorer đưa ra thông báo lỗi tốt
Từ đó, chúng ta có thể tìm ra dòng và cột [ký tự] xảy ra lỗi, điều này giúp ích rất nhiều cho việc tìm ra gốc rễ của vấn đề. Trong trường hợp này, nó thậm chí còn cho tôi biết vấn đề — Tôi đã sử dụng một biến
function popup[]
{
alert['You clicked on the page'];
}
2 chưa được cung cấp giá trịCó hai loại lỗi JavaScript. lỗi cú pháp và lỗi thời gian chạy. Lỗi cú pháp rất dễ phát hiện vì chúng xảy ra ngay khi bạn tải trang lên và thường là lỗi chính tả trong mã của bạn hoặc trường hợp sử dụng biến không xác định. Bạn có thể tìm kiếm chúng từ các thông báo lỗi và loại bỏ chúng. Lỗi thời gian chạy xảy ra khi tập lệnh của bạn được thực thi, chẳng hạn như bởi trình xử lý sự kiện. Chúng khó phát hiện hơn vì chúng không rõ ràng ngay lập tức và thường yêu cầu thử nghiệm thích hợp để tiếp xúc
Hai điều luôn gây ra lỗi là
- Sử dụng trình chỉnh sửa chèn lề ở bên cạnh mã. Các lệnh JavaScript cần phải ở ngay bên trái mã nếu chúng hoạt động bình thường
- Phá vỡ một dòng mã ở giữa. Tất cả các lệnh JavaScript phải nằm trên một dòng, nếu không nó sẽ báo lỗi. Để tránh phải cuộn theo chiều ngang trên các dòng mã dài, hãy sử dụng một trình chỉnh sửa có khả năng ngắt từ, tính năng này sẽ thêm các dấu ngắt ảo vào các dòng của bạn, nhưng sẽ không thực sự ngắt mã
Khi bạn đang cố tìm dòng bị lỗi, bạn đếm ngược từ đầu tài liệu. Dòng trống vẫn được tính là dòng. Dưới đây có một lỗi trên dòng 6
function popup[]
{
alert['You clicked on the page'];
}
3function popup[]
{
alert['You clicked on the page'];
}
4Lỗi trong câu hỏi là một lệnh không kết thúc trên dòng mà nó bắt đầu. Khi bạn đã tìm thấy lỗi, hãy kiểm tra các ngắt dòng bị đặt sai vị trí, lỗi chính tả của từ khóa JavaScript, cách viết hoa chính xác của tên biến và hàm, sử dụng các biến không xác định và trích dẫn thích hợp [đặc biệt là các dấu nháy đơn trong Chuỗi]
Nếu bạn gặp nhiều lỗi cùng một lúc, đừng hoảng sợ. Thông thường, tất cả chúng đều do một hoặc hai lỗi trong tài liệu của bạn gây ra. Bạn nên bắt đầu từ đầu và khi bạn tìm thấy bất kỳ lỗi nào, hãy chạy lại tập lệnh. Bạn có thể sẽ thấy rằng tổng số lỗi giảm đáng kể với mỗi lỗi bạn bắt được
Dành thời gian để sửa lỗi của bạn. Nó rất quan trọng. Nếu bạn không thể làm cho tập lệnh hoạt động, đừng đưa nó vào trang của bạn cho đến khi bạn có thể. Có một số điều tồi tệ hơn là gặp phải lỗi JavaScript trên một trang khi duyệt. Nó làm cho bạn trông khá ngu ngốc. Đặc biệt là vì chúng thường không khó sửa chữa