JavaScript III. JavaScript, la POO y el DOM

Transcripción

1 JavaScript III JavaScript, la POO y el DOM

2 Tablas HTML Crear una tabla es una tarea tediosa, por la gran cantidad de nodos de tipo elemento y de tipo texto que se deben crear dentro del DOM. DOM para HTML incluye varias propiedades y métodos para crear tablas, filas y columnas de forma sencilla.

3 Métodos de <table> rows tbodies insertrow(posicion) deleterow(posicion) Regresan un arreglo con los renglones o los tbody de la tabla. Permiten agregar o borrar renglones de la tabla

4 Métodos de <tbody> Rows insertrow(posicion) deleterow(posicion)

5 Métodos de <tr> Cells insertcell(posicion) deletecell(posicion) Devuelve un arreglo con las celdas de un renglón. Inserta o borra celdas en la posición indicada

6 Métodos de Tablas-DOM <table id="botones"> <caption> Tabla de botones y funciones JavaScript </caption> <thead> <tr> <th>función</th> <th>descripción </th> </tr> </thead> <tbody> <tr class="impar"> <td> <input name="resumentabla" type="button" onclick="resumentabla();" value="resumen de tabla" /> </td><td>contar los renglones de la tabla tblresultados </td> </tr> <tr class="par"> <td> <input name="borrarenglon" type="button" onclick="borrarenglon();" value="borrar primer renglón" /> </td><td>contar los renglones de la tabla tblresultados </td> </tr> <tr class="impar"> <td> <input name="borracolumna" type="button" onclick="borracolumna();" value="borrar primer columna" /></td> <td>contar los renglones de la tabla tblresultados </td> </tr> </tbody> </table> function resumentabla() { var tabla, numfilas, cuerpotablas, numcolumnas, numrenglonestabla; tabla = document.getelementbyid('tblresultados'); numfilas = tabla.rows.length; cuerpotablas = tabla.tbodies.length; numcolumnas = tabla.rows[0].cells.length; alert("n\u00famero de renglones o filas de la tabla: " + numfilas + "\n" + "n\u00famero de tbodies : " + cuerpotablas + "\n" + "n\u00famero de celdas : " + numcolumnas + "\n"); } function borrarenglon() { var tabla= document.getelementbyid('tblresultados'); tabla.tbodies[0].deleterow(0); ResumenTabla(); } function borracolumna() { var tabla= document.getelementbyid('tblresultados'); tabla.tbodies[0].rows[0].deletecell(0); ResumenTabla(); }

7 Métodos de Tablas-DOM(2) <table id="tblresultados" summary=" Resultados de la ejecución de comandos con JavaScript"> <caption> Tabla de resultados </caption> <thead> <tr> <th>etiqueta </th> <th>atributos</th> <th>descripción</th> </tr> </thead> <tfoot> <th>etiqueta </th> <th>atributos</th> <th>descripción</th> </tfoot> <tbody> <tr class="impar"> <td>div</td> <td>width, height, background-color</td> <td>permite generar un contenedor, sirve para realizar la distribución de los recursos dentro del espacio del body</td> </tr> <tr class="par"> <td>p</td> <td>color, dirección</td> <td>permite escribir texto dentro de los recursos de HTML en forma de párrafo</td> </tr> </tbody> </table>

8 Insertar renglones y celdas <input name="insertarrenglon" type="button" onclick="insertarrenglon();" value="insertar un renglón" /> function insertarrenglon() { var tabla= document.getelementbyid('tblresultados'); tabla.tbodies[0].insertrow(2); tabla.tbodies[0].rows[2].insertcell(0); tabla.tbodies[0].rows[2].cells[0].innerhtml = 'Span'; tabla.tbodies[0].rows[2].insertcell(1); tabla.tbodies[0].rows[2].cells[1].innerhtml = 'id, class'; tabla.tbodies[0].rows[2].insertcell(2); tabla.tbodies[0].rows[2].cells[2].innerhtml = 'Permite colocar un segmento de texto que escapa o es diferente, se usa dentro de p' resumentabla(); }

9 Práctica Tabla Las tablas tienen una definición del número de columnas de acuerdo al primer renglón definido de la tabla. Elaborar una tabla completa con JavaScript de 3 renglones y 3 columnas. function creartabla() { /* * Las tablas tienen: * id * summary -> contenido del sumary * thead * tbody ->rows -> cells * * tfoot * * var nuevatabla, elementocaption, titulotabla, titulos1, seccionhead; nuevatabla = document.createelement('table'); nuevatabla.setattribute('id', 'nuevatabla'); nuevatabla.setattribute('summary', 'Descripción de la tabla y su contenido'); elementocaption = document.createelement('caption'); titulotabla = document.createtextnode('titulo de la tabla'); elementocaption.appendchild(titulotabla); nuevatabla.appendchild(elementocaption); // Sección head de la tabla (títulos de las columnas) seccionhead = document.createelement('thead'); nuevatabla.appendchild(seccionhead); seccionhead.insertrow(0); titulos1 = document.createelement('th'); titulos1.innerhtml = 'primero'; seccionhead.rows[0].appendchild(titulos1); titulos2 = document.createelement('th'); titulos2.innerhtml = 'segundo'; seccionhead.rows[0].appendchild(titulos2); titulos3 = document.createelement('th'); titulos3.innerhtml = 'tercero'; seccionhead.rows[0].appendchild(titulos3); document.body.appendchild(nuevatabla); }

10 Objetos del document Existen múltiples objetos que pueden ser obtenidos directamente como un arreglo. Forms Los formularios de la página document.forms[0] document.forms["id_formulario"] Images Las imágenes de la página Links document.images[0] document.images["logotipo"] Los enlaces de la página document.links[0]

11 La variable this La palabra reservada this se utiliza para referirse al elemento HTML sobre el que se está ejecutando un evento. <input name="color" type="button" onclick="cambiacolor(this);" value="color"/> function cambiacolor(elemento) { elemento.style.color = "#00ff00"; }

12 Los objetos y JSON Java Script Object Notation. Notación Sencilla Utilizado para transporte liviano de objetos. Esta encerrado entre llaves { } Pares propiedad : valor Número Array Funcion String Objeto JSON Propiedades separadas por comas Valor separado por dos puntos

13 JSON Ejemplo simple: La ultima propiedad:valor no tiene elemento de termino { } nombre: "Hector ", apellidos: "Palencia Primero, edad : 15

14 JSON Representando Vectores Un objeto JSON puede contener un vector en sus propiedades { } nombre: "Pedro ", apellidos: "Ferrera Santos", edad : 15, hijos:["laura","genaro"]

15 JSON alert ("el nombre es: " + datos.nombre + " y tiene " + datos.hijos.length + " hijos y su esposa se llama " + datos.esposa.nombre);

16 Nota Cuando se define un solo vector, también es considerado como JSON var paises = [ Mexico, Oaxaca, Veracruz"];

17 JSON Nota Cada elemento de un vector en JSON puede ser otro JSON var carreras=[ { nombre: "Turismo", duracion:4 }, { nombre: "Derecho", duracion:5 } ]; alert (carreras[0].nombre);

18 JSON con Funciones Un JSON puede contener funciones que pueden ser transportadas como cualquier otra variable. var datos={ nombre: "Pedro", apellidos: "Domingo Cedillo", edad : 15, mostrarmensaje:function(){ alert ("el nombre es: " + datos.nombre); }, limpiarmensaje:function(){ this.nombre = "" ; } }

19 Usos JSON Definir Enumeraciones Constantes Evitar problemas de escrituras Transportar objetos entre el cliente y el servidor a través de AJAX Recibe el objeto como String. Propiedad responsetext

20 JQuery Biblioteca ligera open source que simplifica la interaccion entre html y java Script

21 Incluir JQuery A partir de una red de contenidos Ventajas: Servidores optimizados para entregar el archivo desde el lugar físico mas cercano al usuario. Pueden mantener siempre la última versión. Reducir tráfico del servidor. Si el usuario ya navego por otra web con la misma red de contenido es probable que la librería este en la cache

22 Incluir JQuery <script type= text/javascript src= > </script>

23 <script type= text/javascript src= jquery ></script> Incluir JQuery

24 Selectores JQuery Etiquetas y clases Clase $( div.menu ) Etiquetas y id Clase $( div#menu )

25 Demo Date Picker $("#txtfecha").datepicker( { showon: "button", buttonimage: "images/calendar.gif", buttonimageonly: true } ); <input type="text" id="txtfecha"/>

26 $( "#niveleducativo" ).slider({ range: "max", min: 1, max: 5, value: 1, slide: function( event, ui ) { $( "#txtniveleducativo" ).val( ui.value ); } }); $( "#txtniveleducativo" ).val( $( "#niveleducativo" ). slider( "value" ) ); Demo Slider

27 Demo Slider <div id="niveleducativo"></div> <input type="text" id="txtniveleducativo" style="border:0; color:#f6931f; font-weight:bold; readonly="readonly"/>

28 Demo Autocompletado var origendedatos = ["Mexico,"Oaxaca,"DF,"Puebla", "GuanaJuato ]; $( "#txtlocalidad" ).autocomplete({ source: origendedatos }); <input type="text" id="txtlocalidad"/>