Introducción
JavaScript no necesita presentación. Es uno de los lenguajes de programación más populares para el desarrollo web. Funciona de manera similar a HTML y CSS. Todos estos lenguajes ayudan a diseñar y desarrollar aplicaciones y programas basados en la web.
¿Entonces, cómo es útil JavaScript en particular? Con la ayuda de JavaScript, puedes hacer que tus aplicaciones y páginas web sean bastante interactivas. No hay lugar para la complacencia en el ámbito moderno. Necesitas captar la atención de tus espectadores en los primeros segundos y mantenerlos interesados. No cabe duda de que un diseño web interesante y adaptable es una de las mejores maneras de hacerlo. Afortunadamente, la mayoría de los navegadores son compatibles con JavaScript. Se puede ejecutar en tu navegador con la ayuda de algunos motores integrados.
Cómo añadir JavaScript a HTML
Si quieres usar archivos de JavaScript para tu aplicación web, necesitas ejecutarlos junto con el marcado HTML. Hay dos formas de añadir JavaScript a HTML. Un enfoque es hacerlo en línea dentro de un documento HTML. La otra forma es añadirlo como un archivo independiente. Este archivo se descargará junto con el documento HTML.
En este tutorial, exploraremos en detalle cómo puedes añadir JavaScript a HTML utilizando estos dos métodos.
Cómo añadir JavaScript a documentos HTML en línea
Primero, veremos cómo puedes añadir JavaScript a un documento HTML en línea. Para hacer esto, tienes que usar la etiqueta HTML dedicada. Es <script>. Esta etiqueta envuelve el código JavaScript. Puedes colocar la etiqueta en cualquier lugar de la totalidad de tu marcado HTML. Dónde la coloques depende de cuándo quieras que se cargue el JavaScript.
Por ejemplo, puedes colocarla en la sección <head>, en la sección <body> o incluso después de la etiqueta de cierre </body>. Si quieres mantener el JavaScript alejado del contenido principal del código HTML, es mejor que coloques la etiqueta en la sección <head>. Esta contendrá el código JavaScript. Por otro lado, es posible que desees que tu código JavaScript se ejecute dentro del diseño de tu página web. Si este es el caso, debes colocar la etiqueta en la sección <body>. Harás esto si, por ejemplo, estás usando document.write para generar contenido.
Una mejor manera de entender esto sería a través de un ejemplo con código. Considera el siguiente documento HTML que está en blanco. El título del navegador de este documento es Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
Como puedes ver, aquí no hay rastro de JavaScript. El documento solo contiene el marcado HTML hasta ahora. Ahora, nos gustaría añadir algo de código JavaScript en línea para que se cargue y se ejecute simultáneamente. Considera el siguiente fragmento de código JavaScript:
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
Según el código anterior, estamos permitiendo que nuestra página web muestre una alerta con la fecha de hoy. Así que no importa cuándo el visitante acceda al sitio, la página mostrará la fecha actual.
Ahora, para añadir este fragmento de código JavaScript al documento HTML, utilizaremos la etiqueta <script>. En primer lugar, debes añadir el código JavaScript entre las etiquetas <head>. Esto le indica a la página web que este código en particular debe cargarse antes que el resto del contenido de la página. Puedes añadir el código debajo de las etiquetas <title>. Así es como lo harías:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La fecha de hoy</title> <script> let d = new Date(); alert("La fecha de hoy es " + d); </script> </head> <body> </body> </html> |
Tu código JavaScript ya está agregado. Tu página web se ejecutará y cargará este script antes que el resto de la página. Cuando lances tu sitio, recibirás una alerta con la fecha actual, algo como esto:
Así es como agregarías el código a la sección <head> del documento HTML. La alternativa sería agregar el script dentro o fuera de las etiquetas <body>. Como verás en el siguiente ejemplo, agregaremos el fragmento de código después de la sección <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" "content"="width=device-width, initial-scale=1"> <title>La fecha de hoy</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>La fecha de hoy es " + d + "</h1>" </script> </body> </html> |
Como resultado de esta modificación, verás algo como esto al volver a cargar la página:
Cómo agregar JavaScript a HTML con un archivo JavaScript independiente
Los scripts pequeños de JavaScript funcionan bien con archivos HTML. Esto se debe a que se ejecutan en una sola página o menos en su totalidad. Si estás trabajando con scripts más grandes que ocupan varias páginas, el archivo puede volverse muy difícil de entender. Por eso es posible que necesites agregarlo como un archivo JavaScript independiente. El archivo se cargará simultáneamente con el documento HTML.
En esta sección, analizaremos cómo puedes agregar JavaScript a HTML utilizando un archivo independiente. El código normalmente se aloja en uno o más archivos .js. El documento HTML hará referencia a estos archivos como cualquier otro recurso externo. Las razones por las que podrías querer usar un archivo JavaScript independiente son muchas. Principalmente, hace que el código sea mucho más fácil de leer y entender. Sin mencionar que los archivos independientes permiten que las páginas almacenadas en caché se carguen rápidamente y también son relativamente más fáciles de mantener.
Para aprovechar estos beneficios, necesitas saber cómo conectar ambos entre sí: el archivo JavaScript y el documento HTML. Para ayudarte a entender, tomaremos el ejemplo de un pequeño proyecto web. Este supuesto proyecto contiene un archivo index.html principal en la raíz, style.css en el directorio css/ y script.js en el directorio js/. Aquí está nuestro pequeño proyecto:
|
1 2 3 4 5 6 7 8 9 10 11 |
proyecto/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Para nuestro marcado HTML, utilizaremos el documento que usamos anteriormente:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La fecha de hoy</title> </head> <body> </body> </html> |
Ahora que tenemos nuestros dos documentos, podemos empezar a conectarlos. Tenemos que añadir el código JavaScript relativo a la fecha al archivo script.js. Lo añadirás como un encabezado <h1> de la siguiente manera:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>La fecha de hoy es " + d + "</h1>" |
Para conectar el código al documento HTML, añadirás una referencia al script. La referencia debe estar presente dentro o debajo de la sección <body> de la plantilla HTML. Aquí está el código que utilizarás aquí:
|
1 |
<script src="js/script.js"></script> |
Como puedes ver, estamos utilizando la etiqueta <script>. La etiqueta indica el archivo script.js que se encuentra en el directorio js/ del proyecto. Así es como aparecerá el código en el documento HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La fecha de hoy</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Si lo deseas, puedes realizar algunas modificaciones estilísticas para dar vida a tu página. Por ejemplo, añadamos un color de fondo al encabezado <h1>. Realizaremos esta edición en el archivo style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Dado que la edición se mostrará en el encabezado, haremos referencia a ella en la sección <head> del documento HTML. Así es como harás la referencia a este archivo CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La fecha de hoy</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Ahora que hemos realizado las referencias requeridas, puedes visualizar los cambios. Carga el archivo index.html en tu navegador y verás una página como esta:
Si deseas actualizar el código, puedes editar todas tus páginas desde una única ubicación. Esto facilita enormemente el mantenimiento de las páginas web. Esa es la ventaja de utilizar un archivo independiente para tus scripts de JavaScript.
Conclusión
Esperamos que este tutorial te haya ayudado a aprender más sobre el proceso de añadir JavaScript a HTML. Hemos cubierto cómo hacerlo en un documento HTML en línea, así como cómo añadirlo como un archivo .js. Ahora que conoces los conceptos básicos, puedes hacer mucho más con JavaScript en HTML.
Aquí tienes algunos recursos de nuestro blog que te ayudarán a utilizar aún más JavaScript:
- Si estás creando tu propia aplicación web, echa un vistazo a nuestra guía sobre cómo elegir la mejor configuración de servidor.
- Si quieres aprender cómo configurar un blog con Ghost, echa un vistazo a este tutorial.
- Echa un vistazo a este tutorial para aprender cómo instalar Node.js en Ubuntu 18.04.
¡Feliz computación!
Comentarios
Aún no hay comentarios. Sea el primero.