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.

Všechny články z kategorie

Parsování HTML v JavaScriptu

Parsování HTML v JavaScriptu

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

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

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

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

JS podmínka v objektu

JS podmínka v objektu

Jak v JavaScriptu zapsat podmínku uvnitř objektu.

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

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

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

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

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

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

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

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.

Offline stránka v PWA přes ServiceWorker

Offline stránka v PWA přes ServiceWorker

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

VisualViewport API

VisualViewport API

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

Vite – super rychlý dev server / build

Vite – super rychlý dev server / build

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

Kopírování objektů v JS

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

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

Recense: Vzhůru do AMP

Recense: Vzhůru do AMP

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

Rozdíl mezi var a let v JS

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.

Jak zadávat datum?

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

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

Tisk stránky

Vytisknutí stránky

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

Přidat/odebrat třídu

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

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

Media queries v JavaScriptu

Media queries v JavaScriptu

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

Připojování událostí v JS

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

Zjištění rozlišení v JS

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.

Identifikátor v HTML/CSS/JS

HTML/CSS/JS identifikátor id

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

Rozpoznávání hlasu

Rozpoznávání hlasu

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

Vlastní alert

Vlastní hláška alert

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

Lazy loading obrázků

Lazy loading obrázků

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

Parsování URL v JavaScriptu

Parsování URL v JavaScriptu

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

Textarea s automatickou výškou

Automatická výška <textarea>

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

Co je to localForage?

Co je to localForage?

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

Upload velkých souborů v JS/PHP

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.

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

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

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

Úprava libovolného textu na stránce

Úprava textu stránky pomocí designMode

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

Indexování JavaScriptu

Indexování JavaScriptu

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

Zjištění barvy obrázku

Zjištění barvy obrázku

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

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

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

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

Připojení JavaScriptu s async a defer

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.

JSON

JSON

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

HTML Canvas

HTML <canvas>

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

Uvozovky v HTML, CSS, JS, PHP, SQL

Uvozovky v HTML, CSS, JS, PHP, SQL

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

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

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.

Generování PDF

Generování PDF

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

Změna stylů JavaScriptem

Změna stylů JavaScriptem

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

Co je to polyfill?

Co je to polyfill?

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

Posice kursoru v poli

Umístění kursoru v poli

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

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

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

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

Spuštění JS načteného AJAXem

Vykonání JS načteného AJAXem

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

Cookies

Cookies

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

Nová stránka v JavaScriptu

Nová stránka v JavaScriptu

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

Je uživatel online?

Je uživatel online?

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

Má web fungovat bez JavaScriptu?

Má web fungovat bez JavaScriptu?

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

Automatický focus políčka

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

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

JS úložiště Local Storage

Úložiště localStorage

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

Varování v JS konsoli

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.

Doba čtení stránky

Doba čtení stránky

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

Drag & Drop upload obrázků

Drag & Drop upload obrázků

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

Výška iframe podle obsahu

Automatická výška <iframe> podle obsahu

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

Čtení textu na webu

Přečtení textu webu

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

Změna adresy v JS

Změna adresy JavaScriptem

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

Převod milisekund

Převod milisekund

Převodník milisekund.

Upozornění před opuštěním stránky

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

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

Předchozí/další element v JavaScriptu

Předchozí/další element v JavaScriptu

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

Kopírování do schránky

Kopírování do schránky

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

Nejbližší nadřazený element – closest

Nejbližší předek elementu – closest

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

Hodnota vybraného radio inputu

Hodnota zaškrtnutého radio <input>u

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

Generátor náhodných čísel

Zobrazení náhodného čísla

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

Onpaste – vložení ze schránky

Vložení ze schránky onpaste

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

Single page aplikace

Single page application

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

Zoomování kolečkem

Směr rolování kolečkem

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

Chyby při programování

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?

Skloňování

České skloňování

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

Aktivní element v JavaScriptu

Aktivní element v JavaScriptu

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

Fullscreen

Režim celé obrazovky

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

JS akce u odkazu

JS akce po kliknutí na odkaz

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

Bezstavové HTML

Bezstavové HTML

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

Drag & Drop přesouvání v JS

Drag & Drop v JavaScriptu

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

Posun v poli přes okraje

Posun v poli přes okraje

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

Slideshow obrázků

Plynulá změna obrázků

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

Zrychlení AJAXové aplikace o 100 ms

Zrychlení AJAXové aplikace o 100 ms

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

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

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.

Vypnuté cookies

Zjištění vypnutých cookies

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

JS document.head

JS document.head

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

Beacon API

Beacon API

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

Grafický editor v prohlížeči

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.

Duplikování položek formuláře v JS

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.

InnerHTML

JS vlastnost innerHTML

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

Zjištění CSS hodnot v JavaScriptu

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

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

Plynulé posouvání :hover efektu

Plynule se posouvající :hover efekt

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

Detekce směru scrollování

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

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

JS grafy na webu

Vytváření grafů v JavaScriptu

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

Plynulý přechod mezi stránkami

Plynulý přechod mezi stránkami

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

Výpis náhodného obsahu

Výpis náhodného textu

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

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

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“.

Tabulky v JavaScriptu

Tabulky v JavaScriptu

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

JS tooltip

JS tooltip

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

Porovnávání == a ===

Rozdíl mezi == a ===

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

Odstranění všech potomků HTML elementu

Odstranění obsahu HTML elementu

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

Gamepad API

Gamepad API

Jak webovou stránku ovládat gamepadem.

Událost oninput

JS událost oninput

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

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

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ů.

Převod PHP na JavaScript

Převedení PHP do JavaScriptu

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

Je stránka aktivní?

Je stránka aktivní?

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

Funkce getElementById a getElementsByTagName

Metody getElementByIdgetElementsByTagName

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

Automatické generování obsahu

Automatické generování obsahu stránky

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

Ikona přehrávání v titulku

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

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

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

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.

Klávesové zkratky v JS

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

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

Confirm

Confirm

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

Otevření nového okna

Otevírání nového okna

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

Moduly v JavaScriptu

Vytváření modulů v JavaScriptu

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

Body a documentElement v JS

Elementy documentElement a body v JavaScriptu

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

Scope v JavaScriptu

Scope v JavaScriptu

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

Placeholder

HTML atribut placeholder

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

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

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

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

Tutoriál na webu

Tutoriál na webu

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

Animace čísel

Animace čísel

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

Odkaz na kotvu a fixní menu

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?

Změna location.hash bez odrolování stránky

Změna location.hash bez posunu stránky

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

Offline webová stránka

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.

Zvyšování hodnoty inputů

Zvyšování hodnoty inputů

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

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

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

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

Spojení CSS a JS souborů

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.

Responsivní komentáře

Responsivní komentáře

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

Plynulý přesun focusu

Plynulý přesun focusu

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

JavaScriptové události myši

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.

Jak zjistit počet znaků a slov

Počet znaků a slov v textu

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

Procházení elementů v JS

Procházení značek v JavaScriptu

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

JS querySelector

Výběr elementů querySelectorem

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

Výběr barvy (color picker)

Výběr barvy

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

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

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

Rozbalení a sbalení obsahu po kliknutí.

AJAX

AJAX

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

Kontextová nabídka

Vlastní kontextová nabídka

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

Zjištění souřadnic kursoru

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

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

Změna URL a AJAX

Změna URL bez obnovení stránky

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

Označení textu kliknutím

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é?

Směr odjetí myši

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?

Lightboxová vstupní stránka

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

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

Fixní menu při scrollování

Fixní menu při rolování

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

JS náhrada atributu ismap

JavaScriptová simulace atributu ismap

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

Onclick z klávesnice

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

Zapamatování formulářových polí

Automatické zapamatování formulářů

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

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

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

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

Zjištění skutečných rozměrů obrázku

Skutečné rozměry obrázku

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

AJAX upload souborů

Upload souborů bez obnovení stránky

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

Zakázat rolování stránky

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

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

Automatický lazy-loading YouTube videí

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

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

Animace

Animace na webových stránkách

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

Menu reagujicí na kliknutí

Rozklikávací menu

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

Detekce zapnutého JavaScriptu

Zapnutý a vypnutý JavaScript

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

Fixní postranní panel

Jak vytvořit fixovaný banner?

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

Jak vytvořit WYSIWYG editor

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.

Zvýraznění podle rolování

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.

Změna vzhledu stránky

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.

Odrolování na element

Odrolování na určitý HTML tag

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

Načtení obrázku, až když je potřeba

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.

Framework Zepto.js

JavaScriptový framework Zepto.js

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

Test existence obrázku JavaScriptem

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

Jak JavaScriptem ověřit existenci obrázku?

Baterka v CSS a JavaScriptu

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.

Aktivování/deaktivování okna

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.

Zablokování kláves

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

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