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().
In quest’articolo parleremo di JavaScript prompt, cioè delle finestre che richiedono l’immissione di un dato da parte di un utente.
Il metodo prompt() consente dunque di far apparire delle finestre per interagire con l’utente.
Esempio di uso di JavaScript prompt
Vogliamo realizzare questo esempio: quando clicchiamo sul pulsante inserisci il nome, comparirà la finestra di dialogo per inserire il nome. Dopo averlo inserito e aver cliccato ok, nel livello sotto comparirà il saluto seguito dal nome appena inserito.
Provate quindi l’esempio cliccando il pulsante.
Inseriamo quindi un pulsante, in un punto qualsiasi della pagina, che quando verrà cliccato farà comparire la finestra di dialogo per l’inserimento del nome.
<button onclick="MyName()">Inserisci il nome</button>
Nel div, che potete inserire ad esempio sotto button, faccio visualizzare il nome che l’utente ha inserito.
<div id="visualizza"></div>
Inseriamo adesso il codice JavaScript.
Il metodo prompt() di JavaScript ha due argomenti: il primo che chiede di inserire il nome ed il secondo che compare già nel campo quando si apre la finestra (valore precompilato).
Se la variabile nome è uguale alla stringa vuota allora visualizziamo il messaggio: ‘non hai inserito il nome’; altrimenti visualizziamo il saluto seguito dal nome.
Stiamo utilizzando anche il metodo getElementById() che approfondiremo nei prossimi articoli.
function myName() {
var messaggio;
var nome = prompt("Inserisci il tuo nome:", "Coding Creativo");
if (nome == null || nome == "")
messaggio = "Non hai inserito il nome";
else
messaggio= "Ciao " + nome;
document.getElementById("visualizza").innerHTML = messaggio;
}
Esempio 2 di uso di JavaScript prompt
Facciamo adesso un altro semplice esempio, utilizzando il metodo prompt(). Calcoliamo ad esempio l’età di una persona dopo aver chiesto l’inserimento tramite la finestra di dialogo.
Inseriamo il pulsante in un punto qualunque della nostra pagina.
<button onclick="myEta()">Calcola l'età</button>
Dopo realizziamo il nostro script, utilizzando il metodo prompt() per far inserire l'anno di nascita dell'utente.
Ricaviamo poi la data del giorno con l'oggetto Date() e la memorizziamo nella variabile datac. Dopo utilizziamo il metodo getFullYear() per ottenere l'anno corrente dalla datac e lo memorizziamo in una variabile di nome annoc.
Così, per ricavare l'età facciamo semplicemente una differenza tra l'anno corrente e l'anno che l'utente ha inserito.
Ecco dunque lo script completo che utilizza JavaScript prompt:
function myEta() {
var anno = prompt("In quale anno sei nato?", "1990");
if (anno !== null) {
var datac = new Date();
var annoc = datac.getFullYear();
var eta = (annoc - anno);
if (eta < 18)
alert("Sei minorenne, hai "+eta + "anni");
else
alert("Sei maggiorenne, hai " +eta + "anni");
}
}
Chiaramente questi sono solo dei semplici esempi di uso del metodo prompt() in JavaScript.
Commenti recenti