Uvod: Komunikacija sa korisnikom

U savremenim web aplikacijama korisnik ne samo da posmatra sadržaj, već aktivno učestvuje – unosi podatke, bira opcije i komunicira sa sistemom. Komunikacija sa korisnicima može da se radi ako se na primer koriste:

  1. Obrasci (Forme): glavni alat za prikupljanje strukturiranih podataka.

  2. Sistemski prozori: brze metode za potvrdu ili obaveštenje (alert, confirm, prompt).

  3. Korisnički definisani prozori: prozori koji mogu da izgledaju lepše, kreirani pomoću HTML-a i CSS-a.

1. Obrasci (Forme)

Forma predstavlja osnovni način komunikacije između korisnika i web aplikacije. Putem forme korisnik može da unese podatke (tekst, broj, email…), da izabere opcije (checkbox, radio dugmad), da pošalje zahtev serveru, ...

Forma se u HTML-u definiše pomoću <form> taga.

Osnovna struktura forme
<form action="server.php" method="POST">
    <!-- elementi forme -->
</form>

Objašnjenje:

  • action – gde se šalju podaci

  • method – način slanja (GET ili POST)

1.1. Elementi forme

1. Tekstualno polje

<input type="text" name="ime">

2. Lozinka

<input type="password" name="lozinka">

3. Email

<input type="email" name="email">

4. Radio dugmad

<input type="radio" name="pol" value="muski"> Muški
<input type="radio" name="pol" value="zenski"> Ženski

5. Checkbox

<input type="checkbox" name="hobi" value="sport"> Sport

6. Dugme

<button type="submit">Pošalji</button>

1.2. Primer kompletne forme

<form id="forma">
    Ime: <input type="text" id="ime"><br><br>
    Email: <input type="email" id="email"><br><br>

    Pol:
    <input type="radio" name="pol" value="M"> M
    <input type="radio" name="pol" value="Ž"> Ž <br><br>

    <button type="button" onclick="posalji()">Pošalji</button>
</form>

JavaScript omogućava:

  • čitanje unetih podataka

  • proveru (validaciju)

  • reagovanje na događaje

2.1. Pristup elementima forme

let ime = document.getElementById("ime").value;

2.2. Primer obrade forme

<script>
function posalji() {
    let ime = document.getElementById("ime").value;

    if (ime == "") {
        alert("Morate uneti ime!");
    } else {
        alert("Dobrodošao, " + ime);
    }
}
</script>

3. Validacija forme

Validacija znači provera da li su podaci ispravno uneti.

Primer:

if (email.indexOf("@") == -1) {
    alert("Email nije ispravan!");
}

*****( ovo smo već radili u lekcijama: .. Podsetite se: Izrada web forme )

2. Sistemski prozori (BOM - Browser Object Model)

JavaScript nam omogućava korišćenje tri ugrađene funkcije za interakciju:

  • alert("Poruka"); – Prikazuje informaciju. Korisnik može samo da klikne "OK".

  • confirm("Da li ste sigurni?"); – Vraća true ako korisnik klikne "OK" i false ako klikne "Cancel". Idealno za brisanje podataka.

  • prompt("Unesite ime:", "Default"); – Otvara polje za unos. Vraća uneti string ili null.

***( ovo smo već radili u lekciji od 19.01. Iskačući (popup) prozori  i  09.02. JavaScript funkcije + )

4.1. alert() – obaveštenje

alert("Poruka za korisnika");

4.2. confirm() – potvrda

let odgovor = confirm("Da li želite da nastavite?");

Vraća:

  • true (OK)

  • false (Cancel)

4.3. prompt() – unos podataka

let ime = prompt("Unesite ime:");

4.4. Primer kombinacije

let ime = prompt("Kako se zoveš?");

if (ime != null) {
    alert("Zdravo " + ime);
}

Primer upotrebe sa kolačićima:

let korisnik = prompt("Kako se zovete?");
    if (korisnik != null) {
    document.cookie = "username=" + korisnik + "; max-age=3600";
    alert("Dobrodošli, " + korisnik);
}

(1-2). Zadaci za vežbu

Zadatak 1: Napraviti formu sa jednim poljem za ime. Ako je prazno – prikazati poruku.

Rešenje:

<input type="text" id="ime">
<button onclick="provera()">OK</button>

<script>
function provera() {
    let ime = document.getElementById("ime").value;

    if (ime == "") {
        alert("Unesite ime!");
    }
}
</script>

Zadatak 2: Uneti email i proveriti da li sadrži znak @.

Rešenje:

let email = document.getElementById("email").value;

if (email.indexOf("@") == -1) {
    alert("Neispravan email");
}

Zadatak 3: Koristiti confirm() pre slanja forme.

Rešenje:

let odgovor = confirm("Da li želite slanje?");
if (odgovor) {
    alert("Poslato!");
}

Zadatak 4:  Koristiti prompt() za unos imena i prikaz poruke.

Rešenje:

let ime = prompt("Unesite ime:");
alert("Zdravo " + ime);

Zadatak 5 (kombinovani) : Forma: ime + dugme → ako je uneto ime:  potvrda (confirm)  i  poruka (alert)

Rešenje:

function test() {
    let ime = document.getElementById("ime").value;

    if (ime == "") {
        alert("Unesite ime!");
    } else {
        if (confirm("Da li ste sigurni?")) {
            alert("Zdravo " + ime);
        }
    }
}

1. Zadatak

Napraviti formu sa poljima gde se unosi ime i prezime. Ako su oba popunjena → prikazati poruku: „Dobrodošao [ime] [prezime]“

2. Zadatak: Napraviti formu za unos lozinke: ako je kraća od 5 karaktera → greška

3. Zadatak:  Napraviti formu sa checkbox opcijama (npr. sport, muzika, film) i ispisati šta je korisnik izabrao.

4. Zadatak: Napraviti program koji koristi prompt() za unos godine i proverava da li je korisnik punoletan

5. Zadatak (napredni): Napraviti formu: ime + email. Uslovi: ime ne sme biti prazno, email mora sadržati @, koristiti confirm() pre slanja

3. - dodatak - Jedan od načina kako postaviti popup prozor (a da nije alert)

To smo već radili ranije: Dodatak - kako postaviti popup (a da nije alert)

Poslednja izmena: понедељак, 23. март 2026, 22:04