Jquery - Ostvarenje Snova Svakog Web Programera

tema predavanja
student Ilija Lazarevi 67/07
Ilija Lazarevi - jQuery
JQUERY - JavaScript biblioteka

ta to bee JavaScript???
Predstavlja jedan od 3 najpoznatija ECMAscript jezika (pored ActionScript, Jscript), Skript jezik kojim se moze menjati izgled i funkcionalnosti web stranice, Dinamian jezik, Slabo tipiziran, Sa slabom podrkom za objektno orijentisano programiranje, Izvrava se u web brauzeru.
JavaScript biblioteke
Usled sve veih dizajnerskih zahteva, poveava se upotreba javascripta i samim tim javascript kod. Da bi se olakalo javascript programiranje a samim tim i optimizovao javascript kod, piu se javascript biblioteke. One sadre skup funkcija koje pruaju razliite mogunosti web dizajneru koji ak ne mora biti iskusan programer. Moemo razlikovati kompletne biblioteke kojima moemo generalno dizajnirati web stranice, dok postoje specijalizovane biblioteke, recimo za animacije i efekte. Od kompletnih biblioteka, najpopularnije su: jQuery (http://jquery.com/), DOJO (http://dojotoolkit.org/), Prototype (http://www.prototypejs.org/), Yahoo UI (http://developer.yahoo.com/yui/). Od najpoznatijih biblioteka za efekte imamo: Script.aculo.us (http://script.aculo.us/), MooFX (http://moofx.mad4milk.net/), Bytefx (http://devpro.it/bytefx/). Za vie informacija posetite: http://javascriptlibraries.com/ http://woork.blogspot.com/2009/02/6-interesting-online-presentations-for.html
jQuery
Prvi jQuery je objavljen 2006. godine, od strane Dona Resiga. Prva stabilna verzija (jQuery 1.0) je izala avgusta 2006. godine. Danas jQuery biblioteku koristi 20% najvecih web sajtova, to je ini jednom od najpopularnijih JavaScript biblioteka. Kada kaemo biblioteka, mislimo na fajl veliine 120KB, koji ima svega 4000 linija koda. Odavde moemo zakljuiti da je jQuery jedna vrlo simpatina alatka, koja svakom dizajneru moe biti vrlo korisna u svakodnevnom radu. jQuery predstavlja skup funkcija koje su ispisane u JavaScriptu, kojima mi moemo na vrlo elegantan nain upravljati izgledom i funkcionalnostima web stranice koju kreiramo i dizajniramo. Takoe, jQuery je dobro dokumentovan, sa velikom internet zajednicom i velikim brojem dodataka. Neke od funkcionalnosti jQuery-ja su: pristup delovima web strane, izmena izgleda strane, izmena sadraja strane, interakcija sa korisnikom, dodavanje animacija web stranici, korienje AJAX tehnologije. Neke od ovih emo pojasniti u primerima u daljem tekstu.
Upotreba jQuery-ja
Potrebno je ukljuiti jQuery biblioteku, koja se nalazi u istom folderu kao i vaa web stranica, na sledei nain: <script type="text/javascript" src="jQuery.js"></script> a zatim pisanje jQuery koda unutar <script type="text/javascript"> ... </script> Kako primeniti jQuery moi na elemente web stranice??? Upotrebom jquery selektora: jQuery() ili jednostavnije $(). Ovim selektorom se mogu selektovati elementi: po njihovom imenu (a, img, div,...), po id-ju (#moj, #tvoj, ...), ili po klasi (.klasa1, .klasa2, ...).
Nakon izabranog elementa, dodaju se funkcionalnosti primenom nekih od mnogobrojnih metoda.
Primer 1.
<html> <head> <title>IKAC ikac_ikax jQuery Primer 1.</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var br=0; /*koristimo ready() funkciju koja se izvrsava kada se ucita DOM cele web stranice a pre nego to se uitaju svi resursi */ $(document).ready(function(){ $("body").hide(); //selektujemo tag body i sakrivamo ga $("body").fadeIn(900); //kada je sakriven, postavljamo fadeIn() sa // brzinom fade-a u milisekundama /*selektujemo sve elemente koji imaju klasu .izmeni_btn i izvravamo funkciju na event click */ $(".izmeni_btn").click(function(){ alert("Kliknuo si na dugme"); }) /*selektujemo element sa id izmeni_btn i izvravamo funkciju na event click. Pri tom dodajemo atribut selektovanom a tagu, na neparan broj klikova, ili briemo atribut na paran broj klikova */ $("#izmeni_btn").click(function(){ if(br/2 == 0){ $("a").attr("target","_blank"); alert("dodati atributi"); br++; } else{ $("a").removeAttr("target"); alert("uklonjeni atributi"); br++; } }) /*Isti princip kao i sa prethodnom selekcijom, samo to koristimo toggle funkciju koja nam daje funkciju prekidaa na selektovanom elementu stranice */ /* $("#izmeni_btn").toggle(function(){ $("a").attr("target","_blank"); alert("dodati atributi"); },function(){ $("a").removeAttr("target"); alert("uklonjeni atributi"); }); */ }) </script> <style type="text/css">

a.izmeni_btn{ font-style:normal; color: black; font-family:"Arial,Verdana"; cursor:pointer; border: 1px solid silver; padding: 5px 15px;
} </style> </head> <body> <div><img src="img/jqueryLogo.png" alt="jquery logo"/></div> <div id="kompletni"> Od kompletnih biblioteka, najpopularnije su: <ul> <li>jQuery (<a href="http://jquery.com/">http://jquery.com/</a>),</li> <li>DOJO (<a href="http://dojotoolkit.org/">http://dojotoolkit.org/</ a>),</li> <li>Prototype (<a href="http://www.prototypejs.org/">http://www.prototypejs.org/</a>),</li> <li>Yahoo UI (<a href="http://developer.yahoo.com/yui/">http://developer.yahoo.com/yui/</a >).</li> </ul> </div> <div id="efekti"> Od najpoznatijih biblioteka za efekte imamo: <ul> <li>Script.aculo.us (<a href="http://script.aculo.us/"> http://script.aculo.us/)</a>,</li> <li>MooFX (<a href="http://moofx.mad4milk.net/"> http://moofx.mad4milk.net/</a>),</li> <li>Bytefx (<a href="http://devpro.it/bytefx/"> http://devpro.it/bytefx/</a>).</li> </ul> </div> <input type="button" value="izmeni" id="izmeni_btn"> <a class="izmeni_btn">Izmeni</a> </body> </html>
U navedenom primeru smo demonstrirali: kako se vri selekcija prema imenu, id-ju i klasi nekog elementa., kako moemo menjati atribute selektovanih elemenata i samim tim uticati na nain na koji e se oni ponaati.
Primer 2.
<html> <head> <title>IKAC ikac_ikax jQuery Primer 2.</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("body").hide(); $("body").fadeIn(900); $("div#slika a#vrati").attr("style","color:red;font-weight:bold;"); $("div#slika a#vrati").hide(); /*Selektujemo sve one slike sa web stranice preko imena tag-a img koje imaju atribut moj sa vrednou proba i primenjujemo ve pomenuti attr metod, a zatim event metod click */ $("img[moj=proba]").attr("style","border:1px solid red;").click(function(){ $(this).fadeOut(900); $(this).fadeIn(900); }) /*Ako elite da probate ovaj zakomentarisan kod, komentariite prethodnu selekciju poto se odnose na isti element */ /* $("img[moj=proba]").attr("style","border: 1px solid red;").click(function(){ $(this).fadeOut(900,function(){ $("div#slika a#vrati").slideDown(900); }); }) $("a#vrati").click(function(){ $(this).slideUp(900,function(){ $("img[moj=proba]").slideDown(900); }); }) */ /*Korienje pseudo klase first pri selekciji elemenata sa tag-om a, a zatim postavljanje funkcije prekigaa koja na klik dodeljuje ili oduzima klasu selektovanom elementu */ $("#izmeni_btn").click(function(){ $("div#kompletni > ul > li > a:first").toggleClass("uokviren"); //pored pseudo klase first, mogu se koristiti i last, even, odd i druge }) }) </script> <style type="text/css"> .uokviren{ border:1px solid silver; color:red; font-weight:bold; }

</style> </head> <body> <div id="slika"><img src="img/jqueryLogo.png" alt="jquery logo" moj="proba"/><br/><a id="vrati" href="#">vrati slidzu</a></div> <div id="kompletni"> Od kompletnih biblioteka, najpopularnije su: <ul> <li>jQuery(<a href="http://jquery.com/">http://jquery.com/</a>),</li> <li>DOJO(<a href="http://dojotoolkit.org/">http://dojotoolkit.org/</a>),</li> <li>Prototype(<a href="http://www.prototypejs.org/"> http://www.prototypejs.org/</a>),</li> <li>Yahoo UI(<a href="http://developer.yahoo.com/yui/"> http://developer.yahoo.com/yui/</a>).</li> </ul> </div> <div id="efekti"> Od najpoznatijih biblioteka za efekte imamo: <ul> <li>Script.aculo.us (<a href="http://script.aculo.us/"> http://script.aculo.us/)</a>,</li> <li>MooFX (<a href="http://javascriptlibraries.com/"> http://javascriptlibraries.com/</a>),</li> <li>Bytefx(<a href="http://devpro.it/bytefx/"> http://devpro.it/bytefx/</a>).</li> </ul> </div> <input type="button" value="izmeni" id="izmeni_btn"> </body> </html>
Ovde smo pokazali: kako implementirati jednostavne animacije, uticati na selekciju elemenata odreivanjem atributa ili ak i vrednou eljenog atributa, menjati klasu stilova nekom objektu klikom na dugme, vrlo mocno vezivanje metoda u kobacise :) (chaining), kako mozemo koristiti callback funkcije.
Linkovi:
http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshowplugins-and-tutorials/ http://javabyexample.wisdomplug.com/web-programming/47-javascript/85-30best-jquery-photo-plugins-sliders-slideshow-galleries-and-scrollers.html http://imageflow.finnrudolph.de/ http://pupunzi.com/#mb.components/mb.gallery/gallery.html http://flowplayer.org/tools/tooltip.html http://woork.blogspot.com/2009/02/6-interesting-online-presentations-for.html (posebno obratiti panju na prezentaciju o javascript bibliotekama od slajda 13) http://visualjquery.com/ http://www.learningjquery.com/2006/09/introducing-document-ready

Jquery - Ostvarenje Snova Svakog Web Programera

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery - Ostvarenje Snova Svakog Web Programera

Uploaded by

Copyright:

Available Formats

tema predavanja

student Ilija Lazarevi 67/07

Ilija Lazarevi - jQuery

JQUERY - JavaScript biblioteka

Ilija Lazarevi - jQuery

Ilija Lazarevi - jQuery

Nakon izabranog elementa, dodaju se funkcionalnosti primenom nekih od mnogobrojnih metoda.

Ilija Lazarevi - jQuery

Ilija Lazarevi - jQuery

Ilija Lazarevi - jQuery

Ilija Lazarevi - jQuery

Ilija Lazarevi - jQuery

You might also like