etechblog

Jak používat JavaScript v HTML k vytváření interaktivních webových stránek

Photo of author

By etechblogcz

HTML, CSS a JavaScript představují trojici klíčových technologií využívaných při tvorbě uživatelského rozhraní webových aplikací. Zatímco HTML se stará o strukturu a obsah, CSS definuje vizuální styl.

JavaScript, jakožto objektově orientovaný programovací jazyk, hraje hlavní roli ve vývoji dynamické klientské části webových i mobilních aplikací. Tento open-source jazyk, známý svou flexibilitou a snadnou srozumitelností, se etabloval mezi nejrozšířenější programovací jazyky.

S využitím HTML5 a CSS3 lze vytvářet statické webové stránky. Pokud však cílem je interaktivita a dynamika, je nezbytné použít programovací jazyk, jako je JavaScript, kterému webové prohlížeče rozumí.

Následující text objasňuje význam kombinace JavaScriptu s HTML, popisuje různé metody začlenění JavaScript kódu do HTML a uvádí osvědčené postupy pro jejich společné použití.

Proč je JavaScript v HTML nezbytný?

  • Interaktivní prvky: JavaScript umožňuje vytvářet interaktivitu, která reaguje na akce uživatele v reálném čase bez nutnosti opakovaného načítání stránky. Příkladem může být počítadlo, jehož hodnota se zvyšuje kliknutím, nebo potvrzení o úspěšném odeslání formuláře.
  • Ověřování dat na straně klienta: Javascript slouží k validaci dat zadaných do formulářů. Může například kontrolovat správný formát e-mailové adresy, délku hesla a jeho komplexitu.
  • Dynamická manipulace s DOM: Javascript nabízí Document Object Model (DOM), který umožňuje dynamickou modifikaci obsahu webové stránky. Obsah se aktualizuje na základě uživatelských interakcí bez opětovného načítání stránky.
  • Kompatibilita prohlížečů: Javascript je kompatibilní se všemi moderními webovými prohlížeči, což zajišťuje, že webové stránky vytvořené s použitím HTML, CSS a JavaScriptu budou správně fungovat v různých prostředích.

Požadavky

  • Základní znalost HTML: Uživatel by měl chápat základní HTML značky, umět vytvářet tlačítka a formuláře.
  • Základní znalost CSS: Uživatel by měl být obeznámen s CSS selektory (id, třída, prvky).
  • Textový editor: Je doporučeno používat editor kódu, jako je VS Code nebo Atom. Pro ty, kteří nechtějí instalovat software, je k dispozici online kompilátor JavaScriptu.

Možnosti začlenění JavaScriptu do HTML

Existují tři hlavní metody, jak vložit JavaScript kód do HTML. Každá z nich má své specifické využití a výhody.

#1. Vložení kódu mezi značky <script> a </script>

Tento přístup umožňuje mít JavaScript a HTML kód v jednom souboru. Pro demonstraci vytvoříme základní projekt.

mkdir javascript-html-playground

cd javascript-html-playground

Vytvořte soubory index.html a style.css.

Do HTML souboru vložte následující kód:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Jméno:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Zpráva:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Odeslat" />

      </form>

    </div>

  </body>

</html>

Do CSS souboru vložte následující startovací kód:

.form-container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

  }

  label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

  }

  input[type="text"],

  input[type="email"],

  textarea {

    display: block;

    margin-bottom: 10px;

    padding: 5px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 8px;

  }

  input[type="submit"] {

    background-color: #4CAF50;

    color: white;

    padding: 5px 10px;

    border: none;

    border-radius: 2.5px;

    font-size: 8px;

    cursor: pointer;

  }

  input[type="submit"]:hover {

    background-color: #3e8e41;

  }

Po načtení webové stránky se zobrazí jednoduchý formulář.

Nyní přidáme jednoduchý JavaScript kód, který po kliknutí na tlačítko „Odeslat“ zobrazí zprávu „Odesláno“. Upravený HTML kód s JavaScriptem vypadá takto:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Jméno:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Zpráva:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Odeslat" onclick="submitted()" />

      </form>

    </div>

    <script>

      function submitted() {

        alert("Odesláno");

      }

    </script>

  </body>

</html>

Při kliknutí na tlačítko „Odeslat“ se zobrazí upozornění.



Výhody vkládání JavaScriptu mezi <script> … </script>


    

  • Rychlá implementace: Práce v jednom souboru urychluje vývoj, protože JavaScript kód může snadno odkazovat na HTML prvky.
    • 

  • Čitelnost: Oddělení HTML a JavaScript kódu pomocí značek <script> zvyšuje čitelnost a usnadňuje ladění.
    • 



Nevýhody vkládání JavaScriptu mezi <script> … </script>


    

  • Nemožnost opakovaného použití kódu: Pokud aplikace obsahuje více formulářů, je nutné pro každý z nich vytvořit samostatný JavaScript kód.
    • 

  • Snížení výkonu: Velké bloky kódu v HTML dokumentu mohou zpomalit načítání stránky.
    • 



#2. Vložený kód přímo v HTML


Místo uzavření JavaScript kódu do <script> … </script> značek je možné ho vložit přímo do HTML kódu. Budeme používat stejný HTML kód a stylopis (style.css). 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Jméno:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Zpráva:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Odeslat" onclick="alert('inline odeslání')" />

      </form>

    </div>

  </body>

</html>


Po kliknutí na „Odeslat“ se zobrazí okno s textem „inline odeslání“. 


Výhody přidání JavaScriptu jako vloženého kódu


    

  • Rychlá implementace: Není nutné přepínat mezi HTML a JavaScript soubory.
    • 

  • Ideální pro malé aplikace: Pro menší aplikace s nízkou interaktivitou je tento přístup vhodný.
    • 



Nevýhody přidání JavaScriptu jako vloženého kódu


    

  • Nemožnost opakovaného použití kódu: Pokud aplikace obsahuje více formulářů, je nutné pro každý z nich napsat kód.
    • 

  • Zpomalení: Velké bloky kódu v HTML dokumentu zpomalují načítání.
    • 

  • Snížená čitelnost: Čitelnost kódu se snižuje s nárůstem jeho rozsahu.
    • 



#3. Vytvoření externího JavaScript souboru


S růstem aplikace se ukazuje, že vkládání JavaScript kódu přímo do HTML souboru není ideální. Velké množství kódu v HTML souboru může vést ke zpomalení načítání stránky.


Vytvoříme nový soubor script.js, kam přesuneme JavaScript kód.


Do HTML souboru vložte odkaz na soubor script.js:


<head>

   <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

</head>


Aktualizovaná HTML stránka bude vypadat takto:


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Jméno:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Zpráva:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Odeslat" />

      </form>

    </div>

  </body>

</html>


Do souboru script.js vložte následující kód:


document.addEventListener("DOMContentLoaded", function() {

    const form = document.querySelector("form");

    form.addEventListener("submit", function(event) {

      event.preventDefault();

      alert("externí JS odeslání");

    });

  });


Tento JavaScript kód funguje takto:


    

  • Naslouchá události DOMContentLoaded.
    • 

  • Po vyvolání události DOMContentLoaded se spustí funkce zpětného volání.
    • 

  • Kód pomocí querySelector vybere formulář.
    • 

  • Metoda event.preventDefault() zabraňuje výchozímu chování DOM (obnovení stránky nebo přechodu na novou stránku) po spuštění události submit.
    • 

  • Po spuštění události submit se zobrazí zpráva „externí JS odeslání“.
    • 





JavaScript v HTML: Osvědčené postupy


    

  • Minimalizace velikosti souborů: Velikost souboru přímo ovlivňuje rychlost načítání stránky. Minifikace kódu odstraňuje nepotřebné znaky bez změny funkčnosti. Pro zmenšení kódu lze použít nástroje jako Yahoo YUI Compressor a HTMLMinifier.
    • 

  • Uspořádání kódu: Uspořádání kódu zvyšuje jeho čitelnost a usnadňuje údržbu. Pro formátování kódu lze použít rozšíření jako Prettier.
    • 

  • Využití externích knihoven: Pokud knihovna nabízí funkci, kterou aplikace potřebuje, je zbytečné ji programovat od začátku. Je ovšem doporučeno nepoužívat více knihoven, které plní stejný účel.
    • 

  • Optimalizace umístění JavaScriptu: Pokud vkládáte JavaScript kód do HTML souboru, ujistěte se, že je umístěn až za HTML kódem. JavaScript kód umisťujte mezi značky <script> těsně před uzavírací značkou </body>. Tím se zajistí, že HTML obsah (text, obrázky, tabulky) se načte před JavaScript kódem, což zlepšuje rychlost načítání.
    • 



Závěrem


Nyní máte potřebné znalosti pro kombinování JavaScriptu s HTML při vytváření interaktivních webových stránek. Zvolený přístup by měl odpovídat charakteru webové aplikace. Pro malé aplikace je vhodný vložený kód, zatímco rozsáhlé aplikace vyžadují externí JavaScript soubor. 


Nezapomeňte prozkoumat knihovny pro tvorbu tabulek v JavaScriptu, které můžete ihned začít používat. 







Tweet
Share
Share
Pin
		


			



















12 nejlepších globálních mzdových řešení pro vaše mezinárodní vzdálené zaměstnance









Microsoft Loop for Collaboration a nástroj AI společnosti Adobe pro úpravy