JavaScript & BOM - Dialog Boxes


Stvaranje dijaloških okvira (Dialog Boxes)

U JavaScriptu možete kreirati dijaloške okvire ili skočne prozore za interakciju s korisnikom. Možete ih koristiti za obavještavanje korisnika ili za primanje neke vrste korisničkog unosa prije nastavka. Možete stvoriti tri različite vrste dijaloških okvira: okvira za upozorenje, potvrdu i upit. Izgled ovih dijaloških okvira određuje operativni sistem i / ili postavke pretraživača i ne mogu se mijenjati CSS-om. Takođe, dijaloški okviri su modalni prozori, kada se prikaže dijaloški okvir, izvršavanje koda se zaustavlja i nastavlja tek nakon što se odbaci. U sljedećem dijelu detaljno ćemo razmotriti svaki od ovih dijaloških okvira.



Stvaranje dijaloških okvira upozorenja

Dijaloški okvir upozorenja je najjednostavniji dijaloški okvir. Omogućava prikazivanje kratke poruke korisniku. Uključuje i dugme OK,gdje korisnik mora kliknuti na dugme OK da bi nastavio. Možete kreirati dijaloške okvire upozorenja metodom alert(). Već ste vidjeli mnogo primjera upozorenja u prethodnim lekcijama. Pogledajmo još jedan primjer:

var message = "Zdravo! Kliknite OK da biste nastavili.";
alert(message);
 
/* Sljedeći se red neće izvršiti dok ne odbacite prethodno upozorenje */
alert("Ovo je još jedan okvir za upozorenje.");
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Alert Popup prozor</title>
</head>
<body>
    <script>
    var message = "Zdravo! Kliknite OK da biste nastavili.";
    alert(message);
     
    /* Sljedeći se red neće izvršiti dok ne odbacite prethodno upozorenje */
    alert("Ovo je još jedan okvir za upozorenje.");
    </script>
</body>
</html>        


Stvaranje dijaloških okvira za potvrdu

Dijaloški okvir za potvrdu omogućava korisniku da potvrdi ili otkaže radnju. Dijalog za potvrdu izgleda slično dijalogu upozorenja, ali uključuje dugme Odustani zajedno s dugmetom OK. Možete kreirati dijaloške okvire za potvrdu pomoću metode verify(). Ova metoda jednostavno vraća logičku vrijednost (tačno ili netačno), zavisno o tome klikne li korisnik tipku Uredu ili Otkaži. Zbog toga se njegov rezultat često dodjeljuje varijabli kada se koristi. Sljedeći primjer će ispisati neki tekst u pretraživaču, zavisno o tome na koje se dugme klikne.

var result = confirm("Jesi li siguran?");
 
if(result) {
    document.write("Kliknuli ste dugme OK!");
} else {
    document.write("Kliknuli ste dugme Odustani!");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Potvrda Popup boksa</title>
</head>
<body>
    <script>
    var result = confirm("Jesi li siguran?");
 
    if(result) {
        document.write("Kliknuli ste dugme OK!");
    } else {
        document.write("Kliknuli ste dugme Odustani!");
    }
    </script>
</body>
</html>                            


Stvaranje dijaloškog okvira za upit

Dijaloški okvir upita služi za pozivanje korisnika da unese informacije. Dijaloški okvir za upit uključuje polje za unos teksta, OK i dugme Odustani. Možete stvoriti dijaloške okvire za prompt pomoću metode prompt(). Ova metoda vraća tekst unijet u polje za unos kada korisnik klikne dugme Uredu i nulu ako korisnik klikne dugme Odustani. Ako korisnik klikne dugme Uredu bez unosa teksta, vraća se prazan string. Iz tog razloga se njegov rezultat obično dodjeljuje varijabli kada se koristi. Sljedeći primjer će ispisati vrijednost koju ste unijeli kada kliknete dugme Uredu.

var name = prompt("Koje je tvoje ime?");
 
if(name.length > 0 && name != "null") {
    document.write("Pozdrav, " + name);
} else {
    document.write("Anonimno!");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Prompt Popup dijalog</title>
</head>
<body>
    <script>
    var name = prompt("Koje je tvoje ime?");
 
    if(name.length > 0 && name != "null") {
        document.write("Pozdrav, " + name);
    } else {
        document.write("Anonimno!");
    }
    </script>
</body>
</html>                            

Vrijednost vraćena metodom prompt() uvijek je string. To znači da ako korisnik u polje za unos unese 10, vraća se string "10" umjesto broja 10. Zbog toga, ako želite koristiti vraćenu vrijednost kao broj, morate je prikriti ili prebaciti na Number, poput ovog: var age = Number (prompt ("Koliko imaš godina?"));