Blog Developer - Guía para Desarrolladores

Contenido

Fundamentos de JavaScript

JavaScript es un lenguaje de programación interpretado, de alto nivel, que se utiliza principalmente para crear páginas web interactivas. Es uno de los tres pilares fundamentales del desarrollo web junto con HTML y CSS.

Variables y Tipos de Datos

JavaScript tiene varios tipos de datos primitivos:

String: Cadenas de texto como "Hola mundo"
Number: Valores numéricos como 42 o 3.14
Boolean: true o false
Null: Valor nulo intencional
Undefined: Valor no definido
Symbol: Valor único e inmutable (ES6)
BigInt: Números enteros de precisión arbitraria (ES2020)

Además, JavaScript tiene un tipo de dato complejo llamado Object, que incluye arrays, funciones, y objetos literales.

Ejemplo de Código

// Declaración de variables
let nombre = "María";
const edad = 30;
var esEstudiante = true;

// Objeto
const persona = {
  nombre: "Juan",
  edad: 25,
  hobbies: ["leer", "correr", "programar"]
};

// Array
const colores = ["rojo", "verde", "azul"];

// Función
function saludar(nombre) {
  return "Hola, " + nombre + "!";
}

console.log(saludar(persona.nombre)); // Hola, Juan!

Guía de Variables y Scope

Aprende todo sobre la declaración de variables y su alcance en JavaScript.

Operadores y Expresiones

Guía completa de operadores aritméticos, de comparación y lógicos.

Conceptos Avanzados

Una vez que domines los fundamentos, es importante comprender conceptos más avanzados que te permitirán escribir código JavaScript más eficiente y mantenible.

Closures

Un closure es una función que recuerda el entorno en el que fue creada, incluso después de que la función externa haya terminado de ejecutarse.

function crearContador() {
  let contador = 0;
  
  return function() {
    contador++;
    return contador;
  };
}

const incrementar = crearContador();
console.log(incrementar()); // 1
console.log(incrementar()); // 2
console.log(incrementar()); // 3

Prototipos y Herencia

JavaScript utiliza un modelo de herencia basado en prototipos, donde los objetos pueden heredar propiedades y métodos de otros objetos.

Patrones de Diseño en JavaScript

Aprende los patrones de diseño más comunes y cómo implementarlos.

Programación Funcional

Guía sobre los principios de la programación funcional en JavaScript.

ES6+ Features

ECMAScript 6 (también conocido como ES6 o ES2015) introdujo muchas características nuevas que han transformado la forma en que escribimos JavaScript. Estas características continúan evolucionando con nuevas versiones anuales.

Arrow Functions

Las funciones flecha proporcionan una sintaxis más concisa y mantienen el contexto léxico de this.

// Función tradicional
function sumar(a, b) {
  return a + b;
}

// Arrow function
const sumar = (a, b) => a + b;

// Con cuerpo de función
const saludar = nombre => {
  console.log("Hola, " + nombre);
  return nombre;
};

Destructuring

La desestructuración permite extraer datos de arrays u objetos de manera más sencilla.

// Desestructuración de objetos
const persona = { nombre: 'Ana', edad: 28 };
const { nombre, edad } = persona;
console.log(nombre); // Ana

// Desestructuración de arrays
const colores = ['rojo', 'verde', 'azul'];
const [primario, secundario] = colores;
console.log(primario); // rojo

Template Literals

Los template literals permiten crear cadenas de texto con interpolación de variables y expresiones.

const nombre = 'María';
const mensaje = `Hola, ${nombre}! Tienes ${30 - 5} años.`;
console.log(mensaje); // Hola, María! Tienes 25 años.

Programación Asíncrona

JavaScript es un lenguaje de un solo hilo, pero puede manejar operaciones asíncronas mediante callbacks, promesas y async/await.

Promesas

Las promesas representan un valor que puede estar disponible ahora, en el futuro, o nunca.

const promesa = new Promise((resolve, reject) => {
  // Operación asíncrona
  setTimeout(() => {
    const exito = true;
    if (exito) {
      resolve('Operación completada');
    } else {
      reject('Error en la operación');
    }
  }, 1000);
});

promesa
  .then(resultado => console.log(resultado))
  .catch(error => console.error(error));

Async/Await

Async/await es una sintaxis que facilita el trabajo con promesas, haciendo que el código asíncrono parezca síncrono.

async function obtenerDatos() {
  try {
    // Espera a que la promesa se resuelva
    const respuesta = await fetch('https://api.ejemplo.com/datos');
    const datos = await respuesta.json();
    console.log(datos);
    return datos;
  } catch (error) {
    console.error('Error al obtener datos:', error);
  }
}

// Llamar a la función async
obtenerDatos();

Fetch API

La API Fetch proporciona una interfaz para realizar solicitudes HTTP.

fetch('https://api.ejemplo.com/usuarios')
  .then(respuesta => {
    if (!respuesta.ok) {
      throw new Error('Error en la respuesta');
    }
    return respuesta.json();
  })
  .then(datos => console.log(datos))
  .catch(error => console.error('Error:', error));

Manipulación del DOM

El Document Object Model (DOM) es una representación en memoria de un documento HTML. JavaScript puede manipular el DOM para cambiar el contenido, estructura y estilo de una página web.

Selección de Elementos

JavaScript ofrece varios métodos para seleccionar elementos del DOM.

// Seleccionar por ID
const elemento = document.getElementById('miElemento');

// Seleccionar por clase
const elementos = document.getElementsByClassName('miClase');

// Seleccionar por etiqueta
const parrafos = document.getElementsByTagName('p');

// Seleccionar con selectores CSS
const primerElemento = document.querySelector('.miClase');
const todosLosElementos = document.querySelectorAll('div.contenedor > p');

Modificación del DOM

Una vez seleccionados los elementos, podemos modificar su contenido, atributos y estilos.

// Cambiar contenido
elemento.textContent = 'Nuevo texto';
elemento.innerHTML = '<strong>Texto en negrita</strong>';

// Modificar atributos
elemento.setAttribute('class', 'nueva-clase');
elemento.id = 'nuevoId';

// Cambiar estilos
elemento.style.color = 'red';
elemento.style.backgroundColor = '#f0f0f0';

Eventos

Los eventos permiten ejecutar código JavaScript cuando ocurre una acción específica.

// Método addEventListener
const boton = document.querySelector('button');
boton.addEventListener('click', function(evento) {
  console.log('Botón clickeado');
  console.log(evento); // Objeto del evento
});

// Eventos comunes: click, submit, keydown, load, mouseover, etc.
document.addEventListener('DOMContentLoaded', () => {
  console.log('Documento cargado completamente');
});

Frameworks de JavaScript

Los frameworks de JavaScript facilitan el desarrollo de aplicaciones web complejas proporcionando estructuras, patrones y herramientas.

React

React es una biblioteca para construir interfaces de usuario mediante componentes reutilizables.

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Has hecho clic {contador} veces</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Vue.js

Vue.js es un framework progresivo para construir interfaces de usuario.

<template>
  <div>
    <p>Has hecho clic {{ contador }} veces</p>
    <button @click="incrementar">Incrementar</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contador: 0
    }
  },
  methods: {
    incrementar() {
      this.contador += 1
    }
  }
}
</script>

Angular

Angular es un framework completo para desarrollar aplicaciones web y móviles.

import { Component } from '@angular/core';

@Component({
  selector: 'app-contador',
  template: `
    <div>
      <p>Has hecho clic {{ contador }} veces</p>
      <button (click)="incrementar()">Incrementar</button>
    </div>
  `
})
export class ContadorComponent {
  contador = 0;

  incrementar() {
    this.contador += 1;
  }
}