- Conceptos Principales de JavaScript
- 1. Variables
- 2. Tipos de Datos
- 3. Funciones
- 4. Estructuras de Control
- 5. Manipulación del DOM
- Ejemplos Prácticos
- Ejemplo 1: Contador Simple
- Ejemplo 2: Cambio de Color
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!