Video-Tutorial: Učení JavaScriptu a jQuery

Srdečně vítáme na kurz JavaScriptu a jQuery.

V tomto videu bude vysvětleno, co je JavaScript a co nám přináší.

V tomto videu se dozvíš, jaký editor budeme používat, a nainstalujeme si ho společně.

V tomto videu je ukázáno, jak se používají kliknutí pomocí JavaScriptu a jak fungují proměnné.

Příkaz If. If (přeloženo: pokud) je velmi často používán při programování. Například, pokud chceme něco provést pouze tehdy, když je splněna určitá podmínka.

V tomto videu jde o pole (arrays) v JavaScriptu. Umožňují nám uchovávat více informací v rámci jedné proměnné.

V tomto videu se naučíš poznat cykly typu For-Loop. Ty nám umožňují spustit určitý kód opakovaně za sebou.

Funkce jsou druhem miniprogramu, který můžeme kdykoliv použít poté, co jsme ho vytvořili. Pokud například stisknete domovské tlačítko na vašem mobilním telefonu, bude zavolána funkce, která vás vrátí zpět na domovskou obrazovku. Funkce tak výrazně usnadňují práci.

Zde bude zobrazen výsledek výzvy (konkrétně kvíz) a zároveň bude vytvořena HTML základna.

Zde se programuje CSS (vzhled) kvízu.

Zde je programován a vysvětlen JavaScript našeho kvízu.

Už jsi viděl, jak fungují funkce s jedním parametrem. Nyní se podíváme na funkce s více parametry. Více parametrů je tam, když chceme použít funkci s různými proměnnými. V matematice například při sčítání více hodnot.

Existují globální a lokální proměnné. Stručně řečeno: Globální proměnné jsou ty, které vytváříme mimo funkce, a lokální proměnné jsou ty, které vytváříme uvnitř funkcí. Tady si podrobněji probereme, jak to funguje.

V programovacích jazycích existuje možnost vytvářet funkce tak, aby měly nějakou návratovou hodnotu. Dosud jsme měli pouze funkce, které jen vykonávaly nějakou činnost, ale nevracely nic, s čím bychom mohli dále pracovat. Proto se teď podíváme na RETURN.

V tomto článku se budeme zabývat matematickými operátory a přiřazovacími operátory. Matematické operátory jsou poměrně jednoduché věci jako sčítání, odčítání atd., u přiřazovacích operátorů jde o možnost relativně snadno provádět jednoduché operace jako například zvýšení o 5. Protože je obojí důležité v programování, budou v tomto článku obě témata zpracována.

Existují tři (nebo čtyři) různé typy smyček při programování: smyčka Do-while-, While- a For-smyčka. For-smyčku jsme již poznali. Nyní se podíváme na smyčku Do-while- (řízenou nohou) a While-smyčku (řízenou hlavou).

V tomto článku jde o alternativu k podmínkám If. Jedná se o Switch (Přepínač) a Case (Případ). Máme tedy prakticky přepínač, který přepíná mezi různými případy a zůstává u toho, který je aktivní.

Jsme se již zabývali polem, ale nesli jsme do detailů. Je tu o polích mnoho věcí k objevení. Nejdůležitější vlastností JavaScriptového pole je počet prvků (length). Pole má ale i další vlastnosti jako například index, který nám poskytuje informace o pozici 0 v poli.

Objekty jsou extrémně důležitým a zajímavým konceptem v mnoha programovacích jazycích. V zásadě lze popsat všechno jako druh objektu. Vezměme si například objekt, který obvykle vidíme na silnicích: AUTO. Auto má určité vlastnosti a může provádět určité akce.

Podívejme se, jak můžeme vytvářet objekty v JavaScriptu. K tomu vytvoříme konstruktorovou funkci a dvě instance našeho objektu v našem záhlaví. Uvnitř konstruktorové funkce, která má stejné jméno jako náš objekt, řekneme programu, že parametry předané konstruktorové funkci při vytváření instance objektu mají být právě hodnotami objektu.

Jako základ pro funkce objektů začneme s kódem z posledního tutoriálu, kde jsme vytvořili proměnné, které jsou vytvořeny s každou instancí našeho objektu.

V tomto tutoriálu se naučíš poznat objekt Math. Jedná se o objekt, který vychází z třídy Math a přináší spoustu skvělých vlastností a funkcí.

V tomto videu jde o objekt Date nebo o třídu Date. Jedná se o objekty, které lze použít k zařazení času do programu. Nemusí jít nutně o aktuální čas nebo datum, ale může to být i časový interval. Objekt Date obsahuje čas, který uplynul od okamžiku 1970-01-01 00:00:00. Existuje několik možností, jak předat parametry konstruktoru Date.

V tomto videu se naučíte, jak postavit interaktivní hodiny s JavaScriptem.

V tomto videu jde o dědičnost a polymorfismus. Dva koncepty objektově orientovaného programování.

V tomto článku se budeme zabývat otázkou: Co je jQuery? jQuery je knihovna napsaná v JavaScriptu, která nám umožňuje vytvářet ještě chytřejší webové stránky.

Zde se dozvíš, jak ještě snadněji zpracovávat kliknutí pomocí jQuery.

V tomto tutoriálu se naučíte, jak můžete změnit vzhled webové stránky pomocí jQuery. K tomu můžeme například snadno přepsat atribut pole. V tomto příkladu můžeme změnit odkaz v iframe (tedy src/source), když se pohybujeme přes obdélník. Kód by šlo snadno změnit a například zvětšit obdélník tak, že by přepsal atribut Height a Width, když nad ním přejíždíme. Obecně se tento postup nyní dá použít k úpravě vzhledu webové stránky bez problémů.

Jednou z cool funkcí jQuery je zahalení prvku. V tomto příkladu zastíníme tlačítko, jakmile klikneme na jiné tlačítko. K tomu používáme funkci FadeOut. Pro zobrazení prvku poté použijeme funkci FadeIn.

V tomto videu se budeme zabývat animací v jQuery. Jedná se o něco, co se pohybuje. Takže se postaráme o to, aby se prvek na našem webu pohyboval/změnil. K tomu slouží funkce v jQuery. Ta se nazývá animate() a očekává tři parametry.

Podívejme se, co to je jQuery UI.

Akkordeon je widget, který nám umožňuje vidět pouze určité části celku, podobně jako u akordeonu. To je zvláště užitečné, pokud chceme předat mnoho informací, ale jako velký text by byly příliš nejasné.

V tomto tutoriálu jde o třídění v jQuery UI. Jedná se o tříděné prvky. To znáš, pokud používáš produktivní webové stránky jako Wunderlist nebo Trello. Možnost třídění prvků je extrémně skvělá funkce, kterou můžeš používat v mnoha různých aplikacích.

Občas se stane, že chcete umožnit uživateli změnu velikosti prvku. Pak jsou to přesně Resizables. Ty totiž umožňují právě to. Úplně dole vpravo u prvku uvidíte malý trojúhelník, který můžete kliknout a pak, když držíte myš, můžete tento prvek zvětšit nebo zmenšit.

V jQuery UI je možné snadno vytvořit prvek pomocí Draggaables, který lze táhnout sem a tam. Jak na to, podívejme se zde.

Progressbary nebo lištové ukazatele jsou skvělým způsobem, jak uživateli sdělit, jak daleko je právě v konkrétním procesu. Například v procesu nákupu v online obchodě nebo při průzkumu to pomáhá uživateli vědět, jak daleko je s provedením kroků.

V tomto tutoriálu bych rád stručně hovořil o efektech v jQuery UI. Skutečně tu jsou úžasné efekty, které ti umožní ještě více vylepšit vzhled tvých webových stránek a navíc úplně ohromit tvé uživatele.

V tomto videu uvidíte výsledek výzvy. Stránka s často kladenými otázkami.

Zde převádíme stránku s často kladenými otázkami.

V tomto videu bude představena hra pro mozek, která bude naprogramována v této kapitole.

Nejprve se postaráme o strukturu a vzhled hry.

Nyní se budeme zabývat některými funkcionalitami hry.

Hráč již může provádět první akce ve hře, nyní se ale postaráme o to, aby bylo možné správně znovu spustit a ukončit hru.

Nyní jde pouze o to začlenit časovač do hry, aby se správně vypočítaly body a hra byla omezena časově. Kromě toho provedeme ještě pár dalších menších kroků, abychom hru dokončili.

Zde bude představena aplikace z tohoto kapitoly. Jedná se o aplikaci/webovou stránku pro seznam úkolů.

Nyní vytvoříme základ a podíváme se, jak můžeme vytvořit a upravit příslušné téma pomocí jQuery Mobile.

Protože sledujeme objektově orientovaný přístup, musíme vytvořit odpovídající architekturu. O to se postaráme zde.

V tomto videu přidáme stránky a postaráme se o stránku, na které budeme vytvářet úkoly.

Podobně jako stránka pro tvorbu, i stránka pro úpravu musí být vyplněna a získat odpovídající funkcionalitu.

Nyní se můžeme znovu zaměřit na architekturu a vytvořit datovou strukturu.

Máme-li nyní naši datovou strukturu, můžeme ji poměrně snadno zavolat v našem uživatelském rozhraní.

Při programování bylo nutné provést několik kroků v „vysvětlovacím toku“, které nyní můžeme opravit. Navíc se budeme starat o trvalé ukládání dat a dokončíme aplikaci.