duminică, 11 ianuarie 2009

jQuery, interfete web la superlativ

De ce avem nevoie de o librarie JavaScript?
- browser-ele nu interpreteaza toate la fel "portia" HTML + CSS + Javascript pe care o "servesc"; un layer de abstractie care sa ascunda de noi acest crud adevar, ar fi numai bun
- primitivele JavaScript sunt suficient de rudimentare cat sa nu-ti permita sa faci mai nimic usor

jQuery e una din solutiile pentru aceste probleme:
- este mic (varianta "minima" are 15kb)
- este rapid (l-am folosit in productie, si se comporta extrem de bine)
- este compatibil cu CSS1-CSS3 si cross-browser

Pentru niste exemple "live", va recomand:
- un tutorial cu exemple, la http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
- documentatia jQuery: langa fiecare functie se regaseste si un exemplu de folosire al ei

Sa trecem acum la treburi mai tehnice. Iata cum arata un hello world in jQuery:
 $(document).ready(function(){
alert("Hello, world!");
});
In primul rand, nu va speriati de semnul dolar ($) - este un nume de functie permis in JavaScript. In al doilea rand, va invit sa observati faptul ca jQuery implementeaza concepte din programarea functionala, in exemplul nostru fiind transmisa ca parametru o functie anonima. Daca doriti un articol introductiv usurel despre programare functionala, va recomand cu caldura: Can your programming language do this?, de Joel Spolski.

jQuery se bazeaza pe cateva principii de programare sanatoase, care fac codul mult mai clar si mai scurt:
  • filtrare: principala functionalitate a functiei $() este de a filtra elementele din arborele DOM. Sintaxa este usor de invatat si este asemanatoare cu altele de care v-ati mai lovit
  • chaining: ati observat probabil constructia $(document).ready(): orice functie jQuery intoarce obiectul asupra careia a actionat functia, modificat; aceasta este o constructie standard in multe framework-uri, precum Hibernate
  • manipulation: chiar daca rezultatul filtrarii este format dintr-unul sau mai multe elemente, toate pot fi modificate in acelasi stil; operatii standard: adaugare/stergere clasa CSS, modificarea textului nodului, ascunderea elementelor; daca nu va ajung functionalitatile predefinite, nu-i nici o problema, puteti defini propria: $(criteriu filtrare).each(function(node) { /* cod aici */ });
  • suporta plugin-uri: permite definirea de plugin-uri, si gasiti de toate pentru toti, de la elemente grafice construite peste aceasta librarie (exista chiar jQuery UI). Printre cele mai folositoare, enumar: tree-uri si tabele
Sperand ca v-am convins sa-l incercati, va urez spor la programat!

Niciun comentariu:

Trimiteți un comentariu