3 – Interazione con la pagina HTML

In questo articolo vi spiegherò passo per passo come realizzare uno script che cambia il colore, in maniera casual,e ad una stringa scelta tra 3 (come succede sotto a questa riga), con lo scopo di spiegarvi come modificare in modo dinamico una pagina HTML.

Risultato finale

Primo
Secondo
Terzo

 

La struttura della pagina


Per prima cosa, creiamo la pagina HTML con la sua struttura di base:

<html>
<head>
<title>Cambia Colore</title>

</head>
<body>

</body>
</html>

Ora possiamo creare i tre testi (“Primo”, “Secondo” e “Terzo”) affiancati ai pulsanti di tipo radio, contenuti in un form:

<form>
<input type="radio" value="" name="selezione" id="radioPrimo" checked="checked" />
<span id="primo" >Primo</span>
<input type="radio" value="" name="selezione" id="radioSecondo" />
<span id="secondo" >Secondo</span>
<input type="radio" value="" name="selezione" id="radioTerzo" />
<span id="terzo" >Terzo</span>
</form>

NOTA: è fondamentale specificare l’id di ogni elemento in modo univoco.

E, infine, aggiungiamo il bottone per azionare il nostro script che chiameremo più tardi “scriptCambiaColore”:
<button onclick="scriptCambiaColore()">Cambia Colore</button>

Lo script

Aggiungiamo all’interno della testata della pagina (l’head) il tag script e all’interno creiamo la nostra funzione scriptCambiaColore:
<script type="taxt/javascript">
function scriptCambiaColore(){
}
</script>

per poi potersi concentrare sul codice dello script.

Prima di tutto ci serve un modo per scegliere in modo randomico il colore:
Creiamo un array contenente i vari colori: var colori = ["red","black","green","yellow","blue"];
La funzione Math.random() fornisce un numero casuale decimale compreso tra 0 e 1 (esempio: 0.987654321) mentre la funzione Math.floor(numero) rimuove la parte decimale ad un numero. Queste due funzioni possono essere usate insieme per generare l’indice dell’array con i 5 colori: var numeroCasuale = Math.floor(Math.random()*5); e quindi var coloreCasuale = colori[numeroCasuale];.

var colori = ["red","black","green","yellow","blue"];
var numeroCasuale = Math.floor(Math.random()*5);
var coloreCasuale = colori[numeroCasuale];

Per ottenere il riferimento ad un oggetto della pagina HTML in JavaScript è sufficiente scrivere la seguente riga di codice
document.getElementById(‘id’) (dove per ‘id’ va specificato l’id dell’oggetto nella pagina HTML a cui ci vogliamo riferire, come, per esempio, per il primo testo ‘primo’), che restituisce un valore assegnabile ad una variabile.
Possiamo inoltre ottenere il valore o assegnarne un altro ad ogni attributo di questo elemento semplicemente aggiungendo il suo nome separato da un punto e quindi, in questa maniera, potremo verificare se un radio è “checked” aggiungendoci un .checked oppure modificare il colore del testo (e quindi modificarne lo style) aggiungendoci un .style.color = nuovo colore ; .
Il codice da aggiungere al nostro script sarà quindi per il primo testo+radio:

if (document.getElementById('radioPrimo').checked) {
document.getElementById('primo').style.color=coloreCasuale;
}

Per il secondo testo+radio:
if (document.getElementById('radioSecondo').checked) {
document.getElementById('secondo').style.color=coloreCasuale;
}

E per il terzo testo+radio:
if (document.getElementById('radioTerzo').checked) {
document.getElementById('terzo').style.color=coloreCasuale;
}

La scrittura dello script è terminata e potrete verificare se ci sono degli errori aprendolo con un browser web.

Script Completo (con piccole modifiche innocue)

<script type="text/javascript">
function scriptCambiaColore(){
var colori = ["red","black","green","yellow","blue"];
var colore = colori[Math.floor(Math.random()*5)];
if (document.getElementById('radioPrimo').checked) {
document.getElementById('primo').style.color=colore;
}
if (document.getElementById('radioSecondo').checked) {
document.getElementById('secondo').style.color=colore;
}
if (document.getElementById('radioTerzo').checked) {
document.getElementById('terzo').style.color=colore;
}
}
</script>

Please follow and like us: