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() {
    let fecha;
    fecha = new Date();
    var cadena = fecha.getDate() + '/' + (fecha.getMonth() + 1) + '/' + fecha.getFullYear();
    return cadena;
}

function retornarHora() {
    let 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>
    <h1>Página HTML</h1>
	<p>Disponemos el contenido HTML</p>
    <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 la etiqueta 'script' para importar el archivo funciones.js:

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

Mediante la propiedad 'src' indicamos el nombre del archivo a importar (debe encontrar se el mismo directorio, o en su defecto hay que indicar el path de su ubicación)

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.

Durante este curso seguiremos trabajando solo con el archivo HTML para facilitar el aprendizaje, pero luego cuando profundice JavaScript haciendo el curso de DHTML YA (DOM) trabajará dividiendo las páginas mediante archivos HTML, JS y CSS

Retornar