Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 49
Visitas el mes pasado: 104
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
En la página 4.1. Insertar elementos vimos
ya el funcionamiento de la propiedad innerHTML
, sin embargo por la
importancia que tiene esta propiedad para insertar elementos debemos hacer unas
aclaraciones.
La propiedad innerHTML
en principio no inserta un nuevo elemento,
sino que cambia el código HTML que hay dentro de ese elemento. Por tanto lo que
se escribe dentro de la etiqueta de referencia es código HTML que quedará encerrado
dentro de esa etiqueta. Si quitamos todo el código (mediante innerHTML = ""
),
la etiqueta no desaparece, sino que se queda vacía.
Así dentro del código que escribamos, podemos poner otras etiquetas, que quedarán anidadas a la de referencia, también podemos escribir atributos a esas etiquetas; estas etiquetas pasarán a formar parte de la estructura del DOM. por lo que esta es también una forma de crear nuevas etiquetas y nuevos atributos.
Hay algunas etiquetas a las que se puede acceder de forma directa, desde el objeto
document.. normalmente después de escribir document.
se escribe el
tipo de etiqueta a la que se va a acceder. Por ejemplo, para acceder a los enlaces de
la página escribimos document.links
el resultado es un array que
contiene todos los enlaces de la página.
En concreto se puede acceder de esta manera a los enlaces, las imágenes, y los formularios. En esta página veremos los enlaces y las imágenes. A los formularios, por su complejidad y su importancia, se les dedicará un tema aparte.
El objeto document.links
nos da acceso a todos los enlaces de la página.
El resultado es un array que contiene todos los enlaces en el orden en que aparecen.
Si escribimos:
var enlaces = document.links;
La variable enlaces
será un array que contendrá las direcciones o URLs hacia
las que apuntan las páginas. Si queremos ver el texto del enlace que aparece en la página,
(sobre el que pulsamos para ir al enlace), debemos usar la propiedad innerHTML. Así por
ejemplo si el primer enlace tiene el siguiente en el código HTML:
<a href="http://www.google.es">Enlace a Buscador</a>
en el código javascript las siguientes sentencias darán el siguiente resultado:
enlace = document.links[0].href;
La variable enlace
Tendrá como valor "http://www.google.es"
texto = document.links[0].innerHTML;
La variable texto
tendrá como valor "Enlace a Buscador"
Si queremos cambiar la dirección URL lo haremos de la siguiente manera:
document.links[0].href = "http://es.yahoo.com/"
Esto cambiaría la URL del primer enlace el cual ahora apuntaría hacia la página indicada.
Esta es una página de ejemplo en la se accede a los enlaces, este es su código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Acceso a enlaces</title> <style type="text/css"> #cuadro { width: 400px; height: 200px; border: 1px black solid; float: right; font-family: arial; } p { font-size: 1em; font-family: arial; } </style> <script type="text/javascript"> function mostrar(num) { var caja = document.getElementById("cuadro"); var todos = document.links; var texto = ""; if (num == 0 ){ for (i=0;i<todos.length;i++){ texto += todos[i] + "<br/>"; } } else { for (i=0;i<todos.length;i++){ texto += todos[i].innerHTML + "<br/>"; } } caja.innerHTML = texto } function cambiar(){ direccion = "http://www.youtube.com" document.links[3].innerHTML = "YouTube" document.links[3].href = direccion } </script> </head> <body> <h1>Acceso a los enlaces</h1> <div id="cuadro"></div> <h2>Enlaces a varias páginas</h2> <p><a href="http://www.google.com">Google</a></p> <p><a href="http://www.yahoo.es">Yahoo</a></p> <p><a href="http://es.msn.com/">MSN</a></p> <p><a href="http://es.altavista.com/">Altavista</a></p> <p onclick="mostrar(0)">Ver Direcciones URL</p> <p onclick="mostrar(1)">Ver Texto del Enlace</p> <p onclick="cambiar()">Cambiar cuarto enlace a YouTube</p> </body> </html>
Puedes ver esta página de ejemplo en el siguiente enlace:
El acceso a las imágenes de la página puede hacerse también de forma parecida a como se
accede a los enlaces, en este caso si escribimos document.images
se crea un
array que contiene todas las imágenes de la página.
Para ver o guardar la imagen en el navegador debemos añadir el atributo que
indica el vínculo a dicha imagen (src
), lo que se guarda en realidad es la
ruta o URL hacia la imagen, que puede emplearse luego para mostrarla de nuevo:
imagen = document.images[0].src
En este ejemplo la variable imagen
guarda la ruta de acceso a la imagen.
También podemos cambiar la imagen inicial por otra cambiando la ruta de acceso del atributo
src
. Esto podemos hacerlo directamente o habiendo guardado la ruta anteriormente
en una variable (en este segundo caso al escribir el nombre de la variable no pondremos comillas).
document.images[0].src = "objetos/imagen2.jpg"
Esta sentencia cambiará la imagen inicial por la indicada en el código javascript.
El objeto document.images
tiene también la particularidad de que podemos acceder también
a las imágenes por el nombre que le hayamos dado en el atributo name
. Esto nos da
más seguridad de acceder a la imagen deseada, ya que si cambiamos el código de la página, o el
orden de las imágenes en la página, sabemos que seguiremos accediendo a la misma imagen: por ejemplo
en el código HTML siguiente:
<img src="objetos/foto.jpg" alt="una foto" name="foto">
Para acceder a la imagen mediante javascript podemos hacerlo así:
foto = document.images["foto"];
Al igual que en el caso anterior, debemos poner después el nombre del atributo al que queremos acceder después de acceder a la imagen.
En esta página creamos un sencillo visor de imágenes, en el que se muestran en pequeño todas las imágenes, y en grande aquella sobre la que pulsemos. El código de la página es el siguiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Acceso a imágenes:</title> <style type="text/css"> #muestras img { width: 100px; margin: 10px 30px; cursor: pointer, hand; } #visor { text-align: center; float: right; margin: 0 20px } #pantalla { width: 500px; padding: 30px; border: 5px double green; background-color: #f4f0c9; } </style> <script type="text/javascript"> function muestra(num) { imagen = document.images[num].src comentario = document.images[num].alt grande = document.images["pantalla"] texto = document.getElementById("descripcion") grande.src = imagen texto.innerHTML = comentario } </script> </head> <body> <h1>Acceso a imágenes. Pulsa sobre la imagen para verla en grande</h1> <div id="visor"> <h3 id="descripcion">Barca de pesca</h3> <img src="../objetos/muestra1.jpg" alt="Barca de pesca" id="pantalla"/> </div> <div id="muestras"> <img onclick="muestra('primera')" name="primera" src="objetos/muestra1.jpg" alt="Barca de pesca" /> <img onclick="muestra(2)" src="objetos/muestra2.jpg" alt="Casa de campo" /> <img onclick="muestra(3)" src="objetos/muestra3.jpg" alt="Papagayos" /> <img onclick="muestra(4)" src="objetos/muestra4.jpg" alt="Prueba de motocrós" /> </div> </body> </html>
Como es evidente, para que la página funcione habrá que haber guardado las imágenes en la carpeta objetos que está en el mismo nivel que la página.
En el navegador, esta página la veremos así:
Fíjate que en la página no sólamente accedemos a la ruta de la imagen para poder cambiarla,
sino que también accedemos al atributo alt
para usarlo como título de la imagen.
Hemos visto hasta ahora los principales métodos y propiedades del DOM para trabajar con javascript. Nos falta todavía ver la forma especial de acceder al DOM en los formularios, lo cual lo veremos en el tema 7. Formularios, y los métodos que dependen directamente del navegador u objeto window.
Por la importancia que tiene el DOM hay también en la sección de programación un Manual de DOM, donde se amplia lo explicado en este tema, y aparecen algunas cosas que aquí no se han explicado.
En la próxima página veremos como modificar y crear ventanas, y otros elementos que dependen directamente del objeto window o navegador.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com