26.01. Kreiranje web stranice "Strašan lav"
Zadatak:
Kreirati web stranicu inspitisanu dečijom pesmicom "Strašan lav".
Detalji:
- Naslov na vrhu, u sredini
- pesmica ispod naslova, takođe u sredini (ako je ne znate, pronađite je na Internetu)
- slika lava sa leve strane pesmice
- slika gumice sa desne strane pesmice
Nove stvari koje uvodimo:
- klikom na sliku lava treba da joj se promeni pozicija na ekranu (koristimo JavaScript)
Plan rada:
- prvo kreirati html i css fajlove
- ubaciti događaje koji nam trebaju
- skriptu postaviti u okviru html fajla (samo za ovaj čas, da se ne komplikuje)
Analiza - kako smo radili na času:
Prvi deo
- postavljanje html i css dela, a u okviru tagova poziv funkcije koje će nešto da urade kada se klikne na taj tag
Deo koda (za html):
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="pesma">
<h1 onclick="naslov()">Strasan lav</h1>
<pre>
Bio jednom jedan lav...
....
Strašno, strašno!
</pre>
</div>
<div id="lav">
<img src="lav.jpg" onclick="pomeriLava()">
</div>
<div id="gumica">
<img src="gumica.jpg">
</div>
<div id="podaci">
<p id="tekst"></p>
</div>
<script>
...
... Ovde koristimo div elemente da bismo blokove sa elementima u n jima postavili na bilo koje mesto na stranici, a da ne moraju da idu jedan iza drugog. Pozicije i izgled rešavamo pomoću css-a:
Deo koda (za css):
body {
margin: 0;
padding: 0;
text-align: center;
}
img {
width: 200px;
height: auto;
}
#lav,#gumica {
position: absolute;
top: 400px;
}
#lav {
left: 0;
}
#gumica {
left: 80%;
}
... Sada bi trebalo da sve izgleda onako kako je zadato ....
Novo: uvodimo akcije, a za to koristimo JavaScript.
S obzirom da se JavaScript tek počinje raditi i u predmetu Web Programiranje, u ovom zadatku se upoznajemo sa osnovama: promenljive i funkcije i poziv funkcije na klik miša:
- JavaScript se može koristti
- u posebnom fajlu, koji se povezuje sa html-om: <script src="akcija.js" ></script>
- između tagova <script></script>, ako je nešto kraći kod
- unutar bilo kojeg html tag-a - ako je jako kretko, reč ili dve, i nema potrebe za ponavljanjem
U ovom zadatku se unutar tagova postavlja poziv JavaScript funkcija koja će da se izvrši ako se klikne na taj tag.
Konkretno:
- klikom na naslov da se u konsoli ispisuje nešto
- klikom na sliku lava da se promeni pozicija slike lava na stranici
Console:
- otvaranjem stranice vidimo kako izgleda ono što smo do sada uradili. Još uvek nema događaja, ali je sve na mestu.
- Desni klik na stranicu - Inspect(Q) će da otvori
-
to je alat za web razvoj koji je dostupan u većini web browser-a. Može da se koristi za uređivanje izvornog koda bilo koje web stranice koju posećujete - ali samo u frontendu.
Promene koje se naprave događaju se unutar sandboxa unutar vašeg web browser-a. Dakle, ne radite nikakve promene na stvarnoj web stranici. Takođe, površne promene koje napravite će da nestanu kada osvežite stranicu.
- u delu Console možete kucati JavaScript kod koji će odmah da se izvrši, ali tamo možete i da ispšisujete porukr (consloe.log()) kao reakciju na neki događaj ili pozuiv funkcije
- u delu Inspector možete lokalno menjati elemente vaše web stranice
-
Uvodimo JavaScript deklatacije promenljivih i funkcija koja se poziva na klik miša:
<script>
let a = 1;
var b = 2;
c = 3
function naslov()
{
a++;
console.log("a++ je" + a);
}
</script>
...
Malo složenije - za klik na sliku lava:
<script>
function pomeriLava()
{
var lav=document.getElementById("lav");
var pozicijaY=lav.style.top;
var pomerajY=prompt("Za koliko da podignemo lava!?");
if(pomerajY<100) pomerajY=100;
else pomerajY=10;
lav.style.top=pomerajY+ "px";
}
</script>