javascript #3 - startit centar indjija
TRANSCRIPT
HTML, CSS i JAVASCRIPTWEB TEHNOLOGIJE - predavanje 7
START IT - INĐIJA
Funkcije (function)
Objekte i nizove
For petlje (for)
Šta smo naučili?
Gde je tu HTML?
<head><script
src=”putanjadofajla.js”></script></head>
<head><script>
alert(“Javascript”);</script>
</head>Snimiti fajl kao .jsPrimer: skript.js
Kako povezati javascript i html?
script se može staviti bilo gde unutar html-a
Gde je tu HTML?<secton>
<h3 onclick=”alert(1);”>
Naslov teksta
</h3></section>
<script>function prikaziPoruku()
{alert(“Nije loš
ovaj js”);}
</script>...<secton>
<h3 onclick=”prikaziPoruku();”>
Naslov teksta</h3>
</section>
Definisanje akcije koja će se izvršiti kada korisnik klikne na taj element.
HTML dogadjajionclick je jedan od događaja
Još neki dogadjaji- onresize (kada povećavamo/smanjujemo
browser)- onload (kada se učita html/css i js)- onmouseup (kada se pusti klik na mišu)- onkeypress (kada se pritisne dugme na
tastaturi)
Na bilo koji od događaja možemo reagovati nekom funkcijom
DOM manipulacijaKada se HTML učita u browser, browser u pozadini pravi DOM.Svaki html tag je jedan čvor (node) html
head
sectionscript
body
section
article
<html><head>
<script src=”skripta.js></script>
</head><body>
<section>
<article>Zdravo</article></section><section></section>
</body></html>
DOM manipulacijaDohvatanje određenog HTML elementa
(tj. DOM node-a)var header = document.getElementById(“header”);
var rowList = document.getElementsByClassName(“row”);
var divList = document.getElementsByTagName(“div”);
DOM manipulacijaDohvatanje određenog HTML elementa
(tj. DOM node-a)var header = document.querySelector(“#header”);header je objekat koji predstavlja html element sa id-jem “header”var divList = document.querySelectorAll(“div”);divList je niz objekata gde svaki objekat predstavlja div elementdivList.length odgovara broju <div> tagova u html-u
DOM manipulacijavar body = document.body - dohvata <body> element i stavlja u promenljivu body var novDivElement = document.createElement("div");
Kreiranje novog noda (html elementa)
body.appendChild(novDivElement);<body><div></div>
</body>
Da bi se video u html-u mora da se “zakači” na postojeći element
DOM manipulacija
textContent postavlja tekst unutar elementa
var novDivElement = document.createElement("div");
<div>
</div>noviDivElement.textContent = “Zdravo HTML”;
Zdravo HTML
DOM manipulacija
<section class=”galerija” id=”pocetna” style=”display: none” onclick=”...”> ... </section>
var section = document.querySelector(“section”);
section.className
section.id
section.style
section.onclick“galerij
a”“pocet
na”{display: “none”}
DOM manipulacijavar element = document.createElement(“section”);element.className=”galerija”;element.appendChild(...);element.appendChild(...);
elemenet.onclick = imeFunkcije;document.body.appendChild(element);
Dekonstrukcija
Dekonstrukcija
<section class=”slike”>… // ovde se nalaze slike</section><img src=”...” onclick=”ucitajJos()”/>
function ucitajJos(){var noveSlike = funkcijaKojaDovlaciSaServera();
var section = document.querySelector(“slike”);
for(var i=0; i< noveSlike.length; i++){ section.appendChild(noveSlike[i]);
}}
VEŽBAdocument.createElement(“img”) - kreira element
document.body.appendChild(elem) - dodaje elem unutar body-ja
document.querySelector(“.slike”) - vraca prvi element sa klasom “slike”
onclick=”izracunaj()” - pozviva funkciju izracunaj kada se klikne na element
elem.id - dohvata ili postavlja id elementa
elem.className - dohvata ili postavlja class elementa
elem.src - dohvata ili postavlja src elementa (važi za elemente koji imaju src)
Napraviti mini-instagramPodsetnik
Dekonstrukcija #2Unosi se ime zadatka i pritiska “enter”Zadatak se automatski dodaje ispodKada se klikne na zadatak, označi se kao rešen
Dekonstrukcija #2<input type=”text” onkeypress=”dodaj()”/>function dodaj(){ if(/* proveravamo da li je enter */){ //kreira se novi element koji sadrzi jos neke
// pod elemente npr. checkbox + span }}
Dekonstrukcija #2<div onclick=”resiZadatak()”> <img src=”...”/> <span> Vezba 1</span></div>function resiZadatak(){
//precrtava tekst i // menja sličicu}Šta ovde fali?
Event objekat
<div onclick=”resiZadatak(event)”> <img src=”...”/> <span> Vezba 1</span></div>
Ako dinamički dodajemo elemente, kako da znamo na šta je korisnik kliknuo?
event je objekat koji browser napravi svaki kada se neki događaj desi
eventfunction resiZadatak(event){
//precrtava tekst i // menja sličicu}
event.currentTarget - html element na kome je bio “onclick”
Ako je događaj klik (ili bilo koji nastao akcijom sa mišem)event.screenX - pozicija na X osi ekranaevent.screenY - pozicija na Y osi ekranawhich - koji je klik u pitanju (levi, desni, scroll)
Ako je događaj izazvan radom na tastaturievent.keyCode - vraća jedinstveni broj karaktera na tastaturi
Dekonstrukcija #2<div onclick=”resiZadatak(event)”> <img src=”...”/> <span> Vezba 1</span></div>function resiZadatak(event){
event.currentTarget.style...}
VEŽBANapraviti TODO listu document.createElement(“img”) -
kreira element
document.body.appendChild(elem) - dodaje elem unutar body-ja
document.querySelector(“.slike”) - vraća prvi element sa klasom “slike”
onclick=”izracunaj()” - poziva funkciju izračunaj kada se klikne na element
event.currentTarget - vraća element koji je reagovao na događaj
Podsetnik
DOMAĆI ZADATAKUnaprediti “Health Coach” sajt sa:
- Na glavnu sliku dodati dva dugmeta (levo i desno) i klik na neko od njih menja pozadinu (napraviti da izgleda ciklično).
- News and articles sekcija, klik na bilo koju sličicu treba da zatamni ostale (može bilo koji drugi css property da promeni, ali da bude vidljivo!)
- Success stories, napraviti da se klikom na dve tačkice smenjuju slike i tekst
Za sve reference pogledati: http://healthcoach.stylemixthemes.com/
Doraditi sajt za preduzetnike!
HVALA VAM NA PAŽNJI!PITANJA?