Jak používat JavaScript v HTML k vytváření interaktivních webových stránek
HTML, CSS a JavaScript jsou tři hlavní jazyky používané při vývoji front-endu. HTML je značkovací jazyk, zatímco CSS je stylovací jazyk.
JavaScript je objektově orientovaný programovací jazyk, který se většinou používá při vytváření klientské strany webových a mobilních aplikací. Tento open-source dynamický jazyk se stal jedním z nejpoužívanějších programovacích jazyků díky své flexibilitě a snadnému porozumění.
Pomocí HTML5 a CSS3 můžete vytvářet statické webové stránky. Chcete-li však takovému webu přidat interaktivitu, musíte použít programovací jazyk, jako je JavaScript, kterému prohlížeče rozumí.
Tento článek vysvětlí, proč potřebujete používat JavaScript s HTML, různé přístupy k přidávání kódu JavaScript do HTML a osvědčené postupy pro kombinaci těchto dvou jazyků.
Proč je klíčové používat JavaScript v HTML
- Přidat interaktivitu: Interaktivita reaguje na uživatelské vstupy/akce v reálném čase bez opětovného načítání prohlížeče. Například můžete mít počítadlo, které se zvýší o jedničku pokaždé, když na něj kliknete. Dalším příkladem může být odpověď, která uživatelům sděluje, že jejich zpětná vazba byla odeslána pokaždé, když kliknou na tlačítko Odeslat.
- Ověření na straně klienta: K zachycení správných dat ve formulářích můžete použít JavaScript. Tento programovací jazyk můžete například použít k ověření uživatelských vstupů na přihlašovací stránce podle formátu e-mailu, délky hesla a kombinace znaků, které se mají použít.
- Manipulace s DOM: JavaScript nabízí objektový model dokumentu (DOM), který usnadňuje dynamickou změnu obsahu webové stránky. Díky této technologii se obsah stránky aktualizuje automaticky na základě uživatelských vstupů bez opětovného načítání webové stránky.
- Kompatibilita mezi prohlížeči: JavaScript je kompatibilní se všemi moderními prohlížeči. Webové stránky vytvořené pomocí HTML, CSS a JavaScriptu tak budou perfektně fungovat v různých prohlížečích.
Předpoklady
- Základní porozumění HTML: Rozumíte základním HTML tagům, umíte přidávat tlačítka a vytvářet formuláře pomocí HTML.
- Základní porozumění CSS: Rozumíte konceptům CSS, jako jsou id, třída a selektory prvků.
- Editor kódu: Můžete použít editor kódu, jako je VS Code nebo Atom. Pokud nechcete do systému instalovat software, můžete také použít online kompilátor JavaScriptu.
Jak používat JavaScript v HTML
K přidání kódu JavaScript do HTML můžete použít tři hlavní přístupy. Zkoumáme každý přístup a kde se nejlépe hodí.
#1. Vložení kódu mezi značku
Tento přístup vám umožňuje mít kódy JavaScript a HTML ve stejném souboru (souboru HTML). Můžeme začít vytvořením složky projektu, kde si ukážeme, jak to funguje. Tyto příkazy můžete použít k zahájení;
mkdir javascript-html-playground cd javascript-html-playground
Vytvořte dva soubory; index.html a style.css
Přidejte tento spouštěcí kód do souboru HTML;
<!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">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Přidejte tento startovací kód do svého souboru CSS;
.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;
}
Když je webová stránka vykreslena, budete mít něco takového;
Nyní můžeme přidat jednoduchý kód JavaScript, který po kliknutí na tlačítko Odeslat říká „odesláno“. Refaktorovaný HTML kód s JavaScriptem bude;
<!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">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>
Když kliknete na tlačítko Odeslat, dostanete něco podobného;
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (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">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>
Po kliknutí na odeslat se ve vašem prohlížeči zobrazí malé okno se slovy „inline odeslat“.
Výhody přidání JavaScriptu jako vloženého kódu
- Rychlá implementace: Při psaní kódu HTML a JavaScript nemusíte přecházet z jednoho dokumentu do druhého.
- Ideální pro malou aplikaci: Pokud máte malou aplikaci, která nevyžaduje mnoho interaktivity, je inline JavaScript perfektní volbou.
Nevýhody přidání JavaScriptu jako vloženého kódu
- Kód nelze znovu použít: Pokud má vaše aplikace několik formulářů, vytvoříte kód JavaScript pro každý formulář.
- Zpomaluje výkon: Velké bloky kódu v dokumentu HTML mohou zpomalit rychlost načítání.
- Čitelnost kódu: Jak se kódová základna neustále rozrůstá, snižuje se čitelnost kódu.
#3. Vytvoření externího souboru JavaScript
Jak vaše aplikace roste, zjistíte, že přidání kódu JavaScript přímo do souboru HTML není dobrý nápad. Pokud máte v souboru HTML mnoho kódu, pravděpodobně budete mít webové stránky s nízkou rychlostí načítání.
Vytvořte nový soubor script.js, který přenese váš kód JavaScript.
Importujte soubor script.js do souboru HTML;
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
Nová aktualizovaná stránka HTML bude mít tento 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" /> <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">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Přidejte tento kód do souboru script.js;
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});
Tento JavaScript dělá následující;
- Máme posluchač událostí, který čeká na spuštění události DOMContentLoaded.
- Funkce zpětného volání se provede po vyvolání události DOMContentLoaded.
- Kód používá querySelector k výběru formuláře.
- Event.preventDefault() používáme, abychom zabránili DOM vybrat výchozí chování (obnovit stránku nebo přejít na novou stránku), když je spuštěna událost odeslání.
- Po spuštění události odeslání se spustí zpráva „externí odeslání listu JS“.
JavaScript v HTML: Nejlepší postupy
- Minimalizace velikosti souborů: Čím větší je velikost souboru, tím déle trvá načtení do prohlížeče. Minifikací se odstraní všechny nežádoucí znaky ve zdrojovém kódu, aniž by se změnil jeho význam nebo výkon. K vytvoření kompaktní kódové základny můžete použít nástroje jako Yahoo YUI Compressor a HTMLMinifier.
- Udržujte svůj kód uspořádaný: Díky tomu se bude snadno číst a udržovat. K uspořádání kódu můžete použít rozšíření, jako je Prettier.
- Používejte externí knihovny: Pokud knihovna může provádět určitý úkol pro vaši aplikaci, není nutné psát kód od začátku. Vyvarujte se však používání více knihoven, které dosahují stejných cílů na stejném projektu.
- Optimalizujte umístění JavaScriptu: Pokud máte v úmyslu přidat kód JavaScript do souboru HTML, ujistěte se, že následuje za kódem HTML. Před zavřením značky
