Integrating JavaScript in HTML

Esta lección asume que tienes conocimiento básico sobre HTML y su estructura.Esta sección explorará cómo JS puede ser integrada en HTML. Normalmente no se usa para renderizar contenido sino que trabaja con HTML y CSS para crear páginas dinámicas e interactivas. Ha dos formas principales de integrar JS en HTML: internamente y externamente.

JavaScript Interno

Se refiere a incrustar el código JS directamente en un documento HTML. Este método es mejor para principiantes porque les permite ver cómo el script interactúa con HTML. El script se inserta entre etiquetas <script></script>. Estos pueden ser colocados dentro e la sección <head> para códigos que necesiten ser cargados antes de que se renderice el contenido de la página o en el <body> donde el código podrá interactuar con los elementos de la página según se carguen.

Ejemplo

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Internal JS</title>
</head>
<body>
    <h1>Addition of Two Numbers</h1>
    <p id="result"></p>

    <script>
        let x = 5;
        let y = 10;
        let result = x + y;
        document.getElementById("result").innerHTML = "The result is: " + result;
    </script>
</body>
</html>

En este documento HTML estamos usando JS interno. El JS interactúa con el código HTML seleccionando un elemento (<p> con id = "result") y actualizándo su contenido usando document.getElementById("results").innerHTML. Este JS interno es ejecutado cuando el navegador carga la página.

JavaScript Externo

El JS externo implica crear y almacenar código JS en un achivo separado que finaliza con la extensión .js. Este método ayuda a los desarrolladores a mantener el documento HTML limpio y organizado. El archivo externo JS puede ser albergado en el mismo servidor que el HTML o en un servidor externo.

Podemos usar el mismo ejemplo para esta vez.

Primero creamos un archivo script.js con el contenido:

let x = 5;
let y = 10;
let result = x + y;
document.getElementById("result").innerHTML = "The result is: " + result;

Y luego creamos el external.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JS</title>
</head>
<body>
    <h1>Addition of Two Numbers</h1>
    <p id="result"></p>

    <!-- Link to the external JS file -->
    <script src="script.js"></script>
</body>
</html>

Lo que hicimos fue usar el atributo src en el <script> para cargar el .js desde un archivo externo. Cuando el servidor carga la página busca el archivo script.js y lo carga. Este enfoque nos permite separar el código JS manteniendo nuestro HTML más limpio.

Verificar JS Interno o Externo

Al hacer pentesting de una aplicación web es importante comprobar si el sitio usa JS interno o externo.Esto puede ser verificado fácilmente mirando el código fuente de la página. Podemos hacerlo haciendo Ctrl + U.

Si vemos un <script> con un src podemos concluir que la página está cargando un .js externo.