Mini repaso

¿ Qué aprenderemos en esta semana de JavaScript?

Aprenderemos todas las bases
Variables, controles de flujo, bucles
Funciones
Objetos
Manipulación del DOM (html)
JQuery
BootstrapJS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <title>Document</title>
</head>
<body>
  
  <script src="js/main.js"></script>
</body>
</html>


    alert('Hola, soy tu primera línea de JavaScript !');

js/main.js

Debajo is good ;)

       ... 
  <script src="js/main.js"></script>
</body>
</html>

       alert('Esto es un mensaje de alerta !');

alert() console.log() prompt() confirm()

console.log('Esto es un mensaje que aparece en la consola :O');

prompt( ' Dime tu edad ');

confirm( '¿Sabes español?');

Variables

De tipo boolean.
De tipo String.
De tipo number.
Null o Undefined

¿Y si ...?

var edadUsuario = prompt('Dime tu edad');

console.log(edadUsuario);

estructuras de control

var fruit = prompt('¿Cuál es tu fruta favorita?');; 

if (fruit == 'Pera') { 
    console.log('Hmmm que rico');
}

if (fruit == 'Manzana'){
    console.log('Que ricas las manzanas');
}else{
    console.log('¿Cómo no te van a gustar las manzanas?');
}

arrays

var frutas = [ "Peras" , "Manzanas", "Platanos"];

for ( var pos = 0; pos < frutas.length ; pos++ ){

    // En cada vuelta, puedo usar pos para leer una fruta

    var fruta = frutas[pos];

    console.log(`Encontre la fruta ${fruta}`);

}

El bucle for

var frutas = [ "peras" , "manzanas" , "platanos"];

for ( var indice = 0 ; indice < frutas.length ; indice++){
    
 console.log( 'La fruta número ' + (indice+1) + ' es ' + frutas[indice]);

}

for ( var indice = 0 ; indice < frutas.length ; indice++ )

Inizialicación

condición

nuevo estado

ARRAY. añadir y quitar

var frutas = [ "Peras" , "Manzanas", "Platanos"];

// Añadir una fruta nueva al array con push
frutas.push( "Limones" );

for ( var pos = 0; pos < frutas.length ; pos++ ){
    var fruta = frutas[pos];
    console.log(`Encontre la fruta ${fruta}`);
    if (fruta == "Limones"){
        alert('Puagg, no me gustan los limones');
        // Eliminar algo de un array con splice
        frutas.splice(pos,1);
    }
}

¿Qué podíamos hacer con JavaScript?

MANIPULACIÓN DEL DOM/HTML

JavaScript y las variables globales

Cuando desarrollamos una web, podemos acceder a unas determinadas variables y funciones que ya están creadas por defecto.

Por ejemplo, cuando usábamos el console.log() o el alert eran funciones globales

Document

var nuestraWeb = document.body;

nuestraWeb.innerHTML = `<h1> Nuevo HTML</h1>`

var mensaje = "Mi nombre";

mensaje = mensaje + ' no es ';

mensaje += 'Miguel';

console.log(mensaje) // Mi nombre no es Miguel

Pausa informativa

innerHTML + getElementById

var results = document.getElementById('results');

var numero = 25;

results.innerHTML += `<p> Nuevo resultado = ${numero}</p>`;

<body>
    <div id="results">
        <h1> Zona de resultados <h1>
        
    </div>
</body>

innerHTML + getElementById

var displaySection = document.getElementById('display');

var username = prompt(`Hola, ¿cómo te llamas?`);

displaySection.innerHTML += `<h1> Bienvenido ${username}</h1>`;

<body>
    <div id="display"></div>
</body>

Ejercicio

Ahora que sabemos escribir en el HTML, vamos a darle uso.

Crea un article en el html con el id "myArticuloDeJavaScript"

Desde el código de JavaScript, accede a el mediante el ID y guardalo en una variable. 

A continuación, añadele estas tres cosas:
- Un h2 con un título.
- Un párrafo con cualquier contenido.
- Un blockquote con una frase

Diapo de teoría

Resultado


var articulo = document.getElementById('myArticuloDeJavaScript');

//articulo.innerHTML = '<h2>Mi titulo </h2>';
//articulo.innerHTML += '<p>Mi parrafito super molon </p>';
//articulo.innerHTML += '<blockquote>Una cita  </blockquote>';

articulo.innerHTML = `
		<h2>Este es el titular</h2>
		<p>Esto es el contenido super molon que hay en el parrafo</p>
		<blockquote> Esta es una cita </blockquote>
	`;

articulo.innerHTML = '<h2>Mi titulo </h2> ' + 'p ' + 'block ';

Ejercicio

Crea dos elementos en el HTML con los identificadores que prefieras para poder acceder a ellos desde javascript luego.

Pídele al usuario su nombre y luego su edad. Añade a uno de los dos elementos de la pantalla un mensaje de bienvenida con su nombre y con un formato de <h2>. 

En el otro bloque, añade un mensaje de 'No deberías entrar a esta web si eres menor de edad, ¿estás seguro?' y además dos botones (<button>) uno que ponga SI y otro NO. (añádelo solamente si era menor de 18)

Diapo de teoría

Ejercicio

Crea un elemento en el HTML con el identificador 'listaDeFrutas'

Crea un array vacío que se llamará frutas. INVESTIGA como crear un array vacío si no lo sabes ;) #GoogleIsYourFriend

Pídele al usuario que introduzca sus 3 frutas favoritas y ve añadiéndolas al array

Ahora viene lo bueno ;) en ese elemento que hay en el DOM, añade una lista dónde aparezcan cada una de las frutas y una cabezera que diga 'Estas son tus frutas favoritas:'

SOLUCION

var frutas = [];
var fruta1 = prompt('Dime una fruta favorita');
var fruta2 = prompt('Dime otra fruta favorita');
var fruta3 = prompt('Dime otra fruta favorita');
frutas.push(fruta1)
frutas.push(fruta2)
frutas.push(fruta3)
// frutas.push(fruta1, fruta2, fruta3)
var pantalla = document.getElementById('listaDeFrutas');
pantalla.innerHTML = '<h2>estas son tus frutas favoritas</h2>';
pantalla.innerHTML +=  '<ul>';
/*
pantalla.innerHTML +=  '<li>' +  frutas[0] + '</li>';
pantalla.innerHTML +=  '<li>' +  frutas[1] + '</li>';
pantalla.innerHTML +=  '<li>' +  frutas[2] + '</li>';
*/
for (var i = 0 ; i < frutas.length ; i++){
	pantalla.innerHTML +=  '<li>' +  frutas[i] + '</li>';
}
pantalla.innerHTML +=  '</ul>';

Ejercicio

¿Se te ocurre como darle estilo a esa lista?

Consigue que la lista aparezca con un diseño similar a este

1. Dale estilo a los <li>

2. Dale estilo mediante clases.

3. Dale estilo a la <ul> . Si notas algo raro, mira este enlace ;) https://stackoverflow.com/a/26728777

Sigamos

functions

Las funciones son una serie de instrucciones que se ejecutan al llamarla y que normalmente devuelven un resultado.


Por ejemplo, nosotros ya hemos usado funciones, en este caso hemos usado los console.log(), los alert() o incluso el .getElementById( );

Una función tiene esta pinta

function elevarAlCuadrado ( numero ) {
  return numero * numero ;
}

Cuando la creamos

var cuadrado = elevarAlCuadrado(10);

Cuando la usamos

function elevarAlCuadrado ( numero ) {
  return numero * numero ;
}

Este sería el nombre de la función y es el que usaremos para llamarla.

Una función tiene esta pinta

function elevarAlCuadrado ( numero ) {
  return numero * numero ;
}

Dentro del paréntesis están los "parámetros" de la función.

Esto son valores que nos pasan al llamarnos y que podremos usar dentro de la función

Una función tiene esta pinta

function elevarAlCuadrado ( numero ) {
  return numero * numero ;
}

Si nuestra función devuelve hacia afuera un resultado debemos escribir un return y a la derecha el resultado.

En este caso la función elevarAlCuadrado devuelve la multiplicación de un número por si mismo.

Una función tiene esta pinta

function elevarAlCuadrado ( entrada ) {
  return entrada * entrada ;
}

var numero = 12;

var resultado = elevarAlCuadrado( numero ); 

console.log(`${numero} al cuadrado es ${resultado}`);

¿para que nos sirven?

Nos permite separar los problemas en problemas mucho más pequeños.

Nos aporta mucha más semántica a nuestro código.

Nos evita duplicar código que luego tendremos que mantener.

Nos facilita el trabajo en equipo.

Entender un código de JavaScript de 200 líneas que no usa funciones ... créeme .. que no te lo desearía ni aunque fueras mi peor enemigo

Con los ejemplos que ya hemos hechos

var DNIs = ['45778863P', '45778864P'];

var DNIUser = prompt('¿Cúal es tu DNI?');

for (var i = 0; i < DNIs.length; i++){
    if( dnis[i] == DNIUser ){
      dnis.splice(i,1);
      alert('He encontrado el DNI, así que lo borro');
    }
}

Con los ejemplos que ya hemos hechos

var DNIs = ['45778863P', '45778864P'];

var DNIUser = getDNI();

checkAndRemoveDNIUser(DNIs, DNIUser);

Con los ejemplos que ya hemos hechos

function getDNI(){
    var dni = prompt('Por favor, ¿podrías indicarnos tu DNI?');
    // Aqui también podríamos validar que el DNI es correcto
    return dni;
}

function getDNIUltraPowered(){
    
    var dni = prompt('Por favor, ¿podrías indicarnos tu DNI?');
    
    var DNIValid = Regex.IsMatch(dni, @"\d{8}[a-zA-Z]$") ; 
    if (!DNIValid){
        alert('DNI INCORRECTO');
        return getDNIUltraPowered();
    }else{
        return dni;
    }
}

Con los ejemplos que ya hemos hechos

function checkAndRemoveDNIUser(dnis, dni){

  for (var i = 0; i < dnis.length; i++){
    if( dnis[i] == dni ){
      dnis.splice(i,1);
      alert('He encontrado el DNI, así que lo borro');
    }
  }
}

Si hubiésemos hecho todo esto que hicimos suelto :S

var DNIs = ['45778863P', '45778864P'];

var dni = prompt('Por favor, ¿podrías indicarnos tu DNI?');

var DNIValid = Regex.IsMatch(dni, @"\d{8}[a-zA-Z]$") ; 

while( !DNIValid ){
   alert('DNI INCORRECTO');
   dni = prompt('Por favor, ¿podrías indicarnos tu DNI?');
   DNIValid = Regex.IsMatch(dni, @"\d{8}[a-zA-Z]$") ; 
}

for (var i = 0; i < DNIs.length; i++){
  if( DNIs[i] == dni ){
    DNIs.splice(i,1);
    alert('He encontrado el DNI, así que lo borro');
  }
}

"Sin funciones" vs con funciones

+600 líneas en un único .js

ficheros menores de 70 líneas y funciones menores de 15 líneas

while

var nombre = prompt('Dime tu nombre');

while ( nombre == 'Miguel'){
    
    alert('Lo siento, Miguel no puede pasar');

    nombre = prompt('Dime otro nombre');

}

alert('Ahora si puedes pasar' + nombre);

Ejercicio

Pídele al usuario que indique cuantos plátanos quiere comprar. NO PUEDE introducir cualquier número, solo puede escoger un racimo de plátanos, así que ha de escoger un número mayor de 5

Recógelo y verifica que es un número que sea mayor que 5, sino pídele otro hasta que introduzca un número válido

Recuerda el bucle while para preguntar hasta que sea mayor que 5

Ejercicio

Partiendo del ejercicio anterior, realiza un bucle for que de tantas vueltas como plátanos y en cada vuelta imprime el siguiente mensaje en la consola:

'Hmmm, que rico estaba el plátano número N'

Ejercicio

Partiendo del ejercicio anterior,

destina un elemento en el DOM para escribir mensajes, y escribe una '<p>' cada vez que se come un plátano que ponga "El Plátano N ha sido comido"

Ejercicio

Partiendo del ejercicio anterior y al terminar, pregúntale al usuario si quiere volver a comprar otro racimo y si responde que sí vuelve a hacer lo mismo.

Resuelto

var pregunta = true; 
while (pregunta == true ) {	
	var platanos = prompt('¿Cuántos platanos quieres comprar? (min. 6)');
	while (platanos <= 5) {
            alert('El número era menor que 6');
	    platanos = prompt('Dime otro numero');
	}
	var pantalla = document.getElementById('mensajes');
	pantalla.innerHTML = '';
	for (var i = 0; i < platanos; i++) {
	    console.log('Hmmm que rico estaba el platano ' + (i + 1));
	    pantalla.innerHTML += `<p>El platano ${i + 1} ha sido comido</p>`;
	}
	pregunta = confirm('¿Quiéres volver a comprar?');
}

¿Cómo lo ves?

¿Crees que podríamos dividir este problema en pequeñas funciones?

¿Qué partes de tu código crees que podrías separar en una función?

Recuerda, divide y vencerás.

Ejercicio

Trata de pasar el código anterior a pequeñas funciones

PISTA: Se me ocurren las siguientes funciones:

- escogerRacimo()

- comerRacimo()

Directo

Vamos a ver como resolvería yo este problema y verán que sencillo es paso a paso con funciones

SOLUCIÓN

var racimo = recogerRacimo();
comerRacimo(racimo);

function recogerRacimo() {
    var racimo = pedirNumero();
    while (racimo < 6) {
    	alert('Solo hay racimos con más de 6 plátanos');
    	racimo = pedirNumero();
    }
    return racimo;
}

function comerRacimo(racimo) {
    var display = document.getElementById('mensajes');
    for (var i = 1; i <= racimo; i++) {
	display.innerHTML += `
       	    <p>Me he comido el plátano ${i}</p>
  	`;
    }
}

function pedirNumero(){ 
    return prompt('¿Cuántos plátanos quieres? (min 6)');
}

Ejercicio

Ahora imaginemos, que al día siguiente el frutero solo tiene racimos mayores de 7 o que otro día tiene racimos solo de 3 a 7 plátanos. ¿cómo cambiarías el código para que funcione en este caso?

function escogerRacimo(){ 
    var minimo = 7;
    var numero = pedirNumero(minimo);
    while( numero <= minimo ){
        alert(`Solo puede ser mayor que ${minimo}`);
        numero = pedirNumero(minimo);
    }
    return numero;
}

function escogerRacimo( minimo, maximo ){ 
    var numero = pedirNumero(minimo, maximo);
    while( numero < minimo || numero > maximo){
        alert(`Solo puede ser mayor que ${minimo} 
                y menor que ${maximo}`);
        numero = pedirNumero(minimo, maximo);
    }
    return numero;
}

PARAMETRIZAR UNA FUNCIÓN

80%

Hemos visto

Variables primitivas (boolean, number, string)

Estructuras de control (el if y el switch)

el bucle for y el while

los Arrays

y las funciones

el bucle while

var numeroDeVueltas = 5;

while (numeroDeVueltas > 0) {

    numeroDeVueltas--;

    console.log(`Voy a dar una vuelta, quedan ${numeroDeVueltas}`);
}

¡ IMPORTANTÍSISISISISISIMO !

Salvo que quieras perder tu RAM con un bucle infinito y que tu PC eche a volar

otro bucle más el forEach()

El forEach es un bucle que nos permite recorrer de manera MUCHO MÁS SENCILLA un array

AUNQUE TE AVISO, LA PRIMERA VEZ TE VA A ASUSTAR ;) AVISADO QUEDAS

foreach()

    var users = [ "Yunior", "Miguel" ];

    users.forEach( function (user) { 
        console.log(user);
    });

El método forEach() ejecuta la función indicada una vez por cada elemento del array.

foreach()

var users = [ "Yunior", "Miguel" ];

users.forEach( function (user) { 
    console.log(user);
});

foreach()

var users = [ "Yunior", "Miguel" ];

users.forEach( function (user, indice) { 
    console.log(`usuario  = ${user}`);
    console.log(`posicion = ${indice}`);
});

Si necesito usar la posición, puedo pedirle al forEach que me diga las posiciones.

Para eso, le indico una función con dos parámetros.

Ejemplo

var dnis = [ "44552342B", "12345678A" ];

dnis.forEach( function (dni) { 
    if (dni == "12345678A"){
        alert('Te encontré');
    } 
});

Recorrer los DNIs y si encuentro el 12345678A muestra un mensaje

Ejemplo

var dnis = [ "44552342B", "12345678A" ];

dnis.forEach( function (dni, indice) { 
    if (dni == "12345678A"){
        dnis.splice(indice, 1);
    } 
});

Recorrer los DNIS y si encuentro el 12345678A lo borramos

Mini ejercicio

Create un array con el nombre de 3 frutas

Recorre el array con un forEach y muestra en la consola cada fruta

Mini ejercicio

Create un array con el nombre de 3 frutas

Recorre el array con un forEach y muestra en la consola cada fruta

Si encuentras la fruta "Manzana" muestra en la consola el mensaje las manzanas no me gustan

Sigamos

Los objetos

¿Cómo definirías en la vida real un coche?

Imagínate que me tienes que describir el último coche en el que te montaste, ¿qué cosas dirías para describirlo?

¿Dirías que todos son coches?

¿Qué cosas los distingue?

Objetos

Los objetos nacen con el objetivo de poder representar datos más complejos y acercarlos a la realidad.

Por ejemplo, una persona o un usuario no solo tiene nombre y no se representaría al completo con una string con su nombre, para ello creamos un objeto que tiene varias "propiedades"

var usuario = {

   nombre : 'Yunior',

   edad : 23,

   email : 'yunior@getinko.com',

   frutasFavoritas: ['Fresa','Sandia']

}

Otro ejemplo

var coche = {

   marca : 'Mercedes',

   altura : '120cm',

   largo : '330cm',

   precio : 25000

}

Objetos

var usuario = {
   nombre : 'Yunior',
   edad : 23,
   email : 'yunior@getinko.com'
}

var nombre = usuario.nombre;
var edad = usuario.edad;

console.log(`El usuario se llama ${nombre}
             y tiene ${edad} años`);

Antes

var usuarios = ['Yunior','Miguel'];

Objetos

var yunior = {
       nombre : 'Yunior',
       edad : 23,
       email : 'yunior@getinko.com'
    };
var miguel = {
       nombre : 'Miguel',
       edad : 35,
       email : 'miguel@mrbug.es'
    };

var usuarios = [ yunior, miguel ];

Objetos

var usuarios = [ 
    {
       nombre : 'Yunior',
       edad : 23,
       email : 'yunior@getinko.com'
    },
    {
       nombre : 'Miguel',
       edad : 35,
       email : 'miguel@mrbug.es'
    }
];

Objetos

var usuarios = [
    {
       nombre : 'Yunior',
       edad : 23,
       email : 'yunior@getinko.com'
    },{
       nombre : 'Miguel',
       edad : 35,
       email : 'miguel@mrbug.es'
    }
];
    
usuarios.forEach( function ( user ) {
   console.log(`El usuario ${user.nombre}
                tiene ${user.edad} años`);
});

Despacito

EJERCICIO

Crea una variable llamada pizza dónde vamos a almacenar una pizza.

Esta pizza:

Se llama 'Pizza Margarita'
Además todas las pizzas en nuestra pizzería tienen un tamaño que puede ser 'S', 'M' o 'XL', esta pizza que vamos a crear es de tamaño M.
Su precio es de 15'50€

Muestra en consola un mensaje que describa la pizza.

EJERCICIO

Ahora preguntale al usuario que pizza quiere comprar. Deja que introduzca el nombre que quiera, que luego introduzca un valor del tamaño de la pizza (pídele que sea S M o XL) y por último, crea una pizza con esas dos carácteristicas y con uno de estos precios según el tamaño:

Si escogió S valdría 7,50€

Si escogió M valdría 12€

Si escogió XL valdría 17€

Por último muestra un mensaje en la consola como en el anterior ejercicio

Solución


//// SOLUCION 1 
var nombrePizza = prompt('¿Nombre?');
var tamanioPizza = prompt('¿Tamanio? (S, M , XL)');

  
if (tamanioPizza == 'S'){
	var precio = 7.50;
}else if (tamanioPizza == 'M'){
	var precio = 12;
}else if (tamanioPizza == 'XL'){ 
	var precio = 17;
}

var pizza = { 
	nombre : nombrePizza,
	precio : precio,
	tamanio : tamanioPizza
}

console.log(`La pizza con nombre ${pizza.nombre} 
		y tamanio ${pizza.tamanio} vale ${pizza.precio}`);
// SOLUCION 1 FINALIZADA 



// SOLUCION 2 

var nombrePizza = prompt('¿Nombre?');
var tamanioPizza = prompt('¿Tamanio? (S, M , XL)');

var pizza = {
	nombre : nombrePizza,
	tamanio : tamanioPizza
}
 
if (pizza.tamanio == 'S'){
	pizza.precio = 7.50;
}else if (pizza.tamanio == 'M'){
	pizza.precio = 12;
}else if (pizza.tamanio == 'XL'){ 
	pizza.precio = 17;
}

// SOLUCION 2 FINALIZADA


// SOLUCION 3 
var pizza = {
	nombre : prompt('¿Nombre?'),
	tamanio : prompt('¿Tamanio? (S, M , XL)')
}
 
if (pizza.tamanio == 'S'){
	pizza.precio = 7.50;
}else if (pizza.tamanio == 'M'){
	pizza.precio = 12;
}else if (pizza.tamanio == 'XL'){ 
	pizza.precio = 17;
}
// SOLUCION 3 


// SOLUCION 4 LOCA DE TOMAS. PREGUNTAR A TOMAS@GMAIL.COM 
var pizza = {
	nombre : prompt('¿Nombre?'),
	tamanio : prompt('¿Tamanio? (S, M , XL)'),
	precio : (pizza.tamanio == 'S')? 7.50 : ((pizza.tamanio == 'M')? 12: 17);
}
// SOLUCION 4 FINALIZADA  LOCA DE TOMAS. PREGUNTAR A TOMAS@GMAIL.COM

EJERCICIO

Usa el siguiente array de pizzas

var pizzas = [ 
    { 
      name : 'Margarita',
      size : 'S',
      price : 4.50
    },{ 
      name : 'Marinera',
      size : 'S',
      price : 5.50
    },{ 
      name : 'Margarita',
      size : 'M',
      price : 7.50
    }
]

Recorre el array de las pizzas y muestra un mensaje descriptivo para cada una de ellas.

EXTRA: al terminar, muestra un mensaje que diga, el precio total de las 3 pizzas es de 'XX.XX euros'

Último apunte

Hay una cosa muy importante que se llaman o bien "los bloques" o "los entornos" o "el scope"

Cuando creamos una variable o definimos una función, solo puede ser usada en su entorno o en un entorno interior a él

Entornos

var barbacoa = 'Pizza Barbacoa';


function comerPizzas(){
    var piña = 'Pizza con piña';
    
    console.log(`Me puedo comer la ${barbacoa}`);

    console.log(`Me puedo comer la ${piña}`);

    
}

function otra () {
   // console.log(`Me puedo comer la ${piña}`); XX ¡ BOMB ! 
   console.log(`Me puedo comer la ${barbacoa}`);
}

Extra: Entornos

var barbacoa = 'Pizza Barbacoa';


function comerPizzas(){
    var piña = 'Pizza con piña';

    if (true) {
        var huevo = 'Pizza con huevo';
        console.log(`Me puedo comer la ${barbacoa}`);

        console.log(`Me puedo comer la ${piña}`);

        console.log(`Me puedo comer la ${huevo}`);
    }
    
    console.log(`Me puedo comer la ${barbacoa}`);

    console.log(`Me puedo comer la ${piña}`);

    console.log(`Me puedo comer la ${huevo}`);
    
}

function otra () {
   // console.log(`Me puedo comer la ${piña}`); XX ¡ BOMB ! 
   // console.log(`Me puedo comer la ${huevo}`); XX ¡ BOMB ! 
   console.log(`Me puedo comer la ${barbacoa}`);
}