Dal 2005 nei vostri browser, jQuery in “Amore a prima vista”

Partiamo da un punto sicuro: gli attori di questo film hanno molto da dire e non sono pochi.
Ci sono JavaScript e Browser con il loro amico ed interprete DOM. C’è l’HTML che non parlando bene la propria lingua per colpa di un cattivissimo W3C cerca sempre un modo per farsi capire.
E soprattutto c’è un manipolo di eroi che, per permettere che tutti possano sfruttare al massimo la propria creatività e compatibilità sul web (e non solo), ha pensato di elaborare librerie di codice che rendano JavaScript facile da usare e da implementare, che modifichi semplicemente visualizzazione e benefici dell’Html.

L’arma segreta si chiama jQuery.Grazie al cielo, esiste l'Open Source

Ovviamente qui parlerò di come rapportarsi a jQuery e illustrerò potenzialmente l’intero processo che ci porta da utilizzatori di codice esistente a sviluppatori di potenzialità limitate solo dalla nostra creatività (tempo permettendo, ovvio .

jQuery non è (non era, ok, è del 2006 la prima uscita stabile in pubblico) un linguaggio nuovo, ma un modo nuovo di scrivere codice JavaScript pulito e veloce.

<script src="NomeFilejQueryUtilizzato.js"></script>

Posso dividere gli step da seguireÈ una mia semplificazione, facile da ricordare. per utilizzarlo nel modo più veloce:

1. Ottenere un file .js contenente il framework jQuery e copiarlo in una cartella del sito ( attualmente è http://code.jquery.com/jquery-1.7.1.min.js) o ancora meglio usarlo con google.load(“jquery”, “1.7.1″);
2. Collegarlo nella pagina web con

   <script src="NomeFilejQueryUtilizzato.js"></script>

3. “Lanciare” il software (traduzione: chiamare la funzione che ci serve, sfruttando appunto i nomi, i metodi ecc messi a disposizione da jQuery), ad esempio:
   $(“a”).click(function(event){
   event.preventDefault();
   // preventDefault() è il nome della funzione usata
   // date un’occhiata qui http://api.jquery.com/event.preventDefault/
   $(this).hide(“slow”);
   });

http://jqueryui.com/jquery-1.6.2.js

http://jqueryui.com/ui/jquery.ui.core.js

http://jqueryui.com/ui/jquery.ui.widget.js

http://jqueryui.com/ui/jquery.ui.mouse.js

http://jqueryui.com/ui/jquery.ui.resizable.js

#resizable { width: 150px; height: 150px; padding: 0.5em; } // il div

#resizable h3 { text-align: center; margin: 0; } // il titolo del contenitore

.ui-resizable-helper { border: 1px dotted gray; } // interessante visualizzazione personalizzata dell'elemento nell'atto del ridimensionamento.

Ed infine chiamiamo la funzione ( fase 3, ricordate? ).

<script>
	$(function() {
		$( "#resizable" ).resizable({
			animate: true
		});
	});

</script>

Tweet