JAVASCRIPT

Una función tiene esta pinta en javascript

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

Cuando la creamos

var cuadrado = elevarAlCuadrado(10);

Cuando la usamos

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?

  • Problemas mucho más pequeños.

 

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

 

  • Nos permite rehusar código.

 

  • Nos evita duplicar código que luego tendríamos 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

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);

Las Strings tienen funciones dentro de ellas ! 

En Javascript al igual que en otros lenguajes, podemos hacer muchas cosas con las strings. De hecho, tienen muchos métodos:

🤯

Funciones de las Strings

string.indexOf(string, indice)

string.lastIndexOf(string, indice)

string.includes(string, indice)

string.toLowerCase()

string.toUpperCase()

string.trim()

string.replace(string)

DOCU

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 : 26,

   email : 'yunior@squaads.com',

}

Objetos

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

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

console.log("El usuario se llama " + nombre + 
            "y tiene " + edad + " años");

Arrays

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

console.log( 'La primera fruta es ' + frutas[0]);

console.log( 'La segunda fruta es ' + frutas[1]);

console.log( 'La tercera fruta es ' + frutas[2]);

console.log(frutas);

Al igual que en otros lenguajes, las posiciones van desde el cero hasta el tamaño menos 1.

Si tenemos 5 elementos => 0 , 1 , 2 , 3 y 4

Arrays. Introducir valores

var frutas = [ "peras" , "manzanas" , "plátanos"];

frutas.push('kiwi'); // 4

console.log(frutas); // ["peras" , "manzanas" , "plátanos", "kiwi"]

frutas.pop(); // "kiwi"

console.log(frutas); // ["peras" , "manzanas" , "plátanos"]

El bucle for

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

for ( var indice = 0 ; indice < frutas.length ; indice++){
 
    console.log("La fruta es " + frutas[indice] );

}

for ( var indice = 0 ; indice < 3 ; indice++ )

Inicialización

condición

nuevo estado

El bucle for

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

var numeroFrutas = frutas.length;

for (var pos = 0; pos < numeroFrutas ; pos++){
 
 var fruta = frutas[pos];
 var numero = pos + 1;
 console.log("La fruta número " + numero + " es " + fruta);

}

while para recorrer arrays

var frutas = ["plátanos", "manzanas" , "peras"]
var contador = 0;
while ( contador < frutas.length ){
    var fruta = frutas[contador];
    alert("Fruta encontrada: " + fruta);
   
    contador++;

}

¡IMPORTANTÍSIMO!

Cuidado con los bucles infinitos y los whiles. Muchas RAM han muerto en el intento de hacer diapos como estas

Descargamos

https://github.com/YuniorGlez/EOI-FULLSTACK-EJ-02

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 

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, 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

¡ TIEMPO DE KATAS !

A programar

Mini ejercicio. Individual

Crea un array con el nombre de 3 platos

var frutas = [ "pizza", "macarrones", "chorizo" ] 

 

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

https://jsfiddle.net/

EJERCICIO 1

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 2

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

EJERCICIO 3

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' 

Ejercicio 4

Copia este array => LINK

Recorre el array y busca aquellos que tienen un correo acabado en .com y cuéntalos

Recorre el array y busca aquellos que tienen un correo acabado en .net y cuéntalos

Recorre el array y busca aquellos que tienen un correo acabado en .org y cuéntalos

Recorre el array y busca aquellos que tienen un correo acabado en .es y cuéntalos

Recorre el array y busca aquellos que tienen un correo acabado en .tv y cuéntalos

Ejercicio 5

Copia este array => LINK

Recorre el array guarda en un nuevo array todos los correos de uno en uno. De esta forma, tendrías un array de solo correos, es decir de strings.

Ejercicio 6

Crea un array, con 4 o 5 alumnos. Que cada alumno tenga nombre, apellidos y edad

 

Luego, haz un bucle que recorra el array y cuente cuantos tienen más de 26 años

 

Haced otro bucle que cuente cuantos tienen la letra 'a' en el nombre

 

Que se muestren los resultados por la consola

¡ CODIGO LIMPIO Y CON FUNCIONES !

Con foreachs. Máximo 10 líneas por función

callbacks

callback

Un callback (llamada de vuelta) es una función que recibe como argumento otra función para ejecutarla más tarde.

En el siguiente ejemplo, la función foo recibe por parámetro otra función, que es el callback. La función foo es la encargada de ejecutar el callback.

function foo(callback) { 
   //do something
   callback();
}

callback

En el siguiente ejemplo, la función foo recibe por parámetro otra función, que es el callback. La función foo es la encargada de ejecutar el callback.

function foo(callback) { 
   //do something
   callback();
}

function gritar(){
  console.log('AHHH !!! ')
}

foo(gritar)

Que pasa .. si ¿?

function foo(callback) { 
   //do something
   callback();
}

function gritar(){
  console.log('AHHH !!! ')
}

foo(gritar())

¿?

Que pasa .. si ¿?

function foo(callback) { 
   //do something
   callback();
}

function gritar(){
  console.log('AHHH !!! ')
}

foo(gritar())

¿?

Que pasa .. si ¿?

¿?

Que está mal?

Que está mal?

¿?

function foo(callback) { 
   //do something
   callback();
}

function gritar(){
  console.log('AHHH !!! ')
}

foo(gritar())

Que está mal?

¿?

function foo(callback) { 
   //do something
   callback();
}

function gritar(){
  console.log('AHHH !!! ')
}

foo(gritar())

Ahora mezclemos

Array + funciones

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" ];

    function muestroPorConsola(algo){
      console.log(algo);
    }

    users.forEach(muestroPorConsola);

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

foreach()

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

    function muestroPorConsola(algo){
      console.log(algo);
    }

    users.forEach(muestroPorConsola());

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

¿y esta?

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

    function muestroPorConsola(algo){
      console.log(algo);
    }

    users.forEach(muestroPorConsola);

foreach()

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

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

Live coding

Ya no hay más teoría sobre variables, bucles, arrays, funciones, objetos, etc.

¡ Ahora toca hacer dinámica nuestra web con todo esto que sabemos !

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

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:' 

Extra

onClick="metodo()"

<button onClick="peligro()"> ¡ NO ME PULSES !  </button>
function peligro(){
    alert('Peligro !!');
}

onClick="metodo(value)"

<li class="user"
    onClick="userSelected('Pepe')">
    <h2>Pepe</h2>
</li>
function userSelected(username){
    console.log(username);
}

En grupos

Volvemos al piedra papel tijeras

Ahora que sabes imprimir en el DOM usando el innerHTML y ahora que sabes detectar clicks.

¿Te animas a hacer un Piedra Papel y Tijeras con interfaz?