Teoría
Teoría

Cómo conectar scripts externos

Lo más habitual es conectar los scripts desde archivos externos con extensión .js. Para eso se usa la etiqueta <script> con el atributo src, que indica la ruta del archivo. Por ejemplo:

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

Ten en cuenta que <script> es una etiqueta con apertura y cierre. Si conectas scripts externos, simplemente no escribas nada dentro de ella.

Lo mejor es conectar los scripts externos antes de la etiqueta de cierre </body>.

En este ejercicio vas a conectar un script externo ubicado en external.js(abre el enlace para ver este archivo en el navegador).

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cómo conectar scripts externos</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Scripts externos</h1> <p>Los scripts externos, igual que los estilos externos, se usan mucho más que los scripts integrados.</p> <p>Es más cómodo modificarlos, sobre todo cuando el mismo script está conectado a muchas páginas.</p> <p>Además, el navegador puede guardar estos recursos en caché, lo que ayuda a cargar las páginas más rápido.</p>  </body> </html>

CSS

body { margin: 20px; font-size: 18px; line-height: 24px; } h1 { font-size: 52px; line-height: 64px; font-family: "Monaco", "Courier", monospace; color: #618ad2; transition: color 0.5s; }

ObjetivosRealizado

Conecta a la página un script externo. Para hacerlo:

Inserta la etiqueta <script></script> antes de la etiqueta de cierre </body>,
y luego asígnale al atributo src el valor external.js.