HTML5, CSS, JAVASCRIPT CEREMONIAS

Ejercicios de
HTML5, CSS y
Javascript
Ejercicio 1: Página HTML básica

Objetivo (E)
Escriba una página HTML5 que muestre un botón y una ventana emergente de alerta. Utilice el
código de
P02_HTML_Essentials_Ejercicio_1.html
1. Copiar o crear el esqueleto de la página HTML
2. Añadir un botón pulsador a la sección del cuerpo
3. Agregar un controlador de eventos para el botón “onclick”
4. Utilice una ventana emergente de alerta como controlador de eventos

Objetivo (M)
Agregue otro botón como imagen y haga que el botón de imagen navegue a la página del logotipo
HTML5
1. Descargue o enlace el botón como la siguiente imagen
“[Link]
2. Modifique el controlador de “onclick” para navegar a “[Link]

Objetivo (H)
Agregue un tercer botón que proporcionará una funcionalidad de “ver código fuente”. Es decir, al
presionar el botón se muestra el código fuente actual de la página web.

Sugerencia: Un programador inteligente notará que esta función ya es compatible con Chrome y

PÁGINA1 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Firefox (es decir, no es necesario editar el contenido de la página)

Ejercicio 2: Selectores y propiedades CSS básicos

Objetivo (E)
Practique el uso de selectores y propiedades CSS básicos. Utilice el código de
P03_CSS_Eseentials_Exercise_1.html
1. Cree un documento HTML que incluya el<style> section
2. Reemplace _universal, _type, ... por el marcado apropiado

Objetivo (M)
Modifique su estilo original para producir efectos de “pasar el mouse por encima”; es decir,
cambie el color del texto si el cursor del mouse está dentro del texto actual.<p> elemento.

Objetivo (H)
Añade un degradado al fondo de la página web. Eres libre de elegir el degradado, pero debería
funcionar tanto en Chrome como en Firefox.

Sugerencia: Hay herramientas disponibles para generar el estilo CSS de los degradados, ya que
son diferentes para cada navegador (Webkit, Opera, Microsoft ...)

Ejercicio 3: Definir un blog utilizando marcado semántico

Objetivo (E)
Utilice las nuevas etiquetas estructurales y dé estilo a la página resultante. Utilice el código en
P04_HTML_Semantic_Markup_Exercise_1.html
1. Crear una página HTML
2. Agregue un encabezado, un pie de página y dos secciones para publicaciones y una barra
lateral
3. Agregue áreas de navegación horizontal tanto al encabezado como al pie de página
4. Añade un artículo con una digresión a la sección de publicaciones
5. Agregar un menú de barra lateral vertical
6. Dar estilo a la página

PÁGINA2 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONI
AS

Objetivo (M)
Hay otras etiquetas semánticas que no se discutieron durante la presentación de
diapositivas,<time> ,<meter> y<progress> . Usando el<meter> etiqueta y Google Chrome
duplican lo siguiente:

Objetivo (H)
Usando el<progress> etiqueta y Google Chrome, crean un medidor de progreso que aumenta
cuando un usuario hace clic en él.

Consejo: Un poco de Javascript es útil, pero jQuery no es necesario.

Ejercicio 4: Selectores y propiedades CSS básicos

Objetivo (E)
Utilice las nuevas funciones de entrada HTML5 para diseñar un formulario de registro. Utilice el
código de
Ejercicio [Link] de formularios HTML Po6

1. Crear un formulario de entrada con etiquetas y campos de entrada

2. Agregar nombre, apellido (ambos textos)
3. Agregar edad (número), correo electrónico (email), página de inicio (url)
4. Agregar contraseña (password), enviar (submit)
5. Texto de marcador de posición de Lise y verificación de entrada
6. Validar toda la página usando [Link]

PÁGINA3 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (M)
Crea un botón más interesante para tu formulario. Usando CSS modifique el estilo de la entrada
enviada.
1. Agregue un nombre de clase a la entrada de envío
2. Usando selectores CSS, modifique el estilo de la entrada de envío, por ejemplo

PÁGINA4 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (H)
Modifique el formulario usando CSS para duplicar el siguiente estilo:

Sugerencia(s): Será necesario anular el estilo predeterminado del navegador. Además, los
siguientes estilos pueden resultar útiles (no están en ningún orden particular). . .
•
fondo: #5E768D;
•
fondo: -moz-linear-gradient(arriba, #546A7F 0%, #5E768D 20%);
•
fondo: -webkit-gradient(lineal, superior izquierda, inferior
izquierda, color-stop(0%,#546A7F), color-stop(20%,#5E768D));
•
sombra de texto: 0px 1px 0px #F2F2F2;
•
fondo: #C9D0DE;
•
borde: 1px sólido #E1E1E1;
•
-moz-box-shadow: 0px 0px 8px #444;

PÁGINA5 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

•
-webkit-box-sombra: 0px 0px 8px #444;

Ejercicio 5: Atributos de datos personalizados

Objetivo (E)
Utilice atributos de datos personalizados para cambiar dinámicamente un documento. Utilice el
código de P07_HTML_Attributes_Exercise_1.html
1. Crear un documento, agregar un párrafo con atributos personalizados
2. Agregar botón y etiqueta div
3. Agregar un controlador de eventos de botón
4. Al hacer clic en el botón, los datos personalizados se escribirán en la etiqueta div

Ejercicio 6: Tablas de estilos con pseudoclases

Objetivo (E)
Utilice pseudoclases como selectores CSS para darle estilo a una tabla. Utilice el código de
P08_HTML_Styling_Tables_Exercise_1.html
1. Crear un documento HTML con una tabla
2. Definir encabezado, cuerpo y pie de página de la tabla
3. Dar estilo al encabezado de la tabla
4. Añade un patrón de cebra al cuerpo de la mesa.
5. Dar estilo al pie de página y a la última columna de la tabla

Objetivo (M)
Modificar la tabla para hacerla más interactiva. Si un usuario pasa el mouse sobre una fila de una
tabla, su texto debería volverse más legible y su color debería cambiar.
1. Utilice el selector :hover para modificar el color del texto
2. Utilice el selector :hover para modificar el tamaño del texto

Objetivo (H)
Usando eventos, habilita la eliminación de filas. Es decir, si un usuario hace clic en una fila, ésta
debe eliminarse de la pantalla.
Consejo: No es necesario recargar la página, modificar el html dinámicamente es suficiente.

PÁGINA6 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Ejercicio 7: Flotantes CSS

Objetivo (E)
Familiarícese con los diseños flotantes CCS escribiendo una página con encabezado, pie de
página, columna izquierda (flotante) y columna derecha (flotante). Utilice el código de
P10_HTML_CSS_Floats_Exercise_1.html
1. Cree la página, consulte la captura de pantalla en la página siguiente
2. Agregar estilos para encabezado, pie de página, contenido y columnas de navegación

Objetivo (M)
Crea un diseño flotante para una galería de miniaturas y dale estilo de manera adecuada, por

ejemplo:

PÁGINA7 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (H)
Crea una 'letra capital' al comienzo de un párrafo de texto. Nota: la letra capital debe escalarse
independientemente del tamaño de fuente del navegador actual.
Pista:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cilium dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.

Ejercicio 8: Incrustar JavaScript en una página HTML

Objetivo (E)
Aprenda a procesar JavaScript dentro de una página HTML. Utilice el código de
P21_JS_Language_Basics_Exercise_1.html
1. Crear un documento HTML
2. Insertar el<script> tag at the end o the body
3. Envía una ventana emergente de alerta y escribe algún texto en la consola
4. Mostrar el documento en un navegador y abrir la consola (F12)
5. Abra el depurador de scripts y establezca un punto de interrupción
6. Carga la página nuevamente y observa que el script se detiene.

Objetivo (M)
Detectar e imprimir información útil sobre el navegador actual mediante Javascript.
1. Recopilar información del navegador utilizando el objeto del navegador (es decir,
[Link])
2. Una vez recopilada la información, colóquela entre un conjunto de<p> etiquetas
3. Reemplace el innerHTML de una etiqueta div con el<p> etiquetas

Objetivo (H)
Modifique su página para que imprima cada carácter de la información con un retraso de tiempo
para crear un efecto de “máquina de escribir”.

Sugerencia: Puede que le resulte útil el método setInterval().

PÁGINA8 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Ejercicio 9: Procesamiento de cadenas

Objetivo (E)
Implementar el cifrado de César (el cifrado por desplazamiento). Utilice el código de
P22_JS_Tipos_de_datos_primitivos_Ejercicio_1.html
1. En el código de César, cada carácter se desplaza en un cierto desplazamiento.
2. Considere charCodeAt(), fromCharCode() y %
3. Utilice un bucle for, por ejemplo for (var i = 0; i < n; i++) {...}
4. Pruebe el cifrado del alfabeto con diferentes desplazamientos

Objetivo (M)
Escriba un algoritmo, reverse(string), para invertir las letras en una cadena. Por ejemplo,
“Teléfono” se convertiría en “enohpeleT”. Imprima el resultado dentro de un<p> etiqueta.

Objetivo (H)
Escriba un algoritmo para invertir palabras dentro de un párrafo. Por ejemplo, “El rápido zorro
marrón” se convierte en “El rápido zorro marrón”. Imprima el resultado dentro de un<p> etiqueta.
Sugerencia: Una solución reutiliza reverse(string), otra es mucho más trivial pero no tan
inteligente.

Ejercicio 10: Tipos de referencia

Objetivo (E)
Familiarícese con las operaciones de matriz. Utilice el código de
P23_JS_Tipos_de_referencia_Ejercicio_1.html
1. Escribe la función insertAfter
2. Toma una matriz, un elemento y una lista de elementos nuevos.
3. Los nuevos elementos se insertan después del elemento dado.
4. Si el elemento dado no aparece, la matriz no cambia

Objetivo (M)
Implementa una función shuffle(array) que baraja una baraja de cartas. Para simplificar, utilice la
siguiente matriz:
var deck = [“AsDePicas”, “JotaDeCorazones”, “ReinaDeDiamantes”,
“10DeCorazones”, “7DePicas”, “3DeCorazones”, “SeisDeDiamantes”];

Objetivo (H)
Escriba un algoritmo, median(array), que calcule el valor mediano de una matriz de números
enteros.

PÁGINA9 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Sugerencia: Javascript proporciona una clasificación incorporada para matrices, consulte la

función sort().

Ejercicio 11: Enunciados

Objetivo (E)
Utilice un bucle for .. in .. para copiar las propiedades de un objeto. Utilice el código de
P25_JS_Statements_Exercise_1.html
1. Crear un objeto literal
2. Añadir algunas propiedades (objeto como un “mapa”)
3. Utilice un bucle for .. in .. para copiar las propiedades en una matriz
4. Salida de la matriz

PÁGINA10 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (M)
En Javascript es importante hacer la distinción entre los operadores ===, !== y ==, !=
respectivamente. Los operadores ==, != realizarán comparaciones solo después de las
conversiones de tipos y, por lo tanto, no son confiables. Alternativamente, los operadores === y !
== no se comparan con ninguna conversión de tipo.

Sabiendo esto, completa la siguiente tabla.

Variables Evaluación Verdadero o falso

`` == 0

``=== 0

0 == ``

verdadero == `36`

36 == verdadero

36 === 'verdadero'

“abc'”=== nueva
cadena(“abc”)

“abc'”== nueva
cadena(“abc”)

“2” !== 2
a == b
var a = [1,2,3], var b = [1,2,3]

a === b
var a = [1,2,3], var b = [1,2,3]

PÁGINA11 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (H)
Reescribe la siguiente función, foo(a, b, c) como bar(a, b, c) usando solo la operación condicional.
Prueba tus dos funciones usando la consola.
función foo(a, b, c) { si ( a ) {
si (!a && b) {
devuelve 0;
} demás {
devuelve 1;
}
} de lo contrario si ( b || c) {
devolver 2;
} demás {
devolver 3;
}
}

Ejercicio 12: Variables y alcance - Cierre

Objetivo (E)
Familiarícese con el concepto de “cierre”. Utilice el código de
P26_JS_Ejercicio_de_alcance_de_variables_1.html
1. Escribe una función (externa) que devuelva una función (interna)
2. La función externa toma un argumento, digamos n
3. La función interna devuelta también acepta argumentos, digamos x
4. La función interna devuelve x+n
5. Defina varios de esos “sumadores” y pruébelos

PÁGINA12 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (M)
Uno de los métodos más sencillos para enseñar cómo un lenguaje de programación maneja los
parámetros de una función es escribir la función swap(a,b). Dados los dos objetos siguientes,
escriba una función que intercambie los objetos.
var batman = { nombre: "Bruce Wayne"};
var robin = { nombre: "Dick Grayson"};
función swap(.....) {
}
intercambio( );
[Link]([Link]); // ¡Dick Grayson!
[Link]([Link]); // ¡Bruce Wayne!

Sugerencia: El enfoque normal de utilizar una variable temporal no funciona (o el enfoque XOR
más inteligente), ¿por qué?

PÁGINA13 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (H)

El siguiente código está lleno de errores. El programador original sólo

desea mostrar el jueves después de hacer clic en la pregunta, pero
está teniendo un mal día. Ayude al programador arreglando el código
con errores.

<div id=content>¿Que día es hoy?</div>

<script>
var objeto = {
elementodom:
[Link]("contenido"),
díaActual: "Jueves",
foo : función () {
[Link]("clic", función () {
[Link](este.díaactual);
[Link] = [Link];
});
}
};
[Link]();
</script>
Pista: ¡Un poco de esto, un poco de aquello!

Ejercicio 13: Manejo de errores de JavaScript

Objetivo (E)
Familiarícese con las situaciones de error más comunes. Utilice el código de
Ejercicio 1 de manejo de errores P27_JS.html

1. Reemplace '___' por el código adecuado para manejar las situaciones de error
2. Reemplace '[Link]' por un miembro más descriptivo del objeto de error
3. Escribe código equivalente usando instanceof

Objetivo (VH)
Las excepciones son una excelente forma de fallar o tener éxito con elegancia cuando se produce
un error. Sin embargo, durante el desarrollo, las excepciones pueden ocultar problemas

PÁGINA14 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

imprevistos y es posible que desee detener la ejecución cada vez que se lanza una excepción.
Una solución a este problema (los programadores del lenguaje estilo C estarán familiarizados con
este enfoque) es rodear una bandera con una declaración if antes de cada bloque try/catch:
function foo() {
if (debug) { doSomething(); // lanza // la ejecución se
detiene } else { try {
doSomething(); // lanza } catch (...) {
// continuar }
}

Este enfoque tiene algunas desventajas: código adicional, más rutas de control, posibles
problemas de rendimiento (especialmente dentro de bucles). Otro enfoque es eliminar o insertar
los bloques try/catch dinámicamente en tiempo de ejecución.
Escriba una función que, dado cualquier objeto, reemplace sus funciones miembro que no tengan
bloques try/catch por otras que sí los tengan. Es decir, la función recién creada “envolverá” la
función actual dentro de un bloque try/catch.
Sugerencia: La función apply() de Javascript será útil.

Ejercicio 14: Manejo de eventos en JavaScript

Objetivo (E)
Familiarícese con la adición de controladores de eventos a los botones pulsadores. Utilice el
código de P29_JS_Events_Exercise_1.html
1. Agregue un controlador de eventos HTML al primer botón
2. Agregue un controlador de eventos DOM de nivel 0 al segundo botón
3. Agregue un detector de eventos DOM de nivel 2 al tercer botón
4. La reacción fácil es enviar una ventana emergente de alerta o cambiar “innerHTML”

PÁGINA15 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Objetivo (M)
La siguiente tabla muestra el estado actual del Campeonato de Pilotos de Fórmula 1. Duplique la
tabla y luego agregue controladores de eventos para cambiar los colores del fondo y el texto de
cada controlador. Si un usuario hace clic en una fila de la tabla, los colores deben imitar los
colores del equipo de ese conductor.
Sin embargo, si el usuario hace clic entre el relleno (no en una fila), la tabla completa debería
cambiar a un color diferente, como gris. Se muestran ejemplos:

El usuario hizo clic en el relleno”:

Posición Conductor Agujas

1 Fernando Alonso 129

2 Marco Webber 116

3 Sebastián Vettel 100

4 Lewis Hamilton 92

5 Kimi Räikkönen 83
El usuario ha hecho clic en todas las filas”:

PÁGINA16 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Nota: ¡El color de fondo de la tabla no cambia cuando un usuario selecciona una fila!

Objetivo (H)
Modifique su solución al ejercicio anterior: agregue manejo de eventos para que la tabla pueda
“arrastrarse” por la pantalla a una nueva ubicación. La funcionalidad original debe seguir siendo
la misma.

Ejercicio 15: Herencia

Objetivo (E)
Construya una jerarquía de herencia para formas, círculos y cuadrados. Utilice el código de
P30_JS_OOP_Exercise_1
1. Crear funciones constructoras para formas, círculos y cuadrados.
2. Cada forma tiene coordenadas centrales.
3. Además, un círculo tiene un radio y un cuadrado tiene una longitud de lado.
4. Encadenar los prototipos
5. Agregue una función para generar información sobre cada forma
6. Agregue más funciones para generar el área de círculos y cuadrados.

Objetivo (M)
El patrón Factory es un patrón de diseño popular que proporciona al usuario una interfaz genérica
para crear objetos "similares". A continuación se muestra un ejemplo del patrón de fábrica al que
le falta el cuerpo principal. Complete el cuerpo principal y asegúrese de que el código de prueba
funcione.
función Coche(opciones) {
[Link] = [Link] || 4;

PÁGINA17 DE
19
 HTML5, CSS, JAVASCRIPT CEREMONIAS

Este motor = [Link] || "4 cilindros";

Este color = [Link] || "marrón";
}

función Camión(opciones) {
[Link] = [Link] || "8 pies";

[Link] = [Link] || "v8";

[Link] = [Link] || "4x4"; }

función VehicleFactory {} [Link]

...........................// implementar

var carFactory = nueva VehicleFactory();

var car = [Link]({ tipoDeVehículo:
"coche", color: "rojo", motor: "v8"
});

[Link](car instanciade Car); // verdadero

[Link](car);
var movingTruck =
[Link]({ tipoDeVehículo:
"Camión", motor: "v12"
});

[Link](movingTruck instancia de camión); //

verdadero

Objetivo (H)
Modifica tu solución al ejercicio anterior. En lugar de un patrón de fábrica puro, modifique
VehicleFactory() como un patrón singleton. En otras palabras, restrinja la instanciación de
VehicleFactory() a un solo objeto.

PÁGINA18 DE
19