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

¡ 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 

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"

Una función tiene esta pinta en javascript

function elevarAlCuadrado( numero ) {
  return numero * numero ;
}

Cuando la creamos

var cuadrado = elevarAlCuadrado(10);

Cuando la usamos

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

Funciones de las Strings

string.indexOf(string, indice)

Las usamos en directo

string.includes(string, indice)

string.toLowerCase()

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

Descargamos

https://github.com/YuniorGlez/clm-2025-programacion-web-dia03​

Lo forkeamos o clonamos

Ejecutamos el index.html con un live-server

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

Curso de Frontend CLM Marzo 2025. Javascript Tercer día :)

By Yunior González Santana

Curso de Frontend CLM Marzo 2025. Javascript Tercer día :)

Tercer día de Curso de Frontend CLM Marzo 2025 Javascript

  • 141

More from Yunior González Santana