JavaScript_III - WordPress.com

JavaScript III
JavaScript, la POO y el DOM
Tablas HTML
DOM para HTML
Crear una tabla es una
incluye varias
tarea tediosa, por la gran
propiedades y
cantidad de nodos de
métodos para crear
tipo elemento y de tipo
tablas, filas y
texto que se deben crear
columnas
de
forma
dentro del DOM.
sencilla.
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
Métodos de <tbody>
Rows
insertRow(posicion)
deleteRow(posicion)
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
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(); }
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>
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();
}
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);
}
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]
La variable this
La palabra reservada this se utiliza para <input name="Color" type="button"
referirse al elemento HTML sobre el
onclick="cambiaColor(this);"
que se está ejecutando un evento.
value="Color"/>
function cambiaColor(elemento) {
elemento.style.color = "#00ff00";
}
Los objetos y JSON
Java Script Object Notation.
Número
Notación Sencilla
Array
Utilizado para transporte liviano de
objetos.
Funcion
Esta encerrado entre llaves { … }
Pares propiedad : valor
Propiedades separadas por comas
Valor separado por dos puntos
String
Objeto JSON
JSON

{
}
Ejemplo simple:
− La ultima propiedad:valor no tiene elemento de termino
nombre: "Hector ",
apellidos: "Palencia Primero”,
edad : 15
JSON
Representando Vectores
Un objeto JSON puede contener un vector en sus
propiedades
{
nombre: "Pedro ",
apellidos: "Ferrera Santos",
edad : 15,
hijos:["Laura","Genaro"]
}
JSON
alert ("el nombre es: " +
datos.nombre + " y tiene " +
datos.hijos.length + " hijos y su esposa se llama " +
datos.esposa.nombre);
Nota
Cuando se define un
considerado como JSON
solo
var paises = [“Mexico”,”Oaxaca”,”Veracruz"];
vector,
también
es
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);
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 = "" ;
}
}
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
JQuery
Biblioteca ligera open source que simplifica la
interaccion entre html y java Script
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
Incluir JQuery
<script type=“text/javascript”
src=“http://code.jquery.com/jquery-latest.js”>
</script>
Incluir JQuery
<script type=“text/javascript” src=“jquery”></script>
Selectores JQuery
Etiquetas y clases
 Clase
 $(“div.menu”)
Etiquetas y id
 Clase
 $(“div#menu”)
Demo Date Picker
$("#txtFecha").datepicker(
{
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
);
}
<input type="text" id="txtFecha"/>
Demo Slider
$( "#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
<div id="nivelEducativo"></div>
<input type="text"
id="txtNivelEducativo"
style="border:0; color:#f6931f; font-weight:bold;”
readonly="readonly"/>
Demo Autocompletado
var origenDeDatos = ["Mexico”,"Oaxaca”,"DF”,"Puebla",
"GuanaJuato”];
$( "#txtLocalidad" ).autocomplete({
source: origenDeDatos
});
<input type="text" id="txtLocalidad"/>