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


JavaScript pro smyčku


Smyčky mohou provést blok kódu několikrát.


JavaScript smyčky

Smyčky jsou užitečné, pokud chcete spouštět stejný kód znovu a znovu, pokaždé s jinou hodnotou.

Často se tak děje při práci s poli:

Místo psaní:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Můžeš psát:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Různé druhy smyček

JavaScript podporuje různé druhy smyček:

  • for - několikrát projde blok kódu
  • for/in - prochází vlastnosti objektu
  • for/of - prochází hodnoty iterovatelného objektu
  • while - prochází blok kódu, když je zadaná podmínka pravdivá
  • do/while - také prochází blokem kódu, když je zadaná podmínka pravdivá

Smyčka For

Cyklus formá následující syntaxi:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Příkaz 1 se provede (jednou) před provedením bloku kódu.

Příkaz 2 definuje podmínku pro provedení bloku kódu.

Příkaz 3 se provede (pokaždé) po provedení bloku kódu.

Příklad

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Z výše uvedeného příkladu můžete vyčíst:

Příkaz 1 nastavuje proměnnou před začátkem cyklu (ať i = 0).

Příkaz 2 definuje podmínku pro běh smyčky (i musí být menší než 5).

Příkaz 3 zvyšuje hodnotu (i++) pokaždé, když byl proveden blok kódu ve smyčce.



Prohlášení 1

Normálně použijete příkaz 1 k inicializaci proměnné použité ve smyčce (ať i = 0).

Není tomu tak vždy, JavaScriptu je to jedno. Příkaz 1 je nepovinný.

V příkazu 1 můžete iniciovat mnoho hodnot (oddělených čárkou):

Příklad

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

A můžete vynechat příkaz 1 (jako když jsou vaše hodnoty nastaveny před začátkem cyklu):

Příklad

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

prohlášení 2

Příkaz 2 se často používá k vyhodnocení podmínky počáteční proměnné.

Není tomu tak vždy, JavaScriptu je to jedno. Příkaz 2 je také volitelný.

Pokud příkaz 2 vrátí hodnotu true, cyklus začne znovu, pokud vrátí hodnotu false, cyklus skončí.

Pokud vynecháte příkaz 2, musíte zadat přerušení uvnitř smyčky. Jinak smyčka nikdy neskončí. To způsobí zhroucení vašeho prohlížeče. Přečtěte si o přestávkách v další kapitole tohoto návodu.


Prohlášení 3

Příkaz 3 často zvyšuje hodnotu počáteční proměnné.

Není tomu tak vždy, JavaScriptu je to jedno a příkaz 3 je volitelný.

Příkaz 3 může dělat cokoliv jako záporný přírůstek (i--), kladný přírůstek (i = i + 15) nebo cokoli jiného.

Příkaz 3 lze také vynechat (jako když zvyšujete hodnoty uvnitř smyčky):

Příklad

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Rozsah smyčky

Použití varve smyčce:

Příklad

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Použití letve smyčce:

Příklad

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

V prvním příkladu pomocí var, proměnná deklarovaná ve smyčce znovu deklaruje proměnnou mimo smyčku.

Ve druhém příkladu pomocí let, proměnná deklarovaná ve smyčce znovu nedeklaruje proměnnou mimo smyčku.

Když letse použije k deklaraci proměnné i ve smyčce, proměnná i bude viditelná pouze v rámci smyčky.


Smyčky For/Of a For/In

Smyčka for/ina for/ofsmyčka jsou vysvětleny v další kapitole.


Zatímco smyčky

Smyčka whilea do/whilejsou vysvětleny v dalších kapitolách.


Otestujte se pomocí cvičení

Cvičení:

Vytvořte smyčku, která běží od 0 do 9.

let i;
 ( = ;  < ; ) {
  console.log(i);
}