Font size
WorksheetsCX9 - (03 - 09 - 2025)
Total questions: 70
Worksheet time: 1hrs 5mins
¿Cuál de estas etiquetas es semánticamente correcta para encerrar el contenido principal de una página web?
<div id="main">
<main>
<section>
<article>
¿Cuál es la diferencia entre id y class en HTML?
id se usa muchas veces y class solo una vez
id es único en la página y class se puede repetir
No hay diferencia, son lo mismo
id solo funciona en CSS y class en JS
Si quieres que un contenedor sea flexible y sus hijos se acomoden horizontalmente, ¿qué propiedad usas?
display: flex;
display: grid;
position: absolute;
float: left;
¿Qué selector en CSS selecciona a todos los elementos
que están dentro de un
div?
div + p
div p
p div
div > p
¿Cuál es la diferencia entre relative y absolute en CSS positioning?
absolute siempre se mueve respecto al body, relative no
absolute se mueve respecto al ancestro posicionado, relative respecto a su posición original
No hay diferencia
relative elimina al elemento del flujo del documento
¿Cuál propiedad de CSS cambia la prioridad de superposición de elementos?
position
layer
z-index
stack
Si un archivo CSS no se carga, ¿cuál podría ser la causa más común?
No se declaró <style> en html
Error en la ruta del archivo en <link>
Se usó un color inválido
Falta un alt en una imagen
Explica con tus palabras por qué es mejor usar etiquetas semánticas en HTML que solo divs para todo.
Si aplicas display: none; a un elemento, ¿qué sucede?
El elemento se oculta pero sigue ocupando espacio
El elemento desaparece visualmente y no ocupa espacio
El elemento se vuelve transparente pero sigue en el flujo
Se elimina del DOM por completo
¿Cuál es la etiqueta HTML correcta para crear un enlace?
<a>
<link>
<href>
<url>
¿Qué atributo de la etiqueta <img> se recomienda siempre por accesibilidad y SEO?
srcset
alt
title
id
Si defines un color en CSS con rgba(255, 0, 0, 0.5), ¿qué representa el último valor (0.5)?
Saturación
Brillo
Transparencia/Opacidad
Contraste
¿Cuál es la forma correcta de aplicar varias clases a un mismo elemento en HTML?
<div class="caja1+caja2">
<div class="caja1 caja2"
<div class="caja1, caja2">
<div class="caja1; caja2">
En CSS, ¿qué significa la regla box-sizing: border-box;?
El padding y el border se incluyen dentro del ancho y alto total del elemento
El padding y el border se suman al ancho y alto total del elemento
Se eliminan el padding y el border
Se aplica un box-shadow automático
Explica en tus palabras la diferencia entre display: flex y display: grid.
¿Cuál es la propiedad principal que activa el modo Grid en un contenedor?
¿Cuál es la propiedad principal que activa el modo Grid en un contenedor?
display: flex;
display: grid;
grid-template;
align-grid;
¿Qué propiedad define la cantidad de columnas en un Grid?
grid-template-columns
grid-columns
columns-template
grid-repeat
¿Cuál es el valor correcto para crear 3 columnas iguales usando grid-template-columns?
grid-template-columns: auto auto auto;
grid-template-columns: 3fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 100px 100px 100px;
La propiedad grid-gap (o gap) se utiliza para:
Crear un borde alrededor del grid
Definir el espacio entre filas y columnas
Ajustar la alineación del grid
Establecer márgenes automáticos
¿Qué propiedad se usa para colocar un elemento en una columna específica?
grid-column
column-span
grid-area
grid-align
¿Qué significa grid-column: 1 / 3;?
Que el elemento se coloca en la columna 3
Que ocupa desde la columna 1 hasta antes de la 3
Que ocupa únicamente la columna 2
Que el elemento tiene ancho automático
¿Cuál es la diferencia entre align-items y justify-items en un grid?
align-items es horizontal y justify-items es vertical
align-items es vertical y justify-items es horizontal
Ambas hacen lo mismo
Ninguna de las anteriores
¿Cuál de estos métodos sí muta el array original?
map
filter
slice
splice
¿Qué imprime el siguiente código? const arr = [1, 2, 3]; const len = arr.push(4); console.log(arr, len);
[1, 2, 3] 3
[1, 2, 3, 4] 4
[1, 2, 3, 4] 5
[1, 2, 3] 4
¿Cuál es la diferencia correcta entre forEach y map?
forEach retorna un nuevo array; map no retorna nada
Ambos mutan el array original
map retorna un nuevo array; forEach retorna undefined
forEach es más rápido y por eso siempre se usa
Resultado de: [1, 2, 3, 4, 5].filter(n => n % 2 != 0).length
5
2
3
0
¿Qué imprime?
function saludo(nombre = "Anónimo") {
return `Hola, ${nombre}`;
}
console.log(saludo());
Hola,
Hola, null
Hola, undefined
Hola, Anónimo
¿Qué hace el siguiente switch?
const x = 2;
switch (x) {
case 1:
case 2:
console.log("A");
break;
default:
console.log("B");
}
Imprime "B"
No imprime nada
Imprime "A"
Lanza error
¿Cuál método verifica si al menos un elemento cumple una condición?
every
some
includes
findIndex
¿Cuál de los siguientes devuelve un solo elemento (o undefined) en lugar de un array?
filter
map
find
slice
¿Cómo se separan los elementos de un array cuando se convierten a una cadena con el método join() en JavaScript?
Se separan con un punto y coma ; por defecto
Se separan con una coma , por defecto
Se separan con un espacio en blanco " " por defecto
No se pueden separar
Si tienes el array let numeros = [10, 20, 30, 40]; ¿cómo accedes al elemento 30?
numeros[3]
numeros[2]
numeros[30]
numeros.get(2)
¿Cuál de las siguientes opciones crea correctamente una clase en JavaScript?
class Persona { constructor(nombre) { this.nombre = nombre; } }
function class Persona(nombre) { this.nombre = nombre; }
persona = class { nombre = nombre; }
createClass Persona { constructor(nombre) { this.nombre = nombre; } }
¿Qué palabra clave se usa para crear una nueva instancia de una clase?
instance
new
create
class
En JavaScript, ¿cómo se implementa la herencia entre clases?
Con la palabra clave extends
Con la palabra clave inherit
Con la función superclass()
No se puede hacer herencia en JavaScript
¿Qué devolverá miPerro.hablar()?
"Hace un sonido"
"Guau!"
"Firulais"
undefined
¿Cuál es una buena práctica al trabajar con clases en JavaScript?
Usar siempre variables globales dentro de la clase
Definir métodos dentro del constructor para ahorrar espacio
Usar camelCase en métodos y PascalCase en nombres de clases
No usar constructores, todo se puede hacer con funciones sueltas
En JavaScript, ¿qué es un objeto?
Una función que siempre devuelve números
Una colección de pares clave-valor
Una variable que solo almacena strings
Una estructura idéntica a un array
¿Qué es una clase en JavaScript?
Un método especial para crear arrays
Una plantilla para crear objetos con propiedades y métodos
Un tipo de dato primitivo
Una función que no puede heredarse
¿Qué significa herencia en Programación Orientada a Objetos?
Copiar código de un archivo a otro
Crear un nuevo objeto que toma propiedades y métodos de otro
Guardar variables en la memoria
Repetir métodos sin optimización
¿Qué es una instancia de una clase en JavaScript?
Una variable que guarda funciones globales
Un objeto creado a partir de una clase
Una copia idéntica de una clase
Una función que no devuelve nada
¿Cuál de estas opciones es una buena práctica al trabajar con POO en JavaScript?
Usar nombres de variables confusos para proteger el código
Evitar herencia y solo usar funciones anónimas
Aplicar encapsulación y reutilización de código
Definir todas las propiedades en variables globales
¿Qué representa la palabra clave this dentro de un método de una clase en JavaScript?
Una referencia a la clase misma
Una referencia al objeto actual que llama al método
Una variable global del navegador
El prototipo del objeto
Cuales son los principales conceptos de la POO?
¿Cuál es el tipo de datos que localStorage puede almacenar directamente sin transformar nada?
Objetos completos
Strings (cadenas de texto)
Arrays
Funciones
Tienes el objeto: let user = { nombre: "Ana", edad: 25 }; Si quieres guardarlo en localStorage, ¿qué debes hacer primero?
Guardarlo directo con localStorage.setItem("user", user)
Convertirlo en cadena con JSON.stringify(user)
Crear un array con los datos y guardarlo
Usar parseInt(user)
¿Qué devuelve este código? localStorage.setItem("num", 50); console.log(localStorage.getItem("num") + 5);
55
"505"
undefined
null
Si tienes esto en el localStorage: {"nombre":"Carlos","activo":true} ¿Cómo lo obtienes como objeto en JS?
localStorage.getItem("user")
JSON.parse(localStorage.getItem("user"))
JSON.stringify(localStorage.getItem("user"))
localStorage.user
El método localStorage.clear() sirve para:
Eliminar solo una clave específica
Eliminar todo el almacenamiento local del dominio
Resetear la página
Guardar datos vacíos
¿Qué pasaría si intentas guardar una función con localStorage.setItem("fn", JSON.stringify(miFuncion))?
Se guarda normal y luego se puede ejecutar
Devuelve error y rompe el navegador
Se guarda como undefined o simplemente no guarda la función
Se guarda como string con el código de la función
Buenas prácticas: ¿Qué deberías hacer al guardar datos sensibles como contraseñas en localStorage?
Guardarlas tal cual, que pa’ qué complicarse
Usar JSON.stringify(password) y ya
Evitar guardarlas en localStorage y mejor usar mecanismos seguros (cookies con HttpOnly, JWT en memoria, etc.)
Guardarlas encriptadas en localStorage
Si tienes una lista de tareas en un array, ¿cuál sería el flujo correcto para guardarlas en localStorage?
Guardar el array tal cual → Recuperar tal cual
JSON.stringify(array) al guardar → JSON.parse(item) al recuperar
Guardar el array como texto manualmente → dividir con .split() al recuperar
No se puede guardar arrays en localStorage
¿Cuál es la diferencia entre sessionStorage y localStorage?
Ninguna, son lo mismo
localStorage guarda datos solo durante la sesión, sessionStorage para siempre
localStorage guarda datos de forma persistente, sessionStorage solo mientras la pestaña esté abierta
sessionStorage no soporta JSON
¿Cuál de las siguientes NO es una forma de seleccionar elementos en el DOM?
document.querySelector()
document.getElementById()
document.innerHTML()
document.querySelectorAll()
Si quieres crear un nuevo <li>
desde JavaScript y añadirlo a una lista <ul>
, ¿qué método debes usar después de createElement("li")?
appendChild()
push()
addElement()
insertNode()
¿Qué propiedad del DOM te permite modificar directamente el texto dentro de un elemento?
innerText
nodeType
style
classList
Tienes este botón: <button id="btn">Click aquí</button> ¿Cuál es la forma correcta de escuchar el evento click en JavaScript?
btn.add("click", function(){})
btn.event("click", ()=>{})
btn.addEventListener("click", ()=>{})
onClick(btn, ()=>{})
Imagina que quieres guardar el puntaje de un jugador en localStorage y que siempre incremente en +10 al ganar. ¿Cuál sería la mejor lógica?
Guardar siempre el número 10.
Recuperar el puntaje, convertirlo a número, sumarle 10 y volver a guardarlo.
Usar Math.random() y confiar en la suerte.
Guardarlo en un array y olvidarte de él.
Quieres mostrar en pantalla un mensaje de bienvenida dinámico con el nombre de un usuario almacenado en localStorage. ¿Qué harías?
alert(localStorage)
Recuperar con getItem("nombre") y ponerlo en un elemento con innerText.
Pedir siempre al usuario que lo escriba de nuevo.
No se puede hacer.
Si tienes un array de objetos con productos y quieres mostrarlos en una lista HTML, ¿cuál sería un buen enfoque?
Usar un forEach para crear nodos <li>
y agregarlos al DOM.
Copiar el array en el portapapeles y pegarlo en el HTML.
Usar JSON.stringify para convertir el array a un string y mostrarlo como texto plano.
Guardar todo en un alert().
Estás diseñando una app que guarda el tema de color (oscuro o claro) elegido por el usuario. ¿Cuál es la mejor práctica?
Guardarlo en localStorage y aplicarlo al cargar la página.
Preguntar siempre al usuario qué tema quiere al entrar.
Escribirlo en un console.log y esperar que se acuerde.
No hacer nada, el usuario que aguante.
Buenas prácticas: ¿Deberías guardar datos sensibles como contraseñas en localStorage?
Escribe una función ultimo(arr) que reciba y retorne el último elemento de un array o null si está vacío.
Escribe una función contarNumeros(arr) que reciba un array de números y retorne cuántos números hay.
¿Cuál es la diferencia entre gap, row-gap y column-gap en CSS Grid?
Escribe un ejemplo de un grid con 2 filas de 150px y 3 columnas iguales usando repeat.
¿Cuál es la utilidad de grid-template-areas en un diseño con Grid?
Crea un ejemplo de grid donde los ítems estén centrados tanto horizontal como verticalmente.
Dado un array de objetos usuarios con { nombre, edad }, escribe una función que retorne un array solo con los nombres de los usuarios mayores o iguales a 18.
ayuda?: filtra los mayores y luego devuelve solo sus nombres
