JavaScript, TypeScript y Manipulación del DOM

Temas Aprendidos

JavaScript

Definición: JavaScript es un lenguaje de programación interpretado, orientado a objetos, utilizado principalmente en el desarrollo web para añadir interactividad a las páginas.

Procedimiento: Para usar JavaScript en una página web, podemos incluirlo directamente con la etiqueta <script> o enlazar a un archivo externo.

<script>
    // Código JavaScript aquí
</script>
// O
<script src="script.js"></script>

TypeScript

Definición: TypeScript es un superset de JavaScript que añade tipado estático y otras características como interfaces y clases avanzadas.

Procedimiento: TypeScript debe compilarse a JavaScript para ejecutarse en el navegador.

// Instalación
npm install -g typescript

// Compilación
tsc archivo.ts

Manipulación del DOM

Definición: El DOM (Document Object Model) es una representación en objetos del documento HTML que permite interactuar con los elementos de la página.

Procedimiento: Se puede acceder y modificar elementos usando métodos como:

// Selección
const elemento = document.getElementById('id');
const elementos = document.querySelectorAll('.clase');

// Modificación
elemento.textContent = 'Nuevo texto';
elemento.classList.add('nueva-clase');
elemento.style.color = 'red';

// Creación
const nuevoElemento = document.createElement('div');
document.body.appendChild(nuevoElemento);

// Eventos
elemento.addEventListener('click', () => {
    alert('Elemento clickeado!');
});

Ejercicios de Laboratorio

Interactividad con JavaScript

Ejemplo práctico de manipulación del DOM:

Este texto cambiará cuando hagas click en el botón.

TypeScript en Acción

Crea una interfaz en TypeScript para representar un usuario:

interface Usuario {
    id: number;
    nombre: string;
    email: string;
    edad?: number; // Propiedad opcional
}

function mostrarUsuario(usuario: Usuario): void {
    console.log(`Nombre: ${usuario.nombre}, Email: ${usuario.email}`);
}

Resultados

Resultados de los ejercicios

Al completar los ejercicios prácticos, podemos observar:

  • Cómo JavaScript permite modificar dinámicamente el contenido de la página
  • La ventaja de TypeScript al proporcionar seguridad de tipos
  • La potencia de la manipulación del DOM para crear experiencias interactivas

Reflexión Final

¿Qué aprendí y cómo lo hice?

Durante este estudio, comprendí profundamente cómo JavaScript funciona como el lenguaje fundamental para la interactividad web. Aprendí mediante:

  • Experimentación práctica con código
  • Comparación de JavaScript con TypeScript
  • Manipulación directa del DOM para ver resultados inmediatos

Reflexión metacognitiva

Este proceso me permitió darme cuenta de que aprendo mejor cuando:

  • Tengo objetivos claros y alcanzables
  • Puedo experimentar inmediatamente con los conceptos aprendidos
  • Existe un equilibrio entre teoría y práctica

Identifiqué que necesito mejorar en:

  • Trabajar sistemáticamente para evitar errores comunes
  • Documentar mejor mi proceso de aprendizaje
  • Practicar más con tipos avanzados de TypeScript

Bibliografía

Libros y recursos recomendados

  • "Eloquent JavaScript" - Marijn Haverbeke (Enlace)
  • "TypeScript Handbook" - Documentación oficial de TypeScript (Enlace)
  • "JavaScript: The Definitive Guide" - David Flanagan
  • "You Don't Know JS" - Kyle Simpson (Enlace)
  • MDN Web Docs (Enlace)
Volver a Cuadernos