Server Locale PHP - PHP-CAR.SPECIALI - un editor - JQuery - CAPTCHA - HOME - Contatti - Osteoporosi - Radioactivity
Conosciamo JQuery
Confesso che per molto tempo ho guardato javascript con una certa indifferenza. Lo usavo poco e lo sapevo usare poco, giusto per validare talvolta qualche input di un form.
Da qualche tempo si vedono con crescente frequenza numerosi articoli che presentano i cosiddetti frameworks javascript, come MOOTOOLS, JQuery, Scriptaculous, Prototype, UI, eccetera.
Ho letto alcuni articoli, ho provato alcune routines e devo dire che ora ho un grande rispetto di queste complesse costruzioni software ed ho cominciato a studiarle e ad usarle.
Esiste un accordo diffuso che per molti aspetti, il più interessante ed evoluto software di questi tipo sia JQuery. Esistono centinaia di plugins JQuery già pronti, solo da scaricare, provare e personalizzare, e non è difficile imparare ad usare questo framework, per poter costruire routines personalizzate.
Uno dei grandi pregi di questi è la liberazione dal 'drammatico' problema del differente comportamento dei vari browsers e delle varie versioni dello stesso browser, nei riguardi dei comandi CSS. Il problema in realtà rimane, ma è stato risolto dal genaile gruppo di programmatori che stanno alla base di questi frameworks. Questo vuol dire che noi possiamo, tramite la loro intelligenza e le loro fatiche, solo pensare a programmare, e qualunque browser avrà finalmente un comportamento 'esemplare' (persino IE!!). Per di più, come tutti i software che presento su questo sito, è FREEWARE!.

Come funziona JQuery
Mi scuseranno i veri esperti di JQuery per ciò che mi appresto a dire, ma tanto per cominciare a capire, penso vada bene.
JQuery ci fornisce un potentissimo mezzo per raccogliere, selezionare, modificare ciò che è contenuto ad esempio, fra le coppie di tags <div>..</div> <ul>..</ul>, eccetera.
Di questo contenuto possiamo fare quello che vogliamo (o meglio, sappiamo fare): cambiare lo stile, cambiare il testo, aggiungere e/o togliere testo e/o tags e così via, in pratica modificando pesantemente l'aspetto finale della pagina WEB. Ricordo che javascript è un linguaggio client-side, ovvero risiede nel PC dell'utente e qui agisce sulla pagina dopo che questa è stata inviata al PC dal server remoto. Inoltre esiste una particolare funzione, che sta alla base del protocollo AJAX, che permette a javascript di inoltrare una chiamata ad un programma che risiede sul server remoto, e di usare la relativa risposta per aggiornare solo parte della pagina in questione, con grande guadagno nella velocità di aggiornamento della pagina.
Ed anche questo è gestito molto semplicemente da JQuery con poca nostra fatica. Niente male, ed inoltre gratis!.

Scaricare JQuery
JQuery viene aggiornato molto frequentemente, al momento in cui scrivo siamo alla versione 1.3.2. Conviene controllare periodicamente sul sito JQuery. Esiste la possibilità di scaricare sia il file esteso, per studiarne il codice, oppure un file compresso, quindi molto più piccolo e 'leggero', ad esempio ora si scarica la versione JQuery-1.3.2.min.js che è circa la metà del file non compresso, circa 56KB invece degli oltre 100 di quello non compresso.
Scaricate il file compresso da questo indirizzo, scegliendo sempre il più recente e 'minified' o meglio ancora 'packed' (se è presente), perchè ancora più piccolo.
Il file dovrà risiedere sul server remoto ed anche in una qualche directory del nostro server locale, ad esempio nella cartella 'js'.

Un esperimento iniziale JQuery
Ora dobbiamo includere il file nella nostra pagina nella sezione HEAD. La sintassi è la seguente:

<script language='javascript' src='js/JQuery-1.3.2.min.js'></script>

Da questo momento possiamo cominciare a fare qualche prova.
Creiamo una pagina HTML:


<HTML>
<HEAD>
<script language='javascript' src='js/JQuery-1.3.2.min.js'></script>
<script language='javascript'>
$(document).ready(function(){
    $("input.buttonA").click(function(){ alert($("div.content").find("p").size()); });
    $("input.buttonB").click(function(){ alert($("div.content").find("em").size()); });
    $("input.buttonC").click(function(){ $("div.content").toggle("slow"); });
});
</script>
<style type='text/css'>
.red{color:#FF0000}
</style>
</HEAD>
<BODY>
<div id='content'>
    qui inizia il contenuto del div id='content'
    <img src='jquery-logo-gif'>
    <p><span class='red'>test jquery 1</span></p>
    <p><em>test jquery 2</em></p>
    qui termina il contenuto del div id='content'
</div>
<input value="# Paragrafi" class="buttonA" type="button">
<input value="# EM" class="buttonB" type="button">
<input value="va e vieni" class="buttonC" type="button">
</BODY>
</HTML>

Potete scaricare il file ZIP con il codice della pagina. Poi scompattatelo, ricordate di rinominarlo jquery-demo.html, di creare un cartella js, e di scaricare l'ultimo JQuery in tale cartella, correggendo in HEAD del file HTML se la versione non corrisponde. Scarica il testo zippato della pagina di prova qui (downloads 1642)

Ecco la pagina come si presenta...
qui inizia il contenuto del div id='content'

test jquery 1

test jquery 2

qui termina il contenuto del div id='content'

Ora proviamo come funziona.
Cliccando sul bottone '# paragrafi' appare un alert con il numero di paragrafi, cioè di tags <p>
Cliccando sul bottone '# em' appare un alert con il numero di tags <em>
Cliccando sul bottone 'va e vieni' tutto ciò che sta nell'interno dell'ID 'content', testo ed immagini, scompare e/o riappare.

E tutto questo con le pochissime righe di codice che vedete.
Grande risultato!
Ora studiate sui vari tutorials presenti in rete, provate e riprovate, e Buon divertimento.
Tutorials
(raccomandato)JQuery (tutorial originale in Inglese)
JQuery (tutorial in Italiano)
(Vers. 2.1)  Modificato il 30-11-2010
http://www.tarozzi.net   
disclaimer