Tag Archive for "Javascript" - Undolog.com

Riprendendo il post Validare email in Javascript e PHP, ecco una simpatica classe Javascript in grado di verificare e controllare indirizzi di posta elettronica. Il suo uso è davvero semplice, anche se è un controllo lato client, quindi facilmente bypassabile; basta infatti disabilitare Javascript (propongo petizione contro questa possibilità oramai tutti i browser permettono di eludere Javascript, e quindi tutti i controlli associato – a breve non funzionerà più nulla su Internet, vedi Ajax ).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

/*
** @name : ckmail.js
** @description : Check email syntax
** @author : =undo=
** @author-web : http://www.undolog.com
** @author-email : g.fazioli@undolog.com - g (dot) fazioli (at) undolog (dot) com
** @date : 21/09/2006 21.24
** @ver : 1.0
*/

var oCKMail = {
__release: "1.0",
__filter: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
__username: "",
__domain: "",
__ext: "",

// TO DO
getUsername: function(e) {
if(this.__init(e)) return(this.__username);
return(false);
},

// TO DO
getDomain: function(e) {
if(this.__init(e)) return(this.__domain);
return(false);
},

// TO DO
getExtension: function(e) {
if(this.__init(e)) return(this.__ext);
return(false);
},

// TO DO
__init: function(e) {
if( !this.__filter.test(e) ) return(false);
var t = e.split("@");
this.__username = t[0];
this.__domain = t[1];
t = this.__domain.split(".");
this.__ext = t[1];
return(true);
},

// TO DO
// synopsis
// check(e,extlist,domainlist);
// Esegue una serie di controlli standard su un indirizzo e-mail.
// extlist - Si può passare un secondo parametro opzionale che corrisponde ad un array di estensioni che
// sono ammesse o escluse (include/exclude extension) in base al primo valore dell'array, tutte le
// altre saranno considerate errore.
// Eg. [true,"it","com"] passano (include list)
// Eg. [false,"it","com"] NON passano (exclude list)
// Se -1 non viene preso in considerazione
// domainlist - Si può passare un terzo parametro opzionale che corrisponde ad un array di domini che
// sono ammessi o esclusi (include/exclude domain) in base al primo valore dell'array, tutte gli
// altri saranno considerate errore.
// Eg. [true,"alice.it","mac.com"] passano (include list)
// Eg. [false,"alice.it","mac.com"] NON passano (exclude list)
// Se -1 non viene preso in considerazione
//
check: function(e) {
if( this.__init(e) ) {
// check domainExt array check
if( arguments.length > 1 ) {
if( typeof( arguments[1] ) == "object" ) {
if( arguments[1][0] ) { // include list
for(var i=0; i < arguments[1].length; i++) {
if( this.__ext == arguments[1][i].toLowerCase() ) return(true);
}
} else { // exclude list
for(var i=0; i < arguments[1].length; i++) {
if( this.__ext == arguments[1][i].toLowerCase() ) return(false);
}
return(true);
}
return(false);
}
}
// check domainName array check
if( arguments.length > 2 ) {
if( typeof( arguments[2] ) == "object" ) {
if( arguments[2][0] ) { // include list
for(var i=1; i < arguments[2].length; i++) {
if( this.__domain == arguments[2][i].toLowerCase() ) return(true);
}
} else { // exclude list

for(var i=1; i < arguments[2].length; i++) {
if( this.__domain == arguments[2][i].toLowerCase() ) return(false);
}
return(true);
}
return(false);
}
}
return(true); // email correct
}
return(false); // error
}
};

L’oggetto oCKMail mette a disposizione alcuni metodi per effettuare tutta una serie di controlli paralleli sull’indirizzo, come l’estensione, il dominio, ecc…

Per essere proprio sicuri se disponete di PHP potete aggiungere un’ulteriore ed efficace controllo prima di eseguire il comando mail(). Ecco la classe PHP utile a tale scopo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

/*
** @name : cckmail.php
** @description : Check email syntax
** @author : =undo=
** @author-web : http://www.undolog.com
** @author-email : g.fazioli@undolog.com - g (dot) fazioli (at) undolog (dot) com
** @date : 21/09/2006 23.58
** @ver : 1.0
**
** EXAMPLES
**
** // Controlla un indirizzo ESCLUDENDO quelle e-mail con dominio "e-lementi.com" e "mac.com"
**
** $oCKMail = new CCKMail();
** $oCKMail->check($email, NULL, array(false,"e-lementi.com","mac.com") );
**
** // Controlla un indirizzo INCLUDENDO quelle e-mail con dominio "e-lementi.com" e "mac.com"
**
** $oCKMail = new CCKMail();
** $oCKMail->check($email, NULL, array(true,"e-lementi.com","mac.com") );
**
** // Controlla un indirizzo ESCLUDENDO quelle e-mail con estensione "net","it","org"
**
** $oCKMail = new CCKMail();
** $oCKMail->check($email, array(false,"net","it","org") );
**
** HISTORY / CHANGE LOG
**
*/

if (!function_exists('checkdnsrr')) {
function checkdnsrr($host, $type = '') {
if(!empty($host)) {
if($type == '') $type = "MX";
@exec("nslookup -type=$type $host", $output);
while(list($k, $line) = each($output)) {
if(eregi("^$host", $line)) {
return true;
}
}
return false;
}
}
}
//
class CCKMail {
var $__release = "1.1";
var $status = false;
var $username;
var $domain;
var $ext;
//
function CCKMail() {}
//
function _test($e) {
$this->status = false;
$p = '/^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/';
if( (preg_match($p, $e)) ) {
$t = explode("@",$e);
$this->username = strtolower( $t[0] );
$this->domain = strtolower( $t[1] );
$t = explode(".",$this->domain);
$this->ext = strtolower( $t[1] );
//
if(checkdnsrr($this->domain.'.', 'MX') ) $this->status = true;
if(checkdnsrr($this->domain.'.', 'A') ) $this->status = true;
if(checkdnsrr($this->domain.'.', 'CNAME') ) $this->status = true;
}
}
//
function check($m, $e=NULL,$d=NULL) {
$this->_test($m);
if( $this->status ) {
// check domainExt array check
if( !is_null($e) ) {
if( $e[0] ) { // include list
for($i=1; $i < sizeof($e); $i++) {
if( $this->ext == strtolower( $e[$i] ) ) return(true);
}
} else { // exclude list
for($i=1; $i < sizeof($e); $i++) {
if( $this->ext == strtolower( $e[$i] ) ) return(false);
}
return(true);
}
return(false);
}
// check domainName array check
if( !is_null($d) ) {
if( $d[0] ) { // include list
for($i=1; $i < sizeof($d); $i++) {
if( $this->domain == strtolower( $d[$i] ) ) return(true);
}
} else { // exclude list
for($i=1; $i < sizeof($d); $i++) {
if( $this->domain == strtolower( $d[$i] ) ) return(false);
}
return(true);
}
return(false);
}
return(true);
}
return(false);
}
}
?>

La cosa ineteressante è la capacità di questa classe di connettersi ai server MX (vedi checkdnsrr() ) per verificare la presenza del dominio. Quindi oltre ad eseguire un controllo sintattico sull’indirizzo di posta elettronica viene eseguito un vero e proprio ping del dominio passato. Possiamo dire che questo metodo è sicuro all’80%…

Continua...

Anche se non si realizza un sito interamente in Flash, alcuni componenti possono presentarsi comunque all’interno della pagina, come banner, claim, visori RSS, ecc… Eco quindi un modo semplice per verificare se Flash è attivo e installato. Proponiamo qui un metodo che non necessità di più pagine, come proposto dalla stessa Adobe. Faremo in modo di risolvere tutto all’interno di un’unica pagina.

La classe qui presentata permette anche di risolvere l’ultimo problema nato con Explorer, ovvero quello dell’attivazione di un controllo ActiveX. Per risolverlo basta utilizzare Javascript per inserire il componente Flash, proprio quello che fa la nostra classe.

La prima cosa di cui abbiamo bisogno è una simpatica classe Javascript che ci permetterà di eseguire tutti i controlli necessari:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

Come al solito, Internet Explorer (7) si differenzia e vuole un codice appositamente strutturato in VBScript:

[vb]

[/vb]

Salviamo questi due file (df.js e df.vbs nella cartella js) e includiamoli nella nostra pagina (index.html, index.php o default.html, ecc…) all’interno del TAG HEAD.

1 2	<script language="javascript1.2" type="text/javascript" src="js/df.js"></script> <script language="VBScript" type="text/vbscript" src="js/df.vbs"></script>

Ora abbiamo tutto il necessario e possiamo spostarci nella pagina che conterrà l’oggetto Flash. Posizionatevi nel punto dove Flash sarà visualizzato e inserite il seguente codice:

1	<script language="javascript1.2" type="text/javascript">df.insertFlash("flash/splash","900","122");</script>

Nell’esempio abbiamo assunto che esista un file splash.swf nella cartella flash! Notate che non è necessario inserire l’estensione swf. I due numeri 900 e 122 sono le dimensioni.

Ancora meglio sarebbe supportare il caso – remoto – dove Javascript è stato disabilitato. In questa circostanza potete scegliere di procedere in due modi:

1. Inseire direttamente in codice OBJECT/EMBED
2. Notificare che Javascript è disabilitato

Nel primo caso perdiamo il controllo sulla presenza di Flash ed Explorer richiederà di attivare il controllo ActiveX. Tuttavia il filmato sarà visibile, se Flash è installato.

Nel secondo caso possiamo mostrare un’immagine e/o notoficare che con Javascript spento non è possibile verificare la presenza del Plug-in Adobe Flash. Ad esempio, scegliendo la soluzione numero 1:

1
2
3
4
5
6
7
8
9
10

<div id="claim">
<script language="javascript1.2" type="text/javascript">df.insertFlash("flash/splash","900","122");</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="122">
<param name="movie" value="flash/splash.swf" />
<param name="quality" value="high" />
<embed src="flash/splash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="122"></embed>
</object>
</noscript>
</div>

Rilevare Flash e gestire le numerose alternative, come spiegato su Flash detect: come rilevare Flash, non è proprio comodissimo, speriamo almeno che la cosa non andrà a peggiorare con il tempo.

Continua...

Scrivere codice HTML dinamicamente all’interno di una pagina è possibile ed utile. Il modo più diretto e conosciuto è quello di utilizzare documenti.write() o un contenitore DIV predisposto ad accettare codice inserito tramite innerHTML. In alternativa è possibile agganciarsi ad un TAG esistente ed utilizzare il DOM per aggiungere o rimuovere elementi all’interno della pagina. Ad esempio immmaginiamo di voler caricare un nuovo file Javascript senza utilizzare scripting lato server e quindi il ricaricamento della pagina. La funzioni qui sotto, ad esempio, aggiunge un file Javascript alla vostra pagina, passato come parametro (comprensivo di path).

1
2
3
4
5
6

function addScripting(s) {
var scriptNode = document.createElement('script');
document.getElementsByTagName("head")[0].appendChild(scriptNode);
scriptNode.language='javascript';
scriptNode.src=s;
}

Similmente è possibile aggiungere un foglio di stile alla nostra pagina, indicato dalla variabile cssfile:

1
2
3
4
5

var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', cssfile );
document.getElementsByTagName('head')[0].appendChild(cssNode);

Continua...

Come si può determinare se un browser ha installata la versione corretta del Plugin Adobe Flash? Per fare questo esistono – notoriamente – 5 tecniche:

Affidarsi alla caratteristica auto-installante dei TAG OBJECT ed EMBED
Utilizzare uno script (Javascript e/o VBScript) appositamente fornito da Adobe
Utilizzare un artifizio con un solo filmato Flash
Non fare nulla
Far scegliere all’utente

Continua...

Come molti sviluppatori Web sanno, prima dell’avvento dell’oggetto XMLHttpRequest, il problema del ricaricamento di una pagina Web veniva risolto con la tecnica dei FRAME o IFRAME nascosti. Questo artifizio ha permesso per molti hanni di risolvere alcune problematiche di interfaccia altrimenti irrisolvibili. Un vantaggio nell’uso dei FRAME nascosti, tra l’altro, era la possibilità di mantenere l’HISTORY del browser! Cosa che l’oggetto XMLHttpRequest non permette.

Oltre a tecniche HTML che ricorrono a FRAME o IFRAME nascosti, esiste la possibilità di usare Flash come sub-canale di comunicazione tra la pagina e il Server. Alcune esperienze in tale direzione sono tuttora in sviluppo (vedi ad esempio Fjax). L’idea è quella di “nascondere” un filmato Flash all’interno della pagina HTML (come accadeva con i FRAME) e comunicare con esso tramite Javascript (o VBScript per il solo ambiente Microsoft).

Tuttavia questa tecnica nascoste una serie di insidie. Prima di tutto costringe l’utente finale ad installare il PlugIn di Flash, e quindi non rappresenta una soluzione HTML (pura) pulita. Inoltre richiede comunque l’uso spinto di Javascript come interfaccia tra Flash e la pagina, quindi tanto vale la pena usare l’oggetto XMLHttpRequest. Quando poi si inizia a scrivere un framework in ActionScript viene voglia di realizzare tutto in Flash. Ecco che la variante all’oggetto XMLHttpRequest comincia ad avere poco senso.
In definitiva se non si vuole usare l’oggetto XMLHttpRequest, conviene affidarsi all’ormai consolidata tecnica dei FRAME nascosti. Addirittura c’è chi usa proprio una tecnica mista: XMLHttpRequest + IFRAME!

Tuttavia, oramai, Ajax (nella forma dell’oggetto XMLHttpRequest) ha riscosso un così grande successo che in futuro l’oggetto XMLHttpRequest verrà sia supportato che migliorato dai produttori di browser (come Microsoft, Mozilla, Opera, ecc…). In pratica XMLHttpRequest diventerà un componente di default (come accade già in FireFox) all’interno del browser, raggiungibile via Javascript! Quindi perchè non usarlo?

Continua...

Ajax, per qualcuno, è stata una rivoluzione. Per alcuni programmatori “navigati” è stato solo un modo diverso di fare quello che prima si realizzava sfruttando il TAG HTML IFRAME (o i FRAME stessi nascosti). Evidentemente hanno tutti ragione. Ajax è stata una rivoluzione perchè è capitato in un momento particolare, dove la diffusione della banda-larga e la maturità del Web (web 2.0?) hanno permesso un approccio completamente diverso rispetto al passato.

La proliferazione delle Web Applications da parte di grandi gruppi come Microsoft, Yahoo, Google ed altri, dimostra quanto si stia investendo in questo nuovo approccio. Il futuro – prossimo venturo – di Ajax è quindi luminoso, denso di novità e colpi di scena.

I browser e gli scripting server (come PHP) potranno dare ausilio a questo nuovo modo di vedere il Web e le sue risorse! Applick.com ne è una dimostrazione lampante!

Continua...

A Redmond devono avere qualche grosso problema di comprendonio! Risulta magnificamente assurdo che sul finire dell’anno 2006 ancora non ci siano le basi per una – anche – approssimata compatibilità tra IE7 e Firefox! Nonostante il rilascio ufficiale – anche se con un set limitato di localizzazioni – di Internet Explorer 7, l’engine di rendering delle pagine soffre ancora di evidenti difetti di programmazione! Senza infierire entrando in numerosi dettagli elenco solo due clamorosi bachi ancora presenti in questo rilascio ufficiale!!

Prima di tutto i PNG vengono resi differentemente dai GIF… e, peggio ancora, in position absolute subiscono strani contorni a seconda di come gira a IE!! Evidente baco? O follia di qualche junior-developer?

Sul fronte CSS la pseudo classe :hover continua a non essere supportata su tutti i TAG, nonostante molti blog la diano per funzionante! Ma su quale sistema? Vedi W3C…
Un semplice p:last-child è praticamente ignorato! Giustamente Microsoft ha supportato p:first-child. Ora, se implementi il first che cosa ti costa implementare anche last? Mistero…

L’apice dell’assurdo, poi, lo si ottiene con le liste puntate! Udite udite! IE7 si comporta esattamente come IE6! Della serie: vi siete portati appresso codice fallato? Troppi copia e incolla evidentemente! Se definitie una lista con i canonici UL LI e un’immagine personalizzata come list-point, non provate ad usare un float sull’elemento LI, l’immagine scomparirà misteriosamente, esattamente come accadeva su IE6!! L’unico, manco a dirlo, a rendere il tutto corretto è il solito – vecchio – FireFox!

Sul blog di IE7 sono numerose le lamentale. Nonostante sia apprezzato lo sforzo del pachiderma Microsoft di aprire un blog durante lo sviluppo di un software come IE7, rimane tuttavia il dubbio dell’efficacia di questa mossa. Hanno davvero ascoltato le richieste degli utenti-sviluppatori? Il blog di IE7 è stato aperto con troppo ritardo?

Ancora una volta non ci resta che attendere una service-pack prossima ventura…

Continua...

Dopo aver acquisito Macromedia, Adobe crea i suoi Labs, laboratori di sviluppo! Sulla scia del successo ottenuto da Microsoft con il suo Blog su Internet Explorer 7 – che gli ha (e ci ha) risparmiato un bel po di services pack – anche Adobe adotta la tecnica della beta version. In effetti, ed era ora, invece di attendere gli ormai lunghissimi tempi di sviluppo di un software (sia esso tradizione, sia una Web Application) perchè non proporre agli utente la versione ancora in sviluppo? In questo modo si ha un feedback in tempo reale sulle effettive qualità del software che si sta sviluppando.

Tuttavia, per onestà, le software haouse dovrebbero abbassare un po’ i prezzi dei loro software, visto che il beta testing – che si paga o si pagava – lo facciamo noi utenti!!

Con Adobe Soundbooth beta si va a sovrascrivere il noto SoundEdit. Adobe Photoshop Lightroom è un nuovo prodotto rivolto ai fotografi professionisti, con tanto di demo video online. Flash 9 con ActioneScript 3 compare anch’esso in versione alpha da scaricare! Nonostante sia indicato preview! Per il mobile troviamo Flash Lite 2.1 Authoring Update, che tuttavia sembra un rilascio definitivo più che un’anticipazione. A parte questa piccola miscellanea di beta, alfa e upgrade credo che l’iniziativa sia buona, se non ottima.
Insomma per i curiosi che vogliono anticipare i tempi e non vedono l’ora di assaporare una nuova versione di un software, Adobe Labs è un luogo di sicuro divertimento! Sottolineo nuovamente la tendenza a far partecipare gli utenti finali alle fasi di sviluppo, tendenza che deve la sua diffusione alla Web 2.0 generation. Molto probabilmente sarà una modalità che nel prossimo futuro si diffonderà a macchia d’olio ovunque è possibile. Si potrebbe provare un’appartamente o un’autombile prima che venga rilasciata, ad esempio…

Continua...

C’è un motivo molto importante per preferire l’inserimento dei contenuti via PHP – lato server – in una pagina Web rispetto all’uso di Javascript – lato client. Nello sviluppo degli strumenti di outing services del CMS getmePage utilizzato su applick.com era possibile sfruttare Ajax come engine di recupero HTTP dei dati server. Il problema, in questo caso, era che si aveva a che fare con i contenuti di un sito, contenuti che vengono indicizzati dai crawler di ricerca come googlebot! I crawler non eseguono Javascript, rendendo così vuota una pagina agli occhi di googlebot. Oggi sono i contenuti a fare la differenza nelle indicizzazioni nei motori di ricerca, quindi bisogna fare attenzione a come vengono generati i contenuti in una pagina. Quello che vede l’enduser non è quello che vede un tool come googlebot. Questo è uno dei motivi che hanno determinato la scelta di PHP nell’engine di recupero dati dell’applick getmePage. PHP, infatti, viene eseguito dal Web Server prima di inviare la pagina al client. Ne deriva, così, che quello che vede un crawler è quello che vede l’enduser.

Continua...

Come già affrontato su “Javascript vs PHP” (o altro: ASP, CFM, …), la questione di inserire o meno un kernel Web2.0 negli script Javascript, invece di lasciarlo – in maggiornaza – lato server, può creare confusione se non sconcerto. Tuttavia ci sono degli ottimi motivi per favorire il server rispetto al client, motivi che non hanno niente a che fare con il Web2.0 che, al contrario, punta i riflettori proprio sugli script Javascript.

Continua...