Tutorial para comenzar con JavaScript

JavaScript es el lenguaje de programación esencial para el desarrollo web. Tanto si estás comenzando en la programación como si vienes de otro lenguaje, este tutorial te ayudará a familiarizarte con JavaScript, sus prácticas modernas, y a entender cómo se crean sitios y aplicaciones que emplean este lenguaje.

En este tutorial comenzaré desde los conceptos básicos hasta llegar a características más avanzadas. La idea es tener un panorama sobre el lenguaje y las mejores prácticas actuales para aplicarlo a proyectos reales.

Tutorial para comenzar con JavaScript

1. ¿Qué es JavaScript?

Esta es la pregunta que debo responder siempre al comenzar con una capacitación que incluye este lenguaje como eje central. Me parece muy importante dejar el concepto claro, para que cada alumno pueda comenzar a introducirse en sus características.

JavaScript es un lenguaje de programación que, aunque fue creado para el desarrollo web en el lado del cliente, ha evolucionado hasta ser usado también en el lado del servidor con tecnologías como Node.js. Permite crear interactividad y manipular el contenido de las páginas web en tiempo real.

2. Primeros pasos: crear los archivos

Si vamos a comenzar a trabajar del lado cliente, y deseamos incluir JavaScript, lo primero será crear un archivo HTML. Este archivo servirá como punto de entrada para conectar e incluir nuestro código.

  1. Crea un archivo HTML llamado index.html.
  2. Dentro de este archivo, agrega una estructura básica de HTML:
   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Mi primer proyecto en JavaScript</title>
   </head>
   <body>
       <h1>Hola, JavaScript</h1>
       <script src="script.js"></script> <!-- Archivo JavaScript externo -->
   </body>
   </html>
  1. Luego, crea un archivo script.js, que será donde escribiremos el código JavaScript.

Vale señalar que es una buena práctica separar JavaScript en archivos externos, como script.js, para mantener el HTML limpio y organizado.

Para crear tanto los archivos .html, como .js, podremos trabajar con un editor de código. Visual Studio Code es una de las opciones más populares del momento, tanto para quienes comienzan, como también para profesionales del sector.

Comenzar con JavaScript

3. Comprender las variables

JavaScript permite definir variables de diferentes maneras. La forma más moderna de hacerlo es usando let y const, que tienen ciertas ventajas sobre var.

  • let: se emplea para variables cuyo valor puede cambiar a lo largo del tiempo.
  • const: es lo que se conoce como constante y su uso es para variables cuyo valor no cambiará una vez definido.
  • var: es la manera «clásica» de definir variables. Su uso viene desde versiones anteriores de JavaScript. En la actualidad se recomienda evitar este tipo de declaración, debido a problemas con el alcance y la mayor seguridad en la estructura que ofrecen las opciones incorporadas desde ECMAScript6.

Ejemplo:

const nombre = "Damián";
let habilitado = true;

Consejo: Siempre que se posible y adecuado, usaremos const en lugar de let. Esto ayudará a reducir errores al asegurar que el valor de la variable no cambie accidentalmente. También contribuye a que no se declarare una variable con el mismo nombre en el mismo scope.

4. Estructuras de control condicionales

Las estructuras de control en JavaScript permiten tomar decisiones y repetir tareas en nuestro código. Vamos a ver las más comunes y útiles:

Condicionales: if, else if, y else

Las declaraciones condicionales se utilizan para ejecutar diferentes bloques de código en función de si una condición es verdadera o falsa.

Ejemplo básico de if, else if, y else:

let edad = 18;

if (edad < 18) {
    console.log("Eres menor de edad.");
} else if (edad === 18) {
    console.log("Tienes justo 18 años.");
} else {
    console.log("Eres mayor de edad.");
}

Operador ternario

Es una versión abreviada de if-else, ideal para asignaciones rápidas. Útil cuando tenemos una sola condición que evaluar y solo dos opciones.

let esMayor = edad >= 18 ? "Mayor de edad" : "Menor de edad";
console.log(esMayor);

Vale destacar que JavaScript también cuenta con estructuras condicionales que permiten trabajar con el concepto de Switch/Case.

5. Estructuras de repetición o bucles

Los bucles son estructuras que nos permiten repetir una acción varias veces. Los más comunes son for, while y for...of.

Bucle for

Se usa cuando sabemos la cantidad de veces que queremos ejecutar el código.

for (let i = 0; i < 5; i++) {
    console.log("Repetición número:", i);
}

Bucle while

Ejecuta el código mientras una condición se mantenga verdadera. Útil cuando la cantidad de repeticiones no está definida previamente.

let contador = 0;

while (contador < 5) {
    console.log("Contador:", contador);
    contador++;
}

3. Bucle for...of

Se usa para recorrer elementos en estructuras como arrays. Es una opción limpia y legible cuando trabajamos con listas.

const frutas = ["Manzana", "Banana", "Naranja"];

for (const fruta of frutas) {
    console.log(fruta);
}

Consejo: Usa for...of en vez de un for «tradicional» cuando trabajamos con arrays. Esto ayuda a mejorar la legibilidad del código y a evitar errores con el índice.

Con estas estructuras puedes tomar decisiones y repetir tareas, lo cual es fundamental para manejar la lógica en tus proyectos de JavaScript.

6. Funciones en JavaScript

Las funciones permiten reutilizar y organizar el código de manera eficiente. JavaScript tiene varias formas de declarar funciones. Esta es una forma clásica y sencilla de declarar una función:

function saludar() {
    console.log("¡Hola, mundo!");
}

Las funciones flecha son una forma moderna de escribir funciones en JavaScript, y son especialmente útiles cuando no necesitas cambiar el valor de this dentro de la función.

const saludar = () => {
    console.log("¡Hola, mundo!");
}

Consejo: usar funciones flecha siempre que sea posible para mejorar la legibilidad y mantener el código más compacto.

7. Organizando el código con Objetos

Desde ES6, JavaScript ha evolucionado en la capacidad de trabajar con Objetos. Desde esta versión es posible crear clases, lo que facilita la organización del código. Esto es especialmente útil para crear componentes reutilizables.

A continuación veremos un ejemplo de código JavaScript para la creación de una clase:

class Persona {
    constructor(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }

    saludar() {
        console.log(`Hola, soy ${this.nombre} y tengo ${this.edad} años.`);
    }
}

const persona1 = new Persona("Dami", 47);
persona1.saludar(); // Output: Hola, soy Dami y tengo 47 años.

Recomendación: utilizar clases para representar entidades y agrupar funciones relacionadas a estas entidades. Esto ayuda a estructurar mejor el código y a seguir principios de programación orientada a objetos (OOP).

Comenzar con JavaScript

8. Estructura de un proyecto

Cuando trabajamos en un proyecto más grande, una buena organización de carpetas y archivos es esencial. Aquí te doy una estructura básica para organizar un proyecto que use JavaScript en el lado del cliente y el servidor.

mi_proyecto/
│
├── index.html          # Archivo principal de HTML
├── css/
│   └── style.css       # Archivos de estilo
├── js/
│   └── script.js       # Archivos de JavaScript (lado del cliente)
└── server/
    ├── app.js          # Código JavaScript (lado del servidor, usando Node.js)
    └── routes.js       # Archivo de rutas del servidor

Es fundamental mantener separados los archivos JavaScript de cliente y servidor en carpetas diferentes para evitar confusiones y facilitar el mantenimiento. También vale aclarar que si se emplea JavaScript del lado servidor, por ejemplo con Node.js, es necesario configurar el proyecto para definir como se trabajará en la estructura de carpetas y como se manejará cada una.

9. JavaScript del lado cliente vs. lado servidor

JavaScript del lado cliente

Este es el JavaScript que se ejecuta en el navegador del usuario y permite:

  • Manipular el DOM para cambiar el contenido de la página.
  • Manejar eventos del usuario (como clics y desplazamiento).
  • Realizar peticiones HTTP para obtener datos de servidores.

Ejemplo de cómo manipular el DOM:

document.querySelector("h1").innerText = "¡Hola desde JavaScript del cliente!";

JavaScript lado servidor

Como mencionaba anteriormente, gracias a Node.js y otros frameworks, ahora podemos usar JavaScript en el servidor, donde maneja operaciones como:

  • Conectar con bases de datos.
  • Procesar solicitudes y enviar respuestas.
  • Ejecutar lógica de backend.

Ejemplo de un servidor básico en Node.js:

// server/app.js
const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hola desde el servidor con Node.js');
});

server.listen(3000, () => {
    console.log('Servidor en ejecución en http://localhost:3000');
});

Diferencia clave: el JavaScript del lado del cliente corre en el navegador del usuario, mientras que el del lado del servidor corre en el servidor donde está alojada la aplicación. Para esto último se requiere un servicio compatible con Node.js o el framework de servidor elegido.

10. Recomendaciones finales

No hay dudas que JavaScript es un lenguaje clave si deseamos encontrar posibilidades laborales en el mundo del desarrollo web. La capacidad de ser utilizado del lado cliente y servidor lo hacen una herramienta de gran potencia y versatilidad. Su largo camino en el sector lo posicionan como un lenguaje indispensable en el rubro.

Organizar el código resulta fundamental para nuestro trabajo. Si vamos a usar el mismo código en varios lugares, tenemos que considerar ponerlo en una función o clase.

Si el proyecto es grande, podemos distribuir el código en múltiples archivos y módulos. Las herramientas de pruebas unitarias pueden ser muy útiles para nuestro trabajo.

Para completar quiero señalar que JavaScript es una herramienta poderosa que abre muchas puertas en el desarrollo web, tanto del lado del cliente como del servidor. Estas recomendaciones nos pueden ayudar a comenzar con el lenguaje y también a perfeccionar algunos aspectos de nuestro trabajo, si ya contamos con experiencia en el desarrollo web.

Si te interesa profundizar sobre alguno de los temas que explico en este artículo déjame un comentario o escríbeme un mensaje.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*