CODEWITHSUNDEEP
javascripthtml
membersound
membersound

Reputation: 86627

How to call javascript function from <script> tag?

<html>
 <script>
    //some largeFunction()

    //load a script dynamically based on the previous code
    document.write("<script src='//...'><\/script>");
 </script>
</html>

Question: is it possible to move the largeFunction() out of the static html page and put it into a js file? If yes, how could I then call that function statically before writing the <script> tag?

Upvotes: 27

Views: 170241

Answers (4)

andre mcgruder
andre mcgruder

Reputation: 1520

If you grab DOM elements and add event handlers in your JavaScript you don't have to put functions on the HTML page. You could just make the JS file and link to it using a script tag. It would probably be best to place the script tag at the bottom of the page to ensure that all of the DOM has loaded.

Example:

var getDomJquery = $("#got-Some-dom").on( "click", function(){
    // do some cool JS DOM stuff here
});


var getDomPureJs = document.getElementById("got-Some-dom").on( "click", function(){
    // do some cool JS DOM stuff here
});

In your HTML near bottom of the page.

<script src="myJsFile.js"></script>

Upvotes: 2

Rajesh
Rajesh

Reputation: 24915

You can try following options:

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

These are functions that are executed only once when the file is loaded. They are called the moment they are compiled.

function largeFunction(){
  
}

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

You can even try without IIFE

function largeFunction(){
  
}
largeFunction();

window.onload / $(document).ready()

This events are fired once all elements are rendered. If your JS is manipulating any elements like managing UI states or creating controls like datepickers or searchable dropdowns or adding options to select, these events are preferred.

Note: 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();
})

Note: 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);
}

Upvotes: 11

MortenMoulder
MortenMoulder

Reputation: 6648

Short answer: Yes.

As long as you load the first script containing the function first, you can call the function anywhere, as long as it's loaded first.

<script src="file1.js" type="text/javascript"></script> 
<script src="file2.js" type="text/javascript"></script>

In this example, make sure file1.js contains your largeFunction() function. You can then call largeFunction(); inside file2.js.

You can also do this:

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

Just make sure your FIRST script contains the function.

Upvotes: 35

Brian Driscoll
Brian Driscoll

Reputation: 19635

Without going into details about javascript modules, etc, I'll just address the easiest way for you to move forward and leave you to optimize as you see fit. Let's say you put largeFunction() into a separate file called myScript.js, then your HTML page setup would be like this:

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

    //load a script dynamically based on the previous code
    document.write("<script src='//...'><\/script>");
 </script>
</html>

As you can see, all you really need to do is make sure that you reference the external script file before your current script tag. From there, you can call largeFunction() as you would have if it were embedded in your HTML.

Upvotes: 3

Related Questions