INTRODUCCIÓN A

LA PROGRAMACIÓN
VOL II
Para programar nuestro código, vamos a usar
una herramienta online.

Resolución del Ejercicio propuesto:

https://bit.ly/2xJWEsh
 Los ciclos nos permiten
repetir instrucciones de
manera sencilla.

Episodio 5
Podemos hacerlo una
determinada cantidad de
veces o mientras que se
LOS CICLOS cumpla una condición.
ESTRUCTURA DE UN CICLO FOR
// Se ejecuta 5 veces.
// Con valores de vuelta desde 1 hasta 5.
for (var vuelta = 1; vuelta <= 5; vuelta++) {
console.log('Dando la vuelta número ' + vuelta);
};

Dando la vuelta 1
Dando la vuelta 2
Dando la vuelta 3
Dando la vuelta 4
Dando la vuelta 5 4
¡VEAMOS CADA PARTE EN ACCIÓN!

El inicio
Antes de arrancar el ciclo, se establece el valor inicial de nuestro
contador.

for ( var vuelta = 1; vuelta <= 5; vuelta++ ) {

console.log('Dando la vuelta número ' + vuelta);

};

5
¡VEAMOS CADA PARTE EN ACCIÓN!

La condición
Antes de cada ejecutar el código en cada vuelta, JavaScript
pregunta si la condición resulta verdadera o falsa.
Si es verdadera, continúa con nuestras instrucciones.
Si es falsa, detiene el ciclo.

for ( var vuelta = 1; vuelta <= 5; vuelta++ ) {

console.log('Dando la vuelta número ' + vuelta);

};
6
¡VEAMOS CADA PARTE EN ACCIÓN!

El modificador (usualmente incremento o decremento)

Luego de ejecutar nuestras instrucciones, se modifica nuestro
contador de la manera que hayamos especificado, en este caso
se le suma 1.

for ( var vuelta = 1; vuelta <= 5; vuelta++ ) {

console.log('Dando la vuelta número ' + vuelta);

};

7
EL CICLO FOR EN ACCIÓN
Como explicamos anteriormente: en cada ciclo, verificaremos si
el valor de vuelta es menor o igual 5, si es así ejecutaremos el
console.log() e incrementaremos el valor de vuelta en 1.
Cuando vuelta deje de ser menor o igual a 5, cortamos el ciclo.

Iteración # Valor de vuelta ¿ vuelta <= 5 ? Ejecutamos

1 1 true

2 2 true

3 3 true

4 4 true

5 5 true

6 6 false
8
¡PRÁCTICA!
9
EJERCICIOS

1. Mostrar por consola los números del 12 al 27.

2. Mostrar por consola “Puesto 1”, “Puesto 2”... hasta “Puesto 12”.

3. Mostrar por consola los primeros 10 múltiplos de 2.

(Incluir el cero)

4. Mostrar por consola los números enteros de 33 a 6, en orden

decreciente, con un incremento negativo de 3.
¿Qué diferencia hay si el 6 está incluído o no?
Ej: 33, 30, 27…. 6

RESOLUCIÓN

10
Episodio 6 Nos permiten generar
una lista o colección
LOS ARRAYS de datos ordenados.
ESTRUCTURA DE UN ARRAY
Utilizamos corchetes [ ] para indicar inicio y fin de un array y
comas (,) para separar sus elementos.

var miArray = [1, "Star Wars", 3.14, true];

Posiciones dentro de un array

Cada elemento dentro de un array tendrá una dirección
numérica, al primer elemento le toca la posición 0, al segundo
la posición 1 y así con los demás…

var miArray = [ 1 , "Star Wars" , 3.14 , true ];

0 1 2 3
12
4
3
2
var edificio = ["PB","1ro","2do","3ro","4ro"];
1
0

1 var casa = ["PB","1ro"];

0

0 var cimiento = [];

13
USO DE UN ARRAY
Declaración
var edificio = ["PB","1ro","2do","3ro","4to"];

Acceso a sus elementos

edificio[0] // "PB"
edificio[2] // "2do"
edificio[4] // "4to"

Obtener el total de elementos

edificio.length() // 5 → El array tiene 5 elementos

14
MÉTODOS DE UN ARRAY
Agregar un elemento
Entre los paréntesis, pondremos el valor a agregar
edificio.push("5to");
edificio.push("Terraza");
// ["PB","1ro","2do","3ro","4to","5to","Terraza"]

Quitar el último elemento

No necesita parámetros, siempre quita el último elemento
edificio.pop();
// ["PB", "1ro", "2do", "3ro", "4to", "5to"]

15
MÉTODOS DE UN ARRAY
Buscar un elemento
indexOf devolverá la posición del elemento si existe en el array.
edificio.indexOf("PB"); // 0 → El elemento existe y
está en la primera posición.
edificio.indexOf("2do"); // 2 → El elemento existe y
está en la tercera posición.

Si el elemento no existe, indexOf devolverá -1

edificio.indexOf("Sótano"); // -1 → El elemento no
existe.

16
¡PRÁCTICA!
17
EJERCICIOS
1. Autos: Declará y asigná un array que almacene marcas de auto.
(que tenga 4 marcas)
2. Fútbol: Declará y asigná otro array que almacene clubes de
fútbol.
(que tenga 6 clubes)
3. Mostrá por consola el largo del array de marcas de auto.
4. Mostrá por consola el largo del array de clubes de fútbol.
5. Mostrá por consola el 3er club de fútbol.
6. Mostrá por consola el club de fútbol con el índice 3.
¿Es el mismo que en el punto anterior?
7. Ejecutá: console.log(clubesDeFutbol[9]) ¿Qué pasa? ¿Por qué?

RESOLUCIÓN
18
Episodio 7
Podemos recorrer un Array,
RECORRIDA DE UN posición por posición
utilizando un ciclo For.
ARRAY CON UN FOR
RECORRER UN ARRAY CON UN FOR
Si quisiera mostrar en pantalla cada elemento de miArray,
¿tendría que ir uno por uno? ¡NO!
En lugar de escribir el código una y otra vez, es mejor usar un
bucle for para iterar a través de cada uno de los elementos del
array, y operar con cada elemento dentro del bucle.

var miArray = [1, "Star Wars", 3.14, true];

for (var i = 0; i < secretID.length; i++) {

console.log(secretID[i]);
}
¡PRÁCTICA!
21
EJERCICIOS

1. Autos: mostrá con un FOR por consola todas las marcas de

autos del array del ejercicio que completaste antes.

2. Dado este array: edades = [14, 17, 13, 19, 25, 22, 14]
Contá la cantidad de personas mayores de 18 años y mostralo
por consola con este texto: “La cantidad de personas mayores de 18
años es: XX”
(XX será el valor obtenido por tu programa)

RESOLUCIÓN
Episodio 8 Nos permiten agrupar código
de manera que lo podamos
reutilizar con facilidad.
LAS FUNCIONES
¿Qué es una
función?

¡María Inés
nos explica!
DECLARACIÓN DE UNA FUNCIÓN

function saludar() {
return "¡Hooooooola!";
}

function nombre Bloque de codigo

La palabra reservada El nombre nos va a Es la parte que se va
function le dice a permitir llamar a a ejecutar cada vez
JavaScript que nuestra función cada que llamemos a
vamos a declarar vez que necesitemos nuestra función
una función. usarla.

25
EJECUCIÓN DE UNA FUNCIÓN
Para usar nuestra función, simplemente la llamamos por su
nombre.
Siempre vamos a necesitar poner los paréntesis (), porque le
indican a javascript que debe ejecutarla.
saludar();
// podemos llamarla todas las veces que queramos
saludar();
saludar();

¡Hooooooola!
¡Hooooooola!
26
¡Hooooooola!
PARÁMETROS DE UNA FUNCIÓN
Si queremos pasarle datos a nuestra función, podemos utilizar
parámetros. Los parámetros son parecidos a las variables y
podemos utilizarlos dentro de nuestra función como lo
haríamos con una variable.

Si queremos agregar más de un parámetro, simplemente los

separamos con una coma (,).

function saludar(nombre, apellido) {

return ("¡Hooooooola" + nombre + " " + nombre
+ "!");
}

27
EJECUCIÓN DE UNA FUNCIÓN CON
PARÁMETROS
Al ejecutar funciones que piden parámetros necesitamos
escribirlos al momento de llamarlas..

saludar("Pedro", "González");
// Así como las anteriores, podemos llamarla todas
las veces que queramos
saludar("Carla", "Rodríguez");
saludar("Jorge", "Peréira");

¡Hooooooola Pedro, González!

¡Hooooooola Carla, Rodríguez!
28
¡Hooooooola Jorge, Peréira!
¡PRÁCTICA!
29
EJERCICIOS
1. Definí y usá una función que reciba un número y devuelva el
triple más 2.
Ej: si recibe 4, devuelve 14 (4*3+2). Si recibe 2, devuelve 8 (2*3+2)
2. Definí y usá una función que reciba dos argumentos, un nombre
y un apellido, y muestre por consola, “El nombre es: nombre, y el
apellido es: apellido”.
Ej: mostrarNombre(Ada, Lovelace) => mostrará “El nombre es:
Ada, y el apellido es: Lovelace”.
3. Definí y usá una función que reciba dos números como
parámetros, tal que, el primer parámetro que reciba sea el
porcentaje a calcular, y el segundo parámetro el número sobre
el que calcularlo:
Ej: porcentaje(50, 120) => muestra “El 50% de 120 es 60” y
devuelve 60.
RESOLUCIÓN
 ¡PRÁCTICA
INTEGRADORA!
31
EJERCICIO INTEGRADOR
Hacer un programa que muestre por consola la suma, el
promedio y la cantidad de impares de un array previamente
definido.
1. Declará un array con 5 números enteros.
2. Implementá la función suma(array). Esta función recibirá un
array y mostrará por consola la suma de sus elementos con un
texto apropiado. Ej. “La suma de los números es: 87”.
3. Implementá la función promedio(array). Esta función recibirá un
array y mostrará por consola el promedio de sus elementos.
4. Implementá la función cantidadDeImpares(array). Esta función
recibirá un array y mostrará por consola cuántos de sus
números son impares.
5. Usá las tres funciones implementadas más arriba, pasándoles
el array definido, para mostrar los resultados por consola.
RESOLUCIÓN
EL BANCO
CATALÁN
NOS
NECESITA 33
EJERCICIO - Banco Catalán
1. El banco está representado con un array llamado bancoCatalan.
a. Los elementos del array son los saldos de los clientes.
b. El número de cliente es su índice en el array.
2. Ejemplo: bancoCatalan = [1000, 250, 315, 15000]
a. El cliente 0, tiene un saldo de 1000, el cliente 2, tiene un
saldo de 315.
3. Implementá las siguientes funciones:
a. informarSaldoCliente(cliente): muestra por consola el saldo
del cliente.
b. informarSaldoBanco(): muestra por consola la suma de
todos los saldos de sus clientes, con un texto que diga.
“El saldo total del banco es: XX”
c. esPosibleExtraer(cliente, cantidad): permite averiguar si es
posible realizar una extracción, evaluando si el cliente tiene
saldo suficiente. Un cliente no puede tener saldo negativo.
Informar por consola con el texto “Se puede realizar esta
extracción” o “No se puede realizar esta extracción”
EJERCICIO - Banco Catalán

Luego de haber definido todas las funciones, escribir líneas

de código para utilizarlas con los siguientes datos:

1. Declará y asigná el array bancoCatalan con los siguientes

saldos, para representar 4 clientes: 1000, 250, 315, 15000.
2. Mostrar por consola el Saldo del Banco.
3. Agregar un cliente con un saldo inicial de 2000.
4. Mostrar por consola el Saldo del Banco.
5. Averiguar si el cliente 2 puede hacer una extracción de 500.

RESOLUCIÓN
“
Recuerden que esto es solo la
base de lo que JavaScript tiene
para ofrecer.
¡A partir de aquí, esperamos que
empiecen su viaje hacia el
mundo de la programación!
RECUERDEN
LA PŔACTICA
HACE AL
MACACO
MAESTRO
GRACIAS!
¿Preguntas?