Mezclar lenguajes de programación es una estrategia frecuentemente usada para fortalecer los proyectos web. Sea usando React o la etiqueta script en un archivo HTML, esto nos permite unir el poder de cada sintaxis. En este post, te enseñaremos dónde ubicar script en tu código HTML para que mezcles lenguajes apropiadamente.
¿Qué es script?
Script es un elemento o etiqueta HTML que nos permite abrir una sección dentro de un archivo HTML para introducir código ejecutable, normalmente código JavaScript. Esto es muy útil cuando estamos trabajando con elementos del DOM, pues script nos permite acceder y manipular los datos del HTML directamente desde JavaScript. Es decir, nos permite crear elementos en el DOM y ubicar elementos creados en el DOM directamente desde el index.html, o llamar a un archivo index.js. A continuación te mostramos un ejemplo:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset= “UTF-8″/>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>
<meta name=”viewport” content=”with-devide-width, initial-scale=1.0″/>
<title>Helloworld KC</title>
</head>
<body>
<script src=”index.js”></script>
</body>
</html>
Ahora, una etiqueta script no puede insertarse en cualquier lugar de nuestro código HTML. Por ello, a continuación te enseñaremos dónde ubicar script en tu código.
¿Dónde ubicar script en tu código?
La principal cuestión a la hora de definir dónde ubicar script en tu código es si ubicarlo dentro del elemento head o del elemento body.
Cuando es un script nuestro, es decir, que tiene contenido propio de nuestra aplicación, deberemos ubicarlo dentro de body. Por su parte, cuando es un script de fuera, lo ubicaremos dentro del elemento head. Allí pondríamos, por ejemplo, la conexión cdn a la librería moment.js.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset= “UTF-8″/>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>
<meta name=”viewport” content=”with-devide-width, initial-scale=1.0″/>
<title>Helloworld KC</title>
<script src=”https://cdnjs.cloudfare.com/…”
</head>
<body>
<script src=”index.js”></script>
</body>
</html>
La línea de código anterior hace que nuestra web cargue la librería moment.js. Es decir, dentro de nuestro JavaScript tendremos acceso a todo lo que esta librería nos permita.
Entonces ¿por qué la ubicamos en el head y no en el body? Porque cuando importamos una librería externa de esta manera, dependemos de que su servidor esté funcionando. En este sentido, si el servidor se cae, también se caerá nuestro proyecto, comprometiendo el funcionamiento de la aplicación. Por ello, la convención ha decidido poner esta dependencia dentro del head.
Ahora, ubicar script en tu código también define que el que sea nuestro debe estar al final del body. Esto se hace porque, cuando el navegador esté parseando este HTML, será más sencillo y rápido pintar un HTML que ejecutar la totalidad del JavaScript. Es decir, es preferible dejar la interpretación, importación y ejecución de nuestro JavaScript para el final del código, con el fin de que el usuario pueda ver algo mientras se cargan estas acciones.
¿Qué sigue?
Ahora que sabes cómo ubicar script en tu código, ¡es el momento de utilizar esta importante etiqueta en tus propios proyectos! Para conocer más sobre el desarrollo de todo tipo de proyectos para la web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás a desarrollar con diferentes lenguajes y herramientas para triunfar en el sector IT. ¡No te lo pierdas y solicita información!
