Eine JavaScript-Funktion ist ein Codeblock, der dazu dient, Folgendes auszuführen: Aufgabenstellung.
Eine JavaScript-Funktion wird ausgeführt, wenn „etwas“ ruft es auf (ruft es auf).
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Eine JavaScript-Funktion wird mit dem Schlüsselwort function
definiert. gefolgt von einem Namen, gefolgt von Klammern ().
Funktionsnamen können Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten (Gleiche Regeln wie Variablen).
Die Klammern können durch Kommas getrennte Parameternamen enthalten:
(Parameter1, Parameter2, ...)
Der von der Funktion auszuführende Code steht in geschweiften Klammern: {}
function
name(parameter1, parameter2, parameter3) {
// code to be executed
}
Funktions-Parameter werden in Klammern() aufgeführt die Funktionsdefinition.
Funktionsargumente sind die Werte von der Funktion empfangen, wenn sie aufgerufen wird.
Innerhalb der Funktion verhalten sich die Argumente (die Parameter) wie lokale Variablen.
Der Code innerhalb der Funktion wird ausgeführt, wenn „etwas“ die aufruft Funktion:
Wenn ein Ereignis auftritt (wenn ein Benutzer auf eine Schaltfläche klickt)
Wenn es aus JavaScript-Code aufgerufen (aufgerufen) wird
Automatisch (selbstaufgerufen)
Später erfahren Sie noch viel mehr über den Funktionsaufruf Lernprogramm.
Wenn JavaScript eine return
-Anweisung erreicht, Die Funktion wird nicht mehr ausgeführt.
Wenn die Funktion über eine Anweisung aufgerufen wurde, wird dies von JavaScript ausgeführt „return“, um den Code nach der aufrufenden Anweisung auszuführen.
Funktionen berechnen oft einen Rückgabewert. Der Rückgabewert ist „zurückgekehrt“ zurück zu der Anrufer":
Berechnen Sie das Produkt zweier Zahlen und geben Sie das Ergebnis zurück:
// Function is called, the return value will end up in x
let x = myFunction(4, 3);
function myFunction(a, b) {
// Function returns the product of a and b
return a * b;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Mit Funktionen können Sie Code wiederverwenden
Sie können Code schreiben, der mehrfach verwendet werden kann.
Sie können denselben Code mit unterschiedlichen Argumenten verwenden, um unterschiedliche Ergebnisse zu erzielen.
Der()-Operator ruft die Funktion auf:
Fahrenheit in Celsius umrechnen:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius(77);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>
Der Zugriff auf eine Funktion mit falschen Parametern kann zu einer falschen Antwort führen:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>
Der Zugriff auf eine Funktion ohne() gibt die Funktion und nicht das Funktionsergebnis zurück:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>
Wie Sie den obigen Beispielen entnehmen können, bezieht sich toCelsius
auf das Funktionsobjekt und toCelsius()
bezieht sich auf das Funktionsergebnis.
Funktionen können auf die gleiche Weise wie Variablen in allen Arten von Formeln, Zuweisungen usw. verwendet werden Berechnungen.
Anstatt eine Variable zum Speichern des Rückgabewerts einer Funktion zu verwenden:
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
Sie können die Funktion direkt als Variablenwert verwenden:
let text = "The temperature is " + toCelsius(77) + " Celsius";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>
<p id="demo"></p>
<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>
Später in diesem Tutorial erfahren Sie noch viel mehr über Funktionen.
Innerhalb einer JavaScript-Funktion deklarierte Variablen werden zu LOKAL zu die Funktion.
Auf lokale Variablen kann nur zugegriffen werden aus der Funktion heraus.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Outside myFunction() carName is undefined.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;
function myFunction() {
let carName = "Volvo";
let text = "Inside: " + typeof carName + " " + carName;
document.getElementById("demo2").innerHTML = text;
}
myFunction();
</script>
</body>
</html>
Da lokale Variablen nur innerhalb ihrer Funktionen erkannt werden, können Variablen mit demselben Namen in verschiedenen Funktionen verwendet werden.
Lokale Variablen werden beim Start einer Funktion erstellt und bei Abschluss der Funktion gelöscht.