JAVASCRIPT

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 contar

var contador = 1;

while (contador <= 10) {
  
  console.log("Número: " + contador);

  contador = contador + 1;

}

¡IMPORTANTÍSIMO!

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

atajo para los while y los bucles en general

hay una forma de sumar + 1 facilmente en javascript y es muy usada

contador++

while para contar

var contador = 1;

while (contador <= 10) {
  
  console.log("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

otro ejemplo de while

var cuenta = 10;

while (cuenta > 0) {
  
  console.log("Cuenta regresiva: " + cuenta);

  cuenta = cuenta - 1;

}

console.log("¡Despegue!");

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


for (var i = 1; i <= 10; i++) {

  console.log("Número: " + i);

}

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

Inicialización

condición

nuevo estado

El bucle for

var máximo = 10;
var i;

for (i = 1; i <= máximo; i++) {

  console.log("Número: " + i);

}

¡ A trabajar !

Ejercicio: "Piedra, Papel, Tijeras, Lagarto, Spock" con Funciones Básicas

Enunciado

El objetivo del ejercicio es que volvamos a crear el juego donde:

  1. Recojamos dos valores de los dos jugadores
  2. Validemos que las opciones ingresadas sean válidas.
  3. Volvemos a repetir la petición si el jugador no ha introducido bien el valor
  4. Se determine el ganador siguiendo las reglas del juego.
  5. Se muestre el resultado final.

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

}

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"

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.

¡ 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/02-day-functions 

Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Cuarto día :)

By Yunior González Santana

Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Cuarto día :)

Cuarto día de Javascript del curso de "EOI Telefónica Noviembre 2024" online.

  • 156

More from Yunior González Santana