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

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

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

Profile picture for user Jan Polzer

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 :-)

návštěvník

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í)

návštěvník

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ář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru