Hướng dẫn call javascript function outside script - gọi hàm javascript bên ngoài script

Question

Bạn có thể thử các tùy chọn sau:

Nội dung chính Show

LargeFunction.js
window.Onload / $ (tài liệu) .reet ()
Mục lục
Tại sao JavaScript được sử dụng cùng với HTML?
Sử dụng thẻ script
Nội tuyến trong html
Các tập tin bên ngoài
Làm thế nào một hàm có thể được gọi từ một tập lệnh trong JavaScript?
Làm thế nào để bạn gọi một chức năng JavaScript bên ngoài trong HTML?
Bạn có thể gọi một chức năng trong chính JavaScript không?
Làm thế nào có thể gọi chức năng JavaScript mà không có bất kỳ sự kiện nào trong HTML?

LargeFunction.js

function largeFunction(){
  // This is a global function and is a part of window object.
  // This can be called from anywhere once the file is loaded.
}

index.html

<script src="largeFunction.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

Iife

Đây là các chức năng chỉ được thực thi một lần khi tệp được tải. Chúng được gọi là thời điểm chúng được biên soạn.

function largeFunction(){
  
}

(function(){
  largeFunction();
})()

Bạn thậm chí có thể thử mà không cần iife

function largeFunction(){
  
}
largeFunction();

window.Onload / $ (tài liệu) .reet ()

Các sự kiện này được bắn một khi tất cả các yếu tố được hiển thị. Nếu JS của bạn đang thao túng bất kỳ yếu tố nào như quản lý trạng thái UI hoặc tạo các điều khiển như ____10 hoặc

<script src="largeFunction.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

1 hoặc

<script src="largeFunction.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

2, các sự kiện này sẽ được ưu tiên.

Lưu ý: Cả hai sự kiện không giống nhau. Bạn có thể tham khảo Window Post Window.Onload vs $ (tài liệu) .reet đã () Both events are not same. You can refer following post window.onload vs $(document).ready()

// Pure JS
function largeFunction(){

}

window.onload = function(){
  largeFunction();
}


// jQuery
function largeFunction(){

}

$(document).ready(function(){
  largeFunction();
})

Lưu ý: Nó không phải là một thực hành tốt để có chức năng lớn. Bạn cũng nên cố gắng chia hàm thành nhiều chức năng Its not a good practice to have large function. You should also try to split function to multiple functions

function getData(callback){
  var data = ...
  // Gets data from server
  data = cleanData(data);
  data = processData(data);
  
  if(callback) callback(data); // callback refers to renderUI function
}

function cleanData(data){
  // Clean if any field needs formatting
  return data;
}

function processData(data){
  // You can permute logic to parse data
  return data;
}

function renderUI(data){
  // Update DOM element with data
}


function largeFunction(){
  getData(renderUI);
}

Trong bài viết này, chúng tôi sẽ xem xét các phương thức khác nhau để gọi các hàm JavaScript từ các tệp HTML. Bạn có thể sử dụng một trong hai phương pháp này tùy thuộc vào trường hợp sử dụng của bạn. Trước đó, chúng tôi hãy hiểu tại sao chính xác chúng tôi muốn sử dụng JavaScript trên trang HTML.

Mục lục

Tại sao JavaScript được sử dụng cùng với HTML?
Sử dụng thẻ script
Nội tuyến trong html

Các tập tin bên ngoài

Tại sao JavaScript được sử dụng cùng với HTML?

Sử dụng thẻ scriptJavaScript functions from HTML pages.

Sử dụng thẻ script

Nội tuyến trong html

Các tập tin bên ngoài

<html>
   <head>
      <script type="text/javascript">
         var myVar="hello";
         function exampleFunction() { alert('You triggered an alert!'); }
      </script>
   </head>
   <body>
      <p><a href="#" onClick="exampleFunction;">Click Me</a></p>
   </body>
</html>

Nội tuyến trong html

Các tập tin bên ngoài

<style type="text/css">
   .red { border: 2px solid red; }
   .blue { border: 2px solid blue; }
</style>
<p><img name="photo" src="/examples/photo.jpg" 
   onMouseOver="photo.setAttribute('class','red')" 
   onMouseOut="photo.setAttribute('class','blue')"></p>

Trong khi HTML và CSS giúp chúng tôi hiển thị thông tin tĩnh trên trang web, sử dụng JavaScript làm cho trang tương tác. Sử dụng JavaScript cho phép người dùng triển khai các tính năng phức tạp trên các trang web như bản đồ tương tác, đồ họa 2D/3D hoạt hình, cuộn máy tự động video, v.v.

Các tập tin bên ngoài

Trong khi HTML và CSS giúp chúng tôi hiển thị thông tin tĩnh trên trang web, sử dụng JavaScript làm cho trang tương tác. Sử dụng JavaScript cho phép người dùng triển khai các tính năng phức tạp trên các trang web như bản đồ tương tác, đồ họa 2D/3D hoạt hình, cuộn máy tự động video, v.v.

Example:

Đây là một trong những phương pháp dễ nhất và hữu ích hơn khi bạn có ít dòng mã hơn trong hàm JavaScript của mình. Trong phương pháp này, trước tiên chúng tôi sẽ tạo và xác định một hàm trong phần đầu của tài liệu HTML giữa các thẻ .. Hàm này sau đó được gọi trong phần thân của tài liệu HTML.

function exampleFunction() {
    alert('You triggered an alert!');
}

Thí dụ:

<html>
   <head>
      <script type = "text/javascript" src="function.js"></script>  
   </head>
   <body>
      <p><a href="#" onClick="exampleFunction;">Click Me</a></p>
   </body>
</html>

Làm thế nào một hàm có thể được gọi từ một tập lệnh trong JavaScript?

Phương thức Call () là phương thức JavaScript được xác định trước. Nó có thể được sử dụng để gọi (gọi) một phương thức với một đối tượng chủ sở hữu làm đối số (tham số). Với call (), một đối tượng có thể sử dụng một phương thức thuộc về một đối tượng khác.call() method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter). With call() , an object can use a method belonging to another object.

Làm thế nào để bạn gọi một chức năng JavaScript bên ngoài trong HTML?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ tập lệnh với thuộc tính SRC. Bạn đã sử dụng thuộc tính SRC khi sử dụng hình ảnh. Giá trị cho thuộc tính SRC phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn.use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the tags in your HTML document.

Bạn có thể gọi một chức năng trong chính JavaScript không?

Một chức năng có thể tham khảo và gọi chính nó..

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

Các chức năng JavaScript có thể được tự động gọi mà không cần sự kiện.JavaScript chủ yếu được sử dụng cho các hành động trên các sự kiện người dùng như onclick (), onmouseOver (), v.v. Nhưng nếu bạn cần gọi hàm javascript mà không có bất kỳ sự kiện người dùng nào?Câu trả lời sẽ là sử dụng onload () của thẻ.use the onLoad() of the tag.

programming javascript