19/20. 01 - vezbe (akcije, događaji, ...)
Iskačući (popup) prozori
„Programi vole da pričaju sa korisnikom, postaljaju pitanja, daju odgovore i odgovaraju na poziv“. Metod predstavlja način na koji se radi nešto, a JavaScript metodi su akcione reči (action words, doers) JavaScript jezika. Metodi su pokretači dešavanja.
JavaScript koristi dijalog prozore (dialog boxes) za interkaciju sa korisnikom. Dijalog prozori se kreiraju pomoću tri metoda:
Alert
Videli smo da se write() i writeln() metode koriste za ispis teksta na veb strani. Drugi način za slanje izlaza čitaču je alert() metoda. Alert() metoda pravi mali, nezavisan prozor – nazvan dijalog prozor, prozor za dijalog, koji sadrži mali trougao sa znakom uzvika.
Personalizovana poruka korisnika je smeštena posle i ispod trougla, kao i OK dugme. Kada se dijalog prozor pojavi, svako izvršavanje koda je stopirano dok korisnik ne pritisne OK dugme. Izled dijalog prozora može varirati od čitača do čitača, ali u svakom čitaču funkcioniše na isti način. Alert se koristi kada hoćemo da budemo sigurni da će informacija doći do korisnika.
Kada se alert prozor otvori korisnik treba da klikne “ok” za nastavak.
Sintaksa:
alert(”nekitekst”)
Primer:
<html>
<head>
<script>
function prikazi_alert()
{
alert("Ja sam alert!!")
}
</script>
</head>
<body>
<input type="button" onclick="prikazi_alert()" value="Prikaži alert prozor" />
</body>
</html>
Confirm
Confirm se koristi ako želimo da korisnik proveri ili prihvati nešto. Znak pitanja će se pojaviti u prozoru zajedno sa OK i Cancel dugmetom. Ako korisnik pritisne OK dugme, vraća se vrednost true, a ako pak pritisne Cancel, vraća se vrednost false.
Ova metoda koristi samo jedan argument, pitanje koje je postavljeno korisniku.
Sintaksa:
confirm(“nekitekst“)
Primer:
<html>
<head>
<script>
function prikazi_confirm()
{
var r=confirm("Pritisnite dugme")
if (r==true) {
document.write("Pritisnuli ste OK!")
} else {
document.write("Pritisnuli ste Cancel!")
}
}
</script>
</head>
<body>
<input type="button" onclick="prikazi_confirm()" value="Prikaži confirm dijalog" />
</body>
</html>
Primer 2:
<html>
<head>
<title>Korišćenje confirm dijaloga </title>
</head>
<body>
<script>
// document.clear(); // Briše sadržaj strane - kod starijih browser-a
if(confirm("Da li ste zaista dobro?") == true){
alert("Onda možemo da nastavimo");
} else {
alert("Pokušaćemo kada Vam bude bolje");
}
</script>
</body>
</html>
Budući da JavaScript ne obezbeđuje jednostavan metod za prihvatanje korisničkih podataka, za ove potrebe, koriste se HTML forme i prompt dialog prozori. Prompt dialog prozor se pojavljuje sa jednostavnim poljem za tekst (textfield). Nakon što korisnik u prompt dialog unese tekst, vrednost se vraća. Prompt dialog box koristi dva argumenta: string, tj. tekst koji obično predstavlja pitanje postavljeno korisniku opominjući korisnika da odgovori na pitanje i još jedan string koji obično predstavlja default odgovor koji je napisan u polju za unos. Ako korisnik pritisne OK dugme, ceo tekst iz dijalog prozora se vraća. Ako pritisne cancel prozor će mu vratiti null.
Sintaksa:
prompt(“sometext“,“defaultvalue“)
Primer:
<html>
<head>
<script>
function prikazi_prompt()
{
var ime=prompt("Molim vas unesite ime","Harry Potter")
if (ime != null && ime != "")
{
document.write("Zdravo" + ime + "! Kako si danas?")
}
}
</script>
</head>
<body>
<input type="button" onclick="prikazi_prompt()" value="Prikaži prompt prozor" />
</body>
</html>
2. čas (od 3 časa):
Kreiranje metoda koje reaguju na događaje
Događaji su akcije koje JavaScript može da detektuje.
Events (događaji)
Svaki element na web strani ima izvesne događaje koji mogu da aktiviraju JavaScript funkcije. Na primer,možemo da koristimo događaj onClick za element dugme
da bi odredili da će funkcija da se pokrene tek kad korisnik pritisne dugme.
Primeri događaja:
- Klik mišem
- Učitavanje web strane ili slike
- Prelazak mišem preko određene tačke na slici
- Izbor ulaza u formi
- Slanje (Submitting) HTML forme
- Pritisak tastera
Napomena: Događaji se obično koriste u kombinaciji sa funkcijama, a funkcije se ne izvršavaju pre nego što se desi događaj
Zadatak: Napisati JavaScript kod kojim se registruje:
- prelazak pokazivača miša preko linka
- odlazak pokazivača miša sa nekog linka
- broj prelazaka pokazivača miša prek nekog dugmeta ( za ovo treba funkcija)
- dvoklik miša koji će zatvoriti prozor
Moguća rešenja:
<script language="JavaScript">
var counter=0;
function closeWindow(){
alert("Gotovo je!");
window.close();
}
function mouseOverCounter(){
counter++;
alert(counter + " prelazak preko dugmeta!");
}
</script>
<body onDblClick="closeWindow()";>
<p><font face="arial" size=3>Dva puta kliknite da bi ste zatvorili prozor!</p>
<p>Registruje se prelazak misa preko linka.</p>
<a href="#" onMouseOver="alert('Dogadjaj:onMouseOver');">onMouseOver</a>
<p>Registruje se odlazak misa sa linka.</p><a href="#" onMouseOut="alert('Dogadja:onMouseOut');">onMouseOut</a>
<p>Kada se mis pozicionira na dugme i pomeri poziva se funkcija koja broji koliko puta se desio ovakav dogadjaj.</p>
<form>
<input type="button" value="onMouseMove" onMouseMove="mouseOverCounter();">
</form>
</body>
...
zadatak sa prethodnog časa:
function boja(elemenat)
{
elemenat.style.color = "green";
}
.....
<div id="blok" onmouseleave="boja(this)">
Ovo je <br>
Blok <br>
teksta
</div>
A šta ako želimo da imamo i parametar u koji bismo uneli boju:
function boja(element, izbor)
{
element.style.color = izbor;
}
...
let mojizbor = prompt("unesute naziv boje: ");
<div id="blok" onmouseleave="boja(this, mojIzbor)">
Ovo je <br>
Blok <br>
teksta
</div>
3. čas:
zadaci i primeri po izboru grupe
****************
Ovde se nalazi sledeće:
- Priručnik za maturski ispit (za 2020/2021 godinu)
Pogledajte i odaberite jedan zadatak odavde
(birate jedan od zadataka između A1, A3, A4, A5 i A26)