jQuery: Introducere


Există mai multe librării (sau framework-uri) JavaScript, iar jQuery (nu) este (doar) una dintre ele. Ele vin în ajutorul webdeveloperilor scutind timpi valoroşi: prin recursul la o astfel de librărie un anumit efect sau comportament într-o pagină web, în loc să necesite zeci, sute de linii de cod, se reduce la 1-2 rânduri. Desigur, acele zeci, sute de linii de cod nu dispar, se transferă doar în librăria JavaScript, dar nu avem noi dureri de cap cu scrierea ei şi în plus avem garanţia calităţii ei.

Cu jQuery, sau cu alte librării similare, anumite lucruri devin o joacă de copil. Dacă obiectivele sunt însă mai pretenţioase, jQuery nu scuteşte, ba dimpotrivă presupune ca webdeveloperul să ştie JScript, PHP/ASP, CSS, să aibă ceva noţiuni de programare obiectuală… Dacă sunteţi un începător, jQuery v-ar putea fi de folos pentru unele lucruri, inutil pentru lucruri mai avansate. Dacă sunteţi un profesionist, atunci jQuery nu vă scade nimic din prestigiu, dimpotrivă uşurându-vă munca şi permiţându-vă să vă concentraţi asupra provocărilor specifice aplicaţiei în lucru.

Intenţia mea este să învăţ cât de cât jQuery, un efort la care vă invit să luaţi parte :) . Am folosit până acum jQuery, funcţii banale dar şi funcţii avansate, într-o singură webaplicaţie, ceea ce îmi conferă o experienţă mică-mititică. Vreau să aflu mai multe şi am să încerc să o iau sistematic. Şi dacă tot este să parcurg anumite materiale le voi oferi în adaptare în limba română. Resursa principală este situl jQuery.com şi linkurile lui. Nici un material nu va fi o traducere 100% al vreunuia existent, având preferinţele mele, locurile unde mă interesează să insist, dar şi lacunele mele. Şi ca introducerea să nu îşi piardă deja audienţa trecem la lucru. Vă recomand un editor text (fie Notepad, Notepad++ sau care preferaţi Dvs). De pe jQuery salvaţi librăria: este un singur fişier js care vine în două variante: compactat şi necompactat. Cât suntem în "studiu" este recomandată varianta necompactată. Varianta compactată are cam 20kb, incredibil pentru câte oferă. Eu am salvat fişierul într-un subdirector numit js astfel că "scheletul" de la care pornim este:

<html>
<head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    // Codul Dvs vine aici
  </script>
</head>
<body>
  <a href="http://jquery.com/">jQuery</a>
</body>
</html>

Adaptaţi linia a treia după locul unde aţi pus Dvs fişierul cu librăria jQuery (şi numele fişierului – la descărcarea de pe web el va purta în nume şi versiunea). Secvenţa de mai sus este cea de la care porneşte "tatăl" lui jQuery, John Resig, în articolul How jQuery Works. Dacă veţi verifica această pagină în navigator nu veţi avea nimic extraordinar. Un click pe unicul link vă va conduce la situl jQuery. Observăm însă partea cu Codul Dvs vine aici. Să facem o distincţie: există două feluri de interacţiuni pe care le dorim prin JScript – unele care să fie aplicate când pagina s-a încărcat, iar altele care dorim să fie declanşate de vizitator (prin click, submit…). Pentru primul caz se regulă codul JScript este pus apelând la windows.onload. jQuery are o structură proprie definită ce permite să ne asigurăm că respectivul cod este aplicat pe pagina HTML după ce aceasta a fost încărcată, dar fără obligativitatea ca şi imaginile din pagină să se fi încărcat.

$(document).ready(function(){
  // Codul aici
});

Ceea ce vom scrie unde este notat Codul aici va fi executat după ce pagina HTML s-a terminat de încărcat. Este timpul deci să punem primele acţiuni cu jQuery.

$("a").click(function(){
  alert("Sunteti pe cale sa parasiti aceasta pagina!");
});

Acum dacă dăm click pe link vom vedea un avertisment. Încă ne aflăm în zona la "dar aşa ceva pot şi fără jQuery!" Desigur. Am fi scris astfel (în secţiunea body):

<a href="http://jquery.com/" onClick="alert(’Sunteti pe cale sa parasiti aceasta pagina!’;">jQuery</a>

Dar puterea primului cod indicat este că alerta apare la orice link am mai adăuga în pagina HTML. Recunoaştem puterea programării orientate pe obiecte. Cu puţin cod am adăugat un comportament nou la orice link. Dar… dacă nu dorim toate linkurile să reacţioneze la fel? O primă soluţie ar fi să atribuim comportamentul unor link-uri identificate cumva. Modificăm puţin codul de mai sus şi îl includ de altfel integral.

<html>
<head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#linkcualert").click(function(){
        alert("Sunteti pe cale sa parasiti aceasta pagina!");
      });
    });
  </script>
</head>
<body>
  <a href="http://jquery.com/">jQuery</a>
  <a href="http://jquery.com/" id=linkcualert>jQuery</a>
</body>
</html>

După cum vedeţi mai sus am indicat ca reacţia la click să fie modificate doar la acele taguri care au ca id linkcualert. În pagină sunt două linkuri cu acelaşi text şi conducând spre aceeaşi pagină, dar al doilea are ca id linkcualert. Rezultatul? Primul link la click se va comporta normal (conduce la pagina jQuery.com) în timp ce al doilea va afişa mai întâi o boxă tip alert cu textul "Sunteti pe cale sa parasiti aceasta pagina!" Vedeţi online pagina tocmai descrisă aici sau descărcaţi tot codul într-o arhivă zip de aici.

Există încă o metodă, prin clase şi apelarea la filtre. Observaţi folosirea punctului! După ce se indică un filtru (pentru o clasă) indicaţi acţiunea.

$("a")
  .filter(".sprecnet")
    .click(function(){
      alert("Ati ales sa mergeti pe CNet.ro.");
    })
  .end()
  .filter(".spregoogle")
    .click(function(){
      alert("Ati ales sa mergeti pe Google.ro.");
    })
  .end();

În fine, mai rămâne să definim linkuri cu clase. Intuiţi deja ce fac primele două linkuri de mai jos. Al treilea se comportă "normal" (adică va conduce spre pagina respectivă fără nici o alertă).

<a href="http://www.cnet.ro/" class="sprecnet">CNet.ro</a>
<a href="http://www.google.ro/" class="spregoogle">Google</a>
<a href="http://www.microsoft.ro">Microsoft</a>

Vedeţi online pagina tocmai descrisă aici sau descărcaţi tot codul într-o arhivă zip de aici.

Deja ştim cum să limităm anumite comportamente pe care le definim la doar anumite elemente din pagină. Într-un următor material vom căuta nişte efecte vizuale mai deosebite dar şi vom aborda şi unele aspecte mai teoretice. Întotdeauna cu exemple descărcabile, astfel încât să vă fie uşor să vedeţi întreg codul, pentru studiu, teste, modificări…


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (3 evaluări, media: 5,00 din 5)
Loading...Loading...

2 comentarii

  1. Frumos Radu!!! Te pricepi!
    Eu sunt incepator dar vreau sa invat cu disperare pt ca ma pasioneaza f mult! Astept si continuarea…

  2. coman marius spune:

    Salut, vreau sa folosesc intr-un site un efect precum cel din http://www.hondatrading.ro/modele/Jazz/1-4-Comfort-MT/100. Nu stiu ce efect este din cadrul librariei JQuery.

    Multumesc anticipat,
    Coman Marius


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *