JavaScript

V minulém článku jsem sliboval, že bude další, ve kterém najdete návod na jednoduchý carousel vytvořený za pomoci JavaScriptu a CSS transition. Tak tady je. Pokud si na stránce zascrollujete trochu níž a vyhledáte v pravém sloupci "Mikroblog" a "Nejnovější články", tak přesně to bude výsledek. Pokud se vám metoda fade in/fade out nelíbí, v druhé části článku se můžete podívat, jak slider upravit na posuv ze strany na stranu. Jak potom dostat obě metody do jediné funkce, to si můžete zkusit sami; funkce to budou opravdu jednoduché a jejich úprava nebude nijak složitá. JavaScript zde bude ještě jednodušší než styly; takže asi taková bude náročnost. Ale i tak si všechno krok po kroku projedeme. Se vším nám pomůže knihovna jQuery.

CSS vlastnost transition je taková kouzelná formule, kterou můžeme využít nesčetnými způsoby. Zjednodušeně řečeno je to animace. Provede to, co bychom za jiných okolností poslali do jQuery metodě animate. Použití je velice jednoduché, vše si lze pohodlně testovat ve Firebugu. Dnešní článek bude takový úvod, abyste se s vlastností mohli seznámit, pokud ji ještě neznáte. V druhém článku bych pak ukázal využití v praxi: napíšeme si jednoduchý slider (carousel), který rozhýbe pouze změna třídy. Transition má 4 různé vlastnosti, které lze zapsat pod její definici. Povinný je ale pouze čas.

Provádění stylových, grafických či JavaScriptových úprav na webové prezentaci a jejich následné posílání na validaci klientovi by vydalo na samostatný blog, já vám ale dnes ukážu jednoduchý tip, jak těmto situacím co nejvíce předejít. Znáte to: upravíte styl, napíšete, že je hotovo a klient vám obratem odpoví, že není. Tak musíte znovu otevřít mail, napsat mu, aby zmáčknul ctrl+F5 nebo ctrl+R a pak bude to v pořádku. Jenže po jisté době to samozřejmě začne být otravné... Jak tedy donutit prohlížeč aby smazal původní soubor v cache a nahradil ho novým?

Řešení je velice jednoduché. Využijeme GET parametrů tam, kde zdánlivě nic nedělají. Proměnná za otazníkem zpravidla slouží pro skriptovací jazyky a podmíněné zobrazení čehokoli, co v danou chvíli potřebujeme. Co se ale stane, když uvedeme parametr u obrázku či stylu? Prohlížeč takovýto zápis pochopí jako nový soubor, takže nezobrazí jeho starší verzi z cache ale načte ho pěkně znovu.

Spousta webů využívá zobrazení informací v malých pop up oknech. V takovém případě vždy chceme vypsat uživateli zprávu na jasném a viditelném místě. Zarovnání absolutně napozicovaného divu na střed obrazovky může znít jako poměrně jednoduchý úkol, ovšem pokud chceme docílit univerzálního řešení, situace se může trochu zkomplikovat. V dnešním článku bych rád ukázal jednoduchý návod jak na to. Využijeme k tomu knihovny jQuery.

Máme stránku, kde chceme po kliknutí na nějaký odkaz zobrazit box, který překryje obsah a vycentruje se na střed viditelné oblasti. Jak horizontálně, tak vertikálně. Takových elementů může být na stránce více: formulář pro přihlášení, jiný formulář, o pár polí větší, nějaké textové oznámení a vlastně cokoli, co klient zadá. Proto je dobré dopředu počítat s tím, že box nebude mít ani jeden rozměr pevný.

V dnešním článku se budu věnovat JavaScriptu úplně od začátku. Spousta začínajících vývojářů často chybuje v poměrně základních věcech, a tak bych rád uvedl některé z nich na pravou míru. Dodržování těchto pravidel vám pomůže dosáhnout čistého kódu, správné implementace složitých funkcí a naučí vás udržovat si pořádek v šablonách. Kromě tipů na nasazování vlastních či cizích knihoven uvedu i některé rady, jak předejít nepochopitelnému chování, na jehož řešení už bývá většinou pozdě, pokud nastane.

Při studiu a práci s JavaScriptem jsem mnohokrát narazil na situace, kdy mi standardní JavaScriptové funkce nestačily. Řešení v PHP by bylo triviální, ovšem v JavaScriptu dané funkce prostě chyběly. Trochu jsem hledal a narazil na zajímavý projekt phpjs.org, kde jsem objevil rozsáhlou knihovnu PHP funkcí přepsaných do JS. Samozřejmě mi nedalo se o ně nepodělit.

Tak, jako v PHP pracujeme s parametry oddělenými otazníkem a následně ampersandem (&), můžeme v JavaScriptu pracovat s kotvami. Nejčastější využití takzvané kotvy spočívá v odkazu na nadpis či odstavec dále v textu nebo přímý odkaz na aktivní záložku. Pomocí hodnoty kotvy ale můžeme v kódu podmiňovat naprosto cokoli. Tak, jako query string ?arg=value&page=3 splní svůj účel, může pracovat i kotva ve tvaru #arg=value&page=neco. PHP takový řetězec v URL už rozpoznat nedokáže, kdežto JavaScript si z něj umí vzít potřebné hodnoty.