Výukový program JS

JS HOME Úvod do JS JS Kam vést Výstup JS JS prohlášení Syntaxe JS Komentáře JS JS proměnné JS Let JS Const Operátoři JS JS aritmetika Zadání JS JS datové typy Funkce JS JS objekty Události JS JS struny JS String Methods JS String Search Šablony řetězců JS JS čísla Metody čísel JS JS Arrays Metody JS Array JS Array Sort Iterace pole JS JS Array Const JS Termíny Formáty data JS JS metody získávání data JS metody nastavení data JS Math JS Náhodný JS Booleans JS Srovnání Podmínky JS Přepínač JS JS Loop For JS Loop For In JS Loop For Of Zatímco JS Loop JS Break JS Iterables Sady JS Mapy JS Typ JS Konverze typu JS JS Bitwise JS RegExp Chyby JS Rozsah JS JS Zvedací zařízení Přísný režim JS JS toto klíčové slovo Funkce šipky JS JS třídy JS JSON Ladění JS Průvodce stylem JS JS Best Practices Chyby JS Výkon JS JS Reserved Words

Verze JS

Verze JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historie JS

JS objekty

Definice objektů Vlastnosti objektu Objektové metody Zobrazení objektu Objektové přístupové objekty Konstruktory objektů Prototypy objektů Iterovatelné objekty Sady objektů Mapy objektů Reference objektu

Funkce JS

Definice funkcí Funkční parametry Vyvolání funkce Volání funkce Funkce Použít Funkční uzávěry

JS třídy

Úvod do třídy Třídní dědičnost Třída Statická

JS Async

JS zpětná volání JS asynchronní JS Sliby JS Async/Await

JS HTML DOM

Úvod do DOM Metody DOM Dokument DOM Prvky DOM DOM HTML Formuláře DOM DOM CSS DOM animace Události DOM DOM Event Listener Navigace DOM DOM uzly Kolekce DOM Seznamy uzlů DOM

Kusovník prohlížeče JS

Okno JS Obrazovka JS Umístění JS Historie JS JS Navigator Popup Alert JS Časování JS Soubory cookie JS

Webová rozhraní API JS

Úvod do webového rozhraní API Web Forms API Webová historie API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

Úvod do AJAXu AJAX XMLHttp Požadavek AJAX Odpověď AJAX Soubor XML AJAX AJAX PHP AJAX ASP Databáze AJAX Aplikace AJAX Příklady AJAX

JS JSON

Úvod do JSON Syntaxe JSON JSON vs XML Datové typy JSON Analýza JSON JSON Stringify Objekty JSON Pole JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selektory jQuery HTML jQuery jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Příklady JS

Příklady JS JS HTML DOM Vstup HTML JS JS HTML objekty JS HTML události Prohlížeč JS Editor JS Cvičení JS JS kvíz Certifikát JS

JS Reference

Objekty JavaScriptu HTML DOM objekty


JavaScript HTML události DOM


HTML DOM umožňuje JavaScriptu reagovat na události HTML:

Myš nade mnou
Klikni na mě

Reakce na události

JavaScript lze spustit, když dojde k události, například když uživatel klikne na prvek HTML.

Chcete-li spustit kód, když uživatel klikne na prvek, přidejte kód JavaScript do atributu události HTML:

onclick=JavaScript

Příklady událostí HTML:

  • Když uživatel klikne myší
  • Když se načte webová stránka
  • Po načtení obrázku
  • Když se myš pohybuje nad prvkem
  • Když se změní vstupní pole
  • Při odeslání formuláře HTML
  • Když uživatel stiskne klávesu

V tomto příkladu se obsah <h1>prvku změní, když na něj uživatel klikne:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

V tomto příkladu je funkce volána z obsluhy události:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>


Atributy události HTML

Chcete-li přiřadit události k prvkům HTML, můžete použít atributy událostí.

Příklad

Přiřaďte událost onclick prvku tlačítka:

<button onclick="displayDate()">Try it</button>

Ve výše uvedeném příkladu displayDatese po klepnutí na tlačítko provede pojmenovaná funkce.


Přiřaďte události pomocí HTML DOM

HTML DOM vám umožňuje přiřadit události k prvkům HTML pomocí JavaScriptu:

Příklad

Přiřaďte událost onclick prvku tlačítka:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Ve výše uvedeném příkladu je funkce s názvem displayDatepřiřazena prvku HTML s příponou id="myBtn".

Funkce se provede po kliknutí na tlačítko.


Události onload a onunload

Události onloada onunloadse spouštějí, když uživatel vstoupí na stránku nebo ji opustí.

Událost onloadlze použít ke kontrole typu prohlížeče a verze prohlížeče návštěvníka a na základě informací načíst správnou verzi webové stránky.

Události onloada onunloadlze použít ke zpracování souborů cookie.

Příklad

<body onload="checkCookies()">

Událost při změně

Událost onchangese často používá v kombinaci s validací vstupních polí.

Níže je uveden příklad použití onchange. Funkce upperCase() bude volána, když uživatel změní obsah vstupního pole.

Příklad

<input type="text" id="fname" onchange="upperCase()">

Události onmouseover a onmouseout

Události onmouseovera onmouseoutlze použít ke spuštění funkce, když uživatel najede myší na prvek HTML nebo z něj odejde:

Myš nade mnou


Události onmousedown, onmouseup a onclick

Všechny události onmousedown, onmouseup, a onclickjsou součástí kliknutí myší. Nejprve při kliknutí na tlačítko myši se spustí událost onmousedown, poté, když se tlačítko myši uvolní, se spustí událost onmouseup a nakonec, když je kliknutí dokončeno, je spuštěna událost onclick.

Click Me


Další příklady


Změní obrázek, když uživatel podrží tlačítko myši.


Zobrazí okno s upozorněním, když se stránka načte.


Změňte barvu pozadí vstupního pole, když je aktivní.


Změna barvy prvku, když se nad ním pohybuje kurzor.


Odkaz na objekt události HTML DOM

Seznam všech událostí HTML DOM naleznete v naší úplné Referenční příručce objektu událostí HTML DOM .