JavaScript convive con HTML

Por Julio Giampiere Grados Caballero
JavaScript convive con HTML

Sin duda alguna, en la actualidad uno de los grandes aliados de HTML es JavaScript, pues este lenguaje crea la interacción sobre las paginas web necesaria para una mejor experiencia del usuario.

La inclusión de JavaScript en el mundo web fue logrado gracias a Netscape, pues después de grandes esfuerzos, a través de ensayos, errores y controversia, varias decisiones fueron tomadas y finalmente se acordó en llevar un script universal a la Web. 

Es así como el método para la inserción de JavaScript en una página HTML se realiza a través del elemento <script>. Este elemento, como lo había dicho antes, fue creado por Netscape y añadido a HTML para su uso.

El elemento <script> nos permitirá agregar código JavaScript a nuestra página web de dos formas: directamente en el documento o desde un archivo externo.

Para incluir código JavaScript directamente en el documento, sería de la siguiente manera:

<script>
 document.write(‘Hi Coder Live’);
< /script>

Es así cómo hemos usado una sentencia de escritura javascript sobre nuestra página web, recuerda que para poder manipular todo el documento HTML existe una variable llamada: document, que conoceremos en un tutorial posterior.

Hablemos ahora de la segunda forma de agregar contenido JavaScript a nuestra página web, que es a través de un archivo externo. Para eso, en el elemento script, en la etiqueta tendremos que hacer uso del atributo “src”, e indicar una dirección url única donde se encuentra nuestro archivo con el contenido javascript a cargar.

script src=”js/test1.js” > < /script >
//test1.js
document.write(‘Hi Coder Live’);

Igual que en el ejemplo anterior hemos logrado mostrar el contenido de nuestra sentencia de escritura javascript.

Debemos tener presente que los navegadores web realizan la carga del documento HTML de forma secuencial, cuando el navegador encuentre una etiqueta script y este tiene consigo un atributo src, cargará el contenido javascript de dicho archivo, o de darse el caso de encontrar código javascript directamente en el documento, también será cargado, si las sentencias javascript ejecutadas son muy lentas, esto puede causar demoras en la renderización de nuestra página web, por ello es recomendable agregar el contenido javascript después del contenido html, es decir al final del body y así no se vea afectado nuestro documento HTML.

Veamos un ejemplo, donde desarrollemos lo anteriormente explicado:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<script>
  alter('Nos encontramos en el curso de JavaScipt y jQuery');
</script>
</head>
<body>
<p>Bienvenidos Comunidad Devcode</p>
</body>
</html>

En el navegador se ve reflejado una alerta javascript, que impide la visualización del contenido de la página, es por ello que se recomienda para no ver afectado nuestro documento web, agregar el o los script después del contenido HTML, es decir al final del body

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<p>Bienvenidos Comunidad Devcode</p>
<script>
  alter('Nos encontramos en el curso de JavaScipt y jQuery');
</script>
</body>
</html>

Y así en primera instancia cargar todo el contenido HTML en nuestra página y posterior a ello, nuestras funcionalidades javascript.

Recuerda que como los navegadores realizan la carga del documento web de forma secuencial, si indicamos que se cargará más de una dirección de url en diferentes script, deben ser agregados en orden de acuerdo a como necesites cargarlos.

A todo esto, ¿con cuál de las dos formas de uso JavaScript es más recomendable trabajar? Pues es a través de un archivo externo, por lo siguiente: 

Por mantenibilidad: Es más fácil tener un directorio para todos los archivos JavaScript donde los desarrolladores puedan editar el código JavaScript, independientemente del HTML usado.

El almacenamiento en Caché: Todos los navegadores almacenan en caché los scripts enlazados, lo que significa que si dos páginas usan el mismo archivo, este se descarga solo una vez y se almacena en caché entonces para la siguiente página que use el mismo archivo simplemente lo llama desde la caché del navegador, de manera que así el tiempo de carga de la página es mucho más rápido.

Bien en este tutorial hemos logrado conocer de qué manera conviven los documentos HTML con JavaScript, recuerda hacer uso de las buenas prácticas y así por trabajar de manera óptima con este lenguaje.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Julio Giampiere Grados Caballero

Julio Giampiere Grados Caballero

CTO y Cofundador de Devcode.la. Full stack JavaScript. React | jQuery | Vanilla | Backbone | Node | MongoDB.