24/25.3 WEB programiranje 3

1. U JavaScript-u, skoro "sve" je objekat

Na primer, svaki html element je objekat. Atributi ili svojstva ukazuju na to kako objekat izgleda. Još ako se u to doda i JavaScript, onda se mogu dodati i još neki opcioni atributi. Na primer, u nastavku dodajemo jedno dugme kojem nije naveden ni jedan dodatni atribut, i drugo kojem je dodat jedan atribut:

<button> klikni ovde </button>
<button id=“dugme”> pritisni dugme </button> 

Na osnovu traženog svojstva, u JavaScript kodu može da se odredi koji element na stranici nam je potreban i da se onda sa njim nešto radi. 

Na primer, za traženje elementa sa id="dugme" (to je drugo dugme) i postavljanje nekog teksta u njega (innerHTML):

document.getElementById("dugme").innerHTML = "Hello World!"; 

U treće dugme dodajemo atribut za poziv JavaScript funkcije :

<button onclick="alert('dugme je pritisnuto')"> pritisni dugme </button> 

( Detaljnije o objektima koji se nalaze na web stranici ostavljamo za neku od narednih lekcija )

2. Šta su to događaji ?

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. Primer sistemskog događaja je na primer OnLoad (kada se ceo html dokumenat učita). Najčešće korišćen događaj uzrokovan akcijom miša je OnClick (kada korisnik klikne mišem na neki elemenat)...

3. Dodavanje događaja (registrovanje događaja)

Događaje možemo dodati na tri načina:

1. Kroz HTML atributa (inline događaji).
2. Preko propertija objekta koji je izvor događaja
   
3. Korišćenjem JavaScript metode addEventListener.

3.1 Dodavanje događaja kroz HTML

Ovde je JavaScript kod u okviru HTML-a, u okviru otvarajućeg taga elementa na kojem se događaj dešava. Tada se ispred naziva događaja dodaje prefiks on (onclick, onmouseover, ...), a sam element ne može imati više od jedne event handler funkcije

Primeri: primer 1 , primer 2

<button onclick="pozdrav()">Klikni me</button> 

<script>
  function pozdrav() {
     alert("Zdravo!");
  }
</script>

<button onclick="let a=999; console.log(a);"> Dugme A </button>
<button onclick="funkcija1(5)"> Dugme 5 </button>

<script>
  function funkcija1(x) {
    alert(x);
  }
</script>

3.2. Dodavanje događaja preko propertija objekta koji je izvor događaja

Ovde je JavaScript kod u skripti i dodaje se kao property objekta. Kao i u prethodnom slučaju, ne može se imati više od jedne event handler funkcije koja se uvek poslednja izvršava

Primer:

let bbb = document.querySelector("p"); // pronalazi prvi <p> tag

bbb.onclick = function() { alert('kliknuto je na PRVI paragraf'); }

3.3 Dodavanje događaja koristeći addEventListener

Ovo je način koji se najviše koristi. Ova metoda ima 3 parametra, od kojih su prva dva obavezna:

• event type - ime događaja, navedeno između navodnika. Ne koristi se prefiks on !!!
  
• event handler - funkcija koja se izvršava kada se događaj desi
  
• PLUS: može da se doda više od jedne event handler funkcije za isti događaj!
  

Sintaksa:

element.addEventListener("imeDogađaja", funkcija);

Primer sa funkcijom koja nema ime, napisano na najkraći način:

HTML: <button id="dugme">Klikni me</button>
JS:
   document.getElementById("dugme").addEventListener("click", function() {
     alert("Zdravo!");
});

U ovom primeru koristimo addEventListener metodu da pridružimo funkciju koja se aktivira klikom na dugme.

Pošto je preporuka da se umesto neimenovane funkcije koristi funkcija koja ima ime, u nastavku je isti primer napisan na malo drugačiji način:

HTML: 
   <button id="dugme2">Klikni me</button>
JS:
   let element = document.getElementById("dugme2");
   element.addEventListener("click", f1);

   function f1() {
     alert("Zdravo!");
   }

4. Primeri rada sa događajima

Primer 1 - sa događajem klik:

<button id="dugme">Klikni me</button>

let dugme = document.getElementById("dugme"); 
dugme.addEventListener("click", function() {
  alert("Dugme je kliknuto!");
});

U ovom primeru, kada korisnik klikne na dugme, pojavljuje se poruka.

Primer 2 - promene boje elementa pri prelasku miša ( primer sa događajem mouseover)

let polje = document.getElementById("polje");
polje.addEventListener("mouseover", function() {
  polje.style.backgroundColor = "yellow";
});

Kada korisnik pređe mišem preko polje elementa, njegova boja pozadine menja se u žutu.

Primer 3: Promena boje elementa pri prelasku miša ... HTML ... JS

<div id="kutija" style="width:100px; height:100px; background-color:blue;"></div>

document.getElementById("kutija").addEventListener("mouseover", function() { 
this.style.backgroundColor = "red";
});

document.getElementById("kutija").addEventListener("mouseout", function() {
this.style.backgroundColor = "blue";
});
// Ovde se boja menja u crvenu kada korisnik pređe mišem preko div elementa i vraća se na plavu kada miš napusti element.

Primer 4: Prikazivanje unetog teksta u realnom vremenu ... HTML ... JS

<input type="text" id="unos" placeholder="Unesi tekst ovde">
<p id="prikaz"></p>

document.getElementById("unos").addEventListener("input", function() { 
document.getElementById("prikaz").textContent = this.value;
});

// Dok korisnik unosi tekst u polje, sadržaj se odmah prikazuje u p elementu.

Primer 5: Brojač klikova ... HTML ... JS

<button id="brojDugme">Klikni me</button>
<p id="brojKlikova">Klikovi: 0</p>

let brojKlikova = 0;
document.getElementById("brojDugme").addEventListener("click", function() {
brojKlikova++;
document.getElementById("brojKlikova").textContent = "Klikovi: " + brojKlikova;
}); 
// U ovom primeru broj klikova na dugme se ažurira svaki put kada se dugme pritisne.

5. Uklanjanje događaja

Događaj se može ukloniti pomoću removeEventListener metode. Na primer:

<button id="stopDugme">Zaustavi događaj</button>

function prikaziPoruku() {
  alert("Klik!");
}

document.getElementById("stopDugme").addEventListener("click", prikaziPoruku);

// Uklanjanje događaja nakon 5 sekundi
setTimeout(function() {
  document.getElementById("stopDugme").removeEventListener("click", prikaziPoruku);
}, 5000);

6. Domaći zadatak:

1. Kreirati HTML stranicu na kojoj se nalaze tri kruga različitih boja ( na primer crveni, plavi i žuti). Ubaciti JavaScript kod koji omogućava da krug nestane nakon klika na isti.
2. Napisati funkciju crtaj() i povezati je sa jednim dugmetom na kojem će da piše "ISCRTAJ". Klikom na dugme, prvo treba da se od korisnika traži koliko će biti zvezda (min.1, a max.10), a onda da se u jedno div polje ispisuju zvezdice na sledeći način:

....