Menu
Save the script file with a . js extension, and then refer to it using the src attribute in the <script> tag. Note: The external script file cannot contain the <script> tag. Note: Point to the external script file exactly where you would have written the script.
Calling a function from within itself is called recursion and the simple answer is, yes.
The function could be called as if it was in the same JS File as long as the file containing the definition of the function has been loaded before the first use of the function.
I.e.
File1.js
function alertNumber(number) {
alert(number);
}
File2.js
function alertOne() {
alertNumber("one");
}
HTML
<head>
....
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>
The other way won't work.
As correctly pointed out by Stuart Wakefield. The other way will also work.
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>
What will not work would be:
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script type="text/javascript">
alertOne();
</script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
</body>
Although alertOne is defined when calling it, internally it uses a function that is still not defined (alertNumber).
The answer above has an incorrect assumption that the order of inclusion of the files matter. As the alertNumber function is not called until the alertOne function is called. As long as both files are included by time alertOne is called the order of the files does not matter:
[HTML]
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>
[JS]
// File1.js
function alertNumber( n ) {
alert( n );
};
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // No errors
Or it can be ordered like the following:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
alertOne( );
</script>
[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
alert( n );
};
// Inline
alertOne( ); // No errors
But if you were to do this:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>
[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
alert( n );
};
It only matters about the variables and functions being available at the time of execution. When a function is defined it does not execute or resolve any of the variables declared within until that function is then subsequently called.
Inclusion of different script files is no different from the script being in that order within the same file, with the exception of deferred scripts:
<script type="text/javascript" src="myscript.js" defer="defer"></script>
then you need to be careful.
As long as both are referenced by the web page, yes.
You simply call the functions as if they are in the same JS file.
ES6: Instead of including many js files using <script> in .html you can include only one main file e.g. script.js using attribute type="module" (support) and inside script.js you can include other files:
<script type="module" src="script.js"></script>
And in script.js file include another file like that:
import { hello } from './module.js';
...
// alert(hello());
In 'module.js' you must export function/class that you will import
export function hello() {
return "Hello World";
}
Working example here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With