Qui apparirà il risultato

Traduzione:Gira ormai da tantissimo tempo la mail scritta tutta come questo articolo cioè con le lettere di ogni parola mischiate, escluse la prima e l’ultima. Ebbene, grazie alla RegExp per individuare le parole appena vista e alla funzione per mischiare un array, ho deciso di implementare un “mischiatore” di parole.

Parole (\w+) nelle regular expression

Scritto il 28 Dicembre 2007
Nella categoria Guide, Javascript | Scrivi un commento
Tag: Javascript, lingua, regexp, regular expression

Funzione molto comoda nelle Regular Expression sono le i caratteri speciali, come \d per le cifre o \s per tutti i vari spazi. Utilissimo sarebbe il carattere \w, che identificherebbe le lettere (e quindi le parole), ma la specifica impone che trovi solo i caratteri latini base (da “A” a “Z” e da “a” a “z“) più i numeri, rendendo quindi inutile il mezzo per tutti gli alfabeti con caratteri accentati o in generale estesi. Per esempio la parola “perché” non contiene tutte \w in quanto la “é” non appartiene al range [A-Za-z0-9].

Fate qui sotto una prova, nell’output verrà estratta la prima “parola” cioè il primo blocco \w+

Input:

Output:
(generato tramite match(/\w+/) )Per ovviare a questo problema, mi sono sfogliato tutti i codici unicode e ho estratto il blocco esatto per i caratteri, che include quindi anche le lettere accentate e strane di ogni nazione.

[\w\u00C0-\u017F\u1e00-\u1ef9]

Sarebbe il blocco corrispettivo, cioè il classico \w più il resto delle lettere (per essere preciso il blocco Latin Extended Additional, il necessario da Latin-1 Supplement e Latin Extended-A ), ma magari è più utile

[A-Za-Z\u00C0-\u017F\u1e00-\u1ef9]

Che individua solo le lettere escludendo i numeri (che non capisco perché vengano inclusi). Eccone una prova

Input:

Output:
(generato tramite match(/[A-Za-z\u00C0-\u017F\u1e00-\u1ef9]+/) )
.

La delegazione di eventi

Scritto il 16 Agosto 2007
Nella categoria Guide, Javascript | Scrivi un commento
Tag: delegazione, eventi, Javascript

La delegazione di eventi è una tecnica Javascript/DOM che ho trovato utile in alcune occasioni, si tratta di non controllare ogni singolo nodo di cui ci interessa un evento, e monitorarne un altro nodo più in alto nella radice DOM.

Un esempio per chiarire: abbiamo una serie di campi input testuali, vogliamo controllare il cambiamento di tutti quanti; classicamente dovremmo attaccare un EventListener ad ognuno di essi (oppure aggiungere una proprietà onChange o simile). Beh invece si può attaccare un solo EventListener ad un elemento che contiene tutti i campi (come l’elemento “form” ad esempio).

Questo è possibile perché gli eventi si trasmettono attraverso l’albero dei nodi, per maggiori informazioni a proposito (ma diventa piuttosto tecnico), si trovano sulla documentazione ufficiale DOM, sezione Eventi.

Potrebbe però diventare utile, a questo punto, scoprire qual’è l’elemento che ha generato l’evento, perché this farà riferimento al nodo a cui abbiamo aggiunto l’EventListener, non al campo testuale. Tra le proprietà dell’evento infatti c’è target oppure srcElement, dipende dal browser. Per essere sicuro che funzioni, io utilizzo il seguente codice: var element = e.target || e.srcElement;

[via HTML]

Mischiare un array: mix()

Scritto il 23 Aprile 2007
Nella categoria Javascript, Produzioni Proprie | Scrivi un commento
Tag: array, Javascript, mix, Programmazione

Oggi altra funzione che potrebbe tornare utile: mix() che mischia un array in modo casuale; non mi addentro sul significato di casuale, dico soltanto che crea un array aggiungendo ogni volta un elemento preso a caso dall’array originale.

Array.prototype.mix = function() {
	var ret = new Array();
	while (this[0]) {
		ret.push(
			this.splice(
				parseInt(Math.random()*this.length),
				1)[0]
			)
	}
	while (ret[0]) {
		this.push(ret.shift());
	}
	return this;
}

La funzione oltre che mischiare l’array lo restituisce, quindi potete subito agire sul risultato di mix().

Chiaramente è applicabile anche al di fuori di un array, basta che l’oggetto supporti push, pop e splice; inoltre con pochissimi cambiamenti potete renderla una funzione esterna, io preferisco però la programmazione ad oggetti e quindi la implemento come membro di una classe.

Non c’è molto altro da spiegare, viene sempre utile anche se avete una cosa da mischiare, per esempio un elenco di nomi (stringhe in generale). A me è servita proprio per mischiare un elenco di file, resi in array e poi mischiati ;)

Aggiungere e togliere Classi CSS: toggleClassName

Scritto il 23 Aprile 2007
Nella categoria Javascript, Produzioni Proprie | Scrivi un commento
Tag: css, html, Javascript, Vita sul web

Oggi ho scritto la funzione ToggleClassName perchè la userò in una nuova edizione di Travian Più Più. Serve per aggiungere e togliere una classe CSS ad un elemento, chiaramente se è già presente la toglie, altrimenti la aggiunge.

Io l’ho implementata con Element.prototype chiaramente può essere fatta anche come funzione esterna, con piccoli cambiamenti.

Element.prototype.toggleClassName = function(className) {
	if ( (' '+this.className+' ').indexOf(' '+className+' ') > -1) {
		var str = ' '+this.className+' ';
		str = str.replace(new RegExp(' '+className));
		str = str.substr(1).substr(0,str.length-2);
		this.className = str;
		return false;
	} else {
		this.className += ' '+className;
		return true;
	}
}

Il grosso problema che ho dovuto affrontare è nel separatore spazio delle classi, quindi il codice non risulta snellissimo, per quelli interessati si può raggruppare le prime 4 righe dopo il primo if in una unica, ma a me non piace tantissimo e poi diventa una riga troppo lunga per essere visualizzata qui :P

Ultima annotazione, la funzione restituisce true se aggiunge, falsese toglie.