Tutorial jQuery – Write Less, Do More

Sursa tutorial: cursul de Programare Web – Universitatea Politehnica Bucuresti, pentru informatii la zi sunteti rugati sa vizitati acest site.

Bine v-am gasit pe ItAssistant! In acest tutorial va vom prezenta limbajul jQuery si cateva tehnici de utilizare a acestuia. La sfarsitul tutorialului puteti gasi si un exemplu practic de utilizare.

Framework-urile Javascript au aparut din cauza inconsistentelor dintre modul de tratare al standardelor in diferite browsere si din cauza modului in care este proiectat API-ul DOM.

jQuery este de departe cel mai folosit. A fost lansat in 2006 de catre John Resig (Mozilla) si de atunci a castigat constant in popularitate cu trecerea timpului.

jQuery aduce numeroase metode noi si “scurtaturi” in lucrul cu DOM-ul si cu Javascript in general, in contextul paginilor web. Deoarece documentatia este extensiva si exista numeroase site-uri care incearca sa prezinte cat mai bine frameworkul, nu voi trata aici in detaliu caracteristicile sale.

Ce este important sa retineti este faptul ca, prin folosirea jQuery aveti la dispozitie un API puternic, proiectat mai bine si mai user-friendly decat cel al DOM-ului si care va garanteaza o functionare buna a codului scris de voi in 99% dintre situatii, indiferent de browser.

Metodele puse la dispozitie de jQuery sunt grupate in functie de obiectivele pe care isi propun sa le indeplineasca:

• Referentierea elementelor se face cu ajutorul obiectului jQuery (jQuery() sau $()) si a selectorilor CSS suportati.

  De asemenea, jQuery pune la dispozitie si numeroase metode de traversare a DOM-ului. De exemplu:

  var element = $('div.container div#caption > img');

• Manipularea DOM-ului se face cu ajutorul unor metode care se aplica direct unui element referentiat prin obiectul jQuery. De exemplu:

  $('div.article p:first-child').addClass('abstract').after('<hr />');

• jQuery permite atasarea de evenimente si ofera anumite functionalitati care nu sunt disponibile direct din DOM. De exemplu, metoda .live() ataseaza evenimente pe toate elementele care se potrivesc unui anumit selector, chiar daca ele au fost inserate in DOM dupa ce metoda a fost apelata:

  $('.clickme').live('click', function() {
    // Live handler called.
  });
  $('body').append('<div class="clickme">Another target</div>');
  // divul inserat va avea setat evenimentul declarat mai sus

Principii generale pentru dezvoltarea cu Javascript in pagini Web

Faptul ca programarea in Javascript are un “low barrier of entry” este o sabie cu doua taisuri. Pe de-o parte, este foarte usor pentru oricine sa faca scripturi simple care sa adauge functionalitate paginilor web. Pe de alta, exista foarte multe pagini web ce contin cod gandit prost si care le face inaccesibile pentru unii potentiali utilizatori.

Trebuie sa aveti in vedere ca nu toata lumea are Javascript activat si ca diferite browsere (si/sau terminale) nu suporta orice functionalitate.

Cele mai importante trei principii de avut in vedere sunt: graceful degradation, unobtrusive javascript si backwards compatibility.

jQuery – Graceful degradation

Graceful degradation se refera la faptul ca Javascript nu ar trebui sa fie elementul determinant pentru functionarea unei pagini web. Totul ar trebui sa functioneze si atunci cand Javascript este dezactivat, fie si fara o comportare identica.

Secventa de mai jos este un exemplu de “asa nu” din punct de vedere al graceful degradation:

<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example<a>

V-ati putea intreba cine nu are Javascript activat in zilele noastre. Un raspuns posibil ar fi un search-engine spider . Alt raspuns ar putea fi un utilizator cu dizabilitati. Codul de mai sus ar putea fi rescris pentru a permite urmarea linkului si atunci cand Javascript nu este disponibil:

<a href="http://www.example.com/" onclick="popUp(this.getAttribute('href')); return false;">Example</a>

Unobtrusive Javascript

Unobtrusive Javascript se refera la separarea cat mai atenta a comportamentului (js) de structura documentului (html). Aceasta stratificare confera o flexibilitate mai mare atat codului cat si markupului si reduce posibilitatea aparitiei unor erori care sa afecteze functionarea paginii. Fie urmatorul exemplu in care codul Javascript este scris intr-un fisier separat:

example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jsExample.js"></script>
 
</head>
<body>
	<a href="http://www.example.com/" class="popup">Example</a>
</body>
</html>

jsExample.js

var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
  if (links[i].classname == "popup") {
    links[i].onclick = function() {
      popUp(this.getAttribute("href"));
      return false;
    }
  }
}

Observati linia care include o sursa avand cod Javascript, intr-un fisier html.

jQuery – Backwards compatibility

Backwards compatibility se refera la luarea in considerare a faptului ca diferite medii de executie ofera diferite grade de suport pentru diferite elemente ale DOM-ului. Exista doua tehnici pentru a verifica daca un browser suporta metodele folosite.

Prima se numeste object detection. Consta in verificarea metodelor si proprietatilor folosite din DOM si terminarea scripturilor in cazul in care ele nu sunt disponibile:

if (!document.getElementsByTagName) return false;

Cea de-a doua tehnica este browser sniffing, verificarea browserului si a versiunii pentru a determina ce cod (si daca) va fi folosit. Este nerecomandata pentru ca, uneori, browserele mint si, oricum, numarul mare de browsere si versiuni duc la branch-uri foarte complicate si ilizibile. Pentru backwards compatibility, object detection este metoda preferata.

In continuare va prezentam un exemplu de creare a unei galerii de imagini cu ajutorul jQuery; Codul exemplului il puteti downloada de AICI

fisierul “1.css”

#slideshow_wrapper {
    position: relative;
    left: 21px;
    top: 5px;
}
 
#slideshow_set li {
    float: left;
}
 
#placeholder {
    float: right;
}

fisierul “index.html”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<link rel="stylesheet" href="1.css" type="text/css"/>
 
<title>Image Gallery</title>
 
<link rel="stylesheet" href="1.css" type="text/css"/>
 
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
 
<link rel="stylesheet" href="1.css" type="text/css"/>
 
<script type="text/javascript">
	$(document).ready(function(){
		$('a').click (function () { 
			var img = $(this).attr("href");
			$('#placeholder').attr("src", img);
 
			var imgs = $('a');
			var i = 0;
			jQuery.each(imgs, function() {
				if ($(this).hasClass('show')) {
					$(this).removeClass('show');
					}
			});
 
			$(this).addClass ('show');
			return false;
		});
 
		$('button#back').click (function () {
			var imgs = $('a');
			var i = 0;
			jQuery.each(imgs, function() {
				if ($(this).hasClass('show')) {
					$(this).removeClass('show');
 
					if (parseInt(i) != 0) {
						$(imgs[i-1]).addClass('show');
						var img = $(imgs[i-1]).attr("href");
						$('#placeholder').attr("src", img);
						return false;
					} else {
						$(imgs[imgs.length-1]).addClass('show');
						var img = $(imgs[imgs.length-1]).attr("href");
						$('#placeholder').attr("src", img);
						return false;
					}
				}
				i++;
		   });
 
		   return false;
		});
 
		$('button#next').click (function () {
			var imgs = $('a');
			var i = 0;
			jQuery.each(imgs, function() {
				if ($(this).hasClass('show')) {
					$(this).removeClass('show');
 
					if (parseInt(i) < parseInt(imgs.length-1)) {
						$(imgs[i+1]).addClass('show');
						var img = $(imgs[i+1]).attr("href");
						$('#placeholder').attr("src", img);
						return false;
					} else {
						$(imgs[0]).addClass('show');
						var img = $(imgs[0]).attr("href");
						$('#placeholder').attr("src", img);
						return false;
					}
				}
				i++;
		   });
 
		   return false;
		});
	});
</script>
 
</head>
<body>
	<h1>Snapshots</h1>
	<button id="back" type="button"><< BACK</button>
	<button id="next" type="button"> NEXT >></button>			
	<div id="slideshow_wrapper">
		<ul id="slideshow_set">
			<li>
				<a href="images/superman.jpg" class="show">
					<img src="images/superman-thumbnail.jpg" alt="Superman" />
				</a>
			</li>
			<li>
				<a href="images/flash.jpg">
					<img src="images/flash-thumbnail.jpg" alt="Flash" />
				</a>
			</li>
			<li>
				<a href="images/green-lantern.jpg">
					<img src="images/green-lantern-thumbnail.jpg" alt="Green Lantern" />
				</a>
			</li>
			<li>
				<a href="images/batman.jpg">
					<img src="images/batman-thumbnail.jpg" alt="Batman" />
				</a>
			</li>
		</ul>
	</div>
 
	<img id="placeholder" src="images/superman.jpg" alt="" />
</body>
</html>

Codul exemplului il puteti downloada de AICI

Related posts:

1. Document Object Model – DOM scripting
2. AJAX – asynchronous JavaScript and XML
3. HTML Real Time Editor – Tutorial Video
4. Google Voice Search – tutorial video
5. Prezentare uTorrent – tutorial video