Novedades ES6

Archivo JavaScript externo (*.js)

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos XHTML enlazan mediante la etiqueta script. Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.

El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la página HTML.

Esto trae muchos beneficios:

  • Reutilización de funciones de uso común. No tenemos que copiar y pegar sucesivamente las funciones en las páginas en las que necesitamos.
  • Facilita el mantenimiento de las funciones al encontrarse en archivos separados.
  • Nos obliga a ser más ordenados.

La mecánica para implementar estos archivos externos en JavaScript es:

1 - Crear un archivo con extensión *.js y tipear las funciones en la misma:

funciones.js

function retornarFecha() {
var fecha
fecha=new Date();
var cadena=fecha.getDate()+'/'+(fecha.getMonth()+1)+'/'+fecha.getFullYear();
return cadena;
}

function retornarHora()
{
var fecha
fecha=new Date();
var cadena=fecha.getHours()+':'+fecha.getMinutes()+':'+fecha.getSeconds();
return cadena;
}

2 - Creamos un archivo html que utilizará las funciones contenidas en el archivo funciones.js:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script src="funciones.js"></script>
<script>
document.write('La fecha de hoy es:'+retornarFecha());
document.write('<br>');
document.write('La hora es:'+retornarHora());
</script>

</body>
</html>

Es decir debemos disponer el siguiente código para importar el archivo funciones.js:

<script src="funciones.js"></script>

Mediante la propiedad 'src' indicamos el nombre del archivo a importar.

Luego, podemos llamar dentro de la página HTML, a las funciones que contiene el archivo externo funciones.js; en nuestro ejemplo llamamos a las funciones retornarFecha() y retornarHora().

Como podemos ver, el archivo html queda mucho más limpio.

Es importante notar que primero se importa el archivo 'funciones.js' y recién podemos llamar a las funciones contenidas.

Si quiere probar en su equipo este ejemplo debe generar los dos archivos 'funciones.js' y 'pagina1.html', luego llamar desde el navegador la página HTML.