Bien, ahora agregemos Javascript a nuestro proyecto web.

1. En nuestro archivo HTML vamos a vincular un fichero/archivo que se llame script.js(Este archivo debemos crearlo previamente).
2. Recuerda que para vincular el fichero debemos hacerlo con la etiqueta script la cual debemos agregarla antes de que cierre la etiqueta body.
3. Dentro del archivo script.js, vamos a declarar las variables nombre y apellido que habiamos declarado en la consola. Pero, esta vez deberemos asignarle el método prompt() para que sea el usuario quien introduzca los datos, nombre y apellido.
4. Mostrar una alerta de bienvenida a nuestra página con el nombre y el apellido del usuario “Bienvenido a nuestra página (nombre+apellido)”

Ver el ejercicio

1. Crea 3 variables numero1,numero2 y resultado.
2. Pidele al usuario que ingrese los valores de las variables numero1 y numero2 mediante un prompt().
3. Asigna a la variable resultado el valor de la suma entre numero1 y numero2.
4. Muestra un alerta con el mensaje “El resultado es: (resultado)”.

Ver el ejercicio

1. Crea 2 variables numero y numerotriple.
2. Pidele al usuario que ingrese el valor del numero a calcular mediante un prompt().
3. Asigna a la variable numerotriple el valor de la multiplicación por 3 del numero ingresado.
4. Muestralo el resultado por consola con el mensaje “El triple de este número es: (xx)”.

Ver el ejercicio

Para este ejercicio deberas googlear un poco. Busca en googlee como podemos saber el largo de los datos de una variable en JS.

1. Declara una variable que se llame texto y asignale el metodo prompt() para que le puedas solicitar al usuario que ingrese un texto.
2. Calcula su largo con lo que investigaste y muestra un alert() que diga “El largo del texto ingresado es: xx

Ver el ejercicio

¿Qué devuelve cada expresión?.

Sin probar en la consola, debes adivinar que devolverá cada una de estas expresiones. ¿True o False?

Primera expresión:

let x = 30 let y = "a" y === "b" || x >= 30

Segunda expresión

let x = 15 let y = 2 !( x == "15" || x === y ) && ! (y !== 2 && x <= y) Ver el ejercicio

Comparando

1. Utiliza la consola para escribir una expresión que compare dos strings y produzca un valor TRUE.
2. Escribí una expresión comparando dos strings que devuelva FALSE.
3. Escribí una expresión que involucre un string y un número y devuelva FALSE.
4. Escribí una expresión que involucre un string y un número y devuelva TRUE

Ver el ejercicio

Mi primer condicional

1. Realizar un algoritmo que pida el nombre de una persona. Si el dato entra vacío, debe pedir nuevamente al usuario que introduzca su nombre (“No ha introducido ningún nombre”).
2. Una vez hecho esto, que se despliegue una alerta de bienvenida con el nombre del usuario.

Ver el ejercicio

Números pares o impares

1. Pedirle al usuario que introduzca 1 numero.
2. Comparar si es par o no, a través de un if/else. Si es par que muestre una alerta indicando que el número es par o en caso contrario que muestre una alerta que es impar.

Ver el ejercicio

Una entrada para tu película favorita.

Números pares o impares

1. Declara una variable que se llame peliculaElegida y asignale el método prompt() para que le puedas solicitar al usuario que ingrese su película favorita de una lista, que tú vas a proporcionar en dicho método.
   Importante: para que puedas enlistar las opciones de películas una debajo de otra, necesitaras el carácter especial (\n ) ó colocar un br para hacer un salto de línea. Sino te queda muy claro cómo usarlo, deberás googlea para ver un ejemplo.
2. Evalúa cada uno de los casos con el condicional switch (utilizaremos este método para practicarlo). En el bloque de código de cada case le diremos que “su ticket ha sido emitido”, pero, lo haremos a través del método document.write() y en su argumento(dentro de los paréntesis) haremos un template literals con el formato HTML del texto y la imagen de la película elegida.

Ver el ejercicio

Adivinando un número

Números pares o impares

1. Crea la variable numeroSecreto y hazlo igual a un entero (Tú eliges el número).
2. Pregúntale al usuario que adivine el numero en un prompt.
3. Si el usuario adivina el numero deberá aparecer un alert diciendo que adivinó el número. (Tienes que hacer la comparación con ( === ) y no te olvides de parsearlo).
4. El algoritmo también debe decir, si numeroSecreto es más alto o más bajo del que dijo el usuario.
5. Por último, si el usuario no adivina el número, deberá aparecer un mensaje diciendo que se equivocó.

Ver el ejercicio

El programa responsable.

Crea un algoritmo utilizando el operador ternario que le pregunte al usuario cuantos tragos a tomado.

1. Si el número de trago es mayor a cero debe emitir una alerta que diga que no puede manejar.
2. Si el usuario indica que no ha tomado nada, entonces decirle que “Nos alegra que seas un conductor responsable”.

Ver el ejercicio

Se le pedirá al usuario 2 números para generar la suma, la resta, la división y la multiplicación entre ellos.

1. Preguntar al usuario que operación quiere realizar antes de que ingrese los dos números a operar.
2. Si el usuario no ingresa ninguna respuesta, automáticamente informarle que deberá ingresar un dato.

Ver el ejercicio

Se va a mostrar por consola

1. Imprimí todos los números entre -20 y 30
2. Imprimí todos los números pares entre 20 y 60
3. Imprimí todos los números impares entre 600 y 666
4. Imprimí todos los números primos entre 1 y 150

Ver el ejercicio

Dada la edad de una persona (entre 1 y 110 años) y su género ('F' para mujeres, 'M' para hombres), indicar si está en edad para jubilarse.

Observación: Las mujeres se jubilan con 60 años o más. Los hombres se jubilan con 65 años o más. Ejemplo: Si ingresa 60 y 'M', debe mostrar como resultado en pantalla “No se jubila”.

Ver el ejercicio

Crear un programa para el ingreso a un sistema. El usuario deberá ingresar una contraseña que deberá coincidir con la que esté guardada en la memoria.

Tiene 3 intentos para acertar: si acierta, se le deberá informar que acertó y que puede ingresar, y dejar de pedírsela, si se equivoca, se le solicitará que la ingrese de nuevo.

Ver el ejercicio

Se le pedirá al usuario un número y una vez que lo tengamos se deberá mostrar en pantalla las tablas de dicho número hasta el 10:

Por ejemplo, si el usuario escribe 5 se deberá generar lo siguiente:

5 x 1 = 5

5 x 2 = 10

5 x 3 = 15

...........

5 x 10 = 50

Ver el ejercicio

Ensalada de frutas

1. Declara un array llamado ensaladaDeFrutas.
2. Usa un bucle For y muestra cada ítem de ensaladaDeFrutas en la consola, con el siguiente mensaje: “Las frutas que hay en la ensalada son:”

Ver el ejercicio

Encontrar el índice de un elemento del Array

1. Crea un array que se llame toDoList con al menos 5 tareas para hacer.
2. A través del método indexOf() encontrar el indice de una de las 5 tareas especificadas en el array.
3. Borrar el item del array toDoList, que ha sido devuelto por el método indexOf().

Ver el ejercicio

Promedio de edad

1. Crear un array edades con al menos 8 edades distintas.
2. Recorrer el array y obtener el promedio de las edades del array.

Ver el ejercicio

Armando una lista de super

1. Crea un array vacio que se llame listaDeSuper.
2. Piensa como le puedes pedir al usuario para que ingrese al menos 5 productos para llenar la lista de super.
3. Muestra por la consola los productos introducidos por el usuario.

Ver el ejercicio

Obteniendo el nombre más largo de un array

1. Declara un array nombres con al menos 6 nombres.
2. Obtén el nombre más largo del array nombres. Tener en cuenta que los "Strings" son listas de caracteres y que las listas tienen un largo (length) que indica su tamaño.

Ver el ejercicio

Declara una función llamada saludo() que muestre una alerta de Bienvenida al visitante al invocarla por la consola.

Ver el ejercicio

Calculando el mayor

1. Declara una función que se llama calculoMayor() y pasale como parámetros (num1,num2)
2. Dentro de la función muestra una alerta que diga cuál de los números ingresados es mayor. En caso de ser iguales, tendrá que indicarlo a través de una alerta también.
3. Invoca la función y llena los argumentos con los números que desees.

Ver el ejercicio

Sistema de facturación

1. Crear una función que se llame facturacion() .
2. La función tiene que recibir como parámetro el monto de un producto , y el medio de pago : C (tarjeta de crédito), E (efectivo) y D (tarjeta de débito). Si el monto del producto es menor a $200 no se aplicará ningún descuento. Si el monto a abonar es entre $200 y $400 se aplicará un descuento del 30% si el medio de pago es efectivo, 20% si se realiza con débito y 10% con tarjeta de crédito. Para montos mayores a $400, el descuento es 40% sin importar el medio de pago.
3. La función deberá retornar el monto final a abonar.

Ver el ejercicio

Creando un método de iteración de array.

1. Crear una función IterarArray() y pasale el parámetro array.
2. Codea dentro de la función la iteración/recorrido de un array y muéstralo por consola.
3. Invoca la función IterarArray() y pasale como argumento 3 arrays distintos.

Ver el ejercicio

Lanzamientos de dados

Vamos a practicar como programar un evento, en esta ocasión haremos uso del más simple de ellos; el evento click.

1. En el archivo HTML crea un botón con el texto tirar dados. Define el atributo onclick="tirarDados()" al botón.
2. En el archivo JS declara una función tirarDados(). Esta se ejecutara cada vez que se haga click en el botón tirar dados.
3. Codea dentro del bloque de la función, el lanzamiento aleatorio a travé de un math.ramdom (pregúntale a san Google como funciona).

Ver el ejercicio

Contador de click

1. Crea un botón en HTML qué diga "clickeame"
2. Crea un función contadorDeClick() y programa que cada vez que se haga click se muestre por la consola el conteo de las veces que se ha realizado click en el botón.

Ver el ejercicio

Mis primeros pasos en Manipulación del DOM.

Ejercicio 1:

1. 1. Abre https://practica-manipulacion-del-dom.netlify.app/ para practicar
2. Mira el textContent del h1 en la consola.
3. Dale al textContent del h1 un nuevo string que diga “Estoy agregando un nuevo texto”.
4. Elegí el primer elemento p y agrégale el siguiente código html en su interior con la etiqueta span : Estoy aprendiendo a manipular el DOM
5. Mira por la consola el innerHTML del segundo ul

Ejercicio 2:

Manipulando el estilo de página

1. Usando la propiedad style del elemento en javascript dale a ese h1 color de fondo amarillo.
2. Crea un selector .subtitulos en tu archivo style.css y dale las propiedad CSS:
   color: teal;
   font-size: 2rem;
   font-family: Arial, Helvetica, sans-serif;
   Luego agrégale a los h2 la clase .subtitulos con la propiedad JS classList.
3. Obtén los elementos con la clase .estilo-letras y remueve la misma con la propiedad JS classList que corresponda.

Ver el ejercicio

Manipulando el DOM de un botón a partir de un evento.

Nivel junior

Spoiler alert: Sigue las instrucciones paso a paso. No te adelantes, de lo contrario correrás el riesgo de no encontrar la solución o que se te dificulte las mismas.

1. Crea un botón en HTML y coloca como texto Activar. Luego en tu archivo CSS dale un background-color: red; al botón.
2. Agrega al botón los siguientes eventos en JS: click, mouseenter, mouseleave. (Recuerda obtener el elemento para luego manipularlo con cada uno de los eventos que tienes que crear).
3. En las funciones vinculadas al evento programa lo siguiente.
   • Evento click : Programa que cuando se haga click, el texto del botón, se cambie por el string “Desactivado”.
   • Evento mouseenter : Cuando entre el cursor al botón, este cambie de color a verde.
   • Evento mouseleave : Cuando se salga el cursor del botón, que vuelva al color que predeterminamos en CSS

Ver el ejercicio

Mostrando los datos introducidos en un formulario al usuario.

1. Crea 3 campos(input) en HTML, Usuario,Nombre, email. (No olvides darle un id a cada uno de los campos creados)
2. En JS, obtén cada uno de los elementos input que creaste, mediante el método querySelector().
3. Manipula los elementos para obtener su valor con la propiedad JS value y muestra esos datos al Usuario con un alert que le diga:
   “Estos fueron los datos ingresados
   Usuario: Pepito123
   Nombre: Pepito lavalle
   Mail: pepito12@gmail.com”

Ver el ejercicio

Creando y consultando un Objeto

Crea un objeto con el nombre toDoList debería tener las siguientes propiedades y valores:

• tipo de tarea: un string que diga "Compras" (ojo con los espacios en el nombre de la propiedad tienes que poner entre comillas si tiene espacios)
• dia: un string que indique el día a realizar la tarea.
• productos: un array con los nombres de los productos.
• cantidad de productos: un número que indica la cantidad de productos de las compras. (Recuerda los espacios en el nombre de la propiedad)
• estado: "pendiente"
• notificacion: un método(una función) que haga una alerta con el siguiente mensaje "Esta tarea tiene una prioridad urgente!".

Ahora desde la consola extrae estos valores de las siguientes formas:

1. El dia de la compra usando dot notation.
2. El tipo de tarea usando bracket notation.
3. Extrae la cantidad de productos usando bracket notation.
4. Ejecuta el método (función) de la propiedad notificación (tienes que extraerlo del objeto y recuerda que es una función).

Ver el ejercicio

Consultando valores

Muchas veces vamos a tener estructuras más complejas de objetos y nosotros vamos a tener que acordarnos de todos los conceptos que hemos vimos hasta ahora.

Copia y pega esto en tu archivo JS

const superHeroes ={
"squadName" : "Super Hero Squad", "homeTown" : "Metro City", "formed" : 2016,
"secretBase" : "Super tower", "active" : true,
"members" : [
{
"name" : "Molecule Man", "age" : 29,
"secretIdentity" : "Dan Jukes", "powers" : [
"Radiation resistance", "Turning tiny", "Radiation blast"
]
},
{
"name" : "Madame Uppercut", "age" : 39,
"secretIdentity" : "Jane Wilson", "powers" : [
"Million tonne punch", "Damage resistance", "Superhuman reflexes"
]
}
]
}

Consultemos por consola los siguientes valores:

1. Consulta el valor ("Super Hero Squad") de la propiedad squadName.
2. Consulta el valor que dice "Madame Uppercut" (ayuda: 3. objeto- propiedad-arreglo-propiedad).
3. Consulta el valor que dice "Superhuman reflexes".
4. Consulta el valor "39" de la propiedad age de Madame Uppercut.

Ver el ejercicio

Manipulemos un poco el DOM con estos datos

1. Descarga el proyecto Ejercicios - Clase 16 – Recursos que se encuentra en la carpeta de ejercitaciones.
2. Crea un evento click al botón “Cargar superHeroes”. Cuando se haga click sobre el botón, debemos mostrar en la pantalla los valores del objeto, que correspondan a los items de la imagen.

Utiliza el objeto del ejercicio anterior y crea la información del tercer héroe, que se muestra en la interfaz. El héroe se llama Eternal flame.

SUPER HERO

Cargar super Hereos para iniciar
MOLECULA MAN

Identidad secreta:

Edad:

Superpoderes:

MADAM UPPERCUT

Identidad secreta:

Edad:

Superpoderes:

ETERNAL FLAME

Identidad secreta:

Edad:

Superpoderes:

Ver el ejercicio

Ejercitación - Fetch

Vamos a refactorizar el ejercicio 2, de la clase anterior. Es decir, en vez de consumir los datos de los super héroes desde el objeto,vamos a consumirlo desde una petición AJAX a través del siguiente https://mdn.github.io/learningarea/javascript/oojs/json/superheroes.json

Ver el ejercicio

1. Crea una función que se llame peticionSuperHeroes() y dentro de ella coloca la petición AJAX con el método fetch().
2. En la función que ya tienes creada para mostrar los super Heroes. Pasa como parámetro el nombre superHeroes.
3. En el segundo then() de la función peticionSuperHeroes(). Llama a la función mostrar superHeroes y pásale como argumento la respuesta que devuelve la petición. Ejemplo: mostrarSuperHeroes(respuesta)
4. Refactorea el evento del botón “Cargar superHeroes” y vinculale la función peticionSuperHeroes()

¡Listo! Ya has consumido tu primera API.