1 OBJETOS, DOM, JSON

Transcripción

1 OBJETOS, DOM, JSON 1

2 2 Objetos Se delimitan con llaves. Contienen propiedades. Las propiedades del objeto: pares nombre: valor, separados por comas. var alumno = { nombre: Ana", id: 5566 }; O: var alumno={ }; nombre: Ana", apellidos: Milton", id : 5566 Podemos acceder a las propiedades del objeto de dos formas: a) console.log(alumno.nombre); // mejor.. b) console.log(alumno[ nombre"]);

3 3 Arrays de objetos // array de objetos var alumnos = [ {nombre: "Ana Tendero", edad: 27 }, {nombre: "Luis Fornes", edad: 16 }, {nombre: "Bettine Villa", edad: 21 }, ]; function muestraclase(val, index) { var res = "<br> pos " + index + " > " + val.nombre + " " + val.edad; document.write(res); } alumnos.foreach(muestraclase);

4 4 Objetos (II) Además de propiedades, los objetos tiene métodos Las propiedades son valores asociados al objeto. Los métodos son acciones que se pueden realizar sobre los objetos Ya hemos usado objetos sin saberlo! Al usar por ejemplo una variable de texto var nombre = Alfredo ; console.log( nombre.length ); // propiedad console.log( nombre.indexof( l ) ); // método

5 5 Añadir métodos a objeto javascript // definición var person = { firstname: "John", lastname : "Doe", id : 5566, fullname : function() { // uso de this return this.firstname + " " + this.lastname; } }; // invocación console.log( person.fullname() );

6 7 De todas formas Nosotros no nos vamos a centrar en la definición de objetos, etc. En ECMAScript el soporte de clases es un poco especial, y de hecho está en plena evolución. Pero es bueno conocerlos para poder usar las propiedades y métodos que nos proporciona el lenguaje o las APIS de terceros.

7 8 Ejemplo uso DOM Objeto document y método getelementsbytagname: devuelve un array con todos los nodos de la pagina HTML con esa etiqueta. Cada enlace tiene una propiedad href con la URL destino del enlace Ejemplo: código que cuenta el número de enlaces de una página. <script> var cont = 0; // enlaces a Google var enlaces = document.getelementsbytagname("a"); alert( "Numero de enlaces: " + enlaces.length); for (var i = 0; i< enlaces.length; i++) { console.log( enlaces[i].href ) if (enlaces[i].href == " cont++; } alert( "Numero de enlaces a Google: " + cont); </script>

8 9 DOM Document Object Model

9 10 DOM Proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. comunica el contenido con los scripts o lenguajes de programación. Da acceso a la estructura de la página HTML mediante mapeo de los elementos en un árbol de nodos. Cada elemento un nodo, cada porción de texto un nodo de texto. Tipos de nodos: Document Element Attr Text Comment

10 11 Acceso a elementos Generales: document.title document.lastmodified document.links document.url Mediante métodos: devuelven un elemento o una HTMLColection (similar a un array..) getelementbyid getelementsbytagname getelementsbyclassname document.queryselector() document.queryselectorall()

11 Acceso general: dom-01.html 12

12 13 Acceso por id, class, tag, selector CSS dom-02.html var paragraphs = document.getelementsbytagname('p'); var suma = 0; for (var i=paragraphs.length-1;i>=0;i--) suma += paragraphs[i].textcontent.length; console.log("total chars en <p>: ", suma); var parrafos = document.queryselectorall("#content div p")...

13 14 Acceso a la información del nodo dom-03.html Propiedades para acceder y modificar el contenido. textcontent: solo el texto, sin las etiquetas HTML, innerhtml: incluye todo el texto con el HTML existente var p = document.getelementsbytagname('p')[0]; p.textcontent; // "This is a simple HTML file." p.innerhtml; // "This is a <i>simple</i> HTML file." p.textcontent = "Modified HTML file"; // look for change in browser p.innerhtml = "<i>modified</i> HTML file"; // look for change in browser

14 15 Acceder atributos Los atributos de una etiqueta son traducidos por el navegador en propiedades de un objeto. Dos métodos existen para leer y escribir los atributos de un elemento, getattribute permite leer el valor de un atributo mientras que setattribute permite su escritura. for (i=0; i<document.images.length;i++) document.images[i].setattribute("alt", "imagen nº " + i); document.write("<p> Textos alt modificados: ") for (i=0; i<document.images.length;i++) document.write(document.images[i].getattribute("alt"), ",");

15 16 Cambiar el estilo Sintaxis element.style.propiedad = valordelapropiedad Ejemplo var parrafos = document.queryselectorall("div p") for (var i = parrafos.length - 1; i >= 0; i--) { parrafos[i].style.fontfamily = "monospace"; parrafos[i].style.fontsize = "1.4em"; } Nota: Cada atributo CSS posee una propiedad del DOM equivalente, formándose con el mismo nombre del atributo CSS pero sin los guiones y llevando la primera letra de las palabras a mayúsculas: font-size => fontsize. Otra forma es modificar el atributo class (mediante la propiedad classname ya que class es palabra reservada), o usando setattribute.

16 17 Añadir elementos: dom-04.html Añadiremos dos párrafos, uno será el primeo del bloque con id content y el otro será el ultimo de dicho bloque: let p1 = document.createelement('p'); let p2 = document.createelement('p'); p1.textcontent = "I was created dynamically!"; p2.textcontent = "I was also created dynamically!"; // usaremos los métodos insertbefore y appendchild // y necesitaremos referencias al bloque y a su primer hijo let parent = document.getelementbyid('content'); let firstchild = parent.childnodes[0]; // con esas referencias insertamos los nodos creados parent.insertbefore(p1, firstchild); parent.appendchild(p2); // insertbefore toma como primer parámetro el nodo a insertar, y // como segundo el nodo delante del cual lo insertremos // appendchild es sencilla: añade el nodo pasado como último hijo

17 18 Borrar y mover/reemplazar removechild es un método que se aplica sobre el padre, y se le pasa como parámetro el hijo a borrar var child = document.getelementbyid("p1"); child.parentnode.removechild(child); Nota: existe un nuevo método remove() que es parte del DOM4, pero no se recomienda su uso porque no está soportado.. replacechild es un método que se aplica sobre el padre, y se le pasa como parámetro el nuevo hijo y el hijo a reemplazar var child = document.getelementbyid("p1"); var parent = child.parentnode; parent.replacechild(nuevo, child); Nota: si el nodo nuevo ya existía en el árbol se mueve

18 IES Francisco Romero Vargas Curso Eventos Un evento HTML puede ser algo que el navegador o el usuario haga. Ejemplos de eventos Se hace clic sobre un botón o elemento Una página HTML que termina de cargarse El valor de un texto de entrada cambia Cuando el evento ocurre, queremos hacer algo JavaScript permite ejecutar código cundo el evento es detecctado. Sintaxis <elemento evento= códigojavascript"> Ejemplo <button onclick='getelementbyid("demo").innerhtml=date()'> Pulsa para ver la hora</button>

19 IES Francisco Romero Vargas Curso Mejor usar función <p>click the button to display the date.</p> <button onclick="displaydate()">the time is?</button> <script> function displaydate() { document.getelementbyid("demo").innerhtml = Date(); } </script> <p id="demo"></p>

20 IES Francisco Romero Vargas Curso Formularios <form name="myform" action="demo_form.asp" onsubmit="return validateform() method="post"> Name: <input type="text" name="fname"> <input type="submit" value="submit"> </form> function validateform() { var x = document.forms["myform"]["fname"].value; if (x == null x == "") { alert("name must be filled out"); return false; } } // si onsubmit devuelve false no se envcia el formulario