Funkce JavaScriptu

Obsah

Funkce JavaScriptu je blok kódu určený k provádění a konkrétní úkol.

Funkce JavaScript se provede, když "něco" to vyvolává (volá to).

Příklad

//  Function to compute the product of p1 and p2
function myFunction(p1, p2) {
    return p1 * p2;
}

Zkuste to sami →

<!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>

Syntaxe funkce JavaScript

Funkce JavaScript je definována pomocí klíčového slova function, následuje jméno následované závorkami ().

Názvy funkcí mohou obsahovat písmena, číslice, podtržítka a znaky dolaru (stejná pravidla jako proměnné).

Závorky mohou obsahovat názvy parametrů oddělené čárkami:
(parametr1, parametr2, ...)

Kód, který má funkce provést, je umístěn ve složených závorkách: {}

function
name(parameter1, parameter2, parameter3) {
    // code to be executed
}

Parametry funkce jsou uvedeny v závorkách() v definice funkce.

Argumenty funkce jsou hodnoty přijatá funkcí, když je vyvolána.

Uvnitř funkce se argumenty (parametry) chovají jako lokální proměnné.

Vyvolání funkce

Kód uvnitř funkce se spustí, když „něco“ vyvolá (zavolá). funkce:

Když dojde k události (když uživatel klikne na tlačítko)
Když je vyvolán (volán) z kódu JavaScript
Automaticky (samo vyvolat)

Později se dozvíte mnohem více o vyvolání funkcí tutorial.

Funkce Návrat

Když JavaScript dosáhne příkazu return, funkce se zastaví.

Pokud byla funkce vyvolána z příkazu, JavaScript bude "return" pro provedení kódu po příkazu vyvolání.

Funkce často počítají návratovou hodnotu. Návratová hodnota je "vrátil" zpět volající":

Příklad

Vypočítejte součin dvou čísel a vraťte výsledek:

// 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;
}

Zkuste to sami →

<!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>

Proč Funkce?

Pomocí funkcí můžete znovu použít kód

Můžete napsat kód, který lze použít mnohokrát.

Můžete použít stejný kód s různými argumenty, abyste získali různé výsledky.

Operátor

Operátor() vyvolá (volá) funkci:

Příklad

Převést Fahrenheita na stupně Celsia:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

Zkuste to sami →

<!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>

Přístup k funkci s nesprávnými parametry může vrátit nesprávnou odpověď:

Příklad

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

Zkuste to sami →

<!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>

Přístup k funkci bez() vrátí funkci a nikoli výsledek funkce:

Příklad

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

Zkuste to sami →

<!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>

Poznámka

Jak vidíte z výše uvedených příkladů, toCelsius odkazuje na funkční objekt a toCelsius() odkazuje na výsledek funkce.

Funkce používané jako proměnné hodnoty

Funkce lze používat stejným způsobem, jako používáte proměnné, ve všech typech vzorců, přiřazení a výpočty.

Příklad

Místo použití proměnné k uložení návratové hodnoty funkce:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Funkci můžete použít přímo jako hodnotu proměnné:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Zkuste to sami →

<!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>

O funkcích se dozvíte mnohem více později v tomto tutoriálu.

Místní proměnné

Proměnné deklarované v rámci funkce JavaScriptu se stanou MÍSTNÍk funkce.

Lze přistupovat pouze k místním proměnným zevnitř funkce.

Příklad

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Zkuste to sami →

<!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>

Protože lokální proměnné jsou rozpoznávány pouze uvnitř jejich funkcí, lze proměnné se stejným názvem použít v různých funkcích.

Lokální proměnné se vytvářejí při spuštění funkce a vymažou se po dokončení funkce.