Home javascript
Visualizzazione post con etichetta javascript. Mostra tutti i post
Visualizzazione post con etichetta javascript. Mostra tutti i post

giovedì 19 aprile 2018

Creare loader html css al caricamento della pagina

Se il tuo sito internet non è molto prestante, o anche se lo è, può essere una buona idea quella di aggiungere il classico loader, ovvero una sorta di animazione che indica all'utente che la pagina web è in caricamento.
Grazie a questo strumento inoltre, potrai impedire che una persona che ha già cliccato sul classico tasto Invia di un form, non clicchi nuovamente perchè stufo dell'attesa, evitando così l'inserimento di record doppi.

Vediamo dunque come creare un loader html css che parta con una azione specifica dell'utente, che sia il submit di un form o anche il click su un link html.


Come creare un loader html css al caricamento della pagina


Tutto quello di cui abbiamo bisogno per generare il classico loader è in teoria solo un po' di codice html e css.
Tuttavia, nell'esempio che sto per spiegare, la chiamata al loader verrà fatta tramite javascript, e non quindi definita a livello generale come classe nei fogli di stile per tutti i link.

Partiamo dall'animazione css da includere in una pagina html, ecco i fogli di stile che si possono utilizzare per avere l'animazione di un cerchio roteante:

<style>
.guscioloader
{
    font-size: 1.6em;
    color: #1E6FA4;
    font-weight: bold;
    display:none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: #CCCCCC;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    text-align:center;
    align-items:center;
    justify-content:center;
}
.loader
{
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 2s linear infinite;
}
@keyframes spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

Abbiamo un guscio div chiamato guscioloader, che conterrà il nostro loading, come una sorta di layer sfondo colorato semi trasparente che ricopre tutta la pagina con lo scopo di bloccare l'intera pagina web.
Poi abbiamo il loader, che conterrà di fatto l'elemento grafico animato con i keyframes, che in questo caso è una sorta di sfera con bordo azzurro che ruota.

Venendo invece al javascript da utilizzare, c'è la funzione che serve per chiamare il nostro div di caricamento in corso:

<script language="JavaScript">
function loader()
{
    document.getElementById("guscioloader").style.display="flex";
}
</script>

Che in html va richiamato semplicemente così:

<a href="" onclick="loader();">carica la pagina</a>

Oppure nel caso di un form:

<form method="pos\" action="" onsubmit="return loader();">

Quando un utente cliccherà su quel link dunque, apparirà il nostro div loader, che scomparirà non appena la pagina chiamata verrà caricata.

Creare loader html css al caricamento della pagina

Ecco il codice completo di quanto appena illustrato:

<html>
<head>
<title>Loader html</title>
<style>
.guscioloader
{
    font-size: 1.6em;
    color: #1E6FA4;
    font-weight: bold;
    display:none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: #CCCCCC;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    text-align:center;
    align-items:center;
    justify-content:center;
}
.loader
{
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 2s linear infinite;
}
@keyframes spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
<script language="JavaScript">
function loader()
{
    document.getElementById("guscioloader").style.display="flex";
}
</script>
</head>
<body>
<div id="guscioloader" class="guscioloader"><div class="loader"></div><br />&nbsp;Loading...</div>
<a href="" onclick="loader();">carica la pagina</a>
</body>
</html>

Come si può ben vedere da queste righe di codice, è stato possibile creare un'animazione di pagina in caricamento senza l'uso di alcuna immagine, solo grazie al potere dei css... e dell'html... e del javascript :p
Ovviamente questo è solo un esempio, ed è la punta dell'iceberg sull'argomento, dato che con le animazioni html/css è possibile creare qualsiasi tipo di grafica ed effetto speciale da piazzare al caricamento della pagina.

mercoledì 28 marzo 2018

Come creare una select con ricerca (html javascript)

Da purista vecchia scuola mi costa molto fare questo post, ma non sempre riscoprire l'acqua calda paga.
Il tema del giorno infatti riguarda le selectbox html troppo lunghe, quelle chilometriche per intenderci.
Quando infatti ci troviamo davanti ad una select con troppe voci, oltre a risultare difficoltoso scorrere tutti i nominativi, può risultare anche ostico trovare una voce con il vecchio trucco di digitarne le iniziali.

Vediamo quindi come il web di oggi ci consente di fare una ricercare in una select con il javascript, i fogli di stile e l'html.


Come creare una select box con ricerca in html/javascript


Per fare ciò che vi sto per andare a spiegare, un tempo avrei rimboccato le maniche e me la sarei giocata tranquillamente con il sacro js, il semplice html ed i fogli di stile.
Oggi però tutto ciò non serve più, dato che la pappa pronta arriva da una libreria javascript che si chiama select2.

Per poter usare questa libreria si può sia scaricarla in locale e richiamarla, o anche includere direttamente il codice da uno dei siti di servizio di google.
Ecco un esempio di funzionamento del secondo caso, senza dunque dover installare niente sulla propria macchina/sito web in locale:

<!DOCTYPE HTML>
<html>
<head>
<title>Select2 test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="nomi">
<option value="AN">Antonio</option>
<option value="FR">Franco</option>
<option value="CA">Roberto</option>
</select>
<script type="text/javascript">
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
});
</script>
</body>
</html>

Il risultato sarà una cosa del genere:

Come creare una select con ricerca (html javascript)

Avremo così creato una select html con ricerca, ovvero una selectbox con un apposito box di ricerca con cui filtrare le varie option presenti in elenco.

Andando ad analizzare il codice usato, ecco cosa occorre includere per primo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

La prima inclusione riguarda il potentissimo jquery, senza il quale non si può usare la libreria select2 (cosa non propriamente esplicitata nel tutorial del sito di riferimento, e che mi ha fatto perdere un sacco di tempo per capire come mai la mia select non aveva il box di ricerca come nell'esempio online :p).

Poi bisogna creare la select semplicemente definendo una classe riconosciuta da questa libreria, che nel caso delle select singole è la js-example-basic-single.

Infine si usa la funzione ready, che agisce al caricamento completo della pagina, per inizializzare tutte le select in cui viene rilevata la classe indicata.
Il codice usato in questo caso è il seguente:
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
});

Dove ad esempio si può aggiungere l'attributo placeholder e specificare se si vuole consentire il tasto per svuotare la select (allowClear).
Ovviamente ci sono diversi altri attributi inseribili/inizializzabili, ma non sono argomento di questa guida (cit.).

Se si vuole inizializzare la select2 con valori di default già selezionati, basta usare il classico attributo selected (es: <option value="AN" selected>Antonio</option>).

Riporto qui sotto un altro esempio, con il quale è possibile creare select multiple con ricerca:

<select class="js-example-basic-multiple" name="nominativi[]" multiple="multiple">
<option value="AN">Antonio</option>
<option value="FR">Franco</option>
<option value="CA">Roberto</option>
</select>
<script type="text/javascript">
$(document).ready(function()
{
$('.js-example-basic-multiple').select2(
{
placeholder: "Select a state", allowClear: true
});
});
</script>

Select2 multipla

Quello che cambia sostanzialmente da una select singola, è il nome della classe (js-example-basic-multiple) e l'attributo multiple.

Tra l'altro la potentissima select2 consente di includere più select con ricerca in una sola pagina web, senza dover inizializzare ogni singolo oggetto nella ready.
Se ad esempio abbiamo 10 select di tipo singolo e 3 multiselect con ricerca, la parte del js potrebbe essere banalmente:
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
$('.js-example-basic-multiple').select2(
{
placeholder: "Select a state", allowClear: true
});
});

La libreria javascript select2 è molto potente e completa, infatti è anche possibile gestire select di tag, dove è anche possibile aggiungere le option tags mancanti dopo averle scritte nel box di ricerca.
Ecco un codice d'esempio:
<select class="js-example-tags" name="nominativi[]" multiple="multiple">
<option value="AN">Antonio</option>
<option value="FR" selected="selected">Franco</option>
<option value="CA">Roberto</option>
</select>
$(".js-example-tags").select2({
  tags: true
});

In questo caso quindi, quando si cerca una opzione che non esiste, cliccandoci sopra questa viene aggiunta alla select come nuova option, generando di fatto una select dinamica html.

Infine occorre precisare che è ovviamente possibile personalizzare la grafica delle select generate, usando i css.
La classe principale di riferimento è la .select2.
Avendo infatti scoperto che questa libreria stranamente di default non è responsive, sono andato a metterci una pezza modificando la classe css principale, con qualcosa del genere:
.select2 {max-width:100%;}

Bene, è tutto.
Le potenzialità della potentissima select2 sono davvero molte, ma la sua vera forza è sicuramente la semplicità e la rapidità d'utilizzo.
Per maggiori info ed eventuali download vi rimando al sito ufficiale.

lunedì 5 febbraio 2018

Leggi il post

Come fare un Alert Temporizzato Javascript

Ti è mai capitato di voler far apparire sullo schermo del visitatore del tuo sito internet, un messaggio temporizzato dopo tot secondi dall'apertura della pagina navigata?
Se la tua esigenza è proprio questa, che sia un alert, un'immagine, un box, un testo, o altro, con il javascrit è ovviamente possibile programmare l'apparizione di specifici elementi della pagina html.
Vediamo subito come fare.


Come fare un Alert Temporizzato in Javascript


Per poter programmare l'apertura di un alert javascript, basta utilizzare questa semplice sintassi:

setTimeout(function(){alert("Ciao, sono passati 5 secondi");},5000);

Con questa semplice riga di codice infatti, piazzata nell'head della pagina html, dentro l'apposito tag script, sarà possibile lanciare un messaggio alert di testo, dopo tot secondi dal caricamento della pagina.

Ecco l'intero codice html/javascript da utilizzare, nel caso tu voglia provare direttamente la cosa senza scrivere alcuna riga di codice:

<html>
<head>
<title>Alert</title>
<script type="text/javascript">
setTimeout(function(){alert("Ciao, sono passati 5 secondi");},5000);
</script>
</head>
<body>
Aspetta 5 secondi
</body>
</html>

Ed ecco fatto, dopo appena 5 secondi la pagina web mostrerà al navigatore un bel messaggio alert javascript.

Come specificato ad inizio post, usando questa logica è ovviamente possibile far apparire a video qualsiasi tipo di elemento.
Il mio consiglio è quello di preparare dei div con al loro interno il contenuto da mostrare, e di farli apparire al momento giusto usando la sintassi spiegata in questo post.

lunedì 15 gennaio 2018

Effetto terremoto javascript

Oggi vi propongo un breve script javascript che consente di creare un effetto terremoto sulle vostre pagine web.
Il suddetto codice, da inserire in una pagina html, consente di ottenere l'effetto tremolio su uno specifico elemento, ad esempio un box div.
Vediamo subito come fare.


Come ottenere l'effetto terremoto in  Javascript


Per poter far tremare un box html al click del mouse, basta creare una pagina html inserendo il suddetto codice:

<html>
<head>
<title>Effetto terremoto</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#box
{
width: 200px;
height: 200px;
background: #ff0ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="box">box</div>
<script>
$( document ).click(function() {
$("#box").effect("shake");
});
</script>
</body>
</html>

Senza bisogno quindi di copiare alcuna libreria sul vostro server, ma semplicemente usando la sacra scuola jquery, inglobabile in remoto, potrete ottenere l'effetto terremoto al click del mouse, tramite la proprietà js shake, della suddetta libreria.

Per vedere questo script all'opera, ho girato per voi un mini video, che linko ed inglobo qui sotto:
https://youtu.be/tubwX6sONkc



Fine breve tutorial javascript.
Ovviamente questo effetto potrebbe essere applicato anche ad altri elementi html, ed anche partire in automatico al caricamento della pagina.

martedì 9 gennaio 2018

Leggi il post

Controllo radio button form Javascript

Se in una pagina html hai un form con all'interno dei radio button, potresti voler controllare che almeno uno dei valori indicati a video, sia stato selezionato.
Per fortuna quindi, con il jascript è possibile controllare i radiobutton presenti nelle form, in modo tale da verificare che sia avvenuto almeno un check.


Come controllare se almeno un elemento di una radio button è stato selezionato tramite javascript


Ecco un semplice esempio da copincollare in una file da chiamare radio.html.

<html>
<head>
<title>Controllo Radio button Javascript</title>
<script type="text/javascript">
function controlla()
{
var almenouno=false;
for(i=0;i<document.theform.colori.length;i++)
{
if(document.theform.colori[i].checked)
{
almenouno=true;
break;
}
}
if(!almenouno)
{
alert("Attenzione, selezionare un colore");
return false;
}
}
</script>
</head>
<body>
<form method="post" action="radio.html" name="theform" onsubmit="return controlla();">
<input type="radio" name="colori" value="rosso" />Rosso<br />
<input type="radio" name="colori" value="verde" />Verde<br />
<input type="radio" name="colori" value="bianco" />Bianco<br />
<input type="submit" value="Invia">
</form>
</body>
</html>

Quello che fa questo script è molto semplice: cicla tutti gli elementi presenti in una lista di tipo radio button, e tramite la funzione checked ne verifica la selezione.
Se trova che un elemento è stato ceccato, allora esce subito dal ciclo for tramite l'istruzione break, altrimenti, se alla fine del giro non ha trovato alcun elemento selezionato, blocca l'invio del form con un bel return false.

Sapere usare il controllo javascript radio button è decisamente una cosa utile nel caso si utilizzino delle form html dove i radio non sono selezionati di default.

mercoledì 15 novembre 2017

Leggi il post

Nascondere / mostrare un oggetto in Javascript

Con il sacro javascript si possono fare molte cose, e questo è un fatto.
Una delle cose più interessanti però, è quella di far sparire oggetti in una pagina web, o di farli apparire, semplicemente con il click del mouse.

Vediamo quindi come nascondere un oggetto in javascritp, e come farlo riapparire, con la sola imposizione del mouse (cit.).


Come nascondere / mostrare un oggetto in Javascript


Fino ad ora ho parlato al singolare, ma ovviamente è possibile anche far sparire più elementi tramite js.
Infatti, il mio consiglio è quello di inserire questi elementi all'interno di un div o di uno span, in modo tale da poter nascondere in un colpo solo più righe di codice html (o per meglio dire, il loro risultato a video viene nascosto).

Altra premessa, in questo breve tutorial spiegherò si una tecnica javascript, ma anche la sintassi css da utilizzare per compiere queste operazioni html con i fogli di stile.

Dopo tutte queste premesse, ecco il codice d'esempio che consente di nascondere un div con il javascript:

<html>
<head>
<title>Nascondere / mostrare div con javascript e css</title>
</head>
<body>
<div id="mostrato" style="display:inline;">(<a href="javascript:void(0);" onclick="document.getElementById('nascosto').style.display='inline';document.getElementById('mostrato').style.display='none';">+</a>)</div>
<div id="nascosto" style="display:none;">Contenuto div nascosto (<a href="javascript:void(0);" onclick="document.getElementById('mostrato').style.display='inline';document.getElementById('nascosto').style.display='none';">-</a>)</div>
</body>
</html>

Se copi ed incolli questo codice html in un file di testo e poi lo rinomini come prova.html e lo lanci con il browser, potrai vederne il suo funzionamento.

Praticamente, grazie alla funzione getElementById si ricava l'id dell'elemento da nascondere/mostrare, poi tramite la proprietà style.diplay, gli si dice di nasconderlo (none) o mostrarlo (inline, block, ecc...).

Quindi ricapitolando, per nascondere un div in javascript si può scrivere:

document.getElementById('id-div').style.display='none';

Invece per mostrare un div nascosto in js, si può scrivere:

document.getElementById('id-div').style.display='inline';

Ovviamente occorre dare un id all'elemento contenitore da mostrare/nascondere, e passare il giusto id alla funzione js che cambia lo stile a suddetto oggetto.
Spero di essere stato abbastanza chiaro, in caso contrario... vai di commenti :)

martedì 22 agosto 2017

Leggi il post

Trascinare un oggetto in Javascript (Drag & Drop)

Con javascript e l'html5 è possibile anche trascinare oggetti in modo da creare pagine interattive.
E' infatti possibile creare degli elementi catturabili con il mouse e trascinabili in specifici punti dello schermo, raggiunti i quali è possibile generare poi diverse azioni.

Ad esempio, imparando ad usare bene queste funzionalità, unite al potentissimo ajax, è anche possibile creare dei software per l'assegnazione dei posti (es per la gestione degli eventi).
Se ad esempio hai una sala con diverse file e posti, potresti crearti una sorta di video piantina con i div html, ed utilizzare una lista di nomi trascinabili sui vari posti a sedere.
Lasciando poi un nominativo con il mouse nel rispettivo posto, potrai far scatenare una chiamata ad uno script php o asp, in modo tale che il posto assegnato a video venga anche salvato nel database.

Non so se sono riuscito a spiegare bene le potenzialità del drag & drop javascript, comunque vediamo subito un po' di codice.


Come trascinare un oggetto in Javascript con il Drag & Drop


Ecco un esempio di codice script utilizzabile per poter compiere questa di trascinamento oggetti su schermo in una pagina web:

<html>
<head>
    <title>Drag & Drop Javascript</title>
    <script>
    function dropattivo(evento)
    {
        evento.preventDefault();
    }
    function drag(evento)
    {
        evento.dataTransfer.setData("text", evento.target.id);
    }
    function drop(evento)
    {
        evento.preventDefault();
        var data = evento.dataTransfer.getData("text");
        evento.target.appendChild(document.getElementById(data));
    }
    </script>
</head>
<body>
<div id="destinazione" ondrop="drop(event)" ondragover="dropattivo(event)" style="width:400px;background:#FF0000;">&nbsp;</div>
<span id="datrascinare" draggable="true" ondragstart="drag(event)">Trascinami</span>
</body>
</html>
 
Copia ed incolla tutto il codice in una pagina html vuota e prova ad eseguire la pagina con un browser.
Potrai trascinare la scritta nel box rosso e lasciarla posizionata lì.

Le nozioni base da imparare sono:
draggable="true"
Attributo da mettere a tutti gli oggetti da trascinare.

E poi le rispettive funzioni javascript che gestiscono l'evento, da mettere sia sull'oggetto da trascinare, che sull'elemento di destinazione.
Penso che lo script si spieghi da solo e non necessiti di ulteriori spiegazioni, ma nel caso chiedete pure nei commenti.

Come dicevo poco sopra, con questo metodo del javascript trascina oggetti si apre un mondo, ed è possibile sviluppare applicazioni interattive che vanno da software web elaborati, ad anche videogiochi in html.

martedì 15 agosto 2017

Leggi il post

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.

lunedì 31 luglio 2017

Leggi il post

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.

giovedì 27 luglio 2017

Leggi il post

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.

mercoledì 26 luglio 2017

Leggi il post

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.)

mercoledì 19 luglio 2017

Leggi il post

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.

martedì 18 luglio 2017

Leggi il post

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).

venerdì 14 luglio 2017

Leggi il post

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 :)
Leggi il post

Come estrapolare parte di una frase in Javascript

Tra le varie funzioni sulle stringe disponibili nel potentissimo linguaggio per il web Javascript, c'è quella chiamata substring.

Se provieni da altri linguaggi di programmazione probabilmente già conoscerai questa funzione, o quantomeno l'avrai già sentita nominare.
Nel caso però tu non sappia a cosa serve, eccoti servito: la funzione javascritp substring consente di estrapolare parti di una testo.

Mi spiego meglio.
Se vuoi prendere solo le prime cinque lettere di una parola, puoi farlo con la funzione substring.
Lo stesso se vuoi ottenere solo le ultime due lettere, oppure le tre lettere centrali.
Ma vediamo più nel dettaglio come funziona questa funzione (gioco di parole).


Come estrapolare parte di una frase in Javascript


Ecco la sintassi ufficiale da utilizzare per la funzione substring javascript:

stringa.substring(posizione);
stringa.substring(posizione,lunghezza);

In buona sostanza, si applica la funzione substring ad una variabile che contiene una parola, un testo, una frase (una stringa insomma), e gli si dice da che posizione numerica partire a mostrare il testo.
Se invece si vuole indicare un range entro il quale mostrare il testo, basta indicare la posizione di partenza (zero se si vuol partire dall'inizio della frase) e la lunghezza.

Ecco un paio di esempi pratici della funzione substring di javascript.

Alert a video dalla terza lettera della frase:

<script type="text/javascript">
var frase = "Ciao mondo";
alert(frase.substring(2));
</script>

Alert a video dalla posizione 2 alla posizione 3 (range di una sola lettera insomma):

<script type="text/javascript">
var frase = "Ciao mondo";
alert(frase.substring(2,3));
</script>

E se ad esempio volessimo stampare a video solo la parola mondo presente nella frase "ciao mondo bello"?
Bisogna prima individuare la posizione della parola con la funzione indexof, poi ricavare la sua lunghezza con la funzione length, infine sottrarre questo valore alla lunghezza complessiva della frase, così:

<script type="text/javascript">
var frase="Ciao mondo bello";
var parola="mondo";
alert(frase.substring(frase.indexOf(parola),(frase.length-parola.length)));
</script>

Facile, no? :)
Buona estrapolazione con il js

giovedì 13 luglio 2017

Leggi il post

Trovare posizione parola dentro frase (Javascript)

Sempre sul tema funzioni sulle stringhe con javascript, oggi vi parlerò della famosa funzione che consente di individuare la posizione di una parola all'interno di una frase.

I motivi per il quale possa interessare conoscere la posizione numerica di una lettera, una parola o una frase, all'interno di un testo più ampio, possono essere molteplici.
Si va dal replace di uno specifico termine, all'estrapolazione di specifici parti di testo all'interno di una frase.

Vediamo dunque come ottenere questo semplice numero con il js.


Come trovare la posizione di una parola dentro una frase con il Javascript


La sintassi da utilizzare per ottenere il numero esatto corrispondente alla posizione di una stringa all'interno di un testo, è la seguente:

frase.indexOf(parola);

La funzione javascript indexof infatti, restituisce il numero corrispondente a la prima occorrenza della stringa cercata.

Esempio pratico di come trovare la posizione della parola gionni dentro la frase "ciao gionni il bello":

<script type="text/javascript">
var frase="Ciao gionni il bello";
var parola="gionni";
alert(frase.indexOf(parola));
</script>

Attenzione però, indexof è case sensitive, ovvero è sensibile alle minuscole ed alle maiuscole.
Infatti, se si prova questo script:

<script type="text/javascript">
var frase="Ciao gionni il bello";
var parola="Gionni";
alert(frase.indexOf(parola));
</script>

il risultato è -1, che equivale a "parola non trovata".

E se invece volessimo trovare la posizione dell'ultima occorrenza di una parola ripetuta in una frase?
Semplice, basta utilizzare questa sintassi:

<script type="text/javascript">
var frase="Ciao gionni il bello ciao gionni ciao";
var parola="gionni";
alert(frase.lastIndexOf(parola));
</script>

La funzione javascript lastIndexOf infatti, restituisce il numero della posizione dell'ultima parola trovata.
Alternativa molto utile quando si hanno più parole chiave ripetute e si vuole pescare solo l'ultima.

mercoledì 12 luglio 2017

Leggi il post

Contare lunghezza testo in Javascript

Hai un testo in una pagina html e vorresti sapere quanto è lungo?
Poter contare i caratteri presenti in una frase o in un testo non è mai stato così facile grazie al sacro javascript.

Vediamo come compiere questa semplice operazione col js, e con che funzione farlo.
Saper contare la lunghezza di un testo in javascript può tornare sempre utile, e sicuramente prima o poi ti capiterà di doverlo fare, quindi tanto vale imparare subito come farlo, ti bastano davvero 5 minuti del tuo tempo.


Contare lunghezza testo in Javascript


Per poter misurare la lunghezza di una stringa con javascript, il metodo migliore è quello di memorizzare prima il testo in una variabile, e poi utilizzare un'apposita funzione che dice quanto è lungo il testo contenuto in una variabile.

Qui di seguito la sintassi da utilizzare, in un semplice esempio:

 <script type="text/javascript">
var testo="quanto è lunga questa frase?";
alert(testo.length);
</script>

La funzione javascript length infatti, serve per ricavare la lunghezza di una stringa.
La sintassi ufficiale è:
nomevariabile.length

Bene, ed anche per questa lezione js è tutto.
Ora sai come calcolare la lunghezza di una stringa in javascript, fanne buon uso.
Buon coding :)

martedì 11 luglio 2017

Leggi il post

GetURL Javascript: ricavare indirizzo pagina

Tra le varie cose che si possono fare tramite l'utilizzo del javascript, c'è anche la possibilità ricavare l'indirizzo di una pagina web.
Con questo intendo dire che, tramite l'ausilio di un apposito script, è possibile ottenere in una variabile, l'url della pagina corrente, ovvero la pagina internet dove risiede il javascript stesso.

Detta così non sembra una cosa poco utile, lo so.
Ma immaginiamo il caso in cui si vogliano passare parametri tramite tramite url per poi intercettarli in una pagina web che non ha a disposizione alcun linguaggio di scripting (es. php, asp), come si potrebbe fare?
Semplice, con il javascript e la funzionalità che andrò ad illustrare a breve. Sarà infatti possibile ricavare l'intero indirizzo di una pagina web, compresa di parametri passati con il metodo GET, ovvero via url.


Come ricavare l'indirizzo completo di una pagina con il Javascript (GetURL)


Ho usato il termine GetUrl per venire in contro a chi proviene da altri linguaggi per il web, ma la funzione per poter ricavare l'url di una pagina tramite javascript è la seguente:

<script type="text/javascript">
alert(window.location.href);
</script>

Utilizzando infatti window.location.href, potremo stampare a video l'intero indirizzo web della pagina html che contiene il nostro javascript.

Se poi vogliamo ricavare i parametri passati nell'url, le variabili insomma, ci basterà salvare il risultato dentro una variabile e parsare il tutto.
Ad esempio, se volessi avere un alert per tutte le variabili passate via url, comprese di valore, potrei fare uno script del genere:

<script type="text/javascript">
indirizzo=window.location.href;
par=indirizzo.substring(indirizzo.indexOf("?")+1);
parametri=par.split("&");
for(i=parametri.length;i>0;i--)
{
    variabili=parametri[i-1].split("=");
    alert("Variabile "+variabili[0]+"="+variabili[1]);
}
</script>

Dove nell'url potreste fare una prova scrivendo una cosa del genere
pagina.html?var1=4&var2=23&var3=cc

E per il js di oggi è tutto, buon coding :)

lunedì 3 luglio 2017

Leggi il post

Come usare il ciclo WHILE in Javascript

A differenza del ciclo for, il ciclo while in javascript è un loop potenzialmente infinito, all'inizio del quale viene indicata la condizione affinchè continui a girare.
Se quindi un ciclo for viene inizializzato tramite una variabile che viene incrementata o decrementata fino a raggiungere un determinato parametro, il ciclo while invece, non si ferma fino a che non viene raggiunta la condizione specificata all'inizio.
Eventuali incrementazioni e variazioni di parametri della variabile specificata nella condizione iniziale, vengono infatti specificati all'interno del loop stesso.

Vediamo dunque come funziona questo famoso ciclo del javascript.


Come usare il ciclo WHILE in Javascript


Ecco la sintassi javascript da usare per poter utilizzare un ciclo while:

while (condizione) 
{
    // istruzioni da eseguire
}

Vediamo subito un esempio pratico:

<script type="text/javascript">
i=0;
while (i<5)
{
    i++;
    alert(i);
}
</script>

Lo script sopra indicato, valorizza una variabile chiamata i ad 1, poi inizia un loop while javascript fino a che questa variabile, che ad ogni giro viene incrementata di 1, non raggiunge il valore di 5.

Ma come si fa per interrompere un ciclo while con il javascript?
Semplice, ancora una volta con la potentissima istruzione:
break;

Ecco un esempio pratico su come uscire da un ciclo while:
<script type="text/javascript">
i=0;
while (i<5)
{
    i++;
    alert(i);
    if(i==3) break;
}
</script>

E con il while js è tutto.
Leggi il post

Come fare un ciclo FOR in Javascript

Breve lezione su come fare un ciclo for in javascript, il linguaggio di programmazione per il web.
Saper usare i cicli è sicuramente una nozione basilare da dover imparare per poter sviluppare pagine internet interattive.

Vediamo dunque come utilizzare il javascript per creare un loop con durata prestabilita da noi, ed anche come interrompere prima un ciclo.


Come fare un ciclo FOR in Javascript


Per poter utilizzare i cicli in javascript, ed in particolare il ciclo for, basta utilizzare la seguente sintassi:

for (i=numero; i<numero; i++)
{
    // istruzioni da eseguire;
}

Dove i è una variabile a cui viene associato un numero iniziale, che poi andrà valorizzata in automatico di un unità ad ogni giro del ciclo, fino al compimento della condizione, che in questo caso equivale al controllo che la variabile i sia minore di uno specifico numero.

Ecco un esempio funzionante per farvi capire come funziona il ciclo for in javascript:

<script type="text/javascript">
for (i=1; i<=10; i++)
{
   alert(i);
}
</script>

Mettendo questo breve script in una pagina html ed aprendola, riceverete 10 alert a video, che vanno da 1 a 10.

E se volessimo uscire da un ciclo for prima della sua fine?
Semplice, o si forza la valorizzazione della variabile i al valore massimo consentito dal ciclo, magari al raggiungimento di un'altra condizione, così:
if(condizione2=='soddisfatta') i=10;

Oppure, si può utilizzare il comando:
break;

Ecco un esempio pratico in cui faccio uscire dal ciclo dopo l'alert numero 5:

<script type="text/javascript">
for (i=1; i<=10; i++)
{
   alert(i);
   if(i==5) break;
}
</script>

E con i cicli for javascript, passo e chiudo!
Iscriviti a: Post (Atom)