10 | Yo soy inline, pueden ponerse cosas al lado mio.Yo soy otro span.
11 |
12 |
13 |
--------------------------------------------------------------------------------
/10-JS-Extra-Homeworks/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Javascript X - Ejercicios Extras
2 |
3 | ## Instrucciones
4 |
5 | ---
6 |
7 | 1. En esta homework encontrarás ejercicios extras, para que sigas afianzando todo lo aprendido hasta el momento.
8 |
9 | 2. Desde la carpeta `Prep` en la carpeta donde clonaste el repo, ingresa el comando `npm test JSX.test.js` para correr los tests automatizados. Al principio, todos los tests estarán fallados/rotos. Encontrarás las funciones para hacer pasar los tests en el archivo `homework.js`.
10 |
--------------------------------------------------------------------------------
/08-HTML/demos/clase1/htmlConEstilo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Estilos
5 |
6 |
15 |
16 |
17 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/09-CSS-Positioning/homework/homework.css:
--------------------------------------------------------------------------------
1 | /*
2 | Lección 3: Tarea de posicionamiento con CSS. Todo el trabajo debe hacerse en este archivo, por lo que si estás tocando cualquier otro
3 | archivo en cualquiera de estas carpetas, estás en el lugar equivocado.
4 | */
5 |
6 | /* Ejercicio 1: Centrar el texto en un span */
7 |
8 | /* Arrancaremos este ejercicio por vos: */
9 | #ejercicioUno {
10 |
11 | }
12 |
13 |
14 | /* Ejercicio 2: Posicionar el header */
15 |
16 | /* Acá va tu código */
17 |
18 |
19 |
20 | /* Ejercicio 3: */
21 |
22 | /* Acá va tu código */
23 |
24 |
25 |
26 | /* Ejercicio 4: */
27 |
28 | /* Acá va tu código */
29 |
30 |
31 |
32 | /* Ejercicio 5: */
33 |
34 | /* Acá va tu código */
35 |
36 |
37 |
38 | /* Ejercicio 6. */
39 |
--------------------------------------------------------------------------------
/04-JS-III/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Javascript III
2 |
3 | ## Instrucciones
4 | ---
5 | 1. En un archivo de texto separado que debes crear, escribe explicaciones de los siguientes conceptos como si se lo estuvieras explicando a un niño de 12 años. Hacer esto te ayudará a descubrir rápidamente cualquier agujero en tu comprensión.
6 |
7 | * Arrays
8 |
9 | 2. Desde la carpeta `Prep` en la carpeta donde clonaste el repo, ingresa el comando `npm test JSIII.test.js` para correr los tests automatizados. Al principio, todos los tests estarán fallados/rotos. Encontrarás las funciones para hacer pasar los tests en el archivo `homework.js`.
10 |
11 |
12 | ### Aca tendras acceso a las [Soluciones](https://github.com/atralice/Curso.Prep.Henry/blob/solution/04-JS-III/homework/homework.js)
--------------------------------------------------------------------------------
/03-JS-II/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Javascript II
2 |
3 | ## Instrucciones
4 | ---
5 | 1. En un archivo de texto separado que debes crear, escribe explicaciones de los siguientes conceptos como si se lo estuvieras explicando a un niño de 12 años. Hacer esto te ayudará a descubrir rápidamente cualquier agujero en tu comprensión.
6 |
7 | * `for`
8 | * `&&`, `||`, `!`
9 |
10 | 2. Desde la carpeta `Prep` en la carpeta donde clonaste el repo, ingresa el comando `npm test JSII.test.js` para correr los tests automatizados. Al principio, todos los tests estarán fallados/rotos. Encontrarás las funciones para hacer pasar los tests en el archivo `homework.js`.
11 |
12 | ### Aca tendras acceso a las [Soluciones](https://github.com/atralice/Curso.Prep.Henry/blob/solution/03-JS-II/homework/homework.js)
--------------------------------------------------------------------------------
/06-JS-V/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Javascript V
2 |
3 | ## Instrucciones
4 | ---
5 | 1. En un archivo de texto separado que debes crear, escribe explicaciones de los siguientes conceptos como si se lo estuvieras explicando a un niño de 12 años. Hacer esto te ayudará a descubrir rápidamente cualquier agujero en tu comprensión.
6 |
7 | * `prototype`
8 | * _Constructors_ (de Clases)
9 |
10 | 2. Desde la carpeta `Prep` en la carpeta donde clonaste el repo, ingresa el comando `npm test JSV.test.js` para correr los tests automatizados. Al principio, todos los tests estarán fallados/rotos. Encontrarás las funciones para hacer pasar los tests en el archivo `homework.js`.
11 |
12 | ### Aca tendras acceso a las [Soluciones](https://github.com/atralice/Curso.Prep.Henry/blob/solution/06-JS-V/homework/homework.js)
--------------------------------------------------------------------------------
/07-JS-VI/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Javascript VI
2 |
3 | ## Instrucciones
4 | ---
5 | 1. En un archivo de texto separado que debes crear, escribe explicaciones de los siguientes conceptos como si se lo estuvieras explicando a un niño de 12 años. Hacer esto te ayudará a descubrir rápidamente cualquier agujero en tu comprensión.
6 |
7 | * Funciones Callback
8 |
9 | 2. Desde el nivel superior de la carpeta `tests` dentro de esta carpeta `homework`, ingresa el comando `npm test JSVI.test.js` para correr los tests automatizados. Al principio, todos los tests estarán fallados/rotos. Encontrarás las funciones para hacer pasar los tests en el archivo `homework.js`.
10 |
11 | ### Aca tendras acceso a las [Soluciones](https://github.com/atralice/Curso.Prep.Henry/blob/solution/07-JS-VI/homework/homework.js)
--------------------------------------------------------------------------------
/05-JS-IV/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Javascript IV
2 |
3 | ## Instrucciones
4 | ---
5 | 1. En un archivo de texto separado que debes crear, escribe explicaciones de los siguientes conceptos como si se lo estuvieras explicando a un niño de 12 años. Hacer esto te ayudará a descubrir rápidamente cualquier agujero en tu comprensión.
6 |
7 | * Objetos
8 | * Propiedades
9 | * Métodos
10 | * Bucle `for…in`
11 | * Notación de puntos vs notación de corchetes
12 |
13 | 2. Desde la carpeta `Prep` en la carpeta donde clonaste el repo, ingresa el comando `npm test JSIV.test.js` para correr los tests automatizados. Al principio, todos los tests estarán fallados/rotos. Encontrarás las funciones para hacer pasar los tests en el archivo `homework.js`.
14 |
15 | ### Aca tendras acceso a las [Soluciones](https://github.com/atralice/Curso.Prep.Henry/blob/solution/05-JS-IV/homework/homework.js)
--------------------------------------------------------------------------------
/09-CSS-Positioning/demo/boxModel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Box Model
5 |
28 |
29 |
30 |
31 |
Soy chico
32 |
Soy más grande. Porqué si los dos tenemos 500 px de width
33 |
34 | Soy más grande. Porqué si los dos tenemos 500 px de width
35 |
Absolute
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/02-JS-I/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Introducción a Javascript
2 |
3 | ---
4 |
5 | ## Instrucciones
6 |
7 | 1. En un archivo de texto separado que debes crear, escribe explicaciones de los siguientes conceptos como si se lo estuvieras explicando a un niño de 12 años. Hacer esto te ayudará a descubrir rápidamente cualquier agujero en tu comprensión.
8 |
9 | * Variables
10 | * Strings
11 | * Funciones (argumentos, `return`)
12 | * Declaraciones `if`
13 | * Valores booleanos (`true`, `false`)
14 |
15 | 2. Instalar Node y NPM. NPM se incluye con Node.
16 |
17 | 3. Desde la carpeta `Prep.Course` en la carpeta donde clonaste el repo: ingresa el comando `npm install`, una vez que termine ingresa el comando `npm test JSI.test.js` para correr los tests automatizados. Al principio, todos los tests estarán fallados/rotos. Encontrarás las funciones para hacer pasar los tests en el archivo `homework.js`.
18 |
19 | >> Deberás ir escribiendo código en `homework.js` y corriendo de nuevo los tests hasta que TODOS hayan pasado.
20 |
21 | 4. Una vez que termines cada homework, súbela a tu repositorio `Prep.Course`, con los comandos que ya aprendiste a usar en la primera lección de git.
22 |
23 | ### Aca tendras acceso a las [Soluciones](https://github.com/atralice/Curso.Prep.Henry/blob/solution/02-JS-I/homework/homework.js)
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "prep",
3 | "version": "1.0.0",
4 | "description": "
",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "eleventy --serve",
8 | "build": "eleventy",
9 | "test": "jest --collectCoverage=false --testResultsProcessor ./.reporter/index.js --detectOpenHandles"
10 | },
11 | "devDependencies": {
12 | "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
13 | "eslint": "^7.32.0",
14 | "jest": "^27.2.0",
15 | "standard": "^16.0.4"
16 | },
17 | "author": "Henry",
18 | "license": "ISC",
19 | "jest": {
20 | "testURL": "http://localhost/"
21 | },
22 | "dependencies": {
23 | "@11ty/eleventy": "^0.12.1",
24 | "@11ty/eleventy-cache-assets": "^2.3.0",
25 | "@11ty/eleventy-navigation": "^0.3.2",
26 | "bootstrap": "^5.1.3",
27 | "eleventy-navigation-bootstrap": "^0.1.2",
28 | "eleventy-plugin-toc": "^1.1.5",
29 | "git-remote-origin-url": "^3.1.0",
30 | "git-url-parse": "^11.6.0",
31 | "henry-reader-bar": "https://d31uz8lwfmyn8g.cloudfront.net/Modules/henry-reader-bar-0.2.0.tgz",
32 | "henry-reading-time": "https://d31uz8lwfmyn8g.cloudfront.net/Modules/henry-reading-time-0.1.0.tgz",
33 | "markdown-it": "^12.3.0",
34 | "markdown-it-anchor": "^8.4.1",
35 | "markdown-it-highlightjs": "^3.5.0",
36 | "simple-git": "^2.45.1"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/Simulación Challenge/README.md:
--------------------------------------------------------------------------------
1 | # Simulación Challenge
2 | ¡Bienvenid@ a esta prueba técnica 😁!
3 | En este repositorio encontrarás un modelo del Henry Challenge que podrás utilizar como autoevaluación, y así comprobar que estás listo para aprobar el Challenge.
4 |
5 | LINK AL REPOSITORIO: AQUI.
6 |
7 | Con estos ejercicios podrás practicar conceptos básicos sobre Javascript estudiados durante el Prep Course. El objetivo es que puedas chequear cuáles son tus conocimientos sólidos, y que conceptos necesitas ajustar un poco más 🤩
8 |
9 | Encontrarás algunos ejercicios en los que se piden cosas puntuales que tal vez no vimos en el Prep Course, pero descuida, ¡porque es a propósito! Lo ideal es que comiences a pulir tus habilidades de investigación, ya que en el mundo de la programación Google es nuestro mejor amigo.
10 |
11 | 🤔 ¿Cuántas veces lo puedo completar?
12 |
13 | ¡Todas las que quieras! No hay límite.
14 |
15 | 😦 ¿A quién o en dónde debo entregarlo una vez resuelto?
16 |
17 | A nadie y en ningún lugar. Este material no es obligatorio, sino que sirve para que puedas chequear tu mismo en qué situación te encuentras.
18 |
19 | 🤨 ¿Qué sucede si no puedo avanzar en un ejercicio?
20 |
21 | ¡Descuida! No tienes tiempo límite para resolverlo. Por lo que puedes investigar en internet, volver a ver las clases del Prep Course e incluso repasar las homeworks que hayas completado.
22 |
23 | 🤓 ¿Si luego de seguir investigando no puedo avanzar con un ejercicio?
24 |
25 | Podrás consultar todas tus dudas en el canal #simulación_challenge de Slack
26 |
27 |
28 | Una vez que lo hayas realizado, estarás listo para continuar a la próxima seccion donde podrás inscribirte al Henry Challenge.
29 |
30 |
31 | ### ¡Muchos éxitos!
32 |
--------------------------------------------------------------------------------
/07-JS-VI/homework/homework.js:
--------------------------------------------------------------------------------
1 | // Do not change any of the function names
2 |
3 | function mayuscula(nombre) {
4 | //La función recibe un nombre y debe devolver el mismo que recibe pero con su primer letra en mayúscula
5 | //ej: Recibe "mario" ----> Devuelve "Mario"
6 | //Tu código:
7 | }
8 |
9 | function invocarCallback(cb) {
10 | // Invoca al callback `cb`
11 | //Tu código:
12 | }
13 |
14 | function operacionMatematica(n1, n2, cb) {
15 | //Vamos a recibir una función que realiza una operación matemática como callback junto con dos números.
16 | //Devolver el callback pasándole como argumentos los números recibidos.
17 | //Tu código:
18 | }
19 |
20 | function sumarArray(numeros, cb) {
21 | // Suma todos los números enteros (int/integers) de un array ("numeros")
22 | // Pasa el resultado a `cb`
23 | // No es necesario devolver nada
24 | //Tu código:
25 | }
26 |
27 | function forEach(array, cb) {
28 | // Itera sobre la matriz "array" y pasa los valores al callback uno por uno
29 | // Pista: Estarás invocando a `cb` varias veces (una por cada valor en la matriz)
30 | //Tu código:
31 | }
32 |
33 | function map(array, cb) {
34 | // Crea un nuevo array
35 | // Itera sobre cada valor en "array", pásalo a `cb` y luego ubicar el valor devuelto por `cb` en un nuevo array
36 | // El nuevo array debe tener la misma longitud que el array del argumento
37 | //Tu código:
38 | }
39 |
40 | function filter(array) {
41 | //Filtrar todos los elementos del array que comiencen con la letra "a".
42 | //Devolver un nuevo array con los elementos que cumplen la condición
43 | //Tu código:
44 | }
45 |
46 | // No modificar nada debajo de esta línea
47 | // --------------------------------
48 |
49 | module.exports = {
50 | mayuscula,
51 | invocarCallback,
52 | operacionMatematica,
53 | sumarArray,
54 | forEach,
55 | map,
56 | filter
57 | };
58 |
--------------------------------------------------------------------------------
/06-JS-V/homework/tests/JSV.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const {
3 | crearUsuario,
4 | agregarMetodoPrototype,
5 | agregarStringInvertida,
6 | crearInstanciaPersona,
7 | agregarMetodo,
8 | Persona
9 | } = require('../homework');
10 |
11 | describe('crearUsuario()', function() {
12 | it('should return a user constructor that correctly builds user objects', function() {
13 | const Usuario = crearUsuario();
14 | const user = new Usuario({usuario: 'jssamuel', nombre: 'Samuel', email: 'samuel@email.com', password: 'LoveJS' });
15 | expect(user.usuario).toBe('jssamuel');
16 | expect(user.nombre).toBe('Samuel');
17 | expect(user.email).toBe('samuel@email.com');
18 | expect(user.password).toBe('LoveJS');
19 | expect(user.saludar()).toBe('Hola, mi nombre es Samuel');
20 | });
21 | });
22 |
23 | describe('agregarMetodoPrototype(Constructor)', function() {
24 | it('should add the method saludar to the constructor', function() {
25 | function Test() {
26 | this.test = true;
27 | }
28 | agregarMetodoPrototype(Test);
29 | const test = new Test();
30 | expect(test.saludar()).toBe('Hello World!');
31 | });
32 | });
33 |
34 | describe('agregarStringInvertida(StringPrototype)', function(){
35 | it('should add a reverse string method to the String prototype that returns a reversed version of the string', function() {
36 | agregarStringInvertida();
37 | const str = 'Hello';
38 | expect(str.reverse()).toBe('olleH');
39 | });
40 | });
41 |
42 | describe('crearInstanciaPersona()', function() {
43 | it('should return a new instance of Persona', function() {
44 | expect(crearInstanciaPersona("Juan", "Pérez", 22, "Saavedra 123")).toBeInstanceOf(Persona);
45 | });
46 | });
47 |
48 | describe('agregarMetodo(Persona)', function() {
49 | it('should add the method datos to the constructor', function() {
50 | agregarMetodo();
51 | const persona = new Persona("Juan", "Pérez", 22, "Saavedra 123");
52 | expect(persona.datos()).toBe('Juan, 22 años');
53 | });
54 | });
55 |
56 |
--------------------------------------------------------------------------------
/09-CSS-Positioning/homework/assets/css/no-tocar.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #e5efff;
3 | margin: 95px 0 100px 0;
4 | color: #383f49;
5 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
6 | }
7 |
8 | #header {
9 | text-align: center;
10 | }
11 |
12 | .container {
13 | padding: 30px;
14 | }
15 |
16 | #ejercicioDos {
17 | height: 50px;
18 | text-align: center;
19 | border: 1px solid purple;
20 | }
21 |
22 | #containerImagen {
23 | width: 1000px;
24 | height: 500px;
25 | border: 5px solid #3574d2;
26 | background-color: #bdd6fc;
27 | margin-left: auto;
28 | margin-right: auto;
29 | margin-top: 20px;
30 | position: relative;
31 | }
32 |
33 | #containerObjetivo {
34 | width: 400px;
35 | height: 300px;
36 | border: 5px dashed red;
37 | position: absolute;
38 | top: 95px;
39 | left: 195px;
40 | }
41 |
42 | #spanDescriptivo {
43 | position: absolute;
44 | top: 100px;
45 | left: 615px;
46 | padding-right: 20px;
47 |
48 | }
49 |
50 | #ejercicioCuatro {
51 | display: block;
52 | width: 100vw;
53 | height: 70px;
54 | background-color: #3574d2;
55 | }
56 |
57 | #ejercicioCinco span {
58 | font-size: 20px;
59 | color: white;
60 | }
61 |
62 | #ejercicioCinco {
63 | height: 100%;
64 | padding: 0 10px;
65 | }
66 |
67 | #ejercicioSiete {
68 | width: 500px;
69 | height: 400px;
70 | margin-left: auto;
71 | margin-right: auto;
72 | border: 3px solid black;
73 | position: relative;
74 | background-color: black;
75 | display: flex;
76 | }
77 |
78 | .textoElemento {
79 | display: block;
80 | text-align: center;
81 | align-self: center;
82 | }
83 |
84 | .elementos {
85 | width: 150px;
86 | height: 100px;
87 | display: flex;
88 | background-color: white;
89 | }
90 |
91 | #elementoUno {
92 | border: 2px dashed green;
93 | }
94 |
95 | #elementoDos {
96 | border: 2px dashed orange;
97 | }
98 |
99 | #elementoTres {
100 | border: 2px dashed blue;
101 | }
102 |
103 | #elementoCuatro {
104 | border: 2px dashed red;
105 | }
106 |
--------------------------------------------------------------------------------
/07-JS-VI/homework/tests/JSVI.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const {
3 | mayuscula,
4 | invocarCallback,
5 | operacionMatematica,
6 | sumarArray,
7 | forEach,
8 | map,
9 | filter
10 | } = require('../homework');
11 |
12 | describe('mayuscula(nombre)', function() {
13 | it('should return the same name with the first letter capitalized', function() {
14 | expect(mayuscula("mario")).toBe("Mario");
15 | expect(mayuscula("ana")).toBe("Ana");
16 | });
17 | });
18 |
19 | describe('invocarCallback(cb)', function() {
20 | it('should invoke the callback that is passed in', function() {
21 | const cb = jest.fn();
22 | invocarCallback(cb);
23 | expect(cb).toHaveBeenCalled();
24 | });
25 | });
26 |
27 | describe('operacionMatematica(n1, n2, cb)', function() {
28 | it('should return the callback function passing it the received arguments', function() {
29 | const cb = jest.fn();
30 | operacionMatematica(100, 20, cb);
31 | expect(cb).toHaveBeenCalled();
32 | });
33 | });
34 |
35 | describe('sumarArray(cb)', function() {
36 | it('should pass the sum of all array numbers to cb', function(done) {
37 | sumarArray([1, 2, 3, 4, 5], function(sum) {
38 | expect(sum).toBe(15);
39 | done();
40 | });
41 | });
42 | });
43 |
44 | describe('forEach(arr, cb)', function() {
45 | it('should pass all array items one by one to cb', function() {
46 | const nums = [];
47 | forEach([1, 2, 3, 4, 5], function(num) {
48 | nums.push(num);
49 | });
50 | expect(nums).toEqual([1, 2, 3, 4, 5]);
51 | });
52 | });
53 |
54 | describe('map(arr, cb)', function() {
55 | it('should return an array of all the processed array elements', function() {
56 | const squares = map([1, 2, 3, 4, 5], function(num) {
57 | return num * num;
58 | });
59 | expect(squares).toEqual([1, 4, 9, 16, 25]);
60 | });
61 | });
62 |
63 | describe('filter(array)', function() {
64 | it('should return an array conteining the words that starts with "a"', function() {
65 | var array = ['abajo', 'pera', 'escalera', 'alerta', 'indice', 'azteca', 'arbol', 'buzo'];
66 | expect(filter(array)).toEqual(["abajo", "alerta", "azteca", "arbol"]);
67 | });
68 | });
69 |
--------------------------------------------------------------------------------
/Challenge/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Henry Challenge
4 |
5 | ¡Felicitaciones, llegaste a la última etapa del proceso de admisión: realizar el Henry Challenge!
6 |
7 | ## ¿Qué es el Henry Challenge?
8 |
9 | El Challenge es un examen donde evaluamos todos los conceptos aprendidos en el Prep Course.
10 |
11 | Consiste en una serie de ejercicios que deberás resolver, de manera muy similar a cómo resolviste los homeworks del Prep Course.
12 |
13 | ## ¿Cuándo lo puedo realizar?
14 |
15 | El challenge se realiza todos los sábados.
16 |
17 | El challenge debe resolverse de manera individual. Si lo realizas con ayuda te estarás perjudicando a ti mismo, dado que si no puedes resolverlo significa que aún no tienes los conocimientos básicos para ingresar y eso te generará muchos problemas durante la carrera.
18 |
19 | ## ¿Cómo sigue el proceso?
20 |
21 | En caso de aprobar, ya estarás listo para comenzar la carrera. Pasarás a la etapa de "onboarding" donde confirmarás cuándo quieres comenzar la carrera, podrás revisar el Acuerdo de Ingresos compartidos y responderemos todas tus dudas. Si no lo apruebas, podrás volver a intentarlo todas las veces que necesites.
22 |
23 | ¡Muchos éxitos!
24 |
25 | ## Inscripción
26 |
27 | La inscripción al Henry Challenge se realiza desde la Admissions Web App: Challenge
28 |
29 | ¿Qué es la Admissions Web App?
30 |
31 | Es una pagina que creamos para poder darles visibilidad sobre el estado de sus procesos de admisión.
32 |
33 | ¿Cómo ingreso a la Admissions App?
34 |
35 | Cuando comienzan su proceso de admisión y aplican a la carrera, se crea un usuario para ingresar a la misma.
36 |
37 | Luego, si quieren volver a ingresar podrán hacerlo AQUI.
38 |
39 | Quienes comenzaron su proceso de admisión antes de que pusiéramos en producción esta app, ¡no se preocupen! Pueden registrarse ahora por primera vez y, cuando ingresen, ya encontrarán completos todos los pasos que realizaron hasta el momento.
40 |
41 | ---
42 |
43 | #### Si tienes dudas sobre este tema, puedes consultarlas en el canal ***henry_challenge*** de Slack
44 |
--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
1 | const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
2 | const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
3 | const toBootstrapNav = require('eleventy-navigation-bootstrap')
4 | const pluginTOC = require('eleventy-plugin-toc')
5 | const markdownIt = require('markdown-it')
6 | const markdownItAnchor = require('markdown-it-anchor')
7 | const markdownItHighlightJS = require('markdown-it-highlightjs')
8 | const readerBar = require('henry-reader-bar')
9 | const readingTime = require('henry-reading-time')
10 |
11 | const mdOptions = {
12 | html: true,
13 | breaks: true,
14 | linkify: true,
15 | typographer: true,
16 | }
17 |
18 | const mdAnchorOpts = {
19 | permalink: true,
20 | permalinkClass: 'anchor-link',
21 | permalinkSymbol: '',
22 | level: [1, 2, 3, 4],
23 | }
24 |
25 | module.exports = function (eleventyConfig) {
26 | eleventyConfig.setLibrary(
27 | 'md',
28 | markdownIt(mdOptions)
29 | .use(markdownItAnchor, mdAnchorOpts)
30 | .use(markdownItHighlightJS)
31 | )
32 |
33 | eleventyConfig.addPlugin(eleventyNavigationPlugin)
34 | eleventyConfig.addPlugin(readingTime)
35 | eleventyConfig.addPlugin(readerBar)
36 | eleventyConfig.addPlugin(syntaxHighlight)
37 |
38 | eleventyConfig.addPlugin(pluginTOC, {
39 | tags: ['h2', 'h3'],
40 | ul: true,
41 | })
42 |
43 | eleventyConfig.addLinter(
44 | 'Spelling check',
45 | function (content, inputPath, outputPath) {
46 | let words = 'lenght, .lenght, .rigth'.split(',')
47 |
48 | // Eleventy 1.0+: use this.inputPath and this.outputPath instead
49 | if (inputPath.endsWith('.md')) {
50 | for (let word of words) {
51 | let regexp = new RegExp('\\b(' + word + ')\\b', 'gi')
52 | if (content.match(regexp)) {
53 | console.warn(`Spelling check (${inputPath}) Found: ${word}`)
54 | }
55 | }
56 | }
57 | }
58 | )
59 |
60 | eleventyConfig.addPassthroughCopy('_src/assets')
61 | eleventyConfig.addPassthroughCopy("_src/localStyles")
62 |
63 | eleventyConfig.addNunjucksFilter('bootstrapNav', toBootstrapNav)
64 |
65 | return {
66 | dir: {
67 | layouts: '/_src/layouts',
68 | data: '/_src/data',
69 | output: '_dist',
70 | },
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/06-JS-V/homework/homework.js:
--------------------------------------------------------------------------------
1 | // No cambies los nombres de las funciones.
2 |
3 | function crearUsuario() {
4 | // Crea una Clase de ES6 o una función constructor llamada "Usuario"
5 | // Debe aceptar un objeto "opciones" con las propiedades "usuario", "nombre", "email" y "password"
6 | // En el `contructor`, define el usuario, el nombre, el email y la contraseña
7 | // El `contructor` debe tener un método llamado "saludar" en su `prototype` que devuelva una string 'Hola, mi nombre es {{nombre}}'
8 | // {{nombre}} debe ser el nombre definido en cada instancia
9 | // Devuelve la clase
10 | // Tu código:
11 | }
12 |
13 | function agregarMetodoPrototype(Constructor) {
14 | // Agrega un método al Constructor del `prototype`
15 | // El método debe llamarse "saludar" y debe devolver la string "Hello World!"
16 | // Tu código:
17 | }
18 |
19 | function agregarStringInvertida() {
20 | // Agrega un método al prototype de String que devuelva la misma cadena de caracteres, pero invertida.
21 | // El método debe llamarse "reverse"
22 | // Ej: 'menem'.reverse() => menem
23 | // 'toni'.reverse() => 'inot'
24 | // Pista: Necesitarás usar "this" dentro de "reverse"
25 | }
26 |
27 | // ---------------------------------------------------------------------------//
28 | //Crea el constructor de la clase "Persona"
29 | //Debe tener las propiedades: "nombre", "apellido", "edad" y "domicilio"
30 | //Debe tener un método llamado "detalle" que nos devuelve un objeto con las propiedades de la persona y sus valores.
31 | //Ej: {
32 | // Nombre: 'Juan',
33 | // Apellido: 'Perez',
34 | // Edad: 22,
35 | // Domicilio: 'Saavedra 123'
36 | // }
37 |
38 | class Persona {
39 | constructor(/*Escribir los argumentos que recibe el constructor*/) {
40 | // Crea el constructor:
41 |
42 | }
43 | }
44 |
45 | function crearInstanciaPersona(nombre, apellido, edad, dir) {
46 | //Con esta función vamos a crear una nueva persona a partir de nuestro constructor de persona (creado en el ejercicio anterior)
47 | //Recibirá los valores "Juan", "Perez", 22, "Saavedra 123" para sus respectivas propiedades
48 | //Devolver la nueva persona creada
49 | }
50 |
51 | function agregarMetodo() {
52 | //La función agrega un método "datos" a la clase Persona que toma el nombre y la edad de la persona y devuelve:
53 | //Ej: "Juan, 22 años"
54 | }
55 |
56 |
57 | // No modificar nada debajo de esta línea
58 | // --------------------------------
59 |
60 | module.exports = {
61 | crearUsuario,
62 | agregarMetodoPrototype,
63 | agregarStringInvertida,
64 | crearInstanciaPersona,
65 | agregarMetodo,
66 | Persona
67 | };
68 |
--------------------------------------------------------------------------------
/_src/layouts/intro.njk:
--------------------------------------------------------------------------------
1 | ---
2 | logoNav: 'https://d31uz8lwfmyn8g.cloudfront.net/Assets/logo-henry-white-sm.png'
3 | favicon: 'https://assets.soyhenry.com/icons/favicon.ico'
4 | ---
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{ config.repoTitle }}
16 |
17 | {% set css %}
18 | {{ styles.fonts | safe }}
19 | {{ styles.header | safe }}
20 | {{ styles.main | safe }}
21 | {{ styles.topbar | safe }}
22 | {{ styles.sidebar | safe }}
23 | {{ styles.lessonIntro | safe }}
24 | {{ styles.code | safe }}
25 | {{ styles.footer | safe }}
26 | {{ styles.responsive | safe }}
27 | {% endset %}
28 |
29 |
32 |
33 |
34 |
35 |
36 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/10-JS-Extra-Homeworks/homework/homework.js:
--------------------------------------------------------------------------------
1 | // No cambies los nombres de las funciones.
2 |
3 | function deObjetoAmatriz(objeto){
4 | // Escribe una función que convierta un objeto en una matriz, donde cada elemento representa
5 | // un par clave-valor en forma de matriz.
6 | //Ejemplo:
7 | /*objeto({
8 | D: 1,
9 | B: 2,
10 | C: 3
11 | }) ➞ [["D", 1], ["B", 2], ["C", 3]]*/
12 | //Escribe tu código aquí
13 | }
14 |
15 |
16 | function numberOfCharacters(string) {
17 | //La función recibe un string. Recorre el srting y devuelve el caracter con el número de veces que aparece
18 | //en formato par clave-valor.
19 | //Ej: Recibe ---> "adsjfdsfsfjsdjfhacabcsbajda" || Devuelve ---> { a: 5, b: 2, c: 2, d: 4, f: 4, h:1, j: 4, s: 5 }
20 | //Escribe tu código aquí
21 | }
22 |
23 |
24 | function capToFront(s) {
25 | //Realiza una función que reciba como parámetro un string y mueva todas las letras mayúsculas
26 | //al principio de la palabra.
27 | //Ejemplo: soyHENRY -> HENRYsoy
28 | //Escribe tu código aquí
29 | }
30 |
31 |
32 | function asAmirror(str) {
33 | //La función recibe una frase.
34 | //Escribe una función que tome la frase recibida y la devuelva de modo tal que se pueda leer de izquierda a derecha
35 | //pero con cada una de sus palabras invertidas, como si fuera un espejo.
36 | //Ej: Recibe ---> "The Henry Challenge is close!" || Devuelve ---> "ehT yrneH egnellahC si !esolc"
37 | //Escribe tu código aquí
38 | }
39 |
40 |
41 | function capicua(numero){
42 | //Escribe una función, la cual recibe un número y determina si es o no capicúa.
43 | //La misma debe retornar: "Es capicua" si el número se número que se lee igual de
44 | //izquierda a derecha que de derecha a izquierda. Caso contrario retorna "No es capicua"
45 | //Escribe tu código aquí
46 | }
47 |
48 |
49 | function deleteAbc(cadena){
50 | //Define una función que elimine las letras "a", "b" y "c" de la cadena dada
51 | //y devuelva la versión modificada o la misma cadena, en caso de contener dichas letras.
52 | //Escribe tu código aquí
53 | }
54 |
55 |
56 | function sortArray(arr) {
57 | //La función recibe una matriz de strings. Ordena la matriz en orden creciente de longitudes de cadena
58 | //Ej: Recibe ---> ["You", "are", "beautiful", "looking"] || Devuelve ---> [“You", "are", "looking", "beautiful"]
59 | //Escribe tu código aquí
60 | }
61 |
62 |
63 | function buscoInterseccion(arreglo1, arreglo2){
64 | //Existen dos arrays, cada uno con 5 números. A partir de ello, escribir una función que permita
65 | //retornar un nuevo array con la intersección de ambos elementos. (Ej: [4,2,3] unión [1,3,4] = [3,4].
66 | //Si no tienen elementos en común, retornar un arreglo vacío.
67 | //Aclaración: los arreglos no necesariamente tienen la misma longitud
68 | //Escribe tu código aquí
69 | }
70 |
71 |
72 |
73 | // No modificar nada debajo de esta línea
74 | // --------------------------------
75 |
76 | module.exports = {
77 | deObjetoAmatriz,
78 | numberOfCharacters,
79 | capToFront,
80 | asAmirror,
81 | capicua,
82 | deleteAbc,
83 | sortArray,
84 | buscoInterseccion,
85 | };
86 |
87 |
--------------------------------------------------------------------------------
/10-JS-Extra-Homeworks/homework/tests/JSX.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const {
3 | deObjetoAmatriz,
4 | numberOfCharacters,
5 | capToFront,
6 | asAmirror,
7 | capicua,
8 | deleteAbc,
9 | sortArray,
10 | buscoInterseccion,
11 | } = require('../homework');
12 |
13 |
14 | describe('deObjetoAmatriz(objeto)', function() {
15 | it('should return an array, where each element represents a key-value pair in the form of an array.', function() {
16 | expect(deObjetoAmatriz({ x: 1, y: 2 })).toEqual([["x" , 1],["y" , 2]]);
17 | expect(deObjetoAmatriz({ x: 10, y: 25 })).toEqual([["x" , 10],["y" , 25]]);
18 | });
19 | });
20 |
21 | describe('numberOfCharacters(string)', function() {
22 | it('should return an object with the characters and the number of times they appear as a key-value pair', function() {
23 | expect(numberOfCharacters("sktpwrroqstkrpwwsqtqopwktsd")).toEqual({s:4, k:3, t:4, p:3, w:4, r:3, o:2, q:3, d:1 });
24 | expect(numberOfCharacters("adsjfdsfsfjsdjfhacabcsbajda")).toEqual({ a: 5, b: 2, c: 2, d: 4, f: 4, h:1, j: 4, s: 5 });
25 | });
26 | });
27 |
28 | describe('capToFront(s)', function() {
29 | it('should return all capital letters at the beginning of the word.', function() {
30 | expect(capToFront("soyHENRY")).toEqual("HENRYsoy");
31 | expect(capToFront("DESArrollaDOR")).toEqual("DESADORrrolla");
32 | });
33 | });
34 |
35 | describe('asAmirror(str)', function() {
36 | it('should return the string recieved with all the words reversed as a mirror', function() {
37 | expect(asAmirror("I love you so much!")).toBe("I evol uoy os !hcum");
38 | expect(asAmirror("The Henry Challenge is close!")).toBe("ehT yrneH egnellahC si !esolc");
39 | });
40 | });
41 |
42 | describe('capicua(numero)', function() {
43 | it('should return Es capicua if the number is read from right to left', function() {
44 | expect(capicua(12321)).toEqual("Es capicua");
45 | expect(capicua(1111)).toEqual("Es capicua");
46 | expect(capicua(105217)).toEqual("No es capicua");
47 | expect(capicua(7878700)).toEqual("No es capicua");
48 |
49 | });
50 | });
51 |
52 | describe('deleteAbc(cadena)', function() {
53 | it('should return the modified string if it has the letters abc or the same string otherwise', function() {
54 | expect(deleteAbc("abcefgh")).toEqual("efgh");
55 | expect(deleteAbc("abc")).toEqual("");
56 | expect(deleteAbc("plural")).toEqual("plurl");
57 | expect(deleteAbc("limon")).toEqual("limon");
58 |
59 | });
60 | });
61 |
62 | describe('sortArray(array)', function() {
63 | it('should return a new array in increasing order', function() {
64 | expect(sortArray(["You", "are", "beautiful", "looking"])).toEqual(["You", "are", "looking", "beautiful"]);
65 | expect(sortArray(["pera", "manzana", "alcaucil", "papa"])).toEqual(["pera", "papa", "manzana", "alcaucil"]);
66 | });
67 | });
68 |
69 | describe('buscoInterseccion(arreglo1, arreglo2)', function() {
70 | it('should return the common elements of the array, and in case they do not match, return an empty array', function() {
71 | expect(buscoInterseccion([1, 2 , 3], [1, 5, 8 , 3])).toEqual([1, 3]);
72 | expect(buscoInterseccion([7 , 23, 4], [23, 70])).toEqual([23]);
73 | expect(buscoInterseccion([1, 20 , 3], [22, 5, 7])).toEqual([]);
74 | });
75 | });
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/.reporter/index.js:
--------------------------------------------------------------------------------
1 | const gitRemoteOriginUrl = require("git-remote-origin-url");
2 | const GitUrlParse = require("git-url-parse");
3 | const fs = require('fs');
4 | const os = require('os');
5 | const axios = require('axios');
6 | const path = require('path');
7 |
8 | const WINDOWS = 'Windows_NT';
9 | const MACOS = 'Darwin';
10 | const LINUX = 'Linux';
11 | const USERNAME = os.userInfo().username;
12 | const WINDOWS_PATH = `C:\\Users\\${USERNAME}\\.gitconfig`;
13 | const MACOS_PATH = `${os.homedir()}/.gitconfig`;
14 | const LINUX_PATH = `${os.homedir()}/.gitconfig`;
15 | function getGitEmail() {
16 | switch (os.type()) {
17 | case WINDOWS:
18 | return getEmail(WINDOWS_PATH);
19 | case MACOS:
20 | return getEmail(MACOS_PATH);
21 | case LINUX:
22 | return getEmail(LINUX_PATH);
23 | }
24 | }
25 | function searchEmail(str) {
26 | var re = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
27 | return re.exec(str);
28 | }
29 | function getEmail(PATH) {
30 | try {
31 | const email = searchEmail(fs
32 | .readFileSync(PATH)
33 | .toString());
34 | if (email.length > 0) {
35 | return email[0];
36 | } else {
37 | console.log(`
38 | configura tu cuenta de git por favor!
39 | https://git-scm.com/book/es/v2/Personalizaci%C3%B3n-de-Git-Configuraci%C3%B3n-de-Git`);
40 | process.exit()
41 | }
42 | } catch (error) {
43 | console.log(
44 | `Tienes que instalar git!
45 | https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Instalaci%C3%B3n-de-Git`
46 | );
47 | process.exit()
48 | }
49 | }
50 |
51 | function readFile() {
52 | try{
53 | const lt = fs.readFileSync('./.reporter/lt.json');
54 | return JSON.parse(lt);
55 | } catch (e) {
56 | return {};
57 | }
58 | }
59 |
60 |
61 | module.exports = function report(data) {
62 | try {
63 | const lastRun = readFile();
64 | const username = getGitEmail();
65 | gitRemoteOriginUrl()
66 | .then((remote) => {
67 | const { name: repo, owner: github } = GitUrlParse(remote);
68 | const pedidos = data.testResults.map(test => {
69 | if(!lastRun[test.testFilePath]) {
70 | lastRun[test.testFilePath] = {
71 | passing: test.numPassingTests,
72 | tries: 0,
73 | }
74 | }
75 | if(lastRun[test.testFilePath].passing != test.numPassingTests || lastRun[test.testFilePath].tries == 0) {
76 | const tries = lastRun[test.testFilePath].tries;
77 | lastRun[test.testFilePath].passing = test.numPassingTests;
78 | lastRun[test.testFilePath].tries = 1;
79 | return axios.post('https://proxy.soyhenry.com:3001/m0/grade', {
80 | "pending": test.numPendingTests,
81 | "passing": test.numPassingTests,
82 | "failed": test.numFailingTests,
83 | "runtime": test.perfStats.runtime,
84 | "slow": test.perfStats.slow,
85 | "file": path.basename(test.testFilePath),
86 | "repo": repo,
87 | "github": github,
88 | "username": username,
89 | "tries": tries
90 | });
91 | } else {
92 | lastRun[test.testFilePath].tries++;
93 | lastRun[test.testFilePath].passing = test.numPassingTests;
94 | return Promise.resolve();
95 | }
96 | });
97 | return Promise.all(pedidos);
98 | })
99 | .then((results) => {
100 | fs.writeFileSync('./.reporter/lt.json', JSON.stringify(lastRun));
101 | })
102 | .catch((err) => {
103 | console.log(err);
104 | });
105 | } catch (error) {
106 | console.error(error);
107 | }
108 | return data;
109 | };
110 |
--------------------------------------------------------------------------------
/08-HTML/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: HTML
2 |
3 | Ahora que nos ha visto crear un archivo HTML y una hoja de estilo externa, crearas una propia.
4 |
5 | ## Ejercicio I
6 |
7 | Crear un nuevo archivo dentro de la carpeta `homework` llamado `homework.html` donde deberás realizar lo siguiente:
8 | ```
9 | I. Cree una página HTML básica.
10 | A. Cree el diseño básico para una página HTML usando html, head y body.
11 | B. Agregue un elemento de título y asigne a su página el título de "Tarea HTML de [Su nombre]".
12 | C. En el cuerpo, crea tres divs.
13 | 1. En el primer div crea:
14 | * un elemento h1 que contiene [Tu nombre].
15 | * un elemento h3 que contiene "Henry".
16 | * un elemento h4 que contiene "tarea de HTML / CSS".
17 | 2. En el segundo div crea:
18 | * un elemento span que contiene texto que describe su comida favorita.
19 | * un elemento 'a' que se vincula a su restaurante favorito.
20 | 3. En el tercer div crea:
21 | * una lista desordenada con dos elementos dentro de la lista
22 | * una etiqueta img en cada elemento de la lista que se vincula a su comida favorita. (Use la búsqueda de imágenes de Google para encontrar una foto y copiar la dirección de la misma o sino puede usar esta: "https://i.picsum.photos/id/1080/400/200.jpg").
23 | ```
24 |
25 | ```
26 | II Añade un poco de estilo
27 | A. Agregue la etiqueta de estilo a su documento HTML.
28 | B. Asignar al tercer div el id "thirdDiv".
29 | C. Asignar a los otros divs la clase "divClass".
30 | D. Asignar al span que se encuentra dentro de su segundo div el id "spanId".
31 | E. Agregue una regla de estilo a su elemento h1 cambiando el color del texto (Listado de colores: https://www.crockford.com/wrrrld/color.html).
32 | F. Agregue una regla de estilo al elemento img dándole un ancho de 400px.
33 | G. Agregue una regla de estilo a 'thirdDiv' cambiando la altura a 600px y el ancho a 500px.
34 | H. Agregue una regla de estilo a 'thirdDiv' cambiando el color de fondo por el que quiera.
35 | I. Cambie el tamaño de la fuente para 'spanId' a 18px.
36 | J. Asignar al id 'spanId' un margen de 50px.
37 | K. Asignar al id 'thirdDiv' un relleno (padding) de 50px.
38 | L. Asignar al id 'thirdDiv' un borde con cualquier ancho de color y estilo que elija.
39 | ```
40 |
41 | ```
42 | III. Cree una hoja de estilo externa y mueva todas las reglas de estilo anteriores a la nueva hoja de estilo.
43 | A. Cree un archivo llamado styles.css en esta carpeta.
44 | B. COPIE todas sus reglas de estilo en este nuevo archivo.
45 | C. Agregue una etiqueta de enlace a su html que importe su nuevo archivo css.
46 | ```
47 |
48 | ```
49 | IV. Suba su trabajo a su repositorio de github`
50 | ```
51 |
52 | ### Crédito adicional:
53 | > Para hacer los extra credits, generalmente será necesario que investigue algunas cosas por su cuenta en Internet.
54 |
55 | * Establecer una imagen como fondo de toda la página
56 | * Centrar los div en la página
57 | * Centrar todos los elementos en la página
58 | * [Lea sobre el posicionamiento y use la regla de posición en sus estilos](https://es.learnlayout.com/index.html)
59 | * Lea sobre flexbox y use flexbox para centrar todos los elementos en la página
60 |
61 | ## Ejercicio II
62 |
63 | ```
64 | Usando lo que aprendiste de HTML vas a crear un nuevo documento dentro de la carpeta de 'homework' llamado 'cv.html'. En el mismo vas crear tu propio Curriculum, deberá tener las siguientes secciones:
65 |
66 | * Titulo
67 | * Descripción Personal
68 | * Educación
69 | * Experiencias Laborales
70 | * Skills
71 | * Tu foto
72 | * Hobbies
73 |
74 | Además agregá una sección más donde expliques por qué estás estudiando esta carrera y cuáles son tus expectativas al finalizar la carrera.
75 |
76 | Subir también este archivo a su repositorio de github
77 |
78 | ```
79 |
80 | > Para este ejercicio vos vas a tener que elegir que **tags** html usar para darle la mejor estructuración al html. Acordate que en el futuro vamos a ver más en profundidad los estilos CSS, por lo que por ahora no te preocupes tanto del layout más allá de las reglas básicas.
81 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Prep Course
4 |
5 | #### Introducción
6 |
7 | ¡Hola! Bienvenido al Prep Course para la carrera de Desarrollo Web Full Stack
8 |
9 | En este curso introductorio podrás aprender todo el contenido que luego será evaluado en el Henry Challenge, el último paso para ingresar a la carrera de Desarrollo Web Full Stack en Henry.
10 |
11 | ## ¿Qué es el Prep Course?
12 |
13 | El Prep Course, o curso preparatorio, es un curso que diseñamos desde Henry con la finalidad de nivelar a todos nuestros aplicantes. La idea es que con este curso puedas dar tus primeros pasos en tecnología y así aprender esos conceptos básicos que serán necesarios para cuando estés dentro de la carrera.
14 |
15 | #### ¿En qué consiste el Prep Course?
16 |
17 | El curso consiste en una serie de videos, material escrito y ejercicios para que puedas ir aprendiendo estos conceptos básicos de Javascript, HTML y CSS. Todo el material se encuentra **aquí en la parte superior de la página**, iniciando por la sección de **"Intro"** y finalizando en la sección del **"Challenge"**.
18 |
19 | Podrás ir avanzando con el contenido a tu ritmo y de manera asincrónica (es decir, en los horarios y tiempos que tu prefieras). Cuando hayas finalizado, podrás inscribirte para realizar el Henry Challenge.
20 |
21 | ## ¿Qué es el Henry Challenge?
22 |
23 | Es un examen donde evaluamos los conceptos que se aprenden en el Prep Course. El examen tiene la finalidad de asegurarnos que realmente se han aprendido estos conceptos, dado que tenerlos bien claros es la clave de éxito para que puedas avanzar bien dentro de la carrera.
24 | El examen se realiza todos los sábados, previa inscripción en el siguiente [link](https://www.admissions.soyhenry.com/). Podrás rendirlo todas las veces que quieras. Para más información, puedes ir a la sección del challenge de este repositorio (prep.soyhenry.com/challenge).
25 |
26 | ## ¿Qué puedo hacer si tengo dudas?
27 |
28 | Contamos con dos herramientas de apoyo:
29 |
30 | **Slack:** es una plataforma de comunicación, donde podrás ponerte en contacto con nuestra comunidad que siempre te ayudará a resolver todas tus dudas. Encontrarás acceso a Slack desde la [plataforma de admisión](https://www.admissions.soyhenry.com/) o desde los mails que recibiste al momento de aplicar.
31 | Más adelante te explicaremos cómo usar la herramienta.
32 |
33 | **Clases de apoyo en vivo:** de lunes a viernes hay un espacio en vivo via Zoom con estudiantes avanzados que se postulan para responder todas tus consultas.
34 |
35 | #### Entonces, ¿qué debo hacer ahora para avanzar con el proceso?
36 |
37 | Debes comenzar a ver todos los videos, el material escrito y a hacer los ejercicios, siguiendo el orden postulado aquí en el curso. Una vez que hayas finalizado, podrás realizar el Henry Challenge.
38 |
39 | Cualquier duda, nos puedes escribir a admisiones@soyhenry.com
40 | ¡Muchos éxitos!
41 |
42 | ## Clases de Apoyo
43 |
44 | Para poder acompañarte en esta etapa, ponemos a disposición las “Clases de apoyo en vivo”. Estos son espacios donde los Henry Heros (HHs), es decir estudiantes avanzados de Henry, se ponen a disposición para despejar todas las dudas que puedas tener mientras estás estudiando el Prep Course.
45 |
46 | Las clases son de lunes a viernes, por la tarde. Cada día se establece una temática distinta a trabajar. Deberás llegar a la clase habiendo visto los videos sobre ese tema e intentado resolver los ejercicios, dado que en las clases no se explicará los temas desde cero sino que se resolverán dudas puntuales.
47 |
48 | Si no puedes asistir al espacio en vivo, podrás ver la grabación. Puedes encontrar el calendario con las clases, el link de acceso y el link de la grabación, aquí: [calendario](/Calendario)
49 |
50 | ## Open House
51 |
52 | Te compartimos esta grabación del último Open House que hicimos en nuestro canal de Youtube. En este video podrás conocer más sobre Henry, la carrera y el proceso de admisión:
53 |
54 |
55 |
56 |
57 |
58 | ## ¿Quieres conocer más sobre la carrera de Desarrollo Web Full Stack en Henry?
59 |
60 | En este video te explicamos todo lo que debes conocer:
61 |
62 |
126 |
127 |
128 |
--------------------------------------------------------------------------------
/05-JS-IV/homework/homework.js:
--------------------------------------------------------------------------------
1 | // No cambies los nombres de las funciones.
2 |
3 | function crearGato (nombre, edad) {
4 | // Crear un nuevo objeto con la propiedad "nombre" y el valor definido como el argumento "nombre".
5 | // Agrega una propiedad al objeto con el nombre "edad" y usa el valor definido en el argumento "edad"
6 | // Agrega un método (funcion) llamado "meow" que devuelva el string "Meow!"
7 | // Devuelve el objeto
8 | // Tu código:
9 | }
10 |
11 | function agregarPropiedad (objeto, property) {
12 | // Agrega una propiedad al objeto (argumento "objeto") con el valor `null`
13 | // Devuelve el objeto
14 | // NOTA: El nombre de la propiedad no es "propiedad", el nombre es el valor del argumento llamado "property" (una cadena/string)
15 | // Tu código:
16 | }
17 |
18 | function invocarMetodo (objeto, metodo) {
19 | // "metodo" es una cadena que contiene el nombre de un método (funcion) en el objeto
20 | // Invoca ese método
21 | // Nada necesita ser devuelto ("returned")
22 | // Tu código:
23 | }
24 |
25 | function multiplicarNumeroDesconocidoPorCinco (objetoMisterioso) {
26 | // "objetoMisterioso" tiene una propiedad llamada "numeroMisterioso"
27 | // Multiplica el numeroMisterioso por 5 y devuelve el producto
28 | // Tu código:
29 |
30 | }
31 |
32 | function eliminarPropiedad (objeto, unaPropiedad) {
33 | // Elimina la propiedad de objeto cuyo nombre está pasado por el parametro unaPropiedad
34 | // tip: tenes que usar bracket notation
35 | // Devuelve el objeto
36 | // Tu código:
37 | }
38 |
39 | function nuevoUsuario (nombre, email, password) {
40 | // Crea un nuevo objeto con las propiedades coincidiendo con los argumentos que se pasan a la función
41 | // Devuelve el objeto
42 | // Tu código:
43 |
44 | }
45 |
46 | function tieneEmail (usuario) {
47 | // Devuelve "true" si el usuario tiene un valor definido para la propiedad "email"
48 | // De lo contrario, devuelve "false"
49 | // Tu código:
50 | }
51 |
52 | function tienePropiedad (objeto, propiedad) {
53 | // Devuelve "true" si el objeto (parámetro "objeto") tiene una propiedad (key) cuyo nombre es igual al valor del argumento "propiedad"
54 | // "propiedad" es un string
55 | // De lo contrario, devuelve "false"
56 | // Tu código:
57 | }
58 |
59 | function verificarPassword (usuario, password) {
60 | // Comprueba si la "password" enviada coincide con la propiedad "password" del objeto "usuario"
61 | // Devuelve "true" si coinciden
62 | // De lo contrario, devuelve "false"
63 | // Tu código:
64 | }
65 |
66 | function actualizarPassword (usuario, nuevaPassword) {
67 | // Reemplaza la contraseña existente en el objeto "usuario" con el valor de "nuevaPassword"
68 | // Devuelve el objeto
69 | // Tu código:
70 | }
71 |
72 | function agregarAmigo (usuario, nuevoAmigo) {
73 | // "usuario" tiene una propiedad llamada "amigos" que es un array
74 | // Agrega "nuevoAmigo" al final de ese array
75 | // Devuelve el objeto "usuario"
76 | // Tu código:
77 | }
78 |
79 | function pasarUsuarioAPremium (usuarios) {
80 | // "usuarios" es un array de objetos "usuario"
81 | // Cada objeto "usuario" tiene la propiedad "esPremium"
82 | // Define cada propiedad "esPremium" de cada objeto como "true"
83 | // Devuelve el array de usuarios
84 | // Tu código:
85 | }
86 |
87 | function sumarLikesDeUsuario (usuario) {
88 | // "usuario" tiene una propiedad llamada "posts" que es un array
89 | // "posts" es un array de objetos "post"
90 | // Cada objeto "post" tiene una propiedad llamada "likes" que es un entero (int/integer)
91 | // Suma todos los likes de todos los objetos "post"
92 | // Devuelve la suma
93 | // Tu código:
94 | }
95 |
96 | function agregarMetodoCalculoDescuento (producto) {
97 | // Agregar un método (función) al objeto "producto" llamado "calcularPrecioDescuento"
98 | // Este método debe multiplicar el "precio" del "producto" ("producto.precio" o "producto[precio]") y "porcentajeDeDescuento" para obtener el descuento
99 | // El método resta el descuento del precio y devuelve el precio con descuento
100 | // Devuelve el objeto "producto" al final de la función
101 | // Ejemplo:
102 | // producto.precio -> 20
103 | // producto.porcentajeDeDescuento -> 0.2 (o simplemente ".2")
104 | // producto.calcularPrecioDescuento() -> 20 - (20 * 0.2)
105 | // Tu código:
106 |
107 | }
108 |
109 | // No modificar nada debajo de esta línea
110 | // --------------------------------
111 |
112 | module.exports = {
113 | crearGato,
114 | agregarPropiedad,
115 | invocarMetodo,
116 | multiplicarNumeroDesconocidoPorCinco,
117 | eliminarPropiedad,
118 | nuevoUsuario,
119 | tieneEmail,
120 | tienePropiedad,
121 | verificarPassword,
122 | actualizarPassword,
123 | agregarAmigo,
124 | pasarUsuarioAPremium,
125 | sumarLikesDeUsuario,
126 | agregarMetodoCalculoDescuento
127 | }
128 |
--------------------------------------------------------------------------------
/03-JS-II/homework/homework.js:
--------------------------------------------------------------------------------
1 | // No cambies los nombres de las funciones.
2 |
3 | function obtenerMayor(x, y) {
4 | // "x" e "y" son números enteros (int).
5 | // Devuelve el número más grande
6 | // Si son iguales, devuelve cualquiera de los dos
7 | // Tu código:
8 | }
9 |
10 | function mayoriaDeEdad(edad) {
11 | //Determinar si la persona según su edad puede ingresar a un evento.
12 | //Si tiene 18 años ó más, devolver --> "Allowed"
13 | //Si es menor, devolver --> "Not allowed"
14 | }
15 |
16 | function conection(status) {
17 | //Recibimos un estado de conexión de un usuario representado por un valor numérico.
18 | //Cuando el estado es igual a 1, el usuario está "Online"
19 | //Cuando el estado es igual a 2, el usuario está "Away"
20 | //De lo contrario, presumimos que el usuario está "Offline"
21 | //Devolver el estado de conexión de usuario en cada uno de los casos.
22 | }
23 |
24 | function saludo(idioma) {
25 | // Devuelve un saludo en tres diferentes lenguajes:
26 | // Si "idioma" es "aleman", devuelve "Guten Tag!"
27 | // Si "idioma" es "mandarin", devuelve "Ni Hao!"
28 | // Si "idioma" es "ingles", devuelve "Hello!"
29 | // Si "idioma" no es ninguno de los anteiores o es `undefined` devuelve "Hola!"
30 | // Tu código:
31 | }
32 |
33 | function colors(color) {
34 | //La función recibe un color. Devolver el string correspondiente:
35 | //En caso que el color recibido sea "blue", devuleve --> "This is blue"
36 | //En caso que el color recibido sea "red", devuleve --> "This is red"
37 | //En caso que el color recibido sea "green", devuleve --> "This is green"
38 | //En caso que el color recibido sea "orange", devuleve --> "This is orange"
39 | //Caso default: devuelve --> "Color not found"
40 | //Usar el statement Switch.
41 | }
42 |
43 | function esDiezOCinco(numero) {
44 | // Devuelve "true" si "numero" es 10 o 5
45 | // De lo contrario, devuelve "false"
46 | // Tu código:
47 | }
48 |
49 | function estaEnRango(numero) {
50 | // Devuelve "true" si "numero" es menor que 50 y mayor que 20
51 | // De lo contrario, devuelve "false"
52 | // Tu código:
53 | }
54 |
55 | function esEntero(numero) {
56 | // Devuelve "true" si "numero" es un entero (int/integer)
57 | // Ejemplo: 0.8 -> false
58 | // Ejemplo: 1 -> true
59 | // Ejemplo: -10 -> true
60 | // De lo contrario, devuelve "false"
61 | // Pista: Puedes resolver esto usando `Math.floor`
62 | // Tu código:
63 | }
64 |
65 | function fizzBuzz(numero) {
66 | // Si "numero" es divisible entre 3, devuelve "fizz"
67 | // Si "numero" es divisible entre 5, devuelve "buzz"
68 | // Si "numero" es divisible entre 3 y 5 (ambos), devuelve "fizzbuzz"
69 | // De lo contrario, devuelve el numero
70 | }
71 |
72 | function operadoresLogicos(num1, num2, num3) {
73 | //La función recibe tres números distintos.
74 | //Si num1 es mayor a num2 y a num3 y además es positivo, retornar ---> "Número 1 es mayor y positivo"
75 | //Si alguno de los tres números es negativo, retornar ---> "Hay negativos"
76 | //Si num3 es más grande que num1 y num2, aumentar su valor en 1 y retornar el nuevo valor.
77 | //0 no es ni positivo ni negativo. Si alguno de los argumentos es 0, retornar "Error".
78 | //Si no se cumplen ninguna de las condiciones anteriores, retornar false.
79 | }
80 |
81 | function esPrimo(numero) {
82 | // Devuelve "true" si "numero" es primo
83 | // De lo contrario devuelve "falso"
84 | // Pista: un número primo solo es divisible por sí mismo y por 1
85 | // Pista 2: Puedes resolverlo usando un bucle `for`
86 | // Nota: Los números 0 y 1 NO son considerados números primos
87 | }
88 |
89 | function esVerdadero(valor){
90 | //Escribe una función que reciba un valor booleano y retorne “Soy verdadero”
91 | //si su valor es true y “Soy falso” si su valor es false.
92 | //Escribe tu código aquí
93 |
94 | }
95 |
96 | function tablaDelSeis(){
97 | //Escribe una función que muestre la tabla de multiplicar del 6 (del 0 al 60).
98 | //La función devuelve un array con los resultados de la tabla de multiplicar del 6 en orden creciente.
99 | //Escribe tu código aquí
100 |
101 | }
102 |
103 | function tieneTresDigitos(numero){
104 | //Leer un número entero y retornar true si tiene 3 dígitos. Caso contrario, retorna false.
105 | //Escribe tu código aquí
106 |
107 | }
108 |
109 | function doWhile(numero) {
110 | //Implementar una función tal que vaya aumentando el valor recibido en 5 hasta un límite de 8 veces
111 | //Retornar el valor final.
112 | //Usar el bucle do ... while.
113 | }
114 |
115 |
116 | // No modificar nada debajo de esta línea
117 | // --------------------------------
118 |
119 | module.exports = {
120 | obtenerMayor,
121 | mayoriaDeEdad,
122 | conection,
123 | saludo,
124 | colors,
125 | esDiezOCinco,
126 | estaEnRango,
127 | esEntero,
128 | fizzBuzz,
129 | operadoresLogicos,
130 | esPrimo,
131 | esVerdadero,
132 | tablaDelSeis,
133 | tieneTresDigitos,
134 | doWhile
135 | };
136 |
--------------------------------------------------------------------------------
/04-JS-III/homework/homework.js:
--------------------------------------------------------------------------------
1 | // No cambies los nombres de las funciones.
2 |
3 | function devolverPrimerElemento(array) {
4 | // Devuelve el primer elemento de un array (pasado por parametro)
5 | // Tu código:
6 | }
7 |
8 |
9 | function devolverUltimoElemento(array) {
10 | // Devuelve el último elemento de un array
11 | // Tu código:
12 | }
13 |
14 |
15 | function obtenerLargoDelArray(array) {
16 | // Devuelve el largo de un array
17 | // Tu código:
18 | }
19 |
20 |
21 | function incrementarPorUno(array) {
22 | // "array" debe ser una matriz de enteros (int/integers)
23 | // Aumenta cada entero por 1
24 | // y devuelve el array
25 | // Tu código:
26 | }
27 |
28 |
29 | function agregarItemAlFinalDelArray(array, elemento) {
30 | // Añade el "elemento" al final del array
31 | // y devuelve el array
32 | // Tu código:
33 | }
34 |
35 |
36 | function agregarItemAlComienzoDelArray(array, elemento) {
37 | // Añade el "elemento" al comienzo del array
38 | // y devuelve el array
39 | // Pista: usa el método `.unshift`
40 | // Tu código:
41 | }
42 |
43 |
44 | function dePalabrasAFrase(palabras) {
45 | // "palabras" es un array de strings/cadenas
46 | // Devuelve un string donde todas las palabras estén concatenadas
47 | // con espacios entre cada palabra
48 | // Ejemplo: ['Hello', 'world!'] -> 'Hello world!'
49 | // Tu código:
50 | }
51 |
52 |
53 | function arrayContiene(array, elemento) {
54 | // Comprueba si el elemento existe dentro de "array"
55 | // Devuelve "true" si está, o "false" si no está
56 | // Tu código:
57 | }
58 |
59 |
60 | function agregarNumeros(numeros) {
61 | // "numeros" debe ser un arreglo de enteros (int/integers)
62 | // Suma todos los enteros y devuelve el valor
63 | // Tu código:
64 | }
65 |
66 |
67 | function promedioResultadosTest(resultadosTest) {
68 | // "resultadosTest" debe ser una matriz de enteros (int/integers)
69 | // Itera (en un bucle) los elementos del array, calcula y devuelve el promedio de puntajes
70 | // Tu código:
71 | }
72 |
73 |
74 | function numeroMasGrande(numeros) {
75 | // "numeros" debe ser una matriz de enteros (int/integers)
76 | // Devuelve el número más grande
77 | // Tu código:
78 | }
79 |
80 |
81 | function multiplicarArgumentos() {
82 | // Usa la palabra clave `arguments` para multiplicar todos los argumentos y devolver el producto
83 | // Si no se pasan argumentos devuelve 0. Si se pasa un argumento, simplemente devuélvelo
84 | // Escribe tu código aquí:
85 | }
86 |
87 |
88 | function cuentoElementos(arreglo){
89 | //Realiza una función que retorne la cantidad de los elementos del arreglo cuyo valor es mayor a 18.
90 | //Escribe tu código aquí
91 |
92 | }
93 |
94 |
95 | function diaDeLaSemana(numeroDeDia) {
96 | //Suponga que los días de la semana se codifican como 1 = Domingo, 2 = Lunes y así sucesivamente.
97 | //Realiza una función que dado el número del día de la semana, retorne: Es fin de semana
98 | //si el día corresponde a Sábado o Domingo y “Es dia Laboral” en caso contrario.
99 | //Escribe tu código aquí
100 |
101 | }
102 |
103 |
104 | function empiezaConNueve(n) {
105 | //Desarrolle una función que recibe como parámetro un número entero n. Debe retornar true si el entero
106 | //inicia con 9 y false en otro caso.
107 | //Escribe tu código aquí
108 |
109 | }
110 |
111 |
112 | function todosIguales(arreglo) {
113 | //Escriba la función todosIguales, que indique si todos los elementos de un arreglo son iguales:
114 | //retornar true, caso contrario retornar false.
115 | //Escribe tu código aquí
116 |
117 | }
118 |
119 |
120 | function mesesDelAño(array) {
121 | //Dado un array que contiene algunos meses del año desordenados, recorrer el array buscando los meses de
122 | // "Enero", "Marzo" y "Noviembre", guardarlo en nuevo array y retornarlo.
123 | //Si alguno de los meses no está, devolver: "No se encontraron los meses pedidos"
124 | // Tu código:
125 | }
126 |
127 |
128 | function mayorACien(array) {
129 | //La función recibe un array con enteros entre 0 y 200. Recorrer el array y guardar en un nuevo array sólo los
130 | //valores mayores a 100 (no incluye el 100). Finalmente devolver el nuevo array.
131 | // Tu código:
132 | }
133 |
134 |
135 | function breakStatement(numero) {
136 | //Iterar en un bucle aumentando en 2 el numero recibido hasta un límite de 10 veces.
137 | //Guardar cada nuevo valor en un array.
138 | //Devolver el array
139 | //Si en algún momento el valor de la suma y la cantidad de iteraciones coinciden, debe interrumpirse la ejecución y
140 | //devolver: "Se interrumpió la ejecución"
141 | //Pista: usá el statement 'break'
142 | // Tu código:
143 | }
144 |
145 |
146 | function continueStatement(numero) {
147 | //Iterar en un bucle aumentando en 2 el numero recibido hasta un límite de 10 veces.
148 | //Guardar cada nuevo valor en un array.
149 | //Devolver el array
150 | //Cuando el número de iteraciones alcance el valor 5, no se suma en ese caso y se continua con la siguiente iteración
151 | //Pista: usá el statement 'continue'
152 | // Tu código:
153 | }
154 |
155 |
156 | // No modificar nada debajo de esta línea
157 | // --------------------------------
158 |
159 | module.exports = {
160 | devolverPrimerElemento,
161 | devolverUltimoElemento,
162 | obtenerLargoDelArray,
163 | incrementarPorUno,
164 | agregarItemAlFinalDelArray,
165 | agregarItemAlComienzoDelArray,
166 | dePalabrasAFrase,
167 | arrayContiene,
168 | agregarNumeros,
169 | promedioResultadosTest,
170 | numeroMasGrande,
171 | multiplicarArgumentos,
172 | cuentoElementos,
173 | diaDeLaSemana,
174 | empiezaConNueve,
175 | todosIguales,
176 | mesesDelAño,
177 | mayorACien,
178 | breakStatement,
179 | continueStatement
180 | };
181 |
--------------------------------------------------------------------------------
/02-JS-I/homework/homework.js:
--------------------------------------------------------------------------------
1 | // En estas primeras 6 preguntas, reemplaza `null` por la respuesta
2 |
3 | // Crea una variable "string", puede contener lo que quieras:
4 | const nuevaString = null;
5 |
6 | // Crea una variable numérica, puede ser cualquier número:
7 | const nuevoNum = null;
8 |
9 | // Crea una variable booleana:
10 | const nuevoBool = null;
11 |
12 | // Resuelve el siguiente problema matemático:
13 | const nuevaResta = 10 - null === 5;
14 |
15 | // Resuelve el siguiente problema matemático:
16 | const nuevaMultiplicacion = 10 * null === 40 ;
17 |
18 | // Resuelve el siguiente problema matemático:
19 | const nuevoModulo = 21 % 5 === null;
20 |
21 |
22 | // En los próximos 22 problemas, deberás completar la función.
23 | // Todo tu código irá dentro de las llaves de la función.
24 | // Asegúrate que usas "return" cuando la consola te lo pida.
25 | // Pista: "console.log()" NO fucionará.
26 | // No cambies los nombres de las funciones.
27 |
28 | function devolverString(str) {
29 | // "Return" la string provista: str
30 | // Tu código:
31 |
32 | }
33 |
34 | function suma(x, y) {
35 | // "x" e "y" son números
36 | // Suma "x" e "y" juntos y devuelve el valor
37 | // Tu código:
38 |
39 | }
40 |
41 | function resta(x, y) {
42 | // Resta "y" de "x" y devuelve el valor
43 | // Tu código:
44 |
45 | }
46 |
47 | function multiplica(x, y) {
48 | // Multiplica "x" por "y" y devuelve el valor
49 | // Tu código:
50 |
51 | }
52 |
53 | function divide(x, y) {
54 | // Divide "x" entre "y" y devuelve el valor
55 | // Tu código:
56 |
57 | }
58 |
59 | function sonIguales(x, y) {
60 | // Devuelve "true" si "x" e "y" son iguales
61 | // De lo contrario, devuelve "false"
62 | // Tu código:
63 |
64 | }
65 |
66 | function tienenMismaLongitud(str1, str2) {
67 | // Devuelve "true" si las dos strings tienen la misma longitud
68 | // De lo contrario, devuelve "false"
69 | // Tu código:
70 |
71 | }
72 |
73 | function menosQueNoventa(num) {
74 | // Devuelve "true" si el argumento de la función "num" es menor que noventa
75 | // De lo contrario, devuelve "false"
76 | // Tu código:
77 |
78 | }
79 |
80 | function mayorQueCincuenta(num) {
81 | // Devuelve "true" si el argumento de la función "num" es mayor que cincuenta
82 | // De lo contrario, devuelve "false"
83 | // Tu código:
84 |
85 | }
86 |
87 | function obtenerResto(x, y) {
88 | // Obten el resto de la división de "x" entre "y"
89 | // Tu código:
90 |
91 | }
92 |
93 | function esPar(num) {
94 | // Devuelve "true" si "num" es par
95 | // De lo contrario, devuelve "false"
96 | // Tu código:
97 |
98 | }
99 |
100 | function esImpar(num) {
101 | // Devuelve "true" si "num" es impar
102 | // De lo contrario, devuelve "false"
103 | // Tu código:
104 |
105 | }
106 |
107 | function elevarAlCuadrado(num) {
108 | // Devuelve el valor de "num" elevado al cuadrado
109 | // ojo: No es raiz cuadrada!
110 | // Tu código:
111 |
112 | }
113 |
114 | function elevarAlCubo(num) {
115 | // Devuelve el valor de "num" elevado al cubo
116 | // Tu código:
117 |
118 | }
119 |
120 | function elevar(num, exponent) {
121 | // Devuelve el valor de "num" elevado al exponente dado en "exponent"
122 | // Tu código:
123 |
124 | }
125 |
126 | function redondearNumero(num) {
127 | // Redondea "num" al entero más próximo y devuélvelo
128 | // Tu código:
129 |
130 | }
131 |
132 | function redondearHaciaArriba(num) {
133 | // Redondea "num" hacia arriba (al próximo entero) y devuélvelo
134 | // Tu código:
135 |
136 | }
137 |
138 | function numeroRandom() {
139 | //Generar un número al azar entre 0 y 1 y devolverlo
140 | //Pista: investigá qué hace el método Math.random()
141 |
142 | }
143 |
144 | function esPositivo(numero) {
145 | //La función va a recibir un entero. Devuelve como resultado una cadena de texto que indica si el número es positivo o negativo.
146 | //Si el número es positivo, devolver ---> "Es positivo"
147 | //Si el número es negativo, devolver ---> "Es negativo"
148 | //Si el número es 0, devuelve false
149 |
150 | }
151 |
152 | function agregarSimboloExclamacion(str) {
153 | // Agrega un símbolo de exclamación al final de la string "str" y devuelve una nueva string
154 | // Ejemplo: "hello world" pasaría a ser "hello world!"
155 | // Tu código:
156 | }
157 |
158 | function combinarNombres(nombre, apellido) {
159 | // Devuelve "nombre" y "apellido" combinados en una string y separados por un espacio.
160 | // Ejemplo: "Soy", "Henry" -> "Soy Henry"
161 | // Tu código:
162 |
163 | }
164 |
165 | function obtenerSaludo(nombre) {
166 | // Toma la string "nombre" y concatena otras string en la cadena para que tome la siguiente forma:
167 | // "Martin" -> "Hola Martin!"
168 | // Tu código:
169 |
170 | }
171 |
172 | function obtenerAreaRectangulo(alto, ancho) {
173 | // Retornar el area de un rectángulo teniendo su altura y ancho
174 | // Tu código:
175 |
176 | }
177 |
178 |
179 | function retornarPerimetro(lado){
180 | //Escibe una función a la cual reciba el valor del lado de un cuadrado y retorne su perímetro.
181 | //Escribe tu código aquí
182 |
183 | }
184 |
185 |
186 | function areaDelTriangulo(base, altura){
187 | //Desarrolle una función que calcule el área de un triángulo.
188 | //Escribe tu código aquí
189 |
190 | }
191 |
192 |
193 | function deEuroAdolar(euro){
194 | //Supongamos que 1 euro equivale a 1.20 dólares. Escribe un programa que reciba
195 | //como parámetro un número de euros y calcule el cambio en dólares.
196 | //Escribe tu código aquí
197 |
198 | }
199 |
200 |
201 | function esVocal(letra){
202 | //Escribe una función que reciba una letra y, si es una vocal, muestre el mensaje “Es vocal”.
203 | //Verificar si el usuario ingresó un string de más de un carácter, en ese caso, informarle
204 | //que no se puede procesar el dato mediante el mensaje "Dato incorrecto".
205 | // Si no es vocal, tambien debe devolver "Dato incorrecto".
206 | //Escribe tu código aquí
207 |
208 | }
209 |
210 |
211 |
212 | // No modificar nada debajo de esta línea
213 | // --------------------------------
214 |
215 | module.exports = {
216 | nuevaString,
217 | nuevoNum,
218 | nuevoBool,
219 | nuevaResta,
220 | nuevaMultiplicacion,
221 | nuevoModulo,
222 | devolverString,
223 | tienenMismaLongitud,
224 | sonIguales,
225 | menosQueNoventa,
226 | mayorQueCincuenta,
227 | suma,
228 | resta,
229 | divide,
230 | multiplica,
231 | obtenerResto,
232 | esPar,
233 | esImpar,
234 | elevarAlCuadrado,
235 | elevarAlCubo,
236 | elevar,
237 | redondearNumero,
238 | redondearHaciaArriba,
239 | numeroRandom,
240 | esPositivo,
241 | agregarSimboloExclamacion,
242 | combinarNombres,
243 | obtenerSaludo,
244 | obtenerAreaRectangulo,
245 | retornarPerimetro,
246 | areaDelTriangulo,
247 | deEuroAdolar,
248 | esVocal,
249 | };
250 |
--------------------------------------------------------------------------------
/07-JS-VI/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
14 |
15 | # JavaScript VI
16 |
17 | #### Callbacks
18 |
19 | En esta lección cubriremos:
20 |
21 | - Callbacks
22 | - Más métodos de Arrays
23 | - Introducción a la programación funcional
24 |
25 |
26 |
27 |
28 |
29 | ## Callbacks
30 |
31 | Un concepto muy importante en Javascript es la capacidad de pasar una función como argumento a otra función. Estas funciones se denominan `callbacks`. Estas funciones pueden llamarse en cualquier momento y pasar argumentos dentro de la función. Pronto descubriremos por qué las devoluciones de llamada son tan importantes para Javascript. La convención es usar `cb` como argumento para la variable que se usará de callback.
32 |
33 | ```javascript
34 | function decirHolaAlUsuario(usuario) {
35 | return "Hola " + usuario + "!";
36 | }
37 |
38 | function decirAdiosAlUsuario(usuario) {
39 | return "Adiós " + usuario + "!";
40 | }
41 |
42 | function crearSaludo(usuario, cb) {
43 | return cb(usuario);
44 | }
45 |
46 | crearSaludo("Dan", decirHolaAlUsuario); // 'Hello Dan!'
47 | crearSaludo("Dan", decirAdiosAlUsuario); // 'Goodbye Dan!'
48 | ```
49 |
50 | ## Más métodos de Arrays
51 |
52 | Ya conocemos y utilizamos métodos de matriz, `.push`, `.pop`, `.shift`, `.unshift` y `.length`. Pero hay muchos más métodos disponibles de forma nativa en un array. Los métodos de los que vamos a hablar aquí se denominan "métodos de orden superior", porque toman los callbacks como argumentos.
53 |
54 | ### **.forEach**
55 |
56 | `.forEach` es un bucle for integrado en cada array. `.forEach` toma un callback como su único argumento, e itera sobre cada elemento de la matriz y llama al callback en él. El callback puede tomar dos argumentos, el primero es el elemento en sí, el segundo es el índice del elemento (este argumento es opcional).
57 |
58 | ```javascript
59 | const autos = ["Ford", "Chevrolet", "Toyota", "Tesla"];
60 |
61 | // Podemos escribir el callback en los paréntesis como una función anónima
62 | autos.forEach(function (elemento, indice) {
63 | console.log(elemento);
64 | });
65 |
66 | // O podemos crear una instancia de una función para usarla como callback.
67 | // Además, no necesitamos usar el argumento de índice, si no lo necesitas, no dudes en omitirlo.
68 | function mostrarNombres(elemento) {
69 | console.log(elemento);
70 | }
71 |
72 | // And call that function in the forEach parentheses
73 | autos.forEach(mostrarNombres);
74 | ```
75 |
76 | ### **.reduce**
77 |
78 | `.reduce` ejecutará un bucle en nuestra matriz con la intención de reducir cada elemento en un elemento que se devuelve. Como es el primer argumento, acepta un callback que toma dos argumentos, primero un 'acumulador' (el resultado del método de reducción hasta ahora), y el segundo es el elemento en el que se encuentra actualmente. El callback debe contener siempre una declaración de devolución ("return"). `.reduce` también toma un segundo argumento opcional, que sería el acumulador de arranque ("starting accumulator"). Si no se suministra el acumulador de arranque, la reducción comenzará en el primer elemento de la matriz. `.reduce` siempre devolverá el acumulador cuando termine de recorrer los elementos.
79 |
80 | ```javascript
81 | const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9];
82 | const palabras = ["Hola,", "mi", "nombre", "es", "Martin"];
83 |
84 | // Podemos escribir la función anónima directamente en los paréntesis de .reduce
85 | // Si omitimos el elemento inicial, siempre comenzará en el primer elemento.
86 | const suma = numeros.reduce(function (acc, elemento) {
87 | return acc + elemento;
88 | });
89 |
90 | // Podemos escribir una función fuera de los parents de .reduce (para usar varias veces más tarde)
91 | function multiplicarDosNumeros(a, b) {
92 | return a * b;
93 | }
94 |
95 | const productos = numeros.reduce(multiplicarDosNumeros);
96 |
97 | // .reduce funciona en cualquier tipo de datos.
98 | // En este ejemplo configuramos un acumulador de arranque
99 | const frases = palabras.reduce(function (acc, elemento) {
100 | return acc + " " + elemento;
101 | }, "Frase completa:");
102 |
103 | console.log(suma); // 45
104 | console.log(productos); // 362880
105 | console.log(frases); // "Frase completa: Hola, mi nombre es Martin"
106 | ```
107 |
108 | ### **.map**
109 |
110 | `.map` se usa cuando queremos cambiar cada elemento de una matriz de la misma manera. `.map` toma una devolución de llamada como único argumento. Al igual que el método `.forEach`, el callback tiene el elemento y el índice de argumentos opcionales. A diferencia de `.reduce`, `.map` devolverá toda la matriz.
111 |
112 | ```javascript
113 | const numeros = [2, 3, 4, 5];
114 |
115 | function multiplicarPorTres(elemento) {
116 | return elemento * 3;
117 | }
118 |
119 | const doble = numeros.map(function (elemento) {
120 | return elemento * 2;
121 | });
122 |
123 | const triple = numeros.map(multiplicarPorTres);
124 |
125 | console.log(doble); // [ 4, 6, 8, 10 ]
126 | console.log(triple); // [ 6, 9, 12, 15 ]
127 | ```
128 |
129 | ## Recursos adicionales
130 |
131 | - [Understanding Callback Functions and How to Use Them](http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/)
132 | - [Eloquent Javascript: Higher Order Functions](https://eloquentjavascript.net/05_higher_order.html)
133 | - [MDN: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
134 | - [MDN: Array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
135 |
136 | ## Homework
137 |
138 | Completa la tarea descrita en el archivo [README](https://github.com/soyHenry/Prep-Course/tree/main/07-JS-VI/homework)
139 |
140 |
151 |
152 | ---
153 |
154 | #### Si tienes dudas sobre este tema, puedes consultarlas en el canal ***07_js-vi*** de Slack
155 |
--------------------------------------------------------------------------------
/09-CSS-Positioning/homework/homework.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Posicionamiento CSS – Henry Homework
5 |
6 |
7 |
8 |
9 |
Acá va el título de la lección
10 |
Trabajo de Posicionamiento CSS
11 |
12 |
Instrucciones:
13 |
14 | En esta tarea vamos a usar las propiedades "display", "position" y "flex box"
15 | para posicionar nuestros elementos correctamente en la página. El único archivo que necesitas
16 | tocar para esta tarea es el archivo "homework.css" que se encuentra en esta misma carpeta.
17 | Debes usar las clases, ids y selectores de elemnto que usaste en la tarea número 2.
18 |
19 |
20 |
21 |
Ejercicio 1:
22 |
23 | En este primer ejercicio deberás asegurarte que el texto dentro de este <span>
24 | está centrado en la página. El id de este span es "ejercicioUno". El texto solo tiene un
25 | forma de alinear conocido como "text-align", para el cual podemos definir
26 | los valores "left", "right", "center" o "justify", pero esto solo funcion dentro de los elementos "block"
27 | y el <span> inicialmente es un elemento "inline". Define la propiedad "display" para
28 | que sea "block" y centra el texto usando "text-align".
29 |
30 |
31 |
32 |
Ejercicio 2:
33 |
34 | Hay una caja con un texto en la parte superior de la pantalla. Eso se supone que es un "placeholder" hasta que tengamos el título de la sección definido. Desafortunadamente no tenemos acceso
35 | al HTML, por lo que no podemos ocultarlo modificando el HTML. Usando sólo CSS, asegúrate que la caja no
36 | sea mostrada. El id de lo que tenes que ocultar es "ejercicioDos".
37 |
38 |
39 |
40 |
Ejercicio 3:
41 |
42 | Debajo verás una caja, la cual contiene adentro una imagen, nos queremos asegurar que esa imagen se
43 | posicione dentro de la cajita roja. Debes cambiar el atributo "position", y después ajustar la imagen acorde a la caja.
44 | La caja roja está a 100 píxeles del margen superior y 200 píxeles desde la izquierda. El id de la imagen en "ejercicioTres".
45 |
46 |
47 |
48 |
49 |
50 | Esta es la imagen de un animal. Esperamos que disfrutes la imagen de este animal :-)
51 |
52 |
53 |
54 |
55 |
Ejercicio 4:
56 |
57 | La caja azul de abajo se supone que debe ser nuestro header, por lo que debe estar fijo
58 | en la parte superior izquierda de la página, y la posición no debería variar cuando la página sea scrolleada.
59 | El id de la caja es "ejercicioCuatro". Cambia la posición de esa caja a la esquina superior izquierda.
60 |
61 |
71 |
72 | En el header hay tres elementos; "Lecciones de posicionamiento", el logo de Henry y "#SoyHenry".
73 | Usando el id "ejercicioCinco", configuraremos este container como "flex box",
74 | y nos aseguraremos que cada elemento está distanciado de manera proporcional entre unos y otros.
75 | También queremos que cada elemento aparezca centrado verticalmente en la línea.
76 |
77 |
78 |
79 |
Ejercicio 6:
80 |
81 | Ahora que los elementos del header están espaciados adecuadamente, vemos que quedaron desordenados.
82 | "Lecciones de posicionamiento" deberían estar a la izquierda, y "#SoyHenry" a la derecha.
83 | Usando el mismo id que en el ejercicio anterior, cambia la dirección en el cual aparecen los elementos.
84 |
85 |
86 |
87 |
Ejercicio 7:
88 |
89 | Este es un "playground" de la propiedad flexbox, el id es "ejercicioSiete". No hay un objetivo final en este ejercicio,
90 | puedes jugar con estos elementos y las diferentes opciones de flexbox. El id de los elementos están escritos en los mismos.
91 | Prueba usando los conceptos que aprendimos sobre flexbox, incluyendo: "justify-content", "align-items", "align-self",
92 | y "flex-direction".
93 |
94 |
95 |
96 |
Id "elementoUno"
97 |
Id "elementoDos"
98 |
Id "elementoTres"
99 |
Id "elementoCuatro"
100 |
101 |
102 |
Punto extra 1:
103 |
104 | Hay bastantes opciones de flexbox y pueden complicarse, pero a través de la prática puedes aprender
105 | a ajustar rápidamente el posicionamiento de tus elementos con facilidad. Te recomendamos el tutorial
106 | "Flexbox Froggy", el cual te enseñará en profundidad cómo funciona el elemento de posicionamiento "flexbox":
107 | Flexbox Froggy
108 |
109 |
110 |
111 |
Punto extra 2:
112 |
113 | Una nueva y nativa forma de usar las grillas de CSS se está abriendo paso. Se llama "css-grid" y puede ser usado
114 | para realizar posicionamientos de manera aún más rápida y precisa. Es buenos conocer "css-grid", por lo que quizá
115 | te venga bien familiarizarte ahora: A Complete Guide to CSS Grid
116 |
117 | Además, de los creadores de "Flexbox Froggy" llega CSS GridGarden.
118 |
119 |
120 |
121 |
122 |
--------------------------------------------------------------------------------
/11-Glosario/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Glosario
4 |
5 | ##### A continuación encontrarás una serie de conceptos básicos propios de la programación, que te servirán para familiarizarte con el contenido del Prep Course.
6 |
7 | ## A
8 |
9 | **Argumento:** valor real pasado como input (valor de entrada) a una función.
10 |
11 | **Array (Arreglo):** es un tipo especial de variable que se utiliza para almacenar múltiples elementos. A su vez es un tipo de objeto.
12 |
13 | **Asignar:** dar un valor a una variable, es decir guardar algo (dato) en un contenedor.
14 |
15 | ## B
16 |
17 | **Bloque de código:** es la agrupación de statements(sentencias) dentro de un par de llaves con el fin de que se ejecuten juntas.
18 |
19 | **Booleano**: es un tipo de dato que solo puede tener dos posibles valores: verdadero o falso.
20 |
21 | **Bucle (loop)**: es una herramienta de programación que permite repetir un set de instrucciones hasta llegar a una condición de corte.
22 |
23 | ## C
24 |
25 | **Callbacks:** es una función que se pasa como argumento a otra función para ser invocada por la última.
26 |
27 | **Clases (class):** son una plantilla para crear objetos. Un tipo especial de funciones.
28 |
29 | **Clonar:** crear una copia local (en tu computadora) de un repositorio manteniendo una conexión remota con el mismo.
30 |
31 | **Comando:** una orden o instrucción que un usuario le da a un sistema para que realice determinada tarea.
32 |
33 | **Condición:** o una sentencia condicional es una expresión que puede evaluarse a verdadero o falso con el fin de permitir que cierto fragmento de código se ejecute solo cuando se cumpla o no dicha condición.
34 |
35 | **Consola (del navegador)**: es una herramienta que nos permite interactuar con el código de una página web usando JavaScript.
36 |
37 | **Console.log:** es un método que muestra un mensaje en la consola. Tiene múltiples usos como por ejemplo “ver” el valor asignado a una variable o todo el contenido de un array así como también el resultado de la ejecución de una función.
38 |
39 | **Constructor:** es un tipo especial de función que actúa a modo de molde para crear nuevos objetos.
40 |
41 | ## D
42 |
43 | **Dato:** cualquier objeto manipulable por la computadora, puede ser letras, números, caracteres especiales que ocupa un lugar en memoria.
44 |
45 | **Declarar:** crear una variable, sin asignarle un valor.
46 |
47 | ## E
48 |
49 | **Editor de texto:** es un programa que te permite crear y editar archivos en diferentes lenguajes de programación. (Es donde escribimos nuestro código!)
50 |
51 | **Expression (Expresión):** es cualquier unidad de código válida que se resuelve en un valor.
52 |
53 | ## F
54 |
55 | **Flujos de control (Control Flow)**: es el orden en que la computadora ejecuta las sentencias en un script.
56 |
57 | **Forkear:** crear una copia independiente de un repositorio del cual eres dueño y puedes modificar, aunque los cambios no se verán reflejados en el repositorio original.
58 |
59 | **Función:** es un bloque de código diseñado para que realice una tarea en particular.
60 |
61 | ## G
62 |
63 | **Git:** es una herramienta que permite trabajar colaborativamente en un código ya que mantiene un récord de todos los cambios hechos en un código.
64 |
65 | **GitHub:** es una herramienta que permite crear, almacenar y compartir repositorios.
66 |
67 | ## H
68 |
69 | **Hoisting (elevación de variables y funciones):** es el comportamiento por defecto de JavaScript que parece mover las declaraciones de las variables, funciones y clases a la parte de arriba del código antes de su ejecución.
70 |
71 | ## I
72 |
73 | **IDE (entorno de desarrollo integrado):** es una herramienta que combina en una sola interfaz las más necesarias para los desarrolladores.
74 |
75 | **IIFE (Expresión de función ejecutadas inmediatamente):** es una manera de ejecutar funciones inmediatamente, ya que las mismas se ejecutan al momento en que se declaran.
76 |
77 | **Inicializar:** la asignación inicial de un valor a una variable.
78 |
79 | **Interprete:** es un software que lee, analiza y ejecuta el código escrito en algunos lenguajes de programación.
80 |
81 | **Invocar (llamar):** es simplemente ejecutar o “correr” una función.
82 |
83 | **Iterar:** realizar un proceso repetidas veces con el fin de llegar al resultado deseado.
84 |
85 | ## M
86 |
87 | **Método:** es una función que pertenece a un objeto. Por ejemplo, el .push() en los arrays.
88 |
89 | ## N
90 |
91 | **Node:** es un entorno de ejecución de JavaScript. Se utiliza para poder ejecutar código del lado del servidor.
92 |
93 | **NPM:** es un sistema de gestión de paquetes para Node.js, sirve para acomodar los módulos para que Node los encuentre y pueda utilizarlos al ejecutar el código.
94 |
95 | ## O
96 |
97 | **Objeto:** es un tipo que dato que se utiliza para guardar colecciones de pares clave-valor.
98 |
99 | **Operador:** es un símbolo especial que representa una acción. Por ejemplo, el “=” es el operador utilizado para asignar un valor a una variable.
100 |
101 | ## P
102 |
103 | **Palabra reservada/ keyword:** son palabras dentro de un lenguaje de programación que se guardan para su uso funcional ya que tienen un significado y una función. Por ejemplo, var, let y const.
104 |
105 | **Parámetro:** el nombre que se establece para el futuro argumento, cuando se define la función.
106 |
107 | **Prototype:** el mecanismo por el cual los objetos de JavaScript heredan características unos de otros.
108 |
109 | ## R
110 |
111 | **Repositorio:** es un espacio virtual donde se almacena información, generalmente los archivos que conforman un programa, página web o aplicación
112 |
113 | **Return:** es una palabra reservada que se utiliza para terminar o “cortar” con la ejecución de una función o bloque de código. Un statement(sentencia) que comienza con return especifica el valor que debe retornar dicha función o bloque de código.
114 |
115 | ## S
116 |
117 | **Saltos (jumps):** son formas de “salir” de un bucle(loop). Por ejemplo, usando las palabras reservadas return, break, continue.
118 |
119 | **Script:** es un conjunto de comando o instrucciones escritos en algún lenguaje de programación para que algún programa u ordenador luego lo ejecute.
120 |
121 | **Scope (Ambito de una variable):** los limites en el cual existe una variable.
122 |
123 | **Statement (sentencia):** es una línea de código que ordena una tarea.
124 |
125 | **String(cadena):** es uno de los tipos de datos primitivos de JavaSript. Son variables en donde se almacena texto, es decir cualquier combinación o cantidad de caracteres.
126 |
127 | ## T
128 |
129 | **Terminal:** otro término que hace referencia a la consola. (ejemplo: la terminal integrada en visual studio code)
130 |
131 | **This:** es un keyword que hace referencia al objeto (en JavaScript básicamente todo es en el fondo un objeto) que está ejecutando la función o bloque de código. Es una especie de puntero.
132 |
133 | **Tipos de datos:** es una clasificación de los datos. Un atributo que tienen que ayuda al interprete a saber cómo procesarlo correctamente.
134 |
135 | ## V
136 |
137 | **Variable:** contenedor en los que puedes almacenar valores.
138 |
--------------------------------------------------------------------------------
/04-JS-III/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
14 |
15 | # JavaScript III
16 |
17 | #### Continuación de bucles ***for*** y ***arrays***
18 |
19 | En esta lección cubriremos:
20 |
21 | * Introducción a los arrays
22 | * Bucles ***for*** con arrays
23 |
24 |
25 |
26 |
27 |
28 | ## Introducción a los arrays (matrices/arreglos)
29 |
30 | En la lección anterior discutimos los 3 tipos de datos básicos (cadenas/strings, números y booleanos) y cómo asignar esos tipos de datos a las variables. Discutimos cómo una variable solo puede apuntar a una sola cadena, número o booleano. Sin embargo, en muchos casos queremos poder apuntar a una colección de tipos de datos. Por ejemplo, ¿qué pasaría si quisiéramos hacer un seguimiento del nombre de cada estudiante en esta clase usando una sola variable, `nombresEstudiantes`. Podemos hacer eso usando Arrays. Podemos pensar en las matrices como contenedores de almacenamiento para colecciones de datos. Construir una matriz es simple, declarar una variable y establecerla en []. Luego podemos agregar al contenedor (separadas por coma) tantas cadenas, números o booleanos como queramos y acceder a esos elementos cuando lo deseemos.
31 |
32 | ```javascript
33 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
34 | ```
35 |
36 | ### ***.length***
37 |
38 | Al igual que el tipo de dato *String* tiene un método incorporado `.length`, también lo hace la matriz. De hecho, la matriz tiene muchos métodos incorporados útiles (los discutiremos en lecciones posteriores). Al igual que la cadena `.length` cuenta los caracteres, la matriz`.length` devolverá el número de elementos en una matriz:
39 |
40 | ```javascript
41 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
42 |
43 | console.log(nombresEstudiantes.length); // 4
44 | ```
45 |
46 | ### Acceso a elementos en una matriz
47 |
48 | Podemos acceder a un elemento de una matriza en cualquier momento, solo necesitamos llamar al elemento por su posición en la matriz. Los elementos reciben una posición numérica (índice) de acuerdo con su ubicación en la matriz, en orden. El orden numérico de una matriz SIEMPRE comienza en 0, por lo que el primer elemento está en el índice 0, el segundo en el índice 1, el tercero en el 2, y así sucesivamente (esto puede ser complicado al principio, pero solo recuerda que las matrices siempre comienzan en 0).
49 |
50 | ```javascript
51 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
52 | 0 1 2 3
53 | ```
54 |
55 | Para acceder al elemento, escribiremos el nombre o la variable de matriz, seguidos de corchetes que contienen la asignación numérica.
56 |
57 | ```javascript
58 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
59 |
60 | console.log(nombresEstudiantes[1]); // 'Antonio'
61 | ```
62 |
63 | Para acceder dinámicamente al último elemento de la matriz, utilizaremos el método `.length`. En nuestra matriz `nombresEstudiantes`, la longitud es 4. Sabemos que el primer elemento siempre será 0, y cada elemento posterior se desplaza sobre un número. Entonces, en nuestro ejemplo, el último elemento tiene un índice de 3. Usando nuestra propiedad de longitud mostraremos cómo se hace cuando no sabemos el número de elementos en una matriz:
64 |
65 | ```javascript
66 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', ... ,'Samuel'];
67 |
68 | console.log(nombresEstudiantes[nombresEstudiantes.length - 1]); // 'Samuel'
69 | ```
70 |
71 | ### Asignación
72 |
73 | Podemos asignar y reasignar cualquier índice en la matriz usando el paréntesis/índice y un "=".
74 |
75 | ```javascript
76 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
77 |
78 | nombresEstudiantes[0] = 'Jorge';
79 |
80 | console.log(nombresEstudiantes); // ['Jorge', 'Antonio', 'Sara', 'Samuel']
81 | ```
82 |
83 | ### ***.push*** y ***.pop***
84 |
85 | Otros dos métodos de matriz incorporados muy útiles son `.push` y `.pop`. Estos métodos se refieren a la adición y eliminación de elementos de la matriz después de su declaración inicial.
86 |
87 | `.push` agrega un elemento al final de la matriz, incrementando su longitud en 1. `.push` devuelve la nueva longitud.
88 |
89 | ```javascript
90 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
91 |
92 | nombresEstudiantes.push('Patricia');
93 |
94 | console.log(nombresEstudiantes); // ['Martin', 'Antonio', 'Sara', 'Samuel', 'Patricia']
95 | ```
96 |
97 | `.pop` elimina el último elemento de la matriz, disminuyendo la longitud en 1. `.pop` devuelve el elemento "reventado" (*popped*).
98 |
99 | ```javascript
100 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
101 |
102 | nombresEstudiantes.pop();
103 |
104 | console.log(nombresEstudiantes); // ['Martin', 'Antonio', 'Sara']
105 | ```
106 |
107 | ### ***.unshift*** y ***.shift***
108 |
109 | `.unshift` y `.shift` son exactamente como `.push` y `.pop`, excepto que operan en el primer elemento de la matriz. `.unshift(item)` colocará un nuevo elemento en la primera posición de la matriz, y `.shift()` eliminará el primer elemento de la matriz.
110 |
111 | ```javascript
112 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
113 |
114 | nombresEstudiantes.unshift('Leo');
115 |
116 | console.log(nombresEstudiantes); // ['Leo', 'Martin', 'Antonio', 'Sara', 'Samuel']
117 |
118 | nombresEstudiantes.shift();
119 |
120 | console.log(nombresEstudiantes); // ['Martin', 'Antonio', 'Sara', 'Samuel']
121 | ```
122 |
123 | ### Notas sobre las matrices
124 |
125 | Debido a que Javascript no es un lenguaje fuertemente tipado, las matrices tampoco necesitan ser tipadas. Las matrices en Javascript pueden contener múltiples tipos de datos diferentes en la misma matriz.
126 |
127 | ## Utilizando bucles ***for*** en arrays
128 |
129 | La mayoría de las veces, los bucles for se utilizan para iterar sobre todos los elementos de una matriz. Usando la técnica de acceso al índice ("index access technique") podemos acceder a cada elemento de la matriz. Para hacer esto, usamos el método `.length` como punto de parada para el ciclo.
130 |
131 | ```javascript
132 | const nombresEstudiantes = ['Martin', 'Antonio', 'Sara', 'Samuel'];
133 |
134 | for (let i = 0; i < nombresEstudiantes.length; i++) {
135 | console.log(nombresEstudiantes[i]);
136 | }
137 |
138 | // 'Martin'
139 | // 'Antonio'
140 | // 'Sara'
141 | // 'Samuel'
142 | ```
143 |
144 | ## Recursos adicionales
145 |
146 | * [MDN: Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
147 | * [MDN: for Loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)
148 |
149 | ## Homework
150 |
151 | Completa la tarea descrita en el archivo [README](https://github.com/soyHenry/Prep-Course/tree/main/04-JS-III/homework)
152 |
153 | ---
154 |
155 | #### Si tienes dudas sobre este tema, puedes consultarlas en el canal ***04_js-iii*** de Slack
156 |
--------------------------------------------------------------------------------
/03-JS-II/homework/tests/JSII.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const {
3 | obtenerMayor,
4 | mayoriaDeEdad,
5 | conection,
6 | saludo,
7 | colors,
8 | esDiezOCinco,
9 | estaEnRango,
10 | esEntero,
11 | fizzBuzz,
12 | operadoresLogicos,
13 | esPrimo,
14 | esVerdadero,
15 | tablaDelSeis,
16 | tieneTresDigitos,
17 | doWhile
18 | } = require('../homework');
19 |
20 |
21 | describe('obtenerMayor(x, y)', function() {
22 | it('should return x if it is larger than y', function() {
23 | expect(obtenerMayor(10, 5)).toBe(10);
24 | });
25 | it('should return y if it is larger than x', function() {
26 | expect(obtenerMayor(50, 100)).toBe(100);
27 | });
28 | it('should return either one if they are the same', function() {
29 | expect(obtenerMayor(1000, 1000)).toBe(1000);
30 | });
31 | });
32 |
33 | describe('mayoriaDeEdad(edad)', function() {
34 | it('should return \'Allowed\'if edad is equal or greater than 18', function() {
35 | expect(mayoriaDeEdad(18)).toBe('Allowed');
36 | expect(mayoriaDeEdad(35)).toBe('Allowed');
37 | });
38 | it('should return \'Not allowed\'if edad is less than 18', function() {
39 | expect(mayoriaDeEdad(7)).toBe('Not allowed');
40 | });
41 | });
42 |
43 | describe('conection(status)', function() {
44 | it('should return the conection state of user', function() {
45 | expect(conection(1)).toBe('Online');
46 | expect(conection(2)).toBe('Away');
47 | expect(conection(3)).toBe('Offline');
48 | expect(conection()).toBe('Offline');
49 | });
50 | });
51 |
52 | describe('saludo(idioma)', function() {
53 | it('should return \'Guten Tag!\' for aleman', function() {
54 | expect(saludo('aleman')).toBe('Guten Tag!');
55 | });
56 | it('should return \'Hola!\' for ingles', function() {
57 | expect(saludo('ingles')).toBe('Hello!');
58 | });
59 | it('should return \'Ni Hao!\' for mandarin', function() {
60 | expect(saludo('mandarin')).toBe('Ni Hao!');
61 | });
62 | it('should return \'Hola!\' if no argument is passed in or if a idioma beyond ingles, mandarin, and aleman is passed in.', function() {
63 | expect(saludo('frances')).toBe('Hola!');
64 | expect(saludo()).toBe('Hola!');
65 | });
66 | });
67 |
68 | describe('colors(color)', function() {
69 | it('should return \'This is {color}\'', function() {
70 | expect(colors("blue")).toBe('This is blue');
71 | expect(colors("red")).toBe('This is red');
72 | expect(colors("green")).toBe('This is green');
73 | expect(colors("orange")).toBe('This is orange');
74 | });
75 | it('should return \'Color not found\' if there is no argument or the argument is none of the expected ones', function() {
76 | expect(colors()).toBe('Color not found');
77 | expect(colors("pink")).toBe('Color not found');
78 | });
79 | });
80 |
81 | describe('esDiezOCinco(num)', function() {
82 | it('should return true if num is 10 or 5', function() {
83 | expect(esDiezOCinco(10)).toBe(true);
84 | expect(esDiezOCinco(5)).toBe(true);
85 | });
86 | it('should return false if num is not 10 or 5', function() {
87 | expect(esDiezOCinco(11)).toBe(false);
88 | expect(esDiezOCinco(6)).toBe(false);
89 | expect(esDiezOCinco(0)).toBe(false);
90 | expect(esDiezOCinco(5.01)).toBe(false);
91 | });
92 | });
93 |
94 | describe('estaEnRango(num)', function() {
95 | it('should return true if num is inside range', function() {
96 | expect(estaEnRango(35.5)).toBe(true);
97 | expect(estaEnRango(40)).toBe(true);
98 | expect(estaEnRango(49)).toBe(true);
99 | expect(estaEnRango(21)).toBe(true);
100 | });
101 | it('should return false if outside of range', function() {
102 | expect(estaEnRango(10)).toBe(false);
103 | expect(estaEnRango(20)).toBe(false);
104 | expect(estaEnRango(50)).toBe(false);
105 | expect(estaEnRango(100)).toBe(false);
106 | });
107 | });
108 |
109 | describe('esEntero(num)', function() {
110 | it('should return true if num is 5', function() {
111 | expect(esEntero(5)).toBe(true);
112 | });
113 | it('should return false if num is 0.5', function() {
114 | expect(esEntero(0.5)).toBe(false);
115 | });
116 | it('should return true if num is -20', function() {
117 | expect(esEntero(-20)).toBe(true);
118 | });
119 | it('should return true for 0', function() {
120 | expect(esEntero(0)).toBe(true);
121 | });
122 | });
123 |
124 | describe('fizzBuzz(num)', function() {
125 | it('should return fizz if divisible by 3', function() {
126 | expect(fizzBuzz(9)).toBe('fizz');
127 | });
128 | it('should return buzz if divisible by 5', function() {
129 | expect(fizzBuzz(10)).toBe('buzz');
130 | });
131 | it('should return fizzbuzz if divisible by 3 and 5', function() {
132 | expect(fizzBuzz(15)).toBe('fizzbuzz');
133 | });
134 | it('should return num if not divisible by 3 or 5', function() {
135 | expect(fizzBuzz(4)).toBe(4);
136 | });
137 | });
138 |
139 | describe('operadoresLogicos(num1, num2, num3)', function() {
140 | it('should return \'Número 1 es mayor y positivo\' if num1 is positive and if it is greater than num2 and num3', function() {
141 | expect(operadoresLogicos(50, 2, 15)).toBe('Número 1 es mayor y positivo');
142 | });
143 | it('should return \'Hay negativos\' if any of the arguments are negative', function() {
144 | expect(operadoresLogicos(80, -1, 2)).toBe('Hay negativos');
145 | });
146 | it('should return num3 + 1 if num3 is greater than num1 and num2', function() {
147 | expect(operadoresLogicos(1, 3, 10)).toBe(11);
148 | });
149 | it('should return \'Error\' if any of the arguments are equal 0', function() {
150 | expect(operadoresLogicos(1, 0, 10)).toBe('Error');
151 | });
152 | it('should return false if none of the conditions are met', function() {
153 | expect(operadoresLogicos(10, 30, 6)).toBe(false);
154 | });
155 | });
156 |
157 | describe('esPrimo(num)', function() {
158 | it('should return true if num is prime', function() {
159 | expect(esPrimo(7)).toBe(true);
160 | expect(esPrimo(97)).toBe(true);
161 | expect(esPrimo(11)).toBe(true);
162 | });
163 | it('should return false if num is not prime', function() {
164 | expect(esPrimo(9)).toBe(false);
165 | expect(esPrimo(4)).toBe(false);
166 | expect(esPrimo(10)).toBe(false);
167 | expect(esPrimo(100)).toBe(false);
168 | expect(esPrimo(0)).toBe(false);
169 | expect(esPrimo(1)).toBe(false);
170 | });
171 | });
172 |
173 | describe ('esVerdadero(valor)', function() {
174 | it('should return Soy verdadero if valor is true', function() {
175 | expect(esVerdadero(true)).toBe("Soy verdadero");
176 | });
177 | it('should return Soy falso if valor is false', function() {
178 | expect(esVerdadero(false)).toBe("Soy falso");
179 | });
180 | });
181 |
182 | describe ('tablaDelSeis()', function() {
183 | it('should return multiplication table of 6', function() {
184 | expect(tablaDelSeis()).toEqual([0 , 6, 12, 18, 24, 30, 36, 42, 48, 54, 60]);
185 | });
186 | });
187 |
188 | describe ('tieneTresDigitos(numero)', function() {
189 | it('should return true if numero has 3 digits', function() {
190 | expect(tieneTresDigitos(100)).toBe(true);
191 | expect(tieneTresDigitos(820)).toBe(true);
192 | expect(tieneTresDigitos(900)).toBe(true);
193 | expect(tieneTresDigitos(10)).toBe(false);
194 | expect(tieneTresDigitos(20000)).toBe(false);
195 | });
196 | });
197 |
198 | describe('doWhile(numero)', function() {
199 | it('should add 5 to number until reaching a limit of 8 times and return the sum value', function() {
200 | expect(doWhile(5)).toBe(45);
201 | expect(doWhile(100)).toBe(140);
202 | expect(doWhile(-1)).toBe(39);
203 | });
204 | });
205 |
--------------------------------------------------------------------------------
/05-JS-IV/homework/tests/JSIV.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const {
3 | crearGato,
4 | agregarPropiedad,
5 | invocarMetodo,
6 | multiplicarNumeroDesconocidoPorCinco,
7 | eliminarPropiedad,
8 | nuevoUsuario,
9 | tieneEmail,
10 | tienePropiedad,
11 | verificarPassword,
12 | actualizarPassword,
13 | agregarAmigo,
14 | pasarUsuarioAPremium,
15 | sumarLikesDeUsuario,
16 | agregarMetodoCalculoDescuento
17 | } = require('../homework');
18 |
19 | describe('crearGato(nombre, edad)', function() {
20 | it('should create a new cat with the nombre and edad properties set', function() {
21 | expect(crearGato('Snowball', 1).nombre).toBe('Snowball');
22 | expect(crearGato('Snowball', 1).edad).toBe(1);
23 | expect(crearGato('Snowball II', 5).nombre).toBe('Snowball II');
24 | expect(crearGato('Snowball II', 5).edad).toBe(5);
25 | });
26 | it('should add a method called meow to the new cat object', function() {
27 | expect(crearGato('Snowball III', 2).meow()).toBe('Meow!');
28 | });
29 | });
30 |
31 | describe('agregarPropiedad(object, property)', function() {
32 | it('should add the property to the object with a value of null', function() {
33 | const object = {
34 | x: 1,
35 | y: 2,
36 | };
37 | const updatedObject = {
38 | x: 1,
39 | y: 2,
40 | z: null,
41 | };
42 | expect(agregarPropiedad(object, 'z')).toEqual(updatedObject);
43 | });
44 | });
45 |
46 | describe('invocarMetodo(object, method)', function() {
47 | it('should invoke the method on the object', function() {
48 | const object = {
49 | x: 0,
50 | incrementX: function() {
51 | this.x++;
52 | },
53 | }
54 | invocarMetodo(object, 'incrementX');
55 | expect(object.x).toBe(1);
56 | });
57 | });
58 |
59 | describe('multiplicarNumeroDesconocidoPorCinco(mysteryNumberObject)', function() {
60 | it('should return the mysteryNumber property multiplied by five', function() {
61 | const mysteryBox = {
62 | numeroMisterioso: 999,
63 | };
64 | expect(multiplicarNumeroDesconocidoPorCinco(mysteryBox)).toBe(4995);
65 | mysteryBox.numeroMisterioso = -5;
66 | expect(multiplicarNumeroDesconocidoPorCinco(mysteryBox)).toBe(-25);
67 | });
68 | });
69 |
70 | describe('eliminarPropiedad(object, property)', function() {
71 | it('should delete the property from the object', function() {
72 | const updatedObject = {
73 | x: 1,
74 | y: 2,
75 | };
76 | const object = {
77 | x: 1,
78 | y: 2,
79 | z: null,
80 | };
81 | expect(eliminarPropiedad(object, 'z')).toEqual(updatedObject);
82 | });
83 | });
84 |
85 | describe('nuevoUsuario(nombre, email, password)', function() {
86 | it('should return a new user object with a nombre, email, and password property that match the arguments', function() {
87 | const user = {
88 | nombre: 'Jhon',
89 | email: 'jhon@email.com',
90 | password: 'correcthorsebatterystaple',
91 | };
92 | expect(nuevoUsuario(user.nombre, user.email, user.password)).toEqual(user);
93 | const user2 = {
94 | nombre: 'Samuel',
95 | email: 'samuel@email.com',
96 | password: 'password',
97 | };
98 | expect(nuevoUsuario(user2.nombre, user2.email, user2.password)).toEqual(user2);
99 | });
100 | });
101 |
102 | describe('tieneEmail(user)', function() {
103 | it('should return true if the user object has a value for its email property', function() {
104 | expect(tieneEmail({ usernombre: 'Samuel', email: 'samuel@email.com' })).toEqual(true);
105 | expect(tieneEmail({ usernombre: 'Jhon', email: null })).toEqual(false);
106 | expect(tieneEmail({ usernombre: 'Antonio' })).toEqual(false);
107 | });
108 | });
109 |
110 | describe('tienePropiedad(object, property)', function() {
111 | it('should return true if the object has the property that is passed in', function() {
112 | const obj = {
113 | x: true,
114 | };
115 | expect(tienePropiedad(obj, 'x')).toEqual(true);
116 | expect(tienePropiedad(obj, 'y')).toEqual(false);
117 | });
118 | });
119 |
120 | describe('verificarPassword(user, password)', function() {
121 | it('should return true if passwords match', function() {
122 | const user = {
123 | password: 'Me encanta JS!',
124 | };
125 | const password = 'Me encanta JS!';
126 | expect(verificarPassword(user, password)).toBe(true);
127 | });
128 | it('should return false if passwords do not match', function() {
129 | const user = {
130 | password: 'Me encanta JS!',
131 | };
132 | const password = 'Hacker time!';
133 | expect(verificarPassword(user, password)).toBe(false);
134 | });
135 | });
136 |
137 | describe('actualizarPassword(user, password)', function() {
138 | it('should return the user object with the updated password', function() {
139 | const user = {
140 | password: 'Me encanta JS!',
141 | };
142 | const password = 'Me encanta JS mucho más!';
143 | expect(actualizarPassword(user, password).password).toBe(password);
144 | });
145 | });
146 |
147 | describe('agregarAmigo(user, newFriend)', function() {
148 | it('should add a new friend to the end of the amigos array property', function() {
149 | const user = {
150 | amigos: ['Ben', 'Austen', 'Ryan', 'Mike', 'Young'],
151 | };
152 | const newFriend = 'Shay';
153 | expect(agregarAmigo(user, 'Shay').amigos.pop()).toBe('Shay');
154 | });
155 | });
156 |
157 | describe('pasarUsuarioAPremium(users)', function() {
158 | it('should return the users array with each user\'s esPremium property set to true', function() {
159 | const users = [
160 | { esPremium: false },
161 | { esPremium: false },
162 | { esPremium: false },
163 | { esPremium: false },
164 | { esPremium: false },
165 | ];
166 | const updatedUsers = [
167 | { esPremium: true },
168 | { esPremium: true },
169 | { esPremium: true },
170 | { esPremium: true },
171 | { esPremium: true },
172 | ];
173 | expect(pasarUsuarioAPremium(users)).toEqual(updatedUsers);
174 | });
175 | });
176 |
177 | describe('sumarLikesDeUsuario(user)', function() {
178 | it('should return the sum of likes for all user posts', function() {
179 | const user = {
180 | usernombre: 'Jhon Doe',
181 | password: 'JavaScript es genial!',
182 | posts: [
183 | {
184 | id: '1',
185 | title: 'Aventuras en JS!',
186 | likes: 10
187 | },
188 | {
189 | id: '2',
190 | title: 'Soy Henry!',
191 | likes: 100
192 | },
193 | {
194 | id: '3',
195 | title: 'Qué es un JavaScript?',
196 | likes: 35
197 | },
198 | {
199 | id: '4',
200 | title: 'JS Objects for Dummies',
201 | likes: 42
202 | },
203 | {
204 | id: '5',
205 | title: 'Educación online',
206 | likes: 99
207 | },
208 | ],
209 | };
210 | expect(sumarLikesDeUsuario(user)).toBe(286);
211 | });
212 | });
213 |
214 | describe('agregarMetodoCalculoDescuento(storeItem)', function() {
215 | const storeItem = {
216 | precio: 80,
217 | porcentajeDeDescuento: 0.1,
218 | };
219 | const storeItem2 = {
220 | precio: 5,
221 | porcentajeDeDescuento: 0.5,
222 | };
223 |
224 | it('should add the method \'calcularPrecioDescuento\' to the store item object', function() {
225 | expect(agregarMetodoCalculoDescuento(storeItem).calcularPrecioDescuento).toBeDefined();
226 | expect(agregarMetodoCalculoDescuento(storeItem2).calcularPrecioDescuento).toBeDefined();
227 | });
228 | it('should return the discount precio from the new \'precioConDescuento\' method', function() {
229 | expect(agregarMetodoCalculoDescuento(storeItem).calcularPrecioDescuento()).toBe(72);
230 | expect(agregarMetodoCalculoDescuento(storeItem2).calcularPrecioDescuento()).toBe(2.5);
231 | });
232 | });
233 |
--------------------------------------------------------------------------------
/01a-Git/homework/README.md:
--------------------------------------------------------------------------------
1 | # Homework: Git
2 |
3 | ### Pre-requisitos
4 |
5 | * Crear una cuenta en [Github.com](https://www.github.com/).
6 | * Si usas una computadora con Windows, puedes instalar la terminal de comandos _git-bash_ haciendo click [acá](https://git-for-windows.github.io/).
7 | * Si usas Mac, `git` viene pre-instalado y puedes acceder desde la terminal pulsando ⌘+Espacio y escribiendo "terminal". Puedes asegurarte de que git está instalado escribiendo `which git` en la terminal y pulsando Enter, si aparece la ruta de un archivo está todo correcto. En algunas ocasiones, podrías ser redireccionado a la descarga de la línea de comandos de Xcode, sigue las instrucciones.
8 | * Si usas Linux, tal vez necesites instalar git accediendo a tu terminal e ingresado `apt-get install git`
9 | * Si tienes problemas instalando Git, este recurso puede servir de ayuda: [https://git-scm.com/book/en/v2/Getting-Started-Installing-Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
10 |
11 |
12 | ### Comandos básicos de terminal
13 |
14 | > Usaremos la "terminal" o "línea de comandos" durante tu tiempo en Henry. Si estás en una computadora con Mac o Linux, deberías tener la terminal y git ya instalados. Si estás en una máquina con Windows, te recomendamos instalar ["git-bash"](https://git-for-windows.github.io/).
15 |
16 | Dentro de nuestra terminal podemos: revisar nuestra estructura de archivos, añadir, eliminar y modificar archivos, y muchas cosas más. La terminal es una herramienta muy poderosa para los desarrolladores y vas a usarla mucho en tu carrera profesional. Al principio puede parecer aterrador, pero con el tiempo terminarás disfrutando su uso, así que es mejor acostumbrarse ahora. Para comenzar, aprenderemos los comandos "básicos":
17 |
18 | "List": Nos permite ver el contenido de la carpeta donde nos encontramos.
19 | ```bash
20 | $ ls
21 | ```
22 |
23 |
24 | "Change Directory": Nos permite movernos a una nueva carpeta o "directorio"
25 | ```bash
26 | $ cd [carpeta]
27 | ```
28 |
29 | "Make Directory": Crea una nueva carpeta en el directorio donde nos encontramos actualmente.
30 | ```bash
31 | $ mkdir [nombre de la carpeta]
32 | ```
33 |
34 | "Touch" creará un nuevo archivo.
35 | ```bash
36 | $ touch [nombre del archivo]
37 | ```
38 |
39 | "Remove": Elimina permanentemente un archivo. ¡CUIDADO! Esto traspasa cualquier "papelera de reciclaje" que exista en el sistema y elimina los archivos PERMANENTEMENTE. Como nota, esto no eliminará carpetas, necesitamos un comando especial para eso que aprenderemos más adelante.
40 |
41 | ```bash
42 | $ rm [nombre del archivo]
43 | ```
44 |
45 | ## Ejercicio
46 |
47 | En este ejercicio crearemos un nuevo repositorio en Github y a partir de la linea de comandos crearemos un nuevo archivo y lo agregaremos a nuestro nuevo repositorio.
48 |
49 | Iniciaremos creando una carpeta desde la consola llamada: "CarpetaHenry"
50 |
51 | Para ello primero iremos a la carpeta de nivel superior, escribe en la consola:
52 |
53 | ```bash
54 | cd ~
55 | ```
56 |
57 | y presiona Enter. Una vez estés en el nivel superior, escribe:
58 |
59 | ```bash
60 | mkdir CarpetaHenry
61 | ```
62 |
63 | y presiona Enter. ¡Felicitaciones, has creado un directorio!
64 |
65 | ### Crear un Repositorio
66 |
67 | Entra a github.com y logueate con tu usuario. Luego en la parte de arriba a la derecha buscá el signo '+' y elegí 'new repository'.
68 |
69 | 
70 |
71 | En la nueva pantalla, vas a tener que seleccionar el nombre de tu nuevo repo. Crea un repo que se llame: `repositorio-henry`. Podes agregarle una descripción también, pero no es obligatoria.
72 |
73 | 
74 |
75 | Luego elegí la visibilidad del proyecto como público (para tener repos privados tenes que pagar el premium de github).
76 |
77 | Por último haz clic en **Crear repositorio**.
78 |
79 | Listo ya tenes tu propio repo. Ahora vas a poder clonarlo con las intrucciones de más abajo.
80 |
81 | ### Clonar
82 |
83 | Para poder trabajar en un proyecto debes clonarlo (descargarlo) a tu máquina local. Para ello, accede al repositorio que creaste en tu cuenta, y haz click en el botón de la esquina superior derecha que dice "Clonar o descargar". Un dropdown aparecerá y podemos clickear en el icono del clipboard para copiar la dirección del repo. O, si el repo esta vacio vas a ver en el medio de la pantalla la URL con la dirección de tu repositorio.
84 |
85 | Una vez tengas la dirección copiada, abre una terminal nueva y escribe lo siguiente:
86 |
87 |
88 | ```bash
89 | $ cd ~
90 |
91 | $ cd CarpetaHenry
92 |
93 | $ git clone [dirección copiada]
94 | ```
95 |
96 | Esto descargará el repositorio y tendrás disponible una copia local guardada en tu máquina.
97 |
98 | ### Comandos de git:
99 |
100 | Durante estas lecciones interactuaremos con git a través de la terminal. En el futuro, podrías estar interesado en usar una interfaz visual/gráfica, pero durante estas lecciones necesitaremos usar la terminal para acceder a todas las funciones de git.
101 |
102 | En este ejercicio, añadiremos un archivo a nuestro proyecto y crearemos un commit para cambiar la "memoria" de git.
103 |
104 | A continuación, escribe lo siguiente en tu terminal:
105 |
106 | ```bash
107 | $ cd repositorio-henry
108 |
109 | $ touch archivo-ejemplo.js
110 | ```
111 |
112 | Esto añadirá un nuevo archivo llamado "archivo-ejemplo.js" a tu proyecto.
113 |
114 | En este momento, podemos usar el comando de git "status", esto nos mostrará los cambios hechos en el repositorio local. Usa "status" si no estás seguro de que algo haya funcionado y necesitas saber qué pasó.
115 |
116 | ```bash
117 | $ git status
118 | ```
119 |
120 | Deberías ver algo parecido a estas líneas:
121 |
122 | ```bash
123 | Changes not staged for commit:
124 | (use "git add ..." to update what will be committed)
125 | (use "git checkout -- ..." to discard changes in working directory)
126 |
127 | modified: README.md
128 |
129 | Untracked files:
130 | (use "git add ..." to include in what will be committed)
131 |
132 | archivo-ejemplo.js
133 |
134 | no changes added to commit (use "git add" and/or "git commit -a")
135 | ```
136 |
137 | Esto nos dice que tenemos un archivo que ha cambiado, pero todavía no ha sido guardado en el historial de git.
138 |
139 | Para hacer esto, usaremos el comando "add":
140 |
141 |
142 | ```bash
143 | git add archivo-ejemplo.js
144 | ```
145 |
146 | Esto agregó nuestros cambios al historial. Ahora, para guardar el historial, usaremos el comando "commit". Commit agarrará todos nuestros cambios y los guardará en el historial de git. Para futuras referencias, podrás añadir un mensaje acerca de los cambios hechos, esto facilitará ir atrás en el historial y encontrar los cambios que vos (o cualquiera) busque en el futuro en caso de necesitarlo. Siempre es una buena idea hacer una descripción clara y concisa de los cambios. Un _shorthand_ para añadir un mensaje, es usar la bandera (flag) "-m" y escribir el mensaje a continuación usando comillas.
147 |
148 | ```bash
149 | git commit -m 'Agregado nuevo archivo, archivo-ejemplo.js'
150 | ```
151 |
152 | Ahora que guardamos nuestros cambios localmente, vamos a querer compartir esos cambios en Github. Para ello, usaremos "push":
153 |
154 | ```bash
155 | git push
156 | ```
157 |
158 | La terminal te preguntará tu usuario y contraseña (En el caso de la contraseña cuando la estemos escribiendo por consola, por cuestiones de seguridad no se verá lo que estamos escribiendo). Escribimos estos datos y a continuación le damos enter y veremos un mensaje si todo fue "pusheado" correctamente:
159 |
160 | ```bash
161 | Counting objects: 5, done.
162 | Delta compression using up to 8 threads.
163 | Compressing objects: 100% (4/4), done.
164 | Writing objects: 100% (5/5), 2.97 KiB | 0 bytes/s, done.
165 | Total 5 (delta 1), reused 0 (delta 0)
166 | remote: Resolving deltas: 100% (1/1), completed with 1 local object.
167 | To git@github.com:[your username]/Precourse.git
168 | cccc682..283b9dd master -> master
169 | ```
170 |
171 | ¡Felicitaciones, acabas de subir tu primer git commit!
172 |
--------------------------------------------------------------------------------
/04-JS-III/homework/tests/JSIII.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const {
3 | devolverPrimerElemento,
4 | devolverUltimoElemento,
5 | obtenerLargoDelArray,
6 | incrementarPorUno,
7 | agregarItemAlFinalDelArray,
8 | agregarItemAlComienzoDelArray,
9 | dePalabrasAFrase,
10 | arrayContiene,
11 | agregarNumeros,
12 | promedioResultadosTest,
13 | numeroMasGrande,
14 | multiplicarArgumentos,
15 | cuentoElementos,
16 | diaDeLaSemana,
17 | empiezaConNueve,
18 | todosIguales,
19 | mesesDelAño,
20 | mayorACien,
21 | breakStatement,
22 | continueStatement
23 | } = require('../homework');
24 |
25 | describe('devolverPrimerElemento(arr)', function() {
26 | it('should return the first item in the array', function() {
27 | expect(devolverPrimerElemento([10, 10, 16, 12])).toBe(10);
28 | expect(devolverPrimerElemento([97, 100, 80, 55, 72, 94])).toBe(97);
29 | });
30 | });
31 |
32 | describe('devolverUltimoElemento(arr)', function() {
33 | it('should return the last item in the array', function() {
34 | expect(devolverUltimoElemento([10, 10, 16, 12])).toBe(12);
35 | expect(devolverUltimoElemento([97, 100, 80, 55, 72, 94])).toBe(94);
36 | expect(devolverUltimoElemento(['hi', 'there', 'how', 'are', 'you', 'doing?'])).toBe('doing?');
37 | });
38 | });
39 |
40 | describe('obtenerLargoDelArray(arr)', function() {
41 | it('should return the length of the array', function() {
42 | expect(obtenerLargoDelArray([10, 10, 16, 12])).toBe(4);
43 | expect(obtenerLargoDelArray([97, 100, 80, 55, 72, 94])).toBe(6);
44 | expect(obtenerLargoDelArray(['hi', 'there', 'how', 'are', 'you', 'doing?'])).toBe(6);
45 | });
46 | });
47 |
48 | describe('incrementarPorUno(arr)', function() {
49 | it('should return the array with each value incremented by one', function() {
50 | expect(incrementarPorUno([10, 10, 16, 12])).toEqual([11, 11, 17, 13]);
51 | expect(incrementarPorUno([97, 100, 80, 55, 72, 94])).toEqual([98, 101, 81, 56, 73, 95]);
52 | expect(incrementarPorUno([])).toEqual([]);
53 | });
54 | });
55 |
56 | describe('agregarItemAlFinalDelArray(arr, item)', function() {
57 | it('should return the array with the item added to the end', function() {
58 | expect(agregarItemAlFinalDelArray([10, 10, 16, 12], 10)).toEqual([10, 10, 16, 12, 10]);
59 | expect(agregarItemAlFinalDelArray([97, 100, 80, 55, 72, 94], 'Hola')).toEqual([97, 100, 80, 55, 72, 94, 'Hola']);
60 | expect(agregarItemAlFinalDelArray([], true)).toEqual([true]);
61 | });
62 | });
63 |
64 | describe('agregarItemAlComienzoDelArray(arr, item)', function() {
65 | it('should return the array with the item added to the front', function() {
66 | expect(agregarItemAlComienzoDelArray([10, 10, 16, 12], 10)).toEqual([10, 10, 10, 16, 12]);
67 | expect(agregarItemAlComienzoDelArray([97, 100, 80, 55, 72, 94], 'Hola')).toEqual(['Hola', 97, 100, 80, 55, 72, 94]);
68 | expect(agregarItemAlComienzoDelArray([], true)).toEqual([true]);
69 | });
70 | });
71 |
72 | describe('dePalabrasAFrase(words)', function() {
73 | it('should return a string that has all of the words from the array separated by spaces', function() {
74 | expect(dePalabrasAFrase(['Henry', 'JavaScript', 'Class'])).toBe('Henry JavaScript Class');
75 | expect(dePalabrasAFrase(['Henry'])).toBe('Henry');
76 | });
77 | });
78 |
79 | describe('arrayContiene(arr, item)', function() {
80 | it('should return true if the array contains the item', function() {
81 | expect(arrayContiene([10, 10, 16, 12], 10)).toBe(true);
82 | expect(arrayContiene([97, 100, 80, 55, 72, 94], 'Hola')).toBe(false);
83 | expect(arrayContiene([], true)).toBe(false);
84 | });
85 | });
86 |
87 | describe('agregarNumeros(numbers)', function() {
88 | it('should add all of the numbers in the array together and return the sum', function() {
89 | expect(agregarNumeros([10, 10, 16])).toBe(36);
90 | expect(agregarNumeros([97, 100])).toBe(197);
91 | expect(agregarNumeros([0])).toBe(0);
92 | });
93 | });
94 |
95 | describe('promedioResultadosTest(testScores)', function() {
96 | it('should return the average test score', function() {
97 | expect(promedioResultadosTest([10, 10, 16, 12])).toBe(12);
98 | expect(promedioResultadosTest([97, 100, 80, 55, 72, 94])).toBe(83);
99 | });
100 | });
101 |
102 | describe('numeroMasGrande(numbers)', function() {
103 | it('should return the largest number', function() {
104 | expect(numeroMasGrande([10, 10, 16, 12])).toBe(16);
105 | expect(numeroMasGrande([97, 100, 80, 55, 72, 94])).toBe(100);
106 | expect(numeroMasGrande([97, 10000, 80, 55, 7.2, -94])).toBe(10000);
107 | });
108 | });
109 |
110 | describe('multiplicarArgumentos()', function () {
111 | it('should return the product of all the arguments', function () {
112 | const product = multiplicarArgumentos(5, 5);
113 | const product2 = multiplicarArgumentos();
114 | const product3 = multiplicarArgumentos(3, 3, 3, 3);
115 | const product4 = multiplicarArgumentos(1);
116 | const product5 = multiplicarArgumentos(10, 0, 10);
117 | expect(product).toBe(25);
118 | expect(product2).toBe(0);
119 | expect(product3).toBe(81);
120 | expect(product4).toBe(1);
121 | expect(product5).toBe(0);
122 | });
123 | });
124 |
125 | describe('cuentoElementos(arreglo)', function() {
126 | it('should return a counter with the total of numbers greater than 18', function() {
127 | expect(cuentoElementos([10, 10, 18, 21])).toBe(1);
128 | expect(cuentoElementos([97, 100, 190, 5, 7, 9])).toBe(3);
129 | expect(cuentoElementos([97, 20, 90, 50, 7, 709])).toBe(5);
130 | });
131 | });
132 |
133 | describe('diaDeLaSemana(numeroDeDia)', function() {
134 | it('should return he name of the day associated with that number', function() {
135 | expect(diaDeLaSemana(3)).toBe("Es dia Laboral");
136 | expect(diaDeLaSemana(2)).toBe("Es dia Laboral");
137 | expect(diaDeLaSemana(1)).toBe("Es fin de semana");
138 | expect(diaDeLaSemana(7)).toBe("Es fin de semana");
139 | });
140 | });
141 |
142 | describe('empiezaConNueve(n))', function() {
143 | it('should return true or false in case the received number starts with nine', function() {
144 | expect(empiezaConNueve(98)).toBe(true);
145 | expect(empiezaConNueve(9)).toBe(true);
146 | expect(empiezaConNueve(2)).toBe(false);
147 | expect(empiezaConNueve(7)).toBe(false);
148 | expect(empiezaConNueve(-5)).toBe(false);
149 | });
150 | });
151 |
152 | describe('todosIguales(arreglo)', function() {
153 | it('should return true if all the elements of the array are equal and false otherwise', function() {
154 | expect(todosIguales([20, 20, 20, 20 ])).toBe(true);
155 | expect(todosIguales([97, 100, 190, 9])).toBe(false);
156 |
157 | expect(todosIguales([230, 230, 230, 230 ])).toBe(true);
158 | });
159 | });
160 |
161 | describe('mesesDelAño(array)', function() {
162 | it('should return a new array with the requested months', function() {
163 | var ok = ["Marzo", "Diciembre", "Abril", "Junio", "Julio", "Noviembre", "Enero", "Mayo", "Febrero"];
164 | var wrong = ["Marzo", "Diciembre", "Julio", "Noviembre"];
165 | expect(mesesDelAño(ok)).toEqual(["Marzo", "Noviembre", "Enero"]);
166 | expect(mesesDelAño(wrong)).toEqual("No se encontraron los meses pedidos");
167 | });
168 | });
169 |
170 | describe('mayorACien(array)', function() {
171 | it('should return an array with values grater than 100', function() {
172 | var integers = [100, 4, 56, 78, 200, 120, 7, 160, 148, 22];
173 | expect(mayorACien(integers)).toEqual([200, 120, 160, 148]);
174 | });
175 | });
176 |
177 | describe('breakStatement(numero)', function() {
178 | it('should return an array with the values resulting from adding 2 in each iteration', function() {
179 | expect(breakStatement(50)).toEqual([52, 54, 56, 58, 60, 62, 64, 66, 68, 70]);
180 | });
181 | it('should stop the execution if the sum value and the iteration number match', function() {
182 | expect(breakStatement(-4)).toEqual('Se interrumpió la ejecución');
183 | });
184 | });
185 |
186 | describe('continueStatement(numero)', function() {
187 | it('should return an array with the values resulting from adding 2 in each iteration when the iteration number is different from 5', function() {
188 | expect(continueStatement(50)).toEqual([52, 54, 56, 58, 60, 62, 64, 66, 68]);
189 | expect(continueStatement(-4)).toEqual([-2, 0, 2, 4, 6, 8, 10, 12, 14]);
190 | });
191 | });
--------------------------------------------------------------------------------
/09-CSS-Positioning/demo/positionEjemplo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
47 |
48 |
49 |
50 |
51 |
52 |
Schlitz artisan sapiente quis, pop-up heirloom laborum master cleanse. Pickled austin stumptown, aliquip squid bitters paleo minim keytar freegan typewriter quis chartreuse cillum. Id tilde ramps ea, fugiat normcore velit meggings cornhole marfa. Dolor magna odio, +1 sunt helvetica vero hammock bitters master cleanse nihil banh mi chia blue bottle kale chips. Kitsch PBR&B pork belly, pop-up scenester ugh occupy exercitation reprehenderit green juice pour-over. Salvia cupidatat nesciunt chambray, food truck excepteur raw denim pickled before they
22 |
23 | Podemos decir que todo el código que escribimos en JS o "hace algo" o "retorna algo" (o una combinación de los dos). En la terminología de lenguajes de programación esta diferencia está clasificada en la definición de **expressions** (expresiones) y **statements** (sentencias).
24 |
25 | Podriamos definir conceptualmente a ambas como:
26 |
27 | - Una **expression** siempre se convierte (retorna) un valor.
28 | - Un **statement** realiza una acción.
29 |
30 | Cuando escribimos código, todo el tiempo mezclamos expresiones y statements para conseguir el resultado final. Por lo tanto, al principio es un poco díficil ver la diferencia entre las dos, pero vamos a intentar ejemplificar lo anterior:
31 |
32 | ```js
33 | // retorna algo
34 | 1 + 1
35 | Math.pow(2, 3) + 4;
36 | 'hola' + ' soy una expression';
37 | ```
38 |
39 | `1 + 1` intuitivamente se convierte o resuelve a `2`! eso es una expresión. Es cualquier cosa que escribamos y esperamos que se convierta en otro valor.
40 | Cuando *pegamos* una expression en la consola de Firefox o de Chrome, vamos a poder ver el resultado al que resuelve:
41 |
42 | 
43 |
44 | ```js
45 | // hace algo
46 | if (condicion) {
47 | // código ejecutado si es true
48 | } else {
49 | // código ejecutado si es false
50 | }
51 | ```
52 |
53 | En este ejemplo, vemos que el `if` "hace algo", es decir, escribimos el if para que bifurque le ejecución del código según el valor de `condicion`. Como ya sabemos, si `condicion` tiene un valor *verdadero* entonces se ejecutará el bloque de código de arriba, y si no, el de abajo.
54 | Fijensé que acá es importante discriminar lo que está *adentro* de los bloques de código, ya que ahí adentro podriamos escribir **expresiones** que sí devuelvan algo.
55 |
56 | Nos podemos dar cuenta que algo es un statement, porque si lo *pegamos* en la consola del intérprete -por ejemplo, en la consola del Firefox o Chrome- vamos a ver que no produce ningún resultado:
57 |
58 | 
59 |
60 | > Una regla fácil para distinguir entre una *expression* y un *statement* en JS es la siguiente:
61 | Si podemos ponerlo dentro de un `console.log`, es una *expression*, si no, es un *statement*.
62 | Por ejemplo:
63 |
64 | ```js
65 | // expresiones!
66 | console.log(1 + 1);
67 | console.log(Math.pow(2,3) + 22);
68 |
69 | // statements
70 | console.log(if( true) {
71 | // código
72 | });
73 | // jamás haríamos esto de arriba, no?
74 | ```
75 |
76 | > El **operador ternario**, es una expresión o un statement? ej: (numero > 10 ? 'mayor' : 'menor');
77 |
78 | ## Expressions
79 |
80 | Cómo dijimos arriba, una *expression* es cualquier pedazo de código **que pueda ser evaluado a un valor**. Justamente por esto, las vamos a usar en lugares donde JavaScript *espera un valor*. Por ejemplo, cómo cuando pasamos una expresión como argumento de una función.
81 |
82 | Según la documentación de MDN, las expresiones se pueden clasificar en las siguientes categorías:
83 |
84 | ### Expresiones Aritméticas
85 |
86 | Son las expresiones que resuelven a un valor **númerico**. Por ejemplo:
87 |
88 | ```js
89 | 10;
90 | 1 + 10;
91 | 2 * 16;
92 | ```
93 |
94 | ### Expresiones de Strings
95 |
96 | Son expresiones que resuelven a una **string**. Por ejemplo:
97 |
98 | ```js
99 | 'hola';
100 | 'hola' + ' como va?';
101 | ```
102 |
103 | ## Expresiones lógicas
104 |
105 | Son expresiones que resuelven a un valor **booleano**. Por ejemplo:
106 |
107 | ```js
108 | 10 > 9;
109 | 11 === 2;
110 | false;
111 | ```
112 |
113 | ## Expresiones primarias
114 |
115 | Son expresiones que se escriben por si mismas, y no utilizan ningún operador. Incluyen a valores literales, uso de variables, y algunos keywords de JS. Por ejemplo:
116 |
117 | ```js
118 | 'hola';
119 | 23;
120 | true;
121 | this; // hace referencia al keyword this
122 | numero; // hace referencia a la variable numero
123 | ```
124 |
125 | ## Expresiones de asignación
126 |
127 | Cuando utilizamos el operador `=` hablamos de un *assigment expression*. Está expresión retorna el valor asignado. Por ejemplo:
128 |
129 | ```js
130 | a = 1; // si probamos esto en la consola, vemos que retorna el valor 1.
131 | var c = (a = 2); // vamos a ver que dentro de la variable c, está el valor retornado por la expresion `a = 2`
132 | ```
133 |
134 | > Este es un caso muy particular, nótese que esta expresion retornar una valor, **pero a su vez hace algo**!! Ese algo, es guardar el valor a la derecha del signo `=` en la variable a la izquierda del signo `=`.
135 | Otra cosa a notar, es que si usamos el keyword `var` la expresión retorna `undefined`, es decir, no es lo mismo una asignación que una declaración de variables.
136 |
137 | ## Expresiones con efectos secundarios (side effects)
138 |
139 | Son expresiones que al ser evaluadas retornan algo, pero a su vez tienen *un efecto secundario* (incrementar un valor, etc...). Por ejemplo:
140 |
141 | ```js
142 | contador++; // retorna el valor de contador e incrementa uno.
143 | ++contador; // incrementa el valor de contador y retorna el valor;
144 |
145 | mult *= 2;// multiplica mult por dos, asigna ese valor a mult y retorna el valor;
146 | ```
147 |
148 | ## Statements (sentencias)
149 |
150 | Los *Statements* son instrucciones que le damos al intérprete de JS para que **haga algo**, ese algo puede ser: crear una variable, ejecutar un bloque de código N veces, ejecutar un bloque de código o no según una condición de verdad, declarar una función, etc...
151 |
152 | Podemos clasificar a los Statements en las siguientes categorías:
153 |
154 | ### Declaration Statements
155 |
156 | Este tipo de statements indican al intérprete que declare variables o funciones, se utiliza el keyword `function` y `var`. Por ejemplo:
157 |
158 | ```js
159 | var prueba; // declaro la variable prueba
160 | var toni; // declaro la variable toni
161 |
162 | function suma(a, b) { // declaro la función suma;
163 | // bloque de código
164 | }
165 | ```
166 |
167 | > Habiamos dicho que por regla general lo que podamos pasarle a una función (por ejemplo, `console.log`) por argumento era una expresión... y muchas veces pasamos una declaración de una función por argumento. Esto sucede porque en JS existen tambien las **function expressions**.
168 |
169 | #### Function expressions vs function declarations
170 |
171 | Cuando declaramos una función el intérprete puede *interpretarla* como un statement o cómo una expresión, dependiendo del contexto. Por ejemplo:
172 |
173 | ```js
174 | //function declaration
175 |
176 | function resta(a, b) {
177 | // bloque de código
178 | }
179 |
180 | // function expression
181 |
182 | var resta = function (a, b) {
183 | // bloque de código
184 | }
185 |
186 | array.map(function() {
187 | // código;
188 | });
189 | // el argumento de la función espera una expression
190 |
191 |
192 | // Immediately Invoked Function Expression
193 | (function () {
194 | console.log('IIFE');
195 | })();
196 | ```
197 |
198 | Cómo vemos en el ejemplo de arriba, el intérprete *hace algo*: declara la función. Por lo tanto es un statement. En cambio, en el segundo ejemplo, estamos haciendo una asignación, y la asignación espera una *expresión* en la parte de la derecha, asi que le estamos pasando un function expression.
199 |
200 | > Nótese que un function expression puede no tener nombre. Estas son las llamadas **funciones anónimas**.
201 |
202 | ### Conditional Statements
203 |
204 | Estos statements sirven para controlar el flujo de ejecución de código según si se cumple o no una condición. Por ejemplo:
205 |
206 | ```js
207 | if (condicion) { // condicion puede ser cualquier expression!!
208 | // ejecuta este bloque si condicion es true
209 | } else if (condicion2) {
210 | // ejecuta este bloque de código si condicion no es true y condicion2 es true
211 | } else {
212 | // ejecuta este bloque de código si condicion y condicion2 no son true.
213 | }
214 | ```
215 |
216 | ### Loops (bucles) y Jumps (saltos)
217 |
218 | Estos statements también controlan el flujo de ejecución del código, pero hacen que un bloque se ejecute N veces (ej: `for`), o que la ejecución salte a otro contexto (ej: `return`). Por ejemplo:
219 |
220 | ```js
221 | // loops
222 | while(condicion) { // condicion es una expresión!!
223 | // ejecuta este código mientras condicion sea true;
224 | }
225 |
226 | for (var i = 1; i < 10; i++) {
227 | // ejecuta este bloque de código 9 veces;
228 | }
229 |
230 | // jumps
231 |
232 | function () {
233 | // bloque de código
234 | return; // cuando llegue acá, sale de la ejecución de la función y retorna un valor;
235 | // bloque de código
236 | }
237 |
238 |
239 | for (var i = 1; i < 10; i++) {
240 | // ejecuta este bloque de código N veces;
241 | continue; // salta a la siguiente iteración del bucle;
242 | // desde acá no se ejecuta;
243 | }
244 |
245 | throw new Error('hubo un error, se termina la ejecución');
246 | ```
247 |
248 | ### Expression Statements
249 |
250 | JS tiene la particularidad qué en donde sea que el intérprete espera un *statement*, nosotros podemos pasarle una *expresión*. Esto da lugar a los llamados *expression statements*.
251 |
252 | > **Esto no funciona en sentido inverso, donde se espera una expresión *NO* podemos pasar una statement**.
253 |
--------------------------------------------------------------------------------
/02-JS-I/homework/tests/JSI.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const {
3 | nuevaString,
4 | nuevoNum,
5 | nuevoBool,
6 | nuevaResta,
7 | nuevaMultiplicacion,
8 | nuevoModulo,
9 | devolverString,
10 | tienenMismaLongitud,
11 | sonIguales,
12 | menosQueNoventa,
13 | mayorQueCincuenta,
14 | suma,
15 | resta,
16 | divide,
17 | multiplica,
18 | obtenerResto,
19 | esPar,
20 | esImpar,
21 | elevarAlCuadrado,
22 | elevarAlCubo,
23 | elevar,
24 | redondearNumero,
25 | redondearHaciaArriba,
26 | numeroRandom,
27 | esPositivo,
28 | agregarSimboloExclamacion,
29 | combinarNombres,
30 | obtenerSaludo,
31 | obtenerAreaRectangulo,
32 | retornarPerimetro,
33 | areaDelTriangulo,
34 | deEuroAdolar,
35 | esVocal,
36 | } = require('../homework.js');
37 |
38 | describe('nuevaString', function() {
39 | it('Deberia ser un string', function() {
40 | expect(typeof nuevaString).toBe('string');
41 | });
42 | });
43 |
44 | describe('nuevoNum', function() {
45 | it('Deberia ser un numero', function() {
46 | expect(typeof nuevoNum).toBe('number');
47 | });
48 | });
49 |
50 | describe('nuevoBool', function() {
51 | it('Deberia ser un booleano', function() {
52 | expect(typeof nuevoBool).toBe('boolean');
53 | });
54 | });
55 |
56 | describe('nuevaResta', function() {
57 | it('Deberia ser un booleano', function() {
58 | expect(nuevaResta).toBe(true);
59 | });
60 | });
61 |
62 | describe('nuevaMultiplicacion', function() {
63 | it('Deberia ser un booleano', function() {
64 | expect(nuevaMultiplicacion).toBe(true);
65 | });
66 | });
67 |
68 | describe('nuevoModulo', function() {
69 | it('Deberia ser un booleano', function() {
70 | expect(nuevoModulo).toBe(true);
71 | });
72 | });
73 |
74 | describe('devolverString(str)', function() {
75 | it('Deberia devolver el string provisto', function() {
76 | let string = 'Henry';
77 | expect(devolverString(string)).toBe(string);
78 | });
79 | });
80 |
81 | describe('suma(x, y)', function() {
82 | it('Deberia devolver la suma de los dos argumentos', function() {
83 | expect(suma(5, 5)).toBe(10);
84 | expect(suma(-1, 5)).toBe(4);
85 | });
86 | });
87 |
88 | describe('resta(x, y)', function() {
89 | it('Deberia devolver la diferencia de los dos argumentos', function() {
90 | expect(resta(5, 5)).toBe(0);
91 | expect(resta(-1, 5)).toBe(-6);
92 | expect(resta(5, -5)).toBe(10);
93 | expect(resta(0, 0)).toBe(0);
94 | });
95 | });
96 |
97 | describe('divide(x, y)', function() {
98 | it('Deberia devolver la division de los dos argumentos', function() {
99 | expect(divide(5, 5)).toBe(1);
100 | expect(divide(10, 5)).toBe(2);
101 | expect(divide(11, 2)).toBe(5.5);
102 | });
103 | });
104 |
105 | describe('multiplica(x, y)', function() {
106 | it('Deberia devolver el producto de los dos argumentos', function() {
107 | expect(multiplica(5, 5)).toBe(25);
108 | expect(multiplica(10, -5)).toBe(-50);
109 | expect(multiplica(11, 0)).toBe(0);
110 | });
111 | });
112 |
113 |
114 | describe('sonIguales(x, y)', function() {
115 | it('Deberia devolver true si los argumentos son iguales y sino false', function() {
116 | expect(sonIguales(15, 15)).toBe(true);
117 | expect(sonIguales(90, 50)).toBe(false);
118 | expect(sonIguales('test', 'test')).toBe(true);
119 | });
120 | });
121 |
122 | describe('tienenMismaLongitud(str1, str2)', function() {
123 | it('Deberia devolver true si los strings tienen la misma longitud y sino false', function() {
124 | expect(tienenMismaLongitud('hi', 'there')).toBe(false);
125 | expect(tienenMismaLongitud('javascript', 'bumfuzzled')).toBe(true);
126 | });
127 | });
128 |
129 | describe('menosQueNoventa(num)', function() {
130 | it('Deberia devolver true si el numero es menor a noventa sino false', function() {
131 | expect(menosQueNoventa(15)).toBe(true);
132 | expect(menosQueNoventa(90)).toBe(false);
133 | expect(menosQueNoventa(100)).toBe(false);
134 | });
135 | });
136 |
137 | describe('mayorQueCincuenta(num)', function() {
138 | it('Deberia devolver true si el numero es mayor a cincuenta sino false', function() {
139 | expect(mayorQueCincuenta(15)).toBe(false);
140 | expect(mayorQueCincuenta(50)).toBe(false);
141 | expect(mayorQueCincuenta(60)).toBe(true);
142 | });
143 | });
144 |
145 | describe('obtenerResto(x, y)', function() {
146 | it('Deberia devolver el resto de dividir x sobre y', function() {
147 | expect(obtenerResto(15, 5)).toBe(0);
148 | expect(obtenerResto(21, 5)).toBe(1);
149 | expect(obtenerResto(22, 5)).toBe(2);
150 | });
151 | });
152 |
153 | describe('esPar(num)', function() {
154 | it('Deberia devolver true si el numero es par sino false', function() {
155 | expect(esPar(6)).toBe(true);
156 | expect(esPar(7)).toBe(false);
157 | expect(esPar(0)).toBe(true);
158 | });
159 | });
160 |
161 | describe('esImpar(num)', function() {
162 | it('Deberia devolver true si el numero es impar sino false', function() {
163 | expect(esImpar(6)).toBe(false);
164 | expect(esImpar(7)).toBe(true);
165 | expect(esImpar(0)).toBe(false);
166 | });
167 | });
168 |
169 | describe('elevarAlCuadrado(num)', function() {
170 | it('Deberia devolver el numero elevado al cuadrado', function() {
171 | expect(elevarAlCuadrado(6)).toBe(36);
172 | expect(elevarAlCuadrado(7)).toBe(49);
173 | expect(elevarAlCuadrado(0)).toBe(0);
174 | expect(elevarAlCuadrado(-5)).toBe(25);
175 | });
176 | });
177 |
178 | describe('elevarAlCubo(num)', function() {
179 | it('Deberia devolver el numero elevado al cubo', function() {
180 | expect(elevarAlCubo(3)).toBe(27);
181 | expect(elevarAlCubo(0)).toBe(0);
182 | expect(elevarAlCubo(-5)).toBe(-125);
183 | });
184 | });
185 |
186 | describe('elevar(num, exponent)', function() {
187 | it('Deberia devolver el numero elevado al exponente indicado', function() {
188 | expect(elevar(2, 2)).toBe(4);
189 | expect(elevar(2, 3)).toBe(8);
190 | expect(elevar(0, 5)).toBe(0);
191 | expect(elevar(10, 1)).toBe(10);
192 | });
193 | });
194 |
195 | describe('redondearNumero(num)', function() {
196 | it('Deberia devolver el numero redondeado', function() {
197 | expect(redondearNumero(1.5)).toBe(2);
198 | expect(redondearNumero(2)).toBe(2);
199 | expect(redondearNumero(0.1)).toBe(0);
200 | });
201 | });
202 |
203 | describe('redondearHaciaArriba(num)', function() {
204 | it('Deberia devolver el numero redondeado para arriba', function() {
205 | expect(redondearHaciaArriba(1.5)).toBe(2);
206 | expect(redondearHaciaArriba(2)).toBe(2);
207 | expect(redondearHaciaArriba(0.1)).toBe(1);
208 | });
209 | });
210 |
211 | describe('numeroRandom()', function() {
212 | it('Debería devolver un número entre 0 y 1', function() {
213 | expect(typeof numeroRandom()).toBe('number');
214 | expect(numeroRandom()).toBeGreaterThanOrEqual(0);
215 | expect(numeroRandom()).toBeLessThan(1);
216 | });
217 | });
218 |
219 | describe('esPositivo(numero)', function() {
220 | it('Debería devolver el string \Es positivo ó Es negativo\ según corresponda', function() {
221 | expect(esPositivo(0)).toBe(false);
222 | expect(esPositivo(23)).toBe('Es positivo');
223 | expect(esPositivo(-2)).toBe('Es negativo');
224 | });
225 | });
226 |
227 | describe('agregarSimboloExclamacion(str)', function() {
228 | it('Deberia agregar un signo de exclamacion al final del string', function() {
229 | expect(agregarSimboloExclamacion('hello world')).toBe('hello world!');
230 | expect(agregarSimboloExclamacion('Soy Henry')).toBe('Soy Henry!');
231 | });
232 | });
233 |
234 | describe('combinarNombres(firstName, lastName)', function() {
235 | it('Deberia devolver los strings combinados con un espacio en el medio', function() {
236 | expect(combinarNombres('hello', 'world')).toBe('hello world');
237 | expect(combinarNombres('Soy', 'Henry')).toBe('Soy Henry');
238 | });
239 | });
240 |
241 | describe('obtenerSaludo(name)', function() {
242 | it('Deberia devolver el string \'Hola {name}!\'', function() {
243 | expect(obtenerSaludo('Martin')).toBe('Hola Martin!');
244 | expect(obtenerSaludo('Antonio')).toBe('Hola Antonio!');
245 | });
246 | });
247 |
248 | describe('obtenerAreaRectangulo(alto, ancho)', function() {
249 | it('Deberia retornar el area correcta del rectangulo', function() {
250 | expect(obtenerAreaRectangulo(2, 2)).toBe(4);
251 | expect(obtenerAreaRectangulo(3, 6)).toBe(18);
252 | expect(obtenerAreaRectangulo(0, 2)).toBe(0);
253 | });
254 | });
255 |
256 | describe('retornarPerimetro(lado)', function() {
257 | it('Deberia retornar el perímetro correcto del cuadrado', function() {
258 | expect(retornarPerimetro(2)).toBe(8);
259 | expect(retornarPerimetro(8)).toBe(32);
260 | expect(retornarPerimetro(0)).toBe(0);
261 | });
262 | });
263 |
264 |
265 | describe('areaDelTriangulo( base, altura)', function() {
266 | it('Deberia retornar el area correcta del triángulo', function() {
267 | expect(areaDelTriangulo(10, 5)).toBe(25);
268 | expect(areaDelTriangulo(20, 10)).toBe(100);
269 | expect(areaDelTriangulo(0, 10)).toBe(0);
270 | });
271 | });
272 |
273 | describe('deEuroAdolar(euro)', function() {
274 | it('Deberia retornar el valor correcto de euro a dolar', function() {
275 | expect(deEuroAdolar(100)).toBe(120);
276 | expect(deEuroAdolar(200)).toBe(240);
277 | expect(deEuroAdolar(50)).toBe(60);
278 | });
279 | });
280 |
281 | describe('esVocal(letra)', function() {
282 | it('Deberia devolver el string "Dato incorrecto", si el valor ingresado tiene más de una letra', function() {
283 | expect(esVocal("la")).toBe("Dato incorrecto");
284 | expect(esVocal("pero")).toBe("Dato incorrecto");
285 | });
286 | it('Deberia devolver el string "Dato incorrecto", si el valor ingresado no es vocal', function() {
287 | expect(esVocal("l")).toBe("Dato incorrecto");
288 | expect(esVocal("p")).toBe("Dato incorrecto");
289 | });
290 | it('Deberia devolver el string "Es vocal", si el valor ingresado lo es', function() {
291 | expect(esVocal('a')).toBe('Es vocal');
292 | expect(esVocal('e')).toBe('Es vocal');
293 | expect(esVocal('i')).toBe('Es vocal');
294 | expect(esVocal('o')).toBe('Es vocal');
295 | expect(esVocal('u')).toBe('Es vocal');
296 | });
297 | });
298 |
--------------------------------------------------------------------------------
/01a-Git/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
20 |
21 | ## Version Control System
22 |
23 | ¿Qué es un control de versiones, y por qué debería importarte? Un control de versiones es un sistema que registra los cambios realizados en un archivo o conjunto de archivos a lo largo del tiempo, de modo que puedas recuperar versiones específicas más adelante.
24 |
25 | Si eres diseñador gráfico o web, y quieres mantener cada versión de una imagen o diseño (algo que sin duda quieres), un sistema de control de versiones (Version Control System o VCS en inglés) es una elección muy sabia. Te permite revertir archivos a un estado anterior, revertir el proyecto entero a un estado anterior, comparar cambios a lo largo del tiempo, ver quién modificó por última vez algo que puede estar causando un problema, quién introdujo un error y cuándo, y mucho más. Usar un VCS también significa generalmente que si rompes o pierdes archivos, puedes recuperarlos fácilmente.
26 |
27 | Hay varios tipos de sistemas de versionado, estos pueden ser:
28 |
29 | ### Locales
30 |
31 | 
32 |
33 | Un método de control de versiones, usado por muchas personas, es copiar los archivos a otro directorio (quizás indicando la fecha y hora en que lo hicieron, si son ingeniosos). Este método es muy común porque es muy sencillo, pero también es tremendamente propenso a errores. Es fácil olvidar en qué directorio te encuentras y guardar accidentalmente en el archivo equivocado o sobrescribir archivos que no querías.
34 | Como se pueden imaginar, este sistema funciona _bien_ para trabajar solos, pero si queremos incorporar otra gente al equipo van a empezar a surgir problemas.
35 |
36 | ### Centralizados
37 |
38 | 
39 |
40 | Para solventar este problema, se desarrollaron los sistemas de control de versiones centralizados (_Centralized Version Control Systems_ o **CVCSs** en inglés). Estos sistemas, como **CVS**, **Subversion**, y **Perforce**, tienen un único servidor que contiene todos los archivos versionados, y varios clientes descargan los archivos desde ese lugar central. Durante muchos años éste ha sido el estándar para el control de versiones.
41 |
42 | Este sistema ofrece varias ventajas, como por ejemplo: Todo el mundo puede saber en qué están trabajando los demás colaboradores y los administradores tienen control sobre qué archivos pueden ver/modificar cada colaborador. Pero tambien presenta un _problema importante_: que hay un **punto único de fallo**. ¿Si éste server se cae? Nadie puede seguir trabajando ni trackeando sus cambios. ¿O si se rompe y no hay backups? Se pierde absolutamente _todo_ el trabajo realizado.
43 |
44 | ### Distribuido
45 |
46 | 
47 |
48 | Es aquí donde entran los sistemas de control de versiones distribuidos (_Distributed Version Control Systems_ o **DVCSs** en inglés). En un DVCS (como **Git**, **Mercurial**, **Bazaar** o **Darcs**), los clientes no sólo descargan la última instantánea de los archivos: replican completamente el repositorio. Así, si un servidor muere, y estos sistemas estaban colaborando a través de él, cualquiera de los repositorios de los clientes puede copiarse en el servidor para restaurarlo.
49 |
50 | ## Historia de Git
51 |
52 | Como muchas de las grandes cosas en esta vida, **Git** comenzó con un poco de destrucción creativa y encendida polémica. El núcleo de Linux es un proyecto de software de código abierto con un alcance bastante grande. Durante la mayor parte del mantenimiento del núcleo de Linux (1991-2002), los cambios en el software se pasaron en forma de parches y archivos. En 2002, el proyecto del núcleo de Linux empezó a usar un DVCS propietario llamado **BitKeeper**.
53 |
54 | En 2005, la relación entre la comunidad que desarrollaba el núcleo de Linux y la compañía que desarrollaba BitKeeper se vino abajo, y la herramienta dejó de ser ofrecida gratuitamente. Esto impulsó a la comunidad de desarrollo de Linux (y en particular a Linus Torvalds, el creador de Linux) a desarrollar su propia herramienta basada en algunas de las lecciones que aprendieron durante el uso de BitKeeper. Algunos de los objetivos del nuevo sistema:
55 |
56 | - Velocidad
57 | - Diseño sencillo
58 | - Fuerte apoyo al desarrollo no lineal (miles de ramas paralelas)
59 | - Completamente distribuido
60 | - Capaz de manejar grandes proyectos (como el núcleo de Linux) de manera eficiente (velocidad y tamaño de los datos)
61 |
62 | Desde su nacimiento en 2005, Git ha evolucionado y madurado para ser fácil de usar y aún conservar estas cualidades iniciales. Es tremendamente rápido, muy eficiente a gran escala, y tiene un increíble sistema de ramificación (branching) para desarrollo no lineal.
63 |
64 | ## Conceptos de Git
65 |
66 | Git modela sus datos como un conjunto de instantáneas de un mini sistema de archivos. Cada vez que confirmas un cambio, o guardas el estado de tu proyecto en Git, él básicamente hace una foto del aspecto de todos tus archivos en ese momento, y guarda una referencia a esa instantánea. Para ser eficiente, si los archivos no se han modificado, Git no almacena el archivo de nuevo, sólo un enlace al archivo anterior idéntico que ya tiene almacenado.
67 |
68 | 
69 |
70 | La mayoría de las operaciones en Git sólo necesitan archivos y recursos locales para operar. Por lo general no se necesita información de ningún otro ordenador de tu red. Como tienes toda la historia del proyecto ahí mismo, en tu disco local, la mayoría de las operaciones parecen prácticamente inmediatas (con otros sistemas el proceso involucra llamados por red que generan retardos importantes).
71 |
72 | ## Integridad
73 |
74 | Todo en Git es verificado mediante una suma de comprobación (**checksum** en inglés) antes de ser almacenado, y es identificado a partir de ese momento mediante dicha suma. **Esto significa que es imposible cambiar los contenidos de cualquier archivo o directorio sin que Git lo sepa.**
75 |
76 | El mecanismo que usa Git para generar esta suma de comprobación se conoce como hash SHA-1. Se trata de una cadena de 40 caracteres hexadecimales (0-9 y a-f), y se calcula en base a los contenidos del archivo o estructura de directorios. Un hash SHA-1 tiene esta pinta:
77 |
78 | ```shell
79 | 24b9da6552252987aa493b52f8696cd6d3b00373
80 | ```
81 |
82 | Verás estos valores hash por todos lados en Git, ya que los usa con mucha frecuencia. De hecho, Git guarda todo no por nombre de archivo, sino por el valor hash de sus contenidos.
83 |
84 | Vamos a distinguir dos directorios, primero el _directorio de git_: que es donde almacena los metadatos y la base de datos de tu proyecto, y segundo el _directorio de trabajo_ que es una copia de una versión del proyecto en particular. Estos archivos se sacan de la base de datos comprimida en el directorio de Git, y se colocan en disco para que los puedas usar o modificar. Los archivos dentro del _directorio de trabajo_ pueden estar en unos de los siguientes _estados_:
85 |
86 | ### Estados
87 |
88 | Git tiene tres estados principales en los que se pueden encontrar tus archivos:
89 |
90 | - **committed**: significa que los datos están almacenados de manera segura en tu base de datos local.
91 | - **modified**: significa que has modificado el archivo pero todavía no lo has commiteado a tu base de datos.
92 | - **staged**: significa que has marcado un archivo modificado en su versión actual para que vaya en tu próxima commiteada.
93 |
94 | 
95 |
96 | Hay un archivo simple, generalmente contenido en tu directorio de Git, llamado que almacena información acerca de lo que va a ir en tu próxima confirmación, al contenido de este archivo. O al archivo mismo se lo conoce como **staging area**.
97 |
98 | Sabiendo esto, el flujo de trabajo básico en Git sería algo así:
99 |
100 | - Modificas una serie de archivos en tu _directorio de trabajo_.
101 | - _Stageas_ los archivos, añadiendolos a tu **staging area** o área de preparación.
102 | - Commiteas o Confirmas los cambios, lo que toma los archivos tal y como están en el área de preparación, y almacena esas instantáneas de manera permanente en tu directorio de Git.
103 |
104 | > Si una versión concreta de un archivo está en el directorio de Git, se considera confirmada (**committed**). Si ha sufrido cambios desde que se obtuvo del repositorio, y ha sido añadida al área de preparación, está preparada (**staged**). Y si ha sufrido cambios desde que se obtuvo del repositorio, pero no se ha preparado (no se incluyó en el área de preparación), está modificada (**modified**).
105 |
106 | ### Github
107 |
108 | [Github.com](https://github.com) es una red para almacenar tus repositorios, esencialmente es un repositorio de repositorios. Es uno de los tantos disponibles en internet, y el más popular. Git != Github, aunque funcionen muy bien juntos. Github es un lugar donde puedes compartir tu código o encontrar otros proyectos. También actúa como portfolio para cualquier código en el que hayas trabajado. Si planeas ser un desarrollador deberías tener cuenta en Github. Usaremos Github extensivamente durante tu tiempo en Henry.
109 |
110 | ## Lectura recomendada
111 |
112 | - [Git: sitio oficial](https://git-scm.com/)
113 | - [Github: tutorial oficial](https://try.github.io/levels/1/challenges/1)
114 | - [Git: tutorial oficial](https://git-scm.com/docs/gittutorial)
115 | - [Terminal turorial](https://www.davidbaumgold.com/tutorials/command-line/)
116 |
117 | ---
118 |
119 | ## Homework
120 |
121 | Completa la tarea descrita en el archivo [README](https://github.com/soyHenry/Prep-Course/tree/main/01a-Git/homework)
122 |
123 | #### Si tienes dudas sobre este tema, puedes consultarlas en el canal ***01b_git*** de Slack
124 |
--------------------------------------------------------------------------------
/09-CSS-Positioning/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
29 |
30 | ## Introducción al posicionamiento
31 |
32 | Armar un layout y hacer que todo se vea limpio es lo que la mayoría de gente espera hacer cuando empiezan a aprender CSS. Posicionar elementos HTML en la página con CSS es posiblemente la habilidad más poderosa que tiene CSS, aunque también puede ser la más **frustrante**. En esta lección aprenderemos distintas formas de posicionar elementos en la página.
33 |
34 | ### La propiedad ***display***
35 |
36 | Esta propiedad es una de las más importante de posicionamiento en CSS. Podemos usarla para controlar cómo se muestra el contenido en relación a los elementos alrededor de este, y cómo se comportan en la pantalla.
37 |
38 | ```css
39 | div {
40 | display: ;
41 | }
42 | ```
43 |
44 | Hay dos tipos de elementos "display" ya incluidos en HTML; "block" e "inline",
45 |
46 | #### Elementos ***block***
47 |
48 | Un elemento "block" siempre arrancará en una nueva línea, y siempre tomará el ancho máximo del contenedor en el cual se encuentre. ¿Recuerdas que en la lección anterior aprendimos que el elemento `
14 |
15 | # JavaScript V
16 |
17 | #### Clases y prototype
18 |
19 |
20 |
21 |
22 |
23 | ## Clases
24 |
25 | Muchas veces cuando creamos un objeto, estamos creando una plantilla. En lugar de copiar esa plantilla una y otra vez, Javascript nos da acceso a lo que llamamos un constructor o `class`. Las clases comparten gran parte de la misma funcionalidad que los objetos normales, pero también se expande mucho en esa funcionalidad. Las clases son útiles para crear muchos objetos que comparten algunas de las mismas propiedades y métodos (como los usuarios en un sitio web).
26 |
27 | ### Class e instanciación pseudo-clásica
28 |
29 | Si tienes experiencia en un lenguaje orientado a objetos (como Java o C#), probablemente estés familiarizado con el concepto de clases. Si bien Javascript no proporciona un "verdadero" sistema de clases, hay algo muy familiar. En aras de la discusión, llamaremos a nuestros objetos de clase 'clases'. Se instancia de manera pseudo clásica, usando la palabra clave `new`, y puede tomar argumentos.
30 |
31 | En este ejemplo crearemos una clase `Gato`. La convención para las clases consiste en dar un nombre en mayúscula al nombre de todo lo que se pueda instanciar con la palabra clave `new`. Cuando usamos la palabra clave `new`, Javascript hace un gran trabajo detrás de escena para nosotros y crea y devuelve un objeto automáticamente.
32 |
33 | ```js
34 | function Gato(nombre) {
35 | // El nuevo operador crea un objeto, "this"
36 | this.nombre = nombre;
37 | this.maullar = function() {
38 | return 'Mi nombre es ' + this.nombre + ' ... Meow!';
39 | }
40 | // Devuelve el objeto "this"
41 | }
42 |
43 | const sam = new Gato('Sam');
44 | const kitty = new Gato('Kitty');
45 | console.log(sam.maullar()); // 'Mi nombre es Sam ... Meow!'
46 | console.log(kitty.maullar()); // 'Mi nombre es Kitty ... Meow!'
47 |
48 | ```
49 |
50 | ### ***this*** en las clases
51 |
52 | La palabra clave `this` puede comenzar a volverse muy confusa cuando comenzamos a usarla en clases. En el último ejemplo lo usamos en el método de los maullidos. Una buena regla general si no está seguro de a qué se refiere `this`, es observar dónde se llama el método y el objeto a la izquierda del 'punto'. Ese es el objeto al que se refiere `this`.
53 |
54 | ## ***Prototype***
55 |
56 | La creación de funciones es costosa (refiriéndonos a la capacidad de memoria de una computadora) y cada vez que creamos un nuevo objeto de clase con métodos, estamos recreando esos métodos en la memoria. Puede imaginar que si estamos creando miles de objetos de clase a partir de una clase con docenas de métodos, la memoria se acumulará rápidamente (20.000 - 40.000 métodos). Las clases tienen una forma única de establecer un método una vez y dar acceso a cada objeto de esa clase a esos métodos. Esto se llama el `prototype`. Cada clase tiene una propiedad *prototype*, que luego podemos establecer en métodos:
57 |
58 | ```javascript
59 | function Usuario(nombre, github) {
60 | this.nombre = nombre;
61 | this.github = github;
62 | }
63 |
64 | Usuario.prototype.introduccion = function(){
65 | return 'Mi nombre es ' + this.nombre + ', mi usuario de Github es ' + this.github + '.';
66 | }
67 |
68 | let juan = new Usuario('Juan', 'juan.perez');
69 | let antonio = new Usuario('Antonio', 'atralice');
70 |
71 | console.log(juan.introduccion()); // Mi nombre es Juan, mi usuario de Github es juan.perez.
72 | console.log(antonio.introduccion()); // Mi nombre es Antonio, mi usuario de Github es atralice.
73 |
74 | ```
75 |
76 | Los métodos de `prototype` tienen acceso a la palabra clave `this` y, al igual que antes, siempre apuntará al objeto (a la izquierda del punto) que lo está llamando.
77 |
78 | Hasta ahora siempre que teníamos que crear un objeto nuevo declarábamos un object literal, pero vamos a ver que hay otros métodos que nos da el prototype de Object para cumplir esa tarea
79 |
80 | ### Object.create
81 |
82 | El método `create` de los objetos nos permite crear un nuevo objeto a partir de un prototype especificado.
83 |
84 | ``` javascript
85 | // creo un objecto con un objeto vacio como proto
86 | > var obj = Object.create({})
87 |
88 | > obj
89 | < Object {}
90 |
91 | // creo un objeto a partir de un proto de Objeto
92 | > var obj = Object.create(Object.prototype)
93 | // que es lo mismo que crear un objeto vacio literal
94 | > var obj = {}
95 | ```
96 |
97 | ### Object.assign
98 |
99 | El método `assign` de los objetos te permite agregar propiedades a un objeto pasado por parámetro
100 |
101 | ``` javascript
102 | > var obj = {}
103 |
104 | // No hace falta guardar el resultado porque los objetos se pasan por `referencia`
105 | > Object.assign(obj, {nombre:'Emi', apellido:'Chequer'})
106 |
107 | > obj.nombre
108 | < 'Emi'
109 | ```
110 |
111 | ## Herencia Clásica
112 |
113 | En el paradigma de *Programación Orientada a Objetos* un tema muy importante es la *Herencia y Polimorfismo* y de las clases (los vamos a llamar constructores por ahora).
114 |
115 | Cuando hacemos referencia a **Herencia** nos referimos a la capacidad de un constructor de *heredar* propiedades y métodos de otro constructor, así como un Gato es Mamífero antes que Gato, y hereda sus 'propiedades' (nace, se reproduce y muere).
116 |
117 | Cuando hablamos de **Polimorfismo** nos referimos a la capacidad de que objetos distintos puedan responder a un llamado igual de acuerdo a su propia naturaleza.
118 |
119 | ## Herencia en JavaScript
120 |
121 | En JS a diferencia de la herencia clásica nos manejamos con prototipos, que van a tomar los métodos pasados por sus 'padres' mediante la `Prototype Chain`.
122 |
123 | Cuando generamos un arreglo nuevo podemos acceder a métodos como `map` o `slice` gracias a que los heredamos del Objeto `Array` que esta vinculado en la propiedad `__proto__` y es el siguiente en el `Prototype Chain`.
124 |
125 | Nosotros también podemos generar nuestros propios constructores que de los cuales heredar. Creemos un constructor de el cual pueda haber variantes.
126 |
127 | ``` javascript
128 | > function Persona(nombre,apellido,ciudad) {
129 | this.nombre = nombre;
130 | this.apellido = apellido;
131 | this.ciudad = ciudad;
132 | }
133 |
134 | > Persona.prototype.saludar = function() {
135 | console.log('Soy '+this.nombre+' de '+this.ciudad);
136 | }
137 |
138 | > var Emi = new Persona('Emi', 'Chequer', 'Buenos Aires');
139 |
140 | > Emi.saludar()
141 | < 'Soy Emi de Buenos Aires'
142 | ```
143 |
144 | Ahora todo Alumno de Henry antes de Alumno es una Persona, asique podríamos decir que un Alumno hereda las propiedades de ser Persona.
145 |
146 | ``` javascript
147 | > function Alumno(nombre,apellido,ciudad,curso) {
148 | // podría copiar las mismas propiedades de Persona acá adentro
149 | this.nombre = nombre;
150 | this.apellido = apellido;
151 | this.ciudad = ciudad;
152 | this.curso = curso
153 | }
154 | ```
155 |
156 | ### Constructores Anidados
157 |
158 | Pero en este caso estaríamos repitiendo código, y si en un futuro quisiera cambiar una propiedad tendría que hacerlo en ambos constructores.
159 | Descartemos esta opción.
160 |
161 | ``` javascript
162 | // lo que nosotros queremos es poder reutilizar las propiedades de persona,
163 | > function Alumno(nombre, apellido, ciudad, curso) {
164 | // usemos nuestro constructor Persona dentro del de Alumno
165 | Persona.call(this, nombre, apellido, ciudad);
166 | // vamos a necesitar el call porque queremos que las propiedades de persona, queden en bajo el objeto que va a devolver Alumno, y no uno nuevo del constructor Persona.
167 | // luego le paso los valores que quiero que reciba el constructor de Alumno
168 |
169 | // finalmente le agrego los puntos propios de Alumno
170 | this.curso = curso;
171 | this.empresa = 'Soy Henry';
172 | }
173 |
174 | > var toni = new Alumno('Toni', 'Tralice', 'Tucuman', 'Web Full Stack')
175 |
176 | // Ahora si tenemos nuestra instancia creada a partir de ambos constructores
177 | > toni.curso
178 | < Web Full Stack
179 |
180 | > toni.apellido
181 | < Tralice
182 |
183 | > toni.saludar()
184 | < Uncaught TypeError: toni.saludar is not a 'function'
185 | // que paso?
186 | ```
187 |
188 | Como podemos ver los métodos de *Personas* no fueron pasados a nuestros *Alumnos*. Veamos un poco el porqué.
189 |
190 | El constructor del `__proto__` esta ligado a Alumno y luego al `Object Object` de JS. Pero el método `saludar` esta en el objeto `prototype` de Personas... , y esta perfecto, así es como debería funcionar, las instancias acceden al `__proto__` que fue vinculado por el constructor para ver que métodos tienen. Nuestro problema es que al llamar a Persona con `call` en vez de con el método `new` no se esta haciendo ese vinculo en el que `Persona.prototype` se mete en nuestro `Prototype Chain`, y entonces las instancias de Alumno no tienen acceso a los métodos de Persona
191 |
192 | Vamos a solucionar ese problema agregando al prototipo los métodos de Persona, para esto vamos a usar el método `Object.create`.
193 |
194 | ``` javascript
195 | // usamos `Object.create` porque este guardaba el argumento pasado como `__proto__` del objeto a retornar
196 | > Alumno.prototype = Object.create(Persona.prototype)
197 |
198 | // si recuerdan el objeto prototype siempre tenia una propiedad constructor que hacia referencia a la función en si, con la asignación que hicimos arriba lo pisamos, por lo que deberíamos volver a agregarlo.
199 | > Alumno.prototype.constructor = Alumno
200 |
201 | > var Franco = new Alumno('Franco','Etcheverri','Montevideo','Bootcamp')
202 |
203 | > Franco.saludar()
204 | < 'Soy Franco de Montevideo'
205 | ```
206 |
207 | ## Recursos adicionales
208 |
209 | * [MDN: Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
210 | * [MDN: Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype)
211 |
212 | ## Homework
213 |
214 | Completa la tarea descrita en el archivo [README](https://github.com/soyHenry/Prep-Course/tree/main/06-JS-V/homework)
215 |
216 |
227 |
228 | ---
229 |
230 | #### Si tienes dudas sobre este tema, puedes consultarlas en el canal ***06_js-v*** de Slack
231 |
--------------------------------------------------------------------------------
12 |
13 |
--------------------------------------------------------------------------------
/_src/data/styles/code.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/code.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/fonts.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/fonts.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/footer.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/footer.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/header.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/header.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/lesson.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/lesson.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/main.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/main.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/topbar.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/topbar.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/09-CSS-Positioning/demo/display.css:
--------------------------------------------------------------------------------
1 | .red {
2 | color: red;
3 | margin: 10px;
4 | }
5 | div {
6 | margin: 10px;
7 | border: black 1px solid;
8 | /*display: inline;*/
9 | }
10 |
11 | /*.centrado {
12 | width: 100px;
13 | margin: 0 auto;
14 | }*/
15 |
16 | /*Scrollbar*/
17 | .centrado {
18 | max-width: 1000px;
19 | margin: 0 auto;
20 | }
--------------------------------------------------------------------------------
/_src/data/styles/sidebar.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/sidebar.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/lessonIntro.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/lessonIntro.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/_src/data/styles/responsive.js:
--------------------------------------------------------------------------------
1 | const Cache = require('@11ty/eleventy-cache-assets')
2 |
3 | module.exports = async function () {
4 | const url = 'https://d31uz8lwfmyn8g.cloudfront.net/Styles/responsive.css'
5 | const style = await Cache(url, {
6 | duration: '1d',
7 | type: 'txt',
8 | directory: '_cache'
9 | })
10 | return style
11 | }
12 |
--------------------------------------------------------------------------------
/sitemap.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: '/sitemap.xml'
3 | layout: 'empty'
4 | eleventyExcludeFromCollections: true
5 | ---
6 |
7 | 
8 | 
49 | 
66 | Lecciones de posicionamiento
67 |