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

Crea una ventana emergente que muestre tu nombre, el idioma del navegador y la URL actual de la página.

Ver el ejercicio

Crea una página que permita al usuario avanzar o retroceder en el historial utilizando los métodos history.back() y history.forward().

Ver el ejercicio

Abre una ventana nueva que muestre el tipo de navegador y la plataforma del sistema operativo.

Ver el ejercicio

Crea una página que abra una nueva ventana con la web de tu elección después de 5 segundos.

Ver el ejercicio

Utilizando document.write() dentro de una ventana abierta con open(), genera una tabla con, al menos, 3 filas y 3 columnas que muestre datos básicos del navegador y la ubicación del usuario.

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. Escribe una expresión comparando dos strings que devuelva FALSE.
3. Escribe una expresión que involucre un string y un número y devuelva FALSE.
4. Escribe 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 o usar un texto preformateado. Si no te queda muy claro cómo usarlo, deberás googlear 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 innerHTML escogiendo el id 'pelicula'.

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 ha bebido.

1. Si el número de tragos es mayor a cero debe emitir una alerta que diga que no puede conducir.
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 válida, informarle que no lo es.

Ver el ejercicio

Se va a mostrar por consola

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

Ver el ejercicio

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

Observación: Supongamos que 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 consola 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

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

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

1. Crea una función IterarArray() y pasale el parámetro array.
2. Programa 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. Programa dentro del bloque de la función, el lanzamiento aleatorio a través de un math.ramdom (pregúntale a Google como funciona).

Ver el ejercicio

1. Crea un botón en HTML qué diga "clickeame"
2. Crea una 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.

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. Elige 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

Ver el ejercicio

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

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

Ejercicio experto!!!

1. Crea una función en JavaScript llamada actReloj() para mostrar la hora actual en formato HH:MM:SS.
2. Usa el objeto Date() para obtener las horas, minutos y segundos. Asegúrate de que el formato tenga dos dígitos (ej. 08:05:09).
3. Construye una cadena HTML con el formato de la hora y actualízala en un div con el id reloj usando innerHTML.
4. Configura un temporizador para llamar a la función cada segundo (1000ms) con setInterval().
5. Asegúrate de que el reloj se inicie cuando la página cargue, usando el evento onload.

Ver el ejercicio

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

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