Da WIKI CoderDojo Firenze.
Riga 30: Riga 30:
 
&nbsp; &nbsp; &nbsp; &nbsp; function calcolaCodice(){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;r=parseInt(document.getElementById('rosso').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;g=parseInt(document.getElementById('verde').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;b=parseInt(document.getElementById('blu').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function colora(id){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;c=calcolaCodice();<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;div=document.getElementById(id);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;div.style.backgroundColor=c;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('codice').innerHTML=c;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
 
&nbsp; &nbsp; &nbsp; &nbsp; function calcolaCodice(){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;r=parseInt(document.getElementById('rosso').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;g=parseInt(document.getElementById('verde').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;b=parseInt(document.getElementById('blu').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function colora(id){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;c=calcolaCodice();<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;div=document.getElementById(id);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;div.style.backgroundColor=c;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('codice').innerHTML=c;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
 
</div>
 
</div>
asdasda
+
E quindi, di seguito, il codice della pagina completo
 +
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;!-- CoderDojo Firenze - Colore (BASE): quadrato colorabile fornendo componenti RGB - Francesco Leoncino--&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script language="javascript"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function calcolaCodice(){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;r=parseInt(document.getElementById('rosso').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;g=parseInt(document.getElementById('verde').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;b=parseInt(document.getElementById('blu').value);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function colora(id){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;c=calcolaCodice();<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;div=document.getElementById(id);<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;div.style.backgroundColor=c;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('codice').innerHTML=c;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238); ">quadrato</span>')">&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238); ">quadrato</span>')">&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238); ">quadrato</span>')">&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Codice esadecimale del colore risultante: &lt;label id='codice'&gt;#000000&lt;/label&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div style="height:100px; width:100px; background-color:#000000; border:1" id="quadrato"&gt;&lt;/div&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;<br/></div>
 +
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('<span style="background-color: rgb(238, 238, 238); ">quadrato'</span>)''.
 +
 
 +
saa

Versione delle 18:17, 21 set 2014

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 cobinazione 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 definedo 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.

        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>
    <!-- CoderDojo Firenze - Colore (BASE): quadrato colorabile fornendo componenti RGB - Francesco Leoncino-->
    <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').

saa