Uvod
JavaScript ne treba posebno predstavljati. To je jedan od najpopularnijih programskih jezika za web razvoj. Radi slično kao HTML i CSS. Svi ovi jezici pomažu u dizajnu i razvoju web aplikacija i programa.
Dakle, kako je točno JavaScript koristan? Uz pomoć JavaScripta, svoje web aplikacije i web stranice možete učiniti prilično interaktivnima. U modernoj sferi nema mjesta samozadovoljstvu. Morate privući pozornost svojih gledatelja u prvih nekoliko sekundi i zadržati njihov angažman. Nema sumnje da je zanimljiv i responzivan web dizajn jedan od najboljih načina za to. Srećom, većina preglednika podržava JavaScript. Može se pokrenuti na vašem pregledniku uz pomoć ugrađenih enginea.
Dodavanje JavaScripta u HTML
Ako želite koristiti JavaScript datoteke za svoju web aplikaciju, morate ih pokrenuti usporedno s HTML oznakama. Postoje dva načina na koja možete dodati JavaScript u HTML. Jedan pristup je da to učinite inline unutar HTML dokumenta. Drugi način je da ga dodate kao zasebnu datoteku. Ova će se datoteka preuzeti zajedno s HTML dokumentom.
U ovom vodiču, detaljno ćemo istražiti kako možete dodati JavaScript u HTML koristeći ove dvije metode.
Kako dodati JavaScript u HTML dokumente inline
Prvo ćemo vidjeti kako možete dodati JavaScript u HTML dokument inline. Da biste to učinili, morate koristiti namjensku HTML oznaku. To je <script>. Ova oznaka obavija JavaScript kod. Oznaku možete postaviti bilo gdje u cijelom HTML kodu. Gdje ćete je postaviti ovisi o tome kada želite da se JavaScript učita.
Na primjer, možete je postaviti u odjeljak <head>, odjeljak <body> ili čak nakon zatvarajuće oznake </body>. Ako želite držati JavaScript podalje od glavnog sadržaja HTML koda, bolje je staviti oznaku u odjeljak <head>. On će sadržavati JavaScript kod. S druge strane, možda želite da se vaš JavaScript kod izvodi unutar izgleda vaše web stranice. Ako je to slučaj, trebali biste postaviti oznaku u odjeljak <body>. To ćete učiniti ako, recimo, koristite document.write za generiranje sadržaja.
Bolji način da to razumijete bio bi kroz primjer s kodom. Razmotrite sljedeći HTML dokument koji je prazan. Naslov ovog dokumenta u pregledniku 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> |
Kao što vidite, ovdje nema ni traga JavaScriptu. Dokument za sada sadrži samo HTML oznake. Sada bismo željeli dodati malo JavaScript koda inline kako bi se istovremeno učitavao i izvodio. Razmotrite sljedeći dio JavaScript koda:
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
Prema gornjem kodu, omogućujemo našoj web stranici da prikaže upozorenje s današnjim datumom. Dakle, bez obzira na to kada posjetitelj pokrene stranicu, ona će prikazati trenutni datum.
Sada, kako bismo dodali ovaj dio JavaScript koda u HTML dokument, koristit ćemo oznaku <script>. Prije svega, trebate dodati JavaScript kod između oznaka <head>. To govori web stranici da se ovaj određeni kod mora učitati prije ostalog sadržaja stranice. Kod možete dodati ispod oznaka <title>. Evo kako biste to učinili:
|
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>Današnji datum</title> <script> let d = new Date(); alert("Današnji datum je " + d); </script> </head> <body> </body> </html> |
Vaš JavaScript kod je sada dodan. Vaša web stranica će se pokrenuti i učitati ovu skriptu prije ostatka stranice. Kada pokrenete svoju web lokaciju, primit ćete upozorenje s trenutnim datumom, otprilike ovako:
Tako biste dodali kod u odjeljak <head> HTML dokumenta. Alternativa bi bila dodavanje skripte unutar ili izvan oznaka <body>. Kao što ćete vidjeti u donjem primjeru, dodat ćemo dio koda nakon odjeljka <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>Današnji datum</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Današnji datum je " + d + "</h1>" </script> </body> </html> |
Kao rezultat ove izmjene, vidjet ćete nešto poput ovoga nakon ponovnog učitavanja stranice:
Kako dodati JavaScript u HTML pomoću zasebne JavaScript datoteke
Male JavaScript skripte dobro funkcioniraju s HTML datotekama. To je zato što se u cijelosti izvode na jednoj stranici ili manje. Ako radite s većim skriptama koje zauzimaju više stranica, datoteka može postati vrlo teška za razumijevanje. Zato ćete je možda morati dodati kao zasebnu JavaScript datoteku. Datoteka bi se učitavala istovremeno s HTML dokumentom.
U ovom odjeljku raspravljat ćemo o tome kako možete dodati JavaScript u HTML pomoću zasebne datoteke. Kod je obično smješten u jednoj ili više .js datoteka. HTML dokument će referencirati ove datoteke kao i bilo koji drugi vanjski resurs. Razlozi zašto biste uopće željeli koristiti zasebnu JavaScript datoteku su brojni. Uglavnom, to čini kod mnogo lakšim za čitanje i razumijevanje. Da ne spominjemo, zasebne datoteke omogućuju brzo učitavanje predmemoriranih stranica i relativno ih je lakše održavati.
Kako biste iskoristili ove prednosti, morate znati kako ih međusobno povezati - JavaScript datoteku i HTML dokument. Kako bismo vam pomogli razumjeti, uzet ćemo primjer malog web projekta. Ovaj pretpostavljeni projekt sadrži glavni index.html u korijenu, style.css u css/ direktoriju i script.js u js/ direktoriju. Evo našeg malog projekta:
|
1 2 3 4 5 6 7 8 9 10 11 |
projekt/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Za naš HTML označni jezik koristit ćemo dokument koji smo prethodno koristili:
|
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>Današnji datum</title> </head> <body> </body> </html> |
Sada kada imamo naša dva dokumenta, možemo ih početi povezivati. Moramo dodati JavaScript kod koji se odnosi na datum u datoteku script.js. Dodat ćete ga kao <h1> zaglavlje na sljedeći način:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Današnji datum je " + d + "</h1>" |
Kako biste povezali kod s HTML dokumentom, dodat ćete referencu na skriptu. Referenca bi trebala biti prisutna unutar ili ispod odjeljka <body> HTML predloška. Evo koda koji ćete ovdje koristiti:
|
1 |
<script src="js/script.js"></script> |
Kao što vidite, koristimo oznaku <script>. Oznaka ukazuje na datoteku script.js koja se nalazi u js/ direktoriju projekta. Evo kako će se kod pojaviti u HTML dokumentu:
|
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>Današnji datum</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Ako želite, možete napraviti neke stilske izmjene kako biste dotjerali svoju stranicu. Na primjer, dodajmo boju pozadine u <h1> zaglavlje. Ovu izmjenu napravit ćemo u datoteci style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Budući da se izmjena treba prikazati u zaglavlju, referencirat ćemo je u odjeljku <head> HTML dokumenta. Evo kako ćete napraviti referencu na ovu CSS datoteku:
|
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>Današnji datum</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Sada kada smo napravili potrebne reference, možete vizualizirati promjene. Učitajte index.html u svoj preglednik i vidjet ćete stranicu poput ove:
Ako želite ažurirati kod, možete uređivati sve svoje stranice s jednog mjesta. To čini održavanje web stranica vrlo jednostavnim. To je prednost korištenja zasebne datoteke za vaše JavaScript skripte.
Zaključak
Nadamo se da vam je ovaj vodič pomogao saznati više o procesu dodavanja JavaScripta u HTML. Pokrili smo kako to učiniti unutar samog HTML dokumenta (inline), kao i kako ga dodati kao .js datoteku. Sada kada znate osnove, možete učiniti puno više s JavaScriptom u HTML-u.
Evo nekoliko resursa s našeg bloga koji će vam pomoći da dodatno iskoristite JavaScript:
- Ako gradite vlastitu web aplikaciju, pogledajte naš vodič o tome kako odabrati najbolju konfiguraciju poslužitelja.
- Ako želite naučiti kako postaviti blog s Ghostom, pogledajte ovaj vodič.
- Pogledajte ovaj vodič kako biste naučili kako instalirati Node.js on Ubuntu 18.04.
Sretno programiranje!
Komentari
Još nema komentara. Budite prvi.