Riga 27: | Riga 27: | ||
*''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 | *''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''. | *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''. | ||
− | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"> | + | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"> |
+ | function calcolaCodice(){<br/> r=parseInt(document.getElementById('rosso').value);<br/> g=parseInt(document.getElementById('verde').value);<br/> b=parseInt(document.getElementById('blu').value);<br/> return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/> }<br/> function colora(id){<br/> c=calcolaCodice();<br/> div=document.getElementById(id);<br/> div.style.backgroundColor=c;<br/> document.getElementById('codice').innerHTML=c;<br/> } | ||
+ | </div> | ||
+ | asdasda |
Versione delle 19:08, 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;
<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:
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;
}
asdasda