Logo Desarrollo


JavaScript en html

Este lenguaje de programación nació para añadir características interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Sin embargo ha ido evolucionando con el tiempo, abarcando también otras áreas. En estos primeros artículos trabajaremos este lenguaje con su función original; convertir un html estático en algo con interactividad. Para ello es necesario que tengas conocimientos básicos de html, así como la base de los selectores css, aunque esto último no es imprescindible.


Diferentes formas de ejecutar código js en html

El código puede ser incluído dentro del propio documento html entre las etiquetas script. Este puede ser aglutinado en algún sector dentro de las etiquetas head o del body, o también esparcido entre los elementos del propio documento.
Sin embargo insertar JavaScript en HTML directamente no suele ser la mejor opción. Sobre todo porque algunos scripts de JS deben utilizarse en varias páginas, por lo tanto, es mejor mantener el código JavaScript en archivos separados.
Es por esto que la forma más recomendable de incluir JavaScript en HTML es importando archivos externos, referenciándolos desde el atributo src en el propio elemento script al igual que con los documentos CSS. Algunos de los beneficios de agregar código JS en archivos separados son:

Ejemplos

Hay que tener en cuenta que la lectura del documento es de arriba hacia abajo, por lo que es fundamental colocar el código js en el lugar correcto. En este caso no es necesario esperar a que se cargue todo el documento antes de mostrar la alerta, por eso el código está dentro del head. Sin embargo cuando vayamos a manipular elementos dentro del documento, necesitamos que estos se creen en primer lugar para luego afectarlos. En tal caso el código podría ir antes de la etiqueta de cierre del body.
La función alert(), activa una ventana modal que muestra la cadena pasada como argumento. Veamos como ejecutarla

Dentro del documento html


<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 1</title>

<script>
alert('Bienvenidos a mi primera alerta');
</script>

</head>
<body>

<h1>Primer ejemplo de inserción JS</h1>

</body>
</html>


En un archivo diferente

Creamos un archivo txt donde incluiremos el código JavaScript, sin las etiquetas script. En este caso solo tendría la siguiente línea:

alert('Bienvenidos a mi primera alerta');

Y al guardarlo, lo renombramos como "alerta.js". Fundamental que la extensión del archivo sea js.
Para hacer referencia a este archivo, y que pueda ser ejecutado, hay que añadir el atributo src a la etiqueta script con la ruta del mismo como valor. Si este está en la misma hubicación que el html, solo hay que colocar el nombre del archivo. De lo contrario, hay que añadir la ruta relativa.


<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 1</title>

<script src='alerta.js'></script>

</head>
<body>

<h1>Primer ejemplo de inserción JS</h1>

</body>
</html>