Javascript: tips e appunti

Programmazione - Javascript 11 Novembre 2008 Visite: 4851

Ormai questi da appunti stanno diventando un vero e proprio manuale dove trovare molti trucchi e molti consigli sul linguaggio Javascript e sul suo uso.

Vedremo come formattare i numeri, escape e unescape, qualche utile consiglio sulle stringhe, gestione delle date, creazione dinamica di contenuti e stili, controllo e check su campi codice fiscale.

Formattare i numeri

Ecco due funzioni per formattare i numeri reali:

Number.toFixed([cifreDecimali]): per fissare il numero di cifre decimali.

Number.toPrecision([numCifre]): per fissare il numero totale di cifre di un numero.

Vediamo qualche esempio:

var num=12.34

num.toFixed() oppure num.toFixed(0): ritorna 12.34

num.toFixed(1): ritorna 12.3

num.toFixed(3): ritorna 12.340 aggiunge lo zero per le cifre mancanti

var num=12.34
num.toPrecision(1): ritorna 1

num.toPrecision(4): ritorna 12.3

Funzione Escape/Unescape

Queste funzioni sono molto utili quando si ha a che fare con le submit delle form o comunque con l'invio di dati ad un server mediante metodo GET (ovvero, con i parametri visibili nella barra degli indirizzi).

In una URL i parametri sono sempre del tipo chiave=valore (ad esempio nome=pippo).

I parametri nella URL sono poi suddivisi dal carattere '&'.

Quindi ad esempio: nome=pippo&cognome=rossi

Se il valore della chiave contiene il carattere '&' si ottiene un errore perché se pippo si chiama pippo&pluto avremo:
nome=pippo&pluto&cognome=rossi

che il server leggerebbe
    nome=pippo
    pluto=
    cognome=rossi

In questo caso, sul valore (o meglio su tutta la URL) "pippo&pluto" si deve fare l'escape.

pippo&pluto --> escape --> pippo%26pluto

La funzione unescape() serve a riportare tutto come prima:

pippo%26pluto --> unescape --> pippo&pluto

Quindi, escape riceve una stringa e la restituisce codificata.

Unescape riceve una stringa codificata e la restituisce decodificata.

Usare le stringhe

Vediamo come usare e/o manipolare le stringhe in Javascript.

Ricerca

indexOf() : Restituisce la posizione della prima occorrenza di una stringa in un'altra.

ritorna -1 se non ci sono occorrenze.

Ad es.,

var stringa = "mio esempio";

alert(stringa.indexOf("i"));

Restituirà la posizione della prima 'i' nella frase.

Replace ALL

Come si può fare il replace all in javascript?

var mystr = 'pippo.pluto';

mystr = mystr.replace(/\./g,"_");

La stringa diventerà 'pippo_pluto'.Oppure:

mystr = mystr.replace(/pippo/g,"pluto");

La stringa diventerà 'pluto_pluto'.

E' possibile fare il replace all mediante l'uso delle espressioni.

Split di una stringa

Vediamo un esempio su come fare lo split di una stringa basandoci su un carattere:

var str="pipo;pluto";

var strS = str.split(";");

alert(strS.length); //sara due

Gestione delle date in Javascript

Vediamo come calcolare e gestire la data corrente in javascript:

//Estrazione della data corrente
var today = new Date();

//Estrazione dell'anno corrente
var anno = today.getFullYear(); //la funzione getYear() è deprecata

//Estrazione del mese corrente, Gennaio=0 per questo sommo +1
var mese = today.getMonth()+1;

//Giorno corrente come numero 1-31
var giorno = today.getDate();

//Ora corrente

var h = today.getHours();

//Minuti correnti

var m = today.getMinutes();

//Secondi correnti

var s = ut.getSeconds();

//Un esempio su come riformattare la data

var data = giorno + "/" + mese + "/" + anno;
</script>

Se vogliamo visualizzare la data dinamica in una pagina si può fare così:

                        if (s <= 9) s = "0" + s;
                        if (m <= 9) m = "0" + m;
                        if (h <= 9) h = "0" + h;
                        time = g + "/" + mese + "/" + a + " " + h + ":" + m + ":" + s + " ";
                        document.rclock.rtime.value = time;
                        tick = setTimeout("nowtime()", 1000);
                    }
                    nowtime();
                </script>

Vediamo ora qualche semplice operazione che è possibile fare con una data.

Sommare ad una data un certo numero di mesi:

//Data iniziale

var dataIniziale = new Date();

dataIniziale.setMonth(dataIniziale.getMonth() + 5);

In questa maniera si sommano 5 mesi alla data iniziale. Bisogna ricordarsi che il primo mese della data è 0 (zero) e non 1.

Come verificare se una data è valorizzata correttamente?

if ( !isNaN(dataInizio.getTime()) )

{

//data valorizzata correttamente

}

Creazione dinamica di contenuti e style/css

Come si crea dinamicamente un contenuto mediante javascript?

Con qualcosa di simile da mettere in un blocco javascript:

var nuovoLink = document.createElement('a');

nuovoLink.setAttribute("href",url);

nuovoLink.appendChild(document.createTextNode("Mio link dinamico"));

myElemParent.appendChild(nuovoLink);

Questo esempio mostra come creare in maniera dinamica un link. L'oggetto javascript nuovoLink rappresenta il nuovo link, myElemParent è un oggetto javascript già presente dopo il quale far apparire il nuovo link.

Quando si utilizza questa tecnica con il setAttribute() non si riesce ad associare lo style corretto al componente. bisogna invece fare così:

nuovoLink.style.setAttribute("cssText", "font-family: 'verdana'; font-size: 8pt;", 0);

Questa tecnica per associare lo style non è compatibile con tutti i browser, meglio usare:

nuovoLink.style.cssText = "font-family: verdana, Arial,Helvetica, sans-serif; font-size: 8pt;";

questa seconda modalità è compatibile sia con IE7 che FF3.

Vediamo ora come caricare dinamicamente un CSS al click di un link, ad es. per far ingrandire i caratteri della nostra pagina:

Il CSS base.css contiene le classi di base, gli altri tre css solo le dimensioni dei font.

I 4 CSS si caricano tutti, poi si disabilitano quelli che non servono.

Sull'evento onclick si può associare la chiamata alla funzione JAVASCRIPT loadcss() che in base al parametro passato abiliterà/disabiliterà i CSS del caso.

Caricando prima tutti i CSS la procedura risulta essere molto veloce, naturalmente i CSS non devono essere molto grandi (in dimensioni) altrimenti il caricamento (la prima volta soltanto) della pagina è lento.

Come si naviga il DOM con JAVASCRIPT?

Di seguito mostro una funzione che elimina in maniera ricorsiva tutti i nodi figli a partire da una data radice:

function removeChildrenRecursively(node)
{
   if (!node)
      return;

   while(node.hasChildNodes())
   {
      removeChildrenRecursively(node.firstChild);
    node.removeChild(node.firstChild);
   }
}

Come si accede al contenuto HTML di un nodo?

node.innerHTML

Come si accede al nodo adiacente?

node.nextSibling

Come si visualizza il nome di un nodo?

node.nodeName

Questo comendo ritorna per un input la stringa INPUT, per uno span la stringa SPAN e così via.

Come si rimuove il nodo corrente?

node.parentNode.removeChild(node);

Elementi HTML e Focus

Al caricamento di una pagina si vuole dare il fuoco ad un determinato elemento:
<script type="text/javascript" language="javascript">
    
    </script>
...
<body onload="esci_focus()">
....

Naturalmente, nella pagina deve esserci una form con id "miaform" e con dentro un componente HTML con id "pulsante".

Elementi nascosti in fase di stampa

Consideriamo il seguente problema: si vuole stampare una pagina web mediante il classico pulsante di stampa che invoca l'istruzione javascript window.print(). Quindi si vuole stampare una pagina web mediante la normale stampante collegata al PC.

Così facendo però verranno stampati anche alcuni elementi grafici che non dovrebbero essere stampati, quali pulsanti o altro.

Per fare questo è sufficiente mettere nella pagina web il seguente style:

<STYLE TYPE="text/css" MEDIA="print">.noprint {display: none;}</STYLE>

e poi associare il class="noprint" all'elemento che non deve essere stampato.

Altro utile esempio, si vuole che a video si veda un determinato testo e che in fase di stampa ne sia invece stampato un altro. Si fa così! Nella pagina HTML si mettono i seguenti style:

<STYLE TYPE="text/css" MEDIA="print">
        .myview {
            display: inline;
        }
    </STYLE>
    <STYLE TYPE="text/css" MEDIA="screen">
        .myview {
            display: none;
        }
    </STYLE>

Il class myview contenuto in MEDIA="print" indica che l'elemento deve essere stampato, il class myview contenuto in MEDIA="screen" indica che l'elemento non deve essere visualizzato a video.

Ricordo che <STYLE TYPE="text/css" MEDIA="print"> indica lo stylesheet da usare in fase di stampa, <STYLE TYPE="text/css" MEDIA="screen"> indica quello da usare in fase di visualizzazione in un browser.

Il valore di default è <STYLE TYPE="text/css" MEDIA="all"> che di solito viene omesso e indica che lo stylesheet è lo stesso per tutti i supporti.

Style e cursori

Come modificare l'aspetto del cursore su un oggetto HTML mediante javascript?

Vediamo il seguente esempio:

var input = document.getElementsByTagName("a");
var count = input.length;

for(var i =0; i < count; i++){
    document.getElementsByTagName("a")[i].disabled = enable;
    document.getElementsByTagName("a")[i].style.cursor='wait';
}

Questo esempio imposta l'aspetto del cursore per tutti i link presenti nella pagina. In questo caso l'aspetto del cursore sarà quello di WAIT.

Maggiori info sui vari valori da assegnare al cursore li trovate qui.

Navigare il DOM alla ricerca di tutti i componenti di un dato tipo

Vogliamo eseguire una data operazione su tutti i componenti HTML di un dato tipo.

Ad esempio su tutti i link.

var input = document.getElementsByTagName("a");
var count = input.length;

for(var i =0; i < count; i++){
document.getElementsByTagName("a")[i].disabled = enable;
}

CONTROLLO/CHECK SUL CODICE FISCALE

Vediamo un piccolo controllo sulla correttezza formale del Codice Fiscale Italiano:

Questa espressione regolare tiene conto anche dei Codici Fiscali omocodici.

Per provare e testare le espressioni regolari online, ecco il miglior sito: regex101.com

Per sapere di più sulle omocodie quifinanza.it

Buon Lavoro!