Cách gọi JavaScript từ HTML?

Trong bài viết này, chúng ta sẽ khám phá cách gọi và khởi tạo hàm JavaScript từ một mẫu HTML. Chúng tôi yêu cầu hàm JavaScript thực thi các phương thức mong muốn đối với đầu vào được truyền

Trong hướng dẫn này, chúng ta sẽ thảo luận về hai cách tiếp cận chính để gọi hàm JavaScript từ trang HTML

Trong Cách tiếp cận đầu tiên, chúng tôi sẽ lấy một thẻ đầu vào đơn giản và nút Gửi được liên kết với nó. Sau khi nhấp vào nút, chúng ta sẽ thấy một hộp thoại bật lên trên màn hình dưới dạng cảnh báo. Nút này khi nhấp gọi sẽ gọi hàm JavaScript để hiển thị cảnh báo

Cách tiếp cận 1

• Đầu tiên, lấy một nút bằng thẻ đầu vào

• Sau khi nhấp vào nút, bạn có thể thấy một hộp thoại bật lên trên màn hình đã được khai báo trong hàm JavaScript dưới dạng cảnh báo

• Hàm clickEvent[] cho phép thực thi cảnh báo[] khi nút này được nhấp bằng cách sử dụng phương thức title[]

ví dụ 1

# mục lục. html

   
      Welcome To Tutorials Point
   
   
   

đầu ra

Chương trình trên sẽ cho ra kết quả như sau. Khi bạn nhấp vào nút "Bấm vào đây. ", nó sẽ cảnh báo với thông báo "Này…chức năng Javascript được gọi. "

Cách tiếp cận 2

Theo cách tiếp cận này, chúng ta có thể sử dụng JavaScript để viết HTML trực tiếp. Chúng tôi có thể thêm tất cả mã mẫu của mình bên trong thẻ script và ghi vào mẫu bằng tài liệu. viết phương pháp. Tương tự, chúng ta cũng có thể sử dụng các hàm JavaScript trực tiếp từ mẫu HTML mà không cần sử dụng bất kỳ sự kiện nào

Trong hướng dẫn này, chúng tôi sẽ sử dụng hàm gọi, bởi vì một hàm JavaScript có thể được gọi mà không cần gọi

Gọi một hàm dưới dạng một hàm

Thí dụ

function myFunction[a, b] {
  return a * b;
}
myFunction[10,

Tự mình thử »

Hàm trên không thuộc bất kỳ đối tượng nào. Nhưng trong JavaScript luôn có một đối tượng toàn cầu mặc định

Trong HTML, đối tượng toàn cầu mặc định là chính trang HTML, vì vậy chức năng trên "thuộc về" trang HTML

Trong trình duyệt, đối tượng trang là cửa sổ trình duyệt. Hàm trên tự động trở thành hàm cửa sổ

Ghi chú

Đây là cách phổ biến để gọi một hàm JavaScript, nhưng không phải là một cách thực hành tốt.
Các biến, phương thức hoặc hàm toàn cục có thể dễ dàng tạo ra xung đột tên và lỗi trong đối tượng toàn cục.

myFunction[] và cửa sổ. myFunction[] là chức năng tương tự

Thí dụ

function myFunction[a, b] {
  return a * b;
}
cửa sổ. myFunction[10, 2];

Tự mình thử »

Cái này là cái gì?

Trong JavaScript, từ khóa this đề cập đến một đối tượng

Đối tượng nào phụ thuộc vào cách this đang được gọi [được sử dụng hoặc được gọi]

Từ khóa this đề cập đến các đối tượng khác nhau tùy thuộc vào cách nó được sử dụng

Trong một phương thức đối tượng, this đề cập đến đối tượng. Một mình, this đề cập đến đối tượng toàn cầu. Trong một hàm, this đề cập đến đối tượng toàn cầu. Trong một hàm, ở chế độ nghiêm ngặt, this là undefined. Trong một sự kiện, this đề cập đến phần tử đã nhận được sự kiện. Các phương thức như this0, this1 và this2 có thể tham chiếu this đến bất kỳ đối tượng nào

Đối tượng Toàn cầu

Khi một hàm được gọi mà không có đối tượng chủ sở hữu, giá trị của this sẽ trở thành đối tượng toàn cục

Trong trình duyệt web, đối tượng chung là cửa sổ trình duyệt

Ví dụ này trả về đối tượng cửa sổ dưới dạng giá trị của this

Thí dụ

để x = myFunction[];

function myFunction[] {
  return cái này;
}

Tự mình thử »

Gọi một hàm dưới dạng hàm toàn cục, khiến giá trị của this trở thành đối tượng toàn cục.
Việc sử dụng đối tượng cửa sổ làm biến có thể dễ dàng làm hỏng chương trình của bạn.

Gọi một hàm như một phương thức

Trong JavaScript, bạn có thể định nghĩa hàm là phương thức đối tượng

Ví dụ sau tạo một đối tượng [myObject], với hai thuộc tính [firstName và lastName] và một phương thức [fullName]

Thí dụ

const myObject = {
  firstName. "John",
  họ. "Doe",
  họ và tên. hàm [] {
    trả lại cái này. FirstName + " " + cái này. họ;
  }
}
myObject. Họ và tên[];

Tự mình thử »

Phương thức fullName là một hàm. Chức năng thuộc về đối tượng. myObject là chủ sở hữu của chức năng

Thứ được gọi là this, là đối tượng "sở hữu" mã JavaScript. Trong trường hợp này, giá trị của this là myObject

kiểm tra nó. Thay đổi phương thức fullName để trả về giá trị của this

Thí dụ

const myObject = {
  firstName. "John",
  họ. "Doe",
  họ và tên. function [] {
    trả lại cái này;
  }
}

// Điều này sẽ trả về [object Object] [đối tượng chủ sở hữu]
myObject. họ tên[];

Tự mình thử »

Gọi một hàm như một phương thức đối tượng, làm cho giá trị của this trở thành chính đối tượng đó

Gọi một hàm với Hàm tạo hàm

Nếu một lời gọi hàm được bắt đầu bằng từ khóa this0, thì đó là một lời gọi hàm tạo

Có vẻ như bạn tạo một hàm mới, nhưng vì các hàm JavaScript là các đối tượng nên bạn thực sự tạo một đối tượng mới

Thí dụ

// Đây là hàm tạo.
function myFunction[arg1, arg2] {
  cái này. firstName = arg1;
  this. họ  = arg2;
}

// Thao tác này tạo đối tượng mới
const myObj = new myFunction["John", "Doe"];

// Điều này sẽ trả về "John"
myObj. FirstName;

Tự mình thử »

Một lời gọi hàm tạo tạo một đối tượng mới. Đối tượng mới kế thừa các thuộc tính và phương thức từ hàm tạo của nó

Làm cách nào để gọi hàm JavaScript mà không cần nhấp vào nút trong HTML?

Làm cách nào để gọi hàm JavaScript mà không có bất kỳ sự kiện nào trong HTML?