RA1
Selecciona las arquitecturas y tecnologías de programación sobre clientes Web, identificando y analizando las capacidades y características de cada una.
DAW → Desarrollo Web en Entorno Cliente → Ejercicios
Contenido verificado · 29 unidadesEjercicios y práctica · Desarrollo Web en Entorno Cliente · DAW
Convierte los RA y errores frecuentes del módulo en práctica adaptativa. Esta página se construye únicamente con contenido verificado y con los RA del módulo.
Practicar este módulo con José →Qué deberías ser capaz de hacer
RA2
Escribe sentencias simples, aplicando la sintaxis del lenguaje y verificando su ejecución sobre navegadores Web.
RA3
Escribe código, identificando y aplicando las funcionalidades aportadas por los objetos predefinidos del lenguaje.
RA4
Programa código para clientes Web analizando y utilizando estructuras definidas por el usuario.
RA5
Desarrolla aplicaciones Web interactivas integrando mecanismos de manejo de eventos.
RA6
Desarrolla aplicaciones web analizando y aplicando las características del modelo de objetos del documento.
RA7
Desarrolla aplicaciones Web dinámicas, reconociendo y aplicando mecanismos de comunicación asíncrona entre cliente y servidor.
Errores frecuentes que la práctica debería detectar
- 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.
- Confundir `==` con `===`: Causa: No entender la diferencia entre igualdad débil y estricta. Consecuencia: Comparaciones que devuelven `true` cuando se esperaría `false` debido a conversiones implícitas. Corrección: Usar siempre `===` a menos que se tenga una razón muy específica y justificada para usar `==`.
- No entender el ámbito de bloque: Causa: Declarar `let` o `const` dentro de un bloque y esperar que sea accesible fuera. Consecuencia: Errores `ReferenceError`. Corrección: Entender que `let` y `const` solo existen dentro del bloque donde fueron declaradas.
- Olvidar `break` en `switch`: Causa: El flujo de ejecución continúa al siguiente `case` (fall-through). Consecuencia: Se ejecutan bloques de código no deseados. Corrección: Siempre incluir `break` al final de cada `case` a menos que el comportamiento de fall-through sea intencional y documentado.
- Condiciones mal formuladas: Causa: Errores lógicos en las expresiones booleanas. Consecuencia: El programa toma decisiones incorrectas. Corrección: Probar las condiciones con valores límite y casos extremos, y usar paréntesis para clarificar la precedencia de operadores lógicos.
- Anidar `if` excesivamente: Causa: Intentar manejar múltiples condiciones complejas sin refactorizar. Consecuencia: Código difícil de leer y mantener (callback hell). Corrección: Refactorizar usando guard clauses (condiciones de salida temprana), funciones auxiliares o el patrón `switch` cuando sea apropiado.
- Bucle infinito: Causa: La condición de salida del bucle nunca se cumple (ej. `while(true)` sin `break`, o la variable de control no se actualiza). Consecuencia: El navegador se congela o consume excesivos recursos. Corrección: Asegurarse de que la condición del bucle eventualmente se vuelva falsa, o incluir una sentencia `break` para salir en una condición específica.
Del contenido SEO a tu estado real
Esta página explica el módulo. José, dentro del workspace, utiliza tu dominio, autonomía, confianza y evidencias para decidir si necesitas diagnóstico, práctica, reenseñanza o repaso.
Practicar este módulo con José →