Estructuras repetitivas: for

Clase 16 de 55 • Fundamentos de JavaScript 2018

Contenido del curso

Introducción al curso

Primeros pasos en JavaScript

Estructuras de Control y Funciones

Arrays

Programación Orientada a Objetos en JavaScript

Asincronismo

Juego de HTML

Complementos

Tomar examen

Resumen

En esta clase estudiaremos una de las estructuras básicas de control. El bucle for, se utiliza para repetir una o más instrucciones un determinado número de veces.

Para escribir un bucle for se coloca la palabra for seguida de paréntesis y llaves. Ej. for( ){ }. Dentro de los paréntesis irán las condiciones para ejecutar el bucle, y dentro las llaves irán las instrucciones que se deben repetir.

En este ejemplo la variable i la utilizamos como contador.

Comentarios

Daniel Muñoz Martín

student•

En el curso anterior de Fundamentos, Sacha enseñaba cómo podemos generar un número aleatorio entre dos números que queramos:

const numMax = 10
const numMin = 1

const numRandom = () => Math.round(Math.random() * (numMax - numMin) + numMin)
// redondeamos el decimal que nos devuelve envolviendo todo en Math.round

numRandom() // 8
numRandom() // 5
numRandom() // 1
numRandom() // 10

Espero que les sea útil para futuras ideas ! 👍🏻

Carlos López Brú

student•

Excelente amigo!

Christopher Flores

student•

Creo que fue Freddy ? XD

Daniel Páez

student•

Un codigo ordenado…

/*

Mis principios de programacion:
1. Un programador divide problemas grandes en problemas chiquitos
2. Cada 4 lineas de codigo comento mi codigo
*/

//Imprimiendo algo en la consola
console.log("inicializando archivo");

/*Declaración de objetos
=========================================*/

//Creando el objeto persona
var daniel = {
	nombre: "Daniel",
	apellido: "Páez",
	edad: 18,	
	peso: 55
}

/*Declaración de variables
=========================================*/
var diasDelAño = 365;
var incrementoPeso = 0.200 //0.200 gramos


/*Declaración de funciones
=========================================*/

/**/

//Funcion donde se aumenta el valor del peso del objeto persona
const aumentarDePeso = persona => persona.peso += incrementoPeso;

//Funcion donde se baja el valor del peso del objeto persona
const bajarDePeso = persona => persona.peso -= incrementoPeso;


function cambioPeso(persona) {

	//este codigo se ejecutara TODOS LOS DIAS DEL AÑO
	for(var i = 1; i <= diasDelAño ; i++) {

		var ramdom = Math.random();
		//una variable guarda un numero aleatorio entre 0 y 1

		//este codigo se ejecutara el 25% de las veces
		if( ramdom <= 0.25) {
			//aumenta de peso
			aumentarDePeso(persona)
		}

		else if (ramdom <= 0.50 ) {
			//baja de peso
			bajarDePeso(persona)
		}

	}

}



/*Consola y consultas
=========================================*/
console.log(`Al inicio del año ${daniel.nombre} pesa ${daniel.peso} kg`)	

/*Ejecución de funciones
=========================================*/
 cambioPeso(daniel)

console.log(`Al inicio del año ${daniel.nombre} pesa ${daniel.peso.toFixed(1)} kg`)

/* 
IDEAS CLAVES
-------------
=> 
------------------------------*/

Carlos Gómez Mont

student•

Genial 😃

Daniel Páez

student•

Gracias @Carlos_GM me estoy esmerando por desarrollar un buen còdigo desde ahora 😄

Fernando Castelan

student•

Soy el único al que le genera ansiedad que no use el ; en cada linea?

Luis Mojica

teacher•

Ansiedad sentirias si te ponen a programar en brainfuck o whitespace 🤣.

Fuera de broma, es normal sentirse fuera de onda, el cerebro humano es una maquina de habitos, cuando le cambias algo que da por sentado, sale de la zona de confort.

La recomendación: abraza la ansiedad, aceptala y continua adelante. Despues de un tiempo miraras atras y reiras :smile:

Juan Victor Rivera Carrillo

student•

En mi caso en los proyectos que trabajo implemento eslint, el cual ayuda a llevar y estandar en el desarrollo, asi como variables sin usar y tambien si debo o no usar ; de esta forma ayiuda a que en un equipo de trabajo todos estemos en la misma linea y no unos hagan de una forma y otros de otra.

Yo era de no usar ; pero luego al ver que muchos prefieren usarlas opte por implementar eslint en los proyectos con el standard por default y ahora me obliga a manejar ; xD

Carlos Mario

student•

Sabino Fernández

student•

Gracias por compartir tus apuntes 🥺🥺🤓

Juan José Londoño David

student•

Buenas notas de cornell

Jose L. Figueroa

student•

Ciclo for : Nos permite realizar cierta tarea de manera repetitiva, es decir que podremos realizar una tarea una cierta cantidad de veces.

Consiste de 3 partes:

Inicial
Condición
Incremento

Dentro de las llaves se encuentra el cuerpo del ciclo for , que contiene las instrucciones que se repetirán mientras se cumpla la condición.

Para saber cuantas veces queremos que se ejecute una condición utilizamos un contador .

Para incrementar / decrementar el contador utilizamos la parte final del for según lo requiramos.

NOTA : Si introducimos un obj en una función, sus propiedades serán modificadas, ya que este es pasado por referencia. Si no deseamos que eso suceda es necesario crear un nuevo objeto, desglosando el objeto original.

Victor Andres Castillo Zambrano

student•

gracias

Carlos Heberto Arenas Huerta

student•

Otra forma de hacer funcionar el código final

var persona = {
    nombre: 'Carlos',
    apellido: 'Arenas',
    edad: 28,
    peso: 76.2
};

const AJUSTE_PESO = .2, DIAS_DEL_ANO = 365;

var nuevoPeso = random => random <= .25 ? persona.peso += AJUSTE_PESO : random <= .5 ? persona.peso -= AJUSTE_PESO : 0;

console.log(`Al inicio del año ${persona.nombre} pesa ${persona.peso} Kg.`);

for(let i = 1; i <= DIAS_DEL_ANO; i++){
    var random = Math.random();
    nuevoPeso(random);
}

console.log(`Al final del año ${persona.nombre} pesa ${persona.peso.toFixed(1)} Kg.`);

Daniel Cabrera López

student•

increible tu arrow function, pero me podrías explicar por qué ": 0;"? no entiendo el uso de : 0

Saludos!

Alberto Pacheco

student•

te marca error si no pudes un else osea los dos puntos : , entonces puedes poner un else como : null , o como en este caso : 0 , de lo contrario marca error la consola

Erick Jerzain

student•

¡Entendido!

Daniel Figueroa

student•

Gracias por tus apuntes, ye llevo un par de clases leyéndolos! :D

Maria Emilia Taborda

student•

sigue tomando apuntes, jajaja Gracias por el aporte- lo sume a lo que tenia!

Carlos Rodríguez Huerta

student•

En códigos extensos y con la pantalla dividida en varias ventanas, recomiendo activar el “autoajuste” del código al tamaño del área de trabajo del editor(atom).
Ruta: file/settings/editor/
Buscar:
1 Preferred Line Lenght: línea por defecto mostrada en el área de trabajo. Definir una extensión de linea.
2 Soft Wrap: ajustará al tamaño del área de trabajo.
3 Soft Wrap At Preferred Line Lenght: ajustará en base a la Preferred Line Lenght.
Además, no vendría mal activar la opción “Show Ident Guide”(identación).
P.D. activar 2 para el funcionamiento de 3(indispensable); configuren a su gusto.

sebastian mst

student•

Vengo del futuro, ahora se utiliza Visual Studio Code o Sublime, ya Atom está desapareciendo.

Stalin Badillo

student•

Gracias :)

Jefferson Andres Espejo Goez

student•

Muy buena clase en general, les recomiendo visual studio code completamente. Los colores ayudan mucho a distinguir si tu código va bien o no :)

Alejandro Caputo

student•

bro,no pude evitar ver que estas creando un html por cada clase 😰 por que no haces un solo html cambiando el numero source del script 🤔 tal vez te sea mas comodo

Jefferson Andres Espejo Goez

student•

Alejandro, no es eso. Yo importé el repositorio del curso en mi pc y por eso tengo todas las clases así. Le voy agregando comentarios y modificaciones cada que voy viendo una clase :)

Kenet Andrés Chungandro Montenegro

student•

Francisco Faner

student•

"Uncaught SyntaxError: Identifier 'INCREMENTO_PESO' has already been declared"

En el navegador, si quiero volver a correr el programa me tira este error, como lo puedo resolver sin tener que abrir otra pestaña?

Eleazar Carreón Álvarez

student•

Sí, tienes que volver a recargar la página. Ya que las variables se quedan guardadas.

John Cardenas

student•

Si no lo tienes, te recomiendo instalar Live Server. Te ayudará a que tu página se actualice cada vez que cargas el código, sin tu tener que actualizarlo.

Daniel Morales

student•

Dias del an.... jajajajajja

Kevin Parra Lopez

student•

los que no sepan hacer las comillas invertidas presionen ALT + 96

María José Ledesma

student•

¡Muchas gracias por el aporte! 😄 ¡Nunca pares de aprender! 🦄

ignacio ele

student•

La explicación del bucle for esta perfecto, pero el aumento de peso no se ejecuta el 25% de los días ni adelgazar el 25% de los días como decís. El random va a tener un valor aleatorio de 0(incluido) a 1(no icluido), entonces si por ejemplo el valor random entre 0 y 0,25 sale 200 veces ya es mayor a 25% de los días. Quiero decir no tiene nada que ver con el porcentaje o la cantidad de días. Saludos!

Efrain Pineda Jaimes

student•

Tienes toda la razón. Ahí entramos en el campo de la matemática y algoritmos. Sin embargo el ejemplo estuvo bueno para explicar el for.

Lazarte L Jo

student•

Estaba con es misma duda...

Alejandro Giraldo Londoño

student•

RESUMEN: Los ciclos o bluces For nos permite realizar tareas repetitivas. Crea un bucle que consiste en tres expresiones opcionales, encerradas en paréntesis y separadas por puntos y comas, seguidas de una sentencia ejecutada en un bucle. For ([expresion-inicial]; [condicion]; [expresion-final-o incremento])sentencia

Adjunto el código de esta clase:


var solucion ={
    hidroxilos: 7,
    hidrogenion:7,
    pH:'Neutro'
}

const AUMENTO_IONICO = 1
console.log( `Inicialmente el pH de esta solución es ${solucion.pH}`);

//Se crean las funciones de varaición de iones para la solución.
const añadirHidrogenion = variacion =&gt; variacion. hidrogenion+= AUMENTO_IONICO
const añadirHidroxilo = variacion =&gt; variacion.hidroxilos-= AUMENTO_IONICO


for (var i = 1; i &lt;= 14; i++ ){
    var random = Math.random()
    if(random &lt;0.25){
        //Se añaden hidrogeniones
        añadirHidrogenion(solucion)

    }else if(random&lt;0.5){
        // Se añaden hidroxilos
        añadirHidroxilo(solucion)
    }
   
}

if(solucion.hidroxilos&lt;solucion.hidrogenion){
    solucion.pH=&quot;Ácida&quot;
}else{
    solucion.pH=&quot;Básica&quot;
}
console.log( `Al pasar de los días, las medidciones de pH para iones [OH-] fue de ${solucion.hidroxilos}  y de [H+] fue de  ${solucion.hidrogenion},  el pH de esta solución ahora es: ${solucion.pH}`);

Luis Alejandro Vera Hernandez

student•

Excelente aplicacion personalizada de lo aprendido

Juan David HernandezPosso

student•

img 1 mira el output al final de la imagen es correcto

sin embargo en la segunda imagen el output me da incorrecto, me ayudan a entender por que? por favor

Felipe Vidal

student•

estas invocado en tu función de incremento y decremento a edad en vez de peso... por ende tu variable de peso sera la misma que la de un inicio :)

Juan David HernandezPosso

student•

@FelipeVpz si, de hecho fue un error al subir las imagenes sin embargo colocando los valores correctos no me suma ni resta el peso, entendi que estaba manipulando el valor de peso pero no estaba modificando el original y esto sucede por que no lo estaba asignando en fin destructing fuctions se llama fue como lo entendi

Andrés Corral

student•

Entiendo que la convención para escribir constantes es hacerlo con mayusculas, ejemplo en el min 10:50, crea la constante INCREMENTO_PESO. Mi pregunta es: ¿Por que las constantes que inicializo con las arrow functions (aumentarDePeso y adelgazar) no las nombro siguiendo la misma convención a pesar de que son igualmente constantes?

Juan David Niño Rodriguez

student•

las "arrow functions" solo se utilizan si se va hacer una función anónima?

Mauricio Moreno Morales

student•

No también se puede usar como una función normal te pongo un ejemplo. Por lo general se usa const, pero puedes usar también let

const myFunction = (name) => {
	console.log(`Hola ${name}`)
}

Bryan Daniel Alvarez Cachú

student•

Me da ambos valores iguales en lugar de un numero random para incrementar o bajar de peso, escribí algo mal?

Ángel David Roque Ayala

student•

Hola @Freackness Genial uso de la desestructuración de javascript.

const AUMENTAR_PESO = ({peso}) => (peso += INCREMENTO_PESO);

desafortunadamente ese es el problema para este caso en concreto. La desestructuración crea una copia del valor bryan.peso y lo guarda en la nueva variable peso que solo vive y se modifica dentro de la función. Por lo tanto, el valor bryan.peso nunca se modifica.

¿Entonces por que la siguiente linea si funciona?

const AUMENTAR_PESO = (persona) => (persona.peso += INCREMENTO_PESO);

Aqui si funciona, porque aquí no se produce una copia del objeto persona cuando se pasa por parámetro. Aqui si se pasa el objeto mismo y por tanto, todas las modificaciones que se le realicen al objeto si le hacen efecto.

Para entender mejor esto, te recomiendo que veas el video 3. VALORES vs REFERENCIAS en JAVASCRIPT | JS en ESPAÑOL. El video es del mismo profesor de este curso. Se que si lo ves podrás entender mucho mejor el fenómeno que ocurre aquí.

Nota: En algún punto del video, el valor INCREMENTO_PESO = 200; se modifico por INCREMENTO_PESO = 0.2;

Oscar Alejandro Mercado Lamas

student•

Va el ejercicio:

let oscar = {
  nombre: "Oscar",
  apellido: "Mercado",
  edad: 28,
  peso: 80,
};

console.log(`Al inicio del año ${oscar.nombre} pesa ${oscar.peso} kg`);

const INCREMENTO_PESO = 0.2;
const DIAS_DEL_ANO = 365;

const aumentarDePeso = (persona) => (persona.peso += INCREMENTO_PESO);
const adelgazar = (persona) => (persona.peso -= INCREMENTO_PESO);

for (var i = 1; i <= DIAS_DEL_ANO; i++) {
  var random = Math.random();

  if (random < 0.25) {
    aumentarDePeso(oscar);
  } else if (random < 0.5) {
    adelgazar(oscar);
  }
}

console.log(`Al final del año ${oscar.nombre} pesa ${oscar.peso.toFixed(1)} kg`);

const numMax = 10
const numMin = 1

const numRandom = () => Math.round(Math.random() * (numMax - numMin) + numMin)
// redondeamos el decimal que nos devuelve envolviendo todo en Math.round

numRandom() // 8
numRandom() // 5
numRandom() // 1
numRandom() // 10

/*

Mis principios de programacion:
1. Un programador divide problemas grandes en problemas chiquitos
2. Cada 4 lineas de codigo comento mi codigo
*/

//Imprimiendo algo en la consola
console.log("inicializando archivo");

/*Declaración de objetos
=========================================*/

//Creando el objeto persona
var daniel = {
	nombre: "Daniel",
	apellido: "Páez",
	edad: 18,	
	peso: 55
}

/*Declaración de variables
=========================================*/
var diasDelAño = 365;
var incrementoPeso = 0.200 //0.200 gramos


/*Declaración de funciones
=========================================*/

/**/

//Funcion donde se aumenta el valor del peso del objeto persona
const aumentarDePeso = persona => persona.peso += incrementoPeso;

//Funcion donde se baja el valor del peso del objeto persona
const bajarDePeso = persona => persona.peso -= incrementoPeso;


function cambioPeso(persona) {

	//este codigo se ejecutara TODOS LOS DIAS DEL AÑO
	for(var i = 1; i <= diasDelAño ; i++) {

		var ramdom = Math.random();
		//una variable guarda un numero aleatorio entre 0 y 1

		//este codigo se ejecutara el 25% de las veces
		if( ramdom <= 0.25) {
			//aumenta de peso
			aumentarDePeso(persona)
		}

		else if (ramdom <= 0.50 ) {
			//baja de peso
			bajarDePeso(persona)
		}

	}

}



/*Consola y consultas
=========================================*/
console.log(`Al inicio del año ${daniel.nombre} pesa ${daniel.peso} kg`)	

/*Ejecución de funciones
=========================================*/
 cambioPeso(daniel)

console.log(`Al inicio del año ${daniel.nombre} pesa ${daniel.peso.toFixed(1)} kg`)

/* 
IDEAS CLAVES
-------------
=> 
------------------------------*/

var persona = {
    nombre: 'Carlos',
    apellido: 'Arenas',
    edad: 28,
    peso: 76.2
};

const AJUSTE_PESO = .2, DIAS_DEL_ANO = 365;

var nuevoPeso = random => random <= .25 ? persona.peso += AJUSTE_PESO : random <= .5 ? persona.peso -= AJUSTE_PESO : 0;

console.log(`Al inicio del año ${persona.nombre} pesa ${persona.peso} Kg.`);

for(let i = 1; i <= DIAS_DEL_ANO; i++){
    var random = Math.random();
    nuevoPeso(random);
}

console.log(`Al final del año ${persona.nombre} pesa ${persona.peso.toFixed(1)} Kg.`);

var solucion ={
    hidroxilos: 7,
    hidrogenion:7,
    pH:'Neutro'
}

const AUMENTO_IONICO = 1
console.log( `Inicialmente el pH de esta solución es ${solucion.pH}`);

//Se crean las funciones de varaición de iones para la solución.
const añadirHidrogenion = variacion =&gt; variacion. hidrogenion+= AUMENTO_IONICO
const añadirHidroxilo = variacion =&gt; variacion.hidroxilos-= AUMENTO_IONICO


for (var i = 1; i &lt;= 14; i++ ){
    var random = Math.random()
    if(random &lt;0.25){
        //Se añaden hidrogeniones
        añadirHidrogenion(solucion)

    }else if(random&lt;0.5){
        // Se añaden hidroxilos
        añadirHidroxilo(solucion)
    }
   
}

if(solucion.hidroxilos&lt;solucion.hidrogenion){
    solucion.pH=&quot;Ácida&quot;
}else{
    solucion.pH=&quot;Básica&quot;
}
console.log( `Al pasar de los días, las medidciones de pH para iones [OH-] fue de ${solucion.hidroxilos}  y de [H+] fue de  ${solucion.hidrogenion},  el pH de esta solución ahora es: ${solucion.pH}`);

let oscar = {
  nombre: "Oscar",
  apellido: "Mercado",
  edad: 28,
  peso: 80,
};

console.log(`Al inicio del año ${oscar.nombre} pesa ${oscar.peso} kg`);

const INCREMENTO_PESO = 0.2;
const DIAS_DEL_ANO = 365;

const aumentarDePeso = (persona) => (persona.peso += INCREMENTO_PESO);
const adelgazar = (persona) => (persona.peso -= INCREMENTO_PESO);

for (var i = 1; i <= DIAS_DEL_ANO; i++) {
  var random = Math.random();

  if (random < 0.25) {
    aumentarDePeso(oscar);
  } else if (random < 0.5) {
    adelgazar(oscar);
  }
}

console.log(`Al final del año ${oscar.nombre} pesa ${oscar.peso.toFixed(1)} kg`);

Estructuras repetitivas: for

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions