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

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é se pustíme do praktických příkladů. Osvojíte si 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í JavaScriptu na webové stránce.

V závěru kurzu si vyzkoušíme zapojení doplňkových JavaScriptových knihoven. Podíváme se krátce na alternativy. Zrekapitulujeme získané znalosti tak, abyste byli schopni zpracovat domácí úkol – jednoduché online pexeso.

Osnova školení základů JavaScriptu

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

Použití JavaScriptu

• Selektory jako v CSS
• Obsluha kliknutí na tlačítko
• Změna CSS třídy

Praktická cvičení

• 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

Využití doplňkových knihoven

• Slajdy a carousely
• Tooltipy
• Dialogy
• Mapy na webu

Průběh kurzu

Pokud se máte jako účastníci mého školení JavaScriptu 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ů JavaScriptu 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í JavaScriptu určeno

Kurz je koncipován tak, aby ukázal základy práce s JavaScriptem 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 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. 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 JavaScript naučí

Jsem profesionální tvůrce webů na volné noze. Již 16 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.