07.02. Vežbe: Strašan Lav (naknadno su postavljena rešenja pojedinih delova zadatka)
Zadatak:
Kreirati web aplikaciju koja se sastoji od TRI web stranice: O Autoru, Strašan Lav, Uputstvo
Osnovni zahtevi zadatka:
- izgled (stil) sve tri stranice treba da je isti - koristiti poseban fajl za CSS
- Sve akcije treba da se vrše preko JavaSkript-a - koristiti poseban fajl
- Sve tri stranice na vrhu treba da imaju linkove za prelaz na druge stranice - linkovi treba da rade
Može se koristiti Bootstrap, jQuery, ili neka druga JS biblioteka po izboru učenika !
RADITI NA WEB SERVERU !
Skica glavne stranice:
O Autoru Strašan Lav Uputstvo
Strašan Lav
tekst pesme
slika LAVA slika GUMICE
Zahtevi u vezi aktivnosti:
- Kada se klikne na gumicu lav treba POLAKO da NESTANE (2000 ms)
- Kada se mišem prelazi preko slike lava treba da se čuje zvuk (rika lava)
- Kada se klikne na sliku lava treba da se pojavu POPUP WINDOW u kojem se otvara wiki stranica o lavovima (nikako alert)
1. način: postaviti na element događaj onclick kojim se poziva funkcija u kojoj je kod za window.open
na primer, u html kodu je:
a u posebnom js fajlu je
function prikazipopup1(){
window.open('nekitekstzapopup.html', 'popup',
'height=200,width=400,toolbar=no,top=200,left=400');
}Dodatni zadatak - za bolje učenike:
- Kada se klikne na naslov, slika lava treba da napravi "krug":
- da se polako pomeri u levo, do ivice ekrana,
- pa zatim na gore, do vrha ekrana,
- pa u desno, skoro do ivice ekrana
- pa na dole, skoro do dna ekrana
- ako treba, vratiti ga u određenu početnu poziciju (opciono)
- Slika gumice treba da "prati" sliku lava
Jedno od učeničkih rešenja iz prethodnih generacija, bez jQuery, i ne baš najbolje i nepotpuno, je spakovano u arhivu: StrasanLav.zip ... Vi pogledajte, pa pokušajte da izmenite i popravite ....
1.
Sve može da se uradi sa običnim JavaScript-om, onako kako ste radili u prethodnoj školskoj godini iz predmeta Web Programiranje.
.... ili .....
Za ovaj zadatak možete da koristite biblioteku gotovih JavaScript funkcija jQuery.
Možete taj fajl (jQuery) imati u istom folderu na računaru ili da se koristi link ka fajlu sa Interneta. Link direktno ka jQuery fajlu možete koristiti sa nekog CDN-a, ili sa zvaničnog web sajta proizvođača (u nastavku):
<script src="https://code.jquery.com/jquery-latest.min.js">
</script>Napomena: Link ka jQuery fajlu treba postaviti u head deo web stranice, pre poziva bilo kojeg drugog JavaScript-a ili fajla u kojem želite da ga koristite.
2.
!!! Sve se radi unutar
$(document).ready(function() { .....
(kratki kod za VS Code kojim se unosi šablon za to je jqDocReady)
3.
Za svaki događaj prvo treba "pronaći" element na stranici, pa mu pridružiti događaj i funkciju u kojoj se nešto radi.
Na primer:
$("#gumica").click(function() {
$("#lav").hide(2000);
});4.
Audio se pušta na sledeći način (HTML5):
var audio = new
Audio('audio_file.mp3');
audio.play();( pogledajte sve opcije na: w3schools: HTML DOM Audio )
Na primer:
Ako treba da se pusti zvuk iz zvučnog fajla (ovde je fajl u istom folderu):
$("lav").hover(function() {
var mojAudio = new Audio('mojAudioFajl.mp3');
mojAudio.play();
});...Ovde se neće objašnjavati svi detalji zadatka .... pokušajte sami da ga uradite kod kuće, za vežbu.
Međutim, u nastavku je objašnjenje dodatnog zadatka koji je bio zadat za bolje učenike:
5.
... prilikom klika na naslov (h1) treba da se izvede animacija kretanja slike:
$("h1").click(function() {
// ovde ide ono što se dešava kada se klikne na bilo koji
h1 tag .....
}Podrazumevano je da svi HTML elementi imaju static position i ne mogu se pomerati.
Da biste menjali poziciju elementa, ne zaboravite da prvo postavite svojstvo CSS position jednu od sledećih vrednosti: relative, fixed, ili absolute!
... Animacija se može raditi sa bilo kojim propertijem koji ima brojčanu vrednost:
$("#lav").animate({left: '0'}, 1000).animate({top:
'0'},1000).animate({left: '90%'},2000).animate({top:
'90%'},2000);