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

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

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

Objetos

var pizza = {};

var nombre = prompt('¿Qué pizza quieres comprar?');
var size = prompt('¿Qué tamaño quieres comprar S/M/L?');

var precio = 0;
if (size === 'L'){
  precio = 15;
}else if (size === 'M'){
  precio = 12;
}else if (size === 'S'){
  precio = 10;
}
pizza.nome = nombre;
pizza.size= size;
pizza.precio = precio;
console.log(pizza);

Objetos

var pizza = {};

var nombre = prompt('¿Qué pizza quieres comprar?');
var size = prompt('¿Qué tamaño quieres comprar S/M/L?');

var precio = 0;
if (size === 'L'){
  precio = 15;
}else if (size === 'M'){
  precio = 12;
}else if (size === 'S'){
  precio = 10;
}

pizza = {nombre : nombre, size : size, precio : precio};
console.log(pizza);

Objetos

var nombre = prompt('¿Qué pizza quieres comprar?');
var size = prompt('¿Qué tamaño quieres comprar S/M/L?');

var precio = 0;
if (size === 'L'){
  precio = 15;
}else if (size === 'M'){
  precio = 12;
}else if (size === 'S'){
  precio = 10;
}

var pizza = {nombre : nombre, size : size, precio : precio};
console.log(pizza);

Objetos

var nombre = prompt('¿Qué pizza quieres comprar?');
var size = prompt('¿Qué tamaño quieres comprar S/M/L?');

var precio = 0;
if (size === 'L'){
  precio = 15;
}else if (size === 'M'){
  precio = 12;
}else if (size === 'S'){
  precio = 10;
}

var pizza = {nombre, size, precio};
console.log(pizza);

Al tener mismo nombre no hace

falta escribirlo doble todo el rato

Arrays

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

console.log(frutas);

Un array es un contenedor donde puedo almacenar varios valores sueltos, donde lo que más importa es la posición simplemente

Arrays

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

console.log(frutas[0]);

console.log(frutas[1]);

console.log(frutas[2]);

Un array es un contenedor donde puedo almacenar varios valores sueltos, donde lo que más importa es la posición simplemente

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

Arrays. Introducir valores

var cantidad = prompt('¿Cuántas frutas quieres comprar?');
var frutas = [];
var compradas = 0;

while (compradas < cantidad){
  var nueva = prompt('¿Qué fruta?');
  frutas.push(nueva);
  compradas++; 
}

console.log('Has comprado un total de ' + frutas.length);

console.log(frutas);

Arrays. Introducir valores

var cantidad = prompt('¿Cuántas frutas quieres comprar?');
var frutas = [];

while (frutas.length < cantidad){
  var nueva = prompt('¿Qué fruta?');
  frutas.push(nueva);
}

console.log('Has comprado un total de ' + frutas.length);

console.log(frutas);

Arrays. Introducir valores

var cantidad = prompt('¿Cuántas frutas quieres comprar?');
var frutas = [];

while (frutas.length < cantidad){
  var nombre = prompt('¿Qué fruta?');
  var precio = prompt('¿Qué precio?');
  var cantidadDeFruta = prompt('¿Qué cantidad?');
  var nueva = { nombre: nombre, precio : precio, cantidad : cantidadDeFruta }; 
  frutas.push(nueva);
}

console.log('Has comprado un total de ' + frutas.length);

console.log(frutas);

Un poquito de repaso

Live coding :)

A trabajar :)

https://clm-programacion-frontend-2025-js-playground.lovable.app/

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

Ejercicio final individual

Math.random()

y/o