Per voi un nuovo articolo sulla programmazione e realizzazione di web application. Questa volta realizzeremo una semplice progress bar con il linguaggio Javascript inserito in una pagina web.
Abbiamo visto che tante applicazioni scritte per il web sono da tempo approdate anche nelle reti locali. La necessità di realizzare procedure sempre più complesse è giustificata dalla vasta platea di utenti e di software per la gestione. Prima di iniziare, spesso diamo per scontato che chi si imbatte in queste pagine sia gia al corrente degli strumenti minimi per poter effettuare delle prove di codice. A tale proposito ricordiamo che per provare queste semplici righe di codice sono necessari i seguenti strumenti software:
- Browser che utilizzate per navigare (Firefox, Chrome, Opera, Safati, … fate voi)
- Editor per la scrittura del codice (ad esempio Sublime Text)
- Web Server installato in locale (ad esempio XAMPP) o servizio web con file da salvare con l’FTP
Indice
Creazione della progress bar
Innanzitutto riserviamo nella nostra pagina web lo spazio necessario per la nostra progress bar:
<div id="avanzamento"> <div id="progressbar"></div> </div>
Successivamente definiamo lo stile della nostra progress bar:
<style>
#avanzamento {
width: 100%;
background-color: #cecece;
}
#progressbar {
width: 1%;
height: 30px;
background-color: #2CAA50;
}
</style>
La funzione Javascript per gestire l’avanzamento della Progress Bar
Eccoci al vero e proprio nucleo per la gestione dell’avanzamento della Progress Bar:
<script>
var i = 0;
function avanzamento_progressbar() {
if (i == 0) {
i = 1;
var elem = document.getElementById("progressbar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
</script>
Infine attiviamo la funzione avanzamento_prograssbar alla pressione di un tasto gestendo l’evento click di un elemento button dell’HTML:
<button onclick="avanzamento_progressbar()">Start</button>
Lo script completo per realizzare la Progress Bar con Javascript
Eccovi la pagina completa per le vostre prove e da inserire nelle vostre applicazioni per il web:
<!DOCTYPE html>
<html>
<style>
#avanzamento {
width: 100%;
background-color: #ddd;
}
#progressbar {
width: 1%;
height: 30px;
background-color: #2CAA50;
}
</style>
<body>
<h5>Un esempio di Progress Bar con JavaScript</h5>
<div id="avanzamento">
<div id="progressbar"></div>
</div>
<br>
<button onclick="avanzamento_progressbar()">Click Me</button>
<script>
var i = 0;
function avanzamento_progressbar() {
if (i == 0) {
i = 1;
var elem = document.getElementById("progressbar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
</script>
</body>
</html>
Verifica del codice
Non potevamo non inserire per il test queste righe di codice nel nostro articolo:
Un esempio di Progress Bar con JavaScript
Conclusioni
Abbiamo visto in questo articolo il codice per la realizzazione di una semplice progress bar con Javascript. E altresì utile ricordare che in questo Blog abbiamo inserito tutta una sezione riservata al linguaggio di programmazione Javascript e agli esempi di codice. Vi invitiamo quindi a visitare questa sezione del sito.