Archivio della Categoria 'Javascript'

Strumenti avanzati per il debugging di Javascript

Venerdì 23 Maggio 2008

Questo breve post è un elenco di risorse utili ad uso personale per rendere più semplice la vita a chi si trova a dover scrivere codice non banale in javascript.

Lo strumento più utile è sicuramente Firebug (http://www.getfirebug.com/), di cui consigliamo di leggere la documentazione sia della Command Line API che della Console API (Firebug’s docs)

Altri strumenti utili sono i seguenti:

(more…)


Aumenta la diffusione di questo articolo

Google lancia l’enciclopedia del web aperto

Lunedì 19 Maggio 2008

Così Google ha definito il suo ultimo servizio Google Doctype.

In particolare, con questo termine si riferisce agli standard aperti (open standards): HTML, Javascript, CSS e altri su cu il web si basa.

Il principio di base è che ci sono milioni di utenti che possono accedere al web con browsers sia open source che proprietari, spesso scarsamente compatibili tra loro.

Google ha basato il suo business su questo e vuole fornire il suo contributo perché altri sviluppatori possano costruire nuovi contenuti.

In particolare Google raccoglie delle mappe di compatibilità aggiornate dei vari browsers e anche vari suggerimenti riguardanti la sicurezza o l'uso di javascript per effettuare operazioni più o meno semplici. I browser supportati sono i principali: Internet Explorer (IE 6, IE 7, IE 8), Firefox (FF 2, FF 3), Safari.

Inoltre, in alcune sezioni, come ad esempio quella riguardante i CSS, ci sono i link alle pagine corrispondenti del w3c, Mozilla developer center, MSDN, blooberry.com, sitepoint.

L'indirizzo a cui si trova quest'enciclopedia rientra sotto Google Code ed è: 

http://code.google.com/p/doctype/

 

 


Aumenta la diffusione di questo articolo

Upload multiplo di files e immagini.

Domenica 24 Febbraio 2008

Come promesso ieri, pubblico un altro esempio di utilizzo di Flash per effettuare l'upload multiplo di files e immagini, che sostituisce il post pubblicato precedentemente su questo blog.

Seguendo il collegamento seguente si può scaricare un esempio funzionante. 

(more…)


Aumenta la diffusione di questo articolo

Rilasciata la YUI 2.5 - File Uploader - Layout Manager e Javascript Profiler grafico

Sabato 23 Febbraio 2008

E' stata rilasciata la versione 2.5 della libreria Yahoo User Interface. Tutti i dettagli sono forniti sul post ufficiale del Blog di Yahoo.

Riassumiamo i dettagli essenziali:

  • Il nuovo Layout Manager permette di creare interfacce utente multi-pane collassabili e ridimensionabili;
  • Il controllo Flash File Uploader, utilizzato anche da Flickr, permette di fare l'upload multiplo di Files e immagini, fornendo anche le progress bar. Nota: nel post seguente a questo pubblicherò i codici sorgenti di un esempio funzionante.
  • Il profiler javascript ora ha un front-end grafico per rendere le informazioni più facilmente comprensibili
  • La YUI Data Table è stata migliorata ed è più veloce e ha nuove funzionalità quali: scrolling orizzontale e scrolling verticale, una classe pager, colonne drag and drop, ed un accesso API per aggiungere ed eliminare colonne.
  • L'image cropper permette di prendere parte di un'immagine da croppare lato server.
  • Il Cookie controller fornisce un wrapper  per fare tutte le operazioni necessarie con i cookie.
  • Il controllo Slider ha aggiornato il supporto per gestire range multipli.
  • Alcuni componenti sono usciti dallo stato beta, tra cui il colorpicker, il validatore Json, L'imageloader.


Aumenta la diffusione di questo articolo

Nuove versioni di jQuery e jQuery UI

Domenica 10 Febbraio 2008

In settimana sono state pubblicate varie nuove versioni del pacchetto jQuery.

E' stato pubblicato l'aggiornamento alla versione 1.2.3 di jQuery, che consiste da un lato in correzione di bachi della versione 1.2.2 e dall'altro è stato reso compatibile con Adobe AIR.

Questa versione sarà inclusa in Drupal 6 ed è la base su cui verrà costruito jQuery 1.5. 

lo javascript è disponibile all'url: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.3.js 

Sono state pubblicate le versioni alfa di jQuery UI 1.5 e jQuery Enchant 1.0.

In queste versioni ci sono stati un aggiornamento delle versioni di API ed una standardizzazioni. jQuery UI, come dice il nome, riguarda l'interfaccia utente di jQuery, mentre jQuery Enchant, viene chiamata "la parte mancante di jQ UI" e riguarda la parte di effetti speciali dell'interfaccia: animazioni dei colori, delle classi, e altri effetti configurabili.

Demo riguardanti questi due aggiornamenti si possono trovare agli indirizzi:

http://ui.jquery.com/1.5a/demos/

http://ui.jquery.com/enchant/1.0a/demos/


Aumenta la diffusione di questo articolo

Microsoft JavaScript Memory Leak Detector

Domenica 27 Gennaio 2008

Un team europeo di Microsof ha finalmente sviluppato uno strumento in grado di evidenziare i memory leak nel codice javascript all'interno di Internet Explorer.

Questo strumento funziona come un componente di IE e si può scaricare qui.

Questo serve in particolare nel caso di pagine contenenti javascript complessi che possono avere la tendenza ad occupare tutta la memoria del computer fino a farlo piantare. Con il tool indicato, finalmente si potranno identificare le cause del leak ed eliminarle.

Attenzione, che è ancora in versione beta.

(more…)


Aumenta la diffusione di questo articolo

Aggiornamenti JQuery e Dojo Toolkit

Mercoledì 29 Agosto 2007

E' uscita la versione 1.1.4 di JQuery, che oltre a portare nuovi miglioramenti di prestazioni è l'ultima prima della versione 1.2 il cui lancio è previsto tra circa un mese.

E' stata finalmente pubblicata la versione definitiva del Dojo Toolkit 0.9.
Questo ha comportato una completa ristrutturazione del Toolkit rispetto alla versione 0.4, con una totale reingegnerizzazione del toolkit. In pratica, ora il "core" è sempre lo stesso, e non dipende dai moduli che vengono utilizzati e le dimensioni e la velocità sono state nettamente migliorate per portarlo con le prestazioni in linea con gli altri strumenti di sviluppo analoghi.

Inoltre, è stata operata una suddivisione logica tra gli elementi logici e quelli che riguardano la gestione della grafica, che è in alcuni casi davvero notevole.

Da notare anche che è prevista la pubblicazione di un ebook ufficiale gratuito, per insegnare agli sviluppatori ad usare la nuova versione del Toolkit.

A questo punto, una versione 0.9 ancora non la userei per lavori di produzione, però può iniziare valer la pena di perdere un po' di tempo a vedere come funziona. 


Aumenta la diffusione di questo articolo

Google Gears per l’inserimento di dati anche off-line

Lunedì 30 Luglio 2007

Jack Herrington ha scritto il suo secondo articolo nella sua serie su Gears.

L'articolo è interessante perché entra nel dettaglio di come creare un'applicazione con inserimento dei dati tramite form, che lavori anche off-line.

Questo significa che gli inserimenti vengono memorizzati, in modo che quando l'utente si riconnette, ci sia la sincronizzazione dei dati inseriti.

I dati vengono inviati usando Prototype e Ajax.Updater.

 


Aumenta la diffusione di questo articolo

Google Maps per tutti - 3

Martedì 17 Luglio 2007

Proseguiamo con la serie di tutorials sulle Google Map API e vediamo come si fa ad ottenere le coordinate di un posto, dato il suo indirizzo testuale.

In questo caso, l'oggetto che ci serve utilizzare è il Geocoder, pertanto dovremo inserire nel codice della nostra pagina una riga:

var geo = new GClientGeocoder();  

GClientGeocoder è l'oggetto che gestisce le comunicazioni tra la pagina Web e Google Maps. 

Il metodo da utilizzare per effettuare le interrogazioni è il seguente:

geo.getLocations(search, function (result))

dove search è la stringa che contiene la funzione è function è la funzione di callback che deve essere richiamata quando Google restituisce il risultato. 

Gli oggetti restituiti sono di tipo Placemark, quindi per estrarre i dati di interesse, si deve effettuare un ciclo sui risultati. Ad esempio:

for (var i=0; i<result.Placemark.length; i++) {
                  var p = result.Placemark[i].Point.coordinates;
                  var marker = new GMarker(new GLatLng(p[1],p[0]));

mentre lo stato della richiesta è contenuto nella proprietà:

result.Status.code

e può variare da G_GEO_SUCCESS in caso di successo a vari messaggi che indicano qual'è il tipo di errore incontrato.

Ad esempio, nell'esempio sotto riportato, il codice di errore viene gestito con un array associativo:

      reasons[G_GEO_SUCCESS]            = "Successo";
      reasons[G_GEO_MISSING_ADDRESS]    = "Indirizzo mancante: Indirizzo nullo o inesistente.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Indirizzo sconosciuto:  L'indirizzo inserito non è stato trovato, prova a controllare che sia stato scritto correttamente.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Indirizzo non disponibile: L'indirizzo non può essere riportato per limitazioni contrattuali di Google Maps";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: Sbagliato! Rivolgiti a mader@tesene.it per sapere come far funzionare questa pagina";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Troppe Queries: Sono state effettuate troppe queries da questo sito.";
      reasons[G_GEO_SERVER_ERROR]       = "Errore lato server.";
     
In caso di fallimento, poi viene riportato un messaggio con:

             var reason="Code "+result.Status.code;
              if (reasons[result.Status.code]) {
                reason = reasons[result.Status.code]
              }
              alert('Non trovato: "'+search+ '" ' + reason);

Se invece si ottengono dei risultati validi, vengono elencati e messi sulla cartina i relativi segnaposto.

if (result.Placemark.length >= 1) {
                document.getElementById("message").innerHTML = "Volevi dire:";
                // Loop nei risultati

               for (var i=0; i<result.Placemark.length; i++) {                  var p = result.Placemark[i].Point.coordinates;                  var marker = new GMarker(new GLatLng(p[1],p[0]));
                  document.getElementById("message").innerHTML += "<br/>"+(i+1)+": <a xhref='javascript:place(" +p[1]+","+p[0]+")'>"+ result.Placemark[i].address+"</a>";
                map.addOverlay(marker);
                }
                document.getElementById("message").innerHTML += "<br/>Se il risultato non è quello che desideravi, prova ad aggiungere informazioni";
              }

Da osservare che le alternative che Google fornisce, sono solitamente sullo stesso livello, per cui un C.so Roma non sarà mai messo come alternativa alla città di Roma, e simili.  

Per vedere come si applicano in pratica i concetti appena illustrati, è utile guardare la seguente demo:

Geocoder Demo

 


Aumenta la diffusione di questo articolo

Javascript come linguaggio di programmazione

Sabato 7 Luglio 2007

Con la definizione dello standard ECMAScript 4 sono state gettate le basi di Javascript 2.0. Questo porta con se varie implicazion, su come JavaScript potrà essere usato come linguaggio di programmazione in generale.

Javascript nell'arco degli anni ha passato varie fasi:

  • La fase "Abbiamo bisogno di un linguaggio di scripting per le pagine Web" (Netscape)
  • La fase "Dobbiamo standardizzarlo" (ECMAScript)
  • La fase "Potrebbe essere una cosa seria" (Ajax)
  • La fase "Javascript come linguaggio di programmazione"  

(more…)


Aumenta la diffusione di questo articolo