4.3 manipulacion de objetos
El Modelo de Objetos de Documento (DOM - Document Object Model -) describe cómo todos los elementos en una página HTML, tales como campos de entrada, imágenes, etc, se relacionan con la estructura más alta: el propio documento. Llamando al elemento por su nombre correcto DOM, podemos influir en él mediante un lenguaje de programación, e,g. Javascript, Java, etc.
JavaScript por si solo tiene muchas limitaciones pero se han desarrollado muchas y excelentes librerias que le han dado realmente contenido dinámico al desarrollo web. jQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado del cliente, en Javascript, compatibles con todos los navegadores.
jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos usar opcionalmente si queremos facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery como framework o incluso como un API de funciones, útiles en la mayoría de proyectos web.
La gran difusión de Ajax y Javascript es notable en muchos proyectos en Internet. Sin embargo hay que considerar que algunos navegadores tienen deshabilitado Javascript por defecto. Lo cual hace necesario que se habilite en cada máquina cliente.
Para que estos códigos funcionen en Mozilla Firefox es necesario
1.Selecciona “Herramientas”
2.Selecciona “Opciones”
3.Selecciona “Contenido”
4.Selecciona la casillla de ‘Habilitar JavaScript’ y darle clic en OK
write
Permite escribir texto html desde Javascript. El texto se escribe directamente el body del html.
Es la forma más fácil de escribir HTML desde Javascript, lo cual no quiere decir que es la mejor manera de escribir código HTML desde Javascript o incluso que va a trabajar en todas las situaciones. De hecho, el método document.write es muy limitado en lo que puedes hacer con él.
El lector debe considerar que document.write sólo funciona con las página que el navegador procesa como HTML.
Ejemplo: Imprimir un mensaje y abrir una nueva ventana mediante DOM
Las cadenas en Javascript son objetos y por lo tanto tienen métodos y atributos. En las líneas 4 y 5 se presenta ejemplos de ellos que facilmente pueden deducir su finalidad.
La línea 6 imprime la cadena en el body.
La línea 8 abre una página nueva, la función open tiene como parámetros la página que abrira, y el lugar donde lo hará en este caso _self sustituye la página actual
<body>
<script>
var mensaje = '¡Hola mis estimados y finos alumnos!. Buen dia';
mensaje = mensaje.toUpperCase). bold(). italics);
mensaje = mensaje.fontsize(6).fontcolor('red');
document.write(mensaje);
if(confirm('¿Abrir HomePage del curso?') )
window.open('http://www.prograweb.com.mx/pwebCompetencias','_self');
</script>
</body>
Ejemplo: form Modifica el valor del elemento indicado que esta contenido en una forma.
getElementById
Permite obtener la referencia a un elemento de la página mediante el id de dicho elemento.
Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades
<head>
<title>getElementById</title>
<script>
function cambiarColor( color ) {
var elemento = document.getElementById('parrafo');
elemento.style.font = 'bold italic 16 pt Verdana';
elemento.style.color = color;
}
</script>
</head>
<body>
<p id='parrafo'>Mis colores favoritos. ¿Adivina por qué?</p>
<button onclick = 'cambiarColor('blue');'>Azul</button>
<button onclick = 'cambiarColor('red');'>Rojo</button>
</body>
Descargar
Ejecutar
innerHTML
Sirve para obtener o modificar el HTML del documento HTML. Se utiliza la propiedad InnerHtml para modificar mediante programación el contenido interno entre las etiquetas de apertura y cierre de un control de servidor HTML.
La propiedad InnerHtml no codifica automáticamente los caracteres especiales en entidades HTML, es el programador el responsable de hacerlo.
Ejemplo: Crear una lista con viñetas no ordena en forma dinámica
En la línea 4 creamos un vector de días de la semana.
En la línea 11 modificamos el contenido del elemento llamado contenedor.
<body>
<div id='contenedor'></div>
<script>
dias = new Array('Lunes','Martes','Miércoles','Jueves',
'Viernes', 'Sábado', 'Domingo');
HTML = '<ul>';
for(i = 0; i < dias.length; i++) {
HTML += '<li>' + dias[i] + '</li>';
}
HTML += '</ul>';
document.getElementById('contenedor').innerHTML = HTML;
</script>
</body>
Descargar
Ejecutar
Crear y accesar elementos
Para crear etiquetas "tag" html debemos usar el método createElement(). Cuya sintaxis es la siguiente:
createElement( tag )
Donde tag es una etiqueta valida en html.
Si necesitamos agregar un nodo es necesario usar el método appendChild(). El cual agrega un nodo al final del arbol. La sintaxis es
appendChild( tag )
El método insertBefore tiene un comportamiento similar al de appendChield, solo que el nodo agregado es puesto antes del padre. La sintaxis es
insertBefore( nuevo tag, referencia )
Ejemplo: Agregar elementos a un documento
HTML
Los elementos son agregados mediante el evento onclick (Línea 7)
La línea 8 declara un elemento div vacio cuya función es servir de contenedor
Javascript
En la línea 5 se crea un objeto de tipo div
El objeto nuevoElemento hereda todas las características de div, por ejemplo innerHTML, color, fontSize.
Se crea una instancia del contenedor
Para agregar los elementos al contenedor usamos appenChild
HTML
JavaScript
Ejecutar
<!DOCTYPE html>
<html lang='es'>
<head>
<script src='0403createElement.js'></script>
</head>
<body>
<button onclick='sumarHijo();'>Sumar un nuevo elemento</button>
<div id='contenedor'></div>
</body>
</html>
Ejemplo: Uso de area shape y onMouseOver
HTML
Ejecutar
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8' />
<script>
function escribe(texto) {
document.getElementById('descripcion').innerHTML=texto;
}
</script>
<link href='basico.css' rel='stylesheet' />
</head>
<body>
<p class='centrado'>
<img src ='0403Mujer.jpg' alt='Mujer' usemap='#mapa' /></p>
<map name='mapa'> <area shape='rect' coords='251,187,304,223'
onmouseover="escribe('Las manos forman parte de las extremidades del cuerpo humano, están localizadas en los extremos de los antebrazos, son prensiles y tienen cinco dedos cada una. Abarcan desde la muñeca hasta la yema de los dedos en los seres humanos..')" />
<p id='descripcion'>Conoce más del cuerpo de está hermosa chica</p>
</div>
</body>
</html>
Ejemplo: Uso de los eventos onmouseover y onmouseout
HTML
JavaScript
Ejecutar
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8' />
<title>onmousemove</title>
<script src='0403onmousemove.js'></script>
<link href='0403onmousemove.css' rel='stylesheet' />
</head>
<body>
<p class='imagenes'><img alt='' name='foto' src='img/carro01.gif'
onmousemove='mostrar(1)' onmouseout='mostrar(0)'></p>
</body>
</html>
Pagina:
Video:
https://www.youtube.com/watch?v=fJqU1WGjGVo
No hay comentarios.:
Publicar un comentario