From 67de50ba9956bb9e66388792b879d1da00eb71c5 Mon Sep 17 00:00:00 2001 From: Alejandro Krumkamp Date: Fri, 26 Jul 2019 18:58:26 -0300 Subject: [PATCH 1/4] Paso funciones antes de ejercicio integrador --- ejercicios/conceptuales/01.md | 2 +- ejercicios/conceptuales/02.md | 2 +- ejercicios/conceptuales/03.md | 2 +- ejercicios/conceptuales/04.md | 2 +- ejercicios/conceptuales/05.md | 2 +- ejercicios/conceptuales/06.md | 4 +- ejercicios/conceptuales/07.md | 294 +++++++++++++++++++++++++++++----- ejercicios/conceptuales/08.md | 292 +++++---------------------------- respuestas/{07.js => 08.js} | 0 9 files changed, 301 insertions(+), 299 deletions(-) rename respuestas/{07.js => 08.js} (100%) diff --git a/ejercicios/conceptuales/01.md b/ejercicios/conceptuales/01.md index b306634..394c6c2 100644 --- a/ejercicios/conceptuales/01.md +++ b/ejercicios/conceptuales/01.md @@ -24,7 +24,7 @@ alert(101); 1. Mostrar el año de tu nacimiento en la ventana. 2. Mostrar el nombre de tu color favorito. -[Respuestas](https://github.com/javascript-101/javascript-101/tree/353454f83aeefdc2687acac52af0abda6394b568/respuestas/01.js) +[Respuestas](/respuestas/01.js) [Continuar con Números, Cadenas de Texto y Booleanos](02.md) diff --git a/ejercicios/conceptuales/02.md b/ejercicios/conceptuales/02.md index c7dbd61..5e5e1ef 100644 --- a/ejercicios/conceptuales/02.md +++ b/ejercicios/conceptuales/02.md @@ -38,7 +38,7 @@ false; 3. Usando un booleano, mostrar el valor verdadero por la ventana. 4. Usando un solo `alert`, mostrar los valores `1`, `200`, `'Genial'`, `false`, `true`. -[Respuestas](https://github.com/javascript-101/javascript-101/tree/625c573f586769af2fb6d8915c1efbf49cc1c5dd/respuestas/02.js) +[Respuestas](/respuestas/02.js) [Continuar con Variables](03.md) diff --git a/ejercicios/conceptuales/03.md b/ejercicios/conceptuales/03.md index 9fff855..e29d1d7 100644 --- a/ejercicios/conceptuales/03.md +++ b/ejercicios/conceptuales/03.md @@ -97,7 +97,7 @@ Vemos que obtenemos un error ya que estamos intentando asignar otro a valor a un 3. Declarar una variable de nombre `miGustoDePizzaPreferido` y asignarle la variedad de pizza que más te guste usando un `string` \(cadena de caracteres\). Mostrar el valor de la variable en la ventana. 4. Mostrar en la ventana, de a uno por vez, los siguientes valores `false`, `'Hola'`, `0` y `'Minions'` usando la misma variable. -[Respuestas](https://github.com/javascript-101/javascript-101/tree/625c573f586769af2fb6d8915c1efbf49cc1c5dd/respuestas/03.js) +[Respuestas](/respuestas/03.js) [Continuar con Operadores](04.md) diff --git a/ejercicios/conceptuales/04.md b/ejercicios/conceptuales/04.md index fde93d9..9c6d250 100644 --- a/ejercicios/conceptuales/04.md +++ b/ejercicios/conceptuales/04.md @@ -196,7 +196,7 @@ Los operadores más importantes son: Mostrar el valor de la variable `estoyAprobado` en la ventana. 13. Declarar una variable llamada `esHoraDeAlmorzar` cuyo valor sea el resultado de comparar con el operador `<=` \(Menor o igual\) si la hora actual es menor o igual a `12`. Mostrar el valor en la ventana. -[Respuestas](https://github.com/javascript-101/javascript-101/tree/625c573f586769af2fb6d8915c1efbf49cc1c5dd/respuestas/04.js) +[Respuestas](/respuestas/04.js) [Continuar con Condicionales](05.md) diff --git a/ejercicios/conceptuales/05.md b/ejercicios/conceptuales/05.md index 39024a7..b5bcc2d 100644 --- a/ejercicios/conceptuales/05.md +++ b/ejercicios/conceptuales/05.md @@ -134,7 +134,7 @@ if (temperaturaActual < 10) { * `'No tires fruta'` si la `posicionEnLaCarrera` es otro valor no contemplado antes. 3. Repetir el ejercicio anterior pero usando un solo `alert` en todo el programa. -[Respuestas](https://github.com/javascript-101/javascript-101/tree/625c573f586769af2fb6d8915c1efbf49cc1c5dd/respuestas/05.js) +[Respuestas](/respuestas/05.js) [Continuar con prompt\(\)](06.md) diff --git a/ejercicios/conceptuales/06.md b/ejercicios/conceptuales/06.md index ae4207c..7e47db9 100644 --- a/ejercicios/conceptuales/06.md +++ b/ejercicios/conceptuales/06.md @@ -62,7 +62,7 @@ let numeroFavorito = Number(numeroFavoritoCadenaDeTexto); 1. Hacer un programa que pida tu color favorito y te lo muestre en el navegador. 2. Hacer un programa que pida tu edad y le reste 10 y luego muestre el resultado por el navegador. -[Respuestas](https://github.com/javascript-101/javascript-101/tree/353454f83aeefdc2687acac52af0abda6394b568/respuestas/06.js) +[Respuestas](/respuestas/06.js) -[Continuar con Ejercicio Integrador](07.md) +[Continuar con Funciones](07.md) diff --git a/ejercicios/conceptuales/07.md b/ejercicios/conceptuales/07.md index 60d421b..93e6302 100644 --- a/ejercicios/conceptuales/07.md +++ b/ejercicios/conceptuales/07.md @@ -1,83 +1,293 @@ -# :woman: :man: Ejercicio integrador +# Funciones -Antes que nada, ¡Felicitaciones por llegar hasta acá! +## Introducción -Ahora que has explorado algunas funcionalidades de Javascript, es hora de utilizarlas para hacer programas más interesantes. +Muchas veces necesitamos realizar la misma acción en distintos lugares de nuestro código. -## Metodología de trabajo +Por ejemplo, necesitamos mostrar un mensaje cuando el usuario se loguea y cuando cierra su sesión. -Vamos a trabajar en equipos de a dos personas, también conocido como [Programación en Pareja](https://es.wikipedia.org/wiki/Programación_en_pareja). +Las funciones son los principales "bloques de construcción" de un programa. Nos permiten que el código sea llamado varias veces evitando repetir el mismo código. -También estaremos trabajando en iteraciones, dentro de un mismo contexto estarán apareciendo nuevos requerimientos que el sistema debe satisfacer, desde ser un simple programa a resolver problemas más complejos. +Ya vimos algunos ejemplos de funciones nativas como `alert("Hola")`, `prompt("Inserta tu edad")` o `confirm("Estás seguro de comprar el pasaje?")`. Pero nosotros podemos crear nuestras propias funcionas también. -Las iteraciones en esta sección están pensadas para hacer uso de todos los temas que viste en el día y de hoy para poder consolidar el nuevo conocimiento adquirido. +## Declaración de una Función -Están ordenadas de menor a mayor dificultad, siendo la última pensada para ser un desafío que no sea rápido de resolver para gente que recién incursiona en el mundo de Javascript. +Para crear una función usamos una declaración de función. -Por lo que si pueden llegar a la última iteración; ¡Genial! pero está pensada para que tengan suficiente material y es completamente normal si no llegan a terminarlos en el workshop y puedan continuarlos después. +Se ve de la siguiente manera: -## Ejercicio Integrador +```javascript +function mostrarMensaje() { + alert('Hola a todos!') +} +``` + +La palabra reservada `function` se escribe primero, después el nombre de la función, posteriormente una lista de parámetros dentro de los paréntesis \(sin parámetros en el ejemplo anterior\) y finalmente el código de la función, también llamado como cuerpo de la función, encerrado entre llaves. + +[Visualización de partes de una función](https://poet.codes/e/9YgdQVVD7Ip/frame/900px/515px) + +Nuestra nueva función puede ser llamada por su nombre: `mostrarMensaje()`. + +Por ejemplo: + +```javascript +function mostrarMensaje() { + alert('Hola a todos!') +} + +mostrarMensaje() +mostrarMensaje() +``` + +La llamada a `mostrarMensaje()` ejecuta el código de la función. Donde mostraremos el mensaje 2 veces. + +Este ejemplo claramente demuestra uno de los principales propósitos de las funciones: evitar duplicación de código. + +Si necesitasemos cambiar el mensaje o la manera en que se muestra, es suficiente con modificar el código en un solo lugar: en la declaración de la función. + +## Variables locales + +Una variable es declarada dentro de una función si solo es visible dentro de esa función. + +Por ejemplo: + +```javascript +function mostrarMensaje() { + let mensaje = 'Hola a todos!' // variable local + alert(mensaje) +} + +mostrarMensaje() // Hola a todos! + +alert(mensaje) // <-- Error! La variable es local a la función +``` + +## Variables externas + +Una función puede acceder una variable externa o fuera de si misma. + +```javascript +let nombre = 'Matias' + +function mostrarMensaje() { + let mensaje = 'Hola, ' + nombre + alert(mensaje) +} + +mostrarMensaje() // Hola, Matias +``` + +La función tiene acceso completo a la variable externa. La puede modificar también. + +```javascript +let nombre = 'Matias' + +function mostrarMensaje() { + nombre = 'Caro' // Cambiamos la variable externa + + let mensaje = 'Hola, ' + nombre + alert(mensaje) +} + +alert(nombre) // Matias, antes de la llamada a la función + +mostrarMensaje() + +alert(nombre) // Caro, después de la llamada a la función +``` + +La variable externa solo es usada si no hay ninguna local. + +Si una variable es declarada con el mismo nombre dentro de la función, esta última es utilizada en vez de la variable externa. + +Por ejemplo, en el código debajo, la función usa la variable local `nombre` y la que esta por fuera es ignorada: + +```javascript +let nombre = 'Matias' + +function mostrarMensaje() { + let nombre = 'Caro' // declaramos una variable local + + let mensaje = 'Hola, ' + nombre // Caro + alert(mensaje) +} + +// La función creará y usará su propia variable nombre +mostrarMensaje() -## Iteración 1 +alert(nombre) // Matias, permanece igual ya que la función no modifica la variable externa +``` + +## Parámetros + +Podemos pasar datos arbitrarios a las funciones usando parámetros \(también llamados argumentos de la función\). + +En el ejemplo debajo, la función tiene 2 parámetros: `de` y `texto`. + +```javascript +// parámetros: de, texto +function mostrarMensaje(de, texto) { + alert(de + ': ' + texto) +} -### Dominio / Contexto: +mostrarMensaje('Leila', 'Hola!') // Leila: Hola! (*) +mostrarMensaje('Leila', 'Qué onda?') // Leila: Qué onda? (**) +``` + +Cuando la función es llamada en las lineas \(\*\) y \(\*\*\), los valores dados son copiados a variables locales `de` y `texto`. Posteriormente la función las usa por dentro. -Caro, una cliente nuestra, tiene una pastelería especializada en eventos, como cumpleaños. Desde tortas, hasta cupcakes de Star Wars, lo pides, lo tienes. +Acá vemos un ejemplo más: tenemos una variable `de` y se la pasamos a la función. **Importante**: la función cambia el parámetro `from` pero el cambio no es reflejado fuera de ella, porque la función siempre recibe una copia de este valor. -Nos contó que se le ocurrió que también estaría bueno tener una herramienta para saludos. +```javascript +function mostrarMensaje(de, texto) { + de = '*' + de + '*' // mejorar como se visualiza el parámetro "de" -¿Saludos? + alert(de + ': ' + texto) +} -Resulta que dependiendo de la empresa que le compra a Caro, ella también les manda una carta de agradecimiento, sin embargo, hay empresas que son muy formales y otras donde la formalidad está visto como algo obsoleto. +let de = 'Ale' -Por lo que le gustaría poder saber, sabiendo el nombre de la empresa, saber qué frase tiene que utilizar. +mostrarMensaje(de, 'Hola') // *Ale*: Hola -### Requerimientos +// El valor de "de" es el mismo, la función modifica una copia local +alert(de) // Ale +``` -* Hacer un programa que tenga precargados hasta 3 nombres y saludos de empresas y en base a un nombre que ingrese el usuario, elija el saludo correspondiente y lo devuelva por el navegador. -* En el caso de que el usuario ingrese el nombre de una empresa no exista, que pida una confirmacion al usuario si realmente se llama asi la empresa. En caso de que el nombre esté correcto; devolver un saludo genérico, en caso de que sea incorrecto, volver a pedirlo. +## Valores por defecto -### Tips +Si un parámetro no es provisto, entonces este valor se vuelve `undefined`. -Para preguntar al usuarie una pregunta de sí o no, como en una confirmación, podemos utilizar `confirm()` que activa una ventana en el navegador con opciones "Aceptar" o "Cancelar". +Por ejemplo, la función que ya declaramos `function mostrarMensaje(de, texto)` puede ser llamada con un solo parámetro: -Cuando le usuarie responde, `confirm()` devolverá un booleano con el valor correspondiente; `false` si fue un cancelar y `true` si se aceptó la pregunta. +```javascript +mostrarMensaje('Caro') +``` -Toma como primer parámetro la pregunta que queremos hacer al usuarie. +Eso no es un error. Tal llamada mostrara: `"Caro: undefined"`. No hay texto, entonces asume que `texto === undefined`. -### Ejemplo +Si queremos usar un valor por defecto para el `texto` en este caso, lo podemos especificar después de su declaración usando `=`. Por ejemplo: ```javascript -let usuarieAsistioAUnJavascript101 = confirm("¿Has asistido a un Javascript 101?"); +function mostrarMensaje(de, texto = 'ningún texto provisto') { + alert(de + ': ' + texto) +} -console.log(usuarieAsistioAUnJavascript101); +mostrarMensaje('Ale') // Ale: ningún texto provisto ``` +Ahora cuando el parámetro `texto` no es enviado, entonces obtendra el valor `"ningún texto provisto"` -## Iteración 2 +Acá `"ningún texto provisto"` es un string, pero puede ser una expresión compleja, la cual es evaluada y asignada solamente si el parámetro no fue asignado. Así que esto también es posible: -### Dominio / Contexto: +```javascript +function mostrarMensaje(de, texto = otraFuncion()) { + // otraFuncion() es ejecutada solamente si no hay ningún texto + // el resultado de la función será el nuevo valor de texto +} +``` + +## Devolviendo un valor -El programa que hicimos fue un éxito, a Caro le gustó mucho y dice que le facilitamos la vida. +Una función puede devolver un valor como resultado al código donde fue ejecutada. -Ahora nos cuenta otra situación que tiene. +Este ejemplo sencillo mostrará una función que suma 2 valores: -Cuando empresas les compran muchas de sus tortas de Princesa Leia a Caro, les hace un descuento. +```javascript +function suma(a, b) { + return a + b +} + +let resultado = suma(1, 2) +alert(resultado) // 3 +``` + +La palabra reservada `return` puede ser colocada en cualquier lugar dentro de la función. Cuando la ejecución llega a `return`, la función deja de correr y devuelve el valor a donde fue llamada la función. + +Hay varias ocurrencias de un `return` dentro de una sola función. Por ejemplo: + +```javascript +function verificarEdad(edad) { + if (edad > 18) { + return true + } else { + return confirm('Tenés permisos de tus padres?') + } +} + +let edad = prompt('Qué edad tenes?', 18) + +if (verificarEdad(edad)) { + alert('Acceso permitido') +} else { + alert('Acceso negado') +} +``` + +También es posible usar `return` sin devolver ningún valor. Esto causa que la función frene inmediatamente. Por ejemplo: + +```javascript +function mostrarPelicula(edad) { + if (!verificarEdad(edad)) { + return + } + + alert('Mostrando la película +18') // (*) +} +``` + +En el código de arriba, si `verificarEdad(edad)` devuelve falso que negado nos da true por ende se ejecuta el condicional y `mostrarPelicula` no seguirá a ejecutar el `alert`. + +## Nombrando una función + +Las funciones son acciones. Asi que usualmente su nombre es un verbo. Debe ser corto, y lo más preciso posible describiendo lo que la función hace, así que alguien leyendo el código obtiene una indicación de lo que función hace. + +Es una práctica común empezar una función con un verbo como prefijo que vagamente describa la acción. Debe haber un acuerdo dentro del equipo para el nombramiento de estos prefijos. + +Por ejemplo las funciones que empiezan con "mostrar" usualmente muestran algo. + +Una función empezando con: + +* "obtener…" – devuelven un valor, +* "calcular…" – calculan algo, +* "crear…" – crean algo, +* "verificar…" – chequen algo y devuelven un booleano. + +Ejemplo de tales nombres: + +```javascript +mostrarMensaje(..) // muestra un mensaje +obtenerEdad(..) // devuelve la edad ( la obtiene de alguna manera) +calcularSuma(..) // calcula una suma y devuelve un valor +crearFormulario(..) // crea un formulario +verificarPermisos(..) // verifica permisos, devuelve true o false +``` + +Con los prefijos en su lugar, un vistazo al nombre de la función nos da un claro entendimiento de que tipo de trabajo hace y que tipo de valor devuelve. + +## Conclusión + +La declaración de una función se ve así: + +```javascript +function nombre(parametros, delimitados, por, comas) { + /* código */ +} +``` -Éstos descuentos dependen de la cantidad de tortas compradas por cada empresas precargadas en el sistema. +Características: -* Si una empresa tiene más de 100 tortas compradas, tienen un 10% de descuento en sus próximas tortas. -* Si una empresa tiene más de 500 tortas compradas, tienen un 15% de descuento. -* Independientemente de cuantas tortas tenga compradas, si compra más de 10 tortas, recibe 1 torta extra cada 15 tortas. +* Los valores son pasados a una función como parámetros que son copiados a ella como variables locales +* Una función puede acceder variables externas. Pero solo funciona de adentro hacia fuera. El código fuera de la función no puede acceder a las variables locales de esta última. +* Una función puede devolver un valor. Sino lo hace, entonces el resultado es `undefined` -A Caro le gustaría saber en cada pedido de las empresas que tiene precargadas, además de saber qué saludo mandarles, también saber cuánto debería cobrarles, teniendo en cuenta si tienen descuentos o no y si debería darle tortas extras y cuántas. +Para que el código sea más simple y fácil de entender, es recomendable usar principalmente variables locales y parámetros en la función y no variables por fuera de la misma. -### Requerimientos +Siempre es más fácil de entender una función que recibe parámetros, trabaja con ellos y devuelve un resultado que una funcioón que no recibe parámetros y modifica variables por fuera de ella como un side-effect. -* Hacer un programa que modele los descuentos y tortas extras. -* Utilizar los descuentos y tortas extras a la hora de hacer un pedido y en base a ellos indique cuánto cobrarle a la empresa y cuántas tortas debe enviarle, junto con qué saludo. +Nombrando funciones: -[Respuestas](https://github.com/javascript-101/javascript-101/blob/master/respuestas/07.js) +* El nombre debe describir claramente lo que la función hace. Cuando vemos la llamada a la función en el código, un buen nombre instantaneamente nos describe que hace y que devuelve. +* Una función es una acción, por ende los nombres de las funciones son verbos. Existen varios prefijos conocidos como : crear..., mostrar..., obtener..., verificar... y más. Usalos como pistas de lo que la función hace. -[Continuar con Links para seguir aprendiendo](https://github.com/javascript-101/javascript-101#links-extras-para-seguir-aprendiendo) +[Continuar con Ejercicio Integrador](08.md) diff --git a/ejercicios/conceptuales/08.md b/ejercicios/conceptuales/08.md index 907b8db..dd8aa7b 100644 --- a/ejercicios/conceptuales/08.md +++ b/ejercicios/conceptuales/08.md @@ -1,291 +1,83 @@ -# Funciones +# :woman: :man: Ejercicio integrador -## Introducción +Antes que nada, ¡Felicitaciones por llegar hasta acá! -Muchas veces necesitamos realizar la misma acción en distintos lugares de nuestro código. +Ahora que has explorado algunas funcionalidades de Javascript, es hora de utilizarlas para hacer programas más interesantes. -Por ejemplo, necesitamos mostrar un mensaje cuando el usuario se loguea y cuando cierra su sesión. +## Metodología de trabajo -Las funciones son los principales "bloques de construcción" de un programa. Nos permiten que el código sea llamado varias veces evitando repetir el mismo código. +Vamos a trabajar en equipos de a dos personas, también conocido como [Programación en Pareja](https://es.wikipedia.org/wiki/Programación_en_pareja). -Ya vimos algunos ejemplos de funciones nativas como `alert("Hola")`, `prompt("Inserta tu edad")` o `confirm("Estás seguro de comprar el pasaje?")`. Pero nosotros podemos crear nuestras propias funcionas también. +También estaremos trabajando en iteraciones, dentro de un mismo contexto estarán apareciendo nuevos requerimientos que el sistema debe satisfacer, desde ser un simple programa a resolver problemas más complejos. -## Declaración de una Función +Las iteraciones en esta sección están pensadas para hacer uso de todos los temas que viste en el día y de hoy para poder consolidar el nuevo conocimiento adquirido. -Para crear una función usamos una declaración de función. +Están ordenadas de menor a mayor dificultad, siendo la última pensada para ser un desafío que no sea rápido de resolver para gente que recién incursiona en el mundo de Javascript. -Se ve de la siguiente manera: +Por lo que si pueden llegar a la última iteración; ¡Genial! pero está pensada para que tengan suficiente material y es completamente normal si no llegan a terminarlos en el workshop y puedan continuarlos después. -```javascript -function mostrarMensaje() { - alert('Hola a todos!') -} -``` - -La palabra reservada `function` se escribe primero, después el nombre de la función, posteriormente una lista de parámetros dentro de los paréntesis \(sin parámetros en el ejemplo anterior\) y finalmente el código de la función, también llamado como cuerpo de la función, encerrado entre llaves. +## Ejercicio Integrador -[Visualización de partes de una función](https://poet.codes/e/9YgdQVVD7Ip/frame/900px/515px) +## Iteración 1 -Nuestra nueva función puede ser llamada por su nombre: `mostrarMensaje()`. - -Por ejemplo: - -```javascript -function mostrarMensaje() { - alert('Hola a todos!') -} +### Dominio / Contexto: -mostrarMensaje() -mostrarMensaje() -``` +Caro, una cliente nuestra, tiene una pastelería especializada en eventos, como cumpleaños. Desde tortas, hasta cupcakes de Star Wars, lo pides, lo tienes. -La llamada a `mostrarMensaje()` ejecuta el código de la función. Donde mostraremos el mensaje 2 veces. +Nos contó que se le ocurrió que también estaría bueno tener una herramienta para saludos. -Este ejemplo claramente demuestra uno de los principales propósitos de las funciones: evitar duplicación de código. +¿Saludos? -Si necesitasemos cambiar el mensaje o la manera en que se muestra, es suficiente con modificar el código en un solo lugar: en la declaración de la función. +Resulta que dependiendo de la empresa que le compra a Caro, ella también les manda una carta de agradecimiento, sin embargo, hay empresas que son muy formales y otras donde la formalidad está visto como algo obsoleto. -## Variables locales +Por lo que le gustaría poder saber, sabiendo el nombre de la empresa, saber qué frase tiene que utilizar. -Una variable es declarada dentro de una función si solo es visible dentro de esa función. +### Requerimientos -Por ejemplo: +* Hacer un programa que tenga precargados hasta 3 nombres y saludos de empresas y en base a un nombre que ingrese el usuario, elija el saludo correspondiente y lo devuelva por el navegador. +* En el caso de que el usuario ingrese el nombre de una empresa no exista, que pida una confirmacion al usuario si realmente se llama asi la empresa. En caso de que el nombre esté correcto; devolver un saludo genérico, en caso de que sea incorrecto, volver a pedirlo. -```javascript -function mostrarMensaje() { - let mensaje = 'Hola a todos!' // variable local - alert(mensaje) -} +### Tips -mostrarMensaje() // Hola a todos! +Para preguntar al usuarie una pregunta de sí o no, como en una confirmación, podemos utilizar `confirm()` que activa una ventana en el navegador con opciones "Aceptar" o "Cancelar". -alert(mensaje) // <-- Error! La variable es local a la función -``` +Cuando le usuarie responde, `confirm()` devolverá un booleano con el valor correspondiente; `false` si fue un cancelar y `true` si se aceptó la pregunta. -## Variables externas +Toma como primer parámetro la pregunta que queremos hacer al usuarie. -Una función puede acceder una variable externa o fuera de si misma. +### Ejemplo ```javascript -let nombre = 'Matias' +let usuarieAsistioAUnJavascript101 = confirm("¿Has asistido a un Javascript 101?"); -function mostrarMensaje() { - let mensaje = 'Hola, ' + nombre - alert(mensaje) -} - -mostrarMensaje() // Hola, Matias +console.log(usuarieAsistioAUnJavascript101); ``` -La función tiene acceso completo a la variable externa. La puede modificar también. - -```javascript -let nombre = 'Matias' -function mostrarMensaje() { - nombre = 'Caro' // Cambiamos la variable externa +## Iteración 2 - let mensaje = 'Hola, ' + nombre - alert(mensaje) -} +### Dominio / Contexto: -alert(nombre) // Matias, antes de la llamada a la función +El programa que hicimos fue un éxito, a Caro le gustó mucho y dice que le facilitamos la vida. -mostrarMensaje() +Ahora nos cuenta otra situación que tiene. -alert(nombre) // Caro, después de la llamada a la función -``` - -La variable externa solo es usada si no hay ninguna local. - -Si una variable es declarada con el mismo nombre dentro de la función, esta última es utilizada en vez de la variable externa. - -Por ejemplo, en el código debajo, la función usa la variable local `nombre` y la que esta por fuera es ignorada: - -```javascript -let nombre = 'Matias' - -function mostrarMensaje() { - let nombre = 'Caro' // declaramos una variable local - - let mensaje = 'Hola, ' + nombre // Caro - alert(mensaje) -} - -// La función creará y usará su propia variable nombre -mostrarMensaje() - -alert(nombre) // Matias, permanece igual ya que la función no modifica la variable externa -``` - -## Parámetros - -Podemos pasar datos arbitrarios a las funciones usando parámetros \(también llamados argumentos de la función\). - -En el ejemplo debajo, la función tiene 2 parámetros: `de` y `texto`. - -```javascript -// parámetros: de, texto -function mostrarMensaje(de, texto) { - alert(de + ': ' + texto) -} - -mostrarMensaje('Leila', 'Hola!') // Leila: Hola! (*) -mostrarMensaje('Leila', 'Qué onda?') // Leila: Qué onda? (**) -``` - -Cuando la función es llamada en las lineas \(\*\) y \(\*\*\), los valores dados son copiados a variables locales `de` y `texto`. Posteriormente la función las usa por dentro. - -Acá vemos un ejemplo más: tenemos una variable `de` y se la pasamos a la función. **Importante**: la función cambia el parámetro `from` pero el cambio no es reflejado fuera de ella, porque la función siempre recibe una copia de este valor. - -```javascript -function mostrarMensaje(de, texto) { - de = '*' + de + '*' // mejorar como se visualiza el parámetro "de" - - alert(de + ': ' + texto) -} - -let de = 'Ale' - -mostrarMensaje(de, 'Hola') // *Ale*: Hola - -// El valor de "de" es el mismo, la función modifica una copia local -alert(de) // Ale -``` - -## Valores por defecto - -Si un parámetro no es provisto, entonces este valor se vuelve `undefined`. - -Por ejemplo, la función que ya declaramos `function mostrarMensaje(de, texto)` puede ser llamada con un solo parámetro: - -```javascript -mostrarMensaje('Caro') -``` +Cuando empresas les compran muchas de sus tortas de Princesa Leia a Caro, les hace un descuento. -Eso no es un error. Tal llamada mostrara: `"Caro: undefined"`. No hay texto, entonces asume que `texto === undefined`. - -Si queremos usar un valor por defecto para el `texto` en este caso, lo podemos especificar después de su declaración usando `=`. Por ejemplo: - -```javascript -function mostrarMensaje(de, texto = 'ningún texto provisto') { - alert(de + ': ' + texto) -} - -mostrarMensaje('Ale') // Ale: ningún texto provisto -``` - -Ahora cuando el parámetro `texto` no es enviado, entonces obtendra el valor `"ningún texto provisto"` - -Acá `"ningún texto provisto"` es un string, pero puede ser una expresión compleja, la cual es evaluada y asignada solamente si el parámetro no fue asignado. Así que esto también es posible: - -```javascript -function mostrarMensaje(de, texto = otraFuncion()) { - // otraFuncion() es ejecutada solamente si no hay ningún texto - // el resultado de la función será el nuevo valor de texto -} -``` - -## Devolviendo un valor - -Una función puede devolver un valor como resultado al código donde fue ejecutada. - -Este ejemplo sencillo mostrará una función que suma 2 valores: - -```javascript -function suma(a, b) { - return a + b -} - -let resultado = suma(1, 2) -alert(resultado) // 3 -``` - -La palabra reservada `return` puede ser colocada en cualquier lugar dentro de la función. Cuando la ejecución llega a `return`, la función deja de correr y devuelve el valor a donde fue llamada la función. - -Hay varias ocurrencias de un `return` dentro de una sola función. Por ejemplo: - -```javascript -function verificarEdad(edad) { - if (edad > 18) { - return true - } else { - return confirm('Tenés permisos de tus padres?') - } -} - -let edad = prompt('Qué edad tenes?', 18) - -if (verificarEdad(edad)) { - alert('Acceso permitido') -} else { - alert('Acceso negado') -} -``` - -También es posible usar `return` sin devolver ningún valor. Esto causa que la función frene inmediatamente. Por ejemplo: - -```javascript -function mostrarPelicula(edad) { - if (!verificarEdad(edad)) { - return - } - - alert('Mostrando la película +18') // (*) -} -``` - -En el código de arriba, si `verificarEdad(edad)` devuelve falso que negado nos da true por ende se ejecuta el condicional y `mostrarPelicula` no seguirá a ejecutar el `alert`. - -## Nombrando una función - -Las funciones son acciones. Asi que usualmente su nombre es un verbo. Debe ser corto, y lo más preciso posible describiendo lo que la función hace, así que alguien leyendo el código obtiene una indicación de lo que función hace. - -Es una práctica común empezar una función con un verbo como prefijo que vagamente describa la acción. Debe haber un acuerdo dentro del equipo para el nombramiento de estos prefijos. - -Por ejemplo las funciones que empiezan con "mostrar" usualmente muestran algo. - -Una función empezando con: - -* "obtener…" – devuelven un valor, -* "calcular…" – calculan algo, -* "crear…" – crean algo, -* "verificar…" – chequen algo y devuelven un booleano. - -Ejemplo de tales nombres: - -```javascript -mostrarMensaje(..) // muestra un mensaje -obtenerEdad(..) // devuelve la edad ( la obtiene de alguna manera) -calcularSuma(..) // calcula una suma y devuelve un valor -crearFormulario(..) // crea un formulario -verificarPermisos(..) // verifica permisos, devuelve true o false -``` - -Con los prefijos en su lugar, un vistazo al nombre de la función nos da un claro entendimiento de que tipo de trabajo hace y que tipo de valor devuelve. - -## Conclusión - -La declaración de una función se ve así: - -```javascript -function nombre(parametros, delimitados, por, comas) { - /* código */ -} -``` +Éstos descuentos dependen de la cantidad de tortas compradas por cada empresas precargadas en el sistema. -Características: +* Si una empresa tiene más de 100 tortas compradas, tienen un 10% de descuento en sus próximas tortas. +* Si una empresa tiene más de 500 tortas compradas, tienen un 15% de descuento. +* Independientemente de cuantas tortas tenga compradas, si compra más de 10 tortas, recibe 1 torta extra cada 15 tortas. -* Los valores son pasados a una función como parámetros que son copiados a ella como variables locales -* Una función puede acceder variables externas. Pero solo funciona de adentro hacia fuera. El código fuera de la función no puede acceder a las variables locales de esta última. -* Una función puede devolver un valor. Sino lo hace, entonces el resultado es `undefined` +A Caro le gustaría saber en cada pedido de las empresas que tiene precargadas, además de saber qué saludo mandarles, también saber cuánto debería cobrarles, teniendo en cuenta si tienen descuentos o no y si debería darle tortas extras y cuántas. -Para que el código sea más simple y fácil de entender, es recomendable usar principalmente variables locales y parámetros en la función y no variables por fuera de la misma. +### Requerimientos -Siempre es más fácil de entender una función que recibe parámetros, trabaja con ellos y devuelve un resultado que una funcioón que no recibe parámetros y modifica variables por fuera de ella como un side-effect. +* Hacer un programa que modele los descuentos y tortas extras. +* Utilizar los descuentos y tortas extras a la hora de hacer un pedido y en base a ellos indique cuánto cobrarle a la empresa y cuántas tortas debe enviarle, junto con qué saludo. -Nombrando funciones: +[Respuestas](/respuestas/08.js) -* El nombre debe describir claramente lo que la función hace. Cuando vemos la llamada a la función en el código, un buen nombre instantaneamente nos describe que hace y que devuelve. -* Una función es una acción, por ende los nombres de las funciones son verbos. Existen varios prefijos conocidos como : crear..., mostrar..., obtener..., verificar... y más. Usalos como pistas de lo que la función hace. +[Continuar con Links para seguir aprendiendo](/#links-extras-para-seguir-aprendiendo) diff --git a/respuestas/07.js b/respuestas/08.js similarity index 100% rename from respuestas/07.js rename to respuestas/08.js From 6f9d9b539e7e31ccdd5045fe80d2b6365a91057e Mon Sep 17 00:00:00 2001 From: Alejandro Krumkamp Date: Fri, 26 Jul 2019 19:02:49 -0300 Subject: [PATCH 2/4] Fix broken link --- ejercicios/conceptuales/08.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ejercicios/conceptuales/08.md b/ejercicios/conceptuales/08.md index dd8aa7b..91625a6 100644 --- a/ejercicios/conceptuales/08.md +++ b/ejercicios/conceptuales/08.md @@ -79,5 +79,5 @@ A Caro le gustaría saber en cada pedido de las empresas que tiene precargadas, [Respuestas](/respuestas/08.js) -[Continuar con Links para seguir aprendiendo](/#links-extras-para-seguir-aprendiendo) +[Continuar con Links para seguir aprendiendo](/README.md#links-extras-para-seguir-aprendiendo) From b885f909f2c66d6f22ce0603903162267791065e Mon Sep 17 00:00:00 2001 From: Alejandro Krumkamp Date: Fri, 26 Jul 2019 19:04:24 -0300 Subject: [PATCH 3/4] Fix README content index --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c38e1c4..b3e3422 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,8 @@ Para conocer más sobre la historia y los fundamentos de Javascript podes empeza 4. [Operadores](ejercicios/conceptuales/04.md) 5. [Condicionales](ejercicios/conceptuales/05.md) 6. [prompt\(\)](ejercicios/conceptuales/06.md) -7. [Ejercicio Integrador](ejercicios/conceptuales/07.md) -8. [Funciones](ejercicios/conceptuales/08.md) +7. [Funciones](ejercicios/conceptuales/07.md) +8. [Ejercicio Integrador](ejercicios/conceptuales/08.md) ### Ejercicios Botiquín Virtual From 329cea0369534b35e50c9a39ee048eb367c6d5e0 Mon Sep 17 00:00:00 2001 From: Alejandro Krumkamp Date: Sat, 9 Nov 2019 11:45:00 -0300 Subject: [PATCH 4/4] Ejercicio de booleanos sin soluciones que no corresponden a un ejercicio --- ejercicios/conceptuales/02.md | 2 +- respuestas/02.js | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/ejercicios/conceptuales/02.md b/ejercicios/conceptuales/02.md index a5bd750..a6a045b 100644 --- a/ejercicios/conceptuales/02.md +++ b/ejercicios/conceptuales/02.md @@ -35,7 +35,7 @@ false; 1. Usando un número, mostrar tu edad por la ventana. 2. Usando una cadena de caracteres, mostrar tu nombre por la ventana. -3. Usando un booleano, mostrar el valor verdadero por la ventana. +3. Usando un booleano, mostrar el valor verdadero (true) por la ventana. [Respuestas](/respuestas/02.js) diff --git a/respuestas/02.js b/respuestas/02.js index 7228630..5fb6d80 100644 --- a/respuestas/02.js +++ b/respuestas/02.js @@ -9,7 +9,3 @@ alert('Cristhian'); // Usando un booleano, mostrar el valor verdadero en la ventana. alert(true); - -// Usando un solo `alert`, mostrar los valores `1`, `200`, `'Genial'`, `false`, `true`. - -alert(1, 200, 'Genial', false, true);