Qué puede evaluarse
RA1: Selecciona las arquitecturas y tecnologías de programación sobre clientes Web, identificando y analizando las capacidades y características de cada una.
Ejecución en el clienteEjecución en el servidorRequest-ResponseDOM (Document Object Model)AJAX (Asynchronous JavaScript and XML)Single Page Application (SPA)Motor JavaScriptMotor de RenderizadoBOM (Browser Object Model)Event Loop
RA2: Escribe sentencias simples, aplicando la sintaxis del lenguaje y verificando su ejecución sobre navegadores Web.
Programación ClienteJavaScriptDOMEditor de Código (VS Code)Herramientas de DesarrolladorConsola del NavegadorDepuraciónVariableletconst
RA3: Escribe código, identificando y aplicando las funcionalidades aportadas por los objetos predefinidos del lenguaje.
Objeto predefinidoPropiedadMétodoInstanciaObjeto estáticoManipulación de datosObjeto WindowObjeto DocumentDOM (Document Object Model)Manipulación del DOM
RA4: Programa código para clientes Web analizando y utilizando estructuras definidas por el usuario.
FunciónParámetroArgumentoValor de retornoModularidadReutilización de códigoHoistingÁmbito (Scope)ArrayÍndice
RA5: Desarrolla aplicaciones Web interactivas integrando mecanismos de manejo de eventos.
EventoManejador de eventos (Event Handler)DOM (Document Object Model)addEventListener()Objeto EventTipos de eventos (ratón, teclado, formulario, documento)event.target vs event.currentTargetevent.preventDefault()event.stopPropagation()Fases de propagación: captura y burbujeo
RA6: Desarrolla aplicaciones web analizando y aplicando las características del modelo de objetos del documento.
DOM (Document Object Model)Árbol DOMNodos (Document, Element, Text, Attribute)Objeto documentPropiedades del DOMMétodos del DOMDOMContentLoadedSelección de elementos (getElementById, querySelector, etc.)Creación de elementos (createElement, createTextNode)Inserción de elementos (appendChild, insertBefore)
RA7: Desarrolla aplicaciones Web dinámicas, reconociendo y aplicando mecanismos de comunicación asíncrona entre cliente y servidor.
Comunicación asíncronaXMLHttpRequest (XHR)Fetch APIExperiencia de Usuario (UX)HTTPAJAXXMLHttpRequestPromesasObjeto ResponseEstados HTTP
Trampas habituales antes del examen
- Confundir dónde se ejecuta el código: Un error común es pensar que todo el código de una aplicación web se ejecuta en el servidor o todo en el cliente. Causa: Falta de comprensión de la arquitectura cliente-servidor. Corrección: Analizar la función de cada parte del código (generación de contenido vs. interactividad) para determinar su lugar de ejecución.
- Subestimar la latencia del servidor: No considerar que cada solicitud al servidor implica un tiempo de espera. Causa: Asumir que las respuestas del servidor son instantáneas. Corrección: Diseñar la aplicación para minimizar las recargas de página y utilizar técnicas asíncronas en el cliente cuando sea posible.
- Bloquear el hilo principal de JavaScript: Ejecutar operaciones computacionalmente intensivas de forma síncrona. Causa: Falta de comprensión del Event Loop y la naturaleza single-threaded de JS. Corrección: Utilizar APIs asíncronas (ej. `setTimeout`, `fetch`, `Web Workers`) para tareas largas.
- Ignorar la Same-Origin Policy: Intentar acceder a recursos de otro dominio sin configuración adecuada. Causa: Desconocimiento de las restricciones de seguridad del navegador. Corrección: Configurar CORS en el servidor o usar proxies si es necesario.
- Depender solo de la validación cliente: asumir que la validación en JavaScript es suficiente para la seguridad. Causa: olvidar que el cliente puede inspeccionar y modificar el código. Corrección: duplicar siempre la validación en el servidor.
- Escribir código JavaScript monolítico: crear scripts muy largos y sin modularidad. Causa: falta de comprensión de buenas prácticas de scripting. Corrección: modularizar el código mediante funciones, objetos o módulos ES, y considerar TypeScript o frameworks en proyectos grandes.
- Confundir lenguajes de marcado/estilo con lenguajes de programación: tratar HTML o CSS como si tuvieran capacidades de programación equivalentes a JavaScript. Causa: desconocimiento de que HTML/CSS carecen de lógica de control propia. Corrección: reservar JavaScript (o TypeScript transpilado) para la lógica de programación, usando HTML/CSS únicamente para estructura y presentación.
- Mezclar JavaScript y HTML/CSS: Escribir estilos inline o lógica JS directamente en el HTML. Causa: Falta de separación de preocupaciones. Corrección: Usar archivos JS y CSS externos, y manipular el DOM/clases con JavaScript.
- Ignorar las herramientas de desarrollo: No usar las DevTools para depurar o inspeccionar. Causa: Desconocimiento o pereza. Corrección: Integrar las DevTools en el flujo de trabajo diario, especialmente para la depuración y optimización.
- No abrir las Herramientas de Desarrollador: Causa: El alumno escribe código pero no sabe dónde ver la salida o los errores. Corrección: Siempre abrir la consola del navegador para verificar la ejecución y los mensajes.
- Etiqueta <script> mal ubicada o con errores de sintaxis: Causa: El navegador no interpreta el script. Corrección: Verificar la correcta inclusión de la etiqueta <script> y su contenido, preferiblemente al final del <body> para asegurar que el DOM esté cargado.
- Usar `var` en lugar de `let` o `const`: Causa: Desconocimiento de los ámbitos de bloque o de la mutabilidad. Consecuencia: Variables accesibles fuera de su contexto esperado, lo que puede llevar a errores difíciles de depurar. Corrección: Priorizar `const` para valores inmutables y `let` para mutables, reservando `var` solo para casos muy específicos o código legado.