Scribd
Cargar
14 vistas2 páginas

Practico 02 - Javascript Parte I

El documento presenta una serie de ejercicios prácticos de JavaScript, organizados en niveles básico, intermedio y avanzado, que abarcan desde la integración de JavaScript en proyectos web hasta la creación de aplicaciones interactivas como calculadoras y juegos. Se incluyen tareas como la manipulación del DOM, la gestión de eventos y la implementación de formularios y listas de tareas. Además, se sugieren buenas prácticas como el uso de Event Listeners y la creación de scripts reutilizables.

Cargado por

Pedro Petersen
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
14 vistas2 páginas

Practico 02 - Javascript Parte I

El documento presenta una serie de ejercicios prácticos de JavaScript, organizados en niveles básico, intermedio y avanzado, que abarcan desde la integración de JavaScript en proyectos web hasta la creación de aplicaciones interactivas como calculadoras y juegos. Se incluyen tareas como la manipulación del DOM, la gestión de eventos y la implementación de formularios y listas de tareas. Además, se sugieren buenas prácticas como el uso de Event Listeners y la creación de scripts reutilizables.

Cargado por

Pedro Petersen
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

Práctico 2 - 2019-2022

Javascript - Parte I
1. ¿Cómo se integra JS a un proyecto Web? ¿Qué función tiene?
2. ¿Qué es el DOM? ¿Para qué nos sirve en JS?
3. ¿Qué es un evento en JS?

BÁSICO

1. Muestre una alerta al cargar una página


● Que sea un texto fijo
● Que sean dos variables nombre y apellido concatenadas, mostrando en el
mensaje: Nombre: (valor_nombre) Apellido: (valor_apellido)
2. Escribir un HTML con tres divs vacíos (sin contenido) y llenarlo con un texto desde
Javascript al cargar la pagina. Reflexione entre las diferencias en hacerlo en HTML o en
Javascript.

a. ¿Es posible desde JS insertar diferentes párrafos adentro del div?

3. Mostrar el mismo mensaje del punto uno, pero haciendo click desde un botón

4. Crear un html con 3 botones de distinto color. Agregar la funcionalidad para que se
muestre en un párrafo un mensaje que avise cuál de los botones fue el último cliqueado.
EN ESTE NIVEL ESTA EL CAPTCHA DEL TPE1 (es decir, recomendamos hacer los
anteriores primero)

INTERMEDIO

5. Crear un formulario con Nombre, Apellido y un botón Enviar. Al presionar Enviar debe
mostrar el nombre y apellido como un título dentro de la página.

6. Cree una “Lista de Tareas” donde cada tarea se agrega desde un input de texto.

7. Crear un botón que al hacer click cambie el color de fondo de un div y agregue borde de
3px rojo.

CodePen Ayuda: https://codepen.io/webUnicen/pen/pBbJGg

AVANZADO

8. Crear una html que tenga un contenedor (div) con información y un botón. Cree una
función Javascript que oculte o muestre el div que contiene la información.
Práctico 2 - 2019-2022

9. Implementar una calculadora que permita ingresar dos operandos mediante dos inputs y
permita realizar las operaciones básicas (suma, resta, división, multiplicación) elegidas
desde una lista desplegable (select).

10. Crear una página en blanco, donde el usuario pueda clickear en cualquier lado y
automáticamente se dibuje un DIV de color en esa posición exacta. Además, si el
usuario hace click en uno de los divs creados, se debe mostrar un mensaje de alerta
diciendo que “en esa posición ya existe un elemento”.

nota: esperar clase de funciones anónimas y eventos

11. Extender el ejercicio 6 para que podamos generar una tarjeta personal vía web.
Debemos poder agregar Nombre, Apellido, Profesión, Email, Teléfono, Dirección. Una
vez enviados los datos, estos deben aparecer en la página con apariencia y alineación
de una tarjeta personal.

12. Hacer una ruleta básica donde salga un número al azar entre 0 y 36. El usuario debe
apostar por un único número mediante un input. Luego de pulsar “Jugar!” debe mostrar
el número que salió, el número apostado y si ganó o perdió.

Ejercicios Adicionales
INTERMEDIO

13. Si no utilizó Event Listener, reescriba los ejercicios utilizando buenas prácticas
(.addEventListener ). ¿Qué ventajas tiene desacoplar o quitar todo el código JS del
código HTML?

14. Generar un script reutilizable que permita agrandar el tamaño de una imagen cuando
posamos el mouse encima.

AVANZADO

15. Extender el ejercicio 10 para que se puedan elegir con distintos botones distintos estilos
de diseño de nuestra tarjeta personal.

16. Hacer un juego donde se pueda mostrar en una página una imagen de manera aleatoria
y se debe adivinar a que se refiere la imagen. Pueden ser 5 imágenes de animales
distintos y mediante un input el usuario debe ingresar el nombre del animal. Se debe
mostrar si acertó o no.

Para convertir una cadena de texto a minúscula se puede ayudar del siguiente
código

let cadena = "MAYUSCULA";


cadena = cadena.toLowerCase();
console.log(cadena);

También podría gustarte