Curso de ES6

  1. Introducción al Curso de Javascript
  2. console.log
  3. Comentarios
  4. Variables
  5. Operadores
  6. Estructuras condicionales
  7. Bucle for
  8. Bucle while
  9. Break! - Gran día de repaso
  10. funciones
  11. Arrow functions
  12. Métodos para trabajo con cadenas
  13. Números aleatorios
  14. location.href
  15. Colección de ejercicios
  16. DOM
  17. Efecto Parallax
  18. innerHTML
  19. Propiedad style
  20. Cambiar atributo src
  21. Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase
  22. Create Element
  23. Arrays
  24. Ejercicios avanzados
  25. LocalStorage
  26. Deconstrucción
  27. fetch
  28. Import, export
  29. Modernizr

Introducción al Curso de Javascript

JavaScript es seguramente el primer lenguaje de programación que deberías aprender.

De hecho, teniendo en cuenta las posibilidades de este lenguaje y su grado implantación en el mercado, es seguro que siendo un experto única y exclusivamente en JavaScript (y en alguna de sus librerías más importantes, como React) podrás optar a un trabajo cualificado bien remunerado, o lo que es mejor, podrás crear cualquier solución tecnológica que desees.

¿Qué vas a aprender con este curso de JavaScript?

En este curso te enseño los fundamentos de este lenguaje de programación y cómo aplicarlos en el desarrollo de páginas web. Entre los ejercicios que hay en este curso, tenemos:

Después de dominar los conceptos explicados en este curso, podrás hacer con éxito infinidad de aplicaciones. En este enlace tienes algunas propuestas y ejemplos de aplicaciones creadas con Javascript por algunos de mis alumnos.

Lenguajes de guión (script)

Los lenguajes scripts son lenguajes que no necesitan ser compilados. En el caso de Javascript, el navegador es capaz de interpretar el código fuente y ejecutarlo.

Sublime text

Este es el editor de código que usaremos para programar.

Consulta mi curso de sublime Text.

Console.log

<script>
	console.log("Hola");
</script>

Comentarios

<script>
	/*
		Comentario 
		multilínea
	*/

	//Comentario de una sola línea
</script>

Variables

Son zonas de la memoria del ordenador identificadas por un nombre y capaces de almacenar información que no puede variar durante la ejecución del programa.

Variables de texto

<script>
	let texto="Soy una cadena";
	console.log(texto);
</script>
Variables de texto
<script>
	let texto="Soy una cadena";

	console.log("texto");
	console.log(texto);
</script>
Variables de texto 2

Variables numéricas

<script>
	let i = 5;
	let j = 3;

	console.log(i+j);
	console.log(i, j);
</script>
Variables numéricas

Ejercicio

Intercambiar el contenido de dos variables

let a = 5;
let b = 7;
... aqui hay que poner codigo
console.log(a); //Debería mostrar 7
console.log(b); //Debería mostrar 5

Conversión de tipos

<script type="text/javascript">
	let i = 5;
	let j = 3;

	console.log("" + i + j);
</script>
Conversión de tipos

Constantes

<script>
	const pi = 3.14159;	
	console.log(pi);
	
	//La siguiente línea da error
	pi = 5;

</script>
Ver error del ejemplo de constantes

Operadores

Operador de concatenación

<script type="text/javascript">
	console.log("texto1 " + "texto2 " + "texto3" );
</script>

Operadores aritméticos

<script type="text/javascript">
	console.log("adición ", 7+2);
	console.log("sustracción ", 7-2);
	console.log("multiplicación ", 7*2);
	console.log("división ", 7/2);
	console.log("resto ", 7%2);
</script>
Operadores aritméticos

Ejercicios con operadores aritméticos

  1. Escribir un programa que calcule el número de segundos que existen en un día. Para ello debemos multiplicar los segundos de un minuto, por los minutos de una hora, por las horas de un día. Como todo el mundo sabe, un día tiene 86400 segundos.
  2. Hacer un conversor de euros a dólares. Tendremos una variable llamada "euros" en la que el valor estará inicializado con valor 7. Debemos calcular ese valor en dólares. Supondremos que un euro son dos dólares
  3. El IVA para ciertos artículos es del 21%. Realiza un programa que a partir de una variable precio inicializada con valor 100, calcule el precio con IVA.
  4. Realiza un programa que a partir de los valores ancho=4 y alto=7, calcule el área de un rectángulo.
  5. Hacer un conversor de grados centígrados a grados Fahrenheit. Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Fahrenheit.
  6. Vamos a mandar al usuario la caja de sus sueños. Para ello, partiremos de los siguientes valores:
    let nombre = "Juan";
    let material = "madera";
    let dimensiones = "grande";
    let comentario = "Que sea bonita, pero de una belleza estraña, indomita"
    y los concatenaremos para obtener por consola el siguiente mensaje:
    "[nombre] ha pedido una caja de [material] con unas dimensiones [dimensiones]. [comentario].
    Pablo ha pedido una caja de Madera con unas dimensiones diminutas. Que sea muy bonita

Estructuras condicionales

Operadores lógicos o booleanos

<script type="text/javascript">
	console.log("Mayor: ", 7>2);
	console.log("Menor: ", 7<2);
	console.log("Mayor o igual: ", 7>=2);
	console.log("Menor o igual: ", 7<=2);
	console.log("Igual: ", 7==2);
	console.log("Distinto: ", 7!=2);
</script>

Diferencia entre == y ===

El triple igual significa “son iguales sin conversión de tipos”.

Condicional if

<script>
	const dato1 = 3;
	const dato2 = 5;
	
	if(dato2 > dato1){
		console.log("dato2 es mayor que dato1");
	}
</script>

Ejercicio

Modificar sólo el operador booleano para lograr que se imprima el mensaje.

<script>
	const dato1 = 10;
	const dato2 = 10;
	if(dato1 > dato2){console.log("exito");}
</script>

else if

<script>
	const dato1 = 3;
	const dato2 = 5;
	
	if(dato1 > dato2){
		console.log("dato1 es mayor que dato2");
	}else if(dato1<dato2){
		console.log("dato1 es menor que dato 2");
	}	
</script>

else

<script>
	const dato1 = 3;
	const dato2 = 5;
	if(dato1 > dato2){
		console.log("dato1 es mayor que dato2");
	}else if(dato1==dato2){
		console.log("dato1 es igual que dato2");
	} else{
		console.log("Va a ser que no...");
	}
</script>

Ejercicios if

  1. Corrige los errores que hay en este código:

    <script type="text/javascript">
    if {10 == 10}(
        console.log("You got a true!")
    ) else (
        console.log("You got a false!")
    )
    <script type="text/javascript">
  2. Dada una constante que contiene la nota de un examen que va de 0 a 10...
    • Si es mayor que cinco mostrar el texto "Aprobado".
    • Si es igual a cinco, mostrar el texto "Aprobado por los pelos"
    • Si es menor que cinco, mostrar el texto "Suspenso".
  3. Declarar una constante 'i' de tipo entero y asígnale un valor. Mostrar un mensaje indicando si el valor de 'i' es positivo o negativo, si es par o impar, si es múltiplo de 5, si es múltiplo de 10 y si es mayor o menor que 100. Consideraremos el 0 como positivo.
  4. Hacer una calculadora que determine la operación a realizar por medio de una estructura de control if.

    La calculadora utilizará 3 constantes para hacer los cálculos.

    • Una constante que almacenará el primer número. Por ejemplo:
      const n1 = 3;
    • Una constante que almacenará el segundo número. Por ejemplo:
      const n2 = 7;
    • Una constante de tipo texto que almacenará la operación a realizar. Esta constante podrá valer +, -, * o /, en función de la operación que deseamos realizar. Por ejemplo:
      const op = '+';

    Utilizaremos la estructura de control if para evaluar la constante que almacena la operación a realizar y en función de esa evaluación, hacer una suma, una resta, una multiplicación o una división.

Operador ternario

const a = 5;
const b = 3;

if(a>b){console.log("a es mayor que b");}
else{console.log("b es mayor que a");}

		
const resultado = (a>b)?"a es mayor que b":"b es mayor que a";
console.log(resultado);

Ejercicios operador ternario

  1. Declare una variable numérica 'b' y asignale un valor. Mostrar una traza indicando si el valor de 'b' es positivo o negativo. Consideraremos el 0 como positivo. Utiliza el operador condicional (? : ) dentro del console.log para resolverlo.
  2. Declarar una variable numérica 'i' y asignale un valor. Muestra un mensaje indicando si 'i' es par o impar. Utiliza el operador condicional ( ? : ) dentro del console.log para resolverlo.

Estructura switch

let opcion = 'opcion1';

switch(opcion) {
	case 'opcion1':
		console.log("Has escogido la opción 1");
	break;
	case 'opcion2':
		console.log("Has escogido la opción 2");
	break;
	case 'opcion3':
		console.log("Has escogido la opción 3");
	break;
	default:
		console.log("No has escogido ninguna de las opciones posibles");
}

Ejercicio: switch modificando el case

Inserta el código necesario para que esta estructura de control Switch funcione también con el amarillo.

const color = 'amarillo';
switch(color) {
	case 'rojo':
		console.log("Has escogido rojo");
	break;
	case 'azul':
		console.log("Has escogido azul");
	break;
	//Inserta tu código aquí
	default:
		console.log("No has escogido ningún color de la lista!");
}

Ejercicio: switch modificando el default

Añadir el caso por defecto (default):

let golosina = 'nubes';

switch(golosina) {
	case 'chicle':
		console.log("Has escogido un chicle");
	break;
	case 'gominola':
		console.log("Has escogido una gominola");
	break;
	case 'regaliz':
		console.log("Has escogido un regaliz");
	break;
		//Inserta tu código aquí
}

Bucle for

for(
	estado inicial de la variable contadora;
	condicion que se ejecuta antes de cada repeticion;
	incremento o decremento de la variable contadora
){
	console.log(i);
}
<script>
	for(i=0; i<10; i++){
		console.log(i);
	}
</script>

Snippet para crear bucles for en Sublime Text: for

Ejercicios bucle for

  1. Imprimir los números pares que hay dentro de los 100 primeros números naturales. No utilizar la estructura de control if para resolver este ejercicio.

  2. Imprimir los números pares que hay dentro de los 100 primeros números naturales

    El bucle avanzará de uno en uno; no de dos en dos como en el ejercicio anterior.

    Utilizaremos el operador % para separar los pares de los impares.

    Nota: El operador "%" nos da el resto de dividir un número entre otro.
    Ej: 7%3=1

  3. Ejercicio: fizzbuzz

    Imprimir los números del 1 al 20.

    • Para números divisibles por 3, imprimir “Fizz”.
    • Para números divisibles por 5, imprimir “Buzz”.
    • Para números divisibles por 3 y 5, imprimir “FizzBuzz”.
    • En cualquier otro caso, imprimir el número.
    Notas:
    if(i>5 && i<7)
    if(i==5 || i== 3)
  4. Mostrar la tabla de multiplicar que va del 1 al 9. Usaremos dos bucles anidados.
  5. Ejercicio - enésima potencia

    Calcular utilizando un bucle while, la cuarta potencia de tres. Debería dar 81.

    Diagrama de flujo de ejercicio de Javascript para calcular la enésima potencia de un número
  6. Calcular el factorial de 5 .

    El factorial de un número entero positivo se define como el producto de todos los números naturales anteriores o iguales a él. Se escribe n!, y se lee "n factorial". (Por definición el factorial de 0 es 1: 0!=1)

    Por ejemplo, 5! = 5·4·3·2·1 = 120

    Diagrama de flujo del cálculo de un factorial con Javascript

    Variaciones del ejercicio para los que terminen antes : Este ejercicio se puede resolver, en general, de cuatro formas diferentes, con un bucle for, con un bucle while, y multiplicando los factoriales de mayor a menor o de menor a mayor.

Bucle While

let valor = 0;
while(valor<4){
	console.log(valor);
	valor++;
}

Ejercicios bucle while

  1. Repetir el juego del número secreto, pero ahora después de jugar se le preguntará al usuario si desea seguir jugando. Si no desea seguir jugando la variable booleana "quieroJugar" que evalúa el bucle while valdrá false, con lo cual termina el juego.

  2. El usuario debe introducir su nombre, en el caso de que haya introducido información, se le preguntará si los datos son correctos. Si responde que sí, se le indicará que puede seguir con el exámen. Si responde que no, volveremos a la pregunta inicial. En caso de que al principio de todo no hubiese escrito nada, se mostrará un mensaje con la palabra "error"

    Para recoger un valor vacío ("") cuando el usuario pulsa la tecla enter sin introducirar ningún valor, podemos usar el método scanner.nextLine();

    Diagrama de flujo de ejercicio java
  3. Leer números hasta que el usuario introduzca un -1 y mostrar cuantos fueron introducidos.

Funciones

Son bloques de código reutilizables.

¿qué es una función?

Función que no devuelve nada, sin parámetros

<script>
	function saludar(){
		console.log("Buenas tardes!");
	}

	saludar();
</script>

Snippet para crear funciones en Sublime Text: fun

Función que no devuelve nada, con parámetros

<script>

	function saludar(nombre){
		console.log("Buenas tardes " + nombre);
	}

	saludar("Pablo");

</script>

Ejercicios funciones

Resolveremos los siguientes ejercicios definiendo una función con parámetros de entrada

  1. Ejercicio "hoyQuieroComer"

    Crear una función llamada "hoyQuieroComer" que recibe un parámetro “comida” curyo valor será "garbanzos".

    Cuando llamemos a la función se mostrará un log indicándonos lo que deseamos comer.

  2. Crear y llamar a una función que recibe un número y calcula su cubo.
  3. Crear y llamar a una función que recibe la velocidad en Km/hora y la muestra en metros/hora.
  4. Crea y llama a una función que recibe el ancho y el alto de un rectángulo y calcula su area.

    Cuando una función recibe varios parámetros, estos irán separados por coma.

    calculaArea(alto, ancho);
  5. Crear y llamar a una función que recibe la base y la altura de un triángulo y calcula su área.
    Area triángulo = base*altura/2
  6. Utilizando estas dos funciones:
    • calculaPerimetro(radio); Perímetro de la circunferencia = 2*Math.PI*Radio
    • calculaArea(radio); Area de la circunferencia = Math.PI*Radio2
    Asignar a una variable radio el valor 3 y mostrar por pantalla su perímetro y area.

Función que devuelve un valor

Función que no devuelve nadafunction noDevuelveNada(a, b){
	const resultado = a + b;
	console.log(resultado);
}

noDevuelveNada(2,3);
Función que devuelve algofunction devuelveValor(a,b){
	const resultado = a + b;
	return resultado;
}

const valorDevuelto = devuelveValor(2,3);
console.log(valorDevuelto);
Otro ejemplo de funciones con y sin return<script>
	const v1 = parseInt("3");
	const v2 = console.log("Esto no devuelve nada");
	console.log(v1);
	console.log(v2);
</script>

Arrow Functions

¿Por qué es necesario declarar una arrow function antes de usarla.?

Declaración de una función:a();
function a(){}
Expresión de una función (función como valor)const prueba = function {
	console.log('hola');
}
prueba();

En la primera fase de carga del código Javascript (hoising), las funciones se almacenan en memoria con todo su código, pero laas variables y constantes se almacenan con valor undefined.

En la fase de ejecución es dónde se asignan los valores a las variables y constantes. Por tanto, si utilizamos una variable o constante antes de haberle asignado un valor en esta fase, dará error, puesto que tendrá un valor de undefined.

Son una nueva manera de expresar las funciones de siempre, de un modo resumido y con algunas características nuevas.

nombre de la función = parámetros => cuerpo o valor devuelto

A continuación de la flecha ponemos lo que devuelve la función.

Sin parámetros

const devolver1 = () => {
	console.log('Hola'); 
}

const devolver2 = _ => {
	console.log('Adios'); 
}

devolver1(); // Hola
devolver2(); // Adios

Con un parámetro

const multiplicar1 = param => {
	const resultado = param * 2;
	console.log(resultado)
}

const multiplicar2 = (param) => {
	const resultado = param * 2;
	console.log(resultado)
}


multiplicar1(4);  // 8
multiplicar2(4);  // 8

Multiples parámetros

const multiplicar = (x, y) => {
	const resultado = x * y;
	console.log(resultado);
}

multiplicar(2, 3);  // 6

Sólo con return

const multiplicar = (x, y) =>  x * y;

const valor = multiplicar(2, 3);

console.log(valor); // 6

Ejercicios funciones

Resolveremos los siguientes ejercicios definiendo una función con parámetros de entrada

  1. Crear y llamar a una función que recibe un número y calcula su cubo.
  2. Crear y llamar a una función que recibe la velocidad en Km/hora y la muestra en metros/hora.
  3. Crea y llamar a una función que recibe el ancho y el alto de un rectángulo y calcula su superficie.

    Cuando una función recibe varios parámetros, estos irán separados por coma.

    calculaSuperficie(alto, ancho);
  4. Crear y llamar a una función que recibe la base y la altura de un triángulo y calcula su área.
    Area triángulo = base*altura/2
  5. Utilizando estas dos funciones:
    • calculaPerimetro(int radio); Perímetro de la circunferencia = 2*Math.PI*Radio
    • calculaArea(int radio); Area de la circunferencia = Math.PI*Radio2
    Leer el valor del radio de una circunferencia y mostrar por pantalla su perímetro y area. Ver ejemplo

Métodos para trabajo con cadenas

<script>
	const nombre = "Ramón";
	console.log("Las dos primeras letras son: "+nombre.substring(0,2));
	console.log("Las letras que van desde la tercera hasta la última posición son: "+nombre.substring(2));
	console.log("La palabra tiene "+nombre.length + " letras");
	console.log("La palabra pasada a mayúsculas es: "+nombre.toUpperCase());
	console.log("La palabra pasada a minúsculas es: "+nombre.toLowerCase());
	console.log("La posición de la última 'm' de la palabra pasada es: "+nombre.lastIndexOf("m"));
</script>
Ejercicio

Utilizando el método substring imprimir las letras que van desde la posición 3 a la 7 de la cadena "wonderful day", es decir “derf”.

Números aleatorios

Generar número aleatorio dentro de un rango

Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

Como ejemplo, si deseamos generar un número aleatorio entre 25 y 75, la sentencia sería

Math.floor(Math.random() * (75-25+1)) + 25;

Ejercicio número aleatorio

Obtener un número aleatorio entre 5 y 7.

Ejercicio letra aleatoria

Obtener una letra aleatoria de tu nombre.

Tendrás que usar los siguientes códigos:

Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;
nombre.substring();
nombre.length;

Pasos para resolver el ejercicio:

  1. Calculamos un número aleatorio en un rango comprendido entre 0 y el número de letras de tu nombre.
  2. Utilizamos ese número aleatorio para obtener la letra de tu nombre que ocupa esa posición.
  3. Mostramos la letra en la consola.

location.href

Nos permite:

Ejercicio

Obtener el nombre de la página actual.

Pista:
location.href nos devuelve la url completa de la página en la que estoy.

Callback

const callback = () =>{
	console.log('Llamada al callback');
}

const empezarTodo = (a, b, myCallback) => {
	console.log(a,b);
	callback();
}

empezarTodo(3,4);

Colección de ejercicios

Acceder a la colección de ejercicios

DOM

Gracias al DOM, Javascript puede acceder y modificar todos los elementos de un documento HTML. Para ello, el navegador crea una representación interna de la página, un árbol de nodos.

arbol de nodos

querySelector I

<form>
	Escribe tu nombre, por favor:
	<input type="text" id="campoNombre">
	<input type="button" id="btn" value="Enviar formulario">
</form>

<script>
	const saludar = _ =>{
		console.log(document.querySelector('#campoNombre').value);
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

querySelector II

<form>
	Escribe tu nombre, por favor:
	<input type="text" id="campoNombre">
	<input type="button" id="btn" value="Enviar formulario">
</form>

<script>
	const saludar = _ =>{
		const info = document.querySelector('#campoNombre').value;
		console.log(info);
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

querySelector III

<form>
	Escribe tu nombre, por favor:
    <input type="text" id="campoNombre">
    <input type="button" id="btn" value="Enviar formulario">
    <input type="text" id="campoNombre2">
</form>

<script>
	const saludar = _ =>{
		const info = document.querySelector('#campoNombre').value;
		document.querySelector('#campoNombre2').value = info;
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

querySelector IV

<form>
	Escribe tu nombre, por favor:
	<input type="text" id="campoNombre">
	<input type="button" id="btn" value="Enviar formulario">
	<input type="text" id="campoNombre2">
</form>

<script>
	const saludar = _ =>{
		document.querySelector('#campoNombre2').value = document.querySelector('#campoNombre').value;
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

Mecánica de resolución ejercicios

  1. Escribe el código HTML.
  2. Al pulsar sobre el botón debes llamar a una función que muestre un log: console.log("llega").
  3. Ahora el console.log mostrará el value de los datos de entrada en lugar del texto "llega".
  4. Procesa la información.
  5. Muestra el resultado.

Ejercicios DOM

  1. Hacer un formulario que convierte de euros a dólares. Supondremos que un euro son dos dólares

  2. Hacer un formulario que convierta de grados centígrados a grados Fahrenheit. Para ello deberé multiplicar por 9/5 y sumar 32.

    Es posible ampliar este ejercicio añadiendo un segundo botón, de tal forma que cuando lo pulsemos, recojamos los grados Fahrenheit introducidos, calculemos los correspondientes grados centígrados y los pintemos en la caja de texto correspondiente.

  3. Hacer un formulario para solicitar el envío de una caja de cartón. En el formulario podremos especificar las características de la caja.

    Para acceder al valor marcado de un conjunto de radio buttons:

    <input type="radio" name="boton" class="botoncito" value="amor1">
    <input type="radio" name="boton" class="botoncito" value="amor2">
    <input type="radio" name="boton" class="botoncito" value="amor3">
    <input type="button" id="btn">
    
    <script>
    	const calcula = _ =>{
    		//const valor = document.querySelector('.botoncito:checked').value;
    		const valor = document.querySelector('[name=boton]:checked').value;
    		console.log(valor)
    	}
    
    	document.querySelector('#btn').addEventListener('click', calcula);
    </script>
  4. A través de un formulario, el usuario debe introducir un número secreto que estará entre 0 y 5.
    El usuario tendrá tres intentos para acertar el número, si no lo logra, habrá perdido el juego.
    Debemos indicar en un cuadro de texto si el usuario gana, falla el número o pierde. Ver ejemplo

Ejercicios DOM con funciones

  1. Realizar la calculadora utilizando funciones para las operaciones aritméticas.

    Ejercicio calculadora con funciones
  2. Ejercicio coste viaje

    Realizaremos el siguiente ejercicio en grupos de tres personas. La propuesta para la distribución de tareas será la siguiente (puede variar según grupo):

    • alumno 1 - Función calcular_coste() y función coste_hotel()
    • alumno 2 - Función coste_avion().
    • alumno 3 - Función coste_alquiler_coche().

    Podeis compartir el código que hagais entre vosotros usando https://codeshare.io/

    calcular_coste()
    • Es la única que se conecta con el HTMl. Para recuperar datos y pintar los resultados.
    • No tiene return.
    • La activamos al hacer click.
    coste_hotel(), coste_avion(), coste_alquiler()
    • No tienen contacto con el HTML.
    • Tienen parámetros de entrada.
    • Tienen return.

    Ejercicio - coste hotel

    Además de la función calcular_coste() que te paso más bajo, crea una función llamada coste_hotel() que recibe como parámetro el número de noches. La función debe devolver cuanto es necesario pagar teniendo en cuenta que cada noche cuesta 140 euros.

    calcular_coste = _ =>{
    	const num_noches = document.querySelector("#num_noches").value;
    
    	const resultado1 = coste_hotel(num_noches);
    
    	document.querySelector("#result").value = resultado1;
    }
    Coste hotel

    Ejercicio – Coste avión

    La función coste_avion() tiene como parámetro de entrada el nombre de una ciudad y el número de noches. El coste corresponderá al indicado en la siguiente tabla, pero para una estancia de más de tres noches la agencia de viaje nos hará un descuento del 10%.

    Los costes por ciudad son los siguientes:
    "Oviedo": 15
    "Tokyo": 700
    "Madrid": 90
    "Barcelona": 90

    Coste avión

    Ejercicio – Coste alquiler coche

    La función coste_alquiler_coche() tiene como parámetro de entrada el número de noches y devolverá un coste en función de dicho parámetro, teniendo los siguientes aspectos en cuenta:

    • Cada día de alquiler cuesta 40 €.
    • Si alquilas un coche por 3 días o más, obtienes un descuento de 20€ sobre el total.
    • Si alquilas un coche por 7 días o más, obtienes un descuento de 50€ sobre el total (no acumulable con los 20€ de haber alquilado por más de 3 días).
    Coste alquiler coche

Efecto parallax

<style type="text/css">
body{margin:0; background: url(pera.png) fixed;}
.pinas_and_oranges{ position: fixed; width: 100%; height: 1800px; }
.contentLayer{ position: absolute; width: 100%; height: 500px; }
#pinas{ background: url(pina.png) 100px 200px; }
#oranges{ background: url(orange.png) 50px 200px; }
#whiteLayer{top:500px; background: white }
#greenLayer{ top:2500px; background: green}
</style>
<script type="text/javascript">
function parallax(){
	pinas.style.top = -(window.pageYOffset/5)+"px";
	oranges.style.top = -(window.pageYOffset/2)+"px";
}
function start(){
	pinas = document.querySelector("#pinas");
	oranges = document.querySelector("#oranges");
}
window.addEventListener("scroll", parallax);
window.addEventListener("load", start);
</script>
<div id="pinas" class="pinas_and_oranges"></div>
<div id="oranges" class="pinas_and_oranges"></div>
<div id="whiteLayer" class="contentLayer"></div>
<div id="greenLayer" class="contentLayer"></div>

innerHTML

<div id="pp" style="background-color:yellow; width:200px; height:200px">
	<input type="button" />
</div>

<script>
	const anadeHTML = _ =>{
		document.querySelector("#pp").innerHTML="<h1>Casa</h1>";
	}
	document.querySelector('#pp').addEventListener('click', anadeHTML)
</script>

Ejercicios innerHTML

  1. Ejercicio mouseover

    Dadas dos capas, al hacer "mouseover" sobre la capa de arriba, que aparezca en la capa de abajo el texto "Has hecho mouse over sobre la capa 1"

  2. Ejercicio mapa

    Teniendo en cuenta que con el siguiente código html puedo pintar una moneda sobre en mapa en cierta posición:

    <div style="width:725px; height:483px; background: url(Bluemap.jpg); margin:auto; overflow:hidden; position:relative">
    	<img src="goldCoin.png" style="width:50px;position:absolute; margin-left:577px; margin-top:75px">
    </div>

    Pintar 10 monedas en coordenadas aleatorias sobre la superficie de un mapa.

    Para ello, tendremos un bucle que en cada iteración irá acumulando el código fuente de imágenes con posiciones aleatorias. Finalmente pintaremos el código fuente generado dentro de un div usando el método innerHTML

    <style>
    #capa{
    	background: pink;
    	width:600px;
    	height: 400px;
    	position: relative;
    }
    </style>
    
    <div id="capa"></div>
    
    <script>
    	let texto = "";
    	
    	for(var i=0; i<100; i++){
    		let y = Math.random()*400;
    		let x = Math.random()*600;
    		texto = texto + '<p style="position:absolute; top: '+y+'px; left: '+x+'">Monteserín Forever</p>'
    	}
    
    	document.querySelector("#capa").innerHTML = texto
    
    </script>

Propiedad style

Cambio del estilo de un elemento:	
obj.style.color = '#ff0000';

Ejercicios style

  1. Ejercicio cuestionario

    Nota: un elemento "span" es una capa (div) alineada con el texto.

  2. Cuando seleccionemos un valor en el combo desplegable, el color del body debe cambiar.
  3. Ejercicio Lightbox

    Usaremos los siguientes estilos:

    
    #black_overlay{
    	display: none;
    	position: fixed;
    	top: 0%;
    	left: 0%;
    	width: 100%;
    	height: 100%;
    	background-color:rgba(0,0,0,0.7);
    }
    /*La capa lightbox estará dentro de la capa black_overlay*/
    #lightbox{
    	margin: 100px auto 0 auto;
    	width: 50%;
    	height: 50%;
    	padding: 16px;
    	border: 16px solid orange;
    	background-color: white;
    	overflow: auto;
    }
    
    Usaremos:
    document.querySelector('#black_overlay').style.display="block"
    
  4. Detectar cuando pulsamos fuera

    window.addEventListener('click', function(e){ 
    	const lightbox = document.querySelector('#lightbox'); 
    	const black_overlay = document.querySelector('#black_overlay');
    	if (!lightbox.contains(e.target)){
    		hide();
    	}
    });

    Será necesario detener la propagación del evento o la capa se ocultará después de hacerse visible:

    const show = e => {
    	e.stopPropagation();
    	document.querySelector('#black_overlay').style.display = 'block'
    }
  5. Slider

Cambiar atributo src

<script>
	const cambiarImagen = _ =>{
		document.querySelector('#imagen').src="pablomonteserinHOVER.gif";
	}
	document.querySelector('#imagen').addEventListener('click', cambiarImagen);
</script>

<img src="pablomonteserin.gif"  id="imagen" width="500px" >

Cambiar la imágen indefinidamente

Tendremos dos posibles aproximaciones diferentes:

i++
if(i%2!=0)obj.src = '...';
else obj.src = '...';
foto1= !foto1;
if(!foto1)obj.src = '...';
else obj.src = '...';

Ejemplo drag and drop

Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase

Añadir claseobj.classList.add('nombreClase');
Eliminar claseobj.classList.remove('nombreClase');
Cambiar claseobj.classList.toggle('nombreClase');
Evaluar si tiene una claseif (obj.classList.contains('thatClass')) {
    // do some stuff
}

Ejercicio - animate.css

Usando addClass, hacer que al pulsar un botón este coja los estilos necesarios y suministrados por la librería animate.css para que se produzca la animación correspondiente

Para que funcione, habrá que añadir el class animated y el class correspondiente a la animación que queremos emplear y que podemos consultar en animate.css.

Si queremos que pasado un tiempo se elimine el class, usaremos la función timeOut

const eliminaClases = _ => {
	const obj = document.querySelector("#rojo");
	obj.classList.remove('animated','bounce'); 
}
setTimeout(eliminaClases, 2000);

Si queremos que el class se elimine cuando la animación ha concluído, usaremos:

obj.addEventListener('animationend', () => {
	obj.classList.remove('animated','bounce');
});

Ejercicio menú hamburguer

Ejercicio menú hamburguer pulsando en fondo

Ejercicio precarga

Mostrar un icono durante la precarga de la página.

Utilizaremos el siguiente class para hacer la capa container invisible durante el periodo de precarga:

.container.invisible{
	opacity: 0;
	height: 0;
	overflow: hidden;
}

Create element

const div_rojo = document.createElement('div');
div_rojo.setAttribute('id', 'div_rojo_id');
div_rojo.setAttribute('style', 'background:red; width:300px; height:300px');
div_rojo.classList.add('amor');
div_rojo.innerHTML = 'Contenido';
document.querySelector('#div_rojo_wrapper').appendChild(div_rojo);

Ejercicio createElement

A partir de la siguiente página, añadir el código javascript necesario para que inicialmente se reproduzca el video con sonido y la palabra 'mute'. Al pulsar sobre el slider, este debe ponerse en silencio y la palabra debe cambiar a 'unmute'.

Pasos a seguir:

  1. Añadimos el texto 'mute' al slider.
  2. Quitamos y ponemos sonido al pulsar sobre el slider.
  3. Cuando pulsemos sobre el slider, su texto debe cambiar entre mute/unmute.

Para activar/silenciar un video:

const video=document.querySelector('#mi_video');

if(video.muted){
	video.muted = false;
} else {
    video.muted = true;
}

Arrays

Declaración

<script>
const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
const dayNumber = new Date().getDay();
console.log("Hoy es " + days[dayNumber]);
</script>

Añadir y quitar elementos de un array

var datos = ['pera', 'manzana', 'naranja'];
console.log(datos);
datos.push('fresa'); //Añade elemento al final
console.log(datos);
datos.pop(); //Elimina el último elemento
console.log(datos)
datos.splice(1,2) //Elimina un rango de elementos
console.log(datos);	

En javascript no existen los arrays asociativos

let arrayAsociativo = [];
arrayAsociativo["one"] = "uno";
arrayAsociativo["two"] = "dos";
arrayAsociativo["three"] = "tres";

console.log(arrayAsociativo["two"]);
console.log(arrayAsociativo.length);
Los arrays asociativos no existen en Javascript

Si cambiamos la palabra "Array" por el nombre utilizado para designar a cualquier otro objeto, el código continúa funcionando. Esto es así porque realmente estamos definiendo las propiedades de un objeto. (En javascript foo["bar"] es lo mismo que foo.bar).

Recorrer los elementos del array

Con forEach

const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];

days.forEach(value => {
	console.log("Hoy es " + value);	
})
const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];

days.forEach( (value, key) => {
	console.log(key + ": Hoy es " + value);	
})

Con map

const days = [1, 2, 3];

const nuevoArray = days.map(value => value * 2);

console.log(nuevoArray);
Recorrer elementos de un array - ECMAScript6 usando map

Recorrer elementos de HTML con map

Con el método map podremos recorrer arrays. Sin embargo, las etiquetas HTML de una página web no son un array, sino un nodelist, por lo que habrá que hacer la siguiente conversión:

const elements = document.querySelectorAll('div');

Array.from(elements).map(obj => {
    console.log(obj.innerHTML)
});

Ejercicios Arrays

  1. Crea un array con cinco nombres de persona y recórrelo mostrando el texto "Conozco a alguien llamado ".
  2. Recorrer la siguiente lista con un bucle imprimiendo el doble de cada número:

    my_list = [1,9,3,8,5,7]
  3. Contar el número de elementos positivos, negativos y que valgan cero en un array de 10 enteros. Los valores habrán sido harcodeados en un array.
  4. Leer 10 enteros harcodeados en un array y mostrar la media de los valores negativos y la de los positivos.

Recorrer el DOM con forEach

document.querySelectorAll('.resaltado').forEach((obj, i) => {
	obj.style.backgroundColor = 'red';
});
Ejercicios forEach con DOM
  1. Marcar todas las respuestas correctas con el mismo class y mostrarlas en color rojo cuando pulsemos el botón de ver soluciones

  2. Entender el método closest
    <div>
    	<button>Pulsar</button>
    </div>
    obj.closest('div').style.background = 'red';
  3. Hacer un cuestionario
  4. Ejercicio presupuesto
  5. Ejercicio carta de presentación

    A continuación te facilito los textos que puedes usar. No hace falta que los uses todos; con tres de cada categoría, sirve

    Motivo

    • Cuento con varios años de experiencia muy sólida como profesional por lo cual me creo capacitad@ para asumir las responsabilidades del puesto que ustedes anuncian.
    • En relación al anuncio publicado donde solicitaban un profesional para su empresa, les presento mi candidatura.
    • El pasado día del mes corriente, se publicó una oferta de trabajo en la que se hacía constar que necesitaban cubrir un puesto de trabajo.
    • En respuesta a su anuncio aparecido en el periódico , me es grato manifestarle mi interés por el puesto .
    • Me dirijo a ustedes con el fin de ofrecerles mis servicios profesionales.
    • En relación al anuncio de referencia tengo el gusto de enviarle mi currículo ya que, como verá en el mismo, creo reunir todos los requisitos para el puesto de trabajo que quieren cubrir.
    • Me pongo en contacto con ustedes para manifestarles mi interés por el puesto de trabajo que solicitaban.
    • Me dirijo a ustedes para hacerles constar mi interés por desarrollar mi futuro profesional en su empresa.
    • Sería de mi agrado poderme integrar en aquella actividad que me permita continuar con lo ya aprendido.

    Medallas

    • Como he reseñado en el historial adjunto, aunque solo cuento años de experiencia, confío en mi afán de de superación para llegar a poseer un dominio completo de la profesión. Creo contar con las aptitudes necesarias para poder aportar beneficios muy positivos a su organización.
    • Debido a mis cualidades personales y mi experiencia, me considero capacitado para desempeñar ese trabajo.
    • Me adapto con facilidad al trabajo en equipo y baso mi actuación `profesional en una relación duradera y de confianza con la empresa.
    • El puesto que ustedes ofrecen coincide plenamente con mis objetivos profesionales y constituye para mi un reto profesional, qué trataré de llevar a cabo con todo entusiasmo, para mutuo beneficio.
    • Considero que mis características de formación y experiencia puedan corresponder con las de su anuncio y me complazco en enviarles mi CV para su consideración.
    • Por mi formación y por mi entusiasmo en desarrollar al máximo mi carrera profesional, espero ser un firme candidato para cubrir el puesto que se ofrece.
    • Mis aspiraciones profesionales se dirigen profesionalmente hacia sectores donde mi formación y experiencia podrían consolidarse. Tengo plena disponibilidad para cambios de residencia y viajes.
    • Tanto el interés por ampliar mi carrera profesional, como mi capacidad de trabajo y responsabilidad, pueden resultar de utilidad para una empresa consolidada como la suya.

    Objetivo

    • Agradecería la oportunidad de poder presentarme ante ustedes para contestar cualquier pregunta y ampliar lo resumido en mi historial.
    • Les agradecería me dejasen formar parte del proceso de selección.
    • Por todo ello espero que tenga en cuenta mi candidatura ante cualquier necesidad futura se ponga en contacto conmigo.
    • Desearía formar parte del proceso de selección, y quedo a su disposición para mantener una entrevista personal si lo estiman oportuno.
    • Espero se pongan en contacto conmigo para poderles ampliar mi datos en una entrevista personal.
    • Por todo ello, creo reunir los requisitos que mencionan para el futuro ocupante del puesto, deseando poder formar parte del proceso de selección.
    • Esperando comentar con usted en una próxima entrevista mi historial profesional, aprovecho la ocasión para saludarle atentamente.

    Despedida

    • Un cordial saludo.
    • En espera de sus noticias y sin otro particular.
    • Aprovecho la ocasión para agradecerle el interés que ha manifestado por mi candidatura. Atentamente.
    • Muy atentamente.
    • Atentamente.
    • A la espera de recibir noticias suyas, les saluda atentamente.
    • Agradeciéndoles la atención restada , se despide atentamente.
  6. Ejercicio filas

    Al pulsar sobre una fila, esta se colorea y se marca el radio button correspondiente a la fila pulsada.

  7. Ejercicio slider I
    document.querySelector(".capa" + contador).style.transform = "scale(1)";
    // El valor de contador estará entre 0 y 2
  8. Ejercicio slider II

    Realizar el mismo ejercicio, pero utilizando como selector para acceder a las capas

    document.querySelector(".capa:nth-child("+elemento+")").style.transform = "scale(1)";
    // El valor de elemento estará entre 1 y 3
  9. Ejercicio slider III

    Quitaremos opacidad y escalaremos a cero todas las slides del slider y luego daremos opacidad 1 y haremos grande la que corresponda.

  10. Ejercicio slider IV - sin definir número de elementos

    Ahora el contador irá desde cero hasta el número total de elementos que hay dentro del slider. De esta forma, si dentro del slider ponemos más capas, el código debería seguir funcionando. Recuerda que puedes obtener la longitud de un array accediendo a su propiedad .length

  11. Ejercicio slider V - avanza automáticamente
    Pista:setInterval(avanza, 1000);
  12. Ejercicio slider VI- con cambio de dirección
    Pista:let contador = 0;
    if(contador>=n-1|| contador <1){
    	signo = signo*(-1);
    }
    contador = contador + signo;
  13. Hacer un filtro

    Al pulsar sobre un enlace, las capas de colores inferiores deben filtrarse en función del enlace pulsado. Para ello, recorreremos todas las capas, añadiendo o eliminando el class "oculta" en el caso de que el href (con #) del enlace coincida con alguno de los class de la capa

    Ver ejemplo

Recorrer un array de objetos

const data = [
	{
		"titulo": "La Aventura",
		"autor": "Paco"
	},
	{
		"titulo":"Las cosas",
		"autor": "Pac"
	}
]
data.forEach( obj => {
	console.log(obj.autor);
});

Ejercicio recorrer un array de objetos

Hacer una lista HTML donde se muestren los nombres de los usuarios

const usuarios = [
	{
		"name" : "Paco",
		"isActive" : false
	},
	{
		"name" : "Laura",
		"isActive" : false
	},
	{
		"name" : "Raquel",
		"isActive" : false
	},
	{
		"name" : "Juan",
		"isActive" : true
	},
	{
		"name" : "Alberto",
		"isActive" : false
	},
	{
		"name" : "Rodolfo",
		"isActive" : true
	},
];
Ver ejemplo

find

Permite el elemento de un array que cumple cierta condición

const escenas = [
	{
		"id": 1,
		"titulo": "beso inicial"
	},
	{
		"id": 2,
		"titulo": "beso final"
	}
]

	const escena = escenas.find( obj => obj.id == 2)
	
	console.log(escena);
Ejercicio find
  1. Utilizando el método find, busca el usuario cuyo nombre es Juan y muestra su edad.
    const usuarios = [
    	{
    		"name" : "Paco",
    		"isActive" : false,
    		"edad": 18
    	},
    	{
    		"name" : "Laura",
    		"isActive" : false,
    		"edad": 21
    	},
    	{
    		"name" : "Raquel",
    		"isActive" : false,
    		"edad": 15
    	},
    	{
    		"name" : "Juan",
    		"isActive" : true,
    		"edad": 17
    	},
    	{
    		"name" : "Alberto",
    		"isActive" : false,
    		"edad": 50
    	},
    	{
    		"name" : "Rodolfo",
    		"isActive" : true,
    		"edad":7
    	},
    ];
    Ver ejercicio resuelto

filter

Permite obtener los elementos de un array cumplen cierta condición.

El método filter recibe como parámetro de entrada una función que devuelve true si queremos añadir al array resultante el objeto que estamos evaluando, y false si no lo queremos añadir.

El siguiente código evalúa cada elemento de un array de números y comprueba si son iguales al valor almacenado en n_introducido. La constante result es un nuevo array compuesto por los elementos que cumplen la condición.

const result = numeros.filter(num => num < n_introducido);
Ver ejemplo
Ejercicios filter
  1. Recorre el array anterior para obtener un nuevo array con los usuarios activos. Ver ejercicio resuelto
  2. Recorre el array anterior para obtener un array con los usuarios mayores de 18 años. Ver ejercicio resuelto

Reduce

El método reduce permite acumular valores en una variable.

Convertir un array en una cadena
const valores = [{titulo:"t1"},{titulo:"t2"},{titulo:"t3"},{titulo:"t4"}];

let val = valores.reduce(
    // En cada iteración devolvemos el valor que estamos acumulando
    (valorAcumulado, obj) => valorAcumulado + obj.titulo, 
    " valor inicial ");
    
console.log(val);
Convertir un array en cadena
Acumular valores en un nuevo array
const valores = [{precio: 1},{precio: 2},{precio: 3},{precio: 4}];
const arrayAcumulado = [];

let val = valores.reduce(
	// En cada iteración devolvemos el array con los valores que estamos acumulando
	(arrayAcumulado, obj) => [...arrayAcumulado,obj.precio*2], 
[]);
Ejercicio filter y reduce

Partimos de un objeto seresVivos con dos propiedades: humanos y tortugas. También tenemos un array de objetos llamado seleccion, donde cada objeto hace referencia a una de las propiedades del objeto seresVivos

Aplicando el método reduce sobre el objeto selección vamos a recorrerlo para ir acumulando en un nuevo array los objetos del array seresVivos que tengan más de 18 años, siempre y cuando tengan su propiedad selected a true en el objeto seleccion.

const seresVivos = {
"humanos":[
{
	"name" : "Paco",
	"edad": 18
},
{
	"name" : "Laura",
	"edad": 21
},
{
	"name" : "Rodolfo",
	"edad":7
}
]
,
"tortugas":[
{
	"name" : "Rafael",
	"edad": 19
},
{
	"name" : "Donatello",
	"edad": 16
},
{
	"name" : "Leonardo",
	"edad": 17
}
]
};


const seleccion = [
{
	"name": "humanos",
	"selected": false
},
{
	"name": "tortugas",
	"selected": true
}
];
pistaconst result = seleccion.reduce((todosLosAnimales, raza) => {
	if(/*el objeto raza tiene el valor selected a true*/){
		const animal = seresVivos[raza.name].filter(/* Devolvemos los animalres con más de 18 años*/);
		return [...todosLosAnimales, animal];
	}else{
		return [...todosLosAnimales];
	}
	}, []
)
Ver ejercicio resuelto

Convertir un objeto en un array de arrays

const arrayDeArrays = Object.entries(obj);
Convertir objeto en array de arrays

Ejercicios avanzados

  1. Tres en raya - dos jugadores

    Hacer el juego del tres en raya para dos jugadores.

    Ver solución
  2. Ejercicio – Tres en raya - un solo jugador

    El método juegaPlayer1() quedará así:

    function juegaPlayer1(){
    	board[getComputerMove()] = "X";
    }

    Por tanto, debemos crear un método getComputerMove() que creará una copia del tablero, moverá la ficha sobre esta copia y en función del resultado decidirá dónde mover en el tablero real. Para realizar el movimiento:

    1. Comprobamos si la máquina puede hacer un movimiento y ganar la partida. (utilizaremos el método evaluateWin, creado en el ejercicio anterior).
    2. Comprobamos si tras mover, el humano puede hacer un movimiento y ganar la partida.
    3. Comprueba si hay alguna esquina libre. Si lo está, la máquina mueve a la esquina.
    4. Comprueba si el centro está libre. Si lo está, la máquina mueve al centro.
    5. Mueve a cualquiera de las casillas restantes.
    Ver solución
  3. Ahorcado

    Realizar el juego del ahorcado.

    • Al iniciar el programa, este deberá escoger una palabra al azar entre 4. Esta será la palabra secreta que el usuario deberá adivinar.
    • Utilizando el código
      var palabraConGuiones = secretWord.replace(/./g, "_ ");
      el programa creará una nueva palabra con tantos guiones bajos como letras tenga la palabra secreta.
    • El usuario deberá ir introduciendo letra a letra hasta adivinar la palabra secreta.
    • Javascript trabaja las palabras como arrays de letras.
    • Después de recoger la letra introducida por el usuario, iremos comparando con las letras que tiene la palabra secreta utilizando un bucle for. En caso de coincidencia utilizaremos la siguiente función no nativa para hacer el remplazo (debe estar definida al principio del script):
      String.prototype.replaceAt=function(index, character) {
      	return this.substr(0, index) + character + this.substr(index+character.length);
      }
      
      Uso: 	palabraConGuiones = palabraConGuiones.replaceAt(i*2, letra);
    • Finalmente utilizaremos if(currentWord.indexOf("_")==-1) para comprobar si el usuario ganó.
    diagrama de flujo del juego del ahorcado imagen de juego del ahorcado Ahorcado
    
    

    El siguiente código busca una letra dentro de una palabra y muestra un mensaje de alerta cada vez que la encuentra

    <script type="text/javascript"> let palabra = "elefante"; let letra = "e"; for(let i=0; i<palabra.length; i++){ if(palabra[i] == letra){ alert("Hay una a en la posición " + i) } } </script>
  4. Juego palabras

    1. Se escoge una frase aleatoriamente entre un array de frases.
    2. Desordenamos la frase. Para simplificar el proceso, tendremos otro array donde las frases desordenadas se almacenan en el mismo órden que en el primer array.
    3. Envolvemos las palabras del array en spans independientes a los que asociamos el class button para detectar la pulsación sobre ellos.
    4. Cuando pulsamos sobre uno de estos buttons, pasamos la palabra pulsada a la fila inferior
    5. Cuando pulsamos el botón de corrección, evaluamos si la frase de arriba coincide con la frase de abajo.
    Ver ejemplo

localStorage

localStorage vs Cookies:

localStorage.setItem("clave", valor);
var variable = localStorage.getItem("clave");

Consideraciones:

localStore sólo almacena texto, si quisiera almacenar un array, tendría que seguir el siguiente proceso:

localStorage.setItem(JSON.stringify(names));
var storedNames = localStorage.getItem(JSON.parse(localStorage["names"]));

Ejercicio

Al pulsar el botón de "Salvar cambios" deben almacenarse los cambios. Al cerrar y regresar al navegador, los cambios deben estar ahí.

localstorage

Ejercicio

Crear un botón para eliminar el contenido almacenado en el ejercicio anterior.

localStorage.clear();
location.reload();
  • item 1
  • item 2
  • item 3
  • item 4
Ver ejercicio localstorage resuelto

Ejercicio

Al seleccionar una imagen, esta debe aparecer en la página siguiente.

storage image

Deconstrucción

Nos permite almacenar los valores de una entidad compleja (un array o un objeto) en variables independientes.

Deconstrucción de array

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Deconstrucción de un objeto

let obj = {a: 1, b: 2, c: 2};
let {a, b, c } = obj;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Importar un objeto y deconstruirlo

funciones.jsexport const saltar = () => console.log('saltar');

export const correr = () => console.log('correr');
import { saltar, correr } from funciones;

Importar todos los exports de un módulo

// En el siguiente caso, misFunciones será un objeto normal, cuyas propiedades serán los exports del módulo importado
import * as misFunciones from 'funciones';

// Para poder usarlos, tendré dos opciones: 

const { saltar, correr } = misFunciones;
// o usar misFunciones.saltar y misFunciones.correr

Rest operator/ spread operator (...)

Rest operator

function doMath(operator, ...numbers) {
	console.log(operator);
	console.log(numbers);
}
 
doMath('add', 1, 2, 3);

Spread operator

const a = [1,2,3];

const b = [...a, 4,5,6]; // [1, 2, 3, 4, 5, 6]

fetch

Las peticiones fetch permiten hacer peticiones a un servidor cuyos resultados serán gestionados mediante promesas.

Ejemplos de uso de fetch

Petición GET sin parámetros a una API externa

fetch('https://swapi.co/api/people/1/')
.then(res => res.json())
.then(callback);

function callback(data){
	console.log(data)
}

Petición GET sin parámetros a un fichero local

fetch('biblioteca.json')
.then(res => res.json())
.then(callback);

function callback(data){
	console.log(data.titulo)
}

En un documento JSON correcto, los nombres de las propiedades deben ir entre comillas dobles.

biblioteca.json[
	{
		"titulo": "La Aventura",
		"autor": "Paco"
	},
	{
		"titulo":"Las cosas",
		"autor": "Pac"
	}
]

Petición POST con parámetros

fetch('http://localhost:13289/escenas/recuperar_escenas_obra', {
    method:'POST',
	headers: {
		"Content-Type": "application/json",
         },
    body:JSON.stringify({id:1})})
    .then(res => res.json())
    .then(escenas => {
      console.log(escenas);
    });

Ejercicio Fetch

Haz la siguiente petición:

https://swapi.co/api/people/

y recorre el resultado pata mostrar una lista con los datos recuperados

Ver ejemplo

Codigo para simplificar las peticiones

const API_URL = 'http://localhost:13289';

const fetchData = (url, options = {}) => {
  return fetch(API_URL + url, {
    headers: {
      'Content-Type': 'application/json'
    },
    ...options,
  }).then(res => res.json())
};

export const getJson = (url, params) => {
  const urlParams = params && Object.entries(params)
    .reduce((acc, [name, value]) => `${acc}${name}=${value}&` , '?')
    .slice(0, -1);
 return fetchData(url + urlParams);
};

export const postJson = (url, params) => {
  return fetchData(url, {
    method: 'POST',
    body:JSON.stringify(params)
  });
};
Para usarlo:import {getJson, postJson} from "../http";
  const escenas2 = getJson('/escenas/recuperar_escenas_obra', {id: 1, amor: 'mucho'})
};

Promise

Las promesas nos permiten gestionar código asincrónico. Las promesas de Javascript nativo, son similares a las promesas de jquery.

$.get('url.php', callback);

Antes de tener disponibles las promesas nativas para gestionar estas peticiones asíncronas, teníamos que usar este código:

function get(url, callback) {
	var req = new XMLHttpRequest();
	req.open('GET', url);

	req.onload = function() {
		if (req.status === 200) {
			callback(req.response);
		}
	};

	req.send();
}

get('url.php', callback)

El equivalente con promesas nativas de Javascript, sería esto:

fetch('url.php').then(callback);

Crear una promesa (ejecutar una función de forma asincrónica)

En Javascript todo el código es sincrónico. Las funciones asincrónicas se ejecutas después de las asincrónicas (no entre medias).

Definimos una función sincrónica

const add = (num1, num2) => num1 + num2;
const makeSumPromise = () => new Promise((resolve) => {
	resolve(add(3,2))
});

num contendrá el valor que devuelve el resolve

makeSumPromise.then(num => )

La función fetch devuelve una promesa

let promesa = fetch('url.php');
promesa.then(...)

Promise.race

Este método nos permite evaluar varios códigos (request, timeoutPromise, ...) creados a partir de la API de de Promise. El que termine de ejecutarse antes es el que se guardará como valor de retorno de la promise.

En el siguiente ejemplo, hago una carrera entre dos promises. Si la promise request tarda más que la promise timeoutPromise, el valor devuelto será el que devuelva un timeout.

Promise.race([
	request, // 1s
	timeoutPromise, // 0.5s

]).then((res) => {
	clearTimeout(timeoutId);
	return res;
});


const request = fetch(path); //El método fetch devuelve una promesa

const timeoutPromise = createRequestTimeout(setTimeoutReference);

let timeoutId;

const setTimeoutReference = (timeout) => { timeoutId = timeout; };

const createRequestTimeout = setTimeoutReference => new Promise((resolve, reject) => {
	setTimeoutReference(setTimeout(() => {
		reject(createHttpError({
			statusCode: 504,
			statusMessage: 'Request timeout error',
		}));
	}, 10000));
});

Import, export

Con variables

test.html<script src="main.js" type="module"></script>
main.jsimport Test, { x, y, z} from './variables.js';

console.log("Test: " + Test)
console.log("x: " + x)
variables.jsexport const x = 1;
export const y = 2;
export const z = 3;

const Test = 5;

export default Test;
Ver ejemplo variables

Con funciones

main.jsimport Sumar, { sumar} from './funciones.js';

console.log("Sumar: " + Sumar(3, 4))
console.log("sumar: " + sumar(3, 4))
funciones.jsexport const sumar = (a,b) => a + b;

export default  (a,b) =>  a * b; // Cuando exportamos de esta forma nunca ponemos el nombre de la función

/* El código anterior también se podía haber hecho de la siguiente forma:
export default  App;
const App (a,b) =>  a * b;
*/
Ver ejemplo funciones

modernizr

Modernizr es un paquete de detección de las capacidades de un navegador relativas a HTML5 y CSS3.

1) Desarrollo (Development)
Es un script completo, con todas las funcionalidades básicas de Modernizr, sin comprimir y con comentarios. Ideal para la fase de desarrollo de nuestro proyecto. Luego sería recomendable descargar un paquete idóneo para producción.

2) Producción (Production)
Para hacer esta descarga se ofrece una página donde podemos seleccionar las funcionalidades de detección que queremos incluir, porque estemos utilizándolas en nuestro proyecto.

Se recomienda cargar el script en el head.

Ejemplo

<script src="modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
	if(Modernizr.boxshadow) {
		alert("SI sombra caja");
	} else {
		alert("NO sombra caja");
	}

	if(Modernizr.canvas) {
		alert("SI canvas");
	} else {
		alert("NO canvas");
	}
</script>
Ver ejemplo de uso de modernizr

Polyfill

Un polyfill o polyfiller, es una pieza de código (o plugin) que proporciona la tecnología que se espera que el navegador proporcione de forma nativa.

Ejemplo autofocus

<script src="modernizr.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
		if (!Modernizr.input.autofocus) {
		$("input[autofocus]").focus(); 
	}
});
</script>
<input type="text" />

<input type="text" autofocus="autofocus"/>

<input type="text" />

<input type="text" />
Ver ejemplo modernizr autofocus
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!