Javascript #4 - Startit Centar Indjija
Download as PPTX, PDF1 like439 views
Kurs Javascripta Indjija
![Problem
divList = document.getElementsByTagName(“div”);
for(var i = 0; i< divList.length; i++){
divList[i].style.display = “none”;
}
Kako sakriti svaki div na strani?](https://image.slidesharecdn.com/js4-160528184052/85/Javascript-4-Startit-Centar-Indjija-2-320.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?](https://image.slidesharecdn.com/js4-160528184052/85/Javascript-4-Startit-Centar-Indjija-3-320.jpg)
![Ispod haube
$(‘#nekiId’).hide();
var elementi = document.querySelector(“#nekiId”);
for(var i=0; i< elementi.length;i++){
elemeneti[i].style.display = ‘none’;
}](https://image.slidesharecdn.com/js4-160528184052/85/Javascript-4-Startit-Centar-Indjija-8-320.jpg)
Javascript #4 - Startit Centar Indjija
- 1. HTML, CSS i JAVASCRIPT WEB TEHNOLOGIJE - predavanje 8 START IT - INĐIJA
- 2. Problem divList = document.getElementsByTagName(“div”); for(var i = 0; i< divList.length; i++){ divList[i].style.display = “none”; } Kako sakriti svaki div na strani?
- 3. 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?
- 4. I resenje je… Jquery $(‘div’).hide(); Kako sakriti svaki div na strani?
- 5. I resenje je… Jquery function animate(elem){ $(elem).animate({left: “+=100”}, 1000); } Animacija?
- 6. 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.
- 7. Filozofija $(‘#nekiId’).hide(); NAĐI -> Dohvata jedan ili više elemenata Isto što i querySelector/querySelectorAll URADI -> Funkcija koja postavlja display property ovog elementa na ‘none’ 1. Nađi element 2. Uradi nešto sa njim
- 8. Ispod haube $(‘#nekiId’).hide(); var elementi = document.querySelector(“#nekiId”); for(var i=0; i< elementi.length;i++){ elemeneti[i].style.display = ‘none’; }
- 9. JQuery $(‘div’) $(‘#nekiId’) $(‘.klasa’) $() prima css selektor $(‘div, span’) $(‘#nekiId, section’) $(‘.klasa.red1’)
- 10. 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-
- 11. JQuery onclick onkeypress function prikaziPoruku(){ alert(“uspešno ste kliknuli”); } $(‘#dugme’).click(prikaziPoruku); function prikaziPoruku(){ alert(“uspešno ste kliknuli”); } $(‘#dugme’).keypress(prikaziPoruku);
- 13. JQuery Animacije var options = { “width”: “+=200”, “height”: “+=400” }; $(‘#elem’).animate(options, 1000); <div id=”elem”></div> #elem{ width: 200px; height: 200px; background-color: yellow; }
- 14. VEŽBA Dodati animacije za slidere na Health Coach sajtu - Glavna slika - Success stories Za jquery dokumentaciju pogledati https://oscarotero.com/jquery/
- 15. Još neki pojmovi... CLIENT & SERVER
- 19. Još neki pojmovi... LESS / SASS
- 20. Još neki pojmovi... ANGULARJS / REACT
- 21. Još neki pojmovi... IONIC / REACT-NATIVE
Editor's Notes
- #2: U ovom delu treba predstaviti ….