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.
Jak v klientském i serverovém JS parsovat a upravovat HTML kód.
Jak pro libovolný řetězec spočítat unikátní barvu.
Jak v JavaScriptu zapsat podmínku uvnitř objektu.
Jak zajistit transformaci jednoduchého JavaScriptu i pro staré prohlížeče jako IE 11.
Jak rozdělit build aplikace do souborů, aby byla co nejrychlejší.
Jak ve Vue.js automaticky udržovat překlady očištěné o nepoužívané klíče.
Jak udělat web fungující offline. A splnit tak požadavky na PWA.
VisualViewport API umožňuje v JS lépe reagovat na velikost viewportu a jeho změny.
Vite je nástroj pro neuvěřitelně rychlý dev server, hot reload a build JS/CSS.
Jak správně a úspěšně zkopírovat objekt v JavaScriptu.
Má smysl používat AMP, nebo je to úplná blbost?
var a let v JS
Jaký je v JavaScriptu rozdíl mezi deklarováním proměnných přes var a let.
Pohodlné zadávání kalendářního data ve formulářích.
Jak správně připravit webovou stránku pro pohodlné vytištění.
Přepínání, přidávání a odebírání CSS tříd JavaScriptem.
Jak v JavaScriptu používat @media pravidla jako v CSS.
Jaké existují postupy pro navěšení JavaScriptové události na element. Výhody a nevýhody různých řešení.
Jak v JavaScriptu zjistit šířku a výšku rozlišení obrazovky, velikost dostupné plochy (tzv. viewport) nebo rozměry elementu.
id
K čemu se hodí identifikátor, kdy ho používat a jaké znaky může obsahovat.
Jak psát na web převodem hlasu na text pomocí speechRecognition.
alert
Jak si v JavaScriptu vytvořit vlastní hlášky jako je výchozí alert.
Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.
Jak elegantně parsovat adresy webových stránek v JavaScriptu.
<textarea>
Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.
K čemu slouží a jak se používá localForage úložiště.
Jak umožnit návštěvníkům nahrát soubory jako videa v řádech MB/GB s progress barem.
Jak jedním odkazem otevřít dvě různé stránky.
designMode
Jednoduchý bookmarklet pro okamžité přepsání libovolného textu na stránce.
Jak se vyhledávače Google a Seznam vypořádají s obsahem v JavaScriptu. Dokáží takový obsah indexovat?
Jak v JavaScriptu i PHP zjistit hlavní barvu obrázku.
Jak v jazyce PHP nebo v JavaScriptu spočítat medián.
async a defer
Různé způsoby připojení JavaScriptu na stránku, aby se nezdržovalo načítání stránky.
JSON je universální formát pro ukládání dat. Jak ho používat?
<canvas>
Canvas je HTML značka pro kreslení v prohlížeči pomocí JavaScriptu.
Jak správně používat uvozovky v HTML, CSS, JavaScriptu, PHP a MySQL.
Jakým způsobem uložit stav aplikace/formuláře před opuštěním stránky.
Vytváření PDF dokumentů v JavaScriptu a PHP.
Jak JavaScriptem nastavovat CSS pro změnu vzhledu jednotlivých elementů.
Polyfillem se rozumí automatické alternativní řešení, které dokáže zajistit funkčnost něčeho nepodporovaného.
Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.
Převedení textu na velká nebo malá písmena.
Jak provést JavaScript, který je ve stránce načítané AJAXem.
Kdy cookies (ne)používat a jak s nim pracovat v JavaScriptu a PHP.
Jak v JavaScriptu vytvořit novou HTML stránku.
Jak zjistit, jestli je uživatel webové aplikace online nebo offline.
Při tvorbě webu je potřeba zvážit, jestli a jak má fungovat bez podpory JavaScriptu.
Jak a kdy přesunout kursor do textového pole automaticky po načtení stránky.
localStorage
Local Storage je úložiště v prohlížeči klienta přístupné JavaScriptem. K čemu se hodí?
Jak do JS konsole vložit výrazné varování o risicích vkládání cizího kódu.
Jak zobrazit přibližnou dobu, kterou zabere čtení stránky.
Všechny možnosti nahrávání obrázků ze schránky a pomocí drag & drop.
<iframe> podle obsahu
Definitivní řešení automatického nastavování velikosti <iframe> podle výšky obsahu.
Jak obsah webové stránky přečíst hlasem.
JavaScript může měnit URL. Jak a v jakých případech toho využívat.
Převodník milisekund.
Javascriptová událost onbeforeunload umožňuje pozastavit uzavření/obnovení stránky.
Získání následujícího nebo předchozího sourozence pomocí nextSibling a previousSibling.
Jak s použitím JS zkopírovat uživateli nějaký text do schránky.
closest
JavaScriptovou metodou closest jde získat nejbližší nadřazený element vyhovující selektoru.
radio <input>u
Jak v JavaScriptu zjistit hodnotu označeného radio políčka.
Jak vygenerovat náhodné číslo z určitého rozsahu v JavaScriptu a PHP.
onpaste
JavaScriptová událost onpaste slouží k odchycení vložení obsahu ze schránky.
Co je to SPA (single page application). Na jakém principu funguje.
Jak podle směru otáčení kolečka myši měnit velikost obsahu.
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?
Jak v JS, PHP nebo CSS správně vytvořit skloňování slov pro české prostředí.
Jak zjistit element, který vyvolal JS událost.
Jak je možné stránku přepnout do fullscreenu (režimu celé obrazovky).
Na co si dát pozor při obsluhování odkazu JavaScriptem.
Jak vytvořit aplikaci, kde se nemění HTML kód.
Jak vytvořit „drag & drop“ přesouvání prvků po stránce v JavaScriptu.
Jak se z poslední položky pole dostat na první a obráceně.
Jak na stránce automaticky plynule měnit obrázky.
Jak u AJAXové aplikace snadno zrychlit odezvu na kliknutí o 100 milisekund.
Při odesílání dat AJAXem je dobré dát uživateli vědět, že se něco děje.
Jak zjistit, jestli má návštěvník zapnuté nebo vypnuté cookies.
document.head
Přístup k hlavičce stránky v JavaScriptu je možný konstrukcí document.head.
Beacon API umožňuje asynchronně zaslat data na server při opuštění stránky.
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.
Jak umožnit kopírování/přidávání dalších textových polí do formuláře.
innerHTML
Jak funguje vlastnost innerHTML v JavaScriptu. Různé způsoby vypisování obsahu v JS.
Jak v JavaScriptu zjistit výslednou hodnotu libovolné CSS vlastnosti určitého elementu.
Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.
Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.
Snadná tvorba sloupcových, koláčových a dalších (i animovaných) grafů v JavaScriptu.
Jak vytvořit plynulý animovaný přechod mezi dvěma stránkami.
Jak na stránce náhodně vypsat obrázek, odkaz, reklamu, text nebo cokoliv jiného.
Jak skriptem na stránce průběžně aktualisovat datum v podobě „zasláno před X minutami“.
Jak pracovat s tabulkami v JS. Popis metod insertRow, insertCell, deleteRow a dalších.
JavaScriptový popisek po najetí myší na ikonu nebo text.
Rozdíl mezi porovnáváním hodnota pomocí == a ===.
Jak v JavaScriptu odstranit všechny potomky v určitém HTML elementu.
Jak webovou stránku ovládat gamepadem.
oninput
JavaScriptová událost oninput zachytí práci s formulářovými políčky.
Zobrazování a skrývání obsahu elegantněji s využitím vlastních atributů.
Jak převést PHP kód do JavaScriptu.
Zjišťování, jestli je stránka aktivní a zda návštěvník něco dělá.
getElementById a getElementsByTagName
Vybírání elementů v JavaScriptu metodami getElementById, getElementsByTagName a getElementsByClassName.
Automatické generování obsahu HTML stránky v JavaScriptu i PHP.
<title>
Symbol přehrávání ▶ v titulku stránky jako je u videí na YouTube.
Jakými způsoby je možné získávat hodnoty prvků formuláře v JavaScriptu.
Odchytávání stisknutých kláves a vytváření klávesových zkratek v JavaScriptu.
Confirm je JavaScriptová hláška pro potvrzení akce. Jak ji používat nebo nahradit vlastním dialogovým oknem.
Možnosti, jak otevřít stránku do nového okna / nového tabu prohlížeče.
Jak psát složitější věci v JavaScriptu. Obalit společné funkce do „modulů“.
documentElement a body v JavaScriptu
Co se skrývá pod document.body a document.documentElement. Jaká je podpora v prohlížečích.
Co to je a k čemu slouží „scope“ při programování v JavaScriptu.
placeholder
HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.
Jak zajistit, aby ovládací prvky uživatelského rozhraní reagovaly správně i na rychlé kliknutí.
Jak vyrobit jednoduchý tutoriál pro seznámení se s webovou aplikací.
Animování číselných dat pomocí JavaScriptu.
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?
location.hash bez posunu stránky
Jak změnit location.hash bez posunutí stránky.
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.
Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.
Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.
Zrychlit načítání webu pomůže sloučení CSS a JavaScriptu do jednoho souboru. Hotové řešení v PHP.
Jak některé části stránky načítat jen při určité velikosti obrazovky.
focusu
Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.
Popis všech možných událostí, které lze v JavaScriptu vyvolat myší. Návod, jak je odchytávat a blokovat.
Jak spočítat délku (počet znaků), počet slov, řádků nebo odstavců v textu.
Jak cyklem procházet značky v JavaScriptu. Popis různých možností.
querySelectorem
Metoda querySelector a querySelectorAll zjednodušuje výběr elementů v JavaScriptu.
Jak umožnit uživateli vybrat barvu z palety (pomocí JavaScriptu i bez JS).
Rozbalení a sbalení obsahu po kliknutí.
Asynchronní načítání částí stránek a odesílání formulářů bez obnovení celé stránky.
Jak po stisknutí pravého tlačítka myši zobrazit vlastní nabídku.
Jak v JavaScriptu zjistit aktuální souřadnice myši (kursoru).
Jak může JavaScript přes history.pushState změnit URL stránky bez znovunačtení.
Jak označit text nebo zdrojový kód jedním kliknutím. Je to vůbec rozumné?
Jak zjistit, kterým směrem myš opustila element nebo odkud na něj přijela?
Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.
Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.
ismap
HTML atribut ismap umí zjistit souřadnice při kliknutí na obrázek. Jak na to v JS?
onclick na různých elementech
Test události onclick na různých elementech při vyvolání myší i klávesnicí.
Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?
Pomocí CSS transition je možné skrývání a odkrývání textu plynule animovat (od IE 10).
Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.
Jak může JavaScript zjistit skutečnou výšku a šířku obrázku.
Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.
Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?
Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.
Jak na webu vytvářet animace a přechody v HTML, CSS a JS.
JavaScriptové menu otvírající/zavírající se po kliknutí.
Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.
JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.
Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.
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.
Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.
Nestačí-li běžné odrolování na HTML #kotvu, přichází na řadu JavaScript.
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.
Odlehčená JS knihovna nabízející základní funkce jQuery ve zmenšené podobě.
Jak JavaScriptem ověřit existenci obrázku?
Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.
V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.
Zablokování určitých kláves (šipek) pomocí JavaScriptu.
