Diferència entre revisions de la pàgina «M06 UF3A1. Teoria II»

De wikijoan
Salta a la navegació Salta a la cerca
(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...».)
 
 
(Hi ha una revisió intermèdia del mateix usuari que no es mostren)
Línia 1: Línia 1:
 
=T6. Teoria de Nodes=
 
=T6. Teoria de Nodes=
−
(TBD)
+
Navegar pels nodes del DOM (pensat com a document XML)
 +
*https://www.w3schools.com/js/js_htmldom_navigation.asp
 +
Crear i eliminar nodes:
 +
*https://www.w3schools.com/js/js_htmldom_nodes.asp
 +
 
 
=T7. Exemple childNodes=
 
=T7. Exemple childNodes=
 
*https://www.w3schools.com/jsref/prop_node_nodevalue.asp
 
*https://www.w3schools.com/jsref/prop_node_nodevalue.asp
Línia 92: 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

Revisió de 15:58, 23 nov 2021

T6. Teoria de Nodes

Navegar pels nodes del DOM (pensat com a document XML)

Crear i eliminar nodes:

T7. Exemple childNodes

Exemple 1: childNodes.html

<!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>

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: 

<div id="id01" style="background-color:yellow;">
<p id="id02">aaa</p>
<p id="id03">bbb</p>
<p id="id04">ccc</p>
</div>

Exemple 2 childNodes

<!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>

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. 

<!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>

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)

taula_des_de_zero.html:

Solució: 

<!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>

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

Obtingut de «http://wiki.joanillo.org/index.php?title=M06_UF3A1._Teoria_II&oldid=298047»