Tabla de contenidos
1. En el cuerpo del documento.
Igual que en CSS, tenemos tres formas diferentes de vincular código JavaScript con nuestro documento HTML. La primera forma es en el cuerpo del documento:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Nombre página</title>
</head>
<body>
...
<script>
alert('Hola mundo');
</script>
</body></html>
En esta forma se encapsula el código JavaScript entre las etiquetas <script> </script>. Esta es la forma menos indicada de implemetar código porque queda mezclado con el HTML, es más sucio y difícil de mantener.
2. En la cabecera del documento.
La segunda forma es poner el código dentro de la etiqueta <head>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"><script>
alert('Hola mundo');
</script>
<title>Nombre página</title>
</head>
<body>
...
</body></html>
3. En archivos externos, como mandan los cánones.
Introducir JavaScript en el documento entre las etiquetas <head> puede resultar práctico cuando el documento es pequeño, pero el código JavaScript crece con rapidez en grandes aplicaciones profesionales. Por lo que si usamos el mismo código en más de un archivo, tendremos que mantener diferentes versiones del mismo programa y los navegadores tendrán que descargar el mismo código una y otra vez con cada documento solicitado por el usuario.
Una alternativa más eficiente es tener el código JavaScript en una archivo externo y luego cargarlo desde los documentos que los requieran. Así, sólo los documentos que necesitan ese tipo de instrucciones deberán incluir el archivo, y el navegador tendrá que descargar el archivo una sola vez, los navegadores mantienen los archivos en caché para cuando se necesiten, así no se pierde el tiempo en hacer peticiones innecesarias al servidor.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"><script src='archivojavaScript.js'></script>
<title>Nombre página</title>
</head>
<body>
...
</body></html>
La estiqueta <script> posee un atributo src='nombreArchivo.js' que contiene la dirección del archivo donde tenemos que implementar todo el código JavaScript.
Después implementamos un el archivo archivojavascript.js en un archivo independiente con el siguiente código:
alert('Hola mundo');
Este código puede vincularse con cualquier documento HTML que lo necesite.
Deja una respuesta