WEB Programiranje 3

Zadatak za početak: Kreirati html stranicu na kojoj će biti postavljani elementi koji će biti menjani pomoću koda pisanog u JavaScriptu

Prvo postaviti neki naslov i paragraf, pa ih promeniti kroz skriptu:

<h1 id="naslov"> Stari naslov </h1>
<p id = "p1"> Hello world </p>
<script>
  document.getElementById("p1").innerHTML = "Neki novi tekst";
  document.getElementById("naslov").innerHTML = "Novi naslov"
</script>
<p> Promenjen je naslov i prethodni paragraf - u skripti </p>

Zatim postaviti dve slike u folder, ali samo jednu postaviti unutar naše web stranice. Klikom na dugme promeniti sliku.

<img id="slika" src="landscape.jpg" width="200px">
<button onclick="promeniSliku()"> Promeni sliku </button>
<script>
  function promeniSliku() {
     document.getElementById("slika").src = "smiley.gif";
   }
</script>

Nakon toga postaviti nekoliko paragrafa i dugme za ispis u konzoli. Iskoristiti while petlju (radi isto kao i u C i C#):

<p> Eci peci pec </p>
<p> ti si mali zec </p>
<p> a ja nisam prepelica </p>
<p> nemoj reći kec </p>

<button onclick="ispis1()"> prvi ispis - u konzolu </button>
<script>
  function ispis1() {
    let broj = 0;
    while ( broj < 5 )
    {
       console.log(broj);
       broj++;
    }
  }
</script>

U nastavku treba upotrebiti do...while petlju. Demonstrirati oba slučaja - i kada je uslov zadovoljen i kada nije:

<br>
<button onclick="ispis2()"> drugi ispis - u onaj prvi paragraf sa id="p1" </button>
<script>
  function ispis2() {
    let broj = 0; 
    do {
      document.getElementById("p1").innerHTML += " <br> " + broj;
      broj++;
    } while (broj>5);
   }
</script>

Ovde uslov nije ispunjen, ali će se izvršiti jednom - jer tako radi do...while

<br>
<button onclick="ispis3()"> treći ispis - opet u prvi paragraf sa id="p1" </button>
<script>
  function ispis3() {
    let broj = 0; 
    do {
      document.getElementById("p1").innerHTML += " <br> " + broj;
      broj++;
    } while (broj<5);
   }
</script>

Ovde je uslov ispunjen - za ispis brojeva od 0 do 4

Upotrebiti for petlju (radi isto kau u C i u C#) - kao primer upotrebiti nadodavanje brojeva od 0  do 4 i to u tekst naslova:

<br>
<button onclick="ispis4()"> ispis br.4 - sada u naslov sa id="naslov" </button>
<script>
  function ispis4() {
    for( i = 0; i < 5; i++ )
    {
     document.getElementById("naslov").innerHTML += " " + i;
    }
  }
</script>

Upotrebom for petlje promeniti boju svih paragrafa u plavo:

<br>
<button onclick="promena()"> specijalna promena paragrafa - promena boje u plavo </button>
<script>
  function promena() {
    var x = document.getElementsByTagName("p");  // dobija se niz svih elemenata koji imaju tag = "p" - ovde su to svi paragrafi
    for( i = 0; i < x.length; i++ )
    {
       x[i].style.color="Blue";
    }
  }
</script>