En JavaScript-funktion er en kodeblok designet til at udføre en bestemt opgave.
En JavaScript-funktion udføres, når "noget" påkalder det (kalder det).
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}Prøv det selv →
<!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>
En JavaScript-funktion er defineret med function nøgleordet, efterfulgt af et navn efterfulgt af parenteser ().
Funktionsnavne kan indeholde bogstaver, cifre, understregninger og dollartegn (samme regler som variabler).
Parenteserne kan indeholde parameternavne adskilt af kommaer:
(parameter1, parameter2, ...)
Den kode, der skal udføres af funktionen, er placeret inden for krøllede parenteser: {}
function
name(parameter1, parameter2, parameter3) {
// code to be executed
}Funktions parametre er angivet inden for parentesen() i funktionsdefinitionen.
Funktions argumenter er værdierne modtaget af funktionen, når den aktiveres.
Inde i funktionen opfører argumenterne (parametrene) sig som lokale variable.
Koden inde i funktionen vil køre, når "noget" kalder (kalder) fungere:
Når en hændelse opstår (når en bruger klikker på en knap)
Når det påkaldes (kaldes) fra JavaScript-kode
Automatisk (selv påkaldt)
Du vil lære meget mere om funktionsopkald senere i dette tutorial.
Når JavaScript når en retur-sætning, funktionen stopper med at udføre.
Hvis funktionen blev påkaldt fra en erklæring, vil JavaScript "return" for at udføre koden efter den påkaldende sætning.
Funktioner beregner ofte en returværdi. Returværdien er "vendte tilbage" tilbage til den "ringer":
Beregn produktet af to tal, og returner resultatet:
// 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;
}Prøv det selv →
<!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>
Med funktioner kan du genbruge kode
Du kan skrive kode, der kan bruges mange gange.
Du kan bruge den samme kode med forskellige argumenter for at producere forskellige resultater.
Operatoren() påkalder (kalder) funktionen:
Konverter Fahrenheit til Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius(77);Prøv det selv →
<!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>
Adgang til en funktion med forkerte parametre kan returnere et forkert svar:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius();Prøv det selv →
<!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>
Adgang til en funktion uden() returnerer funktionen og ikke funktionsresultatet:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius;Prøv det selv →
<!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>
Som du kan se af eksemplerne ovenfor, henviser toCelsius til funktionsobjektet, og toCelsius() henviser til funktionsresultatet.
Funktioner kan bruges på samme måde, som du bruger variabler, i alle typer formler, opgaver og beregninger.
I stedet for at bruge en variabel til at gemme returværdien af en funktion:
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";Du kan bruge funktionen direkte som en variabel værdi:
let text = "The temperature is " + toCelsius(77) + " Celsius";Prøv det selv →
<!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>
Du vil lære meget mere om funktioner senere i denne vejledning.
Variabler, der er erklæret i en JavaScript-funktion, bliver LOKALtil funktionen.
Der er kun adgang til lokale variabler inde fra funktionen.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carNamePrøv det selv →
<!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 variabler kun genkendes i deres funktioner, kan variabler med samme navn bruges i forskellige funktioner.
Lokale variabler oprettes, når en funktion starter, og slettes, når funktionen er fuldført.