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>

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:

      <html>
      <head>
      <title>El primer ejemplo en Javascript</title>
      </head>
      <body>
      
      Esto es una página html <strong>normal</strong>, que incluye
      un pequeño trozo de código en JavaScript:<p>
      <div id="mensaje"></div>
      
      <script>
      document.getElementById("mensaje").innerHTML="¡¡Esto esta escrito usando JAVAscript!!";
      </script>
      
      Esto es <strong>todo</strong>
      
      </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.

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 HTML. 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:

      <html>
      <head>
      <title>El primer ejemplo en Javascript</title>
      </head>
      <body>

      Esto es una página html <strong>normal</strong>, que incluye un
      pequeño trozo de código en JavaScript:<p>
      
      
      <script>
      <!-- Aquí va el código en Javascript
      document.getElementById("mensaje").innerHTML="¡¡Esto esta escrito usando JAVAscript!!";
      // --> 
      </script>
      
      
      Esto es <strong>todo</strong>
      
      </body>
      </html>
            

En el ejemplo anteriore resulta interesante 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á posteriormente, 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.

        <html>
        <head>
        <title>Una tabla creada con Javascript</title>
        </head>
        <body>
        La siguiente tabla está hecha en JavaScript:
        <div id="mensaje"></div>
        
        <script>
        <!--
        var tmp="<table>";
        for (i=0; i<5; i++ ) {
          tmp+="<tr>";
          for (j=0; j<5; j++ ) {
            tmp+="<TD>["+i+","+j+"]</TD>";
          }
          tmp+="</tr>";
        }
        tmp+="</table>";
        document.getElementById("mensaje").innerHTML=tmp;
        //-->
        </script>
        
        Esto es <strong>todo</strong>

        </body>
        </html>
        

En este caso nos hemos servido de las sentencias iterativas de JavaScript para formar el documento, ahorrándonos escribir muchos <TD> y </TD> en HTML.

2. Ficheros externos

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"> </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 (aunque lo normal es que ya esté hecho):

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.

      <html>
      <head>
      <title>Uso ficheros con JS</title>
      
      <script SRC="http://vrivas.es/files/ejemplo_js.js">
      </script>
      

      </head>
      <body>
      En este ejemplo el codigo en JavaScript está en un
      fichero aparte: http://vrivas.es/files/ejemplo_js.js <BR>
      
      <script>
      <!-- LLamamos a la funcion SALUDA que está en un fichero .js
      saluda();
	//-->
      </script>
      
      <BR> Esto es <strong>todo</strong>
      
      </body>
      </html>
            

3. Manejadores de eventos.

Mediante el manejo de eventos con JavaScript, 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="llamada_a_funcion_JavaScript()">

Es decir, para cada tag (elemento en HTML) 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:

      <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 <strong>todo</strong>
      
      </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 sentencias:

    window.status='Si eres de la Universidad de Granada, te va a gustar';
    return true;


    Pues bien, estas dos sentencias 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 el 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 sentencias que forman la respuesta al evento y declararlas en el </head> dentro de una función.

    El siguiente ejemplo trata sobre esto.

	<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 <strong>todo</strong>
	
	</body>
	</html>

A continuación se citan algunos 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