M06 UF3A1. Teoria II - Historial de revisió

Joan: /* T7. Exemple childNodes */

2021-11-23T15:58:10Z

T7. Exemple childNodes

Joan: /* T6. Teoria de Nodes */

2021-11-23T15:55:32Z

T6. Teoria de Nodes

Joan: Es crea la pàgina amb «=T6. Teoria de Nodes= (TBD) =T7. Exemple childNodes= *https://www.w3schools.com/jsref/prop_node_nodevalue.asp ==Exemple 1: childNodes.html==

  
2021-11-23T11:58:21Z
Es crea la pàgina amb «=T6. Teoria de Nodes= (TBD) =T7. Exemple childNodes= *https://www.w3schools.com/jsref/prop_node_nodevalue.asp ==Exemple 1: childNodes.html== <pre> <!DOCTYPE html> <htm...».
Pàgina nova
=T6. Teoria de Nodes=

(TBD)

=T7. Exemple childNodes=

*https://www.w3schools.com/jsref/prop_node_nodevalue.asp

==Exemple 1: childNodes.html==

<pre>

<!DOCTYPE html>

<html>

<head><meta charset="UTF-8">

<body>



<div id="id01" style="background-color:yellow;">Node Text1 del DIV

   <p id="id02">aaa</p>Node Text2 del DIV

   <p id="id03">bbb</p>Node Text3 del DIV

   <p id="id04">ccc</p>Node Text4 del DIV

   <p id="id05">ddd</p>Node Text5 del DIV

</div>

<br />

<script>

var x = document.getElementById("id01");

var str = "Núm nodes: " + x.childNodes.length + "<br />";



for (var i=0; i<x.childNodes.length;i++) {

	//nodeName Property

	//nodeValue Property

	//nodeType Property

	str += "nodeName: " + x.childNodes[i].nodeName + " - ";

	str += "nodeValue: " + x.childNodes[i].nodeValue + " - ";

	str += "nodeType: " + x.childNodes[i].nodeType + "<br />";

}

//x.childNodes[0].nodeValue = x.id;

document.write(str);

</script>

<br /><br />

<script>

//https://www.w3schools.com/jsref/prop_node_nodevalue.asp

// If the node is an element node, the nodeValue property will return null.

// Note: If you want to return the text of an element, remember that text is always inside a Text node, and you will have to return the Text node's node value (element.childNodes[0].nodeValue).

document.write("Si volem accedir al contingut dels paràgrafs:<br />");

y = x.childNodes[1];

document.write(y.innerHTML + "<br />"); //aaa

document.write(y.nodeValue + "<br />"); //null

document.write(y.childNodes[0].nodeValue + "<br />"); //aaa

document.write(x.childNodes[1].childNodes[0].nodeValue + "<br />"); //aaa





</script>

</body>

</html>

</pre>

'''NOTA''': Fixem_nos bé que un caràcter de retorn de carro és un caràcter ASCII, i per tant és un node de text. És per això que aquesta peça de codi té 4 nodes de text amagats:

<pre>

<div id="id01" style="background-color:yellow;">

<p id="id02">aaa</p>

<p id="id03">bbb</p>

<p id="id04">ccc</p>

</div>

</pre>

==Exemple 2 childNodes==

<pre>

<!DOCTYPE html>

<html>

<body>



<div id="div1">

<p id="p1">This is a paragraph.</p><br />

<p id="p2">This is another paragraph.</p>

</div>



<script>

var para = document.createElement("p");

var node = document.createTextNode("This is new.");

para.appendChild(node);

var element = document.getElementById("div1");

element.appendChild(para);

console.log(element.childNodes.length);



for (var i=0; i<element.childNodes.length; i++ ) {

 console.log(element.childNodes[i].nodeType);

 console.log(element.childNodes[i].nodeName);

 console.log(element.childNodes[i].nodeValue);

}

var ele = element.childNodes[1]; //és el prime paràgraf

 console.log(ele.nodeType);

 console.log(ele.childNodes.length);

 console.log(ele.childNodes[0].nodeValue);





</script>



</body>

</html>

</pre>

← Versió més antiga		Revisió del 15:58, 23 nov 2021
Línia 96:		Línia 96:
	</html>		</html>
	</pre>		</pre>
		+	=T8: Exemples createElement, removeElement=
		+	==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>
		+	==Crear una taula des de 0==
		+	Crear una taula des de 0, crear (amb createElement) 5 files i 2 columnes, que continguin els 5 principals rius del món, i la seva longitud.
		+
		+	Recórrer aquesta taula que has creat, acumulant en una variable el valor de la longitud, i calcula la mitjana.
		+
		+	exemples: (es proposen vàries solucions)
		+	*https://stackoverflow.com/questions/8302166/dynamic-creation-of-table-with-dom
		+	''taula_des_de_zero.html:''
		+
		+	Solució:
		+	<pre>
		+	<!DOCTYPE HTML>
		+	<html>
		+	<head>
		+	<title>Taula des de 0</title>
		+	</head>
		+	<body>
		+	<h1>Taula</h1>
		+	<div id="la_meva_taula"></div>
		+
		+	<script>
		+	var table = document.createElement('table');
		+	table.style.border="1px solid black";
		+	for (var i = 0; i < 4; i++){
		+	var tr = document.createElement('tr');
		+
		+	var td1 = document.createElement('td');
		+	td1.style.border="1px solid black";
		+	var td2 = document.createElement('td');
		+	td2.style.border="1px solid black";
		+
		+	var text1 = document.createTextNode('Text1');
		+	var text2 = document.createTextNode('Text2');
		+
		+	td1.appendChild(text1);
		+	td2.appendChild(text2);
		+	tr.appendChild(td1);
		+	tr.appendChild(td2);
		+
		+	table.appendChild(tr);
		+	}
		+	document.getElementById("la_meva_taula").appendChild(table);
		+	</script>
		+	</body>
		+	</html>
		+	</pre>
		+	=Joc del Buscamines I (Introducció)=
		+	1. Definir una taula HTML de 8x8 caselles
		+
		+	2. Pintar dins les cel.les una imatge (imatge amb color gris).
		+
		+	3. Definir amb addeventlistener tots els events associats a canviar la imatge quan clico sobre una cel.la (bucle). Utilitzar uns id's del tipus cella00, cella01, cella02,..., cella77.
		+
		+	4. Important! Hem de saber distingir entre clicar el botó esquerra i el dret del ratolí. Quan clico amb l'esquerra canviar a una imatge (per ex, una imatge vermella que conté E). Quan clico amb la dreta canviar a una imatge (per ex, una imatge blava que conté D).
		+
		+	5. De moment res de lògica del joc.
		+
		+	6. Hem de separar totalment el codi HTML del codi javascript. Hem de fer servir els index i bucles, de manera que el codi seria el mateix si fem una taula 8x8 que 12x12 (o NxN).
		+
		+	id = "cella" + x + y