INCLUSIÓN DE JAVASCRIPT EN UNA APLICACIÓN WEB
JavaScript es un lenguaje interpretado, basado en objetos (no es un lenguaje orientado a objetos “puro”) y multiplataforma, inventado por Netscape Communications Corporation. Los navegadores de Netscape fueron los primeros que usaron JavaScript. El primer nombre ofcial de este lenguaje fue LiveScript y apareció por primera vez en la versión beta de Netscape Navigator 2.0 en septiembre de 1995, pero poco después fue rebautizado JavaScript en un comunicado conjunto con Sun Microsystems el 4 de diciembre de 19951 . El núcleo de JavaScript (Core JavaScript) contiene una serie de objetos, como Array, Date, Math, Number y String, y un conjunto de elementos del lenguaje como operadores, estructuras de control y sentencias ( %, ++, if, for, break, etc.). El núcleo de JavaScript se puede ampliar añadiendo objetos adicionales, como por ejemplo: JavaScript en el cliente (Client-side JavaScript) amplía el lenguaje añadiendo objetos que permiten controlar un navegador y su DOM. JavaScript en el servidor (Server-side JavaScript) amplía el lenguaje añadiendo objetos que son útiles cuando JavaScript se ejecuta en un servidor (lectura de ficheros, acceso a bases de datos, etc.).
Una de las aplicaciones principales de JavaScript consiste en validar la entrada introducida por el usuario a través de un formulario, que luego recibirán aplicaciones que se ejecutan en el servidor (hechas en ASP, CGI, JSP o cualquier otra tecnología).
La utilidad de esto reside en: Reduce la carga en el servidor. Los datos incorrectos se filtran en el cliente y no se envían al servidor. Reduce los retrasos producidos por errores cometidos por el usuario. De otro modo la validación se tendría que realizar en el servidor, y los datos deberían viajar del cliente al servidor, ser procesados y entonces devueltos al cliente para que los corrigiese. Simplifica los programas que se ejecutan en el servidor al dividir el trabajo entre el cliente y el servidor.
Normalmente, la validación de los datos se puede realizar como mínimo en tres ocasiones: Cuando el usuario introduce los datos, con un manejador del evento onChange en cada control que se quiere validar del formulario. Cuando el usuario envía (submit) el formulario, con un manejador del evento onClick en el botón que envía el formulario. Cuando el usuario envía (submit) el formulario, con un manejador del evento onSubmit en el formulario. Otra de las aplicaciones de JavaScript consiste en proporcionar dinamismo a las páginas HTML. Si se emplea junto con DHTML se pueden conseguir efectos sorprendentes.
Diferentes formas de incluir nuestro Javascript
Para explicar las diferentes posibilidades a la hora de incluir nuestro código Javascript vamos a utilizar como ejemplo una pantalla que muestre el texto «Clic aquí» y que, una vez se haga clic, muestre una alerta diciendo «Hola mundo!».
Old-old-old-old-style todo en el HTML
Al principio de los tiempos era muy habitual encontrarnos con código javascript dentro de las propias etiquetas HTML, formando parte de un atributo de evento, como el evento onclick.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
</head>
<body>
<section>
<span onclick="alert('hola mundo!');">Clic aquí</span>
</section>
</body>
</html>
En este caso, tenemos una etiqueta HTML span, con un atributo onclick. Esto significa que cuando abras la web en el navegador verás lo siguiente:
alert('hola mundo!');
Y ese código, es Javascript.
Old-old-old-style todo en el HTML
Aunque el código de ejemplo es muy sencillo, es bastante fácil ver el problema de incluir el código javascript dentro de las etiquetas HTML…
- Es imposible reutilizar el código javascript. Si quieres tener varios eventos onclick que abran una alerta diciendo «hola mundo!» tendrás que escribir el código JavaScript en cada uno de los eventos… una lata!
- La claridad del código brilla por su ausencia. En el ejemplo sólo tenemos una etiqueta HTML, pero es fácil imaginarse una pántalla con cientos de etiquetas HTML o un proyecto web de múltiples pantallas HTML… mantener el código de esta forma es una locura… muerte segura.
Así que, apareció otra forma de incluir el Jasvascript… y aquí entra, por primera vez, la etiqueta script:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script type="text/javascript">
function alerta() {
alert('hola mundo!');
}
</script>
</head>
<body>
<section>
<span onclick="alerta();">Clic aquí</span>
</section>
</body>
</html>
Bien, el resultado será el mismo que en el primer ejemplo, ya que hace exactamente lo mismo, pero tenemos alguna pequeña diferencia:
- Dentro de la etiqueta head tenemos la etiqueta script con su apertura y su cierre… con el atributo «type» especificando al navegador que el script incluido dentro de la etiqueta es de tipo text/javascript o lo que es lo mismo, javascript.
- Dentro del script tenemos nuestro código javascript. En este caso se trata de una función que, una vez llamada, lanzará nuestra alerta.
- Nuestra etiqueta span mantiene el atributo onclick, pero en vez de tender entro el código javascript para lanzar la alerta, lo que tiene es una llamada a la función que creamos en la cabecera de nuestro documento.
De esta forma se conseguía tener todo el código javascript en la cabecera, de forma que fuese más sencillo modificarlo y, sobre todo, permitiendo reutilizar el código ya que podemos tener varias etiquetas HTML con un evento onclick que llame a la misma function de javascript que hemos declarado.
Old-old-style todo en el HTML
Aunque la última opción indicada de poner el Javascript es una clara mejora sobre la primera, seguimos teniendo el problema de la gestión del código (el problema 2). Para solucionar este problema de claridad y gestión, damos un pasito más en cómo implementar el Javascript en nuestro HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script type="text/javascript">
document.getElementById('lanzar_alerta').onclick = function () {
alert('hola mundo!');
}
</script>
</head>
<body>
<section>
<span id="lanzar_alerta">Clic aquí</span>
</section>
</body>
</html>
Bien, bien… esto va cogiendo forma… nuestra etiqueta span ya no tiene el atributo onclick y en su lugar le hemos agregado un identificador (ID) y en nuestro código javascript hemos creado el código para que el navegador sepa que tiene que lanzar la alerta cuando el usuario haga clic en «Clic aquí»
IMPORTANTE: Este ejemplo es la primera implementación pura del javascript ya que en las dos versiones anteriores estábamos utilizando un atributo de una etiqueta html para indicar que existía código javascript que ejecutarse en el evento onclick. Esta nueva opción sólo utiliza javascript para indicar este hecho.
Probamos nuestro código y comprobamos que el resultado es el de siempre!
Pues no! Tal y como tenemos nuestro código, cuando se pincha en «Click aquí» nuestro navegador nos devuelve un error (no visible por pantalla) como este:
Uncaught TypeError: Cannot set property ‘onclick’ of null
Cuando un navegador carga la web, va descargando y ejecutando el contenido a medida que lo descarga. Sin entrar en detalles, esto significa que nuestro código HTML es leído e interpretado ANTES de que el navegador lea nuestra etiqueta spam, por lo que en ese momento no existe, por lo que se genera el error de javascript indicado y, lo más importante, el navegador dejará de interpretar el código javascript, o sea, no funcionará ningún código js posterior al error.
Tal que así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
</head>
<body>
<section>
<span id="lanzar_alerta">Clic aquí</span>
</section>
<script type="text/javascript">
document.getElementById('lanzar_alerta').onclick = function () {
alert('hola mundo!');
}
</script>
</body>
</html>
Y como con eso se solucionaba el problema, empezamos a ver el javascript antes del cierre del body… y tristemente se sigue usando mucho, pero mucho esta «solución».
Tenemos el HEAD para los metas, las declaraciones de CSS, los scripts etc. Que el navegador lo lea igual no significa que sea el sitio correcto. Como en cualquier problema de nuestra vida, no debemos buscar la solución rápida, sino que necesitamos la mejor solución, la más óptima, la ideal.
Y la ideal para nosotros es que el Javascript esté donde tiene que estar: en el HEAD. Y para eso existe tenemos el maravilloso evento «onload» que podemos ejecutar en el objeto «window», o sea:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('lanzar_alerta').onclick = function () {
alert('hola mundo!');
}
}
</script>
</head>
<body>
<section>
<span id="lanzar_alerta">Clic aquí</span>
</section>
</body>
</html>
Con esto estamos indicando, en javascript, que cuando el navegador termine la carga de la web (window.onload) ejecute una function de javascript que incluye nuestro código, o sea, nuestra llamada al evento onclick de nuestro span. Esto funciona y es correcto!
Bueno, los dos problemas que teníamos con nuestro primer ejemplo están solucionados! Pero, como siempre hay que buscar lo mejor de lo mejor, se fue más allá.
Old-style: El Javacript fuera del HTML
El desarrollo de la programación web y la profesionalización del sector hizo, entre otras cosas, que se quisiese reciclar el código javascript de forma sencilla, que el código javascript utilizado por una web empezó a ser realmente enorme… además los programadores crean «librerías» para poder compartirlas con los compañeros, amigo o con el mundo en general.
Y ante esta situación es IMPOSIBLE mantener el código Javascript dentro del HTML… la migración del mismo código de una web a otra sería complejo… los documentos a editar serían auténticas bestias en lo que a líneas de código se refiere… y nuestros entornos de desarrollo sufrirían mucho mucho… pupa de la grande.
Además, se supone que un documento HTML debería tener sólo código HTML y no mezclar Javascript, CSS, etc…
Así que, la forma de incluir el javascript en el HTML evolucionó un poquito más:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script type="text/javascript" src="./javascript.js"></script>
</head>
<body>
<section>
<span id="lanzar_alerta">Clic aquí</span>
</section>
</body>
</html>
En vez de poner el código Javascript dentro de la etiqueta script, lo que hemos hecho es incluirle a esta etiqueta el atributo src (source) y dándole como valor una URL relativa al documento, para que cargue su contenido como si fuese javascript.
Y, por supuesto, hemos creado un fichero llamado javascript.js al mismo nivel de nuestro HTML con el código javascript que antes teníamos dentro del index.html
window.onload = function() {
document.getElementById('lanzar_alerta').onclick = function () {
alert('hola mundo!');
}
}
Incluir Javascript en HTML5
Con HTML5 han venido muchos cambios, muchos orientados a que dediquemos menos tiempo a las «tonterías».
Aunque la etiqueta script se puede usar para muchas cosas, principalmente se utiliza para incluir código javascript, por lo tanto HTML5 entiende que, si no se dice nada, el script va a cargar código javascript. Así pues, no necesitamos usar el atributo type si vamos a cargar javascript!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script src="./javascript.js"></script>
</head>
<body>
<section>
<span id="lanzar_alerta">Clic aquí</span>
</section>
</body>
</html>
Optimizando la carga de Javascript en HTML5
El «gran problema» cuando implementamos JS en nuestra web es, como ya comentamos, que el código se descarga y se ejecuta según se llega a su declaración.
Y lo más importante, mientras un fichero JS está siendo descargado y ejecutado el navegador web no puede seguir leyendo el documento. O sea: la carga de la web se hace más lenta.
Aunque pueda parecer una tontería… los proyectos web modernos llevan jQuery como framework… es probable que todo el jQueryUI para dar una interfaz visual amigable… seguramente una extensión de jQuery para un slider… como tengamos posibilidad de escoger franjas de fechas tendremos un date picker…. en fin… un montón de librerías Javascript además del código que nosotros mismos escribamos para interconectar todas esas librerías con nuestro HTML para conseguir la experiencia deseada. Así que… importa, sí que importa este pequeño detalle del Javascript.
Para que nos entendamos, pasando nuestro ejemplo a javascript utilizando jquery como framework tendríamos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
</head>
<body>
<section>
<span id="lanzar_alerta">Clic aquí</span>
</section>
</body>
</html>
y nuestro javascript.js sería
$(document).ready(function() {
$('#lanzar_alerta').click(function() {
alert('hola mundo!');
});
});
Bien, la realidad es que tenemos dos ficheros javascript, uno es el jquery y otro es nuestro código javascript. Realmente, jquery es una librería que está ahí y necesitamos para que nuestro código funcione, pero es nuestro código javascript quien interactúa con el DOM (vamos, nuestro código HTML, así hablando mal y rápido)… por lo que lo ideal es que nuestro jquery se cargase como si de una imagen se tratase y nuestro javascript lo hiciese de la forma tradicional… o al final del documento, que a fin de cuentas es lo que «forzábamos» con el window.onload y ahora con el $( document ).ready… bueno, esto es HTML5 así que tenemos carga asincrónica.
HTML5 async y defer para JAVASCRIPT
- defer: Realmente ya existía en HTML4 y su uso significa que el script se ejecutará una vez se haya cargado la página.
- async: Se ejecutará de forma asíncrona, lo que significa que su ejecución no bloqueará el resto de descargas que existan en paralelo.
Los scripts ejecutados con async no siguen el orden natural de ejecución, lo que puede generar errores inesperados si no se usa con sentidiño.
En nuestro ejemplo vamos a utilizar sólo defer:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script defer src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script defer type="text/javascript" src="./javascript.js"></script>
</head>
<body>
<section>
<span id="lanzar_alerta">Clic aquí</span>
</section>
</body>
</html>
Y así estaría perfecto!!
El uso de async y defer nos puede traer grandes alegrías a la hora de la carga de nuestra web y si esto lo unimos a una maquetación y una declaración de estilos pensando en cómo se ve la web antes y después de que se ejecute nuestro javascript…. podemos obtener un resultado exquisito donde todo vaya cargando perfectamente cuadrado hasta que llegue el momento de ejecutar el JS.
Publicado por: Luján Mora Sergio.
Fecha de Publicación: 2002
Bibliografía
Recuperado de: Luján S. (2002).Programación de aplicaciones web: historia, principios básicos y clientes web. Programación de aplicaciones web.
https://rua.ua.es/dspace/bitstream/10045/16995/1/sergio_lujan-programacion_de_aplicaciones_web.pdf
