Dove event, obbligatorio, è una stringa che specifica il nome dell’evento, ad esempio mouseover, load, click.
function, obbligatorio, specifica la funzione che deve essere richiamata.
Infine useCapture, non obbligatorio, può assumere il valore di true o false e serve a ‘forzare‘ la priorità di gestione di un certo evento se sono più di uno. Per default è impostato a false.
Esempio d’uso di addEventListener
Al clic del mouse in un punto qualsiasi della pagina comparià il testo Coding Creativo in rosso.
Clicca qui
Per realizzare questo semplice esempio basta inserire un paragrafo dove indico l’id code. Dopo implementiamo la funzione testo che servirà a far apparire il testo Coding Creativo nel paragrafo specificato dall’id.
Quindi all’evento click, cioè quando faremo click nella pagina, associamo la funzione testo.
Chiaramente si poteva associare ad altri eventi ad esempio mouseover, mousemove , ecc.
Secondo esempio d’uso di addEventListener
Se fate la prova ad avvicinare il mouse dove compare il numero in rosso, vi accorgerete che il numero quando passiamo sopra cambia.
Per generare questo esempio basta creare un paragrafo con un id specifico, ad esempio lo chiamo numero.
Dopo creo la funzione in JavaScript che al clic del mouse genera un numero casuale da 1 a 10. Utilizzo per questo scopo le funzioni matematiche Math.round e Math.random precedentemente spiegate: tutorial funzione casuale.
In questo tutorial impareremo ad utilizzare l’operatore radice quadrata in Scratch.
Primo esempio d’uso della radice quadrata in Scratch
Facciamo subito un semplice esempio di utilizzo.
Inserire in input un numero N e calcolare la sua radice quadrata.
Procedimento
Innanzitutto inseriamo uno sfondo ed uno sprite qualsiasi. Dopo chiediamo in input un numeroe calcoliamo, utilizzando l’operatore radice quadrata, la sua radice.
Le variabili che servono sono dunque due:
numero che contiene il numero preso in input
radice che contiene la radice quadrata del numero preso in input
Ecco quindi il codice a blocchi completo sviluppato con scratch:
Allego anche il semplice listato in C++, per chi volesse consultarlo. Ho incluso la libreria cmath che, ricordiamo, consente di utilizzare la funzione sqrt per il calcolo della radice quadrata.
#include <iostream>
#include <cmath>
using namespace std;
int main() {
int numero;
float radice;
cout<<"Inserisci un numero: ";
cin>>numero;
radice=sqrt(numero);
cout<<"La radice e': "<<radice<<endl;
return 0;
}
Secondo esempio d’uso della radice quadrata in Scratch
Nel secondo esempio affronteremo il teorema di Pitagora.
Dati in input i due cateti di un triangolo rettangolo trovare l’ipotenusa.
Scegliamo come sempre uno sfondo ed uno sprite qualsiasi. Quindi prendiamo in input i cateti del triangolo rettangolo e calcoliamo l’ipotenusa utilizzando l’operatore radice quadrata.
Le variabili che occorrono sono quindi:
cateto1, cateto2 che rappresentano i cateti presi in input
ipotenusache viene ricavata grazie al teorema di Pitagora
Ecco dunque l’algoritmo completo sviluppato con Scratch:
Allego il listato in C++ per evidenziare la facilità di traduzione da Scratch ad un linguaggio di programmazione.
#include <iostream>
#include <cmath>
using namespace std;
int main() {
int cateto1, cateto2;
float ipotenusa;
cout<<"Inserisci il primo cateto del triangolo rettangolo: ";
cin>>cateto1;
cout<<"Inserisci il secondo cateto del triangolo rettangolo: ";
cin>>cateto2;
ipotenusa=sqrt(cateto1*cateto1+cateto2*cateto2);
cout<<"L'ipotenusa e': "<<ipotenusa<<endl;
return 0;
}
Chiaramente gli esercizi proposti sono solo dei semplici esempi di utilizzo dell’operatore radice quadrata in Scratch.
Realizziamo dei semplici esercizi di geometria con Scratch.
Primo problema di geometria con Scratch
Poniamo dunque il seguente problema sull’area dei rettangoli:
Date le dimensioni di due rettangoli calcolarne l’area e determinare quale dei due ha la superficie maggiore.
Procedimento
Innanzitutto scegliamo uno sfondo ed uno sprite qualsiasi.
Dopo chiediamo le dimensioni del primo rettangolo e quindi calcoliamo e visualizziamo l’area.
Ripetiamo lo stesso procedimento per il secondo rettangolo.
Poi con l’istruzione condizionale confronteremo le due aree e diremo quale delle due ha la superficie maggiore.
Le variabili da creare sono quindi:
base1, altezza1 e area1per il primo rettangolo
base2, altezza2e area2per il secondo rettangolo
Ecco dunque l’algoritmo completo:
Sarà interessante, quando introdurremo l’uso della penna in scratch, vedere come è anche possibile disegnare i rettangoli del problema proposto.
Per chi volesse consultare l’algoritmo in linguaggio C++ allego il listato:
#include <iostream>
using namespace std;
int main() {
int base1,altezza1,area1,base2,altezza2,area2;
cout<<"Inserisci la base del primo rettangolo: ";
cin>>base1;
cout<<"Inserisci l'altezza del primo rettangolo:: ";
cin>>altezza1;
area1=base1*altezza1;
cout<<"L'area del primo rettangolo e': "<<area1<<endl;
cout<<"\nInserisci la base del secondo rettangolo: ";
cin>>base2;
cout<<"Inserisci l'altezza del secondo rettangolo:: ";
cin>>altezza2;
area2=base2*altezza2;
cout<<"L'area del secondo rettangolo e': "<<area2<<endl;
if(area1>area2)
cout<<"\nIl primo rettangolo ha la superficie maggiore del secondo "<<endl;
else
cout<<"\nIl secondo rettangolo ha la superficie maggiore del primo "<<endl;
return 0;
}
Secondo problema di geometria con Scratch
Conoscendo le dimensioni di un rettangolo e il lato di un quadrato verificare se le due figure sono equivalenti.
Procedimento
Scegliamo uno sfondo ed uno sprite qualsiasi. Dopo chiediamo il lato del quadrato, quindi calcoliamo e visualizziamo l’area del quadrato.
Poi chiediamo le dimensioni del rettangolo e calcoliamo l’area.
Infine confrontiamo le due aree e se sono uguali visualizziamo in output il messaggio ‘le due figure sono equivalenti‘, altrimenti visualizziamo ‘le due figure non sono equivalenti’.
Le variabili da creare sono dunque:
latoe areaQper il quadrato
base, altezzae areaTper il rettangolo
Ecco il codice completo per il secondo problema di geometria con scratch:
Allego il listato in C++ per chi volesse consultarlo:
#include <iostream>
using namespace std;
int main() {
int base,altezza,areaT,lato,areaQ;
cout<<"Inserisci il lato del quadrato: ";
cin>>lato;
areaQ=lato*lato;
cout<<"L'area del quadrato e': "<<areaQ<<endl;
cout<<"\nInserisci la base del rettangolo: ";
cin>>base;
cout<<"Inserisci l'altezza del rettangolo: ";
cin>>altezza;
areaT=base*altezza;
cout<<"L'area del rettangolo e': "<<areaT<<endl;
if(areaQ==areaT)
cout<<"\nLe due figure sono equivalenti "<<endl;
else
cout<<"\nLe due figure non sono equivalenti "<<endl;
return 0;
}
Abbiamo risolto dei semplicissimi problemi di geometria con Scratch, più avanti ne proporrò degli altri.
Realizziamo in questa lezione un semplicissimo gioco dei dadi online, utilizzando la funzione math random appena studiata.
Il gioco consiste semplicemente nel tirare i dadi e se la somma dei due dadi è superiore o uguale a 10 si vince, altrimenti si perde.
Provate dunque a lanciare i dadi sotto.
Lancia i dadi
Per realizzare questo semplice gioco dei dadi online, creiamo una funzione in JavaScript a cui diamo ad esempio il nome di casuale.
Quindi memorizziamo nelle due variabili num1 e num2 i valori casuali tra 1 e 6 generati con le funzioni Math.random e Math.round.
Facciamo in modo anche di caricare le immagine del dado create in precedenza con un programma, come ad esempio Adobe Photoshop o Gimp.
Le immagini le nominiamo in base al numero: 1.png, 2.png ecc e le salviamo nello stesso percorso del file.
Calcoliamo poi il totale sommando le due variabili num1 e num2 e visualizziamo il messaggio hai vinto, se si raggiunge un punteggio maggiore o uguale a 10, altrimenti visualizziamo hai perso.
Ecco dunque il codice JavaScript completo dell’esempio sul gioco dei dadi online realizzato in uno script a parte:
function casuale() {
var num1 = Math.round(Math.random()*5+1);
var num2 = Math.round(Math.random()*5+1);
document.getElementById("numero1").innerHTML = "Hai ottenuto " + num1 + ", ";
document.getElementById("numero2").innerHTML = num2;
document.getElementById("image1").src = num1 + ".png";
document.getElementById("image2").src = num2 + ".png";
var totale = num1+num2;
document.getElementById("totale").innerHTML =
" e hai totalizzato " + totale + " punti";
if(totale > 10)
document.getElementById("totale").innerHTML =+ "hai vinto";
else
document.getElementById("totale").innerHTML =+ "hai perso";
};
Poi, nella pagina html inseriamo:
<p>Lancia i dadi <input type="button" onclick="casuale()" value="Lancio"></p>
<p><span id="numero1"></span> <span id="numero2"></span> <span id="totale"></span></p>
<p><img src="" id="image1"><img src="" id="image2"></p>
Gioco dei dadi online contro il computer
Si potrebbe ad esempio immaginare di giocare contro un altro giocatore.
Quindi cliccate sul pulsante sotto:
Lancio dadi:
L’esempio è analogo al precedente. Si devono creare 2 dadi per il computer e 2 dadi per l’utente. Notate che ho creato delle immagini di colore diverso.
Alla fine dei lanci si confrontano i totali e si indica chi ha vinto.
Ecco il codice completo per il gioco del lancio dei dadi online dove, solo per comodità, ho inserito il codice JavaScript nello stesso file. Voi inseritelo in uno script a parte.
<p>Lancio dadi:<input type="button" onclick="lancio()" value="Lancio"></p>
<p onload="lancio_pc()"><span class="" id="numero_pc1" onload="lancio_pc()"></span> <span class="" id="numero_pc2"></span>
<span class="" id="totale_pc"></span></p>
<p><img src="" id="image_pc1"><img src="" id="image_pc2"></p>
<p><span class="" id="numero_1"></span> <span class="" id="numero_2"></span> <span class="" id="totale1"></span></p>
<p><img src="" id="image_1"><img src="" id="image_2"></p>
<p id="vinto"></p>
<script type="text/javascript">
function lancio() {
var num_pc1=Math.round(Math.random()*5+1);
var num_pc2=Math.round(Math.random()*5+1);
document.getElementById("numero_pc1").innerHTML ="Lancio computer " + num_pc1 + ", ";
document.getElementById("numero_pc2").innerHTML =num_pc2;
document.getElementById("image_pc1").src=num_pc1+"pc.png";
document.getElementById("image_pc2").src=num_pc2+"pc.png";
var totale_pc=num_pc1+num_pc2;
document.getElementById("totale_pc").innerHTML =" , con un totale di " + totale_pc + " punti";
var num_1=Math.round(Math.random()*5+1);
var num_2=Math.round(Math.random()*5+1);
document.getElementById("numero_1").innerHTML ="Tu hai ottenuto " + num_1 + ", ";
document.getElementById("numero_2").innerHTML =num_2;
document.getElementById("image_1").src=num_1+".png";
document.getElementById("image_2").src=num_2+".png";
var totale1=num_1+num_2;
document.getElementById("totale1").innerHTML =" e hai totalizzato " + totale1 + " punti";
if(totale1 > totale_pc)
document.getElementById("vinto").innerHTML = "hai vinto";
else
document.getElementById("vinto").innerHTML = "hai perso";
}
</script>
Chiaramente questi sono solo degli esempi da cui partire per realizzare altri giochi in JavaScript. Potete creare voi stessi delle variazioni al gioco e aggiungerle nei commenti sotto.
