Vanilla JS es una forma de referirse a JavaScript puro, sin librerías ni frameworks adicionales. Es el lenguaje de programación que se utiliza para agregar interactividad a las páginas web. En este tutorial, cubriremos los conceptos principales y proporcionaremos ejemplos prácticos para ayudarte a entender y utilizar Vanilla JS.

Conceptos Principales de JavaScript

1. Variables

Las variables se utilizan para almacenar datos. Puedes declarar una variable usando `var`, `let` o `const`.

var nombre = 'Juan';
let edad = 30;
const pais = 'España';

2. Tipos de Datos

JavaScript soporta varios tipos de datos como números, cadenas, booleanos, objetos y arrays.

let numero = 100;
let texto = 'Hola Mundo';
let esVerdad = true;
let objeto = { clave: 'valor' };
let lista = [1, 2, 3, 4];

3. Funciones

Las funciones son bloques de código reutilizables. Se declaran usando la palabra clave `function` o con flechas (`=>`).

function saludar() {
  console.log('Hola');
}

const despedir = () => {
  console.log('Adiós');
};

4. Estructuras de Control

JavaScript ofrece varias estructuras de control como if-else, switch, for, y while para controlar el flujo de tu programa.

if (edad > 18) {
  console.log('Eres mayor de edad');
} else {
  console.log('Eres menor de edad');
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

5. Manipulación del DOM

El DOM (Document Object Model) es la representación de la página web que JavaScript puede manipular. Puedes seleccionar, crear y modificar elementos HTML usando JavaScript.

let elemento = document.getElementById('miElemento');
elemento.textContent = 'Nuevo texto';
elemento.style.color = 'rojo';

let nuevoElemento = document.createElement('p');
nuevoElemento.textContent = 'Soy un párrafo nuevo';
document.body.appendChild(nuevoElemento);

Ejemplos Prácticos

Ejemplo 1: Contador Simple

Crear un contador que se incremente cada vez que se presione un botón.

<!-- HTML -->
<button id='incrementar'>Incrementar</button>
<p id='contador'>0</p>

/* JavaScript */
let contador = 0;
const boton = document.getElementById('incrementar');
const textoContador = document.getElementById('contador');

boton.addEventListener('click', () => {
  contador++;
  textoContador.textContent = contador;
});

Ejemplo 2: Cambio de Color

Cambia el color de fondo de la página al hacer clic en un botón.

<!-- HTML -->
<button id='cambiarColor'>Cambiar Color</button>

/* JavaScript */
const botonColor = document.getElementById('cambiarColor');

botonColor.addEventListener('click', () => {
  document.body.style.backgroundColor = 'aqua';
});

Con estos conceptos y ejemplos básicos, ya puedes empezar a escribir tu propio código en Vanilla JS. ¡Feliz programación!