B11 - Vremenska prognoza
Completion requirements
..
Iz priručnika za maturu: Б11 - Временска прогноза. (str.250)
- Fajlovi - preuzeti i otpakovati
Planiran je rad u okruženju VS Code i postavljanje na Apache web server.
Za početak:
- Preuzeti materijale i postaviti ih u folder za rad
- Kreirati potrebne fajlove:
- index.html
- autor.html
- uputstvo.html
- style.css
- akcije.js
- kreirati folder za slike
- slike
Zatim za svaku od stranica:
- postaviti naslov
- ispod naslova postaviti linkove ka svakoj od stranica
- proveriti da li linkovi rade
Zatim postaviti deo sa prognozom:
- postaviti div element klase kontejner
- u njemu treba da se nalazi forma sa tekstom i elementom za izbor (select) - (ne zaboravite postaviti id)
- postaviti opcije za gradove (option - value i tekst)
- ispod postaviti iframe sa zadatim linkom - (ne zaboravite postaviti id
- u njemu treba da se nalazi forma sa tekstom i elementom za izbor (select) - (ne zaboravite postaviti id)
Proučiti šta se dešava kada se na originalnoj stranici odabere naziv grada:
- Obratite pažnju kako izgleda link u URL liniji
- ujedno pogledajte kako to piše u delu izbora grada
- za svaki tag OPTION: value postaviti onako kako to piše u URL-u a tekst da piše naziv grada kako god želite
Kako promeniti sadržaj iframe-a?
Suština je da se prilikom promene izbora promeni i sadržaj frejma. Treba naći način da se detektuje događaj izmene opcije, pa da se izvrši promena. Zbog toga je potrebno da postoji način na koji će se "dohvatiti" element sa izborom. Zatim se preuzme value izabrane opcije i jednostavno "nalepi" na osnovu URL adrese.
Tri načina rada su do sada bila u školi:
- samo JavaScript i dodat osluškivač događaja. Kada se događaj desi onda se izvrši promena
- dodat atribut onchange u tag pa da postoji funkcija koja se poziva. Ta funkcija može biti ili samo sa JavaScriptom ili sa jQuera - vaš izbor
- korišćenje jQuery i događaja na elementu
U nastavku je samo prvi način, onako kako je rađeno u trećem razredu:
document.getElementById("idElementaIzbora").addEventListener("change", funkcijaPromene);
function funkcijaPromene()
{
let adresa = "https://naslovi.net/vremenska-prognoza/";
let dodatak = grad.value;
document.getElementById("stranica").src = adresa + dodatak;
};Za one koji žele da znaju malo više
Ako neko baš želi da radi u Visual Studiju, video snimak (objašnjenja kako se radi sličan zadatak) možete preuzeti sa sledećeg linka:
Pomoćni fajlovi za zadatke iz video snimka:
...
Last modified: Wednesday, 12 March 2025, 12:30 PM