WEB Programiranje 3

1. deo: Kreirati web stranicu na temu "Pačja škola"

HTML:

• prvi div blok u sebi treba da ima pesmicu
  • naslov: Pačja škola
  • pesmicu kopirati sa Interneta, i postaviti je ispod naslova
• drugi div blok u sebi treba da ima samo jednu sliku (koja može da se preuzme sa Interneta)
• treći div blok će nam služiti za prikaz teksta nakon akcija 
  • samo jedan prazan paragraf u njemu
• i ispod ćemo da dodamo dugmiće:
  • za prikaz nekog teksta
  • za reload stranice
  • pozicioniranje slike horizontalno
  • pozicioniranje slike vertikalno
  • opciono - funkcija sa nekim matematičkim operacijama

CSS: 

• sa leve strane da je slika
• na sredini da je blok sa pesmicom
• desno da je blo u koji ćemo upisivati akcije

3. deo - šta se dešava kada se klikne na dugme ?

<div id="pesma">
  <h1> Pačja škola </h1>
  <pre>
<!-- ovde kopirati tekst pesmice -->
  </pre>
</div>
<div id="slika">
  <img src="slikaPatke.jpg">
</div>
<div id="prikaz">
  <p id="p1">  </p>
</div>

body {
  margin: 0;
  padding: 0;
  text-align: center;
  }
#slika {
  position: absolute;
  top: 400px;
  left: 0;
  width: 200px;
  height: auto;
  }
#prikaz {
  background-color: yellow;
  position: absolute;
  left: 80%;
  width: 20%;
  height: 200px;
  top: 400px;
  }
img {
  width: 150px;
  height: auto;
  }

Dugmići i akcije:

Zadatak 1: Postaviti dugme. Klikom na dugme treba da se prikažu vrednosti promenljivih.

<button onclick="prikaz1()"> Prikaz </button>
<script>
  var a = 1;   // promenljiva je vidljiva ovde i unutar funkcije
  function prikaz1() {
    let b = 2;    // promenljiva je vidljiva unutar zagrada u kojima se nalazi
    c = "poruka ... ";    // promenljiva je vidljiva GLOBALNO jer nije deklarisana ovde
    p = document.getElementById("p1");    // promenljiva sadrži ceo paragraf koji ima id="p1"
    p.innerText = c + a + " " + b;    // postavlja unutar paragrafa sledeće: poruka ... 1 2 
    p.innerText += (" " + (++a));    // u paragraf nadodaje sledeće: razmak pa 2 , jer je a prvo uvećano za 1
    let blok = document.getElementById("prikaz");  // promenljiva blok sadrži ceo blok sa id="prikaz"
    blok.innerHTML += ("<p> a = " + a + "</p>");   // u blok dodaje paragraf u kojem se vrednost promenljive a
  }

   // napomena - svaki sledeći klik na dugme će da uveća vrednost promenljive a što povlači i promenu ispisanih podataka

</script>

Zadatak 2: postaviti dugmiće za reload stranice, za pomeranje slike u desno, za pomeranje na dole, kao i za neke matematičke operacije

<br>
<button onclick="location.reload()"> RELOAD </button>
<button onclick="pomeriDesno()"> pomeri sliku u desno </button>
<button onclick="pomeriDole()"> pomeri sliku na dole </button>
<button onclick="matematika()"> Računaj </button> 
<script>
  var blokSlike = document.getElementById("slika");
  function pomeriDesno() {
    let pozicija = prompt("Koliko piksela da se nalazi sa leve strane slike (koliko da je pomerena u desno) ?");
    if((pozicija > 0)&&(pozicija<=1000))
    {
       blokSlike.style.left = pozicija + "px";
    }
    else
       alert("Uneseni broj nije dobar. Treba da je ceo broj, između 0 i 1000");
     
  }

function pomeriDole() {
    let pozicija = prompt("Koliko piksela da se nalazi sa gornje strane slike (koliko da je pomerena na dole) ?");
    if((pozicija > 0)&&(pozicija<=800))
    {
       blokSlike.style.top = pozicija + "px";
    }
    else
       alert("Uneseni broj nije dobar. Treba da je ceo broj, između 0 i 800");
     
  }

// top - udeljenost gornje ivice elementa u odnosu na vrh ekrana - može da se menja
// bottom - udaljenost od donje ivice ekrana - ne može da se menja, već može samo da se pročita

// left - udaljenost leve ivice elementa od leve strane ekrana - može da se menja
// right - udaljenost od desne ivice ekrana

function matematika()
{
   x = document.getElementById("p1");
   let a = 5;
   var b = 5;
   {
      let a = 6;
      var c = 6;
      x.innerText = "a = " + a + "b = " + b + "c = " + c;
   }
   x.innerText = "a = "+ a + "b = " + b + "c = " + c;
}

//  let - promenjiva se vidi između zagrada u kojima je deklarisana
//  var - promenljiva se vidi unutar funkcije u kojoj je deklarisana
//  a ako se ništa ne navede prilikom prvog pojavljivanja promenljive, onda je globalno vidljiva svuda

</script>