Hướng dẫn JS

JS TRANG CHỦ Giới thiệu JS JS Đến đâu Đầu ra JS Tuyên bố JS Cú pháp JS Bình luận JS Biến JS JS Hãy JS Const Toán tử JS Số học JS Chuyển nhượng JS Các loại dữ liệu JS Các hàm JS Đối tượng JS Sự kiện JS Chuỗi JS Phương thức chuỗi JS Tìm kiếm chuỗi JS Mẫu chuỗi JS Số JS Phương thức số JS Mảng JS Phương thức mảng JS Sắp xếp mảng JS Lặp lại mảng JS JS Array Const JS ngày Định dạng ngày JS Ngày lấy phương thức JS Phương pháp đặt ngày JS Toán JS JS ngẫu nhiên JS Booleans So sánh JS Điều kiện JS Chuyển đổi JS JS Loop cho JS Loop For In JS Loop For Of JS lặp trong khi JS Break JS lặp lại Bộ JS Bản đồ JS JS Typeof Chuyển đổi loại JS JS Bitwise JS RegExp Lỗi JS Phạm vi JS JS Hoists Chế độ nghiêm ngặt JS JS từ khóa này Hàm mũi tên JS Lớp JS JS JSON Gỡ lỗi JS Hướng dẫn kiểu JS Các phương pháp hay nhất về JS JS sai lầm Hiệu suất JS JS dành riêng từ

Phiên bản JS

Phiên bản JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Lịch sử JS

Đối tượng JS

Định nghĩa đối tượng Thuộc tính đối tượng Phương thức đối tượng Hiển thị đối tượng Người truy cập đối tượng Trình tạo đối tượng Nguyên mẫu đối tượng Đối tượng lặp lại Bộ đối tượng Bản đồ đối tượng Tham chiếu đối tượng

Các hàm JS

Định nghĩa hàm Tham số chức năng Lời mời hàm Gọi hàm Áp dụng chức năng Chức năng đóng cửa

Lớp JS

Giới thiệu Lớp học Kế thừa giai cấp Lớp tĩnh

JS Async

Gọi lại JS JS không đồng bộ JS hứa JS Async / Await

JS HTML DOM

Giới thiệu DOM Phương thức DOM Tài liệu DOM Phần tử DOM DOM HTML Các biểu mẫu DOM DOM CSS Hoạt ảnh DOM Sự kiện DOM Trình xử lý sự kiện DOM Điều hướng DOM Nút DOM Bộ sưu tập DOM Danh sách nút DOM

BOM trình duyệt JS

Cửa sổ JS Màn hình JS Vị trí JS Lịch sử JS JS Navigator JS Popup Alert Thời gian JS JS Cookies

API web JS

Giới thiệu API Web API biểu mẫu web API lịch sử web API lưu trữ web API công nhân web API tìm nạp web API vị trí địa lý web

JS AJAX

Giới thiệu về AJAX AJAX XMLHttp Yêu cầu AJAX Phản hồi AJAX Tệp XML AJAX AJAX PHP AJAX ASP Cơ sở dữ liệu AJAX Ứng dụng AJAX Ví dụ về AJAX

JS JSON

Giới thiệu JSON Cú pháp JSON JSON so với XML Các loại dữ liệu JSON Phân tích cú pháp JSON JSON Stringify Đối tượng JSON Mảng JSON Máy chủ JSON JSON PHP HTML JSON JSON JSONP

JS so với jQuery

Bộ chọn jQuery jQuery HTML jQuery CSS jQuery DOM

Đồ họa JS

Đồ họa JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Ví dụ về JS

Ví dụ về JS JS HTML DOM Đầu vào HTML JS Đối tượng HTML JS Sự kiện HTML JS Trình duyệt JS Trình chỉnh sửa JS Bài tập JS JS Quiz Chứng chỉ JS

Tham khảo JS

Đối tượng JavaScript Đối tượng DOM HTML


Các hàm JavaScript


Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể.

Một hàm JavaScript được thực thi khi "cái gì đó" gọi nó (gọi nó).


Thí dụ

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

Cú pháp hàm JavaScript

Một hàm JavaScript được xác định bằng functiontừ khóa, theo sau là tên , theo sau là dấu ngoặc đơn () .

Tên hàm có thể chứa các chữ cái, chữ số, dấu gạch dưới và dấu đô la (quy tắc giống như các biến).

Dấu ngoặc đơn có thể bao gồm tên tham số được phân tách bằng dấu phẩy:
( tham số1, tham số2, ... )

Mã được thực thi bởi hàm, được đặt bên trong dấu ngoặc nhọn: {}

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Các tham số của hàm được liệt kê bên trong dấu ngoặc đơn () trong định nghĩa hàm.

Các đối số của hàm là các giá trị mà hàm nhận được khi nó được gọi.

Bên trong hàm, các đối số (tham số) hoạt động như các biến cục bộ.

Một hàm cũng giống như một thủ tục hoặc một chương trình con, trong các ngôn ngữ lập trình khác.


Lời mời hàm

Mã bên trong hàm sẽ thực thi khi "cái gì đó" gọi (gọi) hàm:

  • Khi một sự kiện xảy ra (khi người dùng nhấp vào một nút)
  • Khi nó được gọi (gọi) từ mã JavaScript
  • Tự động (tự gọi)

Bạn sẽ tìm hiểu thêm rất nhiều về cách gọi hàm ở phần sau của hướng dẫn này.



Chức năng trả về

Khi JavaScript đến một returncâu lệnh, hàm sẽ ngừng thực thi.

Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ "quay lại" để thực thi mã sau câu lệnh gọi.

Các hàm thường tính giá trị trả về . Giá trị trả về được "trả lại" trở lại "người gọi":

Thí dụ

Tính tích của hai số và trả về kết quả:

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

Kết quả trong x sẽ là:

12

Tại sao lại là chức năng?

Bạn có thể sử dụng lại mã: Xác định mã một lần và sử dụng nhiều lần.

Bạn có thể sử dụng cùng một đoạn mã nhiều lần với các đối số khác nhau, để tạo ra các kết quả khác nhau.

Thí dụ

Chuyển đổi độ F sang độ C:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Toán tử () gọi hàm

Sử dụng ví dụ trên, toCelsiustham chiếu đến đối tượng hàm và toCelsius()tham chiếu đến kết quả của hàm.

Việc truy cập một hàm không có () sẽ trả về đối tượng hàm thay vì kết quả của hàm.

Thí dụ

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Các hàm được sử dụng làm giá trị thay đổi

Các hàm có thể được sử dụng giống như cách bạn sử dụng các biến, trong tất cả các loại công thức, phép toán và phép tính.

Thí dụ

Thay vì sử dụng một biến để lưu trữ giá trị trả về của một hàm:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Bạn có thể sử dụng hàm trực tiếp, dưới dạng một giá trị biến:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Bạn sẽ tìm hiểu thêm rất nhiều về các hàm ở phần sau của hướng dẫn này.


Biến cục bộ

Các biến được khai báo trong một hàm JavaScript, trở thành ĐỊA PHƯƠNG đối với hàm.

Các biến cục bộ chỉ có thể được truy cập từ bên trong hàm.

Thí dụ

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Vì các biến cục bộ chỉ được nhận dạng bên trong các hàm của chúng, các biến có cùng tên có thể được sử dụng trong các hàm khác nhau.

Các biến cục bộ được tạo khi một hàm khởi động và bị xóa khi hoàn thành hàm.


Kiểm tra bản thân với các bài tập

Bài tập:

Thực thi chức năng được đặt tên myFunction.

function myFunction() {
  alert("Hello World!");
}
;