Blogrammazione » Javascript

ExtJs, inviare un array nelle chiamate Ajax

marco — Wed, 19 May 2010 15:48:37 +0000

Le chiamate asincrone sono ormai un fondamento delle interfacce web, e praticamente tutti i principali framework javascript in circolazione forniscono degli strumenti embedded che semplificano lo sviluppo e automatizzano la maggior parte delle impostazioni.

ExtJs è un framework javascript che è riuscito ad ottenere forti consensi nell’ambito dello sviluppo di interfacce web: questo grazie soprattutto alla potenza del prodotto e alla comunità decisamente attiva che fornisce un importante supporto agli sviluppatori.

Il meccanismo implementato da questo framework per eseguire chiamate Ajax è estremamente semplice ed intuitivo, meccanismo che tra le altre cose ricorda molto da vicino quello adottato da altri framework javascript come JQuery. Vediamone un esempio:

Ext.Ajax.request({
[…]
url: ‘pagina.php’,
params: {id: ‘3’},
success: function(resp) {
[…]
} ,
failure: function(a, b) {
[…]
}
});

Con queste poche righe di codice, ExtJs ci permette di eseguire una chiamata Ajax verso l’indirizzo specificato nel parametro di configurazione “url” (pagina.php) e di gestire sia il caso di risposta positiva sia il caso di insuccesso.
“params” invece permette di specificare i parametri che verranno inviati al file “pagina.php” durante la chiamata Ajax: nel nostro esempio inviamo un parametro con identificativo “id” che contiene il valore 3.

E se volessimo inviare un array? Nessun problema, ci viene in aiuto JSON.

ExtJs è chiaramente progettato per fornire pieno supporto a JSON, dunque possiamo sfruttare questo protocollo. Codifichiamo quindi il nostro array utilizzando le funzioni che ExtJs ci mette a disposizione, come ad esempio la seguente:

Ext.encode(array)

Supponendo quindi di voler inviare un array di valori con una chiamata Ajax il nostro codice potrebbe diventare:
Ext.Ajax.request({
[…]
url: ‘pagina.php’,
params: {data: Ext.encode(arrayData)},
success: function(resp) {
[…]
} ,
failure: function(a, b) {
[…]
}
});

Lato server, sarà sufficiente eseguire il decoding del parametro “data”, che giunge al server sottoforma di stringa JSON:

$myArray = json_decode($_POST[‘data’]);

Vota Articolo:

Google Maps – Come inserire sul proprio sito le google maps con indirizzi dinamici

marco — Sat, 18 Apr 2009 10:55:14 +0000

Gli strumenti forniti da Google sono sempre più utilizzati per integrare i portali web con servizi sempre più interessanti.
Tra i più utilizzati e apprezzati dagli utenti, vi sono sicuramente le google map, ovvero le mappe che indicano l’esatta posizione di un indirizzo o di una locazione geografica.
Oramai su quasi tutte le pagine “Contatti” sparse per il mondo è presente tale servizio: l’utilizzo è molto semplice, e la documentazione ricca, anche se per specifiche personalizzazioni bisogna impegnarsi un poco ( giustamente ).

Ad esempio, potremmo avere la necessità di inserire nelle nostre pagine una mappa di google che, a
seconda dell’indirizzo passato (e quindi dinamicamente), visualizzi la posizione desiderata con un “marker” e le informazioni relative.
Lo script per implementare tale meccanismo è il seguente:

Il codice HTML delle ultime due righe crea due div: il primo serve per visualizzare un messaggio di
warining nel caso in cui l’indirizzo passato non sia stato trovato dal motore di ricerca, il secondo serve per la visualizzazione della mappa.

Lo script è composto da due funzioni: load() e showAddress(address). La funzione load viene richiamata al caricamento della pagina, ed è ovviamente il cuore di questo script: si occupa di settare tutti i paramentri necessari, tra cui il settaggio dell’id del div che conterrà la mappa (map).
Eseguite tutte le assegnazioni del caso, viene infine richiamata la seconda funzione importante,
showAddress(address).
Questa ha un parametro, address, che potremmo ad esempio generare e passare con computazioni proveniente da pagine php, che è proprio l’indirizzo che verrà visualizzato sulla mappa attraverso l’uso dei marker settati nella prima funzione.
L’indirizzo è un parametro, ed è quindi dinamico: ogni qualvolta la pagina verrà ricaricata, leggerà l’indirizzo attualmente impostato e lo passerà allo script, che si occuperà di visualizzarlo sulla mappa.

Vota Articolo:

Come effettuare il redirect di una pagina in Html, Javascritp, Php, Asp, Jsp, Coldfusion

marco — Mon, 14 Apr 2008 08:08:41 +0000

Il redirect permette di reindirizzare la pagine verso un’altra, senza interazione da parte dell’utente e inoltrando perciò le visite verso la nuova destinazione. Vi sono molti modi diversi di fare un redirect, noi vedremo i metodi per i principali linguaggi Web.

Metodo HTML

E’ sufficiente creare una pagina con il seguente codice:

Html Redirect…

Stiamo effettuando un redirect..

La riga più importante di questo codice è la seguente:

con la quale sostanzialmente indichiamo che la pagina è appunto un redirect, che il redirect verrà effettuando entro 4 secondi e che la destinazione del redirect è la pagina http://www.google.it . Ovviamente se vogliamo che il redirect sia immediato è sufficiente inserire il valore 0 al posto del 4 . Fate attenzione a questo punto: i valori dallo 0 all’1 sono considerati dalla maggior parte dei motori di ricerca come permanent redirect ( codice html 301 ), mentre i valori maggiori di 2 sono considerati temporary redirect.

Metodo Javascript

Creiamo una pagina .html nella quale inseriamo il seguente codice:

Redirect…

Redirect in corso…

In questo caso c’è poco da aggiungere: si crea un piccoloscript javascript nel quale appunto utilizziamo la direttiva location.replace per indicare la presenza di un redirect e dunque la nuova destinazione.

Metodo Php

Nella pagina php in cui vogliamo fare il redirect inseriamo il seguente codice:

header(“Location: http://www.google.it”);

/* se vogliamo usare il refresh… */

header(“Refresh: 0; URL=http://www.google.it”);
?>

Metodo Asp

In asp sostanzialmente il procedimento è molto simile al metodo php; ecco il codice da inserire nel nostro file asp su cui vogliamo effettuare il redirect:

<%@ Language=VBScript %>
<%
Response.Status=”301 Moved Permanently”
Response.AddHeader “Location”, “http://www.google.com”
%>

<%
Response.Buffer = true
%>

<%
Response.Redirect(“http://www.google.com”)
%>

Redirect…

Redirect in corso…

Metodo JSP

Per la Java Server Page, il codice da utilizzare è il seguente:

<%
String redirectURL = “http://www.google.it/”;
response.sendRedirect(redirectURL);
%>

Metodo Coldfusion

In Coldfusion è sufficiente utilizzare la seguente riga:

Anche se non è fondamentale, è comunque molto importante conoscere i principali codici di stato HTML : bisogna fare molta attenzione se non si vuole perdere traffico o posizioni sui motori di ricerca. Ecco i principali:

    300 Multiple Choices

      301 Moved Permanently

      302 Found

      303 See Other

      304 Not Modified

      305 Use Proxy

      306 (Unused)

      307 Temporary Redirect

Una spiegazione più approfondita su tali codici è possibile trovarla in questa pagina , ovvero nelle pagine del World Wide web Consortium.

Vota Articolo:

JAVASCRIPT – Cambiare una classe di stile CSS dinamicamente

marco — Wed, 20 Feb 2008 11:18:58 +0000

Assegnare una classe ad un elemento HTML è ovviamente una cosa molto semplice, ma spesse volte abbiamo bisogno di variare dinamicamente lo stile di un oggetto HTML, ad esempio a seguito di eventi come “onmouseover” o “onclick” .

Supponiamo ad esempio di voler gestire l’apparizione di due div, creando una sorta di menu. L’esempio che vogliamo realizzare è visibile qui.

Non soffermiamoci su come sono implementate le classi CSS: l’unica istruzione importante da tenere presente per le classi dei div che contenugono il testo è il valore di default display:none; , che appunto di default permette di nacondere il contenuto dei div in questione.

La tecnica per realizzare un menu di questo tipo è in realtà molto semplice: quando con il cursore ci troviamo sopra uno dei due link di menu ( “primo” o “secondo”, per interderci ), viene attivato l’evento javascript “onmouseover“, attraverso il quale richiamiamo la funzione “openDiv“.

Questa funzione non fa altro che settare alcune direttive in base al link menu in cui il cursore si trova: analizziamo il primo caso, il secondo è sostanzialmente uguale.

Nel primo caso, quando cioè il mouse si trova sul link menu “primo”, la funzione javascript “openDiv” setta i seguenti parametri:

document.getElementById(id).className = ‘submenu_sfondo_S’;
document.getElementById(‘submenu_01′).style.display = ‘inline’;
document.getElementById(‘secondo’).className = ‘submenu_S’;
document.getElementById(‘submenu_02′).style.display = ‘none’;

La prima riga è la più importante, perchè è quella che di occupa di cambiare il valore dell’attributo class del div di riferimento, ovvero di cambiare la classe di stile per l’elemento (id) passato come parametro. La successiva riga non fa altro che impostare l’attributo display sul valore ‘inline‘ , in modo da visualizzare il contenuto del div corrispondente al link menu passato come parametro. Le ultime due righe compiono sostanzialmente i passi complementari sull’altro div (si imposta la classe css senza lo sfondo e si nasconde il div), in modo da creare l’effetto di alternanza.

Per chi avesse ancora dubbi, può rivedere il codice dell’esempio seguendo questo link.

Vota Articolo:

Javascript – Controllare e validare una mail con le espressioni regolari

marco — Tue, 05 Feb 2008 08:58:44 +0000

Vi sono vari modi per controllare i dati che riceviamo da un form html: se stiamo utilizzando PHP possiamo servirci di alcune funzioni messe a disposizione dal motore PHP ( come ad esempio empty() ), ma possiamo anche sceglire un’altra strada, Javascript.

Il controllo di campi numeri e testuali è abbastanza banale, e in rete di trovano migliaia di esempi: ciò che non si trova molto spesso è il controllo delle mail, e soprattutto il controllo da effettuare per verificare la validità di una mail.

Supponiamo di avere un form fatto in questo modo:

Questo form ha diversi campi, a noi interessa il campo email e il campo Submit : quest’ultimo, una volta cliccato, chiama una funzione Javascript, validateForm(); che si occupa appunto di validare il form. Come abbiamo detto precedentemente, concentriamoci sul controllo e sulla validazione della mail. Le righe di codice da inserire nella funzione di cui sopra per raggiungere il notro obiettivo sono:

/*
Se il valore del campo email del form emailForm è vuoto, salviamo nella variabile errmsg, oltre a possibili errori per controlli precedenti, un messaggio che specifichi la mancanza della mail
*/
if ( !document.emailForm.email.value ) {
errmsg += ‘\nDovete immettere la MAIL’;

} else {

/*
Se il campo mail è stato effettivamente completato, controlliamo però la validità di tale campo: per fare questo utilizziamo le espressioni regolari e alcune funzioni native di Javascript. Quindi creiamo un oggetto “espressione regolare” che salviamo nella varibile “espressione“, recuperiamo il valore della mail inviato tramite il form e lo salviamo nella variabile stringa ; infine facciamo il confronto tra questi due valori.
Se stringa contiente un valore che non rispetta le regole imposte dall’espressione regolare, allora inseriamo un messaggio appropriato, altrimenti non si verificaheranno problemi e la computazione potra proseguire tranquillamente.
*/
var espressione = new RegExp(“^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})$”);
var stringa = document.emailForm.email.value;
if ( !espressione.test(stringa) )
errmsg += ‘\nDovete immettere una MAIL VALIDA’;
}

Le espressioni regolari vengono usate particolarmente per manipolare stringhe, e quindi in linguaggi come Perl, che bene si adattano alla gestione e configurazioni di alcune caratteristiche particolari dei server.
L’argomento delle espressioni regolari è molto vasto, e lo rimandiamo ad ulteriori chiarimenti futuri: per chi volesse iniziare ad approfondire questo affascinante studio può dare un’occhiata a questo indirizzo qui.

Vota Articolo:

JAVASCRIPT – Contatore di caratteri per textarea

marco — Sat, 26 Jan 2008 21:18:12 +0000

Nell’utilizzare sistemi di commenti o post, a volte diventa necessario mettere un limite al numero di caratteri che è possibile inserire nella textarea dedicata, per evitare la copiatura di articoli o l’inserimento di commenti che diventano più lunghi dell’articolo stesso.

Questo esempio è utilie a tale scopo: in pochi passi si configura un contatore javascript che blocca l’inserimento dei caratteri all’interno della textarea controllata una volta che viene superato il limite imposto. L’esempio è scaricabile qui.

In un file javascript .js salviamo il seguente codice:

function getObject(obj) {
  var theObj;
  if(document.all) {
    if(typeof obj=="string") {
      return document.all(obj);
    } else {
      return obj.style;
    }
  }
  if(document.getElementById) {
    if(typeof obj=="string") {
      return document.getElementById(obj);
    } else {
      return obj.style;
    }
  }
  return null;
}

function Count(entrada,salida,texto,caracteres) {
  var entradaObj=getObject(entrada);
  var salidaObj=getObject(salida);
  var longitud=caracteres - entradaObj.value.length;
  if(longitud <= 0) {
    longitud=0;
    texto=' '+texto+' ';
    entradaObj.value=entradaObj.value.substr(0,caracteres);
  }
  salidaObj.innerHTML = texto.replace("{CHAR}",longitud);
}

A questo punto non ci resta che richiamare con il solito tag ‘

JQUERY – Grafica Stupenda ed Effetti Accattivanti per Gallery 3D di immagini

marco — Fri, 25 Jan 2008 08:14:57 +0000

Nel post di qualche giorno fa abbiamo introdotto JQuery con un esempio pratico, implementando un div a comparsa con un effetto davvero elegante e graficamente accattivante.

L’esempio che vedremo in questo articolo è quello di una gallery di immagini da aggiungere sul vostro sito, una gallery però veramente accattivamente, con un incredibile effetto 3D per “sfogliare” le foto e l’effetto lightbox per l’ingrandimento dell’immagine. Una demo dell’esempio che andremo a completare è disponibile qui.

L’esempio si basa sull’utilizzo del framework JQuery in collaborazione con un plugin per JQuery , il plugin Interface. Per lavorare,dunque, dobbiamo scaricare il framework e il plugin che potete trovare rispettivamente qui e qui.

Una volta inclusi i file .js scaricati, è sufficiente sostituire nel div ‘

’ le immagini che intendete includere nella vostra gallery. Nel caso in cui fossero molte, potreste pensare di fare un ciclio o un array, che sicuramente semplificato di parecchio la vita.

Potete scegliere se le immagini devono aprire un lik o l’ingradimento della stessa con un effetto davvero molto accattivante: nell’esempio, l’immagine di Alonso, quella che una volta caricata la pagina si trova nel centro, si apre con l’effetto lightbox, mentre le altre puntano a pagine dedicate ad alcune squadre di calcio del nostro quotidiano sportivo preferito, Realsports.it .La differenza sta nel come impostiamo il link, vediamo un esempio:

Il link al punto 1. è quello che utilizza l’effetto lightbox per aprire ed ingrandire l’mmagine, mentre nel punto 2. viene utilizzato il link ad una pagina, nel nostro esempio link2.php .

L’ultimo passo che ci rimane da fare è inserire lo script che richiama le funzioni di gestione della gallery. Analizziamo lo script:

A questo punto dovrebbe essere chiaro il funzionamento di questa gallery: aggiungiamo solo una precisazione. Per chi intesse personalizzare lo stile, può tranquillamente modificare a piacimento gli stili presenti nella pagine di esempio, l’importante è ovviamente non modificare gli identificati di classe (es. #ImageBoxCaption) .

Vota Articolo:

Ajax – le basi di questa meravigliosa tecnica

marco — Mon, 21 Jan 2008 09:45:14 +0000

Ajax ( Asynchronous JavaScript and XML ) è una tecnica di sviluppo web che ha lo scopo di proporre interattivà senza tuttavia dover ricaricare la pagina ad ogni interazione con l’utente. In sostanza, Ajax permette attività in backgroud rispetto ad eventi principali: un esempio tipico di utilizzo di questa tecnica è l’aggiornamento dinamico di elenchi, per esempio utilizzato ultimamente nei social networks. Mentre l’utente può scorrere le notizie e qundi interagire con la pagina, l’elenco delle news inserite si autoaggiorna senza tuttavia dover attedere che sia l’utente stesso ad effettuare l’aggiornamento della pagina.

Questa tecnica ha ormai aperto le porte a nuove tipologie di applicazioni, sempre più interattive e sempre più accattivanti. Ma come funziona Ajax? Ecco un esempio passo-passo di utilizzo di queste tecnologie: i commenti si possono leggere direttamente sul codice, in modo da facilitare la comprensione e velocizzare l’apprendimento. Supponiamo che questo codice sia contenuto in un file
“ajax1.js” :

/*
Questa è la funzione principale di creazione: si crea la variabile obj che conterrà il riferimento all’oggetto XMLHttpRequest l’oggetto principale su cui si agisce. Per garantire la compatibilità viene eseguito un controllo sul tipo di browser, visto che a seconda della tipologia l’oggetto obj viene creato in modi diversi. Se il browser è “non – Internet Explorer”, allora si utilizza la funzione XMLHttpRequest altrimenti se il browser è Internet Explorer si utilizza ActiveXObject(“Microsoft.XMLHTTP”). Questa differenza ha una base teorica, che non trattiamo in questa sede, occupandoci qui di “pura pratica”. Se volete approfondimenti scriveteci, e provvederemo ad esaudire le vostre richieste!

*/
function createXHR() {
var obj;
if (window.XMLHttpRequest) { // Non Internet Explorer
obj = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Internet Explorer
obj = new ActiveXObject(“Microsoft.XMLHTTP”);
}
return obj;
}

obj=createXHR();

/*Questa è la funzione che gestisce e analizza lo stato dell’applicazione: si procede innanzittutto con dei controlli, che possiamo fare analizzando lo stato dell’oggetto obj precedentemente istanziato. Se durante il cambiamento si stato dell’oggetto obj non si sono verificati errori, allora le funzioni readyState e status ritorneranno rispettivamente i valori 4 e 200, valori che indicano appunto l’avvenuto caricamento con successo. A questo punto possiamo scrivere il codice che deve eseguire l’appilcazione per raggiungere il suo obiettivo. Nel nostro caso, una volta ricevuta la richiesta, la nostra piccola applicazione Ajax provvedrà a creare una select caricando il contenuto dinamicamente, cioè una select che cambia le opzioni in base ad una scelta fatta dall’utente ma senza il bisogno di ricaricare l’intera pagina.
*/
function onStateChange() { // Cambiamento Stato
if (obj.readyState == 4) { // Caricamento Avvenuto
if (obj.status == 200) { // con successo

var div = document.getElementById(‘risultato’);
if ( document.uniqueID ) {
var select = document.createElement(“”);
} else {
var select = document.createElement(“select”);
}
select.setAttribute(“name”,”district”);
select.setAttribute(“id”,”district”);
select.setAttribute(“onchange”,”invia2();”);

list = new Array();
list1 = new Array();
list2 = new Array();

/*IMPORTANTE: tramite la proprietà responseText dell’oggetto obj è possibile recuperare valori prodotti dal file che si occupa di gestire la richiesta al server, per esempio il file che effettua una query e che nel nostro caso è xmlHttpRequest.php*/
string = obj.responseText;

list = string.split(“;”);
list1 = list[0].split(“\n”);
list2 = list[1].split(“\n”);

for ( i=0; i < list1.length; i++ ) {
op = new Option(list2[i], list1[i]);
select.options[i] = op;
}
document.getElementById(“risultato”).innerHTML=”";
div.appendChild(select);

} else {
document.getElementById(“risultato”).innerHTML=”?”;
alert(“Errore: “+obj.statusText);
}
}

}

/*La funzione invia() è quella da cui inizia l’attività: infatti questa funzione non fa altro che inviare alla funzione inviaXHR() il riferimento all’oggetto obj e il link del file di gestione
*/
function invia() {

inviaXHR(obj,”http://link_pagina/xmlHttpRequest.php”);
}

/*Questo è il cuore dell’applicazione: attraverso una richiesta POST, inviamo con la funzione send() i dati al file xmlHttpRequest.php, che potrà svolgere il suo compito indipendentemente dalle altre interazioni che l’utente potrà avere con la pagina. Nel nostro caso, supponiamo che in questo file ci sia il codice per effettuare una query al database, e che con i risultati ottenuti si crei l’insieme delle opzioni che andranno a “riempire” la select di cui sopra. Supponiamo di aver creato una stringa in cui ogni attributo value dell’opzione è separato dal valore visibile dal carattere “|”, cioè:

value|Valore visibile ->>>

*/
function inviaXHR(obj,url) {
try {
// Preparazione comunicazione
obj.open(“POST”, url, true);

// caricamento in corso…fornisce il feedback all’utente
document.getElementById(“risultato”).innerHTML=”caricamento in corso…”;
obj.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

//richiamiamo la funzione onStateChange analizzata precedentemente
obj.onreadystatechange = onStateChange;

/*IMPORTANTE: a seconda del valore country possiamo gestire la select
che vogliamo creare, e quindi possiamo aggiornarla in base a determinati valori che vengono assegnati a country
*/
country=escape(document.myform.country.value);

//Inviamo al file di gestione .php alcuni parametri, attraverso il metodo POST
obj.send(“country=”+country); // Trasferimento

} catch (e) {

/*
Se si verificano problemi, l’elemento HTML che doveva diventare una select verrà sostituiro con un ?, che indica appunto il verificarsi di errori o problemi
*/
document.getElementById(“risultato”).innerHTML=”?”;
alert(“Errore: “+e);
}

}

Per chi avesse le idee ancora confuse, riassumiamo brevemente ciò che succede.

Creaimo l’oggetto obj.
Supponiamo di cliccare su un pulsante che richiama la funzione javascript “invia()”; attiviamo così una richiesta al server.
Tramite la funzione inviaXHR gestiamo effettivamente la richiesta: il metodo utiliaazto è il POST (con cui possiamo inviare dati al file di gestione) e il file di gestione è xmlHttpRequest.php, che nel nostro caso è scritto in PHP ma che potrebbe essere scritto in un qualsiasi linguaggio di programmazione. La funzione send() ci permette di inviare parametri al file di gestione, parametri che vengono inviati attraverso il metodo POST, appunto.
Il file di gestione può fare qualsiasi cosa per svolgere il suo compito: supponiamo nel nostro caso che il file effettui una query al database e restituisca una stringa.
Viene richiamata la gestione di stato dell’oggetto, onStateChange, che analizza l’andamento della richiesta che abbiamo effettuato. Se tutto è andato bene, recuperiamo attraverso la proprietà responseText dell’oggetto obj la stringa prodotta dal file di gestione. Possiamo lavorare sulla stringa restituita, creando ad esempio una select con delle option che dipendono dal valore di un parametro scelto dall’utente, nel nostro caso country.

Tutto questo lavoro viene svolto in background, senza che l’utente di accorga di nulla, ma soprattutto permettendo all’utente di continuare ad interagire con la pagina liberamente e come se nulla stia accadendo.

Vota Articolo:

JQuery – Effetti grafici spettacolari per i vostri siti web

marco — Fri, 04 Jan 2008 06:49:44 +0000

Questo articolo spiega come sia possibile utilizzare file javascript di grandi dimensioni senza tuttavia appesantire il caricamento del proprio sito web. Quando si lavora framework di ultima generazione, è assolutamente necessario adottare un sistema per accellerare il caricamento dei file .js .

Ma qui ci occupiano di tutt’altro: nonostante le innumerevoli risorse disponibili, non è facile trovare una guida che spieghi in modo chiaro e utile come in effetti sia possibile utilizzare uno tra i framework javascript più potenti in circolazione, JQuery.

Per questo motivo, andremo a scrivere il codice per creare qualche simpatico effetto: imparerete così le basi dell’utilizzo del framework, e non vi rimarrà che studiare in dettaglio la documentazione per approfondire le vostre conoscenze.

Eseguiti i passi come indicato nell’articolo a questo indirizzo qui, abbiamo a disposizione il framework per iniziare il nostro lavoro…vediamo qualche esempio!

Esempio 1

Visto che qualsiasi cosa noi facciamo con JQuery manipola o “legge” il DOM (Document Object Model), dobbiamo assicurarci che tutto ciò che intendiamo svolgere (comandare eventi con il click del mouse, ad esempio) sia “letto” non appena è letto il DOM. Per questo motivo, la prima funzione che vedremo sarà:

$(document).ready(function() {
// azioni da svolgere quando il DOM è pronto
});

Questa è la funzione principale per JQuery, quella che solitamente non mancherà mai nei vostri script. Ma vediamo il nostro primo effetto, un div che compare e scompare cliccando su un link:

$(document).ready(function() {
$(‘a#link-toggle’).click(function(){$(‘#div-box’).toggle(400);
return false;});
});

Potremmo spiegare questa funzione a parole in questo modo:

- Quando si clicca [ click(function(){... ] sul link identificato dall’id “link-toggle” [ $('a#link-toggle') ] si richiama la funzione “toggle(400);” sul div identificato dall’id “div-box” [ $('#div-box') ]. Fatto questo ritorna”false”;

A questo punto, possiamo creare la nostra pagina html, in cui richiamiamo lo script e inseriamo gli elementi che ci servono, ovvero il link e il div:

Clicca qui

Qui ci vuole un testo abbastanza lungo

A questo punto, se tutto è stato fatto correttamente, sarà possibile cliccare sul link che abbiamo creato e…..avete visto che effetto?? E abbiamo scritto solo 3-4 righe di codice!! Provate ora ad immaginare cosa è possibile fare con JQuery…

Per chi avesse dubbi, segue il codice della pagina come dovrebbe risultare a conclusione lavori:

JQuery – Div scorrevole

Clicca qui

Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo

Esempio funzionante disponibile al seguente indirizzo
Esempio scaricabile al seguente indirizzo

Non vi resta che salvare questo codice in un file html, scaricare JQuery a questo indirizzo e sistemare il file nella stessa cartella della pagina html…ed ecco a voi un div a comparsa con un gran effetto grafico!!

Vota Articolo: