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: 40
Visitas el mes pasado: 107
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.
Vamos a realizar un pequeño script, el cual modificaremos a lo largo de la página para ver el comportamiento de las cadenas de texto.
En el tema anterior vimos el comportamiento de la instruccion alert
, la cual
abre una ventana de alerta en el navegador. En el siguiente script veremos tambien la instrucción prompt
,
la cual también abre una ventana, pero con un cuadro donde el usuario puede introducir información.
Esa información puede ser guardada en una variable para utilizarla luego.
Veremos también la instrucción document.write()
esta instrucción permite escribir
información en la página, pero para ello debemos colocar el script en el lugar de la página donde queremos
que se vea esa información (dentro del body). Si quieres realizar tú también el script,
copia el siguiente 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>Ejemplo 3.</title>
</head>
<body>
<h1>Presentación con javascript</h1>
<script language="javascript">
var presentacion = "Hola, bienvenido a mi página"
var pregunta = "¿Cómo te llamas?"
alert(presentacion)
var nombre = prompt(pregunta)
document.write("Hola " + nombre)
</script>
<p>Encantado de conocerte</p>
</body>
</html>
Para ver como queda la página pulsa en el siguiente enlace
Para realizar el script anterior hemos realizado los siguientes pasos:
presentacion
y pregunta
. Como estas variables
son cadenas de texto, definimos su valor escribiendo el texto entre comillas.alert
mandamos un primer mensaje al usuario
en una ventana. El mensaje consiste en el texto de la variable presentación
.prompt
abrimos otra ventana en la que en primer
lugar mostramos el contenido de la variable pregunta
y en segundo lugar,
mediante el cuadro de diálogo, el usuario le da un valor a la variable nombre
.document.write
insertamos en la página
el texto de saludo. Este consiste en una cadena de texto ("hola "
), a la que
se le añade la variable donde se ha guardado el nombre del usuario (nombre
);
fíjate que para unir dos cadenas de texto (o una cadena de texto y una variable),
utilizamos el signo " +
".La instrucción prompt
debe llevar siempre delante una variable en la
que almacenar el dato que nos pase el usuario. La instrucción prompt admite un
segundo elemento dentro del paréntesis, separado por una coma del primero, el
cual será lo que aparecerá dentro del cuadro de diálogo que rellena el usuario.
Veamos un ejemplo: el siguiente código javascript:
var a = prompt("como te llamas","escribe tu nombre")
lo veremos así: pulsa aquí para verlo
El lugar de la página donde hemos puesto el script no es aleatorio, ya que si te fijas, la página se ha cargado hasta el punto donde hemos puesto el script, el resto de la página se carga después de que el script se haya ejecutado.
Fíjate también que la cadena de texto "Hola "
lleva un espacio
en blanco en último lugar, esto es porque debe unirse a otra cadena de texto
que empieza por otra palabra, y entre esas dos palabras debe haber un espacio
en blanco.
Para incluir un texto (o variable) en cualquiera de las instrucciones anteriores
debemos pasarlo entre paréntesis después de escribir la instrucción ( alert("texto")
). Los
paréntesis, en cualquiera de estas instrucciones, son obligatorios, incluso si
no queremos poner ningún valor.
La instrucción document.write
lo que hace en realidad no es
añadir texto, sino código HTML, por lo que podemos mejorar el aspecto de la
página si en lugar de sólo texto añadimos código HTML y además le aplicamos
código CSS. El código podría ser el siguiente (en verde el código CSS y en
siena el Javascript);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ejemplo 4.</title> <style type="text/css"> h1 { font-family: verdana; text-align: center; color: purple; } p { font: 1.2em arial; color: navy; padding:0.3em 3em } </style> </head> <body> <h1>Presentación con javascript</h1> <script language="javascript"> var presentacion = "Hola, bienvenido a mi página" var pregunta = "¿Cómo te llamas?" alert(presentacion) var a = prompt(pregunta) document.write("<p>hola " + a + "</p>") </script> <p>Encantado de conocerte</p> </body> </html>
Aparte de añadir el código CSS, en la instrucción document.write
hemos añadido el código HTML que faltaba para tratar este texto como a un
parrafo. para ello hemos puesto la etiqueta <p>
como si fuera un texto más, ya que la
instrucción document.write
trata el texto que se le pasa como
código en HTML.
Para ver como queda ahora la página pulsa en el siguiente enlace
En la próxima página veremos como insertar algunos caracteres especiales, tales como comillas,saltos de línea etc.
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