Como cargar un archivo Javascript
El esquema general de una página web es un documento HTML donde están todas las etiquetas HTML de la página. A lo largo de ese documento, pueden existir referencias o relaciones a otros documentos, como archivos CSS o archivos Javascript. Por ejemplo, si dentro del documento HTML se encuentra una referencia a un archivo CSS, el navegador lo descarga y lo aplica al documento HTML, cambiando su apariencia visual. De la misma forma, si encuentra una referencia a un archivo Javascript, el navegador lo descarga y ejecuta las órdenes o acciones que allí se indican.
Para entender mejor el funcionamiento de JavaScript, es importante conocer el concepto de consola de JavaScript.
Explora las diferentes formas de escribir código JavaScript.
Script en línea
El script en línea se escribe directamente dentro del documento HTML, dentro de etiquetas
<script>.
Ejemplo Sencillo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Script en Línea</title>
</head>
<body>
<h1>Hola, JavaScript!</h1>
<script>
console.log("¡Hola desde el script en línea!");
</script>
</body>
</html>En este primer y sencillo ejemplo, sólo tenemos un documento: el archivo HTML. En él,
existe una etiqueta <script> que contiene las órdenes o líneas de Javascript que le
indican al navegador
que tiene que hacer (en este caso, mostrar un "¡Hola!" en la consola):
Script en Archivo externo
El archivo externo es un documento separado con extensión .js que contiene código
JavaScript.
Se referencia en el documento HTML mediante una etiqueta <script> con el atributo
src.
Ejemplo Sencillo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Script en Archivo Externo</title>
</head>
<body>
<h1>Hola, JavaScript!</h1>
<script src="script.js"></script>
</body>
</html>En este segundo ejemplo, tenemos dos documentos: el archivo HTML y el archivo
Javascript. En el
documento HTML, existe una etiqueta <script> que hace referencia al archivo
Javascript mediante el atributo src. El navegador descarga el archivo Javascript y
ejecuta las órdenes o líneas de código que allí se indican, mostrando un "¡Hola!" en la consola.
Ubicación de la etiqueta script
La etiqueta <script> puede ubicarse en diferentes partes del documento HTML, como
en
el <head> o al final del <body>. Sin embargo, es recomendable
colocarla al final del <body> para asegurar que el contenido HTML se cargue antes
de
ejecutar el código JavaScript.