Javascript #4 - Startit Centar Indjija
-
Upload
dusan-stankovic -
Category
Software
-
view
231 -
download
3
Transcript of Javascript #4 - Startit Centar Indjija
![Page 1: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/1.jpg)
HTML, CSS i JAVASCRIPTWEB TEHNOLOGIJE - predavanje 8
START IT - INĐIJA
![Page 2: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/2.jpg)
Problem
divList = document.getElementsByTagName(“div”);
for(var i = 0; i< divList.length; i++){ divList[i].style.display = “none”;}
Kako sakriti svaki div na strani?
![Page 3: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/3.jpg)
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?
![Page 4: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/4.jpg)
I resenje je… Jquery
$(‘div’).hide();
Kako sakriti svaki div na strani?
![Page 5: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/5.jpg)
I resenje je… Jquery
function animate(elem){$(elem).animate({left:
“+=100”}, 1000);}
Animacija?
![Page 6: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/6.jpg)
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.
![Page 7: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/7.jpg)
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
![Page 8: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/8.jpg)
Ispod haube$(‘#nekiId’).hide();
var elementi = document.querySelector(“#nekiId”);for(var i=0; i< elementi.length;i++){ elemeneti[i].style.display = ‘none’;}
![Page 9: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/9.jpg)
JQuery
$(‘div’)$(‘#nekiId’) $(‘.klasa’)
$() prima css selektor
$(‘div, span’) $(‘#nekiId, section’) $(‘.klasa.red1’)
![Page 10: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/10.jpg)
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”);
![Page 11: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/11.jpg)
JQueryonclick onkeypress
function prikaziPoruku(){alert(“uspešno ste
kliknuli”);}
$(‘#dugme’).click(prikaziPoruku);
function prikaziPoruku(){alert(“uspešno ste
kliknuli”);}
$(‘#dugme’).keypress(prikaziPoruku);
![Page 12: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/12.jpg)
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
![Page 13: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/13.jpg)
JQueryAnimacije
var options = {“width”:
“+=200”,“height”:
“+=400”};
$(‘#elem’).animate(options, 1000);
<div id=”elem”></div>
#elem{width: 200px;height: 200px;background-
color: yellow;}
![Page 14: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/14.jpg)
VEŽBADodati animacije za slidere na Health Coach sajtu- Glavna slika- Success stories
Za jquery dokumentaciju pogledati https://oscarotero.com/jquery/
![Page 15: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/15.jpg)
Još neki pojmovi...
CLIENT & SERVER
![Page 16: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/16.jpg)
Još neki pojmovi...
NODEJS
![Page 17: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/17.jpg)
Još neki pojmovi...
AJAX
![Page 18: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/18.jpg)
Još neki pojmovi...
FRAMEWORK
![Page 19: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/19.jpg)
Još neki pojmovi...
LESS / SASS
![Page 20: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/20.jpg)
Još neki pojmovi...
ANGULARJS / REACT
![Page 21: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/21.jpg)
Još neki pojmovi...
IONIC / REACT-NATIVE
![Page 22: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/22.jpg)
Korisni linkovicyber.wizard.institutecoursera.orgudacity.comudemy.comhackerrank.comprojecteuler.netegghead.io (plaća se)github.com
![Page 23: Javascript #4 - Startit Centar Indjija](https://reader030.fdocuments.us/reader030/viewer/2022020203/5884e6dc1a28ab4b778b70f9/html5/thumbnails/23.jpg)