Incontri tecnologici: javascript

Visualizzazione post con etichetta javascript. Mostra tutti i post

mercoledì 28 settembre 2011

jQuery-AJAX con $.get() e $.post()

Pagina in aggiornamento

$.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

url: stringa contenente l'url verso il quele è inviata la richiesta.
data: stringa o array chiave:valore contenente i dati da inviare al server insieme alla richiesta.
success(data, textStatus, jqXHR): callback function che viene eseguita se la richiesta ha avuto successo.
dataType: Tipo di dato in risposta alla richiesta. Default: Intelligent Guess (xml, json, script, text, html).

martedì 27 settembre 2011

jQuery-AJAX con $.load()

La chiamata AJAX con il metodo $.load() carica codice HTML contenuto o generato da un file remoto in un elemento (solitamente un "div") della pagina HTML.
La richiesta è di default di tipo GET ma è possibile utilizzare il POST impostando i dati della chiamata con il formato coppia chiave/valore.

La sintassi è la seguente:

$(document).ready(function(){  
  $("a#link_che_attiva_la_chiamata_ajax").click(function(){   
    $("div#dove_inserisco_il_codice_ricevuto").load(
      url,    
      {data},    
      function(){     
        // funzione callback da eseguire alla fine    
      });    
    });   
});

I parametri che possono essere gestiti sono:

Nome Opzione	Tipo	Default	Descrizione
url	String		L'URL della pagina contenente l'HTML da caricare.
data (opzionale)	Map, String		Coppia di dati in formato chiave/valore. Sono i dati da inviare al server. Può essere anche passata una stringa come dato. Quando è utilizzata una stringa i dati sono passati tramite il metodo GET, se invece si usa il formato chiave/valore allora il metodo utilizzato è il POST.
callback (opzionale)	Callback		Funzione richiamata quando la chiamata AJAX è completata, anche se non ha successo. Ha tre parametri: la risposta, lo stato e l'oggetto XMLHttpRequest. La callback può anche essere utilizzata senza paramentri se questi non servono. Es: function (responseText, textStatus, XMLHttpRequest).

Vediamo un esempio costituito dal file HTML contenente la chiamata "chiamante.html" e il file chiamato "remoto.php".

File "chiamante.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>jQuery - Test funzione load()</title>
 <script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  $("a#ancoraAjax").click(function(){
   $("div#contenutoAjax").load(
    "remoto.php",
    {numero: 10, stringa: 'pippo'},
    function(){
     alert('dati caricati');
    });
    });
   });
 </script>
</head>

<body>
 <a id="ancoraAjax" href="#">mostra</a>
 <div id="contenutoAjax"></div>
</body>
</html>

Il file "chiamante.html", attraverso la funzione $(...).load(...) effettua una chiamata ajax al file "remoto.php" passandogli due valori (in formato chiave/valore), inserisce nel div "contenutoAjax" il contenuto html che riceve in risposta e alla fine esegue la funzione "alert" che avverte che i dati sono stati inseriti.
File remoto.php:

<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];

echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>

Il file "remoto.php", una volta chiamato legge i parametri passati in modalità post (in quanto passati in formato chiave/valore) e crea il codice html da restituire alla chiamata.

La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax

lunedì 26 settembre 2011

jQuery-AJAX con $.ajax()

Il framework jQuery mette a disposizione diversi metodi per implementare AJAX.

Incominciamo dal metodo più articolato $.ajax(options) che restituisce XMLHttpRequest e presenta la seguente implementazione:

$.ajax({
  nome_opzione1: valore_opzione1, 
  nome_opzione2: valore_opzione1, 
  ... 
  nome_opzioneN: valore_opzioneN
  })

Ecco di seguito una tabella delle principali options che possono essere utilizzate:

Nome Opzione	Tipo	Default	Descrizione
async	Boolean	true	Imposta se la chiamata deve essere asincrona (default) o sincrona.
beforSend	Function		Modificare XMLHttpRequest, passato come argomento, prima che sia inviato. Es: function (XMLHttpRequest){....}
cache	Boolean	true (false per dataType "script" e "jsonp")	Se settato su false forza la pagina a non utilizzare la cache del browser
complete	Function		Funzione da eseguire dopo che la richiesta è finita. Tale funzione è eseguita dopo che le funzioni di successo e errore sono eseguite. Es: function (XMLHttpRequest, textStatus){.....}
contentType	String	"application/x-www-form-urlencoded"	Imposta il conten-type dei dati inviati al server. Il valore di default va bene quasi in ogni caso.
data	Object, String		Dati inviati al server. L'oggetto deve essere una coppia chiave/valore. Essi sono convertiti in stringhe se non lo sono già. I dati sono inseriti nell'URL e possono essere prelevati tramite il metodo GET. Si possono passare anche array.
dataType	String	xml o html	Tipo di dato che ci si aspetti ritorni il server. Se non è specificato si basa sul MIME type della risposta. Tipi ammessi: "xml", "html", "script", "json", "jsonp" e "text".
error	Function		La funzione da eseguire nel caso la richiesta fallisse. La funzione ha 3 argomenti: l'oggetto XMLHttpRequest, una stringa che descrive l'errore e un'exception object. Es: function (XMLHttpRequest, textStatus, errorThrown){.....}
ifModified	Boolean	false	La richiesta ha successo solo se la risposta è cambiata dall'ultima richiesta, controllando tale informazione nell'header. Normalmente questo non è così, perciò di default il valore è false e si ignora l'header.
password	String		Password da usare in risposta ad una richiesta di autenticazione HTTP.
success	Function		La funzione da eseguire quando la chiamata ha successo. La funzione ha due argomenti: i dati ritornati dal server formattati in accordo con il dataType; e una stringa che descrive lo stato. Es: function (data, textStatus) {....}
timeout	Number		Timeout locale in millisecondi per la richiesta. Questo sovrascrive il valore globale settato tramite $.ajaxSetup(). Questa funzione è molto utile per differenziare i timeout delle varie richieste
type	String	"GET"	Il tipo di richiesta ("POST" o "GET"). Anche altri metodi HTTP sono utilizzabili (PUT, DELETE, ...) ma non tutti i browser li supportano.
url	String	pagina corrente	L'URL da chiedere. Esso deve essere una stringa e NON un Location Objec. SI: document.location.href NO: document.location
username	String		Username da usere in risposta ad una richiesta di autenticazione HTTP.

Vediamo un esempio in cui il file "chiamante.html" effettua una chiamata ajax al file "remoto.php" passandogli due parametri; il file "remoto.php" crea il codice html con i parametri passati e lo restituisce al file "chiamante.html"; al ricevimento del codice il file chiamante lo inserisce nel div "contenutoAjax" e avverte che il compito è stato fatto.

File chiamante.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>jQuery - Test funzione ajax()</title>
 <script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
   $("a#ancoraAjax").click(function(){
    $.ajax({
     type: "POST", 
     url: "remoto.php",
     data: "numero=10&stringa=Boston",
     success: function(html){    
      $("#contenutoAjax").append(html);
      alert('fatto');  
      }
     });    
    });
    });
 </script>
</head>

<body>
 <a id="ancoraAjax" href="#">mostra</a>
 <div id="contenutoAjax"></div>
</body>
</html>

File remoto.php

<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];

echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>

La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax

venerdì 23 settembre 2011

jQuery - Effetti fading

Con effetto fading si intende quella trasformazione di un elemento della pagina HTML che, lavorando sull'opacità (che varia da 0 a 1), prococa la sua scomparsa o apparizione senza modificarne posizione e dimensione.

I metodi che jQuery mette a disposizione per effettuare il fading di un oggetto sono fadeIn(), fadeOut() e fadeTo().

Anche in questo caso come per i metodi relativi agli effetti grafici è possibile definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal" e "fast" o impostando direttamente il tempo in millisecondi.
$("#div_fade").fadeIn(); // aumento dell'opacità dell'elemento con id "div_fade" fino alla sua visibilità totale

$("#div_fade").fadeOut("fast"); // diminuzione dell'opacità dell'elemento con id "div_fade" fino alla sua scomparsa totale con durata "fast" dell'effetto

$("#div_fade").fadeTo(1000, 0.50); // modifica dell'opacità dell'elemento con id "div_fade" fino al 50% in un tempo di 1 secondo

giovedì 22 settembre 2011

jQuery - Effetti di sliding

Gli effetti di sliding offrono la possibilità di muovere un elemento della pagina HTML a cascata verso l'alto, verso il basso o in modo "toogle".
I metodi che il framework mette a disposizione sono slideDown(), slideUp() e slideToogle().

Anche in questo caso come per i metodi show(). hide() e toogle() è possibile definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal" e "fast" o impostando direttamente il tempo in millisecondi.

$("#div_mobile").slideDown(); // slide verso il basso dell'elemento con id "div_mobile"
$("#div_mobile").slideUp("fast"); // slide verso l'alto dell'elemento con id "div_mobile" con durata "fast"
$("#div_mobile").slideToogle(2000); // slide in modo alternato verso l'alto e verso il basso dell'elemento con id "div_mobile" con durata 2 secondi

mercoledì 21 settembre 2011

jQuery - Mostra e nascondi

Tra gli effetti grafici che il framework jQuery mette a disposizione dello sviluppatore i primi che troviamo danno la possibilità di mostrare, nascondere o l'alternare dei due effetti di un elemento strutturale della pagina.

Per mostrare un elemento viene utilizzato il metodo show().

$("p").show(); // mostra gli elementi "p" nascosti delle pagina

Per nascondere un elemento viene utilizzato l metodo hide().

$("p").hide(); // nasconde gli elementi "p" della pagina

Per alternare mostra e nascondi vine eutilizzato il metodo toggle().

$("p").toggle(); // mostra e nasconde in successione gli elementi "p" della pagina.

E possibile manipolare la durata temporale dell'effetto mostra o nascondi fornendo all'effetto i valori predefiniti "slow", "normal" e "fast" o il valore di durata in millisecondi.

$("p").show("slow"); // mostra gli elementi "p" nascosti delle pagina con durata slow
$("p").toggle(1000); // mostra o nasconde gli elementi "p" nascosti delle pagina con durata 1 secondo

Altri esempi

I esempio: cliccando sull'elemento con id "pulsante" modifica la visibilità dell'elemento "mostranascondi" con una durata dell'effetto di 2 secondi.
$("#pulsante").click(function () {
$("#mostranascondi").toggle(2000); //2 secondi
});

venerdì 16 settembre 2011

jQuery - I filtri

Oltre ai selettori già visti jQuery mette a disposizione altri strumenti per migliorare e semplificare le operazione di ricerca degli elementi su cui operare; questi elementi sono detti filtri e possiamo in base all'oggetto del filtraggio:

Filtri tramite parole chiave e contenuti
Le parole chiave che possiamo utilizzare sono:

odd o even per selezionare gli elementi pari o dispari
first o last per lesezionare il primo o l'ultimo elemento
lt(n), gt(n) o eq(n) se si volgiono selezionare tutti gli elementi rispettivamente presecenti successivi o uguali all'ennesimo (n) elemento.
first-child o last-child seleziona il primo o l'ultimo figlio di un elemento
only-child seleziona gli elementi singoli
nth-child seleziona elementi figli in base al contenuto tra parentesi
not() seleziona elementi in base all'assenza di contenuti
has(), contain(), hidden seleziona elementi in base a contenuti o attributi

Ogni parola chiave deve essere preceduta dal tag di riferimento e dal carattere ":"

// Seleziono l'ultima riga della tabella
$("tr:last"); 

// seleziona i figli dispari degli elementi "li" 
// contenuti nell'elemento "ul" con id "navglob"
$("ul#navglob li:nth-child(odd)");

// seleziono tutti gli elementi "li" che contengono 
// un link all'interno del'elemento con id "elenco"
$("#elenco li:has(a)");

// selezioni tutti i div nascosti
$("div:hidden");

// seleziono tutti i div che non appartengono alla 
// classe "commento"
$("div:not(.commento)");

Filtri tramite attributi
La selezione degli elementi viene basata sul valore degli attributi:

// seleziono gli elementi "a" con title "icona"
$("a[title='icona']");

// seleziono gli elementi "a" con title che inizia 
// con "icona"
$("a[title^='icona']"); 

// seleziono gli elementi "a" con title che 
// finisce con "icona"
$("a[title$='icona']"); 

// seleziono i link che non aprono nuove finestre
$("a[target!='_self']"); 

// seleziono i link che hanno un attributo "target" 
// impostato
$("a[target]"); 

// seleziono i link con title "icona" e contemporaneamente 
// con target "_blank" (selettori concatenati)
$("a[title='icona'][target='_blank']");

Filtri per elementi form

// seleziono tutti gli elementi password del form
$("input[type='password']"); 

// seleziono tutti gli elementi password del form
$(":password")

venerdì 9 settembre 2011

jQuery - I selettori

Nel framework jQuery i selettori degli elementi del codice HTML possono per comodità essere suddivisi in due gruppi.
I selettori di base utlizzano il tag name, l'id o la classe per individuare gli elementi.
I selettori gerarchici utilizzano l'organizzazione gerrchica delle pagina per individuare gli elementi.

Esempio di selettore di base:
$("a"); // selezione tutti i tag "a" della pagina;
$("#id_elemento"); // seleziono l'elemento con id "id_elemento";
$(".classe_elemento"); // seleziono gli elementi con classe "classe_elemento";

Esempio di selettori gerarchici:
$("#header a"); // seleziono tutti i tag a interni al div con id "header";
$("ul#navglob > li"); // seleziono tutti gli elementi li direttamente discendenti dal tag ul con id "navglob";
$("h1 + h2"); // seleziono tutti i tag h2 preceduti da h1:
$("id_elemento ~ div") // seleziono tutti i div adiacenti all'elemento con id "id_elemento"

In considerazione del fatto che il selettore più interno viene attivato prima e quindi che la selezione avviene da destra verso sinistra (scartando dall'insieme trovato con il primo criterio gli elementi che non soddisfano il secondo criterio) è bene impostare i selettori più significativi all'interno o a destra in modo da velocizzare le operazioni di selezione.

$("p#header strong"); // NO - Seleziono prima tutti gli elementi "strong" della pagina e poi li scarto tutti ad eccezione di "p#header".
$("strong ", $("p#header")); // SI - Seleziono l'elemento "p#header" e scarto tutti gli elementi interni non racchiusi in tag "strong".
$("p#header").find("strong"); // SI -

lunedì 5 settembre 2011

Codice su blogger con SyntaxHighlighter

SyntaxHighlighter è un plugin in javascript che consente di evidenziare porzioni di codice inserite in un una documento HTML o in un post.

L'inserimento di SyntaxHighlighter in un documento HTML richiede le seguenti operazioni:

Scaricare i file dal sito http://alexgorbatchev.com/SyntaxHighlighter/ e caricarli sul web server.
Linkare al documento i file principali shCore.js e shCore.css
Linkare al documento i file relativi ai linguaggi utilizzati "brushes" (qui si trova la lista dei file-linguaggio disponibili)
Includere i fogli di stile shCore.css e shThemeDefault.css
Creare un tag con <pre> o <script> per ogni porzione di codice da evidenziare.
Richiamare il metodo SyntaxHighlighter.all()

Vediamo più nel dettagio l'inserimento di SyntaxHighlighter nei post di Blogger:

Accedere al pannello di gestione del blog, selezionare la voce "Modello" e quindi "Personalizza HTML"
Una volta avuto accesso al codice HTML del modello, appena prima del tag "</head>" inserire il seguente codice:

Salvare quindi il codice HTML del modello personalizzato
Inserire ora nel post la porzione di codice racchiusa dai tag <pre> e </pre> specificando il linguaggio usato nell'attributo di classe (in caso di codice html lo inseriremo tra i tag <pre class="brush:js"> e </pre> ).

Il sito di riferimento è http://alexgorbatchev.com/SyntaxHighlighter/ dove è possibile trovare anche le istruzioni di installazione in altre applicazioni.

sabato 13 novembre 2010

Inserire testo e codice javascript nel blog

Per inserire testo con copia ed incolla in questo blog occorrere essere in modalità "Modifica Html".

Per inserire codice javascript e in certi casi anche HTML occorre fare ricodificare tutti i caratteri speciali con le relative entità HTML.
A tal fine è posibile utilizzare HTML encoder online come questo.

Aggiungere Google Maps ad una pagina web

Come incorporare in una pagina web? Ecco il codice allineato alla seconda versione delle API di GoogleMaps.

PRIMO STEP
Il servizio è disponibile gratuitamente ma occorre avere una API Key, ovvero un codice alfanumerico che identifica univocamente l'URL (o una sottopagina di questo URL) che andrà ad utilizzare le mappe.

È possibile richiedere una API Key tramite la pagina Sign up for the Google Maps API (http://maps.google.com/apis/maps/signup.html), indicando l'indirizzo per il quale si ha intenzione utilizzare il servizio (per es. danilofolli.it/) e cliccare Generate API Key. Verrà generata una stringa di lettere e numeri piuttosto lunga, è consigliabile tenerla a portata di mouse, ci servirà a breve.

SECONDO STEP
Apriamo la nostra pagina web, e nel tag HEAD inseriamo il seguente codice:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=xxxxx"></script>

Dove "xxxxx" sarà la chiave che ci ha appena dato Google.
Subito sotto inseriamo il codice:

<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>

Dove i "numeri" all'interno delle parentesi saranno le coordinate del nostro indirizzo, che abbiamo calcolato grazie a http://www.addressfix.com/ e 13 sarà il livello di zoom (0 è il minimo e 17 è il massimo).

TERZO STEP
A questo punto potremmo forse voler inserire un "segnalino" che indichi esattamente il nostro indirizzo sulla mappa.
Per fare ciò, aggiungiamo queste righe subito sotto a

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
prima della chiusura delle parentesi grafe.
Ecco il codice:

// Crea un nuovo marker nel punto specificato con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}
// Aggiungi il marker alla mappa
map.addOverlay(createMarker(new GLatLng(37.4419, -122.1419), "La mia casa<br />Via Nazionale, 1<br />00000 Roma"));

Con la prima funzione abbiamo creato la variabile marker, che è una nuova istanza dell'oggetto GMarker. Inoltre le abbiamo associato un evento: al passaggio del mouse si apre una "nuvoletta" con una breve descrizione, che può contenere anche tag HTML.
Con la seconda funzione aggiungiamo il marker creato alla mappa, passandogli anche stavolta le coordinate corrette, e di seguito il messaggio HTML che vogliamo visualizzare nella nuvoletta.

QUARTO STEP
Inserire nella vostra pagina un div con id "map", nel quale verrà visualizzata la mappa di Google:

<div id="map" onload="load()" onunload="GUnload()"> </div>

LINK IMPORTANTI
- esempi ufficiali
- demo ufficiali
- documentazione ufficiale
- guida ufficiale per gli sviluppatori
- guida completa

mercoledì 21 aprile 2010

Shadowbox una web-based media viewer application molto versatile

Shadowbox è una web-based media viewer application che supporta tutti i più diffusi media publishing formats.
Shadowbox è scritto interamente in JavaScript e CSS ed è altamente personalizabile.
Usando Shadowbox è possibile includere nel sito un ampio range si contenuti media in modo compatibile a tutti i più comuni browser senza richiedere l'utilizzo di altri programmi o dover linkare altri indirizzi.

Esempi e downloads:
http://www.shadowbox-js.com/

martedì 16 marzo 2010

Overlay images on the current page con lightbox2

Uno script semplice per "zoomare" le immagini della pagina in modo sovrapposto alla pagina corrente che lavora bene con i moderni browser.

Esempi e downloads: http://www.lokeshdhakar.com/projects/lightbox2/

giovedì 4 febbraio 2010

Slideshow con icone orizzontali o verticali

Una semplice ma efficace galleria di immagini con icone scorrevoli in orizzontale la troviamo sul dito dhtmlgoodies.com con la sua omologa verticale
Senza utilizzare nessun "corposo" framework javascript di appoggio possiamo ottenere una pagina leggera e funzionale.

DOWNLOADS
http://www.dhtmlgoodies.com/index.html?whichScript=image_slideshow

mercoledì 3 febbraio 2010

Fotogallery con effetto slide senza usare flash

Grazie a jquery e a jCarousel Lite è possibile realizzare una fotogallery con effetto slide senza usare flash.
Ecco una pagina di esempio.

Downloads
jCarousel Lite: http://www.gmarwaha.com/jquery/jcarousellite/#download

Slideshow con jquery e cycle plugin

jquery associato al suo plugin cycle consente di realizzare slideshow con "effetti speciali" con poche righe di codice.
Ecco dove trovare una pagina di esempi.

Downloads
jquery: http://docs.jquery.com/Downloading_jQuery
cycle plugin: http://malsup.com/jquery/cycle/download.html