1. Uvod u JavaScript događaje

Pomoću JavaScripta može da se definiše kakva akcija treba da se izvrši kada se nešto desi u web stranici ili na nekom njenom elementu. Primeri takvih događaja su: završeno učitavanje web strane, klik na neki element, prelazak mišem preko nekog elementa, istek nekog zadatog vremena, ....

Može se reći i da su događaji neki signali koji se generišu kada se odigra neka akcija. JavaScript može da detektuje te signale i mogu da se pišu programi koji reaguju na njih.

Neki od najčešćih događaja u JavaScript-u su:

  • click  (aktivira se kada korisnik klikne na element),
  • load  (aktivira se prilikom učitavanja stranice),
  • mouseover (pomeranje miša - aktivira se kada korisnik pređe mišem preko elementa),
  • mouseout (aktivira se kada korisnik pomeri miš van područja elementa),
  • input (unos teksta - aktivira se kada korisnik unese tekst u input polje),
  • keydown (pritisak na dugme - aktivira se kada korisnik pritisne taster na tastaturi),
  • submit  (slanje podataka sa forme - aktivira se kada korisnik pošalje formu - klikne na dugme tipa submit),
  • scroll 
  • .... ima ih još dosta ali se neće svi ovde navoditi 😊

U nastavku su dva primera: u jednom se menja sadržaj, a u drugom izgled web stranice.

Menjanje sadržaja web stranice

Primer: 

Kreirati jedan jednostavan HTML dokument sa paragrafom sa nekim tekstom i dugmetom “promeni tekst”. 

Dodati JavaScript kod koji će klikom na dugme pozvati funkciju koja menja tekst paragrafa

Rešenje:

Da bismo mogli u JavaScript kodu da pozovemo neki element ili promenimo neki element HTML stranice, takav element moramo označiti ID-ijem

Za selektovanje elementa sa nekim određenim ID- ijem koristimo funkciju  document.getElementByID(“id”)

...
document.getElementById("dugme").onclick = function() {
   document.getElementById("tekst").innerHTML="Zdravo";
}
....


Objašnjenje koda:

Naredbom document.getElementById(“dugme”).onclick zapravo u postojećem dokumentu dobavljamo element kojem je id dugme. Na klik dugmeta treba da se promeni tekst paragrafa, te ponovo imamo funkciju document.getElementById(), ali ovaj put sa id-jem paragrafa

document.getElementById("text").innerHTML="Zdravo”;

Ova linija koda selektuje element sa id-jem text i njegov sadržaj menja tekstom (innerHTML) “Zdravo”

Zadatak:

Na postojeći kod dodati drugi paragraf sa tekstom “JavaScript je...” i dugme “Proširi text”.

Klikom na dugme “Proširi text” potrbno je da se na postojeći paragraf doda string “sjajan”

Napomena: operator za dodavanje stringa je +

Menjanje stila stranice

Slično kao u prethodnom primeru, element kojem menjamo stil pozivamo sa getElementById(“”).style pa dalje šta menjamo: font, display, širinu, visinu itd.

Zadatak

Na HTML stranicu dodati paragraf sa tekstom i dugme “Promeni stil” . Klikom na dugme promeniti boju fonta paragrafa u crveno

Last modified: Friday, 12 December 2025, 9:38 AM