Listado completo de tutoriales

Archivo JavaScript externo (*.js)


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.

Retornar