JAVASCRIPT

functions

Las funciones son una serie de instrucciones que se ejecutan al usar la función y que normalmente devuelven un resultado.


Por ejemplo, nosotros ya hemos usado funciones, en este caso hemos usado los console.log(), los alert() o los confirm() y prompt()

10

Una función tiene esta pinta en javascript

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

 

En javascript no existe el tipado ... sorry :)

 

Ptsss de momento, luego cuando lleguemos con angular verás ;)

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?

  • 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

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

while para recorrer arrays

var numeroDeFrutas = 3
var contador = 0;

while ( contador < numeroDeFrutas ){
    alert("Fruta número: " + contador);
    contador++;
}

¡IMPORTANTÍSIMO!

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

El bucle for

for ( var indice = 0 ; indice < 5 ; indice++){
    
 // Código

}

//Esto
indice++;

//es lo mismo que 
indice = indice + 1;

//y también
indice+=1;

//y casi lo mismo que esto
++indice

El bucle for

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

Inicialización

condición

nuevo estado

https://www.w3schools.com/js/js_loop_for.asp

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

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

A practicar

¿Recuerdas el ejercicio de preguntarle al usuario por 5 frutas?

 

Ahora lo vamos a hacer de la siguiente forma. Cuántas más funciones hagas y más sencillas sean mejor. 

 

Paso 1: Preguntale al usuario que cuántas frutas distintas va a comprar

Paso 2: Preguntale por cada una de las frutas por su nombre y su cantidad y su precio unitario 

Paso 3: cuando ya le has preguntado todas las veces muestra un mensaje que diga "Gracias. El precio total es: XX"

Sigamos

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)

El método indexOf() devuelve la posición, dentro del objeto String que realiza la llamada, de la primera ocurrencia del valor especificado, comenzando la búsqueda desde indice o -1 si no se encuentra dicho valor.

var myName = "Yunior";

if (myName.indexOf("Y") === -1){
  console.log("Your name doesn't have a Y")
}else{
  console.log("Your name has a Y")
}

IMPORTANTE

Cuándo en programación (no en todos los lenguajes, pero en javascript por ejemplo sí), hablamos de "posiciones" ...

 

Siempre empezamos contando como Zero la primera posición

"H o l a   m u n d o"

0

1

2

Funciones de las Strings

string.lastIndexOf(string, indice)

El método lastIndexOf() devuelve el índice, dentro del objeto String que realiza la llamada, de la última ocurrencia del valor especificado, comenzando la búsqueda desde indice o -1 si no se encuentra dicho valor.

var myName = "Yunior";

if (myName.lastIndexOf("Y") === -1){
  console.log("Your name doesn't have a Y")
}else{
  console.log("Your name has a Y")
}

Funciones de las Strings

string.search(regex)

El método search() ejecuta una búsqueda que encaje entre una expresión regular y el objeto String desde el que se llama.

Funciones de las Strings

string.includes(valor)

El método includes() ejecuta una búsqueda que encaje entre una expresión regular o un valor dado y el objeto String desde el que se llama y te devuelve true o false si este se encuentra en la string o si no se encuentra

Funciones de las Strings

string.substring(indiceA, indiceB)

A la docu ! 

Funciones de las Strings

string.substr(inicio, longitud)

A la docu ! 

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

Piedra papel tijeras v2.0

Hazlo de la siguiente manera. Declara y usa unas funciones así:

- Crea una función que sea la que pida al usuario una opción, y que incluso ella misma sea la que compruebe si el usuario no ha introducido una buena opción pregunte por otra nueva (con while no debería de ser muy complejo)

- Crea una función que reciba dos strings y que te diga si ha ganado el primero (Devolviendo 0) el segundo (devolviendo 1) o si es empate (devolviendo -1)

 

Luego, crea el ejercicio final como tal simplemente haciendo uso de estas funciones que has creado

 

Si te sobra tiempo, haz que la primera función pase a minúsculas la opción que se ha introducido. Es decir, si recogió "Piedra", que sea válido pero que devuelva "piedra" como resultado

Sigamos

Los objetos

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

}

Otro ejemplo

var coche = {

   marca : 'Mercedes',

   altura : '120cm',

   largo : '330cm',

   precio : 25000

}

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

Antes

var usuarios1 = 'Yunior';
var usuario2 = 'Juan';

Ahora

var usuario1 = {
       nombre : 'Yunior',
       edad : 26,
       email : 'yunior@squaads.com'
    };
var usuario2 = {
       nombre : 'Juan',
       edad : 37,
       email : 'juan@gmail.es'
    };

Referencia vs valor

primitivas vs NO primitivas

Lo que pasa a continuación ... no lo creerías

var user1 = { name : "Ana"};
var user2 = { name : "Cristina"};

user1 = user2;
console.log(user1.name) // Cristina

user1.name = "David";
console.log(user1.name) // David

console.log(user2.name) // David

Referencia vs valor

var user1 = { name : "Ana"};
var user2 = { name : "Osama"};

user1 = user2;

{ 

 

name : "Ana"

 

}

{ 

 

name : "Osama"

 

}

1. 

2. 

3. 

user 1 crea y apunta

user 2 crea y apunta

user 1 apunta

Referencia vs valor

var user1 = { name : "Ana"};
var user2 = { name : "Osama"};

user1 = user2;

{ 

 

name : "Ana"

 

}

{ 

 

name : "Osama"

 

}

1. 

2. 

3. 

user 1 crea y apunta

user 2 crea y apunta

user 1 apunta

Jugamos con objetos

Live example

Arrays

Los arrays son contenedores de datos pero en este caso de MUCHOS datos en una sola variable 

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

for ( var indice = 0 ; indice < 5 ; indice++){
    
 // Código

}

//Esto
indice++;

//es lo mismo que 
indice = indice + 1;

//y también
indice+=1;

//y casi lo mismo que esto
++indice

El bucle for

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

Inicialización

condición

nuevo estado

https://www.w3schools.com/js/js_loop_for.asp

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

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

EJEMPLOS

11

Ejemplo

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

for ( var i = 0; i < dnis.length ; i++){
   if (dnis[i] === "12345678A"){
        alert('Te encontré');
        encontradoEn = i;
    }
}

console.log('Lo encontramos en la posición ' + encontradoEn)

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

Para eliminar de un array

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

for ( var i = 0; i < dnis.length ; i++){
   if (dnis[i] === "12345678A"){
        alert('Te encontré');
        encontradoEn = i;
    }
}

dnis.splice(i , 1) //Elimina un elemento que se encuentra en la posición i

console.log('Lo encontramos en la posición ' + i)

El método splice() cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.

Ejercicio corto en directo

Creen un pequeño código donde:

 

  1. Creeamos un array, con 4 o 5 nombres de alumnos
  2. Hacemos un bucle que cuenta cuantos tienen la letra 'a' en el nombre

Ejercicio en grupos

Creen un pequeño código donde:

 

  1. Creen un array, con 4 o 5 alumnos. Que cada alumno tenga nombre, apellidos y edad
  2. Luego, haced un bucle que recorra el array y cuente cuantos tienen más de 26 años
  3. Haced otro bucle que cuente cuantos tienen la letra 'a' en el nombre
  4. Que se muestren los resultados por la consola

Descargamos

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

LIVE PROGRAMMING

SPEGC Agosto 2022 Full Stack. Javascript Tercer día :)

By Yunior González Santana

SPEGC Agosto 2022 Full Stack. Javascript Tercer día :)

Tercer día de Javascript del curso "Fullstack" online de la SPEGC 2022 Agosto

  • 179

More from Yunior González Santana