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

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

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

¡ A trabajar !

Clonate de nuevo este repositorio en una carpeta nueva

https://github.com/YuniorGlez/dia-01-javascript

 

Sitúate luego en la rama que se llama teaching/04-repaso-funciones-objetos-arrays-callbacks

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

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?