24/25.3 WEB programiranje 3

1. Šta je BOM?

Browser Object Model (BOM) - omogućava interakciju sa web browser-om (na našem jeziku to je pregledač 😀).

...

---

Ključni objekti BOM-a:

• window: Globalni objekat za rad sa prozorom (glavni prozor).
• document: Pristup DOM-u
  
• screen: Informacije o ekranu.
• location: URL stranice.
• history: Istorija poseta stranica.
• navigator: Informacije o pregledaču
  

---

Interakcija sa window objektom:

  U cilju bolje ilustracije, u konzoli uraditi sledeće primere:

• Prikaz upozorenja:

  window.alert("Dobrodošli!");
  

• Potvrda akcije korisnika:

  const confirmed = window.confirm("Da li ste sigurni?");
  console.log(confirmed);
  

• Unos korisnika:

  const name = window.prompt("Unesite svoje ime:");
  console.log(name);

---

  Vežbe - Za svaku od navadene tri vrste manipulacije prozorom (window) kreirati dugme kojim će se: 

1. Ispisati pozdrav u iskačućem prozoru:
   alert("Pozdrav!");
2. U konzoli ispisati širinu prozora
   console.log(window.innerWidth);
3. Otvoriti novi prozor dimenzija 400x300 px sa porukom "Dobrodošli!".
   const openWindow = () => {
window.open("", "_blank", "width=400,height=300").document.write("<h1>Dobrodošli!</h1>");
};

---

Za sledeće primere treba dodati po još jedno dugme:

location, history, navigator:

• Prikaz trenutnog URL-a: console.log(window.location.href);
• Prelazak na drugu stranicu: window.location.href = "https://www.example.com";
• Povratak na prethodnu stranicu: window.history.back();
• Informacija o pregledaču: console.log(navigator.userAgent);

---

  Vežbe: dodati dugmiće za

1. prebacivanje na drugu stranicu (google.com)
   
2.  "Nazad" i "Napred" koja koriste history.back() i history.forward().
3. Ispis informacije o URL-u stranice. ... upotrebiti  console.log(location.href);
4. reload stranice ..... upotrebiti:  location.reload();

---

---

Rad sa ekranom i njegovim dimenzijama (screen objekat)

Sada, za promenu, nastavljamo malo rad u konzoli:

• Prikazivanje dimenzija ekrana korisnika:

  console.log("Širina ekrana: " + window.screen.width);
  console.log("Visina ekrana: " + window.screen.height);
  

---

 Nastavak Vežbe:

1.  Napraviti dugme koje prikazuje širinu i visinu prozora:
   

   • <button id="velicina">Prikaži veličinu</button>
     <p id="dimenzije"></p>
     <script>
       document.getElementById("velicina").onclick = function() {
         let sirina = window.innerWidth;
         let visina = window.innerHeight;
         document.getElementById("dimenzije").textContent = `Širina: ${sirina}, Visina: ${visina}`;
       };
     </script>

2. Prikaz informacija o ekranu
   Prikazati trenutne dimenzije ekrana korisnika (screen.width i screen.height) u paragrafu.
   Ažurirati informacije prilikom promene veličine prozora.
   

   const info = document.getElementById("screenInfo");
   const updateScreenInfo = () => {
       info.innerHTML = `Širina: ${screen.width}, Visina: ${screen.height}`;
   };
   window.addEventListener("resize", updateScreenInfo);
   updateScreenInfo();

---

---

Zadaci za interaktivni rad

 Napraviti HTML stranicu sa dugmićima koji koriste BOM funkcionalnosti:

• Dugme za navigaciju na drugi URL.

• Dugme za prikaz trenutnog URL-a.

• Dugme za prikaz dimenzija ekrana.

• Dugme koje pita korisnika za ime (koristeći prompt) i prikazuje ga u paragrafu na stranici.
  

---

Linkovi za objašnjenja, dodatne primera i mogućnost online vežbi za objekte: 

---

.