Série videonávodů o jQuery začíná

Moje idea je taková, že ve formě krátkých, zhruba čtvrthodinových kurzů, se postupně podíváme na různé aspekty práce s jQuery. Na výběr prvků pomocí různých selektorů, na přiřazení událostí, na manipulace s prvky na stránce atd. Osnova na několik prvních dílů seriálu je připravena, jeho další směr bude záviset na vašich ohlasech a podnětech.

V ukázkách budu pracovat s editorem JSBin, který mi připadá jako vhodné řešení nejenom pro výklad dané látky, ale také pro následné sdílení kódu, který si můžete sami dále upravovat.

Seriál je určen především pro začátečníky s JavaScriptem a jQuery. Předpokládám alespoň základní zkušenosti s tím, jak vytvořit HTML stránku a pracovat v ní se styly CSS. Zápisy selektorů jsou totiž v CSS a jQuery velice podobné.

Nebudu zabíhat do podrobností JavaScriptu obecně. V prvním dílu seriálu se jen podíváme na výpis informací do konzoly, na podmínky, smyčky a skončíme naprosto jednoduchou ukázkou jQuery, konkrétně zobrazováním a ukrýváním prvku po kliknutí na tlačítko.

Cvičení k videu

Každý díl seriálu zakončím sadou úkolů pro cvičení probrané látky. Pro tento první díl jsou to následující:

1. Přidejte do dokumentu další tlačítko s jinou třídou a doplňte jeho obsluhu v jQuery tak, aby pomocí alert() zobrazilo platformu, na které běží webový prohlížeč.
2. Vyzkoušejte si spojování řetězců. Do alert() můžete vložit text "Běžíte na", tedy včetně uvozovek, následovaný symbolem + a zápisem pro zjištění platformy, který je ukázán ve videu.
3. Přidejte tlačítko, které zobrazí nebo ukryje všechny odstavce. Místo selektoru třídou je možné zapsat rovnou značku p, tak jako v CSS. Ve výsledném dokumentu pak vyzkoušejte, co se děje, když jednou stisknete tlačítko z návodu a následně toto nově přidané.

Pokud si nebudete vědět rady a bude vás ve zvládnutelném množství, pošlete odkaz na svůj JSBin do komentářů. Stejně tak uvítám vaše názory na toto video.

Kód k tomuto videu najdete na adrese http://jsbin.com/hajihah/edit?html,js,console,output