Jquery tutorial come iniziare

Innanzitutto un buo anno a tutti, non scrivo spesso , ma volevo iniziare l’anno nuovo con un tutorial su jquery.

Il mio obiettivo sarà quello di farvi capire con parole non troppo tecniche la programmazione in jquery, e vorrà essere anche un libro online di appunti personali durante il mio studio di questo fantastico linguaggio.

Iniziamo:

Che cosa vi serve per iniziare questa nuova avventura con questo fantastico linguaggio di programmazione?

Conoscere:

css , html ed avere un’infarinatura anche semplice di programmazione.

Sapere quindi cosa sono i selettori, cos’è il DOM e che cos’è un if vi aiuteranno in modo ancora più semplice ad imparare con più velocità.

Che cos’è jquery?

Jquery è un linguaggio di programmazione che permette di rendere interattivo il vostro sito web creando affascinanti gallery/animazioni o controlli complessi su form, in una sola parola, jquery è una potente libreria che darà un’esperienza unica al vostro visitatore.

Si pensi ad esempio ad un effetto light box , ad una gallery animata, ad uno slide di immagini oppure ad un controllo sul form per invio dei dati , tutto questo viene eseguito anche con jquery (ma non è l’unico modo per farlo)

Jquery ad esempio ci viene utile anche per creare siti web fruibili anche da i-phone andando a sostituire animazioni in flash (non supportati dal dispositivo della Apple)

Vi può bastare?

Eccone un esempio di quello che può fare:

Photo Gallery in jquery

La prima cosa che dovete fare per poter prorammare è scaricare la libreria dal sito web ufficiale, sempre aggiornata:

Scaricabile da qui: Jquery library

La seconda cosa da fare , una volta scaricata è inglobarla all’interno del vostro sito web in questo modo:

<script type=”text/javascript” src=”jquery-1.6.4.js”></script>

da inserire prima della fine del tag </head>

In questo modo avrai all’interno del tuo sito web la libreria per poter iniziare a programmare.

La prima cosa da sapere quando iniziamo a programmare con jquery è a cosa serve il simbolo $

Il simbolo $ altro non è che il semplice sostituto della parola jquery da utilizzare prima di un selettore.

Si userà moltissimo all’interno di un programma quasi fino alla noia, ecco perchè è nata l’idea di sostituire la parola jquery con il simbolo $ , molto più veloce da digitare.

JQuery(‘p’).css(‘color’, ‘red’);

Rimane in questo modo:

$(‘p’).css(‘color’,'red’);

Con questa semplice riga di codice andiamo ad intervenire direttamente sul dom del sito web come faremmo con i CSS.

Risultato:

Tutto il testo contenuto tra <p> sarà di colore rosso.

Messo cosi però all’interno del sito web prima del tag </head> non funzionerebbe.

Infatti essendo un codice script andrà inserito tra questi tag

<script type=”text/javascript”></script>

Inoltre per funzionare a dovere il codice che abbiamo creato la pagina dovrà essere completamente caricata.

Pensiamo infatti se questo paragrafo <p> è nell’ultima parte del sito web, e lo script invece si trova ad inizio pagina. Non succederà nulla.

Per ovviare a questo dovremmo inserire il codice tra queste righe

$(document).ready(function(){

alert(‘questo è il mio primo programma in jquery’);

});

Cosi facendo quando la pagina sarà tutta caricata il jquery inizierà a leggere le righe interne ed un splendido alert comparirà sulla nostra pagina.

Per ora terminiamo cosi, a breve il prossimo passo.

About these ads