Colora il box - Cronologia

Margherita il 18:09, 21 set 2014

2014-09-21T18:09:42Z

Margherita il 18:07, 21 set 2014

2014-09-21T18:07:13Z

Margherita il 17:57, 21 set 2014

2014-09-21T17:57:35Z

Margherita il 17:52, 21 set 2014

2014-09-21T17:52:09Z

Margherita il 17:37, 21 set 2014

2014-09-21T17:37:54Z

Margherita il 17:28, 21 set 2014

2014-09-21T17:28:12Z

Margherita il 17:27, 21 set 2014

2014-09-21T17:27:10Z

Margherita il 17:23, 21 set 2014

2014-09-21T17:23:37Z

Margherita il 17:22, 21 set 2014

2014-09-21T17:22:18Z

Margherita il 17:21, 21 set 2014

2014-09-21T17:21:14Z

@@ Riga 64: / Riga 64: @@
 e la pagina HTML risultante è&nbsp;
+[[File:Colore2-mini.png|border|center]]
 [[Category:Javascript|Category:Javascript]]

@@ Riga 54: / Riga 54: @@
 e la pagina HTML risultante è&nbsp;
-[[File:Colore1-mini.png|border|center]]
+[[File:Colore1-mini.png|border|center|Colore1-mini.png]]
 [[Category:Javascript|Category:Javascript]]

@@ Riga 54: / Riga 54: @@
 e la pagina HTML risultante è&nbsp;
+[[File:Colore1-mini.png|border|center]]
 [[Category:Javascript|Category:Javascript]]

@@ Riga 45: / Riga 45: @@
 <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">&lt;html&gt;<br/>&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 &lt;div&gt; che disegna il quadrato e cioè ''colora('<span style="background-color: rgb(238, 238, 238);">quadrato'</span>)''.
 [[Category:Javascript|Category:Javascript]]

← Versione meno recente		Versione delle 17:37, 21 set 2014
Riga 1:		Riga 1:
	= Colora il box =		= 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.		Questo semplice tutorial combina conoscenze basiche di HTML, CSS e Javascript.

@@ Riga 1: / Riga 1: @@
 Questo semplice tutorial combina conoscenze basiche di HTML, CSS e Javascript.
@@ Riga 35: / Riga 37: @@
 <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">&lt;html&gt;<br/>&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 &lt;div&gt; che disegna il quadrato e cioè ''colora('<span style="background-color: rgb(238, 238, 238);">quadrato'</span>)''.
+[[Category:Javascript|Category:Javascript]]
-−
-−
 [[Category:Javascript]]

← Versione meno recente		Versione delle 17:27, 21 set 2014
Riga 35:		Riga 35:
	<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <head><br/>        <script language="javascript"><br/>        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/>        }<br/>        </script><br/>    </head><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="quadrato"></div><br/>    </body><br/></html><br/></div>		<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <head><br/>        <script language="javascript"><br/>        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/>        }<br/>        </script><br/>    </head><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="quadrato"></div><br/>    </body><br/></html><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>)''.		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>)''.
		+
		+
		+
		+	[[Category:Javascript]]

@@ Riga 13: / Riga 13: @@
 Dopo questi tre campi è presente una etichetta (tag &lt;label&gt;) 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 &lt;div&gt; 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).
+Infine, è presente un tag &lt;div&gt; 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:
@@ Riga 21: / Riga 21: @@
-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)'',&nbsp;''Blu (0 - 255)''.
+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)'',&nbsp;''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''. Inotre modifica l'etichetta &lt;label&gt; scrivendo il codice di colore risultante dalla combinazione RGB scelta.
+*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 &lt;label&gt; scrivendo il codice di colore risultante dalla combinazione RGB scelta.

@@ Riga 11: / Riga 11: @@
 in cui si possono notare i tre elementi HTML &lt;input type="text"&gt; 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).&nbsp;
-Dopo questi tre campi è presente una etichetta (tag &lt;label&gt;) che riporterà il codice esadecimale del colore risultante dalla cobinazione dei tre colori base e cioè il codice della terna RGB.
+Dopo questi tre campi è presente una etichetta (tag &lt;label&gt;) 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 &lt;div&gt; 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).