Realizziamo in quest’articolo una semplice calcolatrice con JavaScript, per spiegare ancora il metodo getElementById().
Anche questo è un semplice esercizio proposto a scopo didattico, in seguito svilupperemo lo stesso esercizio utilizzando jQuery.
Sviluppo di una calcolatrice con JavaScript
Il semplice esempio di calcolatrice che realizzeremo oggi utilizza HTML, CSS e anche JavaScript.
Ecco dunque l’esempio.
Inserite i numeri e le operazioni cliccando sui tasti e infine cliccate sul tasto uguale (=) per avere il risultato dell’operazione. Adesso potete continuare ad operare sul numero ottenuto oppure, se volete cancellare tutto il contenuto del display, cliccate sul pulsante C.
Innanzitutto creiamo il codice HTML per inserire i tasti da 0 a 9, poi inseriamo i pulsanti per le operazioni matematiche, il tasto per la virgola, il tasto C e infine il tasto uguale. Inseriamo anche il display in alto.
Utilizzeremo quindi i tag div, i tag input e il tag button, a cui assegneremo opportune classi, per formattare la nostra calcolatrice con JavaScript, come da esempio mostrato sopra.
Notiamo inoltre che, all’evento onclick per i tasti, abbiamo inserito n(this.id), in questo modo infatti recuperiamo in automatico l’id che è dichiarato in ciascun input. Mentre all’evento onclick di button assegniamo la funzione operazione() che creeremo in JavaScript.
Chiaramente potete personalizzare con la formattazione desiderata la vostra calcolatrice con JavaScript.
Infine implementiamo il codice JavaScript.
Il codice è veramente molto semplice. Realizziamo la funzione n(dato) che di volta in volta prende i dati inseriti cliccando sui tasti in quanto utilizza il metodo getElementById().
Poi realizziamo la funzione che compie le operazioni utilizzando l’istruzione eval che restituirà il risultato della nostra operazione.
Infine realizziamo la funzione che semplicemente cancella il display.
function n(dato){
document.getElementById("operazioni").value += dato;
}
function operazione() {
document.getElementById("operazioni").value = eval(document.getElementById("operazioni").value);
}
function cancella() {
document.getElementById("operazioni").value = "";
}
Come vi dicevo questo è un semplice metodo per creare una calcolatrice con JavaScript, potete trovare tante altre soluzioni.
Creiamo in quest’articolo una semplice galleria di immagini con JavaScript e HTML, utilizzando gli array spiegati nella precedente lezione.
Per il momento non utilizzeremo jQuery, più avanti vedremo un esempio di una galleria di immagini con l’uso di questa libreria.
Esempio di galleria di immagini con JavaScript e HTML
L’esempio realizzato prende delle immagini da una cartella e le visualizza una alla volta, specificando anche il nome delle immagini. Con i pulsanti indietro ed avanti si scorrono tutte le immagini che si vuole utilizzare per la realizzazione di questa gallery.
Di seguito una demo della galleria di immagini con JavaScript ed HTML necessario che ho realizzato:
angoli.jpg
Procedimento
Per realizzare la galleria di immagini con JavaScript ed HTML, devo inserire innanzitutto il tag img, dove, nella proprietà src, specifico il percorso delle immagini. Inoltre dò anche un id al tag, in modo tale da richiamarlo successivamente in JavaScript.
Per avere tutto ordinato creo una cartella di nome img dove vado ad inserire tutte le immagini.
Inserisco poi, subito sotto, il div che conterrà il nome dell'immagine e poi i pulsanti avanti e indietro per scorrere queste immagini.
Adesso inserisco il codice per la creazione della galleria di immagini con JavaScript. Creo innanzitutto un array foto e inserisco ad esempio 6 foto, per il momento una alla volta.
Dopo creo le funzioni per i pulsanti avanti e indietro.
Il pulsante avanti andrà avanti finché il valore della variabile i non raggiungerà la lunghezza dell'array, dopo inizierà nuovamente dalla prima foto.
Quindi, con questa istruzione: document.getElementById("image").src=foto[i]; inseriremo l'immagine giusta nel percorso src del tag img.
Liberiamo il nome dal percorso img/ utilizzando il metodo split(), in modo tale da dividere la stringa in base al separatore /. Stamperemo così solo il nome dell'immagine.
Lo stesso discorso per il pulsante indietro.
Allego lo script completo che solo per comodità inseriamo nella stessa pagina, ricordiamo infatti che sarebbe opportuno creare uno script a parte.
let foto = new Array();
let str;
const foto[0]="img/angoli.jpg";
const foto[1]="img/equazioni.jpg";
const foto[2]="img/frazioni.jpg";
const foto[3]="img/calcolatrice.jpg";
const foto[4]="img/annobisestile.jpg";
const foto[5]="img/palindroma.jpg";
let i = 0;
function avanti(){
if (i < foto.length-1)
i++;
else
i=0;
document.getElementById("image").src = foto[i];
str = foto[i].split('/');
document.getElementById("titolo").innerHTML = str[6];
}
function indietro(){
if (i == 0)
i = foto.length-1
else
i--;
str = foto[i].split('/');
document.getElementById("titolo").innerHTML = str[6];
document.getElementById("image").src = foto[i];
}
Chiaramente questo è solo un esempio di possibile creazione di una galleria di immagini con JavaScript ed HTML.
Un array in JavaScript è uno strumento utile a memorizzare più dati anche di tipo diverso.
JavaScript, infatti, come altri linguaggi di programmazione, permette la creazione e la gestione degli array.
Ci sono vari modi per definire un array in JavaScript, in questo tutorial li analizzeremo tutti e vedremo quale risulta più congeniale.
Definizione di array in JavaScript
Come prima cosa studiamo i metodi per definire un array vuoto.
Primo metodo
Il primo metodo che analizziamo per definire un array vuoto è l’utilizzo dell’oggetto Array().
Questo metodo segue la seguente sintassi:
var foto = new Array();
Dunque la variabile foto è un array definito utilizzando il costruttore new.
Si sfrutta così l’oggetto Array().
Secondo metodo
Si può anche non utilizzare il costruttore new per creare un array vuoto, quindi si può anche semplicemente scrivere:
var foto = [];
Inserimento dei dati in un array in JavaScript
Possiamo inserire i dati in un array con più metodi.
Primo metodo
Seguendo il primo metodo possiamo assegnare gli elementi direttamente all’interno delle parentesi tonde dell’oggetto Array().
var foto = new Array(“img1.jpg”,”img2.jpg”,…);
Secondo metodo
Il secondo metodo è quello più utilizzato quando dobbiamo inizializzare un array con degli elementi predefiniti e permette di inserire ciascun elemento separato da virgola:
var foto = [“img1.jpg”, “img2.jpg”, …];
In alternativa si può creare un array vuoto e dopo assegnare gli elementi:
var foto = [];
foto[0]=”img1.jpg”;
foto[1]=”img2.jpg”;
Lettura di dati di un array in JavaScript
Adesso vediamo come leggere i dati da un array.
Popolare un array con i giorni della settimana e stampare tutti gli elementi.
In questa lezione vedremo come stampare gli elementi senza l’utilizzo del ciclo for e della proprietà length, oggetto delle prossime lezioni.
Dunque inseriamo i giorni della settimana in un array di nome giorni.
var giorni = [“lunedì”, “martedì”, “mercoledì”, “giovedì”, “venerdì”, “sabato”, “domenica”];
Dopo considerando che il primo elemento ha indice 0 e gli altri a seguire hanno un indice crescente stampiamo ciascun elemento semplicemente in questo modo:
console.log(giorni[0]); ....
Ecco dunque lo script completo:
var giorni = ["lunedì", "martedì","mercoledì", "giovedì", "venerdì", "sabato", "domenica"];
console.log(giorni[0]);
console.log(giorni[1]);
console.log(giorni[2]);
console.log(giorni[3]);
console.log(giorni[4]);
console.log(giorni[5]);
console.log(giorni[6]);
Chiaramente si può utilizzare un ciclo per leggere tutto l’array, ma lo analizzeremo nelle prossime lezioni.
In questa lezione abbiamo studiato dei semplicissimi esempi di array in JavaScript, nelle prossime lezione studieremo i vari metodi necessari per compiere alcune operazioni.
Oggi vedremo come validare un form in JavaScript, ovvero garantire prima dell’invio dei dati che l’utente abbia immesso dei dati validi o quantomeno ‘abbastanza validi’.
Ecco come dovrà essere l’esempio del form in JavaScript. Provate ad inserire i dati e cliccate sul pulsante invia.
Esempio di possibile risoluzione: validare un form in JavaScript
Utilizzeremo un metodo a scopo didattico molto semplice, in quanto successivamente, quando impareremo ad utilizzare le Ajax, svilupperemo un metodo molto più funzionale.
Inoltre in questo esempio, per validare un form in JavaScript, potremmo utilizzare il metodo getElementById(), come abbiamo utilizzato negli esempi precedenti, ma vi mostro un altro modo per recuperare i dati dai campi di input.
Form in html
Per creare il nostro esempio, su come validare un form in JavaScript, innanzitutto dobbiamo creare il nostro form in html, come abbiamo già fatto nell’articolo sui form html.
Diamo al form il nome di invio per poi poterlo richiamare.
Inseriamo i vari campi di input con le relative etichette e infine il pulsante per inviare i dati su cui inseriremo l’evento onclick:
Adesso dobbiamo costruire la nostra funzione valida() richiamata nel pulsante invia.
Per ricavare i vari campi immessi negli input in questo caso useremo:
document.nome_del_form.nome_campo.value;
quindi ad esempio: document.invio.nome.value dove inviocome detto prima è il nome che abbiamo assegnato al form e nomeè il campo di input.
Dopo aver preso tutti i campi, passo ai controlli.
Il primo campo che controllo sarà il nome. Se il nome è un campo vuoto allora faccio aprire la finestra di dialogo che mi avvisa che il campo deve essere compilato (ormai come dicevo prima, questo metodo è un pò primitivo).
Faccio lo stesso con il campo telefono, ma controllo anche che sia numerico.
Per quanto riguarda la mail, devo controllare se è un’espressione nella forma: nome@dominio.it.
Perciò utilizzo le espressioni regolari: var email_valid = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
Dopo faccio il test per vedere se la mail inserita è nel formato dichiarato nella variabile email_valid.
Se il test è false, richiedo nuovamente l’inserimento, suggerendo di inserire un formato valido.
Poi faccio il controllo sulla password. Innanzitutto controllo la lunghezza, per verificare che sia composta almeno da sei caratteri e poi controllo se la conferma password coincide con questa.
N.B. anche per la password potrei impostare un’espressione regolare in modo da rispettare determinati standard; tipo caratteri minuscoli e maiuscoli, ecc…
Se tutti i controlli sono ok, si passa all’invio del modulo, in questo caso occorre inserire in document.invio.action = “#”; al posto di # l’indirizzo della pagina che dovrà elaborare i dati.
Allego lo script per validare un form in JavaScript.
<script type="text/javascript">
<!--
function valida() {
// Variabili associate ai campi del modulo
var nome = document.invio.nome.value;
var password = document.invio.password.value;
var conferma= document.invio.conferma.value;
var telefono = document.invio.telefono.value;
var email = document.invio.email.value;
if ((nome == "") || (nome == "undefined")) {
alert("Devi inserire un nome");
document.invio.nome.focus();
return false;
}
if ((isNaN(telefono)) || (telefono == "") || (telefono == "undefined")) {
alert("Devi inserire il telefono, attenzione deve essere numerico!");
document.invio.telefono.value = "";
document.invio.telefono.focus();
return false;
}
// Espressione regolare dell'email
var email_valid = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
if (!email_valid.test(email) || (email == "") || (email == "undefined"))
{
alert("Devi inserire un indirizzo mail corretto");
document.invio.email.focus();
return false;
}
if (password.length < 6 || (password == "") || (password == "undefined") )
{
alert("Scegli una password, minimo 6 caratteri");
document.invio.password.focus();
return false;
}
//Effettua il controllo sul campo CONFERMA PASSWORD
if ((conferma == "") || (conferma == "undefined")) {
alert("Devi confermare la password");
document.invio.conferma.focus();
return false;
}
if (password != conferma) {
alert("La conferma password");
document.invio.conferma.value = "";
document.invio.conferma.focus();
return false;
}
else {
document.invio.action = "#";
document.invio.submit();
}
}
//-->
</script>
Oggi parleremo di JavaScript getElementById, ovvero introduciamo questo utilissimo metodo per operare sul DOM della pagina.
Come utilizzare il metodo JavaScript getElementById()
Il metodo getElementById() dell’oggetto document, restituisce l’elemento della pagina HTML, avente l’id uguale a ciò che è specificato tra parentesi.
document.getElementById(“#id“)
Ricordiamo, quando abbiamo studiato i selettori nei CSS, che gli id devono essere univoci.
Inoltre è case sensitive, quindi attenzione perché ad esempio:
document.getElementById(“Testo”) è diverso da
document.getElementById(“testo”)
Facciamo un esempio di utilizzo di JavaScript getElementById()
Creiamo un div nella pagina web e decidiamo di voler cambiare il testo contenuto al suo interno, dopo aver premuto il pulsante posizionato sotto il livello div.
Ecco dunque l’esempio di ciò che vogliamo realizzare. Premete il pulsante sotto, per vedere cambiare il testo.
Inserisco un div a cui assegno come id il nome testo e un pulsante, utilizzando il tag <button>, che quando verrà premuto (onclick) attiverà il cambio del testo.
Io ho impostato l’id in un tag <div>, ma l’id poteva essere attribuito ad esempio anche all’interno del tag <p>.
Adesso sviluppiamo il codice JavaScript.
Per realizzare l’esempio, oltre al metodo getElementById() utilizziamo anche la proprietà innerHTML, che serve a personalizzare il contenuto di un oggetto. Ad esempio per modificare o aggiungere del testo, come nel nostro caso.
<script type="text/javascript">
function cambiaTesto(newTesto) { //funzione che attiva il cambio del testo
document.getElementById("testo").innerHTML =newTesto;
}
</script>
Esempio2 di utilizzo di getElementById()
Facciamo adesso un altro esempio di utilizzo del metodo getElementById().
Vogliamo quindi creare un pulsante, che cambia il colore della scritta contenuta in un div. Anzi poniamo tre possibilità di colore.
Ecco dunque l’esempio. Provate a cliccare sui vari pulsanti.
Coding Creativo
Inserisco il div a cui assegno l’id colore che poi vado a richiamare con getElementById(‘colore’).
Creo quindi tre semplici pulsanti utilizzando il tag <button> e a ciascuno all’interno dell’evento onclick assegno la procedura cambiaColore().
