Inicio JavaScript: Primeros Pasos

JavaScript: Primeros Pasos

Author: admin admin
abril 26, 2024

do para añadir interactividad en las páginas web, permitiendo que los sitios respondan a las acciones del usuario, como hacer clic en botones, mover el ratón o enviar formularios. Con el paso de los años, su uso ha crecido y hoy en día se utiliza tanto en el frontend (lo que ves en el navegador) como en el backend (el servidor).

Una de las características más atractivas de JavaScript es que es compatible con todos los navegadores modernos. Esto significa que puedes escribir JavaScript en cualquier página HTML sin necesidad de configuraciones adicionales, funcionará en todos.

Cómo insertar JavaScript en tu HTML

Integrar tu código correctamente no es un detalle menor, es la base sobre la que construirás aplicaciones rápidas, mantenibles y profesionales. En esta guía, pasaremos de los métodos más básicos a las técnicas modernas que optimizan el rendimiento y la organización de tu proyecto.

Existen dos formas básicas de incluir JavaScript en un documento HTML:

  • Método 1: El Script “Incrustado” (Para Pruebas Rápidas)
  • Método 2: El Archivo Externo (La Práctica Profesional)

Incrustar código JavaScript en una página HTML

La forma más directa de añadir JavaScript es escribirlo directamente dentro de tu archivo HTML usando las etiquetas <script> y </script>. Esta técnica es útil para experimentos rápidos o para añadir una funcionalidad muy pequeña y específica a una sola página.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Prueba de Script Incrustado</title>
</head>
<body>
    <h1 id="main-title">Hola, Mundo</h1>
    <button id="change-text-btn">Cámbiame</button>

    <!-- Nuestro código JavaScript va aquí dentro -->
    <script>
        // 1. Seleccionamos los elementos que necesitamos del HTML
        const title = document.getElementById('main-title');
        const button = document.getElementById('change-text-btn');

        // 2. Creamos una función que se ejecutará cuando se haga clic
        const updateTitle = () => {
            title.textContent = '¡Magia con JavaScript!';
        };

        // 3. Le decimos al botón que "escuche" el evento 'click'
        button.addEventListener('click', updateTitle);
    </script>
</body>
</html>

Esta forma es útil para pequeños fragmentos de código o para ejecutar scripts específicos en una página en especifico.

Ventajas del Método Script “Incrustado”:

  • Sencillo y rápido: Todo está en un solo archivo.

Desventajas del Método Archivo Externo:

  • No es reutilizable: Si quieres la misma funcionalidad en otra página, tienes que copiar y pegar el código.
  • Ensucia el HTML: Mezcla la estructura (HTML) con el comportamiento (JS), lo que dificulta el mantenimiento.
  • Pésimo para proyectos grandes: Se vuelve inmanejable rápidamente.

Incluir un archivo JavaScript externo

A medida que tu proyecto crece, la mejor práctica es separar tu JavaScript en sus propios archivos con la extensión .js. Luego, los enlazas desde tu HTML. Esta es la forma estándar y recomendada de trabajar en cualquier proyecto real. Vamos a replicar el ejemplo anterior, pero de la manera correcta.

Crea tu archivo JavaScript (scripts/main.js):

javascript
// scripts/main.js

// La lógica es la misma, pero ahora vive en su propio mundo.
const title = document.getElementById('main-title');
const button = document.getElementById('change-text-btn');

const updateTitle = () => {
    title.textContent = '¡Código organizado y profesional!';
};

button.addEventListener('click', updateTitle);

Enlázalo desde tu HTML:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Script Externo Profesional</title>
</head>
<body>
    <h1 id="main-title">Hola, Mundo</h1>
    <button id="change-text-btn">Cámbiame</button>

    <!-- Enlazamos nuestro archivo externo. ¡Mucho más limpio! -->
    <script src="scripts/main.js"></script>
</body>
</html>

Ventajas Clave de los Archivos Externos

  • Reutilización: Puedes enlazar el mismo main.js en 100 páginas diferentes. Si corriges un error, se corrige en todas.
  • Mantenimiento: El HTML es para la estructura, el CSS para el estilo y el JS para la lógica. Separar las responsabilidades hace que tu proyecto sea infinitamente más fácil de entender y modificar.
  • Colaboración en Equipo: Un desarrollador puede trabajar en el main.js mientras otro modifica el index.html sin pisarse.
  • Mejora de Rendimiento (Caching): Los navegadores pueden guardar (cachear) tus archivos .js. Cuando un usuario visita otra página de tu sitio, el archivo ya está descargado, haciendo que la carga sea casi instantánea.

Ruta del Archivo Externo:

La ruta del archivo externo te permite enlazar archivos desde otros directorios utilizando .. para navegar hacia arriba en la jerarquía de directorios.

html
<script src="../public/js/script.js"></script>

En el ejemplo anterior “..” indica que estamos retrocediendo un nivel en la jerarquía de directorios. Luego, accedemos al directorio “public”, después al subdirectorio “js” y finalmente al archivo “script.js”.

Enlace a Archivos Externos de Terceros:

También es posible enlazar archivos JavaScript alojados en servidores externos, como bibliotecas o CDNs. Un ejemplo común es la inclusión de jQuery desde su CDN.

html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Incluir Múltiples Archivos JavaScript en un Archivo

Incluir múltiples archivos JavaScript en una página web es posible mediante la inclusión de varias etiquetas <script> en el código HTML. El motor JavaScript interpreta estos archivos en el orden en que aparecen. Por ejemplo:

html
<script src="js/functions.js"></script>
<script src="js/app.js"></script>

En este ejemplo, el motor JavaScript interpreta primero el archivo functions.js y luego app.js, en secuencia. Es importante tener en cuenta este orden ya que las funciones y variables definidas en functions.js estarán disponibles para su uso en app.js.

La Ubicación Importa: El Dilema de <head> vs. <body>

Has visto que hemos puesto la etiqueta <script> justo antes del cierre de </body>. Esto no es casualidad. Cuando un navegador encuentra una etiqueta <script>, detiene la construcción del resto de la página (el renderizado), descarga el archivo JavaScript y lo ejecuta.

  • Si pones el script en el <head>: El navegador se detiene antes de haber mostrado nada en la pantalla. Si tu script es grande o la conexión es lenta, el usuario verá una página en blanco durante segundos. ¡Mala experiencia!
  • Si pones el script al final del <body>: El navegador construye y muestra todo el contenido visible (HTML y CSS) primero. Luego, descarga y ejecuta el JavaScript. El usuario percibe que la página carga mucho más rápido.

Regla de oro (tradicional): Coloca tus scripts justo antes de la etiqueta </body>.

html
<!DOCTYPE html>
<html>
<head>
    <!-- Otros elementos del encabezado -->
</head>
<body>
    <!-- Contenido de la página -->

    <!-- Scripts al final del cuerpo -->
    <script src="js/functions.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

La Solución Moderna: Los Atributos async y defer

Poner los scripts al final funciona, pero el HTML5 nos dio herramientas aún más potentes para controlar la carga: los atributos async y defer. Estos nos permiten colocar los scripts en el <head> (manteniendo el HTML limpio) sin bloquear la página.

Piénsalo como si estuvieras construyendo una casa (renderizando la página):

Sin Atributo (en <head>)asyncdefer
El constructor detiene todo, va a buscar una herramienta (el script), la usa, y luego sigue construyendo. Bloqueante.El constructor pide a un ayudante que traiga la herramienta. Mientras, él sigue construyendo. Cuando el ayudante llega, el constructor se detiene para usar la herramienta.El constructor pide a un ayudante que traiga la herramienta. Él sigue construyendo hasta terminar la casa. Solo entonces, usa la herramienta.

Atributo Async (Asíncrono):

El atributo async permite que el script se descargue en paralelo con la página. Esto puede mejorar la velocidad de carga porque el navegador no tiene que esperar a que el script se descargue y ejecute antes de continuar renderizando el resto del contenido. Sin embargo async no garantiza que los scripts se ejecuten en el orden en que se declaran, lo que puede causar problemas si un script depende de otro.

html
<script async src="js/functions.js"></script>
<script async src="js/app.js"></script>
  • Descarga: En paralelo, sin bloquear el HTML.
  • Ejecución: Tan pronto como se descarga, detiene el renderizado y se ejecuta.
  • Orden: No se garantiza el orden de ejecución. Si tienes dos scripts async, cualquiera puede ejecutarse primero.
  • Ideal para: Scripts independientes que no dependen de otros ni del DOM, como rastreadores de analítica (Google Analytics) o anuncios.

Atributo Defer (Diferir):

El atributo defer por otro lado, asegura que los scripts se ejecuten en el orden en que aparecen en el documento HTML. Además, garantiza que el script no se ejecute hasta que el navegador haya terminado de procesar completamente el HTML, lo que puede ser útil para asegurarse de que el DOM esté listo para interactuar con el JavaScript.

html
<script defer src="js/app.js"></script>
  • Descarga: En paralelo, sin bloquear el HTML.
  • Ejecución: Después de que todo el HTML ha sido analizado, pero antes del evento DOMContentLoaded.
  • Orden: Se garantiza el orden de ejecución. Si tienes varios scripts con defer, se ejecutarán en el orden en que aparecen en el HTML.
  • Ideal para: La mayoría de los scripts que necesitan interactuar con el DOM. Es el reemplazo moderno de “poner el script al final del body”.

En caso de duda, usa defer. Te da el mejor rendimiento y un comportamiento predecible.

Buenas Prácticas en la Inclusión de JavaScript

A medida que los proyectos web crecen, es útil seguir ciertas prácticas recomendadas para asegurarse de que el código sea mantenible, eficiente y fácil de entender para otros desarrolladores.

  1. Modularidad: A medida que tu código JavaScript crece, es recomendable dividirlo en módulos. Desde la llegada de ES6, JavaScript soporta módulos nativos, lo que facilita la organización del código en partes reutilizables y bien definidas.
  2. Uso de herramientas para mejorar el código: Para mantener una alta calidad en el código, herramientas como ESLint y Prettier juegan un papel importante. Estas herramientas analizan el código en busca de errores de sintaxis, inconsistencias o malas prácticas. Además, pueden formatear automáticamente el código para seguir un estilo consistente.

Compatibilidad (Transpiladores y Polyfills):

No todos los navegadores (especialmente los más antiguos) entienden las últimas funciones de JavaScript.

  • Transpiladores (como Babel): Convierten tu código moderno (ej. funciones de flecha =>) a una versión más antigua y compatible que todos los navegadores entienden.
  • Polyfills: Son fragmentos de código que “inventan” funcionalidades que no existen en navegadores antiguos (ej. Array.prototype.includes()), permitiéndote usarlas sin preocuparte.

Conclusiòn:

Saber cómo y dónde incluir tu JavaScript es el primer paso para dejar de ser un aficionado y empezar a pensar como un desarrollador web profesional.

  • Empieza con archivos externos (.js).
  • Prioriza la experiencia del usuario usando defer en tus etiquetas <script> dentro del <head>.
  • Organiza tu código en módulos a medida que tu proyecto crezca.

Dominar estos cimientos te permitirá construir aplicaciones no solo funcionales, sino también rápidas, eficientes y un placer de mantener.

+1
0
+1
0