Mogućnost praćenja promjene veličine prozora u bilo kojoj frontend web aplikaciji ima veliki značaj u poboljšanju ukupnog korisničkog iskustva. Može se koristiti za pokretanje različitih odgovora u Javascriptu kako bi se osiguralo da vaša web stranica reagira i da se izgled efikasno prilagođava veličini prozora portova za prikaz, što daje interaktivniji UX dizajn. A Javascript, kao moćan jezik, nudi fleksibilnost da se ovo uključi.
Da bismo riješili ovu situaciju na optimalan način, slijedit ćemo detaljan pristup koristeći JavaScript jezik, preciznije, njegove funkcije za promjenu veličine događaja i rukovanja događajima.
window.addEventListener('resize', function(event) {
console.log("Height: ", window.innerHeight);
console.log("Width: ", window.innerWidth);
});
Ovaj jednostavan, ali ključni JavaScript kod sukcesivno prati promjenu veličine vašeg prozora. Sa `window.addEventListener('resize', callbackFunction)` sve promjene veličine prozora će pokrenuti specificiranu funkciju. Ovdje naša callbackFunction koristi iskaze `console.log` za ispis `window.innerHeight` i `window.innerWidth`. Oni se odnose na visinu i širinu prozora za prikaz, respektivno.
JavaScript prozorski objekat
Objekt Window je ključni koncept obuhvaćen domenom JavaScripta. To je globalni objekt koji sadrži varijable, funkcije, historiju, lokaciju i služi kao korijen Modela objekta dokumenta (Document Object Model), čineći ga dostupnim web programerima. Dolazi s raznim svojstvima koja pružaju korisne informacije i metode za manipuliranje prikazom aplikacije, poput veličine prozora, u našem slučaju.
Događaj promjene veličine i metoda addEventListener
U našem rješenju, heroji su bili događaj `resize` i metoda `addEventListener` . Događaj resize u JavaScriptu šalje objekt Window kad god se promijeni veličina prozora preglednika. Ovo može poslužiti kao bitan okidač za određene responzivne funkcije web stranice.
- addEventListener: Ovo je jedan od najmoćnijih alata koji su na raspolaganju programeru, koji nam omogućava da identificiramo i odgovorimo na bilo koju vrstu interakcije koju korisnik ima na web stranici.
- promijeni veličinu: Ovaj specifični tip događaja bilježi svaku aktivnost promjene veličine u pretraživaču.
Razumijevanje iznad koda: analiza korak po korak
Cijela funkcionalnost 'slušanja' promjena vrti se oko metode `addEventListener`. Uzimajući dva parametra – tip događaja za slušanje i funkciju povratnog poziva za pokretanje kada se događaj dogodi, čini nevjerovatno dinamičan alat. U našem scenariju, slušamo događaj 'promjene veličine'.
Na bilo koji događaj promjene veličine, naša anonimna funkcija povratnog poziva se pokreće. Ova funkcija zatim odjavljuje novu širinu i visinu objekta prozora dajući nam vrijednosti veličine u realnom vremenu svaki put kada se promijeni veličina prozora. Ova svojstva visine i širine prozorskih objekata igraju ključnu ulogu u razvoju responzivnog dizajna.
Iz perspektive frontend programera koji je također modno osviješten, možda ćete pronaći zanimljive paralele između programiranja i mode. U modi morate biti prilagođeni novim stilovima, trendovima i siluetama kako se mijenjaju sa svakom sezonom, baš kao što morate biti u toku s novim bibliotekama, funkcijama ili okvirima u tehnologiji. Štaviše, baš kao što pažljivo bira odjevne predmete, boje i uzorke kako bi stvorio estetski ugodan outfit, programer također mora pažljivo odabrati i integrirati različite elemente koda kako bi stvorio modernu, efikasnu i brzu web aplikaciju.
Stoga, biti vješt u 'promjeni veličine prozora' u JavaScript-u je kao imati moderan, prilagodljiv i iznad svega, korisniku prilagođen dizajn web stranice koji se brine za različite ekrane uređaja, na isti način na koji svestrani komad odjeće funkcionira za različite modne trendove i stilove.
