(klikom na podvučeni deo teksta to otvarate ili preuzimate)

Radimo maturski zadatak  B2 - Domaće životinje

  Fajlovi koji se koriste za zadatak: Прилог_4ЕИТ_Б2.zip

Uputstvo za početak rada:

Kreirati folder u kojem treba da se nalaze 3 fajla i 2 foldera:

  index.html
  autor.html
  uputstvo.html

U folder css staviti fajl za izgled svega,
u folder skripta staviti fajl za funkcionalnost.

Pošto koristimo Apache web server, ceo ovaj folder treba da bude UNUTAR webROOT foldera (unutar htdocs koji je u XAMPP folderu).

Detalji:

  • Slike postaviti u poseban folder koji je unutar foldera sa vašim zadatkom (slika za pozadinu)
  • folder sa vašim zadatkom treba da je na web serveru (D:> XAMPP > htdocs) - da bi bilo objavljeno na lokalnom web serveru
  • Trebate imati 3 fajla i navigaciju između njih (na vrhu svakog od fajlova)
  • Tekst na stranicama pisati ĆIRILICOM
  • Možete koristiti Bootstrap, ali i ne morate (to je CSS biblioteka)
  • Možete koristiti jQuery ili običan JavaScript za funkcionalnost
  • CSS i JS treba da su u posebnim fajlovima !
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):

$("element").hover(function() {
    var mojAudio = new Audio('mojAudioFajl.mp3');
   mojAudio.play(); 
 });
 
 
 

1.

Sve može da se uradi sa običnim JavaScript-om

.... 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.

!!! Ako se koristi jQuery, tada se sve 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:

Ako treba da se klikom na element on  polako izgubi, jQuery kod bi bio:
     $("#idElementa").click(function() {
          $("#idElementaKojiSeSakriva").hide(2000); 
     });

4.  

 DODATAK: Kako postaviti POPUP window (a da nije alert)?

 1. način: ako se koristi jQuery

$("#OpenDialog").click(function () {          
    window.open('nekiMaliHtmlPopupFajl.html', 'popup', 'height=200,width=400,toolbar=no,top=200,left=400');
    return false;
  });

2. način: ako se koristi JavaScript i inline poziv funkcije:

postaviti na element događaj onclick kojim se poziva funkcija u kojoj je programski kod za window.open

na primer, u html kodu je:

<p onclick="prikazipopup1()">klik za popup </p>

a u posebnom js fajlu je

function prikazipopup1(){
    window.open('nekiMaliHtmlPopupFajl.html', 'popup', 'height=200,width=400,toolbar=no,top=200,left=400');
 
}

3. način:  JavaScript i event Listener:

  identifikovati element u html kodu sa recimo id, pa na osnovu toga kreirati eventListener .....

.... ovo POTRAŽITE SAMI (možda će biti kasnije postavljeno, ako stignemo ... )

*** komentar ***

Last modified: Tuesday, 16 December 2025, 9:39 AM