HTML, CSS i JAVASCRIPTWEB TEHNOLOGIJE - predavanje 8

START IT - INĐIJA

Problem

divList = document.getElementsByTagName(“div”);

for(var i = 0; i< divList.length; i++){ divList[i].style.display = “none”;}

Kako sakriti svaki div na strani?

Problem

function animate(elem) { var startPos = elem.style.left.split(‘px’)[0]; var id = setInterval(function() { elem.style.left += 10; if (elem.style.left >= startPos+10) { clearInterval(id) } }, 100)}

Animacija?

I resenje je… Jquery

$(‘div’).hide();

Kako sakriti svaki div na strani?

I resenje je… Jquery

function animate(elem){$(elem).animate({left:

“+=100”}, 1000);}

Animacija?

JQuery

biblioteka?

JQuery je jedna od najpoznatijih JS biblioteka

Biblioteka je skup već napisanih funkcija koje se mogu jednostavno(!) koristiti.

Bilo koji js fajl koji ste kreirali može predstavljati biblioteku.

Da bi se biblioteka koristila, treba da se uveže preko script taga kao i bilo koji drugi js fajl.

Filozofija

$(‘#nekiId’).hide();

NAĐI -> Dohvata jedan ili više elemenataIsto što i querySelector/querySelectorAll

URADI -> Funkcija koja postavlja display property ovog elementa na ‘none’

1. Nađi element2. Uradi nešto sa njim

Ispod haube$(‘#nekiId’).hide();

var elementi = document.querySelector(“#nekiId”);for(var i=0; i< elementi.length;i++){ elemeneti[i].style.display = ‘none’;}

JQuery

$(‘div’)$(‘#nekiId’) $(‘.klasa’)

$() prima css selektor

$(‘div, span’) $(‘#nekiId, section’) $(‘.klasa.red1’)

JQuery“Obican” JS

JQuery

var elem = document.createElement(“div”); var elem = $(“<div/>”);

elem.appendChild(elem2);elem.append(elem2);

elem.getAttribute(“id”);elem.attr(“id”);

elem.setAttribute(“class”, “nova-klasa”);elem.attr(“id”, “nova-klasa”);

elem.className = “nova-klasa”;elem.addClass(“nova-klasa”);

JQueryonclick onkeypress

function prikaziPoruku(){alert(“uspešno ste

kliknuli”);}

$(‘#dugme’).click(prikaziPoruku);

function prikaziPoruku(){alert(“uspešno ste

kliknuli”);}

$(‘#dugme’).keypress(prikaziPoruku);

JQueryAnimacije

Ugrađene animacije

$(‘#elem’) .hide();.show();.fadeIn();.fadeOut();.slideDown();.slideUp();.slideToggle();

.hide(500);

.show(500);

.fadeIn(500);

.fadeOut(500);

.slideDown(500);

.slideUp(500);

.slideToggle(500);

500 milisekundi

JQueryAnimacije

var options = {“width”:

“+=200”,“height”:

“+=400”};

$(‘#elem’).animate(options, 1000);

<div id=”elem”></div>

#elem{width: 200px;height: 200px;background-

color: yellow;}

VEŽBADodati animacije za slidere na Health Coach sajtu- Glavna slika- Success stories

Za jquery dokumentaciju pogledati https://oscarotero.com/jquery/

Još neki pojmovi...

CLIENT & SERVER

Još neki pojmovi...

NODEJS

Još neki pojmovi...

AJAX

Još neki pojmovi...

FRAMEWORK

Još neki pojmovi...

LESS / SASS

Još neki pojmovi...

ANGULARJS / REACT

Još neki pojmovi...

IONIC / REACT-NATIVE

Korisni linkovicyber.wizard.institutecoursera.orgudacity.comudemy.comhackerrank.comprojecteuler.netegghead.io (plaća se)github.com