Trasformare degli SVG linkati con img in SVG inline con jQuery

Per modificare i valori, siano il colore o la dimensione, di immagini SVG in CSS è necessario che siano inline e non inseriti con il tag <img>, risulta però molto più comodo includerli in quest’ultimo modo;
Includendoli con il tag <img> infatti potremmo aggiornare il file senza modificare il sorgente della pagina e al tempo stesso mantenere molto più ordinato il sorgente.
La soluzione è molto semplice in realtà, grazie a jQuery:

// cicliamo tutti tag img che hanno la classe 'svg'
$('img.svg').each(function(){
    // memorizziamo il file e gli attributi del file
    var $img = $(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    // effettuiamo una chiamata ajax al file per recuperare il contenuto dell'SVG
    $.get(imgURL, function(data) {
        // memorizziamo solamente il contenuto del tag svg ignorando il resto
        var $svg = $(data).find('svg');

        // se ha un id lo memorizziamo e lo assegnamo al nostro nuovo svg
        // ricostruito
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // aggiorniamo allo stesso modo le classi aggiungendoci anche un prefisso
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Rimuoviamo tutti i tag xml che non sono validi per il w3c
        $svg = $svg.removeAttr('xmlns:a');

        // sostituiamo il tag iniziale img con il nuovo svg inline
        $img.replaceWith($svg);

    }, 'xml');
});

Assegnare una variabile costante ad una funzione in Javascript

Spesso mi è capitato di dover dichiarare un valore da utilizzare successivamente all’interno di una funzione, potrebbe poi esserci la necessità che tale valore possa essere utilizzato nuovamente nel momento in cui la funzione venga chiamata più volte.

Pensiamo ad esempio ad una funzione che fa da contatore e restituisce un ID differente ogni volta che viene chiamata, certo potremmo dichiarare una variabile globale ma ciò sicuramente “inquinerebbe” il namespace inutilmente.
Possiamo però dichiarare delle proprietà personalizzate della funzione:

contatore.id = 0;
function contatore() {
    return contatore.id++;
}

contatore(); // restituisce 0
contatore(); // restituisce 1
contatore(); // restituisce 2 .... ecc

Verificare il numero di argomenti passati ad una funzione in Javascript

Potremmo trovarci nella necessità di verificare se il numero di argomenti passati ad una funzione che abbiamo precedentemente dichiarato sia uguale al numero di argomenti che noi avevamo previsto per tale funzione.
In questo caso possiamo ricorrere all’oggetto arguments e alla sua proprietà callee che viene utilizzata per chiamare la funzione a cui arguments fa riferimento:

function verificaArguments(args) {
    var parametri_passati = args.length,
        parametri_previsti = args.callee.length;
    if (parametri_passati != parametri_previsti) {
        throw new Error("Numero di argomenti passari errato; Previsti: " + parametri_previsti + ", parametri passati " + parametri_passati);
    }
}

Tale funzione può essere utilizzata in modo semplicissimo:

function somma(a,b) {
    verificaArguments(arguments); // Se i parametri passati sono diversi lancerà un'eccezione come previsto
    return a + b;
}

Numeri casuali in Javascript

Molto spesso abbiamo la necessità di ottenere un numero casuale in Javascript.
C’è una funzione molto utile denominata Math.random() che restituisce un numero casuale tra 0 e 1, ma se ci servisse che il numero fosse contenuto in un intervallo (ad esempio un numero tra 10 e 20 con estremi compresi)?

var massimo = 20,
    minimo = 10;
function numeroCasuale(massimo, minimo) {
    return Math.floor( Math.random() * (massimo - minimo + 1) ) + minimo;
}
numeroCasuale(massimo, minimo);

Esaminando rapidamente il codice noteremo che Math.random() genera un numero casuale tra 0 e 1 (con 0 incluso e 1 escluso), tale numero viene poi moltiplicato per la differenza tra ‘massimo’ e ‘minimo’ a cui viene sommato 1 poichè Math.random() non genererà mai ‘1’, ottenendo così un numero casuale tra 0 e la differenza tra ‘massimo’ e ‘minimo’, ma ciò che noi vogliamo è avere un numero casuale che sia almeno grande come ‘minimo’ quindi arrotondiamo per difetto al numero intero più prossimo con Math.floor() e sommiamo ‘minimo’.

Capire se il sito è visualizzato da mobile in jQuery

Con una piccola espressione regolare possiamo capire se i visitatore sta visualizzando il sito da un dispositivo mobile:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    // fate qualcosa...
}

Lo script altro non fa che verificare se nella stringa di testo dell’user agent sono presenti le parole Android, webOS, iPhone, iPad, iPod o Blackberry comprendo così una fascia sufficiente di dispositivi.