Uvod u JavaScript (v1.0 - MAJ 2010)

01 Javascript i HTML

JavaScript se uvodi u HTML na bilo kom mestu. Najčešće je to unutar zaglavlja. Za JavaScript program koristimo posebnu oznaku <script>.

<script type="text/javascript">
...
</script>

02 Korisničke funkcije

Najveći deo JavaScript programa se smešta unutar funkcija. Svaka funkcija se obeležava jedinstvenim nazivom. Posle naziva se navode zagrade, a unutar njih opcioni parametri. Preko parametara se funkciji prenose neke vrednosti ili reference na objekte. Unutar funkcije se navode naredbe, a posebna naredba je naredba return (koja može i ne mora da se navede) i koja označava vrednost koju funkcija vraća.

function naziv([parametri])
{
naredba
naredba
...
[return vrednost]
}

Promenljive koje se definišu unutar funkcije, važe samo tokom izvršavanja funkcije. Inače unutar funkcije se mogu koristiti i globalne promenljive koje su definisane van svih funkcija.

var y = 2;

function mojaFunkcija()
{
var x = 10;
var tekst = "foto.jpg";
document.getElementById("slika").src = tekst;
var z = x - y;
return z;
}

function klik(obj)
{
obj.innerHTML = "Kliknuli ste na ovaj tekst.";
}

03 Parametri događaja

JavaScript naredbe se mogu izvršavati vezano za neki događaj na stranici (npr. prilikom učitavanja strane ili kada se klikne mišem na neki elemenat strane). Svaki HTML elemenat ima određene prametre događaja. Kao vrednost ovih parametara se najčešće navodi poziv neke unapred definisane funkcije. Neki od ovih parametara su:

<div onclick="klikMisa();">KLIKNI OVDE</div>

Naravno, svakoj od ovih funkcija je moguće proslediti tekstualne ili numeričke parametre. Poseban slučaj predstavlja upotreba ključne reči this kojom se prosleđuje referenca na elemenat iz koga se poziva funkcija.

U sledećem primeru možemo videti dva načina kako se vrše pozivi funkcijama. Obe funkcije rade istu stvar - menjaju boju pozadine kliknutog elementa u belu. Razlikuju se načini pristupa tim elementima. U prvoj navodimo tekst preko koga će se u JavaScriptu pronaći elemenat, a u drugom referencu. Oba načina imaju svoju upotrebnu vrednost.

<script type="text/javascript">
function klikPrvi(naziv)
{
document.getElementById(naziv).style.backgroundColor = "#fff";
}

function klikDrugi(elemenat)
{
elemenat.style.backgroundColor = "#fff";
}
</script>

...

<div id="prvi" onclick="klikPrvi('prvi');">PRVI POZIV</div>

<div onclick="klikDrugi(this);">DRUGI POZIV</div>

04 Objekat document

Objekat document predstavlja celu HTML stranicu. Preko ovog objekta možemo menjati izgled i sadržaj stranice.

document.getElementById("id")

05 Objekat location

Objekat location omogućava manipulaciju web adresom na kojoj se trenutno nalazimo.

location.href = "http://www.visokaturisticka.edu.rs/predmeti.php";

06 Elementi stranice

Svojstva elemenata dokumenta

document.getElementById("nesto").innerHTML = "Ovo se pojavljuje kao tekst";
tekstPolje.value = "I ovo je tekst!";

Svojstva slike (IMG elemenat)

slika.src = "fotografija.jpg";
slika.width = 80;
slika.height = 35;

07 Stil

Podobjekat style postoji za veliki broj elemenata i koristi se za upravljanje CSS atributima. Ima veliki broj svojstava, a ovde ćemo navesti samo neka.

objekat.style.backgroundColor = "#ffffcc";
objekat.style.display = "block";
objekat.style.position = "absolute";
objekat.style.top = 100; // isto kao "100px";
objekat.style.left = "50%";
objekat.className = "nazivStila";

08 Primer 1

Na stranici se nalazi blok teksta označen kao "spavalica" sa tekstom "Vaš kompjuter spava". Na stranici se takođe nalazi i polje za unos teksta označeno kao "poruka". Kada kliknemo na blok teksta treba da se promeni izgled i tekst u bloku, kao i da se ispiše poruka u polju.

Na stranici se takođe nalazi i dugmence. Kada se mišem pređe preko dugmenceta tekst se podeblja, a kada se miš skloni, tekst se vrati u normalu. Kada se klikne na dugmence, potpuno se promeni CSS stil bloka u stil "budan". Ovo će raditi ukoliko se na dugmence klikne pre nego što se klikne na tekst, pošto su individualna podešavanja atributa stila jača od podešavanja u CSS stilu.

Primer CSS stila i JavaScript funkcija je naveden u polju ispod.

<style type="text/css" media="all">
.budan {
background-color: #004;
color: #ffd;
font-weight: bold;
}
</style>

<script type="text/javascript">
function spavalicaKlik()
{
var obj = document.getElementById("spavalica");

obj.innerHTML = "Zašto me budite?";
obj.style.textAlign = "center";
obj.style.color = "#a00";
obj.style.backgroundColor = "#ffd";
obj.style.borderColor = "black";
obj.style.borderStyle = "dotted";
obj.style.borderWidth = "2px";

document.getElementById("poruka").value = "Da, sada je probuđen!";
}

function dugmeIn(gumb)
{
gumb.style.fontWeight = "bold";
}

function dugmeOut(gumb)
{
gumb.style.fontWeight = "normal";
}

function dugmeKlik()
{
document.getElementById("spavalica").className = "budan";
}
</script>

U HTML-u su elementi navedeni kao:

<div id="spavalica" onclick="spavalicaKlik();">Vaš kompjuter spava</div>
<p><input id="poruka" type="text" value="" /></p>
<p><input type="button" onmouseover="dugmeIn(this);" onmouseout="dugmeOut(this);" onclick="dugmeKlik();" value="Prvo klikni ovde" /></p>

Ovde možete isprobati kako primer funkcioniše.

Vaš kompjuter spava

Korisni linkovi