Tag: javascript
Volevo farvi un appunto. Anzi, una @Annotazione
Intanto chiedo scusa per la mia assenza, vedrò di farmi perdonare:-)
Proseguendo da dove ero rimasto l'altra volta, ho controllato un po' in giro come le librerie JavaScript più diffuse trattano l'argomento della validazione dei form. Ho visto che l'unica cosa che hanno in comune è che ognuno la fa in modo differente dagli altri...
Ad esempio qui c'è la validazione dei campi di testo secondo Spry.
Volevo però fermarmi ad analizzare come avviene la validazione nella mia libreria preferita, ovvero jQuery. Ecco un esempio di validazione con il jQuery Validation Plugin.
Guardiamo un po' il sorgente: come posso indicare che un valore in un campo è sempre richiesto ed ha lunghezza massima 2?
HTML:
-
<input type="text"
-
class="{required: true, maxLength: 2}">
Argh... va be che anch'io avevo dettto che l'attributo class può essere utilizzato inserire delle annotazioni, ovvero delle informazioni "nascoste" associate ai nodi HTML, da usare poi per la validazione. Ma qui mi sembra che lo strumento venga utilizzato un po' disinvoltamente:-)
(Niente da ridire, in verità, anche io sono uno di quelli a cui piace ogni tanto sfruttare dei trucchetti..)
Però io suggerirei di inserire le annotazioni in un modo un po' diverso. Ovvero in un modo in cui nessun validatore, nessun esaminatore, nessun censore potrà mai avere a che ridire sul modo in cui queste annotazioni siano state inserite.
Ecco qua:
HTML:
-
<!-- type: "integer", maxLength: 2
-
--><input type="text">
Ecco fatto, tutto qua. Come si vede ho inserito le informazioni direttamente all'interno di un commento posto immediatamente prima del nodo a cui si riferiscono. Inoltre in questo modo posso costruire delle annotazioni di arbitraria complessità, su qualunque nodo HTML, e naturalmente non solo per la validazione. Perché semplicemente all'interno del commento è presente un frammento di testo JSON (senza le graffe) e così potrei scrivere, ad esempio:
HTML:
-
<!-- id: 1020, type: "integer",
-
children: [101, 102, 103],
-
coords: {
-
x: 100,
-
y: 200
-
}
-
--><input type="text" id="text1>
Qui ho specificato un campo "id" contenente un valore intero (magari letto da un database), che a questo campo sono legati in qualche modo degli altri nodi "children" (ad esempio per indicare che se uno solo di questi nodi è compilato devo compilare poi anche questo) e che associato al campo ho delle coordinate che andrò a gestire in un certo modo.
Come faccio poi via JavaScript per utilizzare questi dati "nascosti"? Con una bella funziona apposita:
JavaScript:
-
function Annotation(node)
-
{
-
// se è un nodo
-
if (node && node.previousSibling)
-
{
-
// cerco il primo commento precedente
-
for
-
(
-
node = node.previousSibling;
-
node && node.nodeType != 8;
-
node = node.previousSibling
-
)
-
;
-
// se ho trovato il commento
-
if (node)
-
{
-
var ann = null;
-
try { eval("ann = {" + node.nodeValue + "}"); }
-
catch (e) { }
-
for (var item in ann)
-
this[item] = ann[item];
-
}
-
}
-
}
Che andrò poi ad utilizzare ad esempio così:
HTML:
Che stile, che classe!
Sto arrovellandomi per trovare, tra le tante soluzioni, quale sia la più elegante per risolvere il problema della validazione dei form.
Il problema è sempre lo stesso. Come indicare che un campo è obbligatorio, oppure deve contenere un numero intero, oppure una textarea deve avere al massimo un certo numero di caratteri?
Be' se fossimo in un mondo perfetto la soluzione ci sarebbe già, e si chiamerebbe HTML 5. Guardate ad esempio cosa hanno pensato bene quelli del WHATWG nella specifica Web Forms 2.0 sull'argomento validazione. Però in un mondo perfetto non siamo...
Ad esempio per specificare un campo obbligatorio cosa c'è di meglio di un attributo "required"? Poi basterebbe l'utilizzo di una semplice funzione JavaScript per controllarne la correttezza, come descritto per esempio nell'articolo JavaScript triggers di Peter-Paul Koch.
E allora il problema qual'è? La soluzione sembra già a portata di mano. Ebbene il problema è il seguente: la specifica HTML attuale, con l'ausilio dei famigerati DTD HTML, non permettono l'introduzione di attributi "alieni" all'interno di un elemento HTML.
Questo si guardi bene potrebbe essere contestato. Che fastidio potrebbe dare un attributo in più se gli attributi necessari fossero già presenti? Semplicemente il browser che non ne capisca il significato potrebbe scartare l'attributo, come già fanno adesso tutti i browser creati fino a questo momento!
Però il problema rimane. Una buona soluzione deve funzionare anche in caso di necessità di validazione HTML. Bisognerebbe trovare una soluzione di classe... che dico di classe, di "class"!
Vediamo come potremmo fare:
HTML:
-
<input type="text" class="required integer">
Vi sembra brutto? Voi mi direte: l'attributo "class" serve ad altro, non è corretto utilizzarlo in questo modo. E invece io dico: cosa vuol dire "appartenere ad una classe"? Non significa che questa classe debba avere soltanto delle implicazioni sul modo in cui l'elemento viene visualizzato. Anzi è consigliato che il nome della classe ne sappresenti il significato e non l'aspetto. Ad esempio classe "errore" e non classe "rosso", perché magari un errore sarà sempre mostrato in rosso ma la classe ne deve indicare il significato e non l'aspetto, che devono rimanere indipendenti.
E qui volevo arrivare! Utilizzare una classe per indicare una caratteristica strutturale dell'elemento non va in conflitto con il fatto di specificare come quell'elemento deve essere visualizzato. Ad esempio io potrei volere che tutti i campi obbligatori abbiamo lo sfondo giallo, mentre tutti i campi interi abbiano un bordo rosso:
CSS:
-
input.required { background-color: yellow; }
-
input.integer { border: solid 1pt red; }
E nello stesso tempo una funzione JavaScript potrebbe controllarne la validazione:
JAVASCRIPT:
-
function validate(node)
-
{
-
try
-
{
-
if (containsClass(node, "required"))
-
checkRequired(node);
-
if (containsClass(node, "integer"))
-
checkInteger(node);
-
alert("ok");
-
}
-
catch (e)
-
{
-
alert(e.message);
-
}
-
}
-
function checkRequired(node)
-
{
-
if (!node.value)
-
throw { message: "valore mancante", target: node };
-
return null;
-
}
-
function checkInteger(node)
-
{
-
if (node.value && isNaN(parseInt(node.value, 10)))
-
throw { message: "non è un intero", target: node };
-
return null;
-
}
-
function containsClass(node, className)
-
{
-
return node.className.indexOf(className)>= 0;
-
}
Si veda bene che questo codice non vuol essere lo script migliore che si possa scrivere per gestire la validazione di un campo, ma solo un esempio su come semplice possa essere l'utilizzo di questo sistema. E le soluzione più semplici (a volte) sono le migliori:-) Questa come vi pare?
Naturalmente questo è solo l'inizio...
News Scroller
Ecco un piccolo esempio in cui si applicano le proprietà presentate in Scroll boxes. Si tratta di una possibile visualizzazione di news a scorrimento automatico in un blocco DIV. Niente di innovativo e tanto meno completo, ma può considerarsi uno buono spunto per esercitarsi con javascript, css e xhtml ( AJAX usando una sigla audace ).
Primo step, HTML formato da un contenitore generale un wrapper che servira' come contenitore delle news e quindi le singole news:
HTML:
Secondo step,CSS che nasconde l'overflow delle news:
CSS:
-
#container{
-
margin: 20px;
-
width: 200px;
-
height: 200px;
-
/*Nasconde la parte in eccesso*/
-
overflow: hidden;
-
border: 1px solid #000
-
}
-
-
div.news{
-
padding: 10px;
-
}
Ultimo step, Javascript per dare moto al tutto:
JavaScript:
-
//dichiarazione variabili globali
-
var time;
-
var scroll_limit;
-
-
//Alcune impostazioni fondamentali pre caricamento pagina
-
function init(){
-
var container = document.getElementById("container");
-
var wrapper = document.getElementById("wrapper");
-
var client_height = container.offsetHeight;
-
var news_nodelist = wrapper.getElementsByTagName("DIV");
-
-
/**
-
* Lo scroller deve resettarsi quando gli attuali
-
* elementi news sono stati tutti scorsi.
-
**/
-
scroll_limit = wrapper.offsetHeight;
-
var i = 0;
-
var current_element = news_nodelist[i];
-
-
/**
-
* Si duplicano i nodi in modo da creare l'illusione
-
* dello scorrimento continuo. Si assume che ci siano
-
* abbastanza nodi (news) da duplicare.
-
**/
-
while(client_height>= 0){
-
var current_element = news_nodelist[i];
-
client_height = client_height - current_element.scrollHeight;
-
wrapper.appendChild(current_element.cloneNode(true));
-
i = i + 1;
-
}
-
scroll("wrapper");
-
}
-
function scroll(element_id){
-
var wrapper = document.getElementById(element_id);
-
var container = wrapper.parentNode;
-
var scroll_top = container.scrollTop;
-
if( scroll_top + 1 <scroll_limit ){
-
container.scrollTop = container.scrollTop + 1;
-
}else{
-
container.scrollTop = 0;
-
}
-
// Si richiama la funzione tra 25 millisecondi
-
time = setTimeout('scroll(\'wrapper\')', 25);
-
}
-
-
function stopScroll()
-
{
-
if (time) clearTimeout(time);
-
}
Ovviamente la funzione init() deve essere richiamata al termine del caricamento della pagina HTML, ora sta a voi raffinare questo rozzo esempio di News Scroller.
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Scroll boxes
Il titolo forse non è dei più immediati, ma vorrei presentare delle proprietà degli elementi HTML utilizzabili con Javascript per creare degli scroller personalizzabili o automatici ( classico box delle news a scorrimento continuo ) o quant'altro preveda il movimento di un blocco scrollabile.
Innanzitutto presentiamo le proprietà degli elementi HTML che utilizzeremo negli script.
clientHeight
Proprietà in sola lettura che ritorna il numero di pixels dell'altezza interna di un elemento, incluso il padding ma escluse l'altezza della scrollbar, del bordo o del margine.
JavaScript:
-
var element = document.getElementById(id);
-
var height = element.clientHeight;
clientWidtht
È il corrispettivo di clientHeight ma per la larghezza interna di un elemento.
JavaScript:
-
var widht = element.clientWidtht;
scrollHeight
È una proprietà in sola lettura che restituisce il numero di pixels dell'altezza di un elemento relativa al layout, quindi comprensiva di padding e bordi.
JavaScript:
-
var scrollHeight = element.scrollHeight;
scrollWidth
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
JavaScript:
-
var scrollWidth = element.scrollWidth;
scrollTop
È una proprietà in lettura e scrittura che può assumere un valore qualsiasi intero positivo rappresentate la distanza in pixel tra il lato superiore e la prima parte visibile dell'elemento countenuto.
JavaScript:
-
var scrollTop = element.scrollTop;
scrollLeft
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
JavaScript:
-
var scrollLeft = element.scrollLeft;
Schema riassuntivo
Note: le proprietà presentate sino ad ora sono state introdotto dal object model di MSIE, quindi non sono nè una specifica nè una raccomanandazione W3C. In ogni caso sono implementate anche dal render Gecko ( Firefox, Mozilla, Netscape, etc. )
Queste proprietà si applicano a numerosi elementi, per avere maggiori dettagli consultate pure la MSDN DHTML library
Form highlighting
Dopo l'autofocus, altro script a mio parere utilissimo è quello dell'highlighting degli input field e delle textarea, ovvero un semplice meccanismo javascript + css che permette di evidenziare il campo della form attualmente in uso. Vi propongo una funzione sviluppata in maniera che sia abbastanza adattabile ai diversi casi.
JavaScript:
-
window.onload = function(){
-
/*applico l'highlight a tutti i campi di input*/
-
var inputFields = document.getElementsByTagName("INPUT");
-
for(i=0; i<inputFields.length; i++){
-
var field = inputFields.item(i);
-
if ( field != undefined){
-
if ( field.type=="text" || field.type=="password" ){
-
/*onfocus cambio la classe corrente con quella focus*/
-
field.onfocus = function(){this.className="focus";}
-
/*onblur ripristino la classe di default*/
-
field.onblur = function(){this.className="";}
-
}
-
}
-
}
-
/*stesso vale per le textarea*/
-
var textareas = document.getElementsByTagName("TEXTAREA");
-
for(i=0; i<textareas.length; i++){
-
var textarea = textareas.item(i);
-
textarea.onfocus = function(){this.className="focus";}
-
textarea.onblur = function(){this.className="";}
-
}
-
}
Chiaramento a questo script va assocciato un opportuno foglio di stile con almeno una classe focus.
CSS:
-
input.focus{
-
border: 1px solid #a00;
-
}
-
textarea.focus{
-
border: 1px solid #a00;
-
}
-
input, textarea{
-
padding: 1px;
-
background-color: #eee;
-
border: 1px solid #999;
-
}
Visto che sostenere l'utilità di questi script può essere discutibile, vi propongo un esempio completo di una tipica form di contatti.
N.B: Questi script non trattano campi del tipo checkbox, ma in quel caso bisognerebbe studiare una soluzione ad hoc che evidenzi l'intera area contente tutti i radio button o checkbox e non il singolo, poichè la check box o i radio button sono uno o più valori per un campo.
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Autofocus e form usability
Leggendo l'articolo di Diego, Accessibilità ed usabilità nelle form, mi sono risorte in mente alcune questioni sulle form che reputo interessanti.
Prima fra tutte l'autofocus, uno script muove il cursore dell'utente direttamente su uno specifico campo di input al caricamento della pagina, come avviene in Google. Per il form proposto nell'articolo sopra citato lo script sarebbe:
JavaScript:
-
/*window.onload equivale all'evento onload del tag body*/
-
window.onload = document.forms[0].s.focus();
I problemi sorgono in quelle pagine in cui convivo più forms, spesso per esempio una form di login e una di ricerca. Capita quindi che l'utente vorrebbe autenticarsi, lo script sposta il cursore sul campo di ricerca e l'utente finito di digitare lo username compone la password, così oltre alla perdita di tempo si aggiunge magari la vista in chiaro della password nel campo di ricerca. Per risolvere questo problema riporto uno script che ho ritoccato in modo da renderlo più generico.
JavaScript:
-
window.onload=function(){
-
var isfocused = false;
-
/*ottengo tutti i tag input della pagina HTML*/
-
var inputFields = document.getElementsByTagName("INPUT");
-
/*scorro con un ciclo for ogni elemento della nodeList*/
-
for(i=0; i<inputFields.length; i++){
-
var current = inputFields.item(i);
-
/*considero solo gli elementi definiti e di tipo text*/
-
if(current != undefined){
-
if(current.type == "text" || current.type == "password")
-
{
-
/*controllo se nessun valore è stato cambiato*/
-
if(current.value != current.defaultValue){
-
isfocused = true;
-
}
-
}
-
}
-
}
-
var textarea = document.getElementsByTagName("TEXTAREA");
-
for(i=0; i<textareas.length; i++){
-
var current = textareas.item(i);
-
if(current !== undefined){
-
if(current.value != current.defaultValue){
-
isfocused = true;
-
}
-
}
-
}
-
/*se nessun valore di default cambia scatta l'autofocus*/
-
if(!isfocused){
-
inputFields.item(0).focus();
-
}
-
}
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Introduzione DOM e Javascript
La sinergia DOM e Javascript, tecnologie alla base di AJAX (Asynchronous JavaScript and XML), insieme ai fogli di stile permette la creazione di interfacce utente Web interattive e accattivanti, vediamo quindi di introdurne i principi fondamentali.
DOM
Il Document Object Model (DOM) è un insieme di interfacce di programmazione (API) che forniscono un modello strutturato per documenti XML e dialetti derivati, come XHTML (ovviamente anche HTML), nata dal lavoro del World Wide Web Consortium (W3C).
Prendiamo una pagina HTML può essere vista in un browser o il rispettivo codice sorgente in un editor di testo, in entrambi i casi è un documento a cui il DOM fornisce una rappresentazione equivalente fatta di nodi e oggetti ai quali attribuisce proprietà e metodi.
Consideriamo un paragrafo di una ipotetica pagina HTML:
può essere rappresentato con il seguente albero DOM:
Esistono element nodes, text nodes and attribute nodes e altri ancora ( comment nodes per esempio ), da notare che tra i nodi ci sono precise relazioni di parentela, nell'esempio riportato il nodo P è padre del nodo STRONG e del nodo di testo, questi ultimi quindi sono fratelli.
Per approfondire i dettagli delle specifiche DOM niente di meglio che leggerle direttamente sul documento ufficiale W3C.
Javascript
Ora passiamo al lato puramente programmativo, Javascript implementa nativamente le API DOM. Incorpora nell'oggetto document appunto l'albero DOM della pagina HTML corrente. Quindi di seguito un po' di codice Javascript esemplificativo.
Navigare l'abero DOM
JavaScript:
-
/*ottenere il nodo <strong>*/
-
var strong = document.getElementsByTagName('STRONG')[0];
-
-
/*raggiunre il nodo <strong>*/
-
var p = strong.parentNode;
-
-
/*infine il text node*/
-
var nodeList = p.childNodes;
-
var testo_semplice = nodeList[1];
NB: nel caso delle liste di nodi, sconsiglio di usare gli indici per raggiungere il nodo desiderato, poichè gli a capo vengono codificati come text node e potremmo quindi sbagliare i conti.
Modificare l'albero DOM
e quindi il relativo documento HTML.
JavaScript:
-
/*modificare il nodo <strong>*/
-
strong.firstChild.nodeValue='ModLorem';
-
-
/*eliminare il nodo <strong>*/
-
p.removeChild(strong);
-
-
/*creare un nuovo nodo <u>Lorem</u>*/
-
var u = document.createElement('U');
-
var testo = document.createTextNode('Lorem');
-
u.appendChild(testo);
Per avere i dettagli completi vi consiglio di visionare la Gecko DOM Reference.
In questo articolo ho voluto introdurre le basi concettuali che sostengono le applicazioni che prossimamente vi mostrerò! ;)
