Anterior
Introducción
Uso de JavaScript Siguiente
Aplicaciones

En esta sección:
  1. El tag <SCRIPT>
  2. Ficheros externos
  3. Expresiones para atributos HTML.
  4. Manejadores de Eventos
  5. El tag <NOSCRIPT>
  6. Ejemplos


Los programas en JavaScript se ejecutan en el propio navegador y van literalmente escritos dentro de una página en HTML, es decir, formando parte del propio código HTML de dicha página; lo cual nos lleva a escribir el programa en JavaScript al mismo tiempo que creamos la página HTML.

En esta sección vamos a ver las distintas formas que existen de insertar las sentencias de un programa en JavaScript dentro del documento HTML, a saber:

Pasemos a ver cada una de estas vías para insertar las sentencias de JavaScript. A medida que vayamos viendo cada una de ellas veremos que no son excluyentes, sino que dentro de una misma página podremos (y en algunos casos deberemos) usar varias de ellas al mismo tiempo.


1. El tag <SCRIPT> Indice 

Esta es la forma más usual para hacer uso de JavaScript en una página web. En pocas palabras este método consiste en poner el código del programa en JavaScript anteponiendo al mismo el tag <SCRIPT> y postponiendo el tag </SCRIPT>. Para verlo más claro, he aquí un primer ejemplo:

EJEMPLO 2.1.1:
      <HTML>
      <HEAD>
      <TITLE>El primer ejemplo en Javascript</TITLE>
      </HEAD>
      <BODY>
      
      Esto es una página html <B>normal</B>, que incluye
      un pequeño trozo de código en JavaScript:<P>
      
      <SCRIPT>
      document.writeln( "Esto esta escrito usando JAVASCRIPT!!<P>" );
      </SCRIPT>
      
      Esto es <B>todo</B>
      
      </BODY>
      </HTML>
      

El uso del tag <SCRIPT> es idéntico al de cualquier otro tag, con la particularidad de que no solo se puede usar en la parte body de la página, sino tambié en la parte head.

Como cualquier otro tag, <SCRIPT> tiene atributos que podemos establecer al poner la etiqueta. Uno de esos atributos es LANGUAGE que establece la versión de JavaScript en la cual está escrita el programa. Los posibles valores para este atributo son:

NetScape 4.0 y posteriores ejecutan programas escritos en todas las versiones de JavaScript, mientras que NetScape 2.0, por ejemplo, ignora el código cuando en el tag se especifica que está escrito en JavaScript1.1 o JavaScript1.2. Si no se pone este atributo, cada navegador intenta ejecutar el código como si estuviera escrito para él.

Todos los ejemplos de este tutorial funcionan con NS 3.0, así que utilizan la versión JavaScript1.1.

Al escribir programas en JavaScript utilizando el tag <SCRIPT>, se suelen introducir el código entre comentarios. De esta forma se evita que aquellos navegadores que no soportan JavaScript escriban el código en pantalla. Así, el programa anterior estaría más correcto de las siguiente forma:

EJEMPLO 2.1.2:
      <HTML>
      <HEAD>
      <TITLE>El primer ejemplo en Javascript</TITLE>
      </HEAD>
      <BODY>

      Esto es una página html <B>normal</B>, que incluye un
      pequeño trozo de código en JavaScript:<P>
      
      
      <SCRIPT>
      <!-- Aqui va el codigo en Javascript
      document.writeln( "Esto esta escrito usando JAVASCRIPT!!<P>" );
      //-->
      </SCRIPT>
      


      Esto es <B>todo</B>
      
      </BODY>
      </HTML>
      

Nótese el uso de las dos barras (//) antes de cerrar los comentarios en HTML. Las barras son las que indican comentarios en JavaScript y se usan para que al poner el fin de comentario de HTML no produzca un fallo el intérprete de JavaScript. Es decir, el principio de comentario de html, <--, lo acepta como comienzo de comentario de Javascript, pero el final da error, por lo que en vez de poner --> hemos de poner //-->

El tag <SCRIPT> puede incluirse tanto dentro de la parte <BODY> como de la parte <HEAD>. Tal y como se verá en el punto 4, Funciones y Sentencias en JavaScript como Manejadores de Eventos, esto es muy útil para definir funciones que actuarán después como respuestas a eventos.

En principio se podría pensar que es absurdo usar JavaScript para escribir una cadena cuando eso mismo se puede hacer directamente en HTML. Sin embargo, veamos el siguiente ejemplo en el cual se crea una tabla muy voluminosa con un trozo de código relativamente pequeño.

EJEMPLO 2.1.3:
      <HTML>
      <HEAD>
      <TITLE>Una tabla creada con Javascript</TITLE>
      </HEAD>
      <BODY>
      La siguiente tabla está hecha en JavaScript
      <TABLE BORDER="1">
      <SCRIPT>
      <!--
      for (i=0; i<5; i++ ) {
        document.writeln("<TR>");
        for (j=0; j<5; j++ ) {
          document.writeln( "<TD>["+i+","+j+"]</TD>" );
        }
        document.writeln( "</TR>" );
      }
      //-->
      
      </SCRIPT>
      </TABLE>
      Esto es <B;>todo</B>
      
      </BODY>
      </HTML>
      


2. Ficheros externos Indice 

Como es fácil adivinar, consiste en escribir las funciones y sentencias que vayan a incorporarse a una página HTML en un fichero aparte, y posteriormente indicar que junto con una determinada página se ha de cargar el fichero con el código en JavaScript. Para ello usamos el atributo SRC del tag <SCRIPT> de la siguiente forma:

<SCRIPT SRC="http://servidor/directorios/fichero.js">
<!--
Instrucciones a ejecutar en caso de que no se cargue el fichero correctamente. Normalmente sacan mensajes de error

-->
</SCRIPT>

Los ficheros han de tener extensión .js y ha de añadirse la siguiente línea al fichero mimes.type del servidor de páginas web:

type=application/x-javascript exts=js

Mediante el uso de ficheros externos podremos desvincular las páginas HTML que usan las funciones en JavaScript de la implementación de dichas funciones. En definitiva, tenemos las ventajas de la programación modular, entre ellas la posibilidad de crear bibliotecas de funciones en JavaScript y mantener más fácilmente el código en JavaScript.

El inconveniente que conlleva este método es que normalmente los programas en JavaScript son págino-dependientes, es decir, el programa está muy relacionado con el contenido de la página, por lo que en los ficheros externos solo deberíamos definir funciones y objetos muy genéricos.

EJEMPLO 2.2.1:
      <HTML>
      <HEAD>
      <TITLE>Uso ficheros con JS</TITLE>
      
      <SCRIPT SRC="http://kal-el.ugr.es/~victor/ejemplo_js.js">
      
      <!--
      alert( "No se puede cargar el fichero ejemplo_js.js" );
      //-->
      </SCRIPT>
      </HEAD>
      <BODY>
      En este ejemplo el codigo en JavaScript está en un
      fichero aparte: http://kal-el.ugr.es/~victor/ejemplo_js.js <BR>
      
      <SCRIPT>
      <!-- LLamamos a la funcion SALUDA que esta en un fichero .js
      saluda();
	//-->
      </SCRIPT>
      
      <BR> Esto es <B>todo</B>
      
      </BODY>
      </HTML>
      


3. Expresiones para atributos HTML. Indice 

Prácticamente todos los tag de HTML llevan modificadores, esto es, atributos que dependiendo del valor que tomen hacen que el tag se visualice y comporte de una u otra forma. Por ejemplo, cuando ponemos una tabla le podemos cambiar el borde, o si ponemos una fuente le podemos cambiar el color... de esta forma. el borde y el color serían los atributos a los que nos referimos. Pues bien, normalmente estos valores se fijan al escribir la página, pero también pueden ser variables de un programa en JavaScript que vaya incorporado en la página. Más au´n pueden ser valores devueltos por funciones, e incluso la evaluación de alguna expresión.

Para utilizar JavaScript de esta forma, se debe poner entre llaves la variable (o función o expresión), precedida del símbolo & , es decir:

<TAG atributo=&{variable};>

He aquí un ejemplo:
EJEMPLO 2.3.1:
      <HTML>
      <HEAD>
      <TITLE>Usando valores JavaScript para atributos de otros
      tags de html</TITLE>
      <SCRIPT>
      <!-- Aqui comienza el JavaScript
      var colorFondo="#FF00FF";
      //-->
	</SCRIPT>
      <BODY background=&{colorFondo};>
      <FORM>
      <INPUT TYPE="text" size="40" VALUE="40 caracteres"><BR>
      <INPUT TYPE="text" size=&{2*10}; VALUE="2*10 caracteres"><BR>
      <INPUT TYPE="text" size=&{3+10}; VALUE="3+10 caracteres"><BR>
      </FORM>
      </BODY>
      </HTML>
      

Este uso de esta construcción (&{JavaScript};), solo sirve para asignar valores a atributos. Así, la siguiente construcción en HTML no tendría sentido:

<TITLE>&{nombreTitulo}</TITLE>


4. Manejadores de eventos. Indice 

Es, con diferencia, el método que más se utiliza, ya que lo que se pretende con JavaScript es que los documentos se conviertan en entidades dinámicas, en contraposición a la estaticidad propia del HTML. Lo que se pretende mediante este lenguaje de programación es que se puedan realizar acciones como respuesta a la ocurrencia de ciertos eventos.

Un evento es cualquier cosa que puede ocurrir mientras se está ejecutando un programa, y son especialmente importantes en entornos gráficos. Así, se produce un evento cuando se mueve el ratón o se pincha uno o varios de sus botones, cuando el usuario pulsa una tecla, cambia el URL, abre una nueva ventana... y un largo etcétera. De esta forma, nuestra tarea como programadores va a ser, precisamente, el diseñar funciones que se ejecuten cuando alguno de esos eventos ocurra.

He aquí la forma general de introducir los manejadores de eventos:

<TAG atributo1="valor1" atributo2="valor2" 
onEnvento1="sentencias JavaScript"
onEvento2="funcionJavaScript()">

Es decir, para cada tag han de conocerse los eventos que puede "sufrir", y para añadirle una función de respuesta se coloca la partícula on antes del nombre del evento y, a continuación, entre comillas, el conjunto de sentencias en JavaScript que forman la respuesta al evento, o, lo que es más normal, la llamada a la función que recoge dichas sentencias.

En el siguiente ejemplo, se muestra un mensaje en la barra de estado (parte inferior de la ventana del navegador) cada vez que el ratón pasa por encima de un enlace que hay en la página:

EJEMPLO 2.4.1:
      <HTML>
      <HEAD>
      <TITLE>Primera aplicación con eventos</TITLE>
      </HEAD>
      <BODY>
      Si pasas por encima del enlace verás como cambia la
      barra de estado (la de la parte inferior de la ventana).<BR>
      
      <A HREF="http://www.ugr.es" onMouseOver="window.status='Si 
      eres de la Universidad de Granada, te va a gustar'; return
      true;">Pasa por aquí</A>
      <BR> 
      Esto es <B>todo</B>
      
      </BODY>
      </HTML>
      

A la vista del ejemplo anterior vamos a hacer algunos comentarios:

  1. El evento al que queremos responder mediante un programa en JavaScript es el hecho de que se pase el ratón por encima del enlace de la página. Dicho evento se llama MouseOver por ello en el tag <A> hemos asignado un valor al atributo onMouseOver, es decir, el nombre del evento antecedido por la partícula on.

  2. El programa de respuesta a este evento consta de las siguientes dos líneas:
    window.status='Si eres de la Universidad de Granada, te va a gustar'; return true;
    Pues bien, estas dos líneas se podrían haber introducido en una función de modo que, si queremos repetirlas en otro sitio solo hemos de poner el nombre de la función.
    La mayor parte del tiempo, cuando uno escribe programas en JavaScript, consiste en escribir funciones para responder a los eventos. Es imprescindible definir la funci´n antes de que se pueda producir el evento, por ello es práctica común el incluir todas las definiciones de funciones en la parte <HEAD> (por supuesto entre los tag <SCRIPT> y </SCRIPT>), así nos aseguramos que cuando empieza a cargarse cuerpo de la página ya están cargadas las funciones de respuesta a los eventos, por si el usuario provoca un evento antes de que se cargue toda la página.

  3. Hay que tener cuidado con el uso de las comillas. En efecto, a la variable window.status se le ha asignado un valor que, al ser una cadena, debe ir entre comillas. Pues bien, esas comillas no pueden ser comillas dobles ("), sino simples (').El por qué es bastante obvio:
    Si ponemos comillas dobles se sobreentiende que estamos cerrando las que se han abierto tras el onMouseOver. Es por esto que hemos puesto las comillas simples.
    ¿Qué ocurre si dentro de las comillas simples hemos de poner otras comillas?

    En este caso la única solución es sacar las sacar las líneas que forman la respuesta al evento y declararlas en el </HEAD> dentro de una función.

    El siguiente ejemplo trata sobre esto.

EJEMPLO 2.4.2:
	<HTML>
	<HEAD>
	<TITLE>Funciones de respuesta a eventos</TITLE>
	<SCRIPT>
	function gracias() {
	  alert( "Gracias por 'mouseovear' por el enlace!" );
	}
	</SCRIPT>
	</HEAD>
	<BODY>
	<A HREF="http://www.ugr.es" onMouseOver="gracias();">
	Si pasas por encima de este enlace saldrá un mensajillo
	de agradecimiento</A>
	<BR>
	Esto es <B>todo</B>
	
	</BODY>
	</HTML>

	

A continuación se citan los eventos a los que responden los elementos de una página HTML:

Eventos Objetos que los soportan
abort image
blur window,frame, elementos de form
click button,radio,checkbox,submit,reset,link
change text,textarea,select
error image,window
focus window,frame,elementos de form
load body
mouseout area,link
mouseoverlink
reset form
select text,textarea
submit submit
unloadbody


5. El tag <NOSCRIPT> Indice 

Ya hemos dicho que es conveniente poner el código en JavaScript entre comentarios de HTML para aquellos navegadores (los menos) que no entiendan este lenguaje. Sin embargo, se puede dar el caso de que algún usuario tenga deshabilitada la posibilidad de ejecutar JavaScript (por increíble que pueda resultar el hecho). Todo lo que haya entre los tag <NOSCRIPT> y </NOSCRIPT> se visualizará si se da el caso descrito.

Normalmente, se inserta al principio del <BODY>, y se escribe algún mensaje para indicarle al usuario que active el JavaScript. Por supuesto, todo lo que pongamos entre los tag <NOSCRIPT> y </NOSCRIPT> debe estar escrito en HTML, no en JavaScript.

Para visualizar el siguiente ejemplo se deben editar las preferencias, quitar la posibilidad de ejecutar JavaScript y recargar la página . No debemos olvidarnos de volver a habilitarlo después.

EJEMPLO 2.5.1:
      <HTML>
      <HEAD>
      <TITLE>Uso de NOSCRIPT</TITLE>
      </HEAD>
      <BODY>
      <NOSCRIPT>
      Que sepas que <BLINK>no</BLINK> tienes habilitado
      el JavaScript y te 
      estás perdiendo cosas muy chulas
      </NOSCRIPT>
      <SCRIPT>
      <!--
      document.write( "Así me gusta, que actives el JavaScript!" );
      //-->
      </SCRIPT>
      </BODY>
      </HTML>
      


6. Algunos ejemplos en JavaScript Indice 

Vamos a presentar algunos ejemplos para practicar lo que hasta ahora conocemos. De camino nos servirá para conocer un poco más la función write de la que se hizo uso en el primer ejemplo que vimos.

2.6.1. Un separador de textos

Vamos a crear una página en la que los diferentes párrafos van a ir separados por una línea compuesta del carácter * , un número de veces determinado.

EJEMPLO 2.6.1:
      <HTML>
      <HEAD>
      <TITLE>Primer ejemplo de separador</TITLE>
      </SCRIPT>
      </HEAD>
      <BODY>
      Este es el primer párrafo que voy a escribir.<P>
      <SCRIPT>
      <!--
      document.writeln( "<CENTER>" );
      for ( i=0; i<30; i++ ) {
         document.write( "*" );
      }
      document.writeln( "</CENTER>" );
      // -->
      </SCRIPT>
      Este es el segundo párrafo que voy a escribir.<P>
      <SCRIPT>
      <!--
      document.writeln( "<CENTER>" );
      for ( i=0; i<20; i++ ) {
	document.write( "=" );
      }
      document.writeln( "</CENTER>" );
      // -->
      </SCRIPT>
      Este es el tercer párrafo que voy a escribir.<P>
      <SCRIPT>
      <!--
      document.writeln( "<CENTER>" );
      for ( i=0; i<40; i++ ) {
	document.write( "@" );
      }
      document.writeln( "</CENTER>" );
      // -->
      </SCRIPT>
      </BODY>
      </HTML>
      

Como se puede ver, la función write es ejecutada en el mismo momento en que se lee. De hecho, solo se ejecuta una vez, ya que cuando se ha cargado el documento, los posteriores write que podamos hacer no tendrán efecto alguno en la página, o harán que se borre todo lo que hay para escribir lo nuevo (dependerá de la versión del navegador).

2.6.2 Separador de textos mejorado.

Es evidente que podríamos haber incluido el separador dentro de una función evitando la repetición de código. Veamos el nuevo código.

EJEMPLO 2.6.2:
      <HTML>
      <HEAD>
      <TITLE>Página con separadores de texto, versión 2.0</TITLE>
      <SCRIPT>
      <!-- función separador
      function separador() {
         document.write("<P><CENTER>\n");
         for ( var i=0; i<20; i++ ) {
          document.write("*");
         }
         document.write("\n</CENTER><p>\n");
      } // separador
      //-->

      </SCRIPT>
      </HEAD>
      <BODY>
      <NOSCRIPT>
      <HR>

      Deber&iacute;as bajarte una versi&oacute;n de tu navegador que te permita ejecutar JavaScript... no sabes lo que te pierdes.
      
      <HR>
      </NOSCRIPT>
      <!-- Aquí empieza el primer párrafo -->
      Hola.<BR>
      Estoy haciendo una prueba a ver como quedan los separadores de texto usando JavaScript.
      <SCRIPT>
      <!-- Primer separador
      separador();
      
      //-->
      
      </SCRIPT>
      Este es el segundo párrafo  y aquí voy a poner otro separador de texto usando JavaScript.
      <SCRIPT>
      <!-- Segundo separador
      separador();
      //-->
      
      </SCRIPT>
      Adi&oacute;s.
      </BODY>
      </HTML>
      

Esta nueva versión aporta otras ventajas aparte de la no repetición de código y es la posibilidad de modificar más fácilmente el número de caracteres de que consta el separador. Realicemos una nueva versión parametrizada del separador.

2.6.3 Separador de texto parametrizado.

En este ejemplo vamos a poder cambiar la longitud del separador, el carácter de relleno y la distancia de separación entre los textos. He aquí el código.

EJEMPLO 2.6.3:
      <HTML>
      <HEAD>
      <TITLE>Página con separadores de texto, versión 3.0</TITLE>
      <SCRIPT>
      <!-- función separador
      function separador( longitud,caracter,distancia) {
         document.write("<"+distancia+"><CENTER>\n");
         for ( var i=0; i<longitud; i++ ) {
            document.write(caracter);
	 }
	
	 document.write("\n</CENTER><"+distancia+">\n");
      } // separador
	
      //-->
      
      </SCRIPT>
      </HEAD>
      <BODY>
      <!-- Aquí empieza el primer párrafo -->
      Hola.<BR>
      Estoy haciendo una prueba a ver como quedan los separadores de texto usando JavaScript.
      <SCRIPT>
      <!-- Primer separador
      separador( 20,"-","BR");
      
      //-->
	    
      </SCRIPT>
      Este es el segundo párrafo y aquí voy a poner otro separador de texto usando JavaScript.
      <SCRIPT>
      <!-- Segundo separador
      separador(80,".","P");
      
      //-->
      
      </SCRIPT>
      Adi&oacute;s.
      </BODY>
      </HTML>
      

2.6.4 Una función para tamaño y color.

A continuación definimos una función que nos permite poner cualquier texto con unos determinados tamaño y color.
EJEMPLO 2.6.4:
      <HTML>
      <HEAD>
      <TITLE>Página con colores en los mensajes</TITLE>
      <SCRIPT>
      <!-- función color
      function color( mensaje,color,tamanio) {
          document.write("<FONT SIZE='"+tamanio+"' COLOR='"+color+"'>\n");
          document.write(mensaje);
          document.write("\n</FONT>\n");
      } // separador
      //-->
      </SCRIPT>
      </HEAD>
      <BODY>
      <!-- Aquí empieza el primer párrafo -->
      Hola.<BR>
      <SCRIPT>
      <!-- Primer mensaje en color
      color ( "Este mensajito ha de salir en amarillo<BR>","#ffff00","4");
      //-->
      </SCRIPT>
      Hola otra vez
      <SCRIPT>
      <!-- Segundo mensaje en color
      color ("Este mensaje debería salir en rojo y grande<P>","#ff0000","6");
      //-->
      </SCRIPT>
      Adi&oacute;s.
      </BODY>
      </HTML>
      
No obstante, todo este tipo de funciones para definir estilos de escritura se han visto ampliamente superadas por el uso de hojas de estilo.