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.
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Hasta ahora, si queremos poner algún elemento dentro de la página mediante
javascript hemos utilizado la instrucción document.write
, la cual
nos obliga a escribir el script justo en el punto de inserción. Veremos
ahora otras instrucciones mediante las cuales, primero localizamos el
punto de la página que queremos modificar, y después insertamos ahí
un nuevo elemento. Con esto el punto de inserción del script es independiente del
lugar en donde se va a insertar.
Aunque hay otras formas de insertar los elementos hechos con javascript en la página, ésta suele ser la más habitual:
En primer lugar, el código HTML que queremos modificar debe llevar una etiqueta id: Ejemplo :
<p id="cambiar">Texto a modificar con javascript</p>
Luego en el código javascript, buscamos el elemento con la instrucción:
document.getElementById("cambiar");
con esta instrucción el navegador buscará en el documento (document
) aquel
elemento que tenga en su atributo id
el valor indicado dentro del paréntesis,
el cual debemos escribirlo entre comillas (podemos pasar éste valor como una variable de texto,
en este caso no usaremos comillas).
Guardamos después el resultado obtenido en una variable; es decir, el acceso al elemento de la página se guarda en una variable para poder trabajar con él de una manera simple. Esto lo haremos así:
var elemento = document.getElementById("cambiar")
Una vez hemos accedido al elemento podemos ver o cambiar su contenido mediante la
propiedad innerHTML
de la siguiente manera:
var elemento = document.getElementById("cambiar")
var contenido = elemento.innerHTML
En la primera línea buscamos el elemento mediante getElementById(" ")
,
y en la segunda línea accedemos al contenido del elemento mediante innerHTML
Podríamos haberlo puesto todo en una línea, accediendo directamente al contenido del elemento, de la siguiente manera:
var contenido = document.getElementById("cambiar").innerHTML
Fíjate que para acceder a un elemento partimos desde el nivel más general de la
página (document
), hasta llegar al contenido concreto. Cada paso lo
escribimos separándolo del anterior por un punto ( .
).
El código anterior nos ha permitido leer el contenido del elemento, pero mediante este código podemos también cambiar o modificar el contenido del elemento.
Para cambiar el contenido de un elemento, seguiremos los siguientes pasos:
En primer lugar debemos crear el contenido nuevo que queremos que tenga el elemento, y guardarlo en una variable: ejemplo:
var texto = "Nuevo texto para este elemento"
Después accedemos al elemento al que queremos cambiar su contenido. y lo guardamos en una variable.
var elemento = document.getElementById("nombre_id")
Por último damos al elemento el nuevo valor que hemos guardado, mediante la
propiedad innerHTML
:
elemento.innerHTML = texto
Si lo que queremos es ampliar el elemento añadiendo más contenido al ya extistente, lo que haremos será seguir los mismos pasos que para cambiar el contenido, pero en lugar de sustituirlo, sumamos el contenido anterior con el nuevo:
var texto = "Añadir este texto al elemento"
var elemento = document.getElementById("nombre_id")
Hasta aquí el código empleado es el mismo que en el punto anterior, ahora
en lugar de usar el signo igual ( =
), usaremos el operador de
asignación con suma ( +=
), con lo cual al contenido ya existente
le añadiremos el contenido nuevo.
elemento.innerHTML += texto
Mostraré aquí una página de ejemplo en la que se ve el uso de esta instrucción para leer, cambiar o modificar texto. Como siempre, daremos primero el código de la página.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Acceder al documento.</title> <style type="text/css"> #texto1, #texto2, #texto3 { font: bold 0.9em arial; color: blue; } </style> </head> <body> <h1> Acceder al documento.</h1> <p id="texto1"> Este texto debe ser leido por javascript</p> <p onclick="alert(contenido1)">Pulsa aquí para leer el texto anterior.</p> <p id="texto2">Este texto debe ser sustituido por el código javascript.</p> <p onclick="elemento2.innerHTML = texto2">Pulsa aquí para cambiar el texto anterior.</p> <p id="texto3">Este texto debe ser ampliado mediante código Javascript.</p> <p onclick="elemento3.innerHTML += texto3">Pulsa aquí para ampliar el texto anterior.</p> <script type="text/javascript"> //lectura del elemento 1 elemento1 = document.getElementById("texto1") contenido1 = elemento1.innerHTML //sustituir el elemento 2. El último paso está en la instrucción onclick var texto2 ="este es el texto ya cambiado" elemento2 = document.getElementById("texto2") //Ampliar el elemento 3. El último paso en la instrucción onclick var texto3 = "Y esta es la frase para la ampliación del texto." var elemento3 = document.getElementById("texto3") </script> </body> </html>
Para ver la como queda la página pulsa en el siguiente enlace:
En el código anterior está destacado en verde el código CSS y en color siena el código de javascript. Observa que hemos puesto también unos comentarios en el código javascript. Estos los hemos destacado con un color lila y letra en itálica.
El código javascript aplicado es el explicado anteriormente para leer, cambiar o
añadir elementos mediante la instrucción innerHTML
, las últimas instrucciones
las hemos puesto en los atributos onclick
para que el cambio se produzca
cuando pulsamos el ratón encima de esos párrafos.
El script está puesto al final de la página, porque la instrucción getElementById
requiere que se haya cargado la página (o al menos la etiqueta a que se refiere) para que éste se ejecute.
Si cargamos el script antes que la etiqueta, éste no funcionará.
En temas posteriores veremos como solucionar estos problemas, y que el script funcione poniendo el código en cualquier punto de la página.
La instrucción innerHTML
junto con document.getElementById()
no
es el único método de acceder y cambiar los elementos de la página. En temas posteriores
veremos otros métodos.
En la página siguiente veremos cómo guardar los datos o variables en unas estructuras parecidas a las listas, éstas se llaman arrays
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