JAVASCRIPT

Las variables en JS

Pueden ser de muchos tipos distintos: 

  • De tipo boolean. 
  • De tipo String.
  • De tipo number.
  • Null o Undefined
  • Object
  • Array
  • Function

Resumen

var numero = 23; 

var frase = "ola k ase?";

var boleano = false;

var condicion = boleano == false;

var temp1;

Creamos una variable de esta forma

var  nombre = valorInicial

ó

var nombre;

Condiciones

var edadYunior = 26;
var edadMiguel = 38;

edadYunior < edadMiguel // true

edadYunior > edadMiguel // false

edadYunior == edadMiguel // false

edadYunior == edadYunior // true

edadYunior != edadYunior // false

var otraEdadYunior = "26";

If, else y else if

if ( 26 < 35) { 
    console.log('26 es menor que 35');
}else if ( true ) {
    console.log("Hmmm, ¿me ejecutaría?");
}else {
    console.log('26 no es menor que 36');
}

Prompt, alert, confirm

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

var laConozco = confirm("Conoces la edad de Yunior?");

if (laConozco) { 
    var edadDeYunior = prompt("Dime su edad");
    if (edadDeYunior > edadUsuario){
        ..
    }else ...
}else{
    alert("Se acabo el programa");
}

condiciones múltiples

Podemos exigir que se cumplan dos condiciones a la vez. AND

if ( condicion1 && condicion2 )

O que al menos se cumpla alguna de las condiciones. OR

if ( condicion1 || condicion2 )

¿cuáles son verdad?

var esMenorDeEdad = 10 < 18;
var laTrampa = "false";
 
(esMenorDeEdad == true);
(esMenorDeEdad == 'true');
(esMenorDeEdad);
(esMenorDeEdad != false);
(esMenorDeEdad == false);
(!esMenorDeEdad)
(!esMenorDeEdad != false);
(!esMenorDeEdad == false);
(laTrampa == true);
(laTrampa)
(laTrampa === true || laTrampa == 'true')

ejecútalo en una consola de chrome

Mini ejercicio. MOB PROGRAMMING

Piedra papel tijeras

Recoger por pantalla con 2 prompts la respuesta a la pregunta :

Escoge entre : "Piedra/Papel/Tijeras"
 

Escoge entre : "Piedra/Papel/Tijeras"

 

Si el usuario introduce algún valor inválido muéstrale un alert avisándole del error. En ese caso simplemente el usuario refrescará la pantalla.

 

 

Ahora, con esos 2 valores que has guardado, pues haz el juego de piedra papel tijeras y di quien ha sido el ganador con un alert

almacenando condiciones y ! 


var edad = prompt('¿Cuántos años tienes');

var esMenorDeEdad =  (edad < 18) ;

if (esMenorDeEdad) {
    console.log('Atención! va a entrar un menor');
}

if (!esMenorDeEdad){
    console.log('NO es menor de edad');
}

... 
// A lot of code here
...

if (!esMenorDeEdad){
    // Do more things
}

Pero ¿por qué iba a almacenar condiciones en variables? Vaya chorrada yunior 

Error amigo, a veces es necesario

¡ Además que lo podrás rehusar ! 

Hay que tener cuidado al operar con las variables.

var a = 20;
var b = 30;
console.log( a + b )
console.log( a - b )
console.log( a * b )
var a = 20;
var b = "30";
console.log( a + b )
console.log( a - b )
console.log( b - a )
console.log( a * b )

:) 

:(

typeof

var edad = prompt('Dime cual es tu edad');

console.log(edad);

var cumple = edad + 1;

console.log(cumple);


console.log('Vas a cumplir' + cumple + ' años');

// ¡ WTF ! 
// ¿Se te ocurre como solucionar ese problema?

typeof

var edad = prompt('Dime cual es tu edad');

console.log(edad);

var cumple = edad + 1;

console.log(typeof cumple); // String

console.log('Vas a cumplir' + cumple + ' años');

// ¡ WTF ! 
// ¿Se te ocurre como solucionar ese problema?

parseInt

var edad = prompt('Dime cual es tu edad');

edad = parseInt(edad);

var cumple = edad + 1;

console.log(typeof cumple); // Number

console.log('Vas a cumplir ' + cumple + ' años');

// Ufff menos mal :S pensé que me hacía muy viejo

operaciones

var edad = prompt('Dime cual es tu edad');
var nombre = prompt('Dime tu nombre');

console.log("El usuario tiene " + edad + " años");

console.log(edad + 1); // ¿?

console.log(edad - 1); // ¿?

console.log(nombre + 1); // Nombre1

console.log(nombre - 1); // NaN

// Lo de abajo queda gracioso, pégalo en la consola
console.log(Array(16).join(nombre -1) + ' Batman !');

También tenemos el switch

estructuras de control de flujo

var diaDeLaSemana = prompt('¿Día de la semana favorito? del 1 al 7'); 
switch (diaDeLaSemana) {
    case "1":
        console.log('Es el lunes');
        break;
    case "2":
        console.log('Es el martes');
        break;
    case "3":
        console.log('Es el miércoles');
        break;
    case "4":
        console.log('Es el jueves');
        break;
    case "5":
        console.log('Es el viernes');
        break;
    case "6":
        console.log('Es el sábado');
        break;
    case "7":
        console.log('Es el domingo');
        break;
    default:
        console.log('¿Se te fue de las manos la fiesta del sábado?');
}

El codigo se complica

Ya sabemos recoger valores con el prompt.

Ya sabemos operar con variables y sumar, restar, multiplicar, etc

Vamos a hacer el siguiente ejercicio

Un script, que le pregunte al usuario por el nombre de una fruta, por la cantidad que ha comprado y por último por el precio unitario de esa fruta. Así, hasta 5 veces sí responde que quiere seguir comprando (esto pregúntaselo con un confirm)

 

Una vez el usuario ha introducido hasta 5 compras (siempre y cuando haya dicho 4 veces que sí que quería comprar más) sácale en un alert el precio total de su cesta

IMPORTANTE: no usar bucles ni nada que no hayamos visto aún

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

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 Segundo día :)

By Yunior González Santana

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

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

  • 201

More from Yunior González Santana