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

Visitas el mes pasado: 159

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.




2. Los datos (II)

2.2 Cadenas de texto

Script con textos

javascript

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:

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