🌐 T1
HTML — Etiquetas, atributos y formularios
Bloque III · preguntas literales del examen TAI 2024
Estructura básica y etiquetas semánticas
HTML5 introduce etiquetas semánticas que describen el contenido al navegador, buscador y lectores de pantalla. Usar <div> genérico cuando existe una etiqueta semántica equivalente penaliza la accesibilidad y el SEO.
| Etiqueta | Función | ARIA landmark |
|---|---|---|
<header> | Cabecera de la página o sección | banner |
<nav> | Bloque de navegación principal | navigation |
<main> | Contenido principal (único por página) | main |
<article> | Contenido autónomo y redistribuible | article |
<section> | Sección temática con encabezado | region |
<aside> | Contenido secundario relacionado | complementary |
<footer> | Pie de página o de sección | contentinfo |
<figure> + <figcaption> | Imagen con su descripción | figure |
Relación con WCAG 2.1 criterio 1.3.1: la estructura DEBE transmitirse mediante el marcado HTML, no solo visualmente. Las etiquetas semánticas cumplen este criterio automáticamente.
Formularios — atributos esenciales del examen
El examen TAI 2024 preguntó qué atributo HTML limita el número de caracteres en un <input type="email">. La respuesta es maxlength.
| Atributo | Qué hace | Ejemplo |
|---|---|---|
maxlength | Limita el número máximo de caracteres que puede escribir el usuario | maxlength="100" |
max | Valor máximo en inputs numéricos o de fecha | max="100" (solo en input number) |
size | Anchura visual del campo en caracteres (no limita el contenido) | size="30" |
required | Campo obligatorio; el formulario no se envía si está vacío | required |
placeholder | Texto de ayuda que desaparece al escribir | placeholder="usuario@correo.es" |
disabled | Desactiva el campo; NO se envía en el formulario | disabled |
readonly | Campo de solo lectura; SÍ se envía en el formulario | readonly |
pattern | Expresión regular que debe cumplir el valor | pattern="[A-Za-z]{3,}" |
Trampa clásica:
max limita el VALOR numérico. maxlength limita los CARACTERES de texto. size solo afecta la presentación visual, NO el contenido. Para limitar texto siempre usar maxlength.Eventos HTML — los más preguntados
El examen TAI 2024 preguntó qué evento produce un efecto al situar el puntero del ratón sobre un elemento. La respuesta es onmouseover.
| Evento | Cuándo se dispara |
|---|---|
onclick | Al hacer clic sobre el elemento |
onmouseover | Al situar el puntero del ratón SOBRE el elemento |
onmouseout | Al retirar el puntero del ratón del elemento |
onmousedown | Al presionar el botón del ratón (antes de soltarlo) |
onchange | Al cambiar el valor de un select o input (al perder el foco) |
oninput | Al cambiar el valor de un input (en tiempo real) |
onsubmit | Al enviar el formulario |
onload | Al cargarse completamente la página o elemento |
onfocus | Al recibir el foco el elemento |
onblur | Al perder el foco el elemento |
HTML vs XHTML — diferencias clave del examen
El examen TAI 2024 incluyó diferencias entre HTML y XHTML. Las más preguntadas:
| Aspecto | HTML | XHTML |
|---|---|---|
| Cierre de etiquetas vacías | Opcional: <br> | Obligatorio: <br /> |
| Mayúsculas/minúsculas | Insensible: <DIV> = <div> | Todo en minúsculas obligatoriamente |
| Comillas en atributos | Opcionales en algunos casos | Obligatorias siempre |
| Elemento <head> | Puede omitirse en HTML5 | Obligatorio |
| Anidamiento | Permisivo con errores | Estrictamente correcto |
| DOCTYPE | Simplificado: <!DOCTYPE html> | DOCTYPE completo con DTD obligatorio |
Trampa del examen 2024: XHTML exige etiquetas en minúsculas (HTML no). En XHTML los valores de atributos van entre comillas obligatoriamente. El elemento <head> es obligatorio en XHTML pero no en HTML5.
5 preguntas de práctica
Pregunta 1 / 5
Pregunta real TAI 2024: ¿Qué atributo HTML impide que un email exceda los 100 caracteres?
a)size='100': define la anchura visual del campo en caracteres.
b)maxlength='100': limita el número máximo de caracteres que puede escribir.
c)max='100': limita el valor numérico máximo del campo.
d)length='100': no existe como atributo HTML estándar.
💡 maxlength: limita los CARACTERES de texto. Es el atributo correcto para inputs de texto. max solo aplica a inputs numéricos o de fecha. size solo cambia la anchura visual sin limitar el contenido. Pregunta literal del examen TAI 2024.
Pregunta 2 / 5
Pregunta real TAI 2024: ¿Qué evento produce un efecto al situar el puntero del ratón sobre un elemento?
a)onmousedown: al presionar el botón del ratón antes de soltarlo.
b)onmouseout: al retirar el puntero del ratón del elemento.
c)onmouseover: al situar el puntero del ratón SOBRE el elemento.
d)onclick: al hacer clic completo sobre el elemento.
💡 onmouseover: se dispara cuando el puntero del ratón entra en el área del elemento. onmouseout: cuando el puntero sale. onclick: al hacer clic completo. onmousedown: al presionar sin soltar. Pregunta literal del examen TAI 2024.
Pregunta 3 / 5
Pregunta real TAI 2024: ¿Cuál es una diferencia entre HTML y XHTML?
a)XHTML permite elementos no vacíos sin cerrar; HTML sí los exige cerrados.
b)En HTML los valores de atributos son obligatoriamente entre comillas; en XHTML no.
c)HTML exige etiquetas en minúscula; XHTML permite mayúsculas sin restricción.
d)En XHTML es obligatoria la presencia del elemento head en el documento.
💡 XHTML: exige que el elemento head esté presente. También exige etiquetas en minúsculas, cierre de todas las etiquetas, y valores de atributos entre comillas. HTML5 es más permisivo. Pregunta literal del examen TAI 2024.
Pregunta 4 / 5
¿Cuál es la diferencia entre los atributos disabled y readonly en un input?
a)Son equivalentes; solo cambia el nombre según el navegador utilizado.
b)disabled desactiva el campo y NO se envía en el formulario; readonly permite ver el valor y SÍ se envía.
c)readonly desactiva el campo visualmente; disabled permite seleccionar el texto.
d)disabled envía el campo vacío; readonly lo envía con su valor original siempre.
💡 disabled: el campo está desactivado y NO se incluye en los datos enviados. readonly: el usuario puede ver pero no modificar el valor, y SÍ se envía. readonly es útil para mostrar datos calculados o confirmaciones que el usuario no debe cambiar.
Pregunta 5 / 5
¿Qué etiqueta HTML5 marca el bloque de navegación principal con landmark navigation?
a)<links>: no existe como etiqueta HTML5 estándar.
b)<menu>: elemento de menú contextual HTML.
c)<nav>: bloque de navegación principal con ARIA landmark navigation.
d)<header>: cabecera de la página que puede incluir navegación.
💡 <nav>: etiqueta semántica de HTML5 para bloques de navegación. Su ARIA landmark implícito es 'navigation'. Los lectores de pantalla permiten navegar directamente a esta sección. Se pueden tener varios <nav> en una página diferenciados con aria-label.
—
respuestas correctas
——
🎨 T2
CSS — Selectores, Box Model, Display, Flexbox y Grid
Bloque III · Flexbox vs Grid aparece en exámenes TIC de AAPP
Selectores CSS — especificidad y tipos
Los selectores determinan a qué elementos se aplica un estilo. La especificidad decide qué regla gana cuando varias se aplican al mismo elemento.
| Selector | Ejemplo | Especificidad |
|---|---|---|
| Universal | * { margin: 0; } | 0,0,0,0 (la más baja) |
| Etiqueta (tipo) | p { color: red; } | 0,0,0,1 |
| Clase | .activo { color: blue; } | 0,0,1,0 |
| Pseudoclase | a:hover { color: green; } | 0,0,1,0 |
| Atributo | [type="text"] { border: 1px; } | 0,0,1,0 |
| ID | #menu { display: flex; } | 0,1,0,0 |
| Inline style | <p style="..."> | 1,0,0,0 (muy alta) |
| !important | color: red !important; | Gana a todo |
Regla de especificidad: ID > clase/pseudoclase/atributo > etiqueta. Mayor especificidad = mayor prioridad. Si dos reglas tienen la misma especificidad, gana la que aparece DESPUÉS en el CSS (cascada).
Box Model — content-box vs border-box
Cada elemento HTML es una caja rectangular con 4 capas (de dentro hacia afuera): content → padding → border → margin.
/* box-sizing — cómo se calcula el tamaño total */
box-sizing: content-box; /* por defecto: width = solo el contenido */
box-sizing: border-box; /* width incluye padding y border (más intuitivo) */
Clave: Con
box-sizing: border-box, si defines width: 200px, el elemento mide exactamente 200px incluyendo padding y border. Con content-box (defecto), el padding y border se suman al width, haciendo el elemento más grande de lo esperado.Display — valores más importantes
| Valor | Comportamiento | Uso típico |
|---|---|---|
block | Ocupa todo el ancho. Genera salto de línea antes y después. | div, p, h1-h6, section |
inline | Solo ocupa lo necesario. No acepta width/height. | span, a, strong, em |
inline-block | Inline pero acepta width/height y padding vertical. | Botones, badges |
flex | Activa Flexbox en el contenedor. Los hijos son flex items. | Navbars, listas de cards |
grid | Activa CSS Grid. Layout bidimensional (filas y columnas). | Layouts de página completa |
none | El elemento desaparece del flujo. No ocupa espacio. | Ocultar elementos completamente |
visibility: hidden vs display: none:
visibility: hidden oculta el elemento pero mantiene su espacio en el layout. display: none elimina el elemento del flujo: los demás elementos ocupan su lugar.Flexbox vs CSS Grid — diferencia clave
| Característica | Flexbox | CSS Grid |
|---|---|---|
| Dimensiones | 1D: trabaja en una sola dirección (fila O columna) | 2D: trabaja en filas Y columnas simultáneamente |
| Uso ideal | Alinear componentes en una dirección: navbars, listas de botones | Layout de página completa: cabecera + sidebar + contenido |
| Propiedad contenedor | display: flex | display: grid |
| Compatibilidad | Excelente en todos los navegadores modernos | Excelente en todos los navegadores modernos |
| ¿Se combinan? | Sí, son complementarios: Grid para la estructura, Flexbox para los componentes | |
/* Flexbox — fila de botones centrada */
.nav { display: flex; justify-content: center; gap: 16px; }
/* CSS Grid — layout de 3 columnas */
.layout { display: grid; grid-template-columns: 250px 1fr 200px; }
Pseudoclases y pseudoelementos
| Selector | Cuándo aplica |
|---|---|
a:link | Enlace no visitado |
a:visited | Enlace ya visitado |
a:hover | Al pasar el ratón por encima |
a:active | En el momento del clic |
input:focus | Cuando el elemento tiene el foco |
input:disabled | Elemento desactivado |
p:first-child | Primer hijo de su padre |
p:last-child | Último hijo de su padre |
p:nth-child(2) | Segundo hijo de su padre |
::before | Pseudoelemento: inserta contenido ANTES del elemento |
::after | Pseudoelemento: inserta contenido DESPUÉS del elemento |
5 preguntas de práctica
Pregunta 1 / 5
¿Cuál es la diferencia entre Flexbox y CSS Grid?
a)CSS Grid solo funciona en navegadores modernos; Flexbox es compatible con IE6.
b)Son equivalentes; CSS Grid es simplemente el nombre moderno de Flexbox.
c)Flexbox no puede combinarse con CSS Grid dentro del mismo documento HTML.
d)Flexbox es 1D (trabaja en una dirección); CSS Grid es 2D (filas y columnas a la vez).
💡 Flexbox: distribuye elementos en una dimensión (eje principal). Ideal para navbars y alinear componentes. Grid: define filas y columnas simultáneamente. Ideal para layouts de página completa. Son complementarios: Grid para la estructura, Flexbox para los componentes.
Pregunta 2 / 5
¿Qué diferencia hay entre display:none y visibility:hidden?
a)Son equivalentes; solo cambia el nombre del atributo según el navegador.
b)display:none elimina el elemento del flujo (no ocupa espacio); visibility:hidden lo oculta pero mantiene el espacio.
c)display:none es solo para texto; visibility:hidden es para imágenes y multimedia.
d)visibility:hidden elimina el elemento del DOM completamente al renderizar.
💡 display:none: el elemento desaparece del flujo. Los otros elementos ocupan su espacio. visibility:hidden: el elemento es invisible pero sigue ocupando su espacio en el layout. Es como opacidad 0 pero también oculta el contenido a los lectores de pantalla.
Pregunta 3 / 5
¿Qué calcula box-sizing:border-box al definir el width de un elemento?
a)El width excluye únicamente el margin exterior del elemento.
b)Solo el borde exterior, sin incluir el padding interior del elemento.
c)El width incluye padding y border: el elemento mide exactamente el valor definido.
d)Solo el contenido, igual que content-box; border-box es un alias del valor por defecto.
💡 border-box: el width incluye content, padding y border. Si defines width:200px, el elemento mide exactamente 200px. content-box (defecto): width es solo el content. Con padding 10px y border 2px el elemento mide 200+20+4=224px.
Pregunta 4 / 5
¿Qué especificidad tiene un selector de clase CSS como .activo?
a)La misma que un selector de ID porque ambos son selectores simples.
b)Mayor que un selector de etiqueta pero menor que uno de ID.
c)La misma que un selector de etiqueta como p.
d)Mayor que un selector de ID como #menu.
💡 Orden de especificidad: !important > inline style > ID (0,1,0,0) > clase/pseudoclase/atributo (0,0,1,0) > etiqueta (0,0,0,1). Un selector de clase tiene mayor especificidad que uno de etiqueta pero menor que uno de ID.
Pregunta 5 / 5
¿Qué hace la pseudoclase CSS a:hover?
a)Aplica el estilo al enlace en el momento exacto en que se hace clic sobre él.
b)Aplica el estilo al enlace cuando el puntero del ratón está sobre él.
c)Aplica el estilo al enlace una vez que ha sido visitado por el usuario.
d)Aplica el estilo al enlace cuando tiene el foco del teclado activo.
💡 a:hover: activo cuando el puntero está sobre el elemento. a:visited: enlace ya visitado. a:active: en el momento del clic. a:focus: cuando tiene el foco. LVHA es el orden recomendado: :link, :visited, :hover, :active.
—
respuestas correctas
——
⚙️ T3
JavaScript — variables, tipos, funciones y DOM
Bloque III · tipo de datos, funciones y manipulación del DOM
Variables: var, let y const
| Declaración | Ámbito | Reasignable | Hoisting | Uso recomendado |
|---|---|---|---|---|
var | Función o global | Sí | Sí (se eleva) | Evitar en código moderno |
let | Bloque { } | Sí | No (temporal dead zone) | Variables que cambian |
const | Bloque { } | No (la referencia) | No | Valores que no cambian |
const no significa inmutable: el objeto o array no se puede reasignar, pero sí se pueden modificar sus propiedades.
const arr = [1,2]; arr.push(3); es válido. Lo que no se puede hacer: arr = [4,5];var x = 10; // ámbito de función, hoisting
let y = 20; // ámbito de bloque { }
const PI = 3.14159; // no se puede reasignar
Tipos de datos en JavaScript
| Tipo | Ejemplos | typeof devuelve |
|---|---|---|
| Number | 42, 3.14, NaN, Infinity | 'number' |
| String | "hola", 'mundo', template literals | 'string' |
| Boolean | true, false | 'boolean' |
| undefined | Variable declarada sin valor | 'undefined' |
| null | Ausencia intencionada de valor | 'object' (bug histórico) |
| Object | {nombre: "TAI"}, [1,2,3] | 'object' |
| Function | function f(){} | 'function' |
typeof null === 'object': es un bug histórico de JavaScript desde 1995 que no se puede corregir. Para comprobar si un valor es null usar comparación estricta:
valor === null.Funciones: declaración, expresión y arrow
// 1. Declaración de función (tiene hoisting)
function suma(a, b) { return a + b; }
// 2. Expresión de función (no tiene hoisting)
const resta = function(a, b) { return a - b; };
// 3. Arrow function (ES6) — sintaxis compacta
const multiplica = (a, b) => a * b;
const saluda = nombre => 'Hola ' + nombre;
// Arrow functions NO tienen su propio 'this'
Arrow functions y 'this': las arrow functions heredan el
this del contexto exterior. Las funciones regulares crean su propio this según cómo se las llama. Por eso las arrow functions son preferidas en callbacks dentro de clases.DOM — selección y manipulación de elementos
// Seleccionar elementos del DOM
document.getElementById('miId') // por ID (1 elemento)
document.querySelector('.miClase') // primer elemento que coincide
document.querySelectorAll('p') // todos los párrafos (NodeList)
// Modificar contenido
el.textContent = 'Nuevo texto'; // solo texto, sin HTML
el.innerHTML = '<b>Negrita</b>'; // permite HTML (riesgo XSS)
// Modificar clases CSS
el.classList.add('activo');
el.classList.remove('activo');
el.classList.toggle('visible');
// Eventos
el.addEventListener('click', callback);
5 preguntas de práctica
Pregunta 1 / 5
¿Cuál es la diferencia principal entre let y var en JavaScript?
a)Son equivalentes; let es simplemente el nuevo nombre de var en ES6.
b)var solo puede contener números; let puede contener cualquier tipo de dato.
c)let es más lento porque verifica tipos en tiempo de ejecución.
d)let tiene ámbito de bloque { }; var tiene ámbito de función o global y se eleva (hoisting).
💡 var: ámbito de función (o global) y hoisting (se eleva la declaración al inicio). let y const (ES6): ámbito de bloque { }. No tienen hoisting efectivo (temporal dead zone). En código moderno se prefiere let/const sobre var.
Pregunta 2 / 5
¿Qué devuelve typeof null en JavaScript?
a)'boolean': porque null se convierte a false en contexto booleano.
b)'object': es un bug histórico del lenguaje desde su primera versión en 1995.
c)'undefined': porque null es un valor no definido en la especificación.
d)'null': el tipo correcto del valor nulo.
💡 typeof null devuelve 'object'. Es un bug histórico de JavaScript desde 1995 que no se puede corregir sin romper código existente. Para comprobar si un valor es null usar comparación estricta: valor === null.
Pregunta 3 / 5
¿Qué método del DOM selecciona el PRIMER elemento que coincide con un selector CSS?
a)querySelectorAll: selecciona TODOS los elementos que coinciden con el selector.
b)querySelector: selecciona solo el primer elemento que coincide con el selector.
c)getElementById: selecciona por ID pero no acepta selectores CSS completos.
d)getElementsByClassName: selecciona por clase pero no acepta selectores CSS.
💡 querySelector(selector): devuelve el primer elemento que coincide con el selector CSS. querySelectorAll: devuelve todos en un NodeList. getElementById: solo busca por ID. querySelector es más flexible: acepta cualquier selector CSS.
Pregunta 4 / 5
¿Cuál es la diferencia entre textContent e innerHTML?
a)textContent es más lento porque procesa el HTML internamente.
b)innerHTML solo admite texto sin formato; textContent permite etiquetas HTML.
c)textContent establece solo texto plano; innerHTML permite HTML y puede ser vulnerable a XSS.
d)Son equivalentes; la diferencia es solo de compatibilidad con navegadores.
💡 textContent: solo texto plano. Las etiquetas se muestran como texto literal. Más seguro. innerHTML: permite insertar HTML. Si el contenido viene de entrada del usuario puede ser vulnerable a ataques XSS. Se debe usar con precaución.
Pregunta 5 / 5
¿Qué característica diferencia a una arrow function de una función regular?
a)Las arrow functions solo pueden contener una única línea de código.
b)Las arrow functions no pueden recibir parámetros; las funciones regulares sí.
c)Las arrow functions no tienen su propio this; heredan el this del contexto donde fueron definidas.
d)Las arrow functions son siempre síncronas; las funciones regulares pueden ser asíncronas.
💡 Arrow functions no tienen su propio this. Heredan el this del contexto léxico exterior. Las funciones regulares crean su propio this según cómo se las llama. Por eso las arrow functions son preferidas en callbacks dentro de clases.
—
respuestas correctas
——
🔧 T4
Programación — operadores, bucles y pseudocódigo
Bloque III · preguntas directas sobre código en el supuesto práctico
Operadores lógicos y de comparación
| Operador | Nombre | Ejemplo | Resultado |
|---|---|---|---|
&& | AND lógico | true && false | false |
|| | OR lógico | true || false | true |
! | NOT lógico | !true | false |
== | Igual con coerción de tipos | "5" == 5 | true |
=== | Igual estricto (sin coerción) | "5" === 5 | false |
!== | Distinto estricto | "5" !== 5 | true |
>, <, >=, <= | Comparación | 5 > 3 | true |
== vs ===:
== convierte los tipos antes de comparar (coerción). === compara tipo y valor sin conversión. Siempre usar === salvo que se necesite la coerción expresamente.Estructuras de control — bucles
// FOR — número de iteraciones conocido
for (let i = 0; i < 10; i++) { console.log(i); }
// WHILE — condición, iteraciones desconocidas
let n = 0;
while (n < 10) { n++; }
// DO-WHILE — ejecuta al menos una vez
do { n++; } while (n < 10);
// FOR...OF — iterar valores de un array
for (const elemento of [1, 2, 3]) { console.log(elemento); }
// FOR...IN — iterar claves de un objeto
for (const clave in {a: 1, b: 2}) { console.log(clave); }
Do-while vs while: do-while ejecuta el cuerpo AL MENOS UNA VEZ antes de evaluar la condición. While puede no ejecutarse nunca si la condición es falsa desde el inicio.
Trazas de código — seguir la ejecución
En el examen hay preguntas de traza: seguir la ejecución paso a paso y determinar el valor final de una variable.
// Ejemplo: ¿qué vale resultado?
let resultado = 0;
for (let i = 1; i <= 5; i++) {
resultado += i;
}
// i=1: resultado=1 | i=2: resultado=3 | i=3: resultado=6
// i=4: resultado=10 | i=5: resultado=15 → FIN
console.log(resultado); // 15
// Ejemplo con condicional
let x = 10;
if (x > 5 && x < 20) {
x = x * 2; // 10 * 2 = 20
} else {
x = 0;
}
// x vale 20 (ambas condiciones son true)
Recursividad y caso base
Una función recursiva se llama a sí misma. Requiere siempre un caso base que detenga la recursión. Sin caso base produce un desbordamiento de pila (stack overflow).
// Factorial recursivo — n! = n * (n-1) * ... * 1
function factorial(n) {
if (n <= 1) return 1; // caso base
return n * factorial(n - 1); // llamada recursiva
}
// factorial(4) = 4 * 3 * 2 * 1 = 24
Toda función recursiva necesita: (1) Caso base: condición que detiene la recursión. (2) Llamada recursiva: se llama a sí misma con un parámetro que converge hacia el caso base.
5 preguntas de práctica
Pregunta 1 / 5
¿Cuál es el resultado de evaluar '5 == "5"' en JavaScript?
a)false: porque uno es número y otro string y son tipos distintos.
b)undefined: porque la comparación entre tipos distintos es indefinida.
c)true: porque == realiza coerción de tipos antes de comparar.
d)Error de tipo: no se pueden comparar tipos distintos en JavaScript.
💡 == (igualdad abstracta): convierte los operandos al mismo tipo antes de comparar. '5' se convierte a 5 y 5 == 5 es true. === (igualdad estricta): compara tipo Y valor. 5 === '5' es false. Siempre usar === salvo que se necesite la coerción.
Pregunta 2 / 5
¿Cuántas veces ejecuta el cuerpo un bucle do-while si la condición es falsa desde el inicio?
a)Cero veces: no ejecuta el cuerpo si la condición ya es falsa desde el principio.
b)Dos veces: una para evaluar la condición y otra para ejecutar el cuerpo.
c)Al menos una vez: el cuerpo se ejecuta antes de evaluar la condición.
d)Indefinidamente: si la condición es false el bucle no puede terminar.
💡 Do-while: ejecuta el cuerpo primero y luego evalúa la condición. Siempre ejecuta el cuerpo al menos una vez aunque la condición sea false desde el inicio. While: evalúa la condición primero; si es false, el cuerpo nunca se ejecuta.
Pregunta 3 / 5
¿Qué valor tiene resultado tras: let resultado=0; for(let i=1; i<=4; i++){ resultado+=i; }?
a)0: el bucle no modifica el valor inicial de resultado.
b)10: la suma de 1+2+3+4.
c)4: el valor de i en la última iteración del bucle.
d)16: el cuadrado de 4 elevado a la potencia 2.
💡 Traza: i=1→resultado=1, i=2→resultado=3, i=3→resultado=6, i=4→resultado=10. i=5: 5>4 sale del bucle. Resultado=10. Fórmula: suma 1..n = n*(n+1)/2. Para n=4: 4*5/2 = 10.
Pregunta 4 / 5
¿Qué es el caso base en una función recursiva?
a)La condición de parada que evita que la función se llame indefinidamente.
b)El valor que retorna la función cuando se produce un error de ejecución.
c)El parámetro que recibe la función en su primera invocación.
d)La primera llamada a la función desde el programa principal.
💡 Caso base: condición en la que la función recursiva deja de llamarse a sí misma y devuelve un valor directo. Sin caso base la función se llama infinitamente hasta agotar la pila (stack overflow). La función debe converger hacia el caso base en cada llamada.
Pregunta 5 / 5
¿Qué diferencia hay entre for...of y for...in en JavaScript?
a)Son equivalentes; la diferencia es solo de legibilidad del código fuente.
b)for...in es más moderno que for...of y se recomienda siempre usar for...in.
c)for...of itera sobre los VALORES de un iterable; for...in itera sobre las CLAVES de un objeto.
d)for...of itera propiedades de objetos; for...in itera elementos de arrays.
💡 for...of: itera sobre los VALORES de cualquier iterable (arrays, strings, Set, Map). for...in: itera sobre las CLAVES/propiedades enumerables de un objeto. Usar for...of para arrays y for...in para objetos.
—
respuestas correctas
——
🔀 T5
JSP, JSF y tecnologías Java web
Bloque III · ciclo de vida JSF y componentes aparecen en exámenes TIC
JSP vs JSF — diferencias clave
| Aspecto | JSP | JSF |
|---|---|---|
| Tipo | Tecnología de vistas (páginas dinámicas) | Framework MVC completo orientado a componentes |
| Java en la vista | Directo con scriptlets <% %> | NO; solo mediante Managed Beans |
| Expresiones | ${} (EL inmediata) | #{} (EL diferida, ciclo de vida) |
| Estado | Stateless (sin estado) | Stateful (mantiene estado del árbol de componentes) |
| Reutilización | Baja | Alta (componentes reutilizables) |
| Extensión | .jsp | .xhtml (Facelets) |
Clave del examen: En JSF, el código Java NUNCA va en la vista. Solo se accede mediante Managed Beans con
#{bean.propiedad}. El Depurador NO es un componente de JSF.JSF — ciclo de vida de 6 fases
1. Restore View → Reconstruir el árbol de componentes UI
2. Apply Request Values → Poblar componentes con datos del formulario
3. Process Validations → Ejecutar validadores (si hay error → saltar a fase 6)
4. Update Model Values → Actualizar propiedades del Managed Bean
5. Invoke Application → Ejecutar la acción del usuario
6. Render Response → Generar el HTML y enviarlo al cliente
Atajo importante: si hay error en la validación (fase 3), JSF salta directamente a la fase 6 (Render Response). Las fases 4 y 5 no se ejecutan si hay errores de validación.
Componentes JSF — cuál NO es componente
| Componente | Función |
|---|---|
| UI Components | Elementos visuales: inputs, botones, tablas, panels |
| Managed Bean | Clase Java con lógica de negocio y estado de la vista |
| Validator | Valida los datos introducidos por el usuario |
| Converter | Convierte tipos de datos (String ↔ Date, String ↔ int) |
| Renderer | Genera la salida HTML para cada componente UI |
| Navigation Handler | Controla la navegación entre páginas |
| FacesContext | Contexto de ejecución de la petición JSF actual |
| ❌ Depurador | NO es un componente de JSF |
Formatos de empaquetado Java: JAR, WAR, EAR
| Formato | Nombre completo | Contenido | Entorno |
|---|---|---|---|
.jar | Java Archive | Clases .class, recursos, MANIFEST.MF | JVM directamente |
.war | Web Application Archive | Servlets, JSP, HTML, WEB-INF/, clases | Servidor web (Tomcat, Jetty) |
.ear | Enterprise Archive | Módulos WAR + JAR + application.xml | Servidor JEE (JBoss, WebLogic) |
Jerarquía: EAR contiene WARs y JARs. WAR se despliega en Tomcat. JAR es una librería o app standalone. Para una app web Java: empaquetar en WAR y desplegar en el servidor de aplicaciones.
5 preguntas de práctica
Pregunta 1 / 5
¿Cuántas fases tiene el ciclo de vida de una petición JSF?
a)2 fases: una para recibir la petición y otra para enviar la respuesta.
b)3 fases: petición, procesamiento y respuesta al cliente.
c)6 fases: Restore View, Apply Request Values, Process Validations, Update Model Values, Invoke Application y Render Response.
d)4 fases: recepción, validación, ejecución y renderizado del HTML.
💡 JSF tiene exactamente 6 fases. Si hay error en la validación (fase 3), se salta directamente a la fase 6 (Render Response), omitiendo las fases 4 y 5.
Pregunta 2 / 5
En JSF, ¿cuál de los siguientes NO es un componente del framework?
a)Validator: verifica los datos introducidos por el usuario.
b)Depurador: herramienta para análisis del ciclo de vida JSF.
c)Managed Bean: contiene la lógica de negocio y el estado de la vista.
d)Converter: transforma tipos de datos entre la vista y el modelo.
💡 El Depurador NO es un componente de JSF. Los componentes son: UI Components, Managed Bean, Validator, Converter, Renderer, Navigation Handler y FacesContext. El depurador es una herramienta externa del IDE.
Pregunta 3 / 5
¿Cuál es la diferencia entre ${} de JSP y #{} de JSF?
a)#{} solo se usa para acceder a bases de datos; ${} para atributos de la sesión.
b)Son equivalentes; solo cambia el delimitador por convención del framework.
c)${} es más eficiente que #{} porque evita el ciclo de vida JSF completo.
d)${} se evalúa inmediatamente al renderizar; #{} se evalúa de forma diferida siguiendo el ciclo de vida JSF.
💡 ${} EL estándar (JSP): evaluación inmediata al renderizar. #{} EL unificada (JSF): evaluación diferida, se evalúa en las fases apropiadas del ciclo de vida JSF (fase 2 para leer, fase 4 para escribir).
Pregunta 4 / 5
¿Qué formato de empaquetado Java se despliega en Tomcat para aplicaciones web?
a)WAR: contiene la aplicación web (Servlets, JSP y recursos estáticos).
b)EAR: para aplicaciones empresariales completas Java EE.
c)JAR: para librerías y aplicaciones Java standalone.
d)RAR: para conectores de recursos externos Java EE.
💡 WAR (Web Application Archive): contiene Servlets, JSP/Facelets, recursos estáticos, WEB-INF/web.xml y clases compiladas. Se despliega en servidores como Tomcat, Jetty, JBoss. EAR contiene WARs y JARs para aplicaciones empresariales completas.
Pregunta 5 / 5
En JSF, ¿cómo se accede a la lógica de negocio desde una página Facelets?
a)Mediante llamadas directas a métodos estáticos de utilidades Java.
b)Mediante importación de clases con la directiva <%@ import %>.
c)Exclusivamente mediante Managed Beans con expresiones #{bean.propiedad}.
d)Directamente con scriptlets Java en la vista: <% logica %>.
💡 En JSF, la vista (.xhtml) no contiene código Java. Toda la lógica se coloca en Managed Beans (anotados con @ManagedBean o @Named). La vista accede con #{nombreBean.propiedad} o #{nombreBean.metodo()}. Esta separación estricta diferencia JSF de JSP.
—
respuestas correctas
——