Uvođenje JavaScript-a na web stranicu
Program se uvodi na stranicu korišćenjem <script> oznake. Ova oznaka se može navesti bilo gde na stranici. Dakle, unutar ovog elementa se nalaze JavaScript naredbe koje web čitač interpretira. Samim tim je i vaš program vidljiv svakome ko analizira izvorni kod stranice.
<script>
JavaScript program
</script>
Naša preproruka je da se program ipak odvoji od stranice. Ne zato što ćete tako "sakriti" program - to je praktično nemoguće, već zato što će vaša stranica biti "čistija". Kao što smo odvajali sadržaj od prezentacije (HTML od CSS-a), tako treba da odvojimo i sadržaj od ponašanja (tačnije od programskog dela).
Znači najbolje je da se JavaScript izdvoji u poseban .js fajl. Ovakav fajl se lako može povezati sa jednom ili više HTML stranica, korišćenjem oznake <script>.
<script src="URL JS fajla"></script>
Ako je baš neophodno uvoditi program unutar same stranice, uradite to unutar <head> odeljka.
JS unutar HTML stranice
Iako preporučujemo da ograničite JavaScript na zaglavlje, moguće ga je ubaciti bilo gde u dokumentu.
<html>
<head>
...
<script>
// deo programa unutar zaglavlja
function radi()
{
console.log("Nesto je uradjeno);
}
</script>
...
</head>
<body>
...
<script>
// deo programa unutar stranice
radi();
</script>
...
</body>
</html>
Ipak, možda je najbolje da ceo (ili makar najveći deo) programa bude u zasebnom fajlu. Ovde možete videti kako se vrši povezivanje sa fajlom program.js.
<html>
<head>
...elementi zaglavlja
<script src="program.js"></script>
</head>
<body>
...sadržaj stranice
</body>
</html>
Izvršavanje JavaScript programa
JavaScript se izvršava u onom trenutku kada web čitač naiđe na njega. Zašto je ovo važno? Program na web stranici nam služi da bismo nešto radili sa elementima stranice. Znači da nam je jako važno da naš program može pristupiti HTML elementima. Međutim, ako web čitač naiđe na JavaScript pre nego što HTML elementi "dođu na red" - program neće moći da radi sa njima.
Zbog toga se ponekad zahteva da se <script> ubaci na sam kraj stranice. Drugo rešenje ovog problema bi bilo "izolovanje" programa unutar funkcija (funkcije se ne izvršavaju dok se ne pozovu), a početni poziv se dešava kao obrada događaja kompletnog učitavanja stranice.
Redosled izvršavanja
Pogledajte koje HTML elemente mogu da "dohvate" delovi JS programa, zavisno od mesta na stranici.
<html>
<head>
<script>
// još ništa nije učitano
</script>
</head>
<body>
<h1>...Naslov...</h1>
<script>
// ovaj skript može da radi sa glavnim naslovom, ali ne i sa DIV blokom
</script>
<div>...DIV blok...</div>
<script>
// ovaj skript može da radi sa svim elementima
</script>
</body>
</html>