Código JavaScript en un archivo separado

Los ejemplos que hemos estado viendo y comentando, tienen código JavaScript en la misma página web. Sin embargo, podemos escribir el código JavaScript en un archivo separado de la página web. Estos archivos tienen que tener la extensión .js. Es una buena práctica, ya que permite centralizar nuestras funciones o procesos en únicos archivos los cuales podremos llamar desde cualquier página web. Ejemplo:

Abramos un editor de texto (o haga uso de su IDE Web favorito) y escriba el siguiente código JavaScript:

document.write("Estoy aprendiendo JavaScript");

Guardamos ese archivo con el nombre código_javascript.js

Ahora, creamos una página web llamando_codigo.html y llamamos al archivo código_javascript.js, de esta manera:

<html>
<head>
<title>Aprendiendo JavaScript</title>
 <script type="text/javascript" src="codigo_javascript.js">
 </script>
</head>
<body>
<h1>Estoy aprendiendo JavaScript</h1>
</body>
</html>

En el atributo src colocamos el nombre del archivo .js, en este caso ‘codigo_javascript.js’. Si nuestro archivo .js estuviera en un directorio diferente entonces tendriamos que colocar la ruta de la ubicación (Ej. ‘/directorio/archivo.js’)

Examinando Errores

Es probable que, ha medida que va construyendo su código JavaScript, al momento de ver su página web encuentre que esta no funciona como desea, pues quizás haya errores de sintaxís en el código. ¿Cómo ubicar el error?

Pues bien si usamos Internet Explorer, este navegador nos mostrará en la parte izquierda de la barra de estado un icono (signo de admiración !), al hacer doble clic en él mostrará una ventana dando detalles del error, como por ejemplo: en que archivo y línea esta el error, y una descripción de este. Ahora si usamos Firefox, este navegador cuenta con su Consola de Error, un poco mas interesante, que muestra los errores de la página actual, dando detalle similares a los del Internet Explorer, con un adicional, cuando hacemos clic en el archivo de error nos lleva a la misma línea del error.

Haga la prueba con el ejemplo arriba citado. En el archivo codigo_javascript.js, borre el parentesis final:

document.write("Hola Mundo!";

Ahora guarde y abra su navegador favorito y vea su página llamando_codigo.html. Si usa Internet Explorer, fijese en la barra de estado, y si usa Firefox vaya a Menu Herramientas – Consola de Error.

Haciendo uso de IDE

Para escribir código JavaScript y HTML podemos hacer uso de cualquier Editor de Texto que tengamos en nuestro sistema. Sin embargo, existen IDE’s (Acronimo en ingles que significa: Entorno de Desarrollo Integrado) para realizar esta tarea. Entre las ventajas de usar un IDE están: nos muestran los errores de sintaxis en modo de desarrollo, testear nuestras funciones antes probarlas en el navegador, colorear el código, etc. Para JavaScript existe muchos, pero uno interesante es JSide desarrollado por Sun. Software libre y funciona sobre Windows y Linux. Si conocen de algunos mas pueden sugerirlo.

Así que dependerá de cada desarrollador elegir la herramienta para escribir su código JavaScript. Hasta el próximo tema.