Exemples del DOM

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

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:

JavaScript HTML DOM Events Examples

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.

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

accedir a un formulari, 3 maneres diferents

form2.htm:

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

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">
</head>
<body>

<button onclick="afegir()">Afegir tres elements</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 x = document.createElement("li");
	var t = document.createTextNode("Cafè sol");
	x.appendChild(t);
	ul.appendChild(x);
	
	var x = document.createElement("li");
	var t = document.createTextNode("Tallat");
	x.appendChild(t);
	ul.appendChild(x);

	var x = document.createElement("li");
	var t = document.createTextNode("Cafè amb llet");
	x.appendChild(t);
	ul.appendChild(x);


}

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

</script>

</body>
</html>

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:

**   **   **
**   **   **

***********
***********

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:

Podeu començar mirant l'exemple que hi ha en el primer enllaç.

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:

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

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:

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

style.css:

* {
    margin: 0px;
}
#screen {
    height: 100vh;
    width: 100vw;
    background-color: blue;
}

.wheel {
    background-color: red !important;
}

script.js:

document.getElementById("screen").addEventListener("wheel",function(event){
    if (event.deltaY>0){
        this.classList.add("wheel");
    } else {
        this.classList.remove("wheel");
    }
    console.dir(event);
})

Complement: estudiar el següent codi, que implementa un zoom sobre una imatge:



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