Javascript

Raccolta di script e funzioni più o meno utili, ma che mi hanno affascintato.

Aggiungere la funzione trim alla classe String

pubblicato 16 gen 2012, 05:24 da Roberto Gambuzzi   [ aggiornato in data 16 gen 2012, 05:25 ]

String.prototype.trim = function () { return this.replace(/^\s*/, "").replace(/\s*$/, ""); }
è stato preferito fare cosi piuttosto che
String.prototype.trim = function () { return this.replace(/^\s*|\s*$/, ""); }

per motivi di performance.

Hyperlink a Google maps su tutte gli indirizzi (stradali) di un documento

pubblicato 23 set 2010, 02:53 da Roberto Gambuzzi   [ aggiornato in data 23 set 2010, 03:15 ]

Il codice è simile a quello che metter l'hyperlink alle mail, sempre da eseguire preferibilmente nell'evento OnLoad del BODY.

document.body.innerHTML=document.body.innerHTML.replace(/((Via|viale|piazza|largo)[^+]*?\d+[^+]*?-[^+]*?\d{5}[^+]*?(Modena|Parma))/gi, '<a href="http://maps.google.it/maps?f=q&source=s_q&hl=it&geocode=&q=$1&ie=UTF8&hnear=$1&z=16&iwloc=A" target="_blank">$1</a>');

si aspetta una via ( o viale o piazza o largo o ... ) a modena o parma (altre località come vedete facilemente aggiungibili) nella forma:

Via ... 17 - 41122 MODENA

Si aspetta quindi un cap di 5 cifre

Se non si volesse il link su alcuni indirizzi basta non metter il - (meno) fra numero e cap, ma una virgola.

Base64

pubblicato 22 set 2010, 02:24 da Roberto Gambuzzi

Qui un comodo namespace, per cosi chiamarlo, per convertire da/a base64 una stringa.

var Base64 = {
 
    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
 
    // public method for encoding
    encode : function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
 
        input = Base64._utf8_encode(input);
 
        while (i < input.length) {
 
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
 
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
 
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
 
            output = output +
            this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
            this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
 
        }
 
        return output;
    },
 
    // public method for decoding
    decode : function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;
 
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
 
        while (i < input.length) {
 
            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));
 
            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
 
            output = output + String.fromCharCode(chr1);
 
            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
 
        }
 
        output = Base64._utf8_decode(output);
 
        return output;
 
    },
 
    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
 
        for (var n = 0; n < string.length; n++) {
 
            var c = string.charCodeAt(n);
 
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
 
        }
 
        return utftext;
    },
 
    // private method for UTF-8 decoding
    _utf8_decode : function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
 
        while ( i < utftext.length ) {
 
            c = utftext.charCodeAt(i);
 
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            }
            else if((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i+1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            }
            else {
                c2 = utftext.charCodeAt(i+1);
                c3 = utftext.charCodeAt(i+2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
 
        }
 
        return string;
    }
 
}

Creare una array con tutte le immagini di una cartella

pubblicato 22 set 2010, 02:05 da Roberto Gambuzzi

Per fare cio' dobbiamo avere la cartella che contiene le immagini listabile.

Suppioniamo di avere una variabile Array globale chiamate array_immagini

function loadImages() {
    var reimg = /href\=\"(.+?\.(?:jpg|gif|png))\"/gi
    xmlhttp.open("GET", fld+"?C=N;O=A",true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {           
            var arr = Array('a','b');
            while (arr) {
                var arr = reimg.exec(xmlhttp.responseText);
                if (arr) {
                    array_immagini.push(fld+'/'+arr[1]);
                }   
            }
            loadedImg();
        }
    }
    xmlhttp.send(null);
}

"C=N;O=A" ci dà l'elenco in ordine ascendente di nome.

per avere l'oggetto xmlhttp

var xmlhttp;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
  try {
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp=false;
  }
 }
@else
 xmlhttp=false
 @end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        xmlhttp=false;
    }
}
if (!xmlhttp && window.createRequest) {
    try {
        xmlhttp = window.createRequest();
    } catch (e) {
        xmlhttp=false;
    }
}
Nota bene che quello in testa non si tratta di un commento eliminabile ma di una direttiva di compilazione condizionata ed è quindi da lasciare.

Settare le trasparenze di un oggetto

pubblicato 22 set 2010, 01:58 da Roberto Gambuzzi

Questo è incredibilmente supportato anche da IE6
b contiene la trasparenza nella scala 0->100

Il seguente metodo convine se si vogliono settare anche altri paramentri di stile nel contempo
text = " filter: alpha(opacity="+b+"); opacity: "+(b/100.0)+"; -ms-filter: 'alpha(opacity="+b+")';";
element.setAttribute("style", text);
element.style.cssText = text;

Questo altro opera sulle singole proprietà
element.style.opacity = b/100.0;
element.style.MozOpacity = b/100.0;
element.style.filter = "filter: alpha(opacity="+b+")";

Hyperlink su tutte le email di un documento

pubblicato 22 set 2010, 01:56 da Roberto Gambuzzi

document.body.innerHTML=document.body.innerHTML.replace(/([a-zA-Z0-9_.-]+@[a-zA-Z0-9-.]+\.[a-zA-Z0-9]{2,4})/gi, '<a href="mailto:$1">$1</a>');

Con questo codice si sostituisce ogni mail trovata nel documento con un link cliccabile ad essa. Si potrebbe raffinare la regular expression per il match di email che non abbiano già un hyperlink intorno ad esse.

Animare un singolo valore

pubblicato 22 set 2010, 01:49 da Roberto Gambuzzi   [ aggiornato in data 31 mar 2011, 07:34 ]

Con questo script si puo animere un singolo valore di un oggetto preso per id.
function animateSingleVal(cosa, a, unita, tempo, callback) {
    if (cosa == null)
        return;
       
    da = parseInt(eval(cosa));
    if (isNaN(da))
        da = 0;       
   
    if (tempo>40)
    {       
        newda = da + ((a-da) * 40 / tempo); 
        eval(cosa+' = "'+parseInt(newda) + unita+'"');
        cmd = 'animateSingleVal("'+cosa+'",'+a+",'"+unita+"',"+(tempo-40)+","+callback+");";
        setTimeout(cmd,40);
    }
    else
    {
        eval(cosa+' = "'+parseInt(a) + unita+'"');
        if(callback != null)
            callback();
    }
}

l'utilizzo tipico è

function imaOver(nome) {
        animateSingleVal("document.getElementById('"+nome+"').style.width",160,"px",250);
}

cosa: è il valore da modificare
a : è il valore a cui arrivare con l'animazione
unita: è il tipo di unita del valore sda impostare
tempo: è il tempo in millisecondi da impiegare per arrivarvi
callback: è una funzione da chiamare ad animazione eseguita

Ispezionare un oggetto javascript (var_dump)

pubblicato 22 set 2010, 01:48 da Roberto Gambuzzi

Ecco qualcosa di utile e vagamente simile al var_dump del PHP

function inspect(obj, maxLevels, level)
{
  var str = '', type, msg;

    // Start Input Validations
    // Don't touch, we start iterating at level zero
    if(level == null)  level = 0;

    // At least you want to show the first level
    if(maxLevels == null) maxLevels = 1;
    if(maxLevels < 1)    
        return '<font color="red">Error: Levels number must be > 0</font>';

    // We start with a non null object
    if(obj == null)
    return '<font color="red">Error: Object <b>NULL</b></font>';
    // End Input Validations

    // Each Iteration must be indented
    str += '<ul>';

    // Start iterations for all objects in obj
    for(property in obj)
    {
      try
      {
          // Show "property" and "type property"
          type =  typeof(obj[property]);
          str += '<li>(' + type + ') ' + property +
                 ( (obj[property]==null)?(': <b>null</b>'):('')) + '</li>';

          // We keep iterating if this property is an Object, non null
          // and we are inside the required number of levels
          if((type == 'object') && (obj[property] != null) && (level+1 < maxLevels))
          str += inspect(obj[property], maxLevels, level+1);
      }
      catch(err)
      {
        // Is there some properties in obj we can't access? Print it red.
        if(typeof(err) == 'string') msg = err;
        else if(err.message)        msg = err.message;
        else if(err.description)    msg = err.description;
        else                        msg = 'Unknown';

        str += '<li><font color="red">(Error) ' + property + ': ' + msg +'</font></li>';
      }
    }

      // Close indent
      str += '</ul>';

    return str;
}

Posizione in pixel di un oggetto

pubblicato 22 set 2010, 01:45 da Roberto Gambuzzi   [ aggiornato in data 22 set 2010, 02:16 ]

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent); // l'=' non è un errore, serve ad aggiornare obj e testarlo in un unico colpo
        return [curleft,curtop];
    }
}


1-9 of 9

Comments