Objetivo y duración
El objetivo de esta práctica es aprender a programar con JavaScript a un nivel básico.
Esta práctica se recomienda realizarla por parejas. El trabajo en parejas (pair-programming) es una técnica muy popular con varias ventajas:
- Ayuda a mantener la concentración.
- Es una excelente oportunidad para aprender y/o enseñar.
- Puedes conocer personas que también están aprendiendo!
La idea del trabajo en parejas es que haya una persona que dicta y otra que escribe. Idealmente la persona que dicta sabe cómo hacer el ejercicio y la persona que escribe va aprendiendo y ayuda a corregir.
Duración: 9 h
Entrega y presentación
La entrega será en formato ZIP. Leer Entrega y presentación de prácticas.
Actividades
Realizar las siguientes actividades. Cada actividad debe contar con un comentario donde este escrito el enunciado de la actividad.
If and else
Crear un programa donde se introduzcan los tres ángulos internos de un triángulo y se determine si el triángulo es válido o no. Un triángulo será valido si la suma de sus 3 ángulos internos suman exactamente 180.
(Opcional) If and else
Determinar si una palabra empieza con mayúscula o no.
If and else
Determinar si un año dado es bisiesto.
(Opcional) Bucles
Mostrar todos los números de 1 a N aumentando de 2 en 2 donde N lo ingresa el usuario en un prompt. Por ejemplo:
1
2
3
4
Introduce un número:
> 4
1
3
(Opcional) Bucles
Mostrar todos los números de N a 1 disminuyendo de 1 en 1 donde N lo ingresa el usuario en un prompt.
1
2
3
4
5
Introduce un número:
> 4
3
2
1
Bucles
Escribir utilizando console.log() la tabla de multiplicar que te indique el usuario en un prompt. Por ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
Introduce un número para obtener su tabla de multiplicar:
> 9
9 x 1 = 9
9 x 2 = 18
9 x 3 = 27
9 x 4 = 36
9 x 5 = 45
9 x 6 = 54
9 x 7 = 63
9 x 8 = 72
9 x 9 = 81
9 x 10 = 90
(Opcional) Bucles
Pedir al usuario que ingrese un número en un prompt, hacer la suma de todos los dígitos. Deberás validar que el número ingresado no contenga letras.
Bucles
Realizar el factorial de los primeros N números.
(Opcional) Bucles
Encontrar todos los divisores de un número.
(Opcional) Bucles
Determinar si un número ingresado por el usuario en un loop infinito es primo o no. Deberás validar que el número ingresado sea mayor o igual a dos.
(Opcional) Bucles
Crear un programa que determine si un número es perfecto o no, (se dice que un número es perfecto si el número es igual a sus divisores, ejemplos 6 = 1 + 2 + 3)
Bucles
Generar los primeros N números primos, donde N es ingresado por el usuario.
Bucles
Generar los primeros N números perfectos.
Bucles anidados
Dibujar los siguientes patrones ocupando document.write(), para rellenar los espacios vacíos se debe imprimir un espacio vacío.
Cuadrado lleno:
1
2
3
4
5
*****
*****
*****
*****
*****
Cuadrado hueco:
1
2
3
4
5
*****
* *
* *
* *
*****
Tablero de Ajedrez:
1
2
3
4
5
6
7
8
⬛⬜⬛⬜⬛⬜⬛⬜
⬜⬛⬜⬛⬜⬛⬜⬛
⬛⬜⬛⬜⬛⬜⬛⬜
⬜⬛⬜⬛⬜⬛⬜⬛
⬛⬜⬛⬜⬛⬜⬛⬜
⬜⬛⬜⬛⬜⬛⬜⬛
⬛⬜⬛⬜⬛⬜⬛⬜
⬜⬛⬜⬛⬜⬛⬜⬛
(Opcional) Bucles anidados
Piramide Izquierda:
1
2
3
4
5
*
**
***
****
*****
Pirámide centrada:
1
2
3
4
5
*
***
*****
*******
*********
Pirámide invertida:
1
2
3
4
5
6
*********
*******
*****
***
*
Diamante:
1
2
3
4
5
6
7
8
9
*
***
*****
*******
*********
*******
*****
***
*
(Opcional) Funciones
Crear una función autoejecutable que muestre “muuu” en pantalla
Arrays
Dado el array = [1,2,3,4,5,6]
- Iterar por todos los elementos dentro de un array utilizando while y mostrarlos en pantalla.
- Iterar por todos los elementos dentro de un array utilizando for y mostrarlos en pantalla.
- Iterar por todos los elementos dentro de un array utilizando .forEach y mostrarlos en pantalla.
- Mostrar todos los elementos dentro de un array sumándole uno a cada uno.
- Generar una copia de un array pero con todos los elementos incrementado en 1.
- Calcular el promedio
Arrays
Crear un array vacío, luego generar 20 números enteros al azar y guardarlos en un array.
Arrays
Crear un array vacío, luego generar N números al azar y guardarlos en un array, N es introducido por el usuario a través de un prompt.
Arrays
Dado un array que contiene [“azul”, “amarillo”, “rojo”, “verde”, “café”, “rosa”] determinar si un color introducido por el usuario a través de un prompt se encuentra dentro del array o no.
Strings y arrays
El usuario ingrese un string con varias palabras separadas por coma en un popup y se deben convertir en un array, (el usuario ingresa: “1,2,3,4,5” y se convierte en [1,2,3,4,5])
(Opcional) Strings y arrays
Convertir un array hardcodeado dentro del código en un string (existe un método en javascript para hacerlo).
Unión, intersección y conteo
Existen dos arrays, cada uno con 5 palabras, generar un nuevo array con la intersección de ambos elementos. (Ejemplo: [1,2,3] unión [1,2,4] = [1,2]
(Opcional) Unión, intersección y conteo
Existen dos arrays, cada uno con 5 palabras, generar un nuevo array con la unión de ambos elementos, (Ejemplo: [1,2,3] unión [1,2,4] = [1,1,2,2,3,4]
(Opcional) Unión, intersección y conteo
El usuario ingresa dos conjuntos de números separados por coma, el programa debe determinar si ambos conjuntos tienen la misma cantidad de números.
Unión, intersección y conteo
El usuario ingresa dos conjuntos de números separados por coma, si ambos conjuntos tienen la misma cantidad de elementos mostrar un array que contenga la suma de cada elemento. (Ejemplo: [1,2,3] + [2,3,4] = [3,5,7])
(Opcional) Filtrando datos en array
Crear una función que reciba un array con números y devuelva un nuevo array con solo los números pares. Pista: utilizar reduce().
(Opcional) Filtrando datos en array
Crear una función que reciba un array con palabras, crear un nuevo array que contenga solo las palabras que empiezan con una vocal.
Ordenamiento
Crear un método que permite intercambiar las posiciones de dos elementos de un array en base a sus índices. Por ejemplo:
1
2
3
arr = [1,2,3]
swap(arr, 0, 1)
console.log(arr) // [2,1,3]
Ordenamiento
Realizar el mismo ejercicio anterior pero que en esta ocasión devuelva un array nuevo con los datos cambiados.
1
2
3
4
arr = [1,2,3]
new_arr = swap(arr, 0, 1)
console.log(arr) // [1,2,3]
console.log(new_arr) // [2,1,3]
Ordenamiento
Crear una función que reciba un array y que cree uno nuevo con todos los elementos ordenados de menor a mayor (sin utilizar el método .sort()).
(Opcional) Ordenamiento
Crear una función que reciba un array y que cree uno nuevo con todos los elementos ordenados de mayor a menor.
Arrays de arrays
Crear una función que permite aplanar un array dado. Por ejemplo:
const arr = [[1,2,3],[4,5,6],[7,8,9]];
console.log(aplanar(arr)); // [1,2,3,4,5,6,7,8,9]
Arrays de arrays
Crear una función que divida un array en dos partes con la misma cantidad de elementos (o una diferencia de máximo un elemento) y devuelva un array que contenga al grupo1 y al grupo2
1
2
const arr = [1,2,3,4,5,6,7,8];
console.log(split(arr)); // [[1,2,3,4], [5,6,7,8]]
Matrices
Recorrer un array de arrays para mostrarlo como una matriz, ejemplo [[1,1],[2,2]] se mostraría de la siguiente forma:
| 1 | 1 |
| 2 | 2 |
Matrices
Sumar [[1,1],[2,2]] con [[3,1],[3,2]].
Matrices
Contar la cantidad de elementos dentro de una matriz.
Matrices
Multiplicar una matriz por un escalar, si la matriz inicial es [[1,2,3],[4,5,6]], al multiplicarla por dos deberíamos obtener [[2,4,6],[8,10,12]].
(Opcional) Matrices
Encontrar el número mayor en una matriz.
(Opcional) Matrices
Determinar si un determinado número se encuentra dentro de una matriz o no.
Matrices
Devolver la suma de todos los elementos en la diagonal de la matriz.
(Opcional) Matrices
Mostrar la transpuesta de una matriz, es decir, dado:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Debería quedar como:
| 1 | 4 | 7 |
| 2 | 5 | 8 |
| 3 | 6 | 9 |
(Opcional) Funciones y arrays
Crear una función que devuelva el promedio de un array, en caso de que el array esté vacío debe devolver cero.
Funciones y arrays
Crear una función que calcule el promedio dentro de un array pero dentro de un rango, esta función recibe el array, un punto de partida y uno de termino y devuelve el promedio de los valores dentro del rango especificado.
Objetos
- Crear un objeto literal persona con nombre y edad y una método que determine si es mayor de edad o no.
- Crear una función constructora que permita crear objetos del tipo personas pasándole solo un nombre y edad, agregar el método.
- Crear un array que contenga varios objetos persona.
- Crear una función que reciba el array y devuelva la edad promedio del grupo de personas.
DOM
Utilizando getElementById e innerHTML transformar el emoji en un smiley.
1
<p id="demo"> :( </p>
DOM
Utilizando getElementById() e innerHTML transformar el emoji en un smiley cuando se haga click en él.
1
<button type="button" id="demo"> :( </button>
DOM
Este ejercicio es el mismo que el anterior.
Sobre el ejercicio anterior haz que solo se transforme el emoji si hacemos click en él.
DOM
Utilizando la instrucción setInterval mostrar la hora exacta y actualizarla cada segundo.
DOM
- Formulario campos: Nombre, Apellidos y edad
- Botón de enviar el formulario: eventos submit
- Mostrar datos por pantalla
- Validación del formulario para que no metan datos vacíos
(Opcional) DOM
Crea un formulario para guardar nombres de personas en el localstorage y muéstralos por pantalla en una lista de html.
(Opcional) DOM
En la lista anterior añade un botón para poder eliminar elementos del localstorage y mostrar la nueva lista de nombres.