Da WIKI CoderDojo Firenze.
 
Riga 64: Riga 64:
 
e la pagina HTML risultante è 
 
e la pagina HTML risultante è 
  
 
+
[[File:Colore2-mini.png|border|center]]
 
[[Category:Javascript|Category:Javascript]]
 
[[Category:Javascript|Category:Javascript]]

Versione attuale delle 19:09, 21 set 2014

Colora il box

Questo tutorial è composto di 3 tutorial che sviluppano lo stesso esercizio di programmazione (colorare un box quadrato) in tre modalità di livello (difficoltà e competenze) crescente:

  • Colora il box - livello base
  • Colora il box - livello intermedio
  • Colora il box - livello avanzato

Colora il box - livello base

Questo semplice tutorial combina conoscenze basiche di HTML, CSS e Javascript.

Il suo scopo è quello di colorare un quadrato inizialmente nero, scegliendo una combinazione dei tre colori base rosso, verde e blu (terna RGB: Red Green Blue) cioè scegliendo una terna RGB.

La scelta del valore per il rosso, verde o blu viene fatto inserendo un valore a scelta tra 0 e 255 per ciascuno dei tre colori.

Consiste nella creazione, in una pagina HTML, di un quadrato inizialmente nero insieme a tre box testuali in cui l'utente potrà inserire i tre valori scelti per la terna RGB.

In particolare il codice HTML è il seguente;

<html>
    <body>
        Rosso (0 - 255): <input type="Text" id="rosso" value=0 ><br/>
        Verde (0 - 255): <input type="Text" id="verde" value=0 ><br/>
        Blu (0 - 255): <input type="Text" id="blu" value=0 ><br/>
        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/>
        <div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"></div>
    </body>
</html>

in cui si possono notare i tre elementi HTML <input type="text"> che conterranno i tre numeri (0-255) per i tre colori della terna RGB, cioè rosso, verde e blu e che inzialmente sono a 0 (value=0). 

Dopo questi tre campi è presente una etichetta (tag <label>) che riporterà il codice esadecimale del colore risultante dalla combinazione dei tre colori base e cioè il codice della terna RGB.

Infine, è presente un tag <div> a cui sono state date le carattersitche di un quadrato nero grazie alle impostazione di stile: l'attributo style, infatti, ne specifica lo stile definendo un'altezza ed una base entrambe di 100px (height:100px; width:100px;), un colore di sfondo pari al nero (background-color:#000000;) ed un bordo sottile (border:1).

Il codice così riportato disegna una pagina del tipo:

Colore-mini.png


ma questa pagina html non è ancora in grado di far cambiare il colore al quadrato nero, perché manca il codice Javascript necessario a impostare la terna RGB (i tre valori tra 0 e 255) inserita dall'utente nei tre box testuali indicati con Rosso (0 - 255), Verde (0 - 255)Blu (0 - 255).

Il codice Javascript, riportato di seguito, contiene due funzioni:

  • calcolaCodice(): restituisce una stringa contenente il codice HTML del colore ottenuto dalla combinazione delle tre componenti RGB; infatti, trasforma le tre componenti scelte dall'utente (numeri decimali tra 0 e 255) in numeri esadecimali e li scrive in successione in una stringa aggiungendo all'inizio il carattere '#'. Si ottengono stringhe del tipo #000000 (nero), #FF0000 (rosso), #FFFFFF (bianco) etc
  • colora(id): usa la calcolaCodice() per calcolare il codice di colore HTML e per colorare il quadrato di tale colore, cambiando le impostazioni di stile del quadrato dell'attributo background-color. Inoltre modifica l'etichetta <label> scrivendo il codice di colore risultante dalla combinazione RGB scelta.


        function calcolaCodice(){
            r=parseInt(document.getElementById('rosso').value);
            g=parseInt(document.getElementById('verde').value);
            b=parseInt(document.getElementById('blu').value);
            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);
        }
        function colora(id){
            c=calcolaCodice();
            div=document.getElementById(id);
            div.style.backgroundColor=c;
            document.getElementById('codice').innerHTML=c;
        }

E quindi, di seguito, il codice della pagina completo

<html>
    <head>
        <script language="javascript">
        function calcolaCodice(){
            r=parseInt(document.getElementById('rosso').value);
            g=parseInt(document.getElementById('verde').value);
            b=parseInt(document.getElementById('blu').value);
            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);
        }
        function colora(id){
            c=calcolaCodice();
            div=document.getElementById(id);
            div.style.backgroundColor=c;
            document.getElementById('codice').innerHTML=c;
        }
        </script>
    </head>
    <body>
        Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('quadrato')"><br/>
        Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('quadrato')"><br/>
        Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('quadrato')"><br/>
        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/>
        <div style="height:100px; width:100px; background-color:#000000; border:1" id="quadrato"></div>
    </body>
</html>

Notare la chiamata della funzione colora(id) nel codice HTML attraverso l'attributo onblur che rappresenta l'evento di perdita del 'fuoco' dell'oggetto in considerazione: in altre parole, tutte le volte che l'utente uscirà da una dei tre box testuali (che abbia o meno scritto un valore) verrà reimpostato il colore del quadrato secondo la scelta fatta. Notare anche che la funzione colora(id) è chiamata passando l'id del <div> che disegna il quadrato e cioè colora('quadrato').

Colora il box - livello intermedio

Questo tutorial combina conoscenze di HTML, CSS e Javascript. L'obiettivo è sempre quello di colorare un box quadrato scegliendo la terna RGB, ma la scelta può essere fatta (oltre che scrivendo nei box testuali il valore per rosso, verde e blu)  anche usando dei bottoni che incrementano o decrementano il valore decimale. Questa versione dell'esercizio rispetto al livello base, quindi, si complica in quanto aumenta sia la presenza di oggetti HTML (bottoni) sia il codice Javascript  che li gestisce.

Il codice dell'esercizio completo è il seguente:

<html>
    <head>
        <script language="javascript">
        function calcolaCodice(){
            r=parseInt(document.getElementById('rosso').value);
            g=parseInt(document.getElementById('verde').value);
            b=parseInt(document.getElementById('blu').value);
            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);
        }
        function colora(id){
            c=calcolaCodice();
            div=document.getElementById(id);
            div.style.backgroundColor=c;
            document.getElementById('codice').innerHTML=c;
        }
        function inizia(){
            r=document.getElementById('rosso').value='0';
            g=document.getElementById('verde').value='0';
            b=document.getElementById('blu').value='0';
        }
        function varia(casella,v){
            ct=document.getElementById(casella);
            x=parseInt(ct.value);
            x=x+v;
            if (x>255) x=255;
            if (x<0) x=0;
            ct.value=x;
        }
        </script>
    </head>
    <body onload="inizia();colora('quadrato');">
        <input type="button" value="aumenta R" onclick="varia('rosso',1);colora('quadrato');">
        <input type="button" value="diminuisci R" onclick="varia('rosso',-1);colora('quadrato');">
        Rosso (0 - 255): <input type="Text" id="rosso" onblur="colora('quadrato')"><br/>
        <input type="button" value="aumenta G" onclick="varia('verde',1);colora('quadrato');">
        <input type="button" value="diminuisci G" onclick="varia('verde',-1);colora('quadrato');">
        Verde (0 - 255): <input type="Text" id="verde" onblur="colora('quadrato')"><br/>
        <input type="button" value="aumenta B" onclick="varia('blu',1);colora('quadrato');">
        <input type="button" value="diminuisci B" onclick="varia('blu',-1);colora('quadrato');">
        Blu (0 - 255): <input type="Text" id="blu" onblur="colora('quadrato')"><br/>
        Codice esadecimale del colore risultante: <label id='codice'></label><br/>
        <div style="height:100px; width:100px" id="quadrato"></div>
    </body>
</html>

e la pagina HTML risultante è 

Colore1-mini.png

Colora il box - livello avanzato

Questo tutorial combina conoscenze di HTML, CSS e Javascript. L'obiettivo è sempre quello di colorare un box quadrato scegliendo la terna RGB, ma la scelta può essere fatta solo usando i bottoni che incrementano o decrementano il valore decimale e la scelta effettuata viene riportata in corrispondenti etichette. Questa versione dell'esercizio rispetto al livello intermedio, quindi, non complica di fatto il livello ma prevede le competenze acquisite nel livello intermedio per semplificare l'esercizio; infatti, cambiano alcuni oggetti HTML sia il codice Javascript che li gestisce, in particolare nel codice Javascript viene fatto uso di variabili globali.

Il codice dell'esercizio completo è il seguente:

<html>
    <head>
        <script language="javascript">
        var r,g,b,c;
        function calcolaCodice(){
            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);
        }
        function colora(id){
            c=calcolaCodice();
            div=document.getElementById(id);
            div.style.backgroundColor=c;
            mostraRGB();
        }
        function mostraRGB(){
            document.getElementById('rosso').innerHTML=r.toString()+' '+r.toString(16);
            document.getElementById('verde').innerHTML=g.toString()+' '+g.toString(16);
            document.getElementById('blu').innerHTML=b.toString()+' '+b.toString(16);
            document.getElementById('codice').innerHTML=c;
        }
        function inizia(){
            r=0;g=0;b=0;
        }
        function varia(x,v){
            x=x+v;
            if (x>255) return 255;
            if (x<0) return 0;
            return x;
        }
        </script>
    </head>
    <body onload="inizia();colora('quadrato');">
        <input type="button" value="aumenta R" onclick="r=varia(r,1);colora('quadrato');">
        <input type="button" value="diminuisci R" onclick="r=varia(r,-1);colora('quadrato');">
        Rosso: <label id='rosso'></label><br/>
        <input type="button" value="aumenta G" onclick="g=varia(g,1);colora('quadrato');">
        <input type="button" value="diminuisci G" onclick="g=varia(g,-1);colora('quadrato');">
        Verde: <label id='verde'></label><br/>
        <input type="button" value="aumenta B" onclick="b=varia(b,1);colora('quadrato');">
        <input type="button" value="diminuisci B" onclick="b=varia(b,-1);colora('quadrato');">
        Blu: <label id='blu'></label><br/>
        <label id='codice'></label><br/>
        <div style="height:100px; width:100px" id="quadrato"></div>
    </body>
</html>

e la pagina HTML risultante è 

Colore2-mini.png