Come spezzare una stringa in javascript (split)

Tramite Javascript è possibile dividere una stringa in modo automatico, dopo aver scelto un carattere o una stringa da usare come marcatore.
Mi spiego meglio, tramite js si può spezzare una stringa (o per meglio dire un testo) quando in essa è presente una determinata parola chiave.

Se ad esempio si vuole dividere una frase ogni volta che c'è una virgola, è possibile utilizzare la funzione javascript split, che per l'appunto consente di splittare la frase dato un determinato punto di riferimento.
Mmm, mi sono spiegato malissimo, vediamo di capire meglio con un esempio pratico di cosa sto parlando.

Come spezzare una stringa in javascript (split)

Per poter dividere una stringa dato un separatore, in javascript bisogna usare la funzione split.
La sintassi della split è la seguente:

stringa.split("parola-chiave");

Vediamo subito un esempio pratico per capire meglio.
Poniamo ad esempio di voler dividere la frase "Ciao come va? Tutto bene" in due a partire dal carattere separatore punto di domanda. Ecco cosa bisognerebbe scrivere in js:

<script type="text/javascript">
var stringa="Ciao come va? Tutto bene";
frase=stringa.split("?");
alert(frase[0]);
alert(frase[1]);
</script>

Il risultato di questo script saranno due alert, uno per frase.
Questo perchè il punto di domanda è presente una volta.

Ci sono però dei casi in cui si splitta una frase senza sapere quante occorrenze ci sono del delimitatore.
In questi casi quindi, occorre modificare il nostro javascript in modo che faccia un alert ogni volta che la funzione split spezza la frase.
Ecco come verrebbe la cosa:

<script type="text/javascript">
var stringa="Frase bella. Frase brutta. Frase carina. Frase non so";
frase=stringa.split(".");
for(i=frase.length; i>0; i--) {alert(frase[i-1])};
</script>

Questo breve script utilizza il ciclo for per ciclare per il numero di occorrenze trovate, individuate contando la lunghezza dell'array generato dalla funzione split.
Come al solito mi sono spiegato male, ma spero che gli esempi siano sufficientemente chiari :)

Ad ogni modo, la funzione split javascript è una funzionalità decisamente comoda per la gestione delle stringhe, basta solo prenderci un attimo la mano e si possono fare molte cose con essa.

Come usare le funzioni in Javascript

Come ogni linguaggio di programmazione che si rispetti, anche il potentissimo javascript ha a disposizione la possibilità di creare funzioni, ovvero delle procedure che consentono di compiere più operazioni in sequenza, per poi restituire uno o più risultati finali.

Una funzione javascript infatti, può o restituire un risultato, oppure compiere direttamente delle operazioni su alcune variabili, che vanno dal calcolo all'elaborazione delle stringhe, o a tutto quello che il js consente di fare.

Vediamo dunque come creare una semplice funzione js.

Come usare le funzioni in Javascript

Ecco subito un esempio di sintassi su come creare una funzione javascript e come fare per richiamarla:

<script type="text/javascript">
var variab=5;
function somma()
{
    variab=variab+5;
    return variab;
}
variab=somma();
alert(variab);
</script>

Lo script sopra indicato utilizza la sintassi function nomefunzione() per definire la funzione js che verrà poi richiamata successivamente.
Nello specifico, questa funzione si occupa di incrementare una variabile precedentemente creata, e di restituirne il nuovo valore.

Una sintassi generale dunque è:

function nome-funzione(parametri)
{
    //operazioni da svolgere
    return risultato;
}

Come si evince da quanto scritto sopra, ad una funzione js si possono passare anche dei parametri, e poi, tramite il comando return, è possibile ottenere il risultato dell'elaborato.

Ecco un esempio di funzione javascript con parametri:

<script type="text/javascript">
function somma(variabile,numero)
{
    variabile=variabile+numero;
    return variabile;
}
var variab=5;
variab=somma(variab,5);
alert(variab);
</script>

Questa funzione dunque, riceve due parametri e restituisce un risultato finale, che poi viene salvato in una variabile e stampato a video tramite alert.

Imparare ad usare le funzioni javascript è ovviamente fondamentale per poter creare script complessi, e soprattutto per riciclare/riutilizzare il codice più volte senza doverlo riscrivere tutto.
Se infatti si crea una funzione, la si può poi richiamare anche 10 volte, senza però dover riscrivere tutto il suo contenuto ogni volta.
Se poi si deve modificare cosa fa una funzione, basta agire in un unico punto.

Riconoscere la posizione geografica visitatore sito (Javascript)

Il concetto di geolocalizzazione al giorno d'oggi è noto a tutti.
Si è partiti con i gps classici, fino ad avere queste funzionalità ormai in tutti i dispositivi mobili.
Se poi si naviga qualche sito internet, capita anche di imbattersi in siti che sono in grado di indivduare l'esatta posizione del visitatore.

Se sei interessato a sapere come riconoscere la posizione di un navigatore sul tuo sito, le coordinate satellitari esatte, continua a leggere questo post.
Grazie ad uno script javascript che ti andrò ad illustrare, che funziona praticamente con tutti i browser più recenti, ti sarà possibile ottenere e mostrare a video le coordinate geografiche del visitatore.
I possibili utilizzi di queste informazioni possono essere infiniti, tutto sta alla tua immaginazione.

Come riconoscere la posizione geografica di un visitatore di un sito web in Javascript

Vediamo subito lo script che consente di effettuare la geolocalizzazione javascript:

<html>
<head>
<title>Geolocalizzazione Javascript</title>
<script type="text/javascript">
function localizza()
{
    var idloc=null;
    localizzaok = function(position)
    {
       alert("Latitudine: "+position.coords.latitude+", Longitudine: "+position.coords.longitude);
       navigator.geolocation.clearWatch(idloc);
    }
    idloc=navigator.geolocation.watchPosition(localizzaok);
}
</script>
</head>
<body>
<a href="javascript:localizza();">Clicca per sapere la tua posizione</a>
</body>
</html>

Copiando ed incollando questo codice in una nuova pagina html, potrai testare con tua mano come funziona la geolocalizzazione html / javascript.

Da notare che, cliccando sul tasto per avviare lo script, il browser ti chiederà il consenso di passare la tua posizione alla pagina web.
Questo perchè è un diritto del visitatore, il voler rimanere anonimo anche per quanto riguarda la propria posizione gps.

Nello specifico comunque, la funzione navigator.geolocation.watchPosition tenta di individuare la posizione del visitatore.
Poi con la funzione navigator.geolocation.clearWatch si blocca la chiamata a questa Geolocation Api che girano intorno al fantastico mondo dell'html5.

Come usare gli Array in Javascript

Come ogni linguaggio di programmazione che si rispetti, anche in javascript esistono gli array.
Un array è una sorta di variabile che può contenere più valori.
Senza ulteriori giri di parole, vediamo subito come funzionano gli array in javascript, come si leggono i dati in esso contenuti, come si cancella un elemento, o come lo si aggiunge... e tante altre funzioni ancora.

Come usare gli Array in Javascript

Per poter creare un array in javascript basta utilizzare questa sintassi:

var nome-array = [elemento1, elemento2, elemento3, ...]; 

Con questa semplice sintassi dunque, è possibile ad esempio creare un array di colori, ovvero una variabile contenente più valori di colori.
Ecco un esempio pratico di come creare e come sfogliare un array javascript:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

Come si può capire facilmente dall'esempio, la sintassi per ricavare la lunghezza di un array javascript è la seguente:

nome-array.length;

E per mostrare tutto il contenuto di un array in un colpo solo come si farà mai?
Semplicissimo, basta richiamare la variabile dell'array senza passargli alcun indice:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
alert(colori);
</script>

Se si vuole aggiungere un elemento ad un array (alla fine della lista), la sintassi da usare è:

nome-array.push("nuovo-elemento");

Ecco un esempio pratico, sempre riferito all'array dei colori:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.push("giallo");
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

Se poi si vuole selezionare solo un elemento di un array conoscendone l'indice, ecco la sintassi da utilizzare:

nome-array[indice];

Ed ecco il solito esempio:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
alert(colori[1]);
</script>

Un altro metodo per creare un array (anche se sconsigliato), è invece quello di utilizzare la funzione new:

var nome-array = new Array("oggetto1","oggetto2","oggetto3",...);

Se poi si vuole avere un array javascript con indici non numerici, bisogna utilizzare questo metodo (non è esattamente corretto quanto appena scritto, ma di fatto il comportamento atteso è proprio questo):

var nome-array = {etichetta1:"valore1",etichetta2:"valore2",etichetta3:"valore3",...};

Ed ecco un esempio pratico di come creare un array con etichetta alfanumerica, e di come pescare un singolo elemento conoscendone il nome dell'indice (l'etichetta:

<script type="text/javascript">
var contatto = {nome:"Roberto",cognome:"Rossi",anni:20};
alert(contatto["nome"]);
</script>

Per ordinare un array alfabeticamente si usa la sintassi nome-array.sort().
Ecco il solito esempio:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.sort();
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

Per ordinare un array in ordine decrescente, basta usare la funzione reverse() al posto della sort.

Se invece si vuole modificare un elemento di un array, basta usare una sintassi alternativa per l'aggiunta degli item degli array, ovvero con:

nome-array[numero-indice] = "nuovo-valore"; 

Con questa sintassi infatti, è possibile sia sostituire un valore già esistente (passandogli l'indice del valore da sostituire), sia aggiungere un nuovo elemento alla fine dell'array (indicando un numero di indice corrispondente al primo indice disponibile... ma occhio a non creare buchi nell'array!).
Ecco un esempio pratico di sostituzione di valore in un array javascript:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori[0] = "viola";  
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

Di solito si usa questa sintassi per aggiungere nuovi elementi ad un array inizializzato come vuoto.
Come inizializzare un array vuoto:

var nome-array=[];

Tra l'altro è possibile utilizzare questa sintassi anche per svuotare un array già esistente.

Se voglio sapere se una variabile è un array oppure un altro tipo, la sintassi da utilizzare è la seguente:

Array.isArray(nome-variabile);

Per rimuovere l'ultimo elemento di un array basta utilizzare invece la sintassi:

nome-array.pop();

Ed ecco l'esempio pratico:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.pop();
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

Se invece si vuole cancellare il primo elemento dell'array, ecco cosa occorre utilizzare:

nome-array.shift();

Mentre per aggiungere un nuovo elemento all'inizio dell'array, si usa la funzione unshift.
Ecco un esempio pratico:

<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.unshift("grigio");
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

Veniamo ora alla potentissima funzione splice, che può essere utilizzata sia per aggiungere elementi in una posizione specifica, sia per rimuovere uno specifico elemento (in qualsiasi posizione esso sia).
La sintassi generale da utilizzare per rimuovere specifici elementi di un array javascript è la seguente:

nome-array.splice(posizione-iniziale, numero-di-posizioni);

Forse è più chiaro con un esempio pratico, in cui si vuole eliminare due elementi a partire dalla seconda posizione:

<script type="text/javascript">
var colori = ["grigio","rosso", "verde", "azzurro", "bianco"];
colori.splice(2, 2);
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

Il risultato a video saranno i colori "grigio, rosso, bianco", in quanto avremo rimosso dall'array i colori "verde, azzurro", che si trovavano proprio nelle posizioni indicate con la splice.

In quest'altro esempio invece, vi mostro come aggiungere due colori dopo la posizione 2 dell'array:

<script type="text/javascript">
var colori = ["grigio","rosso","bianco"];
colori.splice(2,0,"verde","azzurro");
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>

La funzione splice inoltre, può essere utilizzata per dividere un array in due, creando quindi una nuova lista di valori salvata a parte.
Ovviamente con i limiti del caso, dato che è possibile passare solo due coordinate per volta.
Il nuovo array conterrà dunque i valori selezionati con la splice, con una sintassi tipo:

var nuovo-array=vecchio-array.slice(posizione-iniziale, numero-di-posizioni);

Se poi si vuole pescare i valori con la splice da una determinata posizione fino all'ultimo valore dell'array, basta non indicare il secondo parametro, ovvero basta lasciare il numero di posizioni vuoto.

La sintassi da utilizzare per unire due array javascript è invece la seguente:

var nuovo-array= array1.concat(array2);

Ecco un esempio pratico della potentissima funzione contact:

<script type="text/javascript">
var colori = ["grigio","rosso","bianco"];
var colori2 = ["giallo", "marrone"];
var colori3 = colori.concat(colori2);
for(i=0; i<colori3.length; i++) alert(colori3[i]);
</script>

E per gli array js è tutto (o quasi).
Spero che questo mega tutorial vi sia stato utile.
Ovviamente ci sarebbe ancora qualcosina da dire sull'argomento, ma questo è un altro post (cit.)

Come inviare email con Javascript

In html c'è un apposito comando che consente di spedire email da una pagina web, lo stesso esisterà anche in javascript?
La risposta è si, ed in questo post ti spiegherò come usare il mailto javascript, per scrivere in automatico un'email al caricamento di una pagina internet.

Vediamo dunque come utilizzare il javascript per scrivere email, decidendo se compiere questa operazione in automatico al caricamento della pagina, o come azione specifica alla pressione di qualche tasto.

Come inviare inviare email con Javascript

Forse dire "inviare email in automatico con javascript" è un parolone, perchè comunque stiamo utilizzando il comando mailto, che funziona uguale uguale all'html.
Il comando mailto infatti, consente di preconfenzionare un'email e di lanciare il client di posta elettronica dell'utente, il quale dovrà poi fare un semplice click per spedire il tutto.

Vediamo comunque subito un esempio di come comporre un'email con javascript, al caricamento della pagina:

<script type="text/javascript">
window.location.href = "mailto:mail@mailinator.com?subject=titolo&body=testo di prova";
</script>

Incollando questa semplice sintassi all'interno di una pagina html, al caricamento di quest'ultima (o per meglio dire, quando verrà caricato quel codice), il browser aprirà in automatico il client di posta dell'utente, con il box di scrittura email con destinatario, titolo e messaggio precompilati.
L'utente dovrà semplicemente cliccare sul bottone invia per spedire il messaggio.

Ovviamente questo script può essere messo dentro una funzione e lanciato all'occorrenza tramite js.

PS Alcuni browser potrebbero chiedere la conferma all'utente sul fatto che si voglia o meno lanciare in automatico il client di posta configurato sul computer.

PPS Ovviamente questo script per spedire email con javascript funziona solo se sul pc dell'utente visitatore è installato e configurato un client di posta elettronica.

Come fare tutto minuscolo in Javascript

Hai una parola, una frase, un testo lungo, che vuoi convertire tutto in minuscolo con javascript e non sai come fare?
Bene, sei capitato proprio nel post giusto.

In questo breve articolo ti mostrerò la funzione javascript responsabile della conversione delle stringhe in caratteri minuscoli.
Sia che ti trovi davanti ad una stringa scritta interamente in maiuscolo (es. CIAO), sia che questa abbia solo la prima lettera in grande (es. Ciao), o un'alternanza di lettere maiuscole e minuscole (es. CiAo), tramite questo script potrai convertire tutto in minuscolo in un solo colpo.
Vediamo dunque come fare.

Come fare tutto minuscolo in Javascript

Per poter fare il lowercase javascript devi utilizzare un'apposita sintassi, semplice quanto efficace.
Ecco un esempio pratico che converte una frase da maiuscolo in minuscolo con il js:

<script type="text/javascript">
var stringa="Ciao Mondo";
alert(stringa.toLowerCase());
</script>
La funzione toLowerCase(); infatti, viene attaccata a qualsiasi stringa di testo, con la seguente sintassi:
stringa.toLowerCase();

Il risultato sarà un testo tutto scritto in minuscolo, convertito direttamente dal browser con il js.

Non sto a citare i casi in cui possa servire una funzione del genere, anche se spesso si preferisce agire tramite script php o asp.
Quando però si ha a disposizione solo una pagina html, ecco che lcase javascript risolve ogni problema di decapitalizzazione (se così si può dire).

Replace Javascript: come sostituire una parola in una frase

Hai scritto una pagina html ma ti sei accorto di aver commesso un errore di distrazione inserendo il nome di una persona al posto di quello di un altro?
Magari la cosa è ripetuta per molte righe e non sai come rimediare velocemente.

Premesso che questo esempio è decisamente tirato e che forse non è il suo utilizzo più funzionale, quella che però andrò a spiegare in questo post è la replace javascript, ovvero quella funzione che consente di sostituire una o più parole all'interno di una frase.

Vediamo dunque come sostituire una parola dentro un testo, semplicemente utilizzando i poteri conferitici con il sacro javascript.

Come sostituire una parola in una frase usando il replace javascript

Per poter sostituire una parola dentro un testo tramite codice javascript, utilizzare la seguente sintassi:

stringa.replace(paroladasostituire,nuovaparola);

Grazie alla funzione javascript replace infatti, potrai sostituire una parola all'interno di una frase o un testo di qualsiasi lunghezza.
Ti basta infatti mettere il tuo testo dentro una variabile, e utilizzare il sostituisci javascript per cercare e rimpiazzare la parola chiave cercata con un'altra più appropriata.

Ecco un esempio pratico su come sostituire il nome giovanni in tutti i punti in cui viene trovato dentro ad una frase di fantasia:

<script type="text/javascript">
var frase=" ciao giovanni come va? giovanni tutto ok? Giovanni grande!";
parola="giovanni";
nuovaparola="fabio";
alert(frase.replace(parola,nuovaparola));
</script>

Come potrai ben vedere dall'alert a video, questa funzione sostituirà la prima occorrenza trovata della parola giovanni, ma non le successive.

Per sostituire tutte le parole trovate e non solo la prima occorrenza dunque, utilizza questa sintassi:

<script type="text/javascript">
var frase=" ciao giovanni come va? giovanni tutto ok? Giovanni grande!";
parola=/giovanni/g;
nuovaparola="fabio";
alert(frase.replace(parola,nuovaparola));
</script>

Utilizzando infatti la sintassi /paroladasostituire/g, si dirà al browser di sostituire tutte le occorrenze trovate, e non solo la prima.

Un osservatore attento però, avrà notato che c'è ancora un giovanni di troppo, ed è quello scritto con la lettera maiuscola.
Per effettuare un replace javascript case insensitive, ovvero un sostituisci senza tener conto di lettere minuscole e maiuscole, utilizzare questa sintassi:

<script type="text/javascript">
var frase=" ciao giovanni come va? giovanni tutto ok? Giovanni grande!";
parola=/giovanni/gi;
nuovaparola="fabio";
alert(frase.replace(parola,nuovaparola));
</script>

Questa volta infatti, avremo fatto un super replace grazie alla sintassi /paroladasostituire/gi.

Tutto chiaro con la sostituzione delle stringhe col js?
Spero di sì, altrimenti chiedi pure nei commenti :)