Veamos cómo insertar el código en Javascript dentro de un documento HTML. En este artículo te explicaremos algunas reglas importantes y las maneras más básicas de ejecutar Javascript en el contexto de una página.
En esta parte del manual sobre Javascript vamos a conocer la manera más básica de trabajar con el lenguaje. En este artículo daremos las primeras informaciones sobre cómo incluir scripts, mezclando el propio código Javascript con el HTML.
Luego veremos también cómo se debe colocar código para que nuestra web sea compatible con todos los navegadores, incluso aquellos que no soportan Javascript. Muchas ideas del funcionamiento de Javascript ya se han descrito en capítulos anteriores, pero con el objetivo de no dejarnos nada en el tintero vamos a tratar de acaparar a partir de aquí todos los datos importantes de este lenguaje.
Javascript se escribe en el documento HTML
Lo más importante y básico que podemos destacar en este momento es que la programación de Javascript se realiza dentro del propio documento HTML. Es decir, el código Javascript, en la mayoría de los casos, se mezcla con el propio código HTML para generar la página.
Esto quiere decir que debemos aprender a mezclar los dos lenguajes de programación y rápidamente veremos que, para que estos dos lenguajes puedan convivir sin problemas entre ellos, se han de incluir unos delimitadores que separan las etiquetas HTML de las instrucciones Javascript. Estos delimitadores son las etiquetas <SCRIPT> y </SCRIPT>. Todo el código Javascript que pongamos en la página ha de ser introducido entre estas dos etiquetas.
La colocación de los scripts sí que importa
En una misma página podemos introducir varios scripts, cada uno que podría introducirse dentro de unas etiquetas <SCRIPT> distintas. La colocación de estos scripts no es indiferente. En un principio, con lo que sabemos hasta el momento y los scripts que hemos realizado de prueba, nos da un poco igual donde colocarlos, pero en determinados casos esta colocación sí que será muy importante. En cada caso, y llegado el momento, se informará de ello convenientemente.
También se puede escribir Javascript dentro de determinados atributos de la página, como el atributo onclick. Estos atributos están relacionados con las acciones del usuario y se llaman manejadores de eventos.
A continuación vamos a ver más detenidamente estas dos maneras de escribir scripts, que tienen como diferencia principal el momento en que se ejecutan las sentencias.
Maneras de escribir scripts Javascript
Hasta ahora en el Manual de Javascript ya hemos tenido la ocasión de probar algunos scripts sencillos, no obstante, todavía tenemos que aprender una de las bases para poder trabajar con el lenguaje y es aprender las dos maneras de ejecutar código Javascript. Existen dos maneras fundamentales de ejecutar scripts en la página. La primera de estas maneras se trata de ejecución directa de scripts, la segunda es una ejecución como respuesta a la acción de un usuario.
Explicaremos ahora cada una de estas formas de ejecución disponibles, pero para el que lo desee, recomendamos también ver el vídeo sobre Maneras de incluir y ejecutar scripts.
Ejecución directa del código Javascript
Es el método de ejecutar scripts más básico. En este caso se incluyen las instrucciones dentro de la etiqueta <SCRIPT>, tal como hemos comentado anteriormente. Cuando el navegador lee la página y encuentra un script va interpretando las líneas de código y las va ejecutando una después de otra. Llamamos a esta manera ejecución directa pues cuando se lee la página se ejecutan directamente los scripts.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ejemplo ejecución directa</title>
</head>
<body>
<h1>Página con Javascript</h1>
<p>Esta página tiene un cuadro de diálogo, que se mostrará nada más el navegador la procese.</p>
<script>
var personas = 4;
var importeEntradas = 9.50;
alert('Necesitas ' + personas * importeEntradas + ' euros para que entren todos al cine');
</script>
<p>Cuando el usuario pulse aceptar en el cuadro de diálogo, el navegador mostrará la página completa.</p>
</body>
</html>Ese código Javascript se ejecutará según se abra la página. Cuando el navegador al procesar la página se encuentre este código, parará la lectura de la página para ejecutar el script de Javascript. Como resultado mostrará en una caja de diálogo "Necesitas 38 euros apra que entren todos al cine". Cuando el usuario pulse el botón "aceptar", continuará leyendo el resto de la página y mostrando el contenido de la página completa en la ventana del navegador. Por supuesto veremos muchos otros ejemplos a lo largo del manual.
Este método será el que utilicemos preferentemente en la mayoría de los ejemplos de esta parte del Manual de Javascript. En la segunda parte del Manual de Javascript podremos aprender muchas cosas y entre ellas veremos con detalle el segundo modo de ejecución de scripts que vamos a relatar a continuación.
Ejecución de Javascript como respuesta a un evento
Es la otra manera de ejecutar scripts, pero antes de verla debemos hablar sobre los eventos. Los eventos son acciones que realiza el usuario. Los programas como Javascript están preparados para atrapar determinadas acciones realizadas, en este caso sobre la página, y realizar acciones como respuesta. De este modo se pueden realizar programas interactivos, ya que controlamos los movimientos del usuario y respondemos a ellos. Existen muchos tipos de eventos distintos, por ejemplo la pulsación de un botón, el movimiento del ratón o la selección de texto de la página.
Las acciones que queremos realizar como respuesta a un evento se pueden indicar de muchas maneras distintas, por ejemplo dentro del mismo código HTML, en atributos que se colocan dentro de la etiqueta que queremos que responda a las acciones del usuario. En el capítulo donde vimos algún ejemplo rápido ya comprobamos que si queríamos que un botón realizase acciones cuando se pulsase sobre el, debíamos indicarlas dentro del atributo onclick del botón.
Comprobamos pues que se puede introducir código Javascript dentro de determinados atributos de las etiquetas HTML. Sin embargo, no es el único método posible. También podemos seleccionar elementos de la página directamente con Javascript y asociar funciones que se ejecutarán como respuesta a eventos. Aunque es un poco pronto para que puedas entender todo este proceso con detalle, vamos a ver un ejemplo sencillo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ejemplo pasar ratón por encima</title>
</head>
<body>
<h1>Ejemplo Javascript</h1>
<span id="mielemento">Pasa el ratón por aquí</span>
<script>
var pasadas = 0;
function anunciarPasadas() {
pasadas = pasadas + 1;
alert('Has pasado el ratón encima ' + pasadas + ' veces');
}
document.getElementById('mielemento').addEventListener('mouseenter', anunciarPasadas);
</script>
</body>
</html>En esta ocasión tienes el código de una página entera. En el puedes encontrar el código Javascript embutido dentro del cuerpo de la página. A diferencia del código anterior, cuando el navegador lee la página no ejecuta nada. Simplemente memoriza el script y asocia la función al elemento que se ha definido. En concreto hemos definido un evento de tipo "mouseenter" sobre un elemento de la página que tiene identificador "mielemento". Esto quiere decir que, cada vez que el usuario coloque el puntero del ratón encima del elemento "mielemento" ejecutará la función "anunciarPasadas".
Como decimos, quizás es un poco temprano para ver ejemplos de este estilo, por lo que no te preocupes si no lo has entendido todo. Estamos solamente comenzando el manual de Javascript y podrás aprender todo esto y mucho más poco a poco. Así pues, Veremos más adelante este tipo de ejecución en profundidad y los tipos de eventos que existen. Para llegar a ello aun tenemos que aprender muchas otras cosas de Javascript. En el próximo artículo mostraremos cómo podemos ocultar el código Javascript para navegadores antiguos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...