Dok HTML definira sadržaj web stranica, CSS oblikuje njihov izgled a JavaScript služi za dinamični i interaktivni sadržaj na web stranicama.
JavaScript, HTML i CSS
Što je JavaScript?
JavaScript je skriptni interpreterski jezik. To znači da se skripte izvode bez predhodne kompilacije.
JavaScript je potpuno različit od programskog jezika Java, koncepcijski i po načinu izvedbe. Java je snažniji i složeniji programski jezik.
Što se može sa JavaScriptom?
- Pojavljivanje dinamičkog teksta u HTML dokumentima
- JavaScript može izvršavati radnje koje iniciraju neki događaji
- Ćitati i ispisivati HTML elemente
- Mijenjati HTML elemente, HTML atribute i CSS
- Provjeravati valjanost podataka unesenih od strane posjetioca web stranice
- Detektirati podatke posjetitelja web stranice (npr. Internet pretraživač, veličina ekrana, OS itd.)
- Rad sa kolačićima
- itd.
JavaScript i HTML DOM
HTML DOM (Document Object Model) je standard za pristup HTML elementima. JavaScript može mijenjati HTML sadržaj – raditi sa DOM-om.
Kako se koristi JavaScript?
JavaScript se umeće direktno u HTML kod. U HTML kod možete umetnuti onoliko JavaScripti koliko želite.
Umetnemo li JavaScrip skriptu u zaglavlje HTML dokumenta (u <head> područje), ista će se izvršiti po pozivu web stranice, dok će se JavaScript kod koji se nalazi u tijelu HTML dokumenta (<body> područje) izvršiti onda kada se web stranica učita. Stavite li JavaScriptu na dno HTML dokumenta dobiti ćete na brzini učitavanja web stranice.
JavaScript kod se umeće između <script> </script> tagova. Prije se za umetanje JavaScript koda koristilo type=”text/javascript”, što više nije potrebno.
Tako će sve što se nalazi između <script> html para tagova, browser razumjeti kao JavaScript code:
<script>
// This is comment
</script>
JavaScript u <head> i <body> dijelovima web stranice – primjeri
Primjer 1 (head)
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Isprobajte sami mijenjati kod ovog primjera ovdje.
Primjer 2 (body)
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Isprobajte sami mijenjati kod ovog primjera ovdje.
JavaScript u vanjskoj datoteci
Koristite li JavaScript kod na više različitih web stranica iskoristite mogućnost postavljanja koda u vanjsku datoteku. Time čete povećati brzinu učitavanja web stranica te kod rasteretiti Google učitavanjem nepotrebnog koda kod indexiranja vašeg web sajta.
Datoteke JavaScripte imaju ekstenziju .js. Ove datoteke možete staviti i u <head>, i u <body> dio vaše web stranice. Ova datoteke ne treba sadržavati <script> tag.
Ovo je primjer pozivanja vanjske datoteke:
<html>
<body>
<script src=“myScript.js”></script>
</body>
</html>