Indovinelli con Scratch

In questa lezione realizzemo un gioco con gli indovinelli con Scratch.
Proporremo 4 semplici indovinelli:
1) Giro curioso nel bosco fitto e frondoso. Mi arrotolo in palla, sono piccolo e gioioso.
2) Mi nutro di insetti nell’oscurità, Un piccolo mammifero nella mia verità.
3) Nella notte mi senti cantare, Con occhi grandi posso guardare.
4) Faccio il sonnellino durante la lunga stagione. Amo miele e pesce, sono un buon pescatore!

Per individuare la risposta corretta, occorre trascinare ciascun animale sulla macchina. Se la macchina parte con l’animale vuol dire che la risposta è corretta, altrimenti la macchina cambia colore e l’animale ritorna in posizione.

Ecco una possibile implementazione del gioco indovinelli con Scratch:

Calcolatrice con JavaScript

Calcolatrice con JavaScript

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.

Realizziamo poi il foglio di stile.


.content {
            margin-left: 2px;
        }
.tasto {
            background-color: #a5cff3 ;
            color: #175c97;
            font-size: 22pt;
            border: none;
            margin: 4px 2px;
            height: 40px;
	    width: 46px;
        }
.display {
            background: none;
            color: #175c97;
            font-size: 24pt;
            border: #175c97 solid 2px;
            margin: 4px 2px;
            width: 204px;
            height: 40px;            
        }
.uguale {
            width: 208px;
        }

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.

Alcuni link utili

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web

Metodo getElementById()

Metodo getElementById()

In questa lezione presenterò altri esempi di utilizzo del metodo getElementById(), al fine di comprenderne meglio il funzionamento.

Nell’articolo precedente https://www.codingcreativo.it/javascript-getElementById/ abbiamo già introdotto questo metodo.


Esempio 1 di utilizzo del metodo getElementById()

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.

<label>Base:</label><input type="text" id="base">
<label>Altezza:</label><input type="text" id="altezza">
<input type="button" onclick="Area()" value="Calcola l'area del rettangolo">
<p><div id="area"></div></p> 

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.

Alcuni link utili

Indice argomenti diagramma a blocchi

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web

JavaScript getElementById

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

Coding Creativo

Il codice html che mi servirà sarà dunque questo:

<div id="testo">Coding Creativo</div>
<button onclick="cambiaTesto('www.codingcreativo.it');">Cambia testo</button>	

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

<div id="colore">Coding Creativo</div>
<button onclick="cambiaColore('#ff00ff');">Magenta</button>
<button onclick="cambiaColore('#f56f00');">Arancione</button>
<button onclick="cambiaColore('#00ff00');">Verde</button>	

In JavaScript utilizzo la proprietà elem.style.color per far cambiare colore al paragrafo.

<script type="text/javascript">
function cambiaColore(newColor) {
  var elem = document.getElementById('colore');
  elem.style.color = newColor;

}
</script> 

Conclusioni

In questa lezione abbiamo presentato il metodo JavaScript getElementById, nelle prossime lezioni faremo alcuni esempi di utilizzo.

Alcuni link utili

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web