jQuery pro začátečníky: jak na manipulaci s prvky webové stránky

23xdhlo0em5-janpolzer.jpg

Jan Polzer

Předávání znalostí ostatním mě provází celý můj profesní život. Ať už se v průběhu let název mého zaměstnání měnil jakkoli, vždy jsem měl něco společného se školením. Začínal jsem v roce 2001 jako běžný ajťák a Více o lektorovi »

23xdhlo0em5-janpolzer.jpg

Jan Polzer

Předávání znalostí ostatním mě provází celý můj profesní život. Ať už se v průběhu let název mého zaměstnání měnil jakkoli, vždy jsem měl něco společného se školením. Začínal jsem v roce 2001 jako běžný ajťák a Více o lektorovi »

9upcnvupmtb-jquery.png
Jakuba Obrovského 21, Brno (mapa)

už jen 2 účastníci a kurz se uskuteční

Zbývá 6 míst

Nevyhovuje ti termín?

Nech nám svůj e-mail – dáme ti vědět, jakmile lektor vypíše nový termín.

Bez JavaScriptu se v současnosti neobejdou skoro žádné webové stránky. Jakkoli jsou základy tohoto jazyka jednoduché, proniknout do jeho hlubší úrovně zabere určitý čas. Jsem přesvědčen, že začátečníkovi stačí, aby se naučil především manipulovat s tzv. DOM. Tedy s prvky na webové stránce, jako jsou odkazy, tlačítka a jiné elementy. Nařídíte jim po kliknutí reagovat tím, že něco jiného na stránce změní, aniž by se znovu načítala.

Typicky potřebujete na mobilním zobrazení webu ukázat menu po stisku tlačítka s ikonkou. Podobně například hledací políčko. U formulářů se často hodí, pokud se méně často používaná políčka objeví až na základě jiné volby. Určitě jste někdy nakupovali v eshopu, kde byla dodací adresa ukrytá do doby, než jste řekli, že není shodná s fakturační. Při kódování vizuální stránky budete potřebovat měnit CSS třídy podle hodnot v některých prvcích. Ukrývat části stránky a jindy je zobrazovat.

Na kurzu proto začneme naprostými základy JavaScriptu, naučím vás, co jsou proměnné, jak s nimi operovat, jak pracovat s čísly a s řetězci. Vyzkoušíte si podmínky a smyčky. Začnete používat konzoli webového prohlížeče a uvidíte, jak vám usnadní práci s JavaScriptem. Názorně si ukážeme, jaký je rozdíl mezi DOM a zdrojovým kódem stránky.

Poté si ukážeme, jak zapojit do hry knihovnu jQuery, tedy hlavní téma kurzu. jQuery vám usnadní manipulace s prvky na webové stránce i řadu dalších činností, které budete s JavaScriptem provádět. Právě obsluhu různých interaktivních prvků a změnu toho, jak je stránka (její DOM) poskládána, budeme trénovat ze všech možných stran. Mám pro vás připraveny ty nejčastější scénáře použití jQuery.

V závěru kurzu si vyzkoušíme zapojení doplňkových JavaScriptových knihoven, které jQuery využívají. Podíváme se krátce na alternativy a na možnost zápisu některých věcí v čistém JavaScriptu.

Osnova školení základů jQuery

Základy JavaScriptu

  • K čemu JavaScript slouží, JavaScript vs. Java vs. ECMAScript vs. jQuery
  • DOM vs. HTML kód stránky
  • Vložení JavaScriptu do těla stránky
  • Vhodné bezplatné editory a jiné nástroje
  • Ladění JavaScriptu na stránce, konzola webového prohlížeče
  • Proměnné, smyčky, podmínky

Základy jQuery

  • Připojení jQuery do těla stránky
  • Selektory jako v CSS
  • Obsluha kliknutí na tlačítko
  • Změna CSS třídy

Praktická cvičení s jQuery

  • Komplikovanější selektory
  • Práce s nadřazenými prvky a potomky
  • Dědění událostí
  • Přesuny prvků ve struktuře stránky
  • Klonování, skrývání, mazání, vytváření prvků, CSS vlastnosti
  • Práce s rozměry, skrolování
  • Odeslání formuláře bez znovunačtení stránky

Rozšíření jQuery a další knihovny

  • Slajdy a carousely
  • Tooltipy
  • Dialogy
  • Mapy na webu
  • Pár slov k jQuery ve WordPressu a Drupalu (bude-li zájem)

Alternativy k jQuery

  • Výhody a nevýhody jQuery
  • Alternativní knihovny
  • Jak si vystačit s čistým JavaScriptem

Průběh kurzu

Pokud se máte jako účastníci mého školení jQuery něco naučit, je třeba to hned prakticky vyzkoušet a až poté si udělat poznámky. A klidně potom zkusit znovu obdobný příklad. Nebudeme tedy jen promítat teoretické slajdy s připravenými screenshoty nějakého kódu v editoru, ale vše si spolu vyzkoušíme naživo. Když nastane problém, vyřešíme jej a teprve poté se posuneme dále. Živých ukázek se nebojím.

Praktická cvičení začneme na připraveném základním HTML. Pokud se nebudete stydět, podíváme se poté na aplikaci jednotlivých příkladů do vašeho konkrétního projektu.

Školení základů jQuery potrvá okolo pěti hodin, v závislosti na dotazech účastníků. Maximální počet účastníků omezuji na šest, tak abych se mohl dostatečně věnovat individuálním potřebám každého z vás.

Pro koho je toto školení jQuery určeno

Kurz je koncipován tak, aby ukázal základy práce s JavaScriptem a výhody použití jQuery začínajícím tvůrcům webu. Velice vhodný je i pro ty z vás, kdo máte za sebou třeba několik projektů v různých redakčních systémech, ovládáte CSS i základy HTML, ale potřebujete web nějak oživit. Zjistíte, že s troškou JavaScriptu a jQuery se dá mnohdy obejít i bez instalace různých modulů a pluginů.

Pro toto školení je však třeba rozumět základům HTML. Hlubší znalosti CSS nejsou potřeba, ale je vhodné, abyste dovedli napsat selektor pro nějaký prvek na stránce, neboť s nimi budete pracovat i v jQuery. Jinými slovy, pokud rozumíte tomuto zápisu, nebudete mít problém: ul.menu li.active a{ color: #0066cc; } Beru samozřejmě na zřetel, že ne každý je specialista na CSS a případné složitější zápisy selektorů v kurzu probereme.

Kdo vás jQuery naučí

Jsem profesionální tvůrce webů na volné noze. Již 13 let mě tato práce živí, začal jsem s ní ještě o něco dříve. Stavím webové stránky s redakčními systémy Drupal a WordPress, ale i různé webové aplikace šité na míru. Pracuji s PHP, JavaScriptem, jQuery, HTML5 a řadou současných moderních webových technologií.

Kromě toho už od roku 2001 pravidelně školím, buď svým jménem nebo na kurzech a přednáškách třetích stran. Mám radost, pokud mohu předat něco ze svých znalostí dále. Můj životopis a přehled realizovaných projektů je k nalezení na www.polzer.cz.

Co si vzít s sebou

Notebook a dobrou náladu. Připojení k internetu přes Wi-Fi, drobné občerstvení, pití, kávu a elektrickou energii dodám.

Doprovodné fotky

  • 1nz50k6g0kb-seo-polzer.jpg

Odebírej náš newsletter

Posíláme tipy na nové kurzy, zajímavé a přínosné články a informujeme o dění a vývoji projektu Naučmese.