En JavaScript-funktion är ett kodblock utformat för att utföra en särskild uppgift.
En JavaScript-funktion körs när "något" åberopar det (kallar det).
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
Prova själv →
<!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 definieras med nyckelordet function
, följt av ett namn, följt av parenteser ().
Funktionsnamn kan innehålla bokstäver, siffror, understreck och dollartecken (samma regler som variabler).
Parentesen kan innehålla parameternamn separerade med kommatecken:
(parameter1, parameter2, ...)
Koden som ska exekveras, av funktionen, placeras inom parentes: {}
function
name(parameter1, parameter2, parameter3) {
// code to be executed
}
Funktions parametrar listas inom parentesen() i funktionsdefinitionen.
Funktions argument är värdena tas emot av funktionen när den anropas.
Inuti funktionen beter sig argumenten (parametrarna) som lokala variabler.
Koden inuti funktionen kommer att köras när "något" anropar (anropar) fungera:
När en händelse inträffar (när en användare klickar på en knapp)
När den anropas (anropas) från JavaScript-kod
Automatiskt (självanropat)
Du kommer att lära dig mycket mer om funktionsanrop längre fram i detta handledning.
När JavaScript når en retur
-sats, funktionen kommer att sluta köras.
Om funktionen anropades från ett uttalande kommer JavaScript "return" för att exekvera koden efter anropssatsen.
Funktioner beräknar ofta ett returvärde. Returvärdet är "återvände" tillbaka till uppringaren":
Beräkna produkten av två tal och returnera 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;
}
Prova själv →
<!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 återanvända kod
Du kan skriva kod som kan användas många gånger.
Du kan använda samma kod med olika argument för att få olika resultat.
Operatören() anropar (anropar) funktionen:
Konvertera Fahrenheit till Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius(77);
Prova själv →
<!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>
Att komma åt en funktion med felaktiga parametrar kan returnera ett felaktigt svar:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius();
Prova själv →
<!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>
Att komma åt en funktion utan() returnerar funktionen och inte funktionsresultatet:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius;
Prova själv →
<!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 ser från exemplen ovan hänvisar toCelsius
till funktionsobjektet, och toCelsius()
hänvisar till funktionsresultatet.
Funktioner kan användas på samma sätt som du använder variabler, i alla typer av formler, tilldelningar och beräkningar.
Istället för att använda en variabel för att lagra returvärdet för en funktion:
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
Du kan använda funktionen direkt, som ett variabelvärde:
let text = "The temperature is " + toCelsius(77) + " Celsius";
Prova själv →
<!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 kommer att lära dig mycket mer om funktioner senare i denna handledning.
Variabler som deklareras i en JavaScript-funktion blir LOKAL till funktionen.
Lokala variabler kan endast nås inifrån funktionen.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Prova själv →
<!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>
Eftersom lokala variabler bara känns igen i deras funktioner, kan variabler med samma namn användas i olika funktioner.
Lokala variabler skapas när en funktion startar och raderas när funktionen är klar.