Entendido.

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

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++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

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

Visitas el mes pasado: 107

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.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

2. Los datos (II)

2.2 Cadenas de texto

Script con textos

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

Presentación

Para realizar el script anterior hemos realizado los siguientes pasos:

Declaramos las variables que vamos a utilizar: presentacion y pregunta. Como estas variables son cadenas de texto, definimos su valor escribiendo el texto entre comillas.
mediante la instrucción alert mandamos un primer mensaje al usuario en una ventana. El mensaje consiste en el texto de la variable presentación.
Mediante la instrucció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.
Mediante la instrucción 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.

Mejorar el script

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

Presentación mejorada

En la próxima página veremos como insertar algunos caracteres especiales, tales como comillas,saltos de línea etc.

Caracteres especiales

manual de Javascript

Anterior siguiente ... Siguiente