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

Často se setkávám s tím, že tvůrci webů na WordPressu nebo Drupalu vytvářejí složitá řešení, která lze přitom elegantně zpracovat pomocí jQuery. Jenže nevědí, jak na to. Rozhodl jsem se na Maxiorlovi začít nový seriál, který vás formou videonávodů jQuery naučí. Nebo se alespoň pokusí vám ukázat jeho základy.

Reklama

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

Reklama

Komentáře

Zdravim, rad bych okomentoval video, bohuzel jej uzivatel odstranil... :)

Už je v pořádku, nahrálo se mi původně jenom šest minut, takže podstatná část jej chyběla. Smazal jsem a nahrál znovu, omlouvám se za amatérismus :-)

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Díky za nápad s tímto kurzem.
Všeobecně mi přijde, když se nyní člověk chce pustit do něčeho co není novinka hledá se mu těžko základní kurz, protože většina již staví na něčem předchozím. Váš způsob vysvětlování je mi sympatický (pravda někdy již něco vím, ale kdybych nevěděl vše se dozvím). Ještě jednou díky, určitě kurzy prohlédnu a přiučím se...
Každopádně jen houšť a větší kapky a mnoho uživatelů Vám bude vděčných (ikdyž to třeba hned někde nezmíní)

Děkuji za podporu. Zítra všechny čeká druhý díl.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Jasný a přehledný tutoriál a hlavně v češtině. Děkuji a těším se na další pokračování. :-)

Přidat komentář