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.
Realizziamo dunque un primo esempio di utilizzo di getElementById().
Dati in input base e altezza di un rettangolo, calcolarne l’area.
Ecco come dovrebbe apparire l’esempio, inserite la base e l’altezza e poi cliccate sul pulsante calcola area del rettangolo, nel div sotto comparirà il risultato.
Quindi inseriamo il codice html che comprende gli input per permettere l’inserimento della base e dell’altezza e il button dove andare ad inserire l’evento onclick(). Inoltre sotto aggiungiamo il tag div che servirà a visualizzare il risultato dell’area.
Per il codice JavaScript, innanzitutto definiamo la funzione Area() e per ricavare il valore inserito nell’input text useremo getElementById(“id”).value. Infine visualizzeremo il risultato nel div con id=area.
<script>
function Area() {
var b=document.getElementById("base").value;
var h=document.getElementById("altezza").value;
var A=b*h;
document.getElementById("area").value = "L'area del rettangolo è: " + A;
}
</script>
Esempio 2 di utilizzo del metodo getElementById()
Facciamo adesso un altro esempio di utilizzo di getElementById(), realizzando un sistema di conversione da decimale a binario, da decimale a ottale e da decimale a esadecimale.
Provate ad inserire nella casella di input un numero decimale e poi cliccate nei pulsanti sotto per fare le relative conversioni.
Per realizzare l’esempio creiamo quindi la casella di input e i tre button dove, per ciascun pulsante, nell’evento onclick, inseriremo la funzione inerente per la codifica da effettuare.
<p><label>Numero decimale: </label>
<input type="text" id="decimale"></p>
<button onclick="dBinario()" type="button">Converti in binario</button>
<button onclick="dOttale()" type="button">Converti in ottale</button>
<button onclick="dEsa()" type="button">Converti in esadecimale</button>
<div id="risultato"></div>
Aggiungiamo poi le funzioni in JavaScript per fare le conversioni.
Per la conversione da decimale a binario, prendiamo il numero preso in input e lo dividiamo per due fino ad arrivare a zero, considerando i resti.
Utilizzeremo chiaramente l’operatore modulo % per ottenere i resti.
resto = n%2;
A mano a mano trascriviamo i resti del nostro numero nella variabile binario a sinistra, trovando così il nostro numero.
Facciamo quindi un esempio:
24 diviso 2= 12 resto 0
12 diviso 2= 6 resto 0
6 diviso 2= 3 resto 0
3 diviso 2= 1 resto 1
1 diviso 2=0 resto 1
Partendo dal basso il nostro numero in binario è dunque uguale a 11000.
Facciamo lo stesso ragionamento per la conversione da decimale a ottale, dividendo per 8 fino ad arrivare allo zero e considerando i resti.
Infine faremo la stessa cosa anche per il sistema esadecimale (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) ma se il resto è maggiore di 9 sostituiremo il valore del resto con il valore contenuto nell’array A appositamente creato.
<script type="text/javascript">
function dBinario(){
n = document.getElementById("decimale").value;
binario = "";
while(n!=0) {
resto = n%2;
n = (n-resto)/2;
binario = resto + binario;
}
document.getElementById("risultato").innerHTML = "il numero: " + binario;
}
function dOttale(){
n = document.getElementById("decimale").value;
ottale = "";
while(n!=0) {
resto = n%8;
n = (n-resto)/8;
ottale = resto + ottale;
}
document.getElementById("risultato").innerHTML = "il numero: " + ottale;
}
function dEsa() {
n = document.getElementById("decimale").value;
esa = "";
while(n!=0) {
resto = n%16;
n=(n-resto)/16;
A = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
if (resto > 9)
resto = A[resto];
esa = resto + esa;
}
document.getElementById("risultato").innerHTML = "il numero: " + esa;
}
</script>
Chiaramente questi sono solo degli esempi di utilizzo del metodo getElementById.
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().
