|
|
Línea 134: |
Línea 134: |
| <div class="slide"> | | <div class="slide"> |
| ====Arbol de nodos==== | | ====Arbol de nodos==== |
| + | |
| + | [[Archivo:dom_html.png|300px|thumb|left|Estructura de documento html según estándar DOM ]] |
| <source lang="html4strict"> | | <source lang="html4strict"> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Línea 147: |
Línea 149: |
| | | |
| </source> | | </source> |
− | [[Archivo:dom_html.png|300px|thumb|left|Estructura de documento html según estándar DOM ]]
| |
| </div> | | </div> |
| <div class="slide"> | | <div class="slide"> |
Revisión de 12:36 28 sep 2012
javaScript
Tutorial para desarrollar en Web mediante JavaScript
Programación Orientada a Objetos. DOM.
JavaScript es un lenguaje POO*
- Presenta objetos que se pueden usar
- Permite crear tus propios objetos y tus propios tipos de variables (JavaScript Avanzado)
- Un objeto es un tipo especial de dato que tiene
- Propiedades
- Métodos
*POO = programación orientada a objetos
OOP = object oriented programming
Propiedades
Valores que se asocian con los objetos. Ejemplo con el objeto String:
<script type="text/javascript">
var txt="¡Hola Pepito!";
document.write(txt.length);
</script>
Métodos
Acciones que se ejecutan sobre objetos. Ejemplo con el objeto String:
<script type="text/javascript">
var str="¡Hola Pepito!";
document.write(str.toUpperCase());
</script>
Objeto Date
Para trabajar con fechas y horas.
Se inicializa automáticamente en la declaración, con la fecha y hora actuales.
var miFecha=new Date()
//Ejemplos de uso:
miFecha.setFullYear(2010,0,14); //fija la fecha a 14 de Enero de 2010
miFecha.setDate(myDate.getDate()+5); //aumenta la fecha guardada en 5 días
var miFecha=new Date(); //vamos a hacer una comparación de fechas
miFecha.setFullYear(2010,0,14);
var hoy = new Date();
if (miFecha>hoy)
{
alert("Hoy es antes del 14 de Enero del 2010");
}
else
{
alert("Hoy es después del 14 de Enero de 2010");
}
Objeto Array
Varias posibilidades para declararlas e inicializarlas:
var misCoches=new Array();
misCoches[0]="Saab";
misCoches[1]="Volvo";
misCoches[2]="BMW";
var misCoches=new Array(3);
misCoches[0]="Saab";
misCoches[1]="Volvo";
misCoches[2]="BMW";
var misCoches=new Array("Saab","Volvo","BMW");
Presentan numerosos métodos para hacer las operaciones más habituales, por ejemplo, ordenamiento (método sort):
var arr = new Array(6);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
arr[5] = "Tove";
document.write(arr + "<br />");
document.write(arr.sort());
Resultado:
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove
DOM
Qué es el DOM
- Es un estándar de la W3C.
- Es una abreviatura de HTML Document Object Model.
- Consiste en un conjunto de objetos para los html y una forma estándar para acceder y manipular las páginas (documentos html).
- HTML DOM no depende de ninguna plataforma ni lenguaje de programación determinado. DOM es una utilidad disponible también para otros lenguajes como Java y PHP.
- Alguno de los objetos son Document, Image, Body, Form, Frame, Iframe, etc.
- Cada objeto puede tener una colección de objetos asociados, unas propiedades y unos métodos.
Ejemplo: Objeto document
<html>
<body>
<img border="0" src="imagen1.gif" width="48" height="48">
<br />
<img border="0" src="imagen2.gif" width="107" height="98">
<br /><br />
<script type="text/javascript">
document.write("Este documento contiene: ")
document.write(document.images.length + " imágenes.")
</script>
</body>
</html>
Arbol de nodos
Estructura de documento html según estándar DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
Acceso a los nodos
- Acceso directo
- A través de sus nodos padre
//buscaremos todos los parrafos a partir del elemento document
var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}
var parrafoEspecial = document.getElementsByName("especial");
var cabecera = document.getElementById("cabecera");
Creación de nodos
// Crear nodo de tipo Element
var parrafo = document.createElement("p");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
Eliminación de nodos
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
<p id="provisional">...</p>