Úvod
JavaScript netřeba představovat. Je to jeden z nejpopulárnějších programovacích jazyků pro vývoj webu. Funguje podobně jako HTML a CSS. Všechny tyto jazyky pomáhají navrhovat a vyvíjet webové aplikace a programy.
Jak je tedy JavaScript konkrétně užitečný? S pomocí JavaScriptu můžete své webové aplikace a stránky učinit velmi interaktivními. V moderní sféře není prostor pro ustrnutí. Musíte upoutat pozornost svých návštěvníků v prvních několika sekundách a udržet je zapojené. Není pochyb o tom, že zajímavý a responzivní webdesign je jedním z nejlepších způsobů, jak toho dosáhnout. Naštěstí většina prohlížečů JavaScript podporuje. Lze jej spustit ve vašem prohlížeči s pomocí vestavěných enginů.
Přidání JavaScriptu do HTML
Pokud chcete pro svou webovou aplikaci používat soubory JavaScriptu, musíte je spouštět souběžně s HTML kódem. Existují dva způsoby, jak můžete JavaScript do HTML přidat. Jedním z přístupů je provést to inline v rámci HTML dokumentu. Druhým způsobem je přidat jej jako samostatný soubor. Tento soubor se stáhne společně s HTML dokumentem.
V tomto návodu podrobně prozkoumáme, jak můžete přidat JavaScript do HTML pomocí těchto dvou metod.
Jak přidat JavaScript do HTML dokumentů inline
Nejprve se podíváme na to, jak můžete přidat JavaScript do HTML dokumentu inline. K tomu musíte použít vyhrazenou HTML značku. Je to <script>. Tato značka obaluje kód JavaScriptu. Značku můžete umístit kamkoli do celého HTML kódu. To, kam ji umístíte, závisí na tom, kdy chcete, aby se JavaScript načetl.
Můžete ji například umístit do sekce <head>, sekce <body> nebo dokonce za uzavírací značku </body>. Pokud chcete JavaScript udržet mimo hlavní obsah HTML kódu, bude lepší umístit značku do sekce <head>. Ta bude obsahovat kód JavaScriptu. Na druhou stranu můžete chtít, aby se váš JavaScript kód spouštěl uvnitř rozvržení vaší webové stránky. V takovém případě byste měli značku umístit do sekce <body>. To uděláte například tehdy, pokud k generování obsahu používáte document.write.
Lepším způsobem, jak tomu porozumět, by byl příklad s kódem. Zvažte následující HTML dokument, který je prázdný. Titulek tohoto dokumentu v prohlížeči je Dnešní datum:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dnešní datum</title> </head> <body> </body> </html> |
Jak vidíte, není zde po JavaScriptu ani památky. Dokument zatím obsahuje pouze HTML kód. Nyní bychom chtěli přidat nějaký inline kód JavaScriptu, aby se načetl a spustil současně. Zvažte následující část kódu JavaScriptu:
|
1 2 |
let d = new Date(); alert("Dnešní datum je " + d); |
Podle výše uvedeného kódu umožňujeme naší webové stránce zobrazit upozornění s dnešním datem. Takže bez ohledu na to, kdy návštěvník web spustí, stránka zobrazí aktuální datum.
Nyní, abychom tuto část kódu JavaScriptu přidali do HTML dokumentu, použijeme značku <script>. Nejprve musíte přidat kód JavaScriptu mezi značky <head>. To webové stránce říká, že tento konkrétní kód se musí načíst před ostatním obsahem stránky. Kód můžete přidat pod značky <title>. Zde je návod, jak na to:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dnešní datum</title> <script> let d = new Date(); alert("Dnešní datum je " + d); </script> </head> <body> </body> </html> |
Váš kód JavaScript je nyní přidán. Vaše webová stránka se spustí a načte tento skript před zbytkem stránky. Po spuštění webu se zobrazí upozornění s aktuálním datem, nějak takto:
Takto byste přidali kód do sekce <head> dokumentu HTML. Alternativou by bylo přidat skript buď dovnitř, nebo vně značek <body>. Jak uvidíte v následujícím příkladu, část kódu přidáme za sekci <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dnešní datum</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Dnešní datum je " + d + "</h1>" </script> </body> </html> |
V důsledku této úpravy uvidíte po opětovném načtení stránky něco takového:
Jak přidat JavaScript do HTML pomocí samostatného souboru JavaScriptu
Malé skripty v JavaScriptu fungují dobře se soubory HTML. Je to proto, že běží celé na jedné stránce nebo méně. Pokud pracujete s většími skripty, které zabírají více stránek, může být soubor velmi obtížně srozumitelný. Proto může být nutné jej přidat jako samostatný soubor JavaScriptu. Soubor by se načítal současně s dokumentem HTML.
V této části si ukážeme, jak můžete přidat JavaScript do HTML pomocí samostatného souboru. Kód je obvykle umístěn v jednom nebo více souborech .js. Dokument HTML bude na tyto soubory odkazovat jako na jakýkoli jiný externí prostředek. Důvodů, proč byste mohli chtít použít zcela samostatný soubor JavaScriptu, je celá řada. Především to výrazně usnadňuje čtení a pochopení kódu. Nemluvě o tom, že samostatné soubory umožňují rychlé načítání stránek z mezipaměti a jejich údržba je také relativně snazší.
Chcete-li těchto výhod využít, musíte vědět, jak je vzájemně propojit – soubor JavaScriptu a dokument HTML. Pro snazší pochopení si vezmeme příklad malého webového projektu. Tento domnělý projekt obsahuje hlavní soubor index.html v kořenovém adresáři, style.css v adresáři css/ a script.js v adresáři js/. Zde je náš malý projekt:
|
1 2 3 4 5 6 7 8 9 10 11 |
projekt/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Pro náš HTML kód použijeme dokument, který jsme použili dříve:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dnešní datum</title> </head> <body> </body> </html> |
Nyní, když máme oba dokumenty, můžeme je začít propojovat. Do souboru script.js musíme přidat kód JavaScriptu týkající se data. Přidáte jej jako nadpis <h1> následovně:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Dnešní datum je " + d + "</h1>" |
Chcete-li kód propojit s dokumentem HTML, přidáte odkaz na skript. Odkaz by měl být umístěn buď uvnitř sekce <body> šablony HTML, nebo pod ní. Zde je kód, který k tomu použijete:
|
1 |
<script src="js/script.js"></script> |
Jak vidíte, používáme značku <script>. Tato značka odkazuje na soubor script.js, který se nachází v adresáři js/ projektu. Zde je ukázka, jak bude kód vypadat v dokumentu HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dnešní datum</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Pokud chcete, můžete provést několik stylistických úprav a stránku tak vylepšit. Přidejme například barvu pozadí pro nadpis <h1>. Tuto úpravu provedeme v souboru style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Protože se má úprava zobrazit v hlavičce, odkážeme na ni v sekci <head> dokumentu HTML. Zde je návod, jak vytvořit odkaz na tento soubor CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dnešní datum</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Nyní, když jsme vytvořili požadované odkazy, si můžete změny vizualizovat. Načtěte index.html ve svém prohlížeči a uvidíte stránku jako je tato:
Pokud chcete kód aktualizovat, můžete upravovat všechny své stránky z jednoho místa. Díky tomu je údržba webových strnek velmi snadná. To je výhoda použití samostatného souboru pro vaše JavaScriptové skripty.
Závěr
Doufáme, že vám tento návod pomohl dozvědět se více o procesu přidávání JavaScriptu do HTML. Probrali jsme, jak jej přidat přímo do dokumentu HTML (inline), i jak jej přidat jako soubor .js. Nyní, když znáte základy, můžete s JavaScriptem v HTML dělat mnohem více.
Zde je několik zdrojů z našeho blogu, které vám pomohou JavaScript dále využívat:
- Pokud vytváříte vlastní webovou aplikaci, podívejte se na našeho průvodce, jak vybrat nejlepší nastavení serveru.
- Pokud se chcete naučit, jak nastavit blog pomocí Ghost, podívejte se na tento návod.
- Podívejte se na tento návod, abyste se dozvěděli, jak nainstalovat Node.js na Ubuntu 18.04.
Přejeme příjemnou práci s počítačem!
Komentáře
Zatím žádné komentáře. Buďte první.