Menu

Write less do more

Torna alle news
07/02/2015
jQuery, Ajax, Web design, JavaScript

Le pagine web su cui navighiamo quotidianamente, sono realizzate, oltre ai conosciutissimi HTML e CSS, anche dai sempre più sfruttati comandi JavaScript, spesso (troppo spesso) associati all'idea di popup invadenti e fastidiosi. 

Il linguaggio javaScript è stato tuttavia rivalutato negli ultimi anni, grazie ad alcune peculiarità offerte. Tra queste spiccano su tutte:
  • possibilità di creare effetti grafici dinamici che migliorano la user experience
  • chiamate asincrone Ajax (Asynchronous JavaScript and XML), overo blocchi di codcie che consentono di caricare dinamicamente contenuti web senza dover cambiare la pagina visualizzata
L'unico neo che non si riesce a eliminare è che la programmazione con javaScript (client side) è ancora fonte di problematiche e mal funzionamenti, provocati dalla eccessiva varietà di browser sulò mercato, che ne interpretano il funzionamento con logiche completamente differenti e spesso anomale. Basti pensare a Internet Explorer (aiuto!!!)

Giunti a questo punto la domanda sorge spontanea: come fare per implementare un codice cross-browser senza farci venire il mal di testa?

La risposta è jQuery!

Cos'è jQuery?
jQuery è un framework (sviluppato a John Resig a partire dal 2006 ) avente l'intento di rendere il codice javaScript sintetico e compatibile.

Per carpirne meglio il funzionamento e le differenze semantiche vediamo qualche esempio pratico:

Scriviamo il codice necessario per spostare verso sinistra un box.

Attraverso Javascript

function move(elem) {
    var left = 0
        function frame() {
        left++ //modifica del parametro left
        elem.style.left = left + 'px' // movimento!
        if (left == 100)  // controllo della condizione (se ho raggiunto i 100 px fermati)
          clearInterval(id)
      }
    var id = setInterval(frame, 1) // animazione lanciata ogni 1ms
    }

//Lanciamo la funzione appena creata mediante il comando onclick="move(this.children[0])"
 
Clicca il box verde per lanciare l'animazione

Stessa funzione realizzata mediante Jquery

$('.box_example').click(function(){
$(this).find('.example_block').animate({'left':'100px'},500);
});
 
Clicca il box verde per lanciare l'animazione

jQuery ci offre inoltre svariate funzionalità per arricchire il nostro codice

Easing 

Easing è un paramentro che può essere aggiunto alle animazioni per modificarne l'andamento nel tempo, ottenendo risultati completamente differenti: le nostre animazioni eseguiranno gli stessi processi logici ma con un  andamento variabile.


Proviamo ad utilizza l'easing easeInCubic andamento che come si evince dall' immagine risulta esser molto parabolico lento in partenza e rapidissimo al termine dell'animazione.

$('.box_example3').click(function(){
$(this).find('.example_block').animate({'left':'100px'},
500,
'easeInCubic' //Easing
);
});

 
 
Clicca il box verde per lanciare l'animazione

callback

Funzione utilissima che ci consente di editare altri script da eseguire al termine delle noste animazioni.

$('.box_example2').click(function(){
$(this).find('.example_block').animate(
{'left':'100px'},
500,
function(){ //callBack
alert(''Animazione terminata);
});
});

 
 
Clicca il box verde per lanciare l'animazione

Con "un pugno di $", siamo riusciti a personalizzare in modo rapido e sintetico il nostro codice, con Javascript avremmo (forse) potuto ottenere lo stesso risultato editando molteplici righe di codice, che avremmo poi dovuto verificare su molteplici browser, senza avere la garanzia di una compatibilità totale su tutti i browser.

Metti un like

Vuoi saperne di più? Contattaci subito!

Privacy Policy
Ho letto e autorizzo il trattamento dei miei dati personali.


Invia

Non perderti le nostre news

Privacy Policy
Ho letto e autorizzo l'invio della newsletter.