Základy JavaScriptu

Kontrola zda je proměnná definovaná.

Použití této kontroly se v mnoha případech hodí. Stačí mít jednu proměnnou v určitém případě nedefinovanou a již Vám přestane fungovat celý zbytek skriptu.

Jak uložit vyplněný obsah formuláře při odchodu.

localStorage, WebStorage

Nejsnadnějším a zároveň nejvíce podporovaným řešením je WebStorage, kde máte na výběr ze dvou řešení. A to buď trvalé úložiště (localStorage), nebo úložiště založené na session (sessionStorage). "sessionStorage" funguje tak, že data jsou uložena v paměi do uzavření prohlížeče.

Obě řešení využívají stejné API.

Plynulý posuv k prvku přez jQuery

kotva přez jQuery

Posuv k nějakému prvku stránky lze realizovat využitím pouhého HTML, ale nemůžete si nastavit rychlost posovu, trajektorii atd... Pokud chcete docílit těchto vlastností, tak již je nutné použít javascript (respektive jQuery). Běžně si stáhnete nějaký zbytečně velký soubor, hledáte jak to funguje a pak to realizujete.

Je ale i jednoduší cesta a to krátký kousek skriptu.

Klik mimo prvek provede událost

Jak docílit toho, že například na klik vysunete menu a chcete, aby klik mimo ně je zasunul? Detekce kliku na "body" ci "html" situaci neřeší, protože v nich je i menu. Klik pouze na nějaký blok s obsahem? To je nedostačující v mnoha případech bude třeba ošetřit více prvků. Tudíž jak na to?

Klíčem k této činnosti je jQuery funkce "closest", která reaguje právě na klik mimo nějaký prvek/element.

Jak středit vertikálně blok s nepevnou výškou?

Středit text či obrázek vertikálně není složité a je na to mnoho postupů. Ať již "line-height", "vertival-align", či třeba pomocí absolutní pozice. Pokud, ale středíme celý blok tak nám výše zmíněné postupy nepomohou. Absolutní pozicování skončí u situace, kdy nemůžeme určit jak vysoký bude středěný blok.

Jediná cesta je použít krátký jQuery skript.

Jak zistit rozměry stránky?

Jak na datepicker v generovaném obsahu webu?

jQuery UI, datepicker, kalendář

Pokud nasadíte kalendář (neboli datepicker z knihovny jQueryUI), tak ve většině případů je vše v pořádku. Tudíž si jen kalendář dostylujete a donastavíte a vše je jak má. Co když daný kalendář má fungovat i na inputu, který Vám vygeneruje nějaký jQuery script? Kelndář Vám bude fungovat na inputech co byly v rámci stránky po načtení, ale na těch vygenerovaných po načtení již ne.

Jak povolit uživateli psát do inputu pouze čísla?

Nutnost vynucení psaní pouze čísel do daného inputu frmuláře je zřejmá. Pokud chceme, aby nám uživatel zadal například "počet dětí", či "počet kusů zboží" atd.. tak očekáváme číselnou hodnotu a ne text.

Jak detekovat, že uživatel dopsal svůj text v inputu?

Po dopsání do inputu proveď něco (v příkladu console.log). Trik je v čekání po kliku na klávesu po dobu 1s pokud se 1s nic nestane, tak nastane část kódu v delay (= pauze) a to v tomto případě "console.log".

Zisk hodnot pouze zvolených checkboxů

V mnoha případech se stane, že máte velkou skupinu checkboxů a potřebujete vědět jaké z nich uživatel zvolil. Jako jeden z příkladů uvedu validaci formuláře (například potřebujete zvolené alespoň 2 checkboxy, či právě nějaké checkboxy).