Incorporación de JavaScript en páginas web

Existen tres métodos principales para integrar código JavaScript en una página HTML:

1. Eventos en línea
Ejemplo básico de un botón con un evento onclick:

<input type="button" value="Ejecutar" onclick="mostrarAlerta()">

2. Etiqueta script interna
Código JavaScript dentro de la página:

<script>
    let mensaje = 'Hola Mundo';
    console.log(mensaje);
</script>

3. Archivo externo
Referencia a un archivo JavaScript externo:

<script src="scripts/aplicacion.js"></script>

Estructura del código JavaScript

Las sentencias en JavaScript finalizan con punto y coma. Los comentarios pueden ser de una o múltiples líneas:

// Calcula el cuadrado de un número
function calcularCuadrado(num) {
    return num * num;
}

/* 
    Función de temperatura
    Convierte Celsius a Fahrenheit
*/
function convertirTemp(celsius) {
    return (celsius * 9/5) + 32;
}

Declaración de variables

JavaScript utiliza tipado débil. Las variables se declaran con let o const en versiones modernas:

let contador = 0;
const PI = 3.1416;
let nombre = 'Ana', edad = 25, activo = true;

Tipos de datos primitivos

• Números (number)
• Cadenas de texto (string)
• Booleanos (boolean)
• Undefined
• Null

Los objetos (object) representan el tipo compuesto principal.

Convenciones de nomenclatura

• Case sensitive (distingue mayúsculas de minúsculas)
• Primer carácter: letra, guión bajo (_) o signo de dólar ($)
• Caracteres siguientes: letras, guiones bajos, signos de dólar o números

Selección de elementos del DOM

Se puede obtener un elemento mediante su identificador único:

let elemento = document.getElementById('contenedor');

Para evitar errores por selección temparna, se recomienda:

1. Colocar el script al final del body
2. Usar el evento de carga completa del documento

window.addEventListener('load', function() {
    let componente = document.getElementById('barra-navegacion');
    // Operaciones con el componente
});

Manipulación de propiedades

Se puede acceder a las propiedades de un elemento usando notación de punto o corchetes:

window.addEventListener('DOMContentLoaded', function() {
    let campoTexto = document.getElementById('campo-busqueda');
    let enlace = document.getElementById('enlace-principal');
    
    // Lectura de valores
    let valorActual = campoTexto.value;
    let tipoCampo = campoTexto.type;
    
    // Modificación de estilos
    enlace.style.color = '#ff0000';
    enlace.style.fontSize = valorActual;
});

Acceso dinámico a propiedades mediante corchetes:

window.addEventListener('DOMContentLoaded', function() {
    let nombrePropiedad = document.getElementById('nombre-estilo');
    let valorPropiedad = document.getElementById('valor-estilo');
    let elemento = document.getElementById('elemento-objetivo');
    
    elemento.style[nombrePropiedad.value] = valorPropiedad.value;
});

Propiedad innerHTML

Permite leer o establecer el contenido HTML de un elemento:

window.addEventListener('DOMContentLoaded', function() {
    let contenedor = document.getElementById('area-contenido');
    let contenidoActual = contenedor.innerHTML;
    
    contenedor.innerHTML = '<a href="https://ejemplo.com">Enlace actualizado</a>';
});

Funciones

Bloques de código reutilizables. Ejemplo de definición y ejecución:

function mostrarSaludo() {
    console.log('¡Bienvenido!');
}

mostrarSaludo();

Precedencia en la interpretación

JavaScript procesa las declaraciones de funciones y variables antes de la ejecución:

mostrarMensaje(); // Ejecuta correctamente
console.log(dato); // Muestra undefined

function mostrarMensaje() {
    console.log('Función ejecutada');
}

let dato = 'Valor inicial';

Separación de estructura y comportamiento

Se puede extraer los eventos del HTML hacia JavaScript:

window.addEventListener('DOMContentLoaded', function() {
    let boton = document.getElementById('boton-accion');
    
    boton.addEventListener('click', function() {
        console.log('Elemento clickeado');
    });
});

Funciones aónimas

Funciones sin nombre, útiles para callbacks y manejo de eventos:

elemento.addEventListener('click', function() {
    // Código a ejecutar al hacer clic
    this.classList.toggle('activo');
});

Paso de parámetros y retorno

function multiplicar(a, b) {
    let resultado = a * b;
    return resultado;
    console.log('Esta línea no se ejecuta');
}

let producto = multiplicar(5, 8); // 40

Estructuras de control

Operadores

• Aritméticos: +, -, *, /, %
• Asignación: =, +=, -=, *=, /=
• Comparación: ==, ===, >, >=, <, <=, !=, &&, ||, !

Condicional if-else

let calificacion = 85;

if (calificacion >= 90) {
    console.log('Excelente');
} else if (calificacion >= 80) {
    console.log('Bueno');
} else if (calificacion >= 70) {
    console.log('Regular');
} else {
    console.log('Necesita mejorar');
}

Switch

let diaSemana = 3;
let nombreDia;

switch(diaSemana) {
    case 1:
        nombreDia = 'Lunes';
        break;
    case 2:
        nombreDia = 'Martes';
        break;
    case 3:
        nombreDia = 'Miércoles';
        break;
    default:
        nombreDia = 'Otro día';
}

Arrays y métodos de manipulación

Creación de arrays

let numeros = new Array(10, 20, 30, 40);
let mezcla = [true, 'texto', 42, null];

Métodos esenciales

let elementos = ['manzana', 'plátano', 'naranja'];

// Longitud
let cantidad = elementos.length; // 3

// Acceso por índice
let primerElemento = elementos[0]; // 'manzana'

// Unión con separador
let cadenaUnida = elementos.join(', '); // 'manzana, plátano, naranja'

// Agregar/remover al final
elementos.push('uva');
elementos.pop();

// Agregar/remover al inicio
elementos.unshift('fresa');
elementos.shift();

// Invertir orden
elementos.reverse();

// Buscar elemento
let posicion = elementos.indexOf('plátano'); // 1

// Modificar con splice
elementos.splice(1, 2, 'kiwi', 'mango');

Arrays multidimensionales

let matriz = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

let valor = matriz[2][1]; // 8

Bucles

for

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

while

let contador = 0;
while (contador < 5) {
    console.log(contador);
    contador++;
}

Ejemplo: Eliminar duplicados

let original = [1, 2, 2, 3, 3, 4, 5, 5];
let unicos = [];

for (let valor of original) {
    if (!unicos.includes(valor)) {
        unicos.push(valor);
    }
}

console.log(unicos); // [1, 2, 3, 4, 5]

Componentes de JavaScript

• ECMAScript: Sintaxis del lenguaje
• DOM: Manipulación de documentos HTML
• BOM: Interacción con el navegador

Manipulación de cadenas

let texto = 'Hola Mundo';
let mayusculas = texto.toUpperCase();
let minusculas = texto.toLowerCase();
let partes = texto.split(' ');
let subcadena = texto.substring(0, 4);
let caracter = texto.charAt(5);
let posicion = texto.indexOf('Mundo');

Invertir una cadena

let original = 'javascript';
let invertida = original.split('').reverse().join('');

Técnicas de depuración

• console.log()
• alert()
• Depuradores integrados

Temporizadores

setTimeout y setInterval

// Ejecución única después de 2 segundos
let temporizador = setTimeout(function() {
    console.log('Ejecutado una vez');
}, 2000);

// Ejecución repetida cada 3 segundos
let intervalo = setInterval(function() {
    console.log('Repetición');
}, 3000);

// Cancelar temporizador
clearTimeout(temporizador);
clearInterval(intervalo);

Ejemplo: Reloj en tiempo real

window.addEventListener('DOMContentLoaded', function() {
    let reloj = document.getElementById('display-reloj');
    
    function actualizarReloj() {
        let ahora = new Date();
        let horas = ahora.getHours();
        let minutos = ahora.getMinutes();
        let segundos = ahora.getSeconds();
        
        reloj.textContent = `${horas}:${minutos}:${segundos}`;
    }
    
    actualizarReloj();
    setInterval(actualizarReloj, 1000);
});

Conversiones de tipos

// Conversión explícita
let numero = parseInt('100px'); // 100
let decimal = parseFloat('3.14'); // 3.14

// Conversión implícita
console.log('5' + 3); // '53'
console.log('5' - 3); // 2

// Manejo de NaN
console.log(isNaN('texto')); // true
console.log(isNaN('123')); // false

Ámbito de las variables

let global = 'Soy global';

function ejemplo() {
    let local = 'Soy local';
    console.log(global); // Accesible
    console.log(local);  // Accesible
}

ejemplo();
console.log(global); // Accesible
// console.log(local); // Error: local no definida

Funciones autoejecutables (IIFE)

// Forma estándar
(function() {
    console.log('Función autoejecutada');
})();

// Alternativas
!function() {
    console.log('Otra forma de IIFE');
}();

Closures

Concepto básico

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

let contador1 = crearContador();
console.log(contador1()); // 1
console.log(contador1()); // 2

let contador2 = crearContador();
console.log(contador2()); // 1

Usos prácticos

// Preservar variables en bucles
for (var i = 0; i < 5; i++) {
    (function(indice) {
        setTimeout(function() {
            console.log(indice);
        }, 1000);
    })(i);
}

Objetos nativos importantes

// Location
window.location.href;
window.location.search;
window.location.reload();

// Math
let aleatorio = Math.random();
let entero = Math.floor(aleatorio * 100);

Introducción a jQuery

Carga segura de jQuery

$(document).ready(function() {
    // Código seguro del DOM
});

// Forma abreviada
$(function() {
    // Código aquí
});

Selectores en jQuery

// Selectores básicos
$(document);
$('article');
$('#principal');
$('.destacado');

// Selectores avanzados
$('input[type="email"]');
$('#menu > li');
$('div:visible');

// Filtrado
$('li').first();
$('li').eq(3);
$('li').filter('.activo');

// Navegación
$('span').parent();
$('.lista').children();
$('p').next();
$('.elemento').siblings();

Manipulación de estilos con jQuery

// Lectura de estilos
let ancho = $('caja').css('width');

// Aplicación de estilos
$('caja').css('background-color', '#f0f0f0');
$('caja').css({
    'font-size': '16px',
    'color': '#333'
});

// Clases CSS
$('#seccion').addClass('visible');
$('#seccion').removeClass('oculto');
$('#seccion').toggleClass('expandido');

Manipulación de atributos y contenido

// Contenido HTML
let html = $('#contenedor').html();
$('#contenedor').html('<em>Nuevo contenido</em>');

// Contenido de texto
$('#contenedor').text('Texto actualizado');

// Atributos
let src = $('imagen').attr('src');
$('imagen').attr({
    'src': 'nueva-imagen.jpg',
    'alt': 'Descripción'
});

// Propiedades
$('checkbox').prop('checked', true);

Manejo de eventos con jQuery

// Evento click
$('#boton').click(function() {
    console.log('Clic detectado');
});

// Otros eventos
$('campo').focus(function() {
    $(this).addClass('enfocado');
});

$('campo').blur(function() {
    $(this).removeClass('enfocado');
});

$('formulario').submit(function(event) {
    event.preventDefault();
    // Lógica de envío
});

Efectos visuales

$('#panel').fadeIn(500);
$('#panel').fadeOut(300);
$('#panel').slideUp(400);
$('#panel').slideDown(400);
$('#panel').toggle(250);

Encadenamiento de métodos

$('#lista')
    .find('li')
    .first()
    .css('color', 'red')
    .end()
    .last()
    .css('color', 'blue');

Animaciones personalizadas

$('#elemento').animate({
    'width': '300px',
    'height': '200px',
    'opacity': '0.8'
}, 1000, function() {
    console.log('Animación completada');
});

Dimensiones y posición

let ancho = $('#caja').width();
let alto = $('#caja').height();
let posicion = $('#caja').offset();
let scrollPos = $(window).scrollTop();

Eventos avanzados

Delegación de eventos

// Método .on() con delegación
$('#lista-padre').on('click', 'li', function() {
    console.log('Item clickeado:', $(this).text());
});

// Eliminar eventos
$('#boton').off('click');

Propagación de eventos

$('#hijo').click(function(event) {
    event.stopPropagation();
    console.log('Clic en hijo');
});

$('#padre').click(function() {
    console.log('Clic en padre');
});

Manipulación del DOM con jQuery

Crear elementos

let nuevoDiv = $('<div class="nuevo"></div>');
let nuevoParrafo = $('<p>Texto dinámico</p>');

Insertar elementos

$('#contenedor').append(nuevoDiv);
$('#contenedor').prepend(nuevoParrafo);
$('#referencia').after(nuevoDiv);
$('#referencia').before(nuevoParrafo);

Eliminar elementos

$('#elemento').remove();
$('#elemento').empty(); // Elimina contenido

Métodos de utilidad

// Iteración
$('li').each(function(indice, elemento) {
    console.log(indice, $(elemento).text());
});

// Filtrado
let seleccion = $('div').filter(function() {
    return $(this).width() > 200;
});