Moderní tvorba webových aplikací

O webu

JavaScript

JavaScript (zkratka JS) je programovací jazyk, který nejčastěji běží přímo v prohlížeči návštěvníka.

Používá se zejména k modifikaci obsahu bez nutnosti komunikace se serverem (technologie AJAX) a pro různé visuální efekty jako jsou plynulé animace a podobně, které ale postupně nahrazuje CSS.

JS může běžet i na serveru, ale zatím tento postup není tolik rozšířen.

Časovače v JavaScriptu

Jaké nabízí JavaScript možnosti pro vytváření animací. A jak docílit toho, aby byly plynulé.

15 minut

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Sdílení stránky přes Web Share API

Web Share API nabízí možnost sdílet odkaz na stránku nebo soubor přes rozhraní prohlížeče/systému.

5 minut

Query string v URL

Řetězec dotazu je část URL za otazníkem obsahující nejrůznější parametry.

10 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Výpis náhodného textu

Jak na stránce náhodně vypsat obrázek, odkaz, reklamu, text nebo cokoliv jiného.

5 minut

13 důvodů, proč má web fungovat bez JavaScriptu i v roce 2025

JavaScript je sice klíčový pro moderní web, ale jeho selhání není výjimkou. Zde je 13 důvodů, proč by měl web fungovat i bez něj.

8 minut

Jak funguje TanStack Query

TanStack Query elegantně řeší práci s daty stahovanými přes API.

8 minut

Parsování HTML v JavaScriptu

Jak v klientském i serverovém JS parsovat a upravovat HTML kód.

7 minut

Získání unikátní barvy pro text v JS

Jak pro libovolný řetězec spočítat unikátní barvu.

3 minuty

JS podmínka v objektu

Jak v JavaScriptu zapsat podmínku uvnitř objektu.

2 minuty

Build jednoduchého JS pro staré prohlížeče

Jak zajistit transformaci jednoduchého JavaScriptu i pro staré prohlížeče jako IE 11.

6 minut

Rozdělování Vite/Rollup buildu do chunků

Jak rozdělit build aplikace do souborů, aby byla co nejrychlejší.

7 minut

Odstranění nepoužívaných překladů ve Vue.js

Jak ve Vue.js automaticky udržovat překlady očištěné o nepoužívané klíče.

5 minut

Offline stránka v PWA přes ServiceWorker

Jak udělat web fungující offline. A splnit tak požadavky na PWA.

12 minut

VisualViewport API

VisualViewport API umožňuje v JS lépe reagovat na velikost viewportu a jeho změny.

4 minuty

Vite – super rychlý dev server / build

Vite je nástroj pro neuvěřitelně rychlý dev server, hot reload a build JS/CSS.

8 minut

Kopírování/klonování objektů v JS

Jak správně a úspěšně zkopírovat objekt v JavaScriptu.

6 minut

Recense: Vzhůru do AMP

Má smysl používat AMP, nebo je to úplná blbost?

6 minut

Rozdíl mezi var a let v JS

Jaký je v JavaScriptu rozdíl mezi deklarováním proměnných přes var a let.

7 minut

Zadávání kalendářního data

Pohodlné zadávání kalendářního data ve formulářích.

5 minut

Vytisknutí stránky

Jak správně připravit webovou stránku pro pohodlné vytištění.

11 minut

Přepínání tříd v JS

Přepínání, přidávání a odebírání CSS tříd JavaScriptem.

6 minut

Media queries v JavaScriptu

Jak v JavaScriptu používat @media pravidla jako v CSS.

6 minut

Navázání událostí v JavaScriptu

Jaké existují postupy pro navěšení JavaScriptové události na element. Výhody a nevýhody různých řešení.

5 minut

Zjištění rozměrů stránky

Jak v JavaScriptu zjistit šířku a výšku rozlišení obrazovky, velikost dostupné plochy (tzv. viewport) nebo rozměry elementu.

5 minut

HTML/CSS/JS identifikátor id

K čemu se hodí identifikátor, kdy ho používat a jaké znaky může obsahovat.

5 minut

Rozpoznávání hlasu

Jak psát na web převodem hlasu na text pomocí speechRecognition.

6 minut

Vlastní hláška alert

Jak si v JavaScriptu vytvořit vlastní hlášky jako je výchozí alert.

4 minuty

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

6 minut

Parsování URL v JavaScriptu

Jak elegantně parsovat adresy webových stránek v JavaScriptu.

4 minuty

Automatická výška <textarea>

Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.

4 minuty

Co je to localForage?

K čemu slouží a jak se používá localForage úložiště.

2 minuty

Upload obrovských souborů v JS/PHP

Jak umožnit návštěvníkům nahrát soubory jako videa v řádech MB/GB s progress barem.

7 minut

Otevření 2 stránek jedním odkazem

Jak jedním odkazem otevřít dvě různé stránky.

3 minuty

Úprava textu stránky pomocí designMode

Jednoduchý bookmarklet pro okamžité přepsání libovolného textu na stránce.

1 minuta

Indexování JavaScriptu

Jak se vyhledávače Google a Seznam vypořádají s obsahem v JavaScriptu. Dokáží takový obsah indexovat?

5 minut

Zjištění barvy obrázku

Jak v JavaScriptu i PHP zjistit hlavní barvu obrázku.

4 minuty

Výpočet průměru a mediánu v PHP/JS

Jak v jazyce PHP nebo v JavaScriptu spočítat medián.

4 minuty

Připojení JavaScriptu s async a defer

Různé způsoby připojení JavaScriptu na stránku, aby se nezdržovalo načítání stránky.

11 minut

JSON

JSON je universální formát pro ukládání dat. Jak ho používat?

8 minut

HTML <canvas>

Canvas je HTML značka pro kreslení v prohlížeči pomocí JavaScriptu.

6 minut

Uvozovky v HTML, CSS, JS, PHP, SQL

Jak správně používat uvozovky v HTML, CSS, JavaScriptu, PHP a MySQL.

12 minut

Uložení stavu před opuštěním stránky

Jakým způsobem uložit stav aplikace/formuláře před opuštěním stránky.

7 minut

Generování PDF

Vytváření PDF dokumentů v JavaScriptu a PHP.

4 minuty

Změna stylů JavaScriptem

Jak JavaScriptem nastavovat CSS pro změnu vzhledu jednotlivých elementů.

4 minuty

Co je to polyfill?

Polyfillem se rozumí automatické alternativní řešení, které dokáže zajistit funkčnost něčeho nepodporovaného.

4 minuty

Umístění kursoru v poli

Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.

3 minuty

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

7 minut

Vykonání JS načteného AJAXem

Jak provést JavaScript, který je ve stránce načítané AJAXem.

4 minuty

Cookies

Kdy cookies (ne)používat a jak s nim pracovat v JavaScriptu a PHP.

10 minut

Nová stránka v JavaScriptu

Jak v JavaScriptu vytvořit novou HTML stránku.

4 minuty

Je uživatel online?

Jak zjistit, jestli je uživatel webové aplikace online nebo offline.

5 minut

Má web fungovat bez JavaScriptu?

Při tvorbě webu je potřeba zvážit, jestli a jak má fungovat bez podpory JavaScriptu.

7 minut

Automatické vybrání políčka po načtení

Jak a kdy přesunout kursor do textového pole automaticky po načtení stránky.

4 minuty

Úložiště localStorage

Local Storage je úložiště v prohlížeči klienta přístupné JavaScriptem. K čemu se hodí?

9 minut

Upozornění v JS konsoli

Jak do JS konsole vložit výrazné varování o risicích vkládání cizího kódu.

4 minuty

Doba čtení stránky

Jak zobrazit přibližnou dobu, kterou zabere čtení stránky.

6 minut

Drag & Drop upload obrázků

Všechny možnosti nahrávání obrázků ze schránky a pomocí drag & drop.

13 minut

Automatická výška <iframe> podle obsahu

Definitivní řešení automatického nastavování velikosti <iframe> podle výšky obsahu.

6 minut

Přečtení textu webu

Jak obsah webové stránky přečíst hlasem.

4 minuty

Změna adresy JavaScriptem

JavaScript může měnit URL. Jak a v jakých případech toho využívat.

4 minuty

Převod milisekund

Převodník milisekund.

2 minuty

Upozornění před zavřením stránky

Javascriptová událost onbeforeunload umožňuje pozastavit uzavření/obnovení stránky.

3 minuty

Předchozí/další element v JavaScriptu

Získání následujícího nebo předchozího sourozence pomocí nextSibling a previousSibling.

3 minuty

Kopírování do schránky

Jak s použitím JS zkopírovat uživateli nějaký text do schránky.

9 minut

Nejbližší předek elementu – closest

JavaScriptovou metodou closest jde získat nejbližší nadřazený element vyhovující selektoru.

3 minuty

Hodnota zaškrtnutého radio <input>u

Jak v JavaScriptu zjistit hodnotu označeného radio políčka.

3 minuty

Zobrazení náhodného čísla

Jak vygenerovat náhodné číslo z určitého rozsahu v JavaScriptu a PHP.

5 minut

Vložení ze schránky onpaste

JavaScriptová událost onpaste slouží k odchycení vložení obsahu ze schránky.

2 minuty

Single page application

Co je to SPA (single page application). Na jakém principu funguje.

4 minuty

Směr rolování kolečkem

Jak podle směru otáčení kolečka myši měnit velikost obsahu.

5 minut

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

11 minut

České skloňování

Jak v JS, PHP nebo CSS správně vytvořit skloňování slov pro české prostředí.

3 minuty

Aktivní element v JavaScriptu

Jak zjistit element, který vyvolal JS událost.

2 minuty

Režim celé obrazovky

Jak je možné stránku přepnout do fullscreenu (režimu celé obrazovky).

6 minut

JS akce po kliknutí na odkaz

Na co si dát pozor při obsluhování odkazu JavaScriptem.

4 minuty

Bezstavové HTML

Jak vytvořit aplikaci, kde se nemění HTML kód.

4 minuty

Drag & Drop v JavaScriptu

Jak vytvořit „drag & drop“ přesouvání prvků po stránce v JavaScriptu.

6 minut

Posun v poli přes okraje

Jak se z poslední položky pole dostat na první a obráceně.

3 minuty

Plynulá změna obrázků

Jak na stránce automaticky plynule měnit obrázky.

4 minuty

Zrychlení AJAXové aplikace o 100 ms

Jak u AJAXové aplikace snadno zrychlit odezvu na kliknutí o 100 milisekund.

5 minut

Průběh načítání AJAXu

Při odesílání dat AJAXem je dobré dát uživateli vědět, že se něco děje.

8 minut

Zjištění vypnutých cookies

Jak zjistit, jestli má návštěvník zapnuté nebo vypnuté cookies.

5 minut

JS document.head

Přístup k hlavičce stránky v JavaScriptu je možný konstrukcí document.head.

2 minuty

Beacon API

Beacon API umožňuje asynchronně zaslat data na server při opuštění stránky.

4 minuty

Grafický editor v prohlížeči

Jaké jsou možnosti pro provádění úprav obrázků (zvýraznění, přidání popisků apod.) přímo v prohlížeči.

3 minuty

Přidání dalšího textového pole

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

5 minut

JS vlastnost innerHTML

Jak funguje vlastnost innerHTML v JavaScriptu. Různé způsoby vypisování obsahu v JS.

6 minut

Zjištění výsledného CSS v JavaScriptu

Jak v JavaScriptu zjistit výslednou hodnotu libovolné CSS vlastnosti určitého elementu.

2 minuty

Plynule se posouvající :hover efekt

Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.

4 minuty

Zjištění směru rolování

Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.

2 minuty

Vytváření grafů v JavaScriptu

Snadná tvorba sloupcových, koláčových a dalších (i animovaných) grafů v JavaScriptu.

5 minut

Plynulý přechod mezi stránkami

Jak vytvořit plynulý animovaný přechod mezi dvěma stránkami.

3 minuty

Dynamický update času „před X minutami“

Jak skriptem na stránce průběžně aktualisovat datum v podobě „zasláno před X minutami“.

4 minuty

Tabulky v JavaScriptu

Jak pracovat s tabulkami v JS. Popis metod insertRow, insertCell, deleteRow a dalších.

4 minuty

JS tooltip

JavaScriptový popisek po najetí myší na ikonu nebo text.

4 minuty

Rozdíl mezi == a ===

Rozdíl mezi porovnáváním hodnota pomocí == a ===.

3 minuty

Odstranění obsahu HTML elementu

Jak v JavaScriptu odstranit všechny potomky v určitém HTML elementu.

1 minuta

Gamepad API

Jak webovou stránku ovládat gamepadem.

5 minut

JS událost oninput

JavaScriptová událost oninput zachytí práci s formulářovými políčky.

4 minuty

Skrývání a odkrývání s data-atributy

Zobrazování a skrývání obsahu elegantněji s využitím vlastních atributů.

2 minuty

Převedení PHP do JavaScriptu

Jak převést PHP kód do JavaScriptu.

4 minuty

Je stránka aktivní?

Zjišťování, jestli je stránka aktivní a zda návštěvník něco dělá.

1 minuta

Metody getElementByIdgetElementsByTagName

Vybírání elementů v JavaScriptu metodami getElementById, getElementsByTagName a getElementsByClassName.

5 minut

Automatické generování obsahu stránky

Automatické generování obsahu HTML stránky v JavaScriptu i PHP.

4 minuty

Ikona přehrávání v <title>

Symbol přehrávání ▶ v titulku stránky jako je u videí na YouTube.

3 minuty

Přístup k prvkům formuláře v JS

Jakými způsoby je možné získávat hodnoty prvků formuláře v JavaScriptu.

5 minut

Ovládání webu klávesami v JavaScriptu

Odchytávání stisknutých kláves a vytváření klávesových zkratek v JavaScriptu.

5 minut

Confirm

Confirm je JavaScriptová hláška pro potvrzení akce. Jak ji používat nebo nahradit vlastním dialogovým oknem.

3 minuty

Otevírání nového okna

Možnosti, jak otevřít stránku do nového okna / nového tabu prohlížeče.

5 minut

Vytváření modulů v JavaScriptu

Jak psát složitější věci v JavaScriptu. Obalit společné funkce do „modulů“.

5 minut

Elementy documentElement a body v JavaScriptu

Co se skrývá pod document.body a document.documentElement. Jaká je podpora v prohlížečích.

2 minuty

Scope v JavaScriptu

Co to je a k čemu slouží „scope“ při programování v JavaScriptu.

4 minuty

HTML atribut placeholder

HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.

6 minut

Rychlé kliknutí a vyvolání události

Jak zajistit, aby ovládací prvky uživatelského rozhraní reagovaly správně i na rychlé kliknutí.

3 minuty

Tutoriál na webu

Jak vyrobit jednoduchý tutoriál pro seznámení se s webovou aplikací.

7 minut

Animace čísel

Animování číselných dat pomocí JavaScriptu.

3 minuty

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

3 minuty

Změna location.hash bez posunu stránky

Jak změnit location.hash bez posunutí stránky.

2 minuty

Offline webová stránka

Jak umožnit návštěvníkům stažení celé webové stránky pro prohlížení offline, umístění na CD apod.

3 minuty

Zvyšování hodnoty inputů

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

4 minuty

Odpočítávání času v HTML

Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.

6 minut

Spojení CSS a JS souborů do jednoho

Zrychlit načítání webu pomůže sloučení CSS a JavaScriptu do jednoho souboru. Hotové řešení v PHP.

3 minuty

Responsivní komentáře

Jak některé části stránky načítat jen při určité velikosti obrazovky.

3 minuty

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

2 minuty

JavaScriptové události myši

Popis všech možných událostí, které lze v JavaScriptu vyvolat myší. Návod, jak je odchytávat a blokovat.

18 minut

Počet znaků a slov v textu

Jak spočítat délku (počet znaků), počet slov, řádků nebo odstavců v textu.

4 minuty

Procházení značek v JavaScriptu

Jak cyklem procházet značky v JavaScriptu. Popis různých možností.

3 minuty

Výběr elementů querySelectorem

Metoda querySelector a querySelectorAll zjednodušuje výběr elementů v JavaScriptu.

3 minuty

Výběr barvy

Jak umožnit uživateli vybrat barvu z palety (pomocí JavaScriptu i bez JS).

5 minut

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

5 minut

AJAX

Asynchronní načítání částí stránek a odesílání formulářů bez obnovení celé stránky.

9 minut

Vlastní kontextová nabídka

Jak po stisknutí pravého tlačítka myši zobrazit vlastní nabídku.

4 minuty

Zjištění souřadnic myši

Jak v JavaScriptu zjistit aktuální souřadnice myši (kursoru).

2 minuty

Změna URL bez obnovení stránky

Jak může JavaScript přes history.pushState změnit URL stránky bez znovunačtení.

6 minut

Označení kódu nebo textu po kliknutí

Jak označit text nebo zdrojový kód jedním kliknutím. Je to vůbec rozumné?

3 minuty

Směr přijetí/odjetí myši z elementu

Jak zjistit, kterým směrem myš opustila element nebo odkud na něj přijela?

3 minuty

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

3 minuty

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

3 minuty

JavaScriptová simulace atributu ismap

HTML atribut ismap umí zjistit souřadnice při kliknutí na obrázek. Jak na to v JS?

1 minuta

Událost onclick na různých elementech

Test události onclick na různých elementech při vyvolání myší i klávesnicí.

4 minuty

Automatické zapamatování formulářů

Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?

4 minuty

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

7 minut

Skutečné rozměry obrázku

Jak může JavaScript zjistit skutečnou výšku a šířku obrázku.

2 minuty

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

3 minuty

Jak zakázat scrollování na stránce

Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?

3 minuty

Hotové řešení lazy-loadingu YouTube videí

Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.

3 minuty

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

3 minuty

Rozklikávací menu

JavaScriptové menu otvírající/zavírající se po kliknutí.

4 minuty

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

3 minuty

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

3 minuty

Vlastní jednoduchý WYSIWYG editor

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

3 minuty

Označení odkazu na kotvu, pokud je na ní odrolováno

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

4 minuty

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

4 minuty

Odrolování na určitý HTML tag

Nestačí-li běžné odrolování na HTML #kotvu, přichází na řadu JavaScript.

3 minuty

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

3 minuty

JavaScriptový framework Zepto.js

Odlehčená JS knihovna nabízející základní funkce jQuery ve zmenšené podobě.

2 minuty

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

1 minuta

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

3 minuty

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

1 minuta

Zablokování některých kláves

Zablokování určitých kláves (šipek) pomocí JavaScriptu.

1 minuta

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025