Comandos básicos de JavaScript¶

Selección de Elementos¶

Método	Descripción
`document.getElementById('id')`	Selecciona un elemento por ID
`document.querySelector('selector')`	Selecciona el primer elemento que coincida
`document.querySelectorAll('selector')`	Selecciona todos los elementos que coincidan (NodeList)

Manipulación del DOM¶

Método	Descripción
`element.textContent = 'Hola'`	Cambia solo el texto
`element.innerHTML = '<b>Hola</b>'`	Inserta HTML
`element.setAttribute('attr', 'valor')`	Cambia o agrega un atributo
`element.classList.add('clase')`	Añade una clase CSS
`element.classList.remove('clase')`	Elimina una clase CSS
`element.classList.toggle('clase')`	Añade o quita una clase CSS
`element.style.color = 'red'`	Cambia un estilo directamente
`document.createElement('div')`	Crea un nuevo elemento
`parent.appendChild(child)`	Agrega un hijo al final
`parent.insertBefore(nuevo, ref)`	Inserta antes de un elemento referencia

Eventos¶

Método	Descripción
`element.addEventListener('click', fn)`	Agrega un listener de evento
`element.removeEventListener('click', fn)`	Quita el listener

Bucles¶

Sintaxis	Descripción
`elements.forEach(el => {})`	Itera un NodeList o array
`for (let el of elements) {}`	Otra forma de iterar

Timers¶

Método	Descripción
`setTimeout(fn, 1000)`	Ejecuta una vez después de 1 segundo
`setInterval(fn, 1000)`	Ejecuta cada segundo
`clearTimeout(id)`	Cancela timeout
`clearInterval(id)`	Cancela intervalo

Condicionales¶

Sintaxis	Descripción
`if (cond) {}` / `else {}`	Estructura condicional básica
`switch (val) { case x: break; }`	Estructura condicional múltiple

Funciones¶

Definición¶

Sintaxis	Descripción
`function saludar() {}`	Declaración clásica
`const saludar = function() {}`	Expresión de función
`const saludar = () => {}`	Función flecha
`const doble = x => x * 2;`	Arrow con retorno implícito
`function sumar(a, b) { return a + b; }`	Parámetros y retorno

Invocación¶

saludar();       // Llama sin parámetros
sumar(2, 3);     // Llama con argumentos

Funciones como callbacks¶

[1, 2, 3].forEach(function(num) {
  console.log(num);
});

// Con arrow function
[1, 2, 3].forEach(num => console.log(num));

Función anidada¶

function exterior() {
  function interior() {
    console.log('Dentro');
  }
  interior();
}
exterior();

Formularios¶

Método	Descripción
`form.addEventListener('submit', e => e.preventDefault())`	Prevenir envío por defecto
`input.value`	Obtener o asignar valor de un input

Almacenamiento Local¶

Método	Descripción
`localStorage.setItem('clave', 'valor')`	Guardar en almacenamiento local
`localStorage.getItem('clave')`	Leer del almacenamiento
`localStorage.removeItem('clave')`	Eliminar clave

Fetch API¶

Método	Descripción
`fetch(url).then(r => r.json())`	Solicitud GET básica
`fetch(url, { method: 'POST', body: data })`	Envío de datos con POST

⚠️ Todos los métodos funcionan en navegadores modernos sin necesidad de librerías externas.

Ejemplo¶

CódigoSalida

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>For Loop con Función</title>
</head>
<body>
<h2>Lista de nombres:</h2>
<ul id="lista-nombres"></ul>

<script>
    // Función que recorre el array y actualiza el DOM
    function mostrarNombres() {
    const nombres = ['Ana', 'Luis', 'Carlos', 'María'];
    const lista = document.getElementById('lista-nombres');

    for (let i = 0; i < nombres.length; i++) {
        const li = document.createElement('li');
        li.textContent = nombres[i];
        lista.appendChild(li);
    }
    }

    // Llamar la función al cargar la página
    mostrarNombres();
</script>
</body>
</html>

Lista de nombres:
- Ana
- Luis
- Carlos
- María