Mostra la font per a Exemples del DOM

=Introducció=
En aquests enllaços se'ns presenta una col.lecció molt completa d'exemples de codi, ordenats, que segur que seran útils com a referència per a l'alumne. Seria bo que fessis una repassada exhaustiva del codi, i que el dia que en un projecte real necessitis solucionar un problema de DOM, sàpigues aprofitar la informació que aquí es presenta.
=Referències=
JavaScript HTML DOM Examples:
*http://www.w3schools.com/js/js_dom_examples.asp
JavaScript HTML DOM Events Examples
*http://www.w3schools.com/js/js_events_examples.asp

=Exemples aclaridors=
==recórrer un formulari, diferents tècniques==
fitxer '''form1.htm''': recorrem un formulari (amb diversos elements) amb diferents tècniques, i diferents maneres d'accedir als elements del formulari. S'ha de tenir present que el valor dels ''radio button'' i dels ''check box'' no és evident.
<pre>
    <!DOCTYPE html>
    <html lang="es-ar">
    <head>
    <meta charset="utf-8" />
    <title>Comptar elements</title>
    <meta name="description" content="Comptar elements" />
    <script type="text/javascript">
    //<![CDATA[
    var valor = "";
    function elementsForm1() {
    var dades = "";
    var form_elements = document.getElementById('formu').elements;
    for (i=0; i<form_elements.length; i++) {
        if(form_elements[i].value == ''){
        valor = 'sense valor';
        }else{
            if((form_elements[i].type == 'radio')||(form_elements[i].type == 'checkbox')){
                if(form_elements[i].checked == true){
                valor = form_elements[i].value;
                }else{
                valor = "sense valor";
                }
            }else{
            valor = form_elements[i].value;
            }
    }
    dades += form_elements[i].tagName +'(' + form_elements[i].name + ' - ' + form_elements[i].type +')' +'-' + valor + '<br />';
    }
	document.getElementById('info').innerHTML = dades;
    }

    function elementsForm2() {
		forms = document.getElementsByTagName("form");
		dades = "Número de formularis:<br />";
		dades += forms.length;
		dades += "<br />";
		dades += "Nom del formulari:<br />";
		dades += forms[0].name;
		dades += "<br />";
		dades += "Número d'elements del formulari:<br />";
		dades += forms[0].elements.length;
		dades += "<br />";
		dades += "Llistat de tots els elements del formulari:<br />";
		for (i=0;i<forms[0].elements.length;i++)           
		{
			dades += forms[0].elements[i].name;
			dades += " (" + forms[0].elements[i].type + ")";
            if((forms[0].elements[i].type == 'radio')||(forms[0].elements[i].type == 'checkbox')){
                if(forms[0].elements[i].checked == true){
                dades += " - " + forms[0].elements[i].value;
                }else{
                dades += " - ";
                }
            }else{
            dades += " - " + forms[0].elements[i].value;
            }

			dades += "<br />";
		}
		document.getElementById('info').innerHTML = dades;
	}

    function elementsForm3() {
		//bàsicament és igual que l'anterior, però canvia una mica la forma de recórrer el formulari
		dades = "Llistat de tots els elements del formulari:<br />";
		for(i=0; ele=document.frm_dades_personals.elements[i]; i++)          
		{
			dades += ele.name;
			dades += " (" + ele.type + ")";
            if((ele.type == 'radio')||(ele.type == 'checkbox')){
                if(ele.checked == true){
                dades += " - " + ele.value;
                }else{
                dades += " - ";
                }
            }else{
            dades += " - " + ele.value;
            }

			dades += "<br />";
		}
		document.getElementById('info').innerHTML = dades;
}

    function elementsForm4() {
		dades = "";
		dades += document.forms[0].name + " - " + document.forms[0].action + "<br />";
		//abusant del DOM:
		dades += document.frm_dades_personals.name + " - " + document.frm_dades_personals.action + "<br />";

		dades += document.forms[0].elements[1].name + " - " + document.forms[0].elements[1].type + "<br />";
		//abusant del DOM:
		dades += document.frm_dades_personals.nom.name + " - " + document.frm_dades_personals.nom.type + "<br />";

		dades += document.forms[0].elements[1].name + " - " + document.frm_dades_personals.nom.type + "<br />";

		document.getElementById('info').innerHTML = dades;
	}

    function elementsForm5() {
		//Recorrem els nodes del formulari. Això vol dir que els nodes no seran només els elements del formulari pròpiament,
		//sinó també tots els elements HTML que conté, com ara <br />, etc.
		dades = "";
		frm_nodes = document.forms[0].childNodes;
		dades += "Número de nodes: " + frm_nodes.length + "<br />";
		for (i=0;i<frm_nodes.length;i++)           
		{
			dades += frm_nodes[i] + " - ";
			dades += "tipus: " + frm_nodes[i].type + " - ";
			dades += "nodename: " + frm_nodes[i].nodeName + " - ";
			dades += "name: " + frm_nodes[i].name + " - ";
			dades += "valor: " + frm_nodes[i].value + "<br />";
		}
		document.getElementById('info').innerHTML = dades;
	}

    //]]>
    </script>
    </head>
    <body>
	<h1>Exemple de formulari</h1>
    <form name="frm_dades_personals" id="formu" action="processar.htm">
    <input type="hidden" name="num" value="12"><br />
    nom: <input type="text" name="nom"><br />
    cognoms: <input type="text" name="cognom"><br />
	password: <input type="password" name="pwd"><br />
	<input type="radio" name="sex" value="male" >Male<br />
	<input type="radio" name="sex" value="female">Female<br />
	<input type="checkbox" name="chk_bici" value="bici">Bicicleta<br />
	<input type="checkbox" name="chk_cotxe" value="cotxe">Cotxe<br /> 

	<select name="cotxes">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat">Fiat</option>
	<option value="audi">Audi</option>
	</select><br />
	<textarea name="txt_area" rows="10" cols="30"></textarea><br />

    <input type="button" onclick="elementsForm1();" name="processar1" value="processar1"><br />
    <input type="button" onclick="elementsForm2();" name="processar2" value="processar2"><br />
    <input type="button" onclick="elementsForm3();" name="processar3" value="processar3"><br />
    <input type="button" onclick="elementsForm4();" name="processar4" value="processar4"><br />
    <input type="button" onclick="elementsForm5();" name="processar5" value="processar5"><br />
    </form>
	<p id="info"></p>
    </body>
    </html>
</pre>
==accedir a un formulari, 3 maneres diferents==
'''form2.htm''':
<pre>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Comptar elements</title>
    <meta name="description" content="" />
    <script type="text/javascript">
    //<![CDATA[
    function mostrar() {
		console.log(document.forms[0].action); //amb l'index de la col.lecció forms
		console.log(document.forms['frm_dades_personals'].action); //amb l'index associatiu (conec com es diu el formulari)
		console.log(document.frm_dades_personals.action); //conec com es diu el formulari
	}

    //]]>
    </script>
    </head>
    <body onload="mostrar()">
	<h1>Exemple de formulari</h1>
    <form name="frm_dades_personals" id="formu" action="processar.htm">
    nom: <input type="text" name="nom"><br />
    </form>
    </body>
    </html>
</pre>

==createElement i appendChild: crear una llista des de zero==
Creem un a llista amb ''createElement''. Després eliminem un element de la llista amb ''removeChild'' (primer hem de buscar el ''parentNode''.
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 	.tipus1 {
 		color:orange;
 	}
 	.tipus2 {
 		color:blue;
 	}
</style>
</head>
<body>

<button onclick="afegir()">Afegir elements d'un array</button>
<button onclick="eliminar()">Eliminar el segon element</button>

<p id="demo"></p>

<script>
function afegir() {
	//http://stackoverflow.com/questions/11351135/create-ul-and-li-elements-in-javascript
	var ul = document.createElement('ul');
	document.body.appendChild(ul);

 	var array_bar = ['cafè', 'tallat', 'cafè amb llet', 'carajillo', 'poleo', 'desgraciat'];

 	for (var i=0;i<array_bar.length;i++) {
		var x = document.createElement("li");
		//fem servir l'operador ternari del if
		//https://developer.mozilla.org/ca/docs/Web/JavaScript/Referencia/Operadors/Conditional_Operator
		var tipus = (i%2) ? "tipus1":"tipus2";
		x.setAttribute("class", tipus)

		var t = document.createTextNode(array_bar[i]);
		x.appendChild(t);
		ul.appendChild(x);
	}

}

function eliminar() {
	segon_element = document.getElementsByTagName("li")[1];
	segon_element.parentNode.removeChild(segon_element);

}

</script>

</body>
</html>
</pre>

=Event Drag. Exercici de classe, 17.11.2017=
1. Definim un DIV de color negre de dimensions 300x100 px

2. Definim tres quadrats (DIVs) de dimensions 100x100, de color R, G i B

Els posicionem de la següent manera:
<pre>
**   **   **
**   **   **

***********
***********
</pre>
3. Hem de moure els quadrats a dins la barra horitzontal, de manera que ocupin la posició de l'esquerra (des de x=0 fins a x=99; y=0), del mig (des de x=100 fins a x=199; y=0) i de la dreta (des de x=200 fins a x=299; y=0).

4. Quan un quadrat ocupa la posició d'un altre, hi ha un desplaçament dels quadrats.

Referència dels events de drag:
*https://developer.mozilla.org/en-US/docs/Web/Events/drag
*https://www.w3schools.com/jsref/dom_obj_event.asp
Podeu començar mirant l'exemple que hi ha en el primer enllaç.
*https://www.w3schools.com/html/html5_draganddrop.asp
=Exercici de classe: backgroundColor i rodeta del ratolí (wheel)=

'''Exercici preliminar''': Fem que el backgroundColor de la pantalla transiti des de negre fins a blanc:
<pre>
<html>
<head>
<style>
body {background-color: 0;}
</style>
<script>
var color = 0;
setInterval(function(){ 
//document.body.style.backgroundColor = "rgb(100,100,100)";
document.body.style.backgroundColor = "rgb(" + color + "," + color + "," + color  + ")";
color += 10;
}, 100);
</script>
</head>
<body>
</body>
</html>
</pre>

'''Exercici''': Anem a implementar l'event wheel del ratolí. Amb la roda del ratolí, canvia el brackground del navegador, amb valors que vagin de blanc a negre en funció de lo ràpid que moguis el ratolí. Cada vegada que movem una unitat la rodeta del ratolí, es dispara un event. Si movem el ratolí molt ràpid es disparen molts events. Per saber si movem cap amunt o cap avall, hem de mirar la propietat ''event.deltaY'' (valor positiu, estem movent cap amunt; valor negatiu, estem movent cap avall).

L'objectiu és que amb la rodeta del ratolí puguem enfosquir o aclarir el background de la pantalla.

Podem partir d'aquest codi:

''index.html'':
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Document</title>
</head>
<body>
    <div id="screen"></div>
    <script src="assets/js/script.js"></script>
</body>
</html>
</pre>
'''style.css''':
<pre>
* {
    margin: 0px;
}
#screen {
    height: 100vh;
    width: 100vw;
    background-color: blue;
}

.wheel {
    background-color: red !important;
}
</pre>
'''script.js''':
<pre>
document.getElementById("screen").addEventListener("wheel",function(event){
    if (event.deltaY>0){
        this.classList.add("wheel");
    } else {
        this.classList.remove("wheel");
    }
    console.dir(event);
})
</pre>

Complement: estudiar el següent codi, que implementa un zoom sobre una imatge:
*http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html



{{Autor}}, novembre 2018
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]