Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 49

Visitas el mes pasado: 104

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF


Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Acceso al DOM (V)

5.5 Enlaces e imágenes.

javascript

Propiedad innerHTML

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.


Acceso a etiquetas concretas

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.


Acceso a los enlaces de la página.

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.


Ejemplo de página en el que se accede a los enlaces

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:

Ejemplo de acceso a enlaces.



Acceso a imágenes.

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.


Ejemplo de página en el que se accede a las imágenes:

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í:

Ejemplo de acceso a imágenes.


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.


Más sobre el DOM

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.

Ventanas



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com