Página inicial  

trans_770 trans_160

Unidad 15. Programación Javascript, Java, PHP y ASP (I)

Vamos a ver cómo se pueden incluir programas en nuestras páginas web. Aunque el objetivo de este curso no es este, vamos a explicar un poco qué posibilidades tiene el usuario para programar sus propias páginas web y de incluir alguno de los programas disponibles gratuitamente en la red.

Javascript. ¿Qué es? ¿Para qué sirve?

 

Javascript es un lenguaje de programación creado en sus orígenes por Netscape para ampliar las posibilidades del HTML. Gracias a él, podemos incluir pequeños programas que se ejecutan en el ordenador del usuario, permitiendo cierta interactividad entre el usuario y la página web. Por ejemplo, si tenemos un formulario que el cliente ha de rellenar, podemos desarrollar un Javascript que se encargue de verificar que todos los datos son correctos y de avisar al cliente si falla alguno, antes de enviar el formulario.

Así ahorramos tráfico innecesario de páginas web. Javascript debe ser soportado por el navegador. Debido a que existen diversas versiones, es posible que nuestro navegador o el del usuario no soporte la versión de Javascript que usemos. En ese caso, el código de Javascript es ignorado.

Javascript. Mini-manual.

 

Los scripts de Javascript son insertados en la página web de la misma forma que escribimos código HTML, por tanto es posible programar con cualquier editor de textos o desde la vista HTML de FrontPage. Debemos indicarle al navegador dónde se encuentra el script con las etiquetas <SCRIPT> y </SCRIPT>. Veamos un ejemplo:

<HTML>
   
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>

<BODY>

<SCRIPT LANGUAJE="Javascript">
               document.write("<H1>Esto es una cabecera.</H1>");
    </SCRIPT>

</BODY>
   
</HTML>

Primero le indicamos al navegador que el lenguaje del script será Javascript (existen otros lenguajes de script menos populares). Para ello lo indicamos con LANGUAJE.

Después escribimos el código (en rojo) dentro de las etiquetas <SCRIPT>.

Este script muestra por pantalla un texto de cabecera:

Esto es una cabecera

Pero lo que da sentido a un script es la posibilidad de asociarlo a un evento. Un evento se da cuando se abre una ventana, cuando se cierra, cuando el usuario pulsa un botón, etc. Es un mensaje que el sistema operativo le pasa al navegador, informandole que el usuario ha hecho algo.

Vamos a ver un ejemplo sencillo: al pulsar en un botón, se abre una ventana. Para ello nos aprovecharemos de algunas funciones y objetos que nos proporciona Javascript: el objeto window, que representa la ventana del navegador, y la función window.open(), que nos permite abrir ventanas.

<HTML>
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>

<BODY>
        <TABLE>
        <tr>
        <td width="85%" align="center">

        <input type="button" value=" Ver ejemplo " name="B9" style="font-family: arial" 
         onClick = "window.open('pagina_pruebas.htm','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=300,height=250')">

        </TABLE>

</BODY>
</HTML>

Este script muestra un botón. Al hacer clic en él, muestra otra página en otra ventana aparte. El script ya viene implementado en el navegador, y se asocia al botón con onClick(). window.open abre una nueva ventana, y pasa como parámetros al navegador varios valores que configurarán la ventana (resizable: que pueda cambiar de tamaño, width y height: el tamaño (ancho, alto), etc).

Pulsa el botón y comprueba que funciona

Javascript. Adaptar el Javascript a la página.

Existen multitud de scripts en Javascript gratuitos disponibles en la red. Pero, ¿cómo usarlos en nuestras páginas? Generalmente un código en Javascript se divide en dos partes: la que va entre las etiquetas <HEAD> y las que va entre las etiquetas <BODY>.

Las primeras son puro código, mientras que las segundas especifican a qué se aplica el código de las primeras. Por tanto, no importa mucho donde coloquemos el código que va entre las <HEAD> siempre que esté allí. En cambio, el código que va entre las <BODY> se aplicará a un objeto (o creará uno nuevo) y hemos de colocar el código justo donde lo necesitemos. Todo esto suele ir explicado en la página web dónde obtenemos el código.

Tomemos por ejemplo el siguiente código de una página web personal (a la izquierda). Vamos a insertar un código Javascript (a la derecha) que saluda a nuestros visitantes, variando el texto según la hora del día. En la web se nos pide que insertemos el código entre las etiquetas <BODY>.

<HTML>
   
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>

<BODY>

<p>Bienvenido a mi web personal.</p>

</BODY>
   
</HTML>

 


<script LANGUAGE="JavaScript">
var dt = new Date();
var hr = dt.getHours();
var msg = ((hr<12) ? "Buenos dias" :"Buenas Noches");
msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg);
msg=" <H2> "+msg+" !</H2>";
document.write(msg);
</script>

La forma correcta de insertar el código (siempre desde la vista HTML) es la siguiente:

<HTML>
   
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>

<BODY>

<script LANGUAGE="JavaScript">
      var dt = new Date();
      var hr = dt.getHours();
      var msg = ((hr<12) ? "Buenos dias" :"Buenas   Noches");
      msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg);
      msg=" <H2> "+msg+" !</H2>";
      document.write(msg);
     </script>

<p>Bienvenido a mi web personal.</p>

</BODY>
   
</HTML>

ejemplo

Pulsa el botón y comprueba que funciona.






   

Pág. 15.1

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Abril - 2005.