Úvod
JavaScript netreba predstavovať. Je to jeden z najpopulárnejších programovacích jazykov pre vývoj webu. Funguje podobne ako HTML a CSS. Všetky tieto jazyky pomáhajú navrhovať a vyvíjať webové aplikácie a programy.
Ako je teda JavaScript konkrétne užitočný? S pomocou JavaScriptu môžete urobiť svoje webové aplikácie a webové stránky pomerne interaktívnymi. V modernej sfére nie je miesto pre uspokojenie sa s dosiahnutým. Musíte upútať pozornosť svojich divákov v prvých sekundách a udržať ich záujem. Niet pochýb o tom, že zaujímavý a responzívny webdizajn je jedným z najlepších spôsobov, ako to dosiahnuť. Našťastie väčšina prehliadačov JavaScript podporuje. Môže sa spustiť vo vašom prehliadači pomocou niektorých vstavaných enginov.
Pridanie JavaScriptu do HTML
Ak chcete pre svoju webovú aplikáciu použiť súbory JavaScriptu, musíte ich spustiť súbežne s HTML značkami. Existujú dva spôsoby, ako môžete pridať JavaScript do HTML. Jedným z prístupov je urobiť to inline v rámci HTML dokumentu. Druhým spôsobom je pridať ho ako samostatný súbor. Tento súbor sa stiahne spolu s HTML dokumentom.
V tomto návode podrobne preskúmame, ako môžete pridať JavaScript do HTML pomocou týchto dvoch metód.
Ako pridať JavaScript do HTML dokumentov inline
Najprv sa pozrieme na to, ako môžete pridať JavaScript do HTML dokumentu inline. Na tento účel musíte použiť vyhradenú HTML značku. Je to <script>. Táto značka obklopuje kód JavaScriptu. Značku môžete umiestniť kdekoľvek v celom vašom HTML kóde. To, kam ju umiestnite, závisí od toho, kedy chcete, aby sa JavaScript načítal.
Môžete ju napríklad umiestniť do sekcie <head>, sekcie <body> alebo dokonca za uzatváraciu značku </body>. Ak chcete udržať JavaScript mimo hlavného obsahu HTML kódu, bude lepšie, ak značku umiestnite do sekcie <head>. Tá bude obsahovať kód JavaScriptu. Na druhej strane môžete chcieť, aby sa váš kód JavaScriptu spúšťal v rámci rozloženia vašej webovej stránky. V takom prípade by ste mali značku umiestniť do sekcie <body>. Urobíte to napríklad vtedy, ak na generovanie obsahu používate document.write.
Lepším spôsobom, ako to pochopiť, by bol príklad s kódom. Predstavte si nasledujúci HTML dokument, ktorý je prázdny. Názov tohto dokumentu v prehliadači je Today’s Date:
|
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>Today's Date</title> </head> <body> </body> </html> |
Ako vidíte, nie je tu žiadna zmienka o JavaScripte. Dokument zatiaľ obsahuje iba HTML značky. Teraz by sme chceli pridať nejaký inline kód JavaScriptu, aby sa načítal a spustil súčasne. Predstavte si nasledujúcu časť kódu JavaScriptu:
|
1 2 |
let d = new Date(); alert("Dnešný dátum je " + d); |
Podľa vyššie uvedeného kódu umožňujeme našej webovej stránke zobraziť upozornenie s dnešným dátumom. Takže bez ohľadu na to, kedy návštevník stránku spustí, na stránke sa zobrazí aktuálny dátum.
Teraz, aby sme pridali túto časť kódu JavaScriptu do HTML dokumentu, použijeme značku <script>. V prvom rade musíte pridať kód JavaScriptu medzi značky <head>. To hovorí webovej stránke, že tento konkrétny kód sa musí načítať pred ostatným obsahom stránky. Kód môžete pridať pod značky <title>. Takto by ste to urobili:
|
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ý dátum</title> <script> let d = new Date(); alert("Dnešný dátum je " + d); </script> </head> <body> </body> </html> |
Váš kód JavaScript je teraz pridaný. Vaša webová stránka sa spustí a načíta tento skript pred zvyškom stránky. Keď spustíte svoju stránku, dostanete upozornenie s aktuálnym dátumom, niečo takéto:
Takto by ste pridali kód do sekcie <head> HTML dokumentu. Alternatívou by bolo pridať skript buď dovnútra, alebo mimo značiek <body>. Ako uvidíte v príklade nižšie, pridáme túto časť kódu za sekciu <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ý dátum</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Dnešný dátum je " + d + "</h1>" </script> </body> </html> |
V dôsledku tejto úpravy uvidíte po opätovnom načítaní stránky niečo takéto:
Ako pridať JavaScript do HTML pomocou samostatného súboru JavaScript
Malé skripty JavaScript fungujú dobre s HTML súbormi. Je to preto, že bežia celé na jednej stránke alebo menej. Ak pracujete s väčšími skriptami, ktoré zaberajú viacero stránok, súbor môže byť veľmi ťažko zrozumiteľný. Preto ho možno budete musieť pridať ako samostatný súbor JavaScript. Súbor by sa načítal súčasne s HTML dokumentom.
V tejto časti si povieme, ako môžete pridať JavaScript do HTML pomocou samostatného súboru. Kód je zvyčajne umiestnený v jednom alebo viacerých súboroch .js. HTML dokument bude na tieto súbory odkazovať ako na akýkoľvek iný externý zdroj. Dôvodov, prečo by ste mohli chcieť použiť úplne samostatný súbor JavaScript, je veľa. Hlavne to uľahčuje čítanie a pochopenie kódu. Nehovoriac o tom, že samostatné súbory umožňujú rýchle načítanie stránok z vyrovnávacej pamäte a ich údržba je tiež relatívne jednoduchšia.
Aby ste mohli využiť tieto výhody, musíte vedieť, ako ich navzájom prepojiť – súbor JavaScript a HTML dokument. Pre lepšie pochopenie si uvedieme príklad malého webového projektu. Tento predpokladaný projekt obsahuje hlavný index.html v koreňovom adresári, style.css v adresári css/ a script.js v adresári js/. Tu je náš malý projekt:
|
1 2 3 4 5 6 7 8 9 10 11 |
projekt/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Pre náš HTML kód použijeme dokument, ktorý sme použili predtým:
|
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ý dátum</title> </head> <body> </body> </html> |
Teraz, keď máme naše dva dokumenty, môžeme ich začať prepájať. Do súboru script.js musíme pridať JavaScript kód týkajúci sa dátumu. Pridáte ho ako nadpis <h1> nasledovne:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Dnešný dátum je " + d + "</h1>" |
Na prepojenie kódu s HTML dokumentom pridáte odkaz na skript. Odkaz by mal byť umiestnený buď vo vnútri, alebo pod sekciou <body> HTML šablóny. Tu je kód, ktorý tu použijete:
|
1 |
<script src="js/script.js"></script> |
Ako môžete vidieť, používame značku <script>. Táto značka odkazuje na súbor script.js, ktorý sa nachádza v adresári js/ projektu. Takto bude kód vyzerať v HTML dokumente:
|
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ý dátum</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Ak chcete, môžete vykonať niekoľko štylistických úprav na vylepšenie vašej stránky. Pridajme napríklad farbu pozadia pre nadpis <h1>. Túto úpravu vykonáme v súbore style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Keďže sa úprava má zobraziť v hlavičke, odkážeme na ňu v sekcii <head> HTML dokumentu. Takto vytvoríte odkaz na tento CSS súbor:
|
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ý dátum</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Teraz, keď sme vytvorili požadované odkazy, môžete si vizualizovať zmeny. Načítajte index.html vo svojom prehliadači a uvidíte stránku ako je táto:
Ak chcete kód aktualizovať, môžete upravovať všetky svoje stránky z jedného miesta. Vďaka tomu je údržba webových stránok veľmi jednoduchá. To je výhoda použitia samostatného súboru pre vaše JavaScriptové skripty.
Záver
Dúfame, že vám tento návod pomohol dozvedieť sa viac o procese pridávania JavaScriptu do HTML. Prebrali sme, ako to urobiť priamo v HTML dokumente (inline), ako aj to, ako ho pridať ako súbor .js. Teraz, keď ovládate základy, môžete s JavaScriptom v HTML dokázať oveľa viac.
Tu je niekoľko zdrojov z nášho blogu, ktoré vám pomôžu ďalej využívať JavaScript:
- Ak vytvárate vlastnú webovú aplikáciu, pozrite si nášho sprievodcu, ako si vybrať najlepšie nastavenie servera.
- Ak sa chcete naučiť, ako nastaviť blog pomocou Ghost, pozrite si tento návod.
- Pozrite si tento návod, aby ste sa naučili, ako nainštalovať Node.js na Ubuntu 18.04.
Príjemnú prácu s počítačom!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.