JavaScript Aufruf Funktion aus einer anderen JS-Datei
- JavaScript-Aufruffunktion aus HTML-Datei
- JavaScript-Aufruffunktion von einer JS-Datei in eine andere JS-Datei
-
JavaScript-Aufruffunktion mit ES6
ImportundExport - JavaScript-Aufruffunktion von einer JS-Datei in eine andere mit jQuery
In dieser Lektion geht es um die JavaScript-Aufruffunktion aus einer anderen JS-Datei. Es zeigt, wie eine JavaScript-Funktion in einer HTML-Datei und von einer JS-Datei zu einer anderen JS-Datei unter Verwendung des lokalen Computers und eines Live-Servers aufgerufen wird.
JavaScript-Aufruffunktion aus HTML-Datei
HTML Quelltext:
<!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>
JavaScript-Code:
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);
}
Die Funktion circleArea() wird ausgeführt, sobald Sie auf das Element input vom Typ button klicken. Es berechnet die Kreisfläche und zeigt sie im Browser an.
Die Methode createElement() erstellt einen Elementknoten mit einem bestimmten Namen. Dieser Name kann INPUT, BUTTON, P oder etwas anderes sein.
Wir erstellen in diesem Beispielcode ein Element input und setzen zwei Attribute (type und value) mit der Methode setAttribute().
Wir setzen seinen type auf text und value mit einem Kreisbereich. Die Funktion appendChild() fügt einen neuen Knoten an, der sich wie das letzte Kind eines Knotens verhält.
JavaScript-Aufruffunktion von einer JS-Datei in eine andere JS-Datei
HTML Quelltext:
<!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>
first.js-Code:
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
second.js-Code:
function circleArea() {
document.write((calcArea()).toFixed(2));
}
Wir berechnen die Fläche des Kreises erneut, rufen aber die Funktion calcArea aus first.js in die Datei second.js auf.
Die Methode document.write() schreibt die Ausgabe in den Browser, und die Funktion toFixed() wandelt eine Zahl in einen String um und rundet ihn anschliessend auf eine vorgegebene Anzahl Dezimalstellen. In diesem Beispiel drucken wir die Fläche des Kreises auf zwei Dezimalstellen.
JavaScript-Aufruffunktion mit ES6 Import und Export
Mit ECMAScript6 (ES6) können Sie die Funktion import/export verwenden. Damit können Sie Funktionen, Variablen, Klassen importieren/exportieren.
HTML Quelltext:
<!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>
first.js-Code:
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
export {calcArea};
second.js-Code:
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);
});
Dieser Beispielcode exportiert die Funktion calcArea() aus der Datei first.js mit export {calcArea};. Die Datei second.js importiert diese Funktion zuerst aus der Datei first.js; nur dann kann es es aufrufen. Denken Sie daran, Dateien mit type="module" zu import und export hinzuzufügen.
Sie müssen nicht beide .js-Dateien hinzufügen; Das Hinzufügen der Datei zum Importieren der Funktion reicht aus. Zum Beispiel fügen wir eine second.js-Datei in die HTML-Datei ein.
Um import und export zu verwenden, müssen Sie Ihre Anwendung auf einem Server ausführen (Sie können Node.js verwenden), da sie auf dem lokalen Computer nicht funktioniert. Sie können die Erweiterung live server im Visual Studio-Code verwenden und Ihren Code zu Lernzwecken mit Open with Live Server ausführen.
Weitere Informationen zu import und export finden Sie unter diesem Link.
JavaScript-Aufruffunktion von einer JS-Datei in eine andere mit jQuery
HTML Quelltext:
<!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>
first.js-Code:
const PiValue = 3.14;
let radius = 3;
function calcArea() {
return PiValue * radius * radius;
}
second.js-Code:
function circleArea() {
$.getScript('first.js', function() {
document.write(calcArea());
});
}
Dieser Beispielcode berechnet auch die Fläche des Kreises, verwendet jedoch jQuery, um die Funktion aus der Datei first.js in die Datei second.js aufzurufen.
In der Datei second.js wird die Callback-Funktion ausgelöst, sobald das Skript first.js mit der Methode getScript() vollständig geladen ist. Die Methode document.write schreibt die von der Methode calcArea() zurückgegebene Ausgabe in den Browser.
