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: 29-01-2016.

Visitas este mes: 23

Visitas el mes pasado: 34

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.




15. Resumen (V)

15.5 Acceso al DOM (II)

javascript

Propiedades tipo array

El DOM tiene una serie de propiedades de tipo array que nos devuelven un array con todos los elementos que tienen una serie de características. Estas son:

Propiedades tipo array
Propiedad Explicación
document.links Devuelve un array con todos los enlaces que hay en el documento
document.forms Devuelve un array con todos los formularios del documento
document.images Devuelve un array con todas las imágenes del documento
document.anchors Devuelve un array con todos los enlaces tipo referencia (<a name="..">...</a>) del documento

En los siguientes apartados veremos este tipo de propiedades:

Acceso a enlaces

Mediante document.links accedemos a un array que contiene todos los enlaces de la página.

enlaces=document.links

El orden de los enlaces en el array es el mismo de aparición en el código de la página. Accedemos a cada enlace mediante su número en el array:

enlace1=enlaces[0]

Después podemos acceder a la ruta o al texto tanto en modo lectura como escritura:

Esto podemos aplicarlo también para las demás propiedades de tipo array, en las cuales podemos buscar los elementos por su posición.

Además en las propiedades de tipo array si la etiqueta HTML lleva el atributo name podemos usar su valor para buscarlo en el array:

Lenguaje Código
HTML <a href="http://google.es" name="buscador">ir a Google</a>
Javascript(1) ruta = document.links["buscador"].href
Javascript(2) ruta = document.links.buscador.href

El valor del atributo name es la referencia par buscar el enlace en el array.

Sin embargo, con los enlaces (document.link) la búsqueda por el atributo name no funciona en Internet Explorer, por lo que si queremos que se vea también en este navegador debemos hacerlo por el número de posición en el array.

Acceso a imágenes

Podemos acceder a todas las imágenes de la página mediante el array document.images

Una vez hemos accedido al array, podemos acceder a cada una de ellas mediante el número de posición en la página o mediante su atributo name, de la misma manera que hemos visto para los enlaces. El acceso mediante name sí que funciona en todos los navegadores, incluido Internet Explorer.

Ejemplo: Supongamos que la siguiente imagen con el siguiente código HTML es la primera de la página:

<img src="micoche.gif" alt="Este es mi coche" name="imagenCoche">

Podemos acceder a la imagen de cualquiera de estas tres formas:

Una vez que accedemos a la imagen podemos acceder a cualquiera de sus atributos, tanto para lectura como para escritura.

Código Explicación
var ruta = micoche.src; Lee la ruta de la imagen
micoche.src = "nuevoCoche.gif"; Cambia la ruta de la imagen y por tanto la imagen que visualizamos.
var comentario = micoche.alt; Lee el atributo alt
micoche.alt = "Mi coche nuevo"; cambia el valor del atributo alt

Acceso a enlaces de referencia

El acceso a los enlaces de referencia se hace mediante el array document.anchors.

Para acceder a los elementos de este array podemos hacer igual que con los arrays anteriores.

Al igual que sucede con el acceso a enlaces (document.links) el acceso mediante el atributo name no funciona con Internet Explorer. Veamos un ejemplo en el que el enlace de referencia tiene el siguiente código HTML y es el primero de la página:

<a name="ref1">Ir a sección primera</a>

Acceso para todos los navegadores:

Acceso a todos los navegadoes excepto Internet Explorer:

Una vez hemos accedido al elemento podemos acceder a sus atributos o al contenido del texto mediante innerHTML.

Acceso a formularios.

El acceso a los formularios de la página se hace mediante el array document.forms

Esto crea un array con los distintos formularios de la página. Para acceder a cada uno de ellos se procede como en los casos anteriores. En la etiqueta form ponemos el atributo name:

<form action="#" method="post" name="datos" > /* ... */ </form>

Suponiendo que sea éste el primer formulario de la página podemos acceder de cualquiera de estas formas:

Acceso a los campos del formulario

Dentro de cada formulario se crea un array elements con los elementos o campos que éste contiene. Podemos acceder a los campos del formulario mediante su posición en el array o mediante el atributo name:

Por ejemplo en el formulario anterior ponemos el primer campo:

Nombre: <input type="text" name="nombre" />

Podemos acceder a él de cualquiera de estas maneras :

Propiedades comunes a los campos de formulario

Una vez obtenido el elemento hay varias propiedades comunes que pueden sernos útiles:

Propiedades comunes a elementos de formulario
Propiedad Ejemplo de código Explicación
type tipo = elem1.type Indica el tipo de elemento. Normalmente coincide con el valor del atributo type. En los "textarea" su valor es textarea. En los "select" su valor puede ser select-one o select-multiple (sólo lectura).
form formulario1 = elem1.form Se accede al elemento padre o formulario (sólo lectura).
name valorName = elem1.name Se accede al valor del atributo name (sólo lectura).
value texto = elem1.value Permite leer y escribir el atributo value. En campos de texto ("text", "password", "textarea"), accedemos al texto escrito por el usuario. En campos de tipo botón ("submit","reset","button"), accedemos al texto escrito en el botón.

Acceso a campos de texto

En los campos de tipo texto se accede al texto escrito por el usuario mediante la propiedad .value, tal como se ha visto antes.

Acceso a botones radio

En un grupo de botones radio llevan todos ellos el mismo atributo name.

<form action="#" name="elegir">
<input type="radio" value="red" name="color" /> Rojo <br/>
<input type="radio" value="green" name="color" /> Verde <br/>
<input type="radio" value="blue" name="color" /> Azul <br/>
<input type="radio" value="black" name="color" /> Negro <br/>
</form>

El acceso mediante el atributo name crea un array en el que están todos los botones radio:

botones = document.elegir.color

Después con la propiedad checked aplicada a cada botón nos dirá si éste está seleccionado o no (devuelve true o false).

Mediante un bucle recorremos los elementos del array para comprobar cual está seleccionado. El código completo para el ejemplo anterior es el siguiente:

botones = document.elegir.color;
for (i=0; i<botones.length; i++) {
    valor = botones[i].checked;
    if (valor == true) {
        elegido = botones[i];
        }
    }
pulsado=elegido.value

En el código anterior obtenemos el botón pulsado en la variable elegido. Después mediante la propiedad value podemos distinguirlo de los demás.

Acceso a botones checkbox

Accedemos al botón checkbox mediante el atributo name, de la misma manera que a los demás elementos.

Después la propiedad checked nos dirá si el botón está seleccionado (true) o no (false). Ejemplo:

<form action="#" name="condiciones">
<p><input type="checkbox" name="aceptar" /> Acepto las condiciones.</p>
</form>

Comprobamos el botón mediante el siguiente código javascript:

function compruebaBoton() {
    boton=document.condiciones.aceptar;
    if (boton.checked==true) {
       acepto="si";
       }
    else {
       acepto="no";
       }
    return acepto;
    }

Tal como hemos hecho aquí lo normal es poner el código dentro de una función para llamarla cuando tengamos que comprobar el botón.

Acceso a listas desplegables simples

Lo que queremos saber al acceder a una lista desplegable es qué opción ha elegido el usuario. Para ello accedemos primero a etiqueta select, la cual llevará el atributo name. Tenemos por ejemplo el siguiente formulario.

<form action="#" name="elegir">
<select name="color">
  <option value="red">Rojo</option>
  <option value="green">Verde</option>
  <option value="blue">Azul</option>
  <option value="black">negro</option>
</select>
</form>

Accedemos primero a la etiqueta select:

lista = document.elegir.color

Mediante la propiedad options obtenemos el array con las opciones:

opciones = lista.options;

Mediante la propiedad selectedIndex obtenemos el número que ocupa en el array el primer elemento seleccionado.

num = lista.selectedIndex;

Ahora podemos acceder en el array al elemento seleccionado:

seleccionado = opciones[num];

Una vez tenemos el elemento podemos acceder al atributo value:

valor = seleccionado.value

También podemos acceder al texto de la etiqueta option mediante la propiedad text.

texto = seleccionado.text

Podemos resumir todos estos pasos mediante un código en el que los enlazamos:

valor = lista.options[lista.selectedIndex].value

Acceso a listas de selección múltiple

Para acceder a las listas de selección múltiple seguimos los mismos pasos que para las de selección simple hasta obtener el array de opciones.

Una vez obtenido el array de opciones, la propiedad selectedIndex no nos sirve, ya que solamente nos daría la primera opción seleccionada.

Sin embargo tenemos la propiedad .selected, que aplicada a los elementos del array nos devuelve true si éste está seleccionado, o false si no lo está. Para encontrar los elementos seleccionados recorreremos los elementos del array en un bucle, aplicando a cada uno de ellos la propiedad .selected. Con esto podemos encontrar los elementos que están seleccionados.

El objeto window

El objeto window o navegador tiene también sus métodos y propiedades. Podemos verlos todos en el Manual de Dom. Sin embargo aquí veremos aquellos con los que podemos realizar acciones en javascript.

Ventanas de alerta

Son aquellas en las que sale un mensaje en el que se alerta sobre algo de la página. Su apertura se realiza mediante los siguientes métodos del objeto window:

Método Ejemplo Explicación
alert() alert("hola mundo") Ventana de alerta que muestra el argumento.
prompt() nombre = prompt("como te llamas") Se muestra el argumento y un cuadro de dialogo para que el usuario escriba la respuesta. Ésta es guardada en una variable.
confirm() elige = confirm("acepta o cancela") Se muestra el argumento y dos botones de "aceptar" y "cancelar". al pulsar en los botones obtenemos en la variable los valores true o false.

Ventanas emergentes

Son aquellas que abren otra página en una ventana aparte. Éstas dependen del método open() de window.

El método tiene tres argumentos que son:

open("URL","nombre","propiedades");

El primer argumento es la ruta o URL hacia la página que queremos abrir.

El segundo argumento es un nombre arbitrario que le daremos a la ventana, por ejemplo "ventana1".

El tercer argumento es opcional, y es una lista de propiedades que puede tener la ventana. Éstas se escribirán seguidas y separadas por comas. Por ejemplo.

open("http://google.com","Google","width=400,height=250,toolbar=yes")

Veamos cuales son las propiedades que podemos poner en el tercer argumento:

propiedad Explicación
toolbar=yes/no Mostrar o no la barra de herramientas.
statusbar=yes/no Mostrar o no la barra de estado.
titlebar=yes/no Mostrar o no la barra de título.
menubar=yes/no Mostrar o no la barra de menús.
scrollbars=yes/no Mostrar o no las barras de desplazamiento.
resizable=yes/no Establece si se puede redimensionar el tamañó de la ventana. Sólo funciona en Internet Explorer.
width=num Ancho de la ventana en pixels (num = número de pixels).
height=num Alto de la ventana en pixels (num = número de pixels).
top=num Distancia en pixels (num) desde el borde superior de la pantalla al borde superior de la ventana.
left=num Distancia en pixels (num) desde el borde izquierdo de la pantalla al borde izquierdo de la ventana.

Historial de páginas

Podemos ir hacia atrás o hacia adelante en las páginas que hemos visitado anteriormente mediante el método history.go() de window.

Como argumento pasamos el número de páginas que queremos avanzar o retroceder. En este último caso el número será negativo. Por ejemplo:

history.go(-1);

Este código nos llevará a la página visitada antes de la actual.

Temporizadores

Dependiendo del objeto window hay una serie de métodos que nos permiten retrasar el tiempo en que se ejecuta una función, o hacer que ésta se repita a intervalos regulares de tiempo. Son los temporizadores.

setTimeout("funcion","tiempo")

Este método hace que una función se ejecute después de pasado un tiempo determinado. Para ello en el primer argumento se escribe el nombre de la función (sin los paréntesis), y como segundo el número de milisegundos de retardo.

setInterval("funcion","tiempo")

Este método hace que una función se ejecute repetidamente a intervalos regulares de tiempo. Para ello en el primer argumento se escribe el nombre de la función (sin los paréntesis), y como segundo el número de milisegundos entre cada intervalo.

Para parar los temporizadores puestos en marcha con los métodos anteriores haremos lo siguiente:

En primer lugar debemos guardar el método en una variable de referencia:

temp1=setInterval("repetir","3000");

El código anterior repite la función repetir() (la cual debemos haber creado previamente), cada 3 segundos. Para pararla usaremos el método clearInterval() de la siguiente manera:

clearInterval(temp1);

De la misma manera haremos con el método setTimeout(). Para detener la espera y que la función indicada no se ejecute, guardamos el método en una variable:

temp2=setTimeout("mostrar","10000")

En este ejemplo la función mostrar se ejecutará diez segundos después de haber leído el código. Si queremos pararla antes, para que no se ejecute, javascipt debe leer el siguiente código:

clearTimeout(temp2);

Convertir texto en código

El método eval(), convierte el texto que le pasemos en el argumento en código javascript y lo ejecuta. por ejemplo :

codigo="alert='hola mundo';";
eval(codigo);

El resultado será la ventana de alerta con el texto "hola mundo", ya que hemos convertido una cadena de texto en código javascript.

Redireccionar páginas

La propiedad location.href nos devuelve la URL o dirección de la página en la que estamos.

Si cambiamos la URL de la página, ésta se redireccionará a la página indicada

location.href="http://google.com";

Este código hace que la página se redireccione hacia Google.

Otros métodos y propiedades de window

Vemos aquí otros métodos y propiedades del objeto window que pueden ser interesantes para trabajar con javascript:

Método o propiedad Explicación
document.bgColor; Acceso o modificación del color de fondo de la página.
document.fgColor; Acceso o modificación del color del texto de la página.
document.title Acceso o modificación del título de la página (el que aparece en la pestaña del navegador).
document.lastModified Acceso a la fecha de la última modificación de la página.
navigator.userAgent Acceso a la información sobre el navegador y el sistema operativo que está usando el usuario.
screen.width Acceso al ancho de resolución de pantalla que está usando el usuario.
screen.height Acceso al alto de resolución de pantalla que está usando el usuario.





En la siguiente página veremos cómo se interactua con el usuario mediante los eventos.

Eventos



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