Test cuestionario para desarrolladores front-end - the question form
Preguntas: 16 · 10 minutos
1. Una página responsiva debe permitir que el navegador elija entre varias versiones de la misma imagen según la densidad de la pantalla y el ancho del diseño. ¿Qué características de HTML están diseñadas para esto?
alt y title
width y loading
srcset y sizes
href y media
2. Suponiendo el mismo origen y la misma importancia, y que no hay estilos en línea, ¿cuál de los siguientes selectores CSS coincidentes tiene la mayor especificidad?
.nav .item.active
#site-nav a
header nav a
a.item:hover
3. Una tabla puede recibir nuevas filas después de una solicitud a una API. Quieres que un solo controlador de clics responda a los botones de las filas existentes y futuras. ¿Qué enfoque es el más adecuado?
Clonar una fila existente para que se copien sus registros de addEventListener
Agregar un listener independiente de clics a window cada vez que se cree una fila
Adjuntar un solo listener a un elemento ancestro estable e inspeccionar el objetivo del evento
Ejecutar setInterval para comprobar si se hizo clic en algún botón de una fila
4. Un formulario de pago necesita un control que envíe el formulario y que, de manera predeterminada, funcione con teclados y tecnologías de asistencia. ¿Qué marcado es la mejor opción?
<button type=""submit"">Realizar pedido</button>
<a href=""#"" onclick=""submitOrder()"">Realizar pedido</a>
<div tabindex=""0"">Realizar pedido</div>
<span role=""link"">Realizar pedido</span>
5. Un botón que solo contiene un ícono muestra una lupa en formato SVG, pero no tiene texto visible. ¿Qué elemento se puede agregar para proporcionarle directamente un nombre accesible?
Establecer tabindex=""-1"" en el botón
Agregar aria-hidden=""true"" al botón
Asignar al SVG un color de fondo mediante CSS
Agregar aria-label=""Buscar"" al botón
6. ¿Qué valor se asigna a result con este código: const result = [1, 2, 3, 4].filter(n => n % 2 === 0).map(n => n * 2);?
[4, 8]
[2, 4, 6, 8]
[1, 3]
[2, 4]
7. Una tarjeta tiene width: 300px, padding: 20px y un borde de 2px. ¿Qué declaración mantiene su ancho exterior renderizado en 300px?
overflow: hidden
max-width: 300px
display: block
box-sizing: border-box
8. ¿En qué orden aparece la salida en la consola con este código: console.log('A'); Promise.resolve().then(() => console.log('B')); setTimeout(() => console.log('C'), 0); console.log('D');?
A, D, B, C
A, B, D, C
A, D, C, B
A, B, C, D
9. ¿Qué afirmación sobre un elemento estándar <script type=""module"" src=""app.js""></script> es correcta?
Se difiere de manera predeterminada y admite la sintaxis de módulos de JavaScript
Siempre bloquea el análisis del HTML hasta que el script termina de ejecutarse
Se ejecuta en el modo clásico no estricto de los scripts, a menos que se agregue use strict
Solo puede usar import y export después de convertirse en un script clásico
10. Un navegador envía If-None-Match con un ETag y el recurso almacenado en caché no ha cambiado. ¿Qué respuesta permite normalmente que el navegador reutilice el cuerpo almacenado en caché?
201 Creado
304 No modificado
206 Contenido parcial
410 Ya no disponible
11. El comentario de un usuario debe insertarse en un elemento como texto sin formato, sin interpretarse como HTML. ¿Qué propiedad del DOM es la opción directa más segura?
innerHTML
textContent
insertAdjacentHTML
outerHTML
12. Después de que un usuario guarda un perfil, una región de estado existente cambia de “Guardando” a “Guardado”. ¿Qué atributo puede hacer que estas actualizaciones no urgentes se anuncien sin mover el foco del teclado?
aria-hidden=""true""
tabindex=""-1""
aria-live=""polite""
role=""presentation""
13. Una etiqueta de texto y un campo de entrada son elementos hermanos separados. ¿Qué atributos asocian explícitamente la etiqueta con ese campo?
Atributos name coincidentes en ambos elementos
Un atributo target en la etiqueta que coincida con la clase del campo
Un placeholder en el campo que coincida con el texto de la etiqueta
Un atributo for en la etiqueta que coincida con el id del campo
14. Si el tamaño de fuente calculado del elemento raíz es de 16px, ¿qué longitud calculada produce margin: 1.5rem?
16px
18px
22px
24px
15. En JavaScript, ¿qué hace el operador ===?
Compara los valores después de convertir ambos operandos en cadenas de texto
Asigna un valor y conserva su tipo original
Compara el valor y el tipo sin convertir los operandos
Solo compara si dos variables tienen el mismo nombre
16. Necesitas un contenedor CSS Grid con tres columnas del mismo ancho que compartan el espacio disponible. ¿Qué declaración lo expresa directamente?
grid-template-columns: auto auto auto
grid-template-columns: repeat(3, 1fr)
grid-template-rows: 33% 33% 33%
grid-auto-flow: column dense