Výukový program JS

JS HOME Úvod do JS JS Kam vést Výstup JS JS prohlášení Syntaxe JS Komentáře JS JS proměnné JS Let JS Const Operátoři JS JS aritmetika Zadání JS JS datové typy Funkce JS JS objekty Události JS JS struny JS String Methods JS String Search Šablony řetězců JS JS čísla Metody čísel JS JS Arrays Metody JS Array JS Array Sort Iterace pole JS JS Array Const JS Termíny Formáty data JS JS metody získávání data JS metody nastavení data JS Math JS Náhodný JS Booleans JS Srovnání Podmínky JS Přepínač JS JS Loop For JS Loop For In JS Loop For Of Zatímco JS Loop JS Break JS Iterables Sady JS Mapy JS Typ JS Konverze typu JS JS Bitwise JS RegExp Chyby JS Rozsah JS JS Zvedací zařízení Přísný režim JS JS toto klíčové slovo Funkce šipky JS JS třídy JS JSON Ladění JS Průvodce stylem JS JS Best Practices Chyby JS Výkon JS JS Reserved Words

Verze JS

Verze JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historie JS

JS objekty

Definice objektů Vlastnosti objektu Objektové metody Zobrazení objektu Objektové přístupové objekty Konstruktory objektů Prototypy objektů Iterovatelné objekty Sady objektů Mapy objektů Reference objektu

Funkce JS

Definice funkcí Funkční parametry Vyvolání funkce Volání funkce Funkce Použít Funkční uzávěry

JS třídy

Úvod do třídy Třídní dědičnost Třída Statická

JS Async

JS zpětná volání JS asynchronní JS Sliby JS Async/Await

JS HTML DOM

Úvod do DOM Metody DOM Dokument DOM Prvky DOM DOM HTML Formuláře DOM DOM CSS DOM animace Události DOM DOM Event Listener Navigace DOM DOM uzly Kolekce DOM Seznamy uzlů DOM

Kusovník prohlížeče JS

Okno JS Obrazovka JS Umístění JS Historie JS JS Navigator Popup Alert JS Časování JS Soubory cookie JS

Webová rozhraní API JS

Úvod do webového rozhraní API Web Forms API Webová historie API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

Úvod do AJAXu AJAX XMLHttp Požadavek AJAX Odpověď AJAX Soubor XML AJAX AJAX PHP AJAX ASP Databáze AJAX Aplikace AJAX Příklady AJAX

JS JSON

Úvod do JSON Syntaxe JSON JSON vs XML Datové typy JSON Analýza JSON JSON Stringify Objekty JSON Pole JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selektory jQuery HTML jQuery jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Příklady JS

Příklady JS JS HTML DOM Vstup HTML JS JS HTML objekty JS HTML události Prohlížeč JS Editor JS Cvičení JS JS kvíz Certifikát JS

JS Reference

Objekty JavaScriptu HTML DOM objekty


Funkce JavaScriptu


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

Funkce JavaScript se spustí, když ji „něco“ vyvolá (zavolá).


Příklad

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

Syntaxe funkce JavaScript

Funkce JavaScriptu je definována functionklíčovým slovem, za nímž následuje název a závorky () .

Názvy funkcí mohou obsahovat písmena, číslice, podtržítka a znaky dolaru (stejná pravidla jako pro 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 definici funkce.

Argumenty funkce jsou hodnoty , které funkce obdrží, když je vyvolána.

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

Funkce je v jiných programovacích jazycích téměř stejná jako procedura nebo podprogram.


Vyvolání funkce

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

  • 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)

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



Funkce Návrat

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

Pokud byla funkce vyvolána z příkazu, JavaScript se „vrátí“ a spustí kód po příkazu vyvolání.

Funkce často počítají návratovou hodnotu . Vrácená hodnota je „vrácena“ zpět „volajícímu“:

Příklad

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

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

Výsledek v x bude:

12

Proč Funkce?

Kód můžete znovu použít: Definujte kód jednou a použijte jej mnohokrát.

Stejný kód můžete použít mnohokrát s různými argumenty, abyste získali různé výsledky.

Příklad

Převést Fahrenheita na stupně Celsia:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Operátor () vyvolá funkci

Pomocí výše uvedeného příkladu toCelsiusodkazuje na objekt funkce a toCelsius()odkazuje na výsledek funkce.

Přístup k funkci bez () vrátí objekt funkce místo výsledku funkce.

Příklad

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

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čtů.

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";

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 pro funkci LOKÁLNÍ .

K místním proměnným lze přistupovat pouze z 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

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.


Otestujte se pomocí cvičení

Cvičení:

Spusťte funkci s názvem myFunction.

function myFunction() {
  alert("Hello World!");
}
;