Fonction d'appel JavaScript à partir d'un autre fichier JS
- Fonction d’appel JavaScript à partir d’un fichier HTML
- Fonction d’appel JavaScript d’un fichier JS dans un autre fichier JS
-
Fonction d’appel JavaScript utilisant ES6
ImportetExport - Fonction d’appel JavaScript d’un fichier JS à un autre à l’aide de jQuery
Cette leçon concerne la fonction d’appel JavaScript à partir d’un autre fichier JS. Il montre comment appeler une fonction JavaScript dans un fichier HTML et d’un fichier JS à un autre fichier JS à l’aide de la machine locale et d’un serveur en direct.
Fonction d’appel JavaScript à partir d’un fichier HTML
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Call</title>
<script src="./first.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
Code JavaScript :
const PI = 3.14
let radius = 3;
function circleArea() {
var inputField = document.createElement('INPUT');
inputField.setAttribute('type', 'text');
inputField.setAttribute('value', (PI * radius * radius));
document.body.appendChild(inputField);
}
La fonction circleArea() s’exécute dès que vous cliquez sur l’élément input de type button. Il calcule la surface du cercle et l’affiche dans le navigateur.
La méthode createElement() crée un nœud d’élément avec un nom particulier. Ce nom peut être INPUT, BUTTON, P, ou autre chose.
Nous créons un élément input dans cet exemple de code et définissons deux attributs (type et value) à l’aide de la méthode setAttribute().
Nous définissons son type à text et sa value à une zone de cercle. La fonction appendChild() ajoute un nouveau nœud qui se comporte comme le dernier enfant d’un nœud.
Fonction d’appel JavaScript d’un fichier JS dans un autre fichier JS
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="first.js"></script>
<script src="second.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
Code first.js :
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
Code second.js :
function circleArea() {
document.write((calcArea()).toFixed(2));
}
Nous calculons à nouveau l’aire du cercle mais appelons la fonction calcArea de first.js dans le fichier second.js.
La méthode document.write() écrit la sortie dans le navigateur et la fonction toFixed() convertit un nombre en une chaîne, puis l’arrondit à un nombre donné de décimales. Nous imprimons l’aire du cercle à deux décimales dans cet exemple.
Fonction d’appel JavaScript utilisant ES6 Import et Export
En utilisant ECMAScript6 (ES6), vous pouvez utiliser la fonctionnalité import/export. Grâce à cela, vous pouvez importer/exporter des fonctions, des variables, des classes.
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script type="module" src="./second.js"></script>
</head>
<body>
<button id="btn" onclick="circleArea()">Show Circle Area</button>
</body>
</html>
Code first.js :
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
export {calcArea};
Code second.js :
import {calcArea} from './first.js';
document.getElementById('btn').addEventListener('click', function circleArea() {
var inputField = document.createElement('INPUT');
inputField.setAttribute('type', 'text');
inputField.setAttribute('value', (calcArea()).toFixed(2));
document.body.appendChild(inputField);
});
Cet exemple de code exporte la fonction calcArea() du fichier first.js en utilisant export {calcArea};. Le fichier second.js importe d’abord cette fonction à partir du fichier first.js ; alors seulement peut-il l’appeler. N’oubliez pas d’ajouter des fichiers avec type="module" à importer et exporter.
Vous n’avez pas besoin d’ajouter les deux fichiers .js ; l’ajout du fichier important de la fonction suffit. Par exemple, nous ajoutons un fichier second.js dans le fichier HTML.
Pour utiliser import et export, vous devez exécuter votre application sur un serveur (vous pouvez utiliser Node.js) car elle ne fonctionne pas sur la machine locale. Vous pouvez utiliser l’extension live server dans le code Visual Studio et exécuter votre code à l’aide de Ouvrir avec Live Server à des fins d’apprentissage.
Pour plus d’informations sur l'importation et l'exportation, vous pouvez consulter ce lien.
Fonction d’appel JavaScript d’un fichier JS à un autre à l’aide de jQuery
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="second.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
Code first.js :
const PiValue = 3.14;
let radius = 3;
function calcArea() {
return PiValue * radius * radius;
}
Code second.js :
function circleArea() {
$.getScript('first.js', function() {
document.write(calcArea());
});
}
Cet exemple de code calcule également la surface du cercle mais utilise jQuery pour appeler la fonction du fichier first.js dans le fichier second.js.
Dans le fichier second.js, la fonction de rappel est déclenchée une fois le script first.js complètement chargé à l’aide de la méthode getScript(). La méthode document.write écrit la sortie dans le navigateur renvoyée par la méthode calcArea().
