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


Uzávěry JavaScriptu


Proměnné JavaScriptu mohou patřit do místního nebo globálního rozsahu.

Globální proměnné mohou být místní (soukromé) s uzávěrkami .


Globální proměnné

A functionmá přístup ke všem proměnným definovaným uvnitř funkce, takto:

Příklad

function myFunction() {
  let a = 4;
  return a * a;
}

Ale functionmůže také přistupovat k proměnným definovaným mimo funkci, jako je tato:

Příklad

let a = 4;
function myFunction() {
  return a * a;
}

V posledním příkladu je a globální proměnná.

Na webové stránce patří globální proměnné k objektu okna.

Globální proměnné mohou používat (a měnit) všechny skripty na stránce (a v okně).

V prvním příkladu je a lokální proměnná.

Lokální proměnnou lze použít pouze uvnitř funkce, kde je definována. Je skrytý před ostatními funkcemi a jiným skriptovacím kódem.

Globální a lokální proměnné se stejným názvem jsou různé proměnné. Úprava jednoho nemění druhého.

Proměnné vytvořené bez klíčového slova deklarace ( var, let, nebo const) jsou vždy globální, i když jsou vytvořeny uvnitř funkce.

Příklad

function myFunction() {
  a = 4;
}


Variabilní životnost

Globální proměnné fungují, dokud není stránka zahozena, například když přejdete na jinou stránku nebo zavřete okno.

Místní proměnné mají krátkou životnost. Jsou vytvořeny, když je funkce vyvolána, a odstraněny, když je funkce dokončena.


Protidilema

Předpokládejme, že chcete použít proměnnou pro počítání něčeho a chcete, aby byl tento čítač dostupný pro všechny funkce.

functionPro zvýšení počítadla můžete použít globální proměnnou a a :

Příklad

// Initiate counter
let counter = 0;

// Function to increment counter
function add() {
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The counter should now be 3

S výše uvedeným řešením je problém: Libovolný kód na stránce může změnit počítadlo bez volání add().

Čítač by měl být pro add()funkci lokální, aby se zabránilo tomu, že jej změní jiný kód:

Příklad

// Initiate counter
let counter = 0;

// Function to increment counter
function add() {
  let counter = 0;
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 0

Nefungovalo to, protože místo místního počítadla zobrazujeme globální počítadlo.

Globální počítadlo můžeme odebrat a získat přístup k místnímu počítadlu tím, že necháme funkci, aby jej vrátila:

Příklad

// Function to increment counter
function add() {
  let counter = 0;
  counter += 1;
  return counter;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 1.

Nefungovalo to, protože jsme při každém volání funkce resetovali místní počítadlo.

 Vnitřní funkce JavaScriptu to může vyřešit.


Vnořené funkce JavaScriptu

Všechny funkce mají přístup ke globálnímu rozsahu.  

Ve skutečnosti v JavaScriptu mají všechny funkce přístup k rozsahu „nad“ sebou.

JavaScript podporuje vnořené funkce. Vnořené funkce mají přístup k rozsahu „nad“ nimi.

V tomto příkladu má vnitřní funkce plus()přístup k counterproměnné v rodičovské funkci:

Příklad

function add() {
  let counter = 0;
  function plus() {counter += 1;}
  plus();   
  return counter;
}

To by mohlo vyřešit dilema čítače, pokud bychom se k plus() funkci dostali zvenčí.

Musíme také najít způsob, jak provést counter = 0pouze jednou.

Potřebujeme uzavření.


Uzávěry JavaScriptu

Pamatujete na samovolné funkce? Co tato funkce dělá?

Příklad

const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

// the counter is now 3

Příklad vysvětlen

Proměnná addje přiřazena k návratové hodnotě samovolné funkce.

Samovolná funkce se spustí pouze jednou. Nastaví čítač na nulu (0) a vrátí výraz funkce.

Tímto způsobem se add stane funkcí. "Úžasná" část je, že má přístup k čítači v nadřazeném oboru.

Tomu se říká uzavření JavaScriptu. Umožňuje funkci mít " soukromé " proměnné.

Počítadlo je chráněno rozsahem anonymní funkce a lze jej změnit pouze pomocí funkce add.

Uzavření je funkce, která má přístup k nadřazenému oboru, i když se nadřazená funkce zavře.