JavaScript nizovi: Primjer provjere da li se ime nalazi u nizu

Ovo je primjer JavaScript koda koji koristi niz sa tri imena i proerava korisnikov unos. Ukoliko se ime nalazi u nizu, dati će odgovor “Zdravo prijatelju”, a ukoliko ne, dati će odgovor “ne poznajem te”.

Kloniraj lekciju

Objašnjenje koda:

Objašnjenje koda:

1. Niz sa imenima
   const names = ["Ana", "Marko", "Ivana"]; Ovaj niz sadrži tri imena koja se smatraju poznatim.
2. Funkcija checkName:
   • userName: Dohvata vrijednost iz polja za unos i uklanja nepotrebne praznine pomoću trim().
   • names.includes(userName): Provjerava da li se uneseno ime nalazi u nizu names.
   • Ako je ime u nizu, prikazuje poruku “Zdravo prijatelju, [ime]”.
   • Ako ime nije u nizu, prikazuje “Ne poznajem te!”.
3. Dinamika prikaza:
   • Tekst poruke se menja u zavisnosti od rezultata, kao i boja teksta (zeleno za “poznato”, crveno za “nepoznato”).

---

Hajde da detaljno objasnimo ovaj dio koda red po red:

---

1. if (names.includes(userName))

• names.includes(userName):
  • Što radi: Proverava da li je vrijednost userName prisutna u nizu names.
  • Kako radi: Metoda includes() vraća true ako je vrijednost (u ovom slučaju korisnički unos userName) pronađena u nizu.
  • Primjer:
    • Ako je userName “Ana” i niz je ["Ana", "Marko", "Ivana"], uvjet će biti true jer je “Ana” u nizu.
    • Ako je userName “Pero”, uslov će biti false jer “Pero” nije u nizu.

---

2. Ako je uvjet true:

responseDiv.innerHTML = `Zdravo prijatelju, ${userName}!`;
responseDiv.style.color = "green"; // Tekst postaje zelen

• responseDiv.innerHTML:
  • Mijenja sadržaj HTML elementa sa ID-jem response.
  • Koristi se template string (označen pomoću backticks “) da ubaci korisničko ime (${userName}) u tekst poruke.
  • Na primer, ako je userName “Ana”, rezultat će biti:
    Zdravo prijatelju, Ana!
• responseDiv.style.color = "green";:
  • Menja boju teksta odgovora u zelenu.
  • Ovo se koristi za vizualni nagoveštaj da je ime prepoznato.

---

3. Ako je uvjet false:

responseDiv.innerHTML = "Ne poznajem te!";
responseDiv.style.color = "red"; // Tekst postaje crven

• responseDiv.innerHTML = "Ne poznajem te!";:
  • Postavlja tekst odgovora na “Ne poznajem te!” ako ime nije u nizu.
• responseDiv.style.color = "red";:
  • Menja boju teksta odgovora u crvenu kako bi se naglasilo da ime nije prepoznato.

---

Kako sve zajedno radi:

1. Proverava ime:
   • Ako je ime u nizu, prikazuje pozitivnu poruku (“Zdravo prijatelju, [ime]”) sa zelenim tekstom.
   • Ako ime nije u nizu, prikazuje poruku “Ne poznajem te!” sa crvenim tekstom.
2. Dinamička interakcija:
   • Korisnički unos se odmah reflektira u odgovoru, a boja teksta daje vizualni signal o tome da li je ime prepoznato.