Exercicis DOM I

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Referències

A classe hem explicat els següents exemples:

Return the number of images in a document

Return the id of the first image in a document

Return the number of links in a document

Open an output stream, and add some text

Alert the number of elements with a specific name

Alert the number of elements with a specific tagname

Return the value of the href attribute of a link

(més fàcil: alert(document.getElementsByTagName("A")[0].href); )

Return the coordinates of an area in an image-map

Set a button to disabled when clicked

Return the id of the form a button belongs to

Submit a form

Change the background color of the document contained in an iframe

Remove frameborder of an iframe

Add border to an image.

nota. Com es comenta a 'http://www.w3schools.com/jsref/dom_obj_image.asp, ja no podem utiltizar la propietat border, sinó que en html5 hem d'utiltizar .style.border.

<!DOCTYPE html>
<html>
<body>

<p>Clica el botó per posar un contorn</p>

<img src="./arcade.jpg" />
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var img = document.images[0];
    alert(img.src);
    img.style.border = "thick solid #0000FF";
}
</script>

</body>
</html>

Change the src of an image

<!DOCTYPE html>
<html>
<body>

<p>Clica el botó per canviar la imatge</p>

<img src="./arcade.jpg" />
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var img = document.images[0];
    img.src='./arcade2.jpg';
}
</script>

</body>
</html>

Repàs: la llista de tots els events que pots utiltizar els trobaràs a:

Get the number of options in the dropdown list

Variant: Donat el següent formulari, quantes opcions té la segona select del formulari?

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form>
<input type="nom" />
<input type="cognom" />

<select>
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>

<select>
  <option>Seat</option>
  <option>Mercedes</option>
  <option>Citroen</option>
</select>

</form>

<p>There are <span id="demo">0</span> options in the list.</p>

<script>
var ele = document.forms[0].elements;
var a=0;
for(var i=0; i<ele.length; i++) {

	//alert(document.forms[0].elements[i].type);
//alert(ele[i].type);
	if(ele[i].type == 'select-one') {
		a++;
		if(a==2) alert(document.forms[0].elements[i].length)
	}
    
}
</script>

</body>
</html>

Turn the dropdown list into a multiline list

Select multiple options in a dropdown list:

Nota: a http://www.w3schools.com/tags/tag_select.asp trobaràs la referència del tag <select>, i allà pots veure que hi ha la propietat multiple.

Remove options from a dropdown list

Change the width of a table border (s'ha de fer amb style)

Add options from a dropdown list

<!DOCTYPE html>
<html>
<head>
<script>
function afegirOption() {
	var sel_fruites=document.getElementById("fruites")
    var opt_fruites = sel_fruites.options;
	var option1 = document.createElement("option");
	var option2 = document.createElement("option");
	option1.text = "Kiwi";
	option2.text = "Taronja";
	sel_fruites.add(option1); //afegir al final, per defecte
	sel_fruites.add(option2, sel_fruites[0]); //afegir al principi
}
</script>
</head>
<body>

<form>
<select id="fruites" >
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<input type="button" onclick="afegirOption()" value="Afegir opció">
</form>

</body>
</html>

Delete rows in a table

Change the content of a table cell

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to return the number of cells in the table's first row.</p>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br> 

<button onclick="myFunction()">Try it</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
function myFunction() {
    var taula = document.getElementById("myTable");
    //var taula = document.tables[0];
    var files = taula.rows;
    var celles = files[0].cells;
    var num_celles = celles.length; //és el mateix que número de columnes

    document.getElementById("demo1").innerHTML = "Found " + num_celles + " cells in the first tr element.";
    
	document.getElementById("demo2").innerHTML = "Contingut de la 1a cel.la:  " + celles[0].innerHTML;
        
}
</script>

</body>
</html>

El Sudoku:

Pots trobar codi font Javascript per fer i resoldre Sudokus, com l'enllaç anterior. Si mires dins el codi segur que trobaràs moltes referències als objectes cells, rows, etc. És un bon exercici mirar de llegir (i entedre) codi.

Fixa't bé que aquestes dues sentències són equivalents:

alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);

nota: aquests són exemples explicats/comentats a classe explícitament, però l'alumne hauria de mirar amb tot detall la resta d'exercicis mostrats a:

JavaScript HTML DOM Examples:

JavaScript HTML DOM Events Examples


Sobre aquests exemples fem alguns exercicis.

Desenvolupament

Enunciats

L'alumne ha de realitzar els següents exercicis:

1. Formulari: ficar tots els elements d'un formulari de color blau cel. El formulari ha de contenir caixes de text, radio button, check box, select box, text area i buttons. El text del formulari estarà dins de labels.

2. pàgina web: retornar la url de tots els enllaços de la web

3. Tenim tres imatges. Afegir un border quan fem onmouseover sobre la imatge, amb diferent color segons la imatge: blau, verd i vermell

4. dropdown list (select box). Tenim un formulari amb una caixa de text, dos botons (amb value afegir i value treure), i una select box. Es tracta d'anar afegint i treient elements de la select box.

5. taula dinàmica. En l'exercici 2 has retornat tots els links d'una pàgina. Ara els hauràs de posar en forma de taula, a tres columnes: 1a columna, l'index de la fila; 2a columna: el text del link; 3a columna, la URL del link

6. Tens una taula amb l'estructura país / num_habitants / superfície. Recorre dinàmicament tota la taula (a través de la col.lecció rows i la col.lecció cells, i digues el número total d'habitants i la superfície total.

Solucions

Exercici 1

1. Formulari: ficar tots els elements d'un formulari de color blau cel. El formulari ha de contenir caixes de text, radio button, check box, select box, text area i buttons. El text del formulari estarà dins de labels.

    <!DOCTYPE html>
    <html lang="es-ar">
    <head>
    <meta charset="utf-8" />
    <title>Comptar elements</title>
    <meta name="description" content="Exercici DOM" />
    <script type="text/javascript">
    //<![CDATA[

    function canviar_a_blau_cel() {
		for(i=0; elem=document.frm_dades_personals.elements[i]; i++)          
		{
			//elem.style.background = 'lightblue';
			elem.style.background = '#aaaaff';
		}
	}

    function canviar_els_labels() {
		labels = document.getElementsByTagName("label");
		for (i=0;i<labels.length;i++)           
		{
			labels[i].style.background = '#aaaaff';
		}
	}

    //]]>
    </script>
    </head>
    <body>
	<h1>Canviar color de background</h1>
	<p>Com es pot veure,  style.background no afecta als <em>radio button</em> i del <em>checkbox</em>. En aquest cas, gràcies a l'ús de <em>labels</em> podem donar color també als <em>radio button</em> i <em>checkbox</em>.</p>
	<p>Gràcies als labels podem donar format als elements de text: nom, cognoms, etc. Per tant, és interessant que tots els elements de text estiguin inclosos dins d'elements que es puguin formatar, com ara <em>label</em> o <em>span class=...</em></p>

    <form name="frm_dades_personals" id="formu" action="processar.htm">
    <input type="hidden" name="num" value="12"><br />
    <label>nom:</label> <input type="text" name="nom"><br />
    <label>cognoms:</label> <input type="text" name="cognom"><br />
	<label>password:</label> <input type="password" name="pwd"><br />
	<label>sexe
	<input type="radio" name="sex" value="male" >Male
	<input type="radio" name="sex" value="female">Female<br />
	</label>
	<label>
	<input type="checkbox" name="chk_bici" value="bici">Bicicleta<br />
	<input type="checkbox" name="chk_cotxe" value="cotxe">Cotxe<br /> 
	</label>
	<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="canviar_a_blau_cel();" name="bt_blau_cel" value="Canviar els items del formulari a blau cel"><br />
    <input type="button" onclick="canviar_els_labels();" name="bt_labels" value="Canviar els labels a blau cel"><br />
    </form>
	<p id="info"></p>
    </body>
    </html>

Exercici 2

2. pàgina web: retornar la url de tots els enllaços de la web

Agafem qualsevol pàgina que tingui enllaços i en descarreguem el codi font. Per exemple:

    <script type="text/javascript">
    //<![CDATA[

    function llistar_links() {
		//alert(document.links.length);
		dades = "";
	    var link_elements = document.links;
		for (i=0; i<link_elements.length; i++) {       
			dades = dades + document.links[i].href + "<br />";
		}
		//alert(dades);
		document.getElementById('info').innerHTML = dades;
	}

    //]]>
    </script>

i abaix de tot de la pàgina:

...
<!-- codi nou -->
<input type="button" onclick="llistar_links();" name="llistar_links" value="Llistar Links"><br />
<p id="info"></p>
</body>
</html>

Exercici 3

3. Tenim tres imatges. Afegir un border quan fem onmouseover sobre la imatge, amb diferent color segons la imatge: blau, verd i vermell

<!DOCTYPE html>
<html dir="ltr" lang="ca-ES">
<head>
	<script type="text/javascript">
	//<![CDATA[

	function canviar_contorn(x,color) {
		//alert(x.src);
		//http://www.w3schools.com/jsref/prop_style_bordercolor.asp
		//http://www.w3schools.com/jsref/dom_obj_style.asp#border
		x.style.borderColor=color;
	}

	//una mica més complicat
	function canviar_contorn2(x,width,style,color) {
		//http://www.w3schools.com/jsref/prop_style_bordercolor.asp
		//http://www.w3schools.com/jsref/dom_obj_style.asp#border
		x.style.borderWidth=width;
		x.style.borderStyle=style;
		x.style.borderColor=color;
	}

	//]]>
	</script>
</head>
<body>
<img src="img/120409_170400_pic.JPG" border="3px" onmouseover="canviar_contorn(this,'blue')" onmouseout="canviar_contorn(this,'black')" onclick="canviar_contorn2(this,'thick','solid','blue')"/><br />
<img src="img/120423_144806_pic.JPG" border="3px" onmouseover="canviar_contorn(this,'green')" onmouseout="canviar_contorn(this,'black')" onclick="canviar_contorn2(this,'medium','dashed','green')"/><br />
<img src="img/120430_161010_pic.JPG" border="3px" onmouseover="canviar_contorn(this,'red')" onmouseout="canviar_contorn(this,'black')" onclick="canviar_contorn2(this,'thin','dotted','red')"/><br />
</body>
</html>

Exercici 4

4. dropdown list (select box). Tenim un formulari amb una caixa de text, dos botons (amb value afegir i value treure), i una select box. Es tracta d'anar afegint i treient elements de la select box.

NOTA: podeu utilitzar 'x.size=x.options.length;

 <!DOCTYPE html>
    <html lang="es-ar">
    <head>
    <meta charset="utf-8" />
    <title>Dropdown list - select box</title>
    <meta name="description" content="Exercici DOM" />
    <script type="text/javascript">
    //<![CDATA[

	function afegir() {
		var txt=document.getElementById("marca");
		//alert(txt.value);

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

		var opt = document.createElement("option");
		x.options.add(opt);

		opt.text = txt.value;
		opt.value = x.options.length;
		x.size=x.options.length;
		txt.value="";
	}

	function treure() {
		var x=document.getElementById("cotxes");
		x.remove(x.selectedIndex);
		x.size=x.options.length;
	}

    //]]>
    </script>
    </head>
    <body>
	<h1>Dropdown list - select box dinàmica</h1>

	<form name="frm_dades_personals" id="formu">
	Marques de cotxes:
	<select id="cotxes" name="cotxes">
	</select><br />
	<input type="text" id="marca" name="marca" />
    <input type="button" onclick="afegir();" name="bt_afegir" value="Afegir">
    <input type="button" onclick="treure();" name="bt_treure" value="Treure"><br />
    </form>
	<p id="info"></p>
    </body>
    </html>

Exercici 5

5. taula dinàmica. En l'exercici 2 has retornat tots els links d'una pàgina. Ara els hauràs de posar en forma de taula, a tres columnes: 1a columna, l'index de la fila; 2a columna: el text del link; 3a columna, la URL del link

...
<!-- codi nou -->
<input type="button" onclick="llistar_links();" name="llistar_links" value="Llistar Links"><br />
<p id="info"></p>
<table id = "taula_links" border="1"></table>
</body>
</html>
	<script type="text/javascript">
	//<![CDATA[

	function llistar_links() {
		//alert(document.links.length);
		dades = "";
		var taula = document.getElementById('taula_links');
		var link_elements = document.links;
		for (i=0; i<link_elements.length; i++) {      
			dades = dades + link_elements[i].href + "<br />";
			insRow(taula, i,link_elements[i].text,link_elements[i].href);
		}
		//alert(dades);
	}

	function insRow(vtaula, vid,vtext,vhref) {
		//mirar:
		//http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow
		
		var fila=vtaula.insertRow(vtaula.rows.length);
		var cel1=fila.insertCell(0);
		var cel2=fila.insertCell(1);
		var cel3=fila.insertCell(2);
		cel1.innerHTML=vid+1;
		cel2.innerHTML=vtext;
		cel3.innerHTML=vhref;
		//NOTA: no funciona fer
		//cel3.innerHTML="<a href='" + vhref + "'>" + vhref + "</a>";
		//doncs entrem en un bucle sense fi.
	}
	//]]>
	</script>

Exercici 6

6. Tens una taula amb l'estructura país / num_habitants / superfície. Recorre dinàmicament tota la taula (a través de la col.lecció rows i la col.lecció cells, i digues el número total d'habitants i la superfície total.

    <!DOCTYPE html>
    <html lang="es-ar">
    <head>
    <meta charset="utf-8" />
    <title>Recórrer una taula</title>
    <meta name="description" content="Exercici DOM" />
    <script type="text/javascript">
    //<![CDATA[
	function anar_sumant() {
		var textos;
		var total_habitants = 0;
		var total_superficie = 0;
		taula = document.getElementById('paisos');
		for ( var i = 1 ; i <taula.rows.length;i++ ) {
			total_habitants += parseInt(taula.rows[i].cells[1].innerHTML);
			total_superficie += parseInt(taula.rows[i].cells[2].innerHTML);
		}
		var info="Número d'habitants: " + total_habitants + "<br />";
		info = info + "Total superfície: " + total_superficie + "<br />";
		document.getElementById('info').innerHTML = info;
	}
    //]]>
    </script>
    </head>
    <body onload="anar_sumant()">
	<h1>Taula de països</h1>
	<table name="paisos" id="paisos">
	<tr><td>País</td><td>num hab</td><td>superf</td></tr>
	<tr><td>França</td><td>15</td><td>504000</td></tr>
	<tr><td>Anglaterra</td><td>25</td><td>340000</td></tr>
	<tr><td>Itàlia</td><td>42</td><td>225000</td></tr>

	</table>

	<p id="info"></p>
    </body>
    </html>

Exercici 7

Tens en un array la llista de les comarques. Crear una llista HTML de les comarques, programàticament, amb createElement i appendChild (has de crear tant l'element ul com el li).

Teoria: Exemples_del_DOM#createElement_i_appendChild:_crear_una_llista_des_de_zero

<html>
<head>
<title>Modificando nodos con el árbol DOM</title>
</head>
<body>
<div id="parrafillo">
Este es un párrafo que contiene muchas cosas:
<ul>
  <li>Una</li>
  <li>lista</li>
</ul>
</div>
<script>
function cambia() {
  var el=document.getElementById( "parrafillo");
  // Primero quitamos el contenido
  while( el.firstChild!=null ) {
    el.removeChild( el.firstChild );
  }
  // A continuación, creamos y añadimos nodos
  var texto=document.createTextNode( "Y lo cambio completamente" )
  el.appendChild( texto );
  
  var ol=document.createElement( "ol" );
  el.appendChild( ol );
  var li=document.createElement( "li" );
  ol.appendChild( li );
  texto=document.createTextNode( "aunque" );
  li.appendChild( texto );
  li=document.createElement( "li" );
  ol.appendChild( li );
  texto=document.createTextNode( "también incluyo" );
  li.appendChild( texto );
  li=document.createElement( "li" );
  ol.appendChild( li );
  
  //una altra manera de fer-ho
  //texto=document.createTextNode( "una lista" );
  //li.appendChild( texto );
  li.innerHTML="text amb innerHTML";
}

//després de 1 segon executem la funció per veure els canvis:
setTimeout( "cambia()", 1000 );
</script>
</body>
</html>

Exercici 8

Recórrer els elements d'una llista. Dues maneres:

    <!DOCTYPE html>
    <html lang="es-ar">
    <head>
    <meta charset="utf-8" />
    <title>Recórrer una taula</title>
    <meta name="description" content="Exercici DOM" />
    <script type="text/javascript">
	function recorrer_llista() {
	    var str="Els països llistats són: ";
		elem = document.getElementsByTagName("li");
		for(i=0; i < elem.length; i++)  {
            //alert(elem[i].innerHTML);
            str += elem[i].innerHTML + ", ";
        }   
        document.getElementById('info').innerHTML = str;
	}
    </script>
    </head>
    <body onload="recorrer_llista()">
	<h1>Llista de països</h1>
	<ul>
	<li>França</li>
	<li>Anglaterra</li>
	<li>Itàlia</li>
	</ul>

	<p id="info"></p>
    </body>
    </html>

Una altra manera diferent:

    <!DOCTYPE html>
    <html lang="es-ar">
    <head>
    <meta charset="utf-8" />
    <title>Recórrer una taula</title>
    <meta name="description" content="Exercici DOM" />
    <script type="text/javascript">
	function recorrer_llista() {
	    var str="Els països llistats són: ";
        var elem=document.getElementById( "llista");
        var child = elem.childNodes;
        alert(child.length);
        for (i=0; i<child.length; i++) { 
        alert(child[i].nodeType + ' - ' + child[i].nodeName);
            
            if (child[i].nodeType==1) { //ElementNode
                alert(child[i].innerHTML);
                //o bé
                alert(child[i].firstChild.nodeValue);
                str += child[i].innerHTML + ", ";
             }
             
        }    
        document.getElementById('info').innerHTML = str;
	}
    </script>
    </head>
    <body onload="recorrer_llista()">
	<h1>Llista de països</h1>
	<ul id="llista">
	<li>França</li>
	<li>Anglaterra</li>
	<li>Itàlia</li>
	</ul>

	<p id="info"></p>
    </body>
    </html>

NOTA: El contingut d'una etiqueta és el mateix que el valor del node del seu fill:

console.log(child[i].innerHTML);
//o bé
console.log(child[i].firstChild.nodeValue);

Exercici 9: Número de taules

Aquest exercici serveix per tenir en compte l'ús del document.write. Utiltizar document.write després de què s'hagi carregat la pàgina destrueix l'arbre del DOM.

    <!DOCTYPE html>
    <html lang="es-ar">
    <head>
    <meta charset="utf-8" />
    <title>Creació d'una taula</title>
    <meta name="description" content="Exercici DOM" />
    <script type="text/javascript">
    	function processar() {
    	    

    	    var taules = document.getElementsByTagName("table");   
    	    alert(taules.length);
    	    alert(taules[0].rows[0].cells[0].innerHTML);
    	    
    	    novataula = document.getElementById("novataula");
    	    novataula.innerHTML = "<table><tr><td>Hongria</td></tr></table>";
    	    
    	    alert(taules.length);
    	    alert(taules[1].rows[0].cells[0].innerHTML);

    	    document.write ('<table>');
    	    document.write ('<tr><td>Algèria</td></tr>');
    	    document.write ('<tr><td>Noruega</td></tr>');
    	    document.write ('<tr><td>Grècia</td></tr>');  
    	    document.write ('</table>');
  
      	    alert(taules.length);
    	    alert(taules[0].rows[0].cells[0].innerHTML);
    	    
    	}
    </script>
    
    <body onload="processar()">
    <table border="1">
    <tr><td>França</td></tr>
    <tr><td>Anglaterra</td></tr>
     <tr><td>Marroc</td></tr>    
     </table>
     
     <div id="novataula">Nou país</div>
     
     </html>

Exercici 10 (exercici de classe, 20.11.2018)

<!DOCTYPE html>
<html>
<body>

<div id="INICI">
	<p>Paràgraf 1</p>
	<p>Paràgraf 2</p>
	<table border="1">
	<tbody>
		<tr><td>cel·la11</td><td>cel·la12</td></tr>
		<tr><td>cel·la21</td><td>cel·la22</td></tr>
		<tr><td>cel·la31</td><td><ul><li>llista1</li><li>META</li></ul></td></tr>
	</tbody>
	</table>
</div>
</body>
</html>
<script>
//aquí va el teu codi
</script>

Partim de:

var elediv = document.getElementById("INICI")

hem d'accedir al valor de META.

No es pot utilitzar getElementsByTagName, ni document.cols o similar. Només es pot utilitzar childNodes, length, nodeName, nodeType, nodeValue.

Solució:

<script>

	var inici = "INICI";
	console.log(inici);
	var elediv = document.getElementById(inici);
	
	//recodem que console.dir(element); ens pot facilitar molt la feina!
	console.dir(elediv); //puc veure de forma ràpida tota la informació que m'interessa

	var nodedivfills = elediv.childNodes;
	console.log(nodedivfills.length);
	console.log(nodedivfills[5].nodeName);

	var nodetaulafills = nodedivfills[5].childNodes;
	console.log(nodetaulafills.length);
	console.log(nodetaulafills[1].nodeName); //TBODY

	var nodetbodyfills = nodetaulafills[1].childNodes;
	console.log(nodetbodyfills.length);
	console.log(nodetbodyfills[5].nodeName); //TR

	var nodetrfills = nodetbodyfills[5].childNodes;
	console.log(nodetrfills.length);
	console.log(nodetrfills[1].nodeName); //TD
	
	var nodetdfills = nodetrfills[1].childNodes;
	console.log(nodetdfills.length);
	console.log(nodetdfills[0].nodeName); //UL
	
	var nodeulfills = nodetdfills[0].childNodes;
	console.log(nodeulfills.length);
	console.log(nodeulfills[1].nodeName); //LI
	
	var nodelifills = nodeulfills[1].childNodes;
	console.log(nodelifills.length);
	var meta = nodelifills[0].nodeValue;
	console.log(meta);

	//maneres alternatives:
	// Metodo utilizando el byTag
	var bytag = document.getElementById("INICI").getElementsByTagName("tbody")[0].rows[2].cells[1].getElementsByTagName("ul")[0].getElementsByTagName("li")[1].childNodes[0].nodeValue;

	console.log(bytag);

	// Metodo utilizando el byChild
	var bychild = (document.getElementById("INICI").childNodes[5].childNodes[1].childNodes[5].childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);

	console.log(bychild);
</script>

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology


creat per Joan Quintana Compte, Novembre 2018

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines