Una parte importante de cualquier lenguaje de programación. La mayoría de las veces necesitamos hacer varias operaciones en arreglos, de ahí este artículo.

En este artículo, mostraremos varios métodos para manipular arreglos en JavaScript

¿Qué son las matrices en JavaScript?

Antes de continuar, debemos comprender qué significan realmente los arreglos.

En JavaScript, un arreglo es una variable que se utiliza para almacenar diferentes tipos de datos. Básicamente almacena diferentes elementos en una caja y luego se puede evaluar con la variable.

Declarando un arreglo:

let miCaja = [];   // Declaración inicial de arreglo en JS

Los arreglos pueden contener múltiples tipos de datos

let miCaja = ['hola', 1, 2, 3, true, 'hey'];

Los arreglos se pueden manipular usando varias acciones conocidas como métodos. Algunos de estos métodos nos permiten agregar, eliminar, modificar y hacer mucho más en los arreglos.

Te estaremos mostrando algunos en este artículo, continuemos :)

NB: utilizamos funciones de flecha en esta publicación. Si no sabes lo que esto significa, puedes leerlo en español dando clic aquí o acá. La función de flecha es una característica de ES6.

toString()

El método JavaScript toString() convierte un arreglo en una cadena separada por una coma.

let colores = ['verde', 'amarillo', 'azul'];

console.log(colores.toString()); // verde,amarillo,azul

join()

El método JavaScript join() combina todos los elementos del arreglo en una cadena.

Es similar al método toString(), pero aquí se puede especificar el separador en lugar de la coma predeterminada.

let colores = ['verde', 'amarillo', 'azul'];

console.log(colores.join('-')); // verde-amarillo-azul

concat

Este método combina dos arreglos o agrega más elementos a un arreglo y luego devuelve uno nuevo.

let primerosNumeros = [1, 2, 3];
let segundosNumeros = [4, 5, 6];
let combinado = primerosNumeros.concat(segundosNumeros);
console.log(combinado); // [1, 2, 3, 4, 5, 6]

push()

Este método agrega elementos al final de un arreglo y cambia el arreglo original.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.push('safari', 'opera mini');
console.log(buscadores); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

pop()

Este método elimina el último elemento de un arreglo y lo devuelve.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.pop(); // "edge"
console.log(buscadores); // ["chrome", "firefox"]

shift()

Este método elimina el primer elemento de un arreglo y lo devuelve.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.shift(); // "chrome"
console.log(buscadores); // ["firefox", "edge"]

unshift()

Este método agrega un elemento(s) al comienzo de un arreglo y cambia el arreglo original.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.unshift('safari');
console.log(buscadores); //  ["safari", "chrome", "firefox", "edge"]

También podemos agregar varios elementos a la vez

splice()

Este método cambia un arreglo agregando, eliminando e insertando elementos.

La sintaxis es:

arreglo.splice(índice[, cantidadDeElementosPorRemover, elemento1, ..., elementoN])

• índice aquí está el punto de partida para eliminar elementos en la matriz
• cantidadDeElementosPorRemover es el número de elementos que se eliminarán de ese índice
• elemento1, …, elementoN es el (los) elemento(s) a agregar

Quitar elementos

después de ejecutar splice() , devuelve el arreglo con los elementos eliminados y los elimina de el arreglo original.

let colores = ["verde", "amarillo", "azul", "púrpura"];
const menosColores = colores.splice(0, 3);

console.log(colores, menosColores); 
// ["púrpura"]
// ["verde", "amarillo", "azul"]

NB: cantidadDeElementosPorRemover no incluye el último índice en el rango.

Si no se declara el segundo parámetro, todos los elementos a partir del índice dado se eliminarán del arreglo.

let colores = ['verde', 'amarillo', 'azul', 'púrpura'];
const menosColores = colores.splice(3);

console.log(colores, menosColores); 
// ["verde", "amarillo", "azul"]
// ['púrpura']

En el siguiente ejemplo, eliminaremos 3 elementos del arreglo y los reemplazaremos con más elementos:

let agenda = ['Yo', 'tengo', 'una', 'reunión', 'mañana'];
// elimina los 4 primeros elementos y los reemplaza con otros

agenda.splice(0, 4, 'nosotros', 'vamos', 'a', 'nadar');

console.log(agenda); 
// ['nosotros', 'vamos', 'a', 'nadar', 'mañana']

Añadiendo elementos

Para agregar elementos, debemos establecer deleteCount en cero

let agenda = ['Yo', 'tengo', 'una', 'reunión', 'con'];
// añade 3 elementos al arreglo

agenda.splice(5, 0, 'algunos', 'clientes', 'mañana');

console.log(agenda); 
// ['Yo', 'tengo', 'una', 'reunión', 'con', 'algunos', 'clientes', 'mañana']

slice()

Este método es similar a splice() pero muy diferente. Devuelve subarreglos en lugar de subcadenas

Este método copia una parte dada de un arreglo, y devuelve esa parte copiada como un nuevo arreglo. No cambia el arreglo original.

La sintaxis es:

arreglo.slice(inicio, fin)

Un ejemplo básico:

let numeros = [1, 2, 3, 4]

console.log(numeros.slice(0, 3)) // regresa [1, 2, 3]

console.log(numeros) // regresa el array original

La mejor manera de usar slice() es asignarlo a una nueva variable.

let mensaje = 'Felicitaciones en tu día'
const msjCorto = mensaje.slice(0, 14) + '!';

console.log(msjCorto) // returns "Felicitaciones!"

split()

Este método se utiliza para cadenas. Divide una cadena en subcadenas y las devuelve como un arreglo.

Aquí la sintaxis:

cadena.split(separador, límite)

• El separador define cómo dividir una cadena ya sea por una coma
• El límite determina el número de separaciones a realizar

let primerNombre = 'Bolaji';

// Regresa la cadena dentro de un arreglo
primerNombre.split() // ["Bolaji"]

otro ejemplo:

let primerNombre = 'Hola, mi nombre es Bolaji, soy un dev.';

primerNombre.split(',', 2); // ["Hola", " mi nombre es Bolaji"]

NB: Si declaramos con una cadena vacía, como primerNombre.split(''), entonces cada elemento de la cadena será dividido como subcadenas:

let primerNombre = 'Bolaji';

primerNombre.split('') // ["B", "o", "l", "a", "j", "i"]

indexOf()

Este método busca un elemento en un arreglo y devuelve el índice donde se encontró; de lo contrario, devuelve -1

let frutas = ['manzana', 'naranja', false, 3]

frutas.indexOf('naranja'); // devuelve 1
frutas.indexOf(3); // devuelve 3
frutas.indexOf(null); // devuelve -1 (no fue encontrado)

lastIndexOf()

Este método funciona de la misma manera que indexOf() excepto que funciona de derecha a izquierda. Devuelve el último índice donde se encontró el elemento.

let frutas = ['manzana', 'naranja', false, 3, 'manzana']

frutas.lastIndexOf('manzana'); // devuelve 4

filter()

Este método crea un nuevo arreglo si los elementos de una matriz pasan una determinada condición.

La sintaxis es:

let resultados = arreglo.filter(function(elemento, índice, arreglo) {
  // devuelve true si el elemento pasa el filtro
});

Ejemplo:

Comprueba a los usuarios de Nigeria.

const codigoPais = ['+234', '+144', '+233', '+234'];

const nigeriano = codigoPais.filter( codigo => codigo === '+234');

console.log(nigeriano); // ["+234", "+234"]

map()

Este método crea un nuevo arreglo manipulando los valores de un arreglo.

Ejemplo:

Muestra los nombres de usuario en una página. (Visualización básica de una lista de amigos)

const usuarios = ['tina', 'danny', 'mark', 'bolaji'];
const lista = usuarios.map(elem => {
	return '<li>' + elem + '</li>';
});

const render = '<ul>' + lista.join('') + '</ul>';

document.write(render);

otro ejemplo:

// agrega el signo de dólar a los números
const numeros = [10, 3, 4, 6];
const dolares = numeros.map( numero => '$' + numero);

console.log(dolares); // ['$10', '$3', '$4', '$6'];

reduce()

Este método es bueno para calcular totales..

reduce() se utiliza para calcular un valor único basado en un arreglo.

let valor = arreglo.reduce(function(acumulador, valorActual, índice, arreglo) {
  // ...
}, valorInicial);

ejemplo:

Para recorrer un arreglo y sumar todos los números de la matriz, podemos usar el bucle for of.

const numeros = [100, 300, 500, 70];
let suma = 0;

for (let n of numeros) {
	suma += n;
}

console.log(suma);

He aquí cómo hacer lo mismo con reduce()

const numeros = [100, 300, 500, 70];
const suma = numeros.reduce((acumulador, valorActual) =>
	acumulador + valorActual
, 0);

console.log(suma); // 970

Si omitimos valorInicial, el total comenzará por defecto desde el primer elemento del arreglo.

const numeros = [100, 300, 500, 70];
const suma = numeros.reduce((acumulador, valorActual) => acumulador + valorActual);

console.log(suma); // todavía devuelve 970

El siguiente fragmento en inglés muestra cómo funciona el método reduce() con los cuatro argumentos.

fuente: MDN Docs

Puedes encontrar más información sobre el método reduce() y varias formas de usarlo aquí(en inglés) y aquí.

forEach()

Este método es bueno para iterar a través de un arreglo. Aplica una función en todos los elementos de dicho arreglo.

const colores = ['verde', 'amarillo', 'azul'];

colores.forEach((elemento, índice) => console.log(elemento, índice));
// devuelve el índice y todos los elementos del arreglo
// "verde" 0
// "amarillo" 1
// "azul" 2

la iteración se puede hacer sin pasar el argumento de índice

const colores = ['verde', 'amarillo', 'azul'];

colores.forEach((elemento) => console.log(elemento));
// devuelve cada elemento del arreglo
// "verde"
// "amarillo"
// "azul"

every()

Este método verifica si todos los elementos en un arreglo pasan la condición especificada y devuelve true si pasa, de lo contrario, false.

comprueba si todos los números son positivos

const numeros = [1, -1, 2, 3];
let todosPositivos = numeros.every((valor) => {
	return valor >= 0;
})

console.log(todosPositivos); // devolvería false

some()

Este método verifica si al menos un elemento (uno o más) en un arreglo pasa la condición especificada y devuelve true si pasa, de lo contrario, devuelve false.

comprueba si al menos un número es positivo

const numeros = [1, -1, 2, 3];
let alMenosUnoPositivo = numeros.every((valor) => {
	return valor >= 0;
})

console.log(alMenosUnoPositivo); // devolvería true

includes()

Este método verifica si un arreglo contiene un determinado elemento. Es similar a .some(), pero en lugar de buscar una condición específica para pasar, verifica si el arreglo contiene un elemento específico.

let usuarios = ['paddy', 'zaddy', 'faddy', 'baddy'];
usuarios.includes('baddy'); // devuelve true

Si el elemento no se encuentra, regresa false

Hay más métodos para arreglos, estos son solo algunos de ellos. Además, hay toneladas de otras acciones que se pueden realizar en los arreglos, intenta consultar los documentos de MDN aquí para obtener información más detallada

Resumen

• toString() convierte un arreglo en una cadena separada por una coma.
• join() combina todos los elementos de un arreglo en una cadena.
• concat() combina dos arreglos juntos o agrega más elementos a un arreglo y luego devuelve un nuevo arreglo.
• push() agrega elementos al final de un arreglo y cambia el arreglo original.
• pop() elimina el último elemento de un arreglo y lo devuelve
• shift() elimina el primer elemento de un arreglo y lo devuelve
• unshift() agrega un elemento(s) al comienzo de un arreglo y cambia el arreglo original.
• splice() cambia un arreglo, agregando, eliminando e insertando elementos.
• slice() copia una parte dada de un arreglo y devuelve esa parte copiada como un nuevo arreglo. No cambia el arreglo original.
• split() divide una cadena en subcadenas y las devuelve como un arreglo.
• indexOf() busca un elemento en un arreglo y devuelve el índice donde se encontró, de lo contrario, devuelve -1
• lastIndexOf() busca un elemento de derecha a izquierda en un arreglo y devuelve el último índice donde se encontró el elemento.
• filter() crea un nuevo arreglo si los elementos de un arreglo pasan una determinada condición.
• map() crea un nuevo arreglo manipulando los valores en un arreglo.
• reduce() calcula un valor único basado en un arreglo.
• forEach() itera a través de un arreglo, aplica una función en todos los elementos del arreglo
• every() comprueba si todos los elementos en un arreglo pasan la condición especificada y devuelve true si pasa, de lo contrario false.
• some() comprueba si un elemento (uno o más) en un arreglo pasa la condición especificada y devuelve true si pasa, de lo contrario false.
• includes() comprueba si un arreglo contiene un determinado elemento.

Vamos a finalizar aquí; Los arreglos son poderosos y el uso de métodos para manipularlos crea los algoritmos que utilizan las aplicaciones del mundo real.

Hagamos una pequeña función, una que convierta el título de una publicación en un url slug.

URL slug es la dirección exacta de una página o publicación específica en tu sitio web.

Cuando escribimos un artículo en freecodecamp News o en cualquier otra plataforma de escritura, el título de su publicación se convierte automáticamente en un slug sin espacios en blanco, los caracteres en minúsculas y cada palabra del título separada por un guion.

Aquí hay una función básica que hace eso usando algunos de los métodos que aprendimos hace un momento.

const url = 'https://bolajiayodeji.com/'

const urlSlug = (titulo) => {

	let urlPublicacion = titulo.toLowerCase().split(' ');
  
	return url + urlPublicacion.join('-')
}

let titulo = 'Introducción a Chrome Lighthouse'

console.log(urlSlug(titulo));
// https://bolajiayodeji.com/introducción-a-chrome-lighthouse

en urlPublicacion, convertimos la cadena a minúsculas y luego usamos el método split() para convertir la cadena en subcadenas y devolverla en un arreglo

["introducción", "a", "chrome", "lighthouse"]

Unimos en una cadena a urlPublicacion con guiones usando nuevamente .join('-') y estamos listos para devolver la url completa.

return url + urlPublicacion.join('-')

// urlPublicacion.join('-') -> introducción-a-chrome-lighthouse

Eso es todo, bastante simple, ¿verdad? :)

Si recién estás comenzando con JavaScript y sabes inglés, deberías consultar este repositorio aquí, Bolaji está compilando una lista de fragmentos básicos de JavaScript que van desde:

• Arreglos
• Flujo de control
• Funciones
• Objetos
• Operadores

¡No te olvides compartir! :)
PD: Este artículo fue publicado por originalmente en inglés en el blog de Bolaji

En este artículo, te ayudaremos a comprender la generación/propagación de eventos (event bubbling) y la captura de eventos (event catching) como un profesional. Este recurso se creó para ayudarte a comprender la propagación de eventos y cómo funciona en JavaScript y React de una manera clara y comprensible. ❤

Una vez que hayas pasado por esta introducción completa a la generación de eventos y al almacenamiento en caché de eventos, deberías poder comenzar a aplicar lo que has aprendido aquí en tus proyectos de inmediato.

Esto es lo que aprenderás:

• ✨ ¿Qué es la delegación de eventos?
• ✨ ¿Qué es la propagación de eventos?
• ✨ ¿Cómo ocurre la propagación de eventos en JavaScript?
• ✨ ¿Cómo ocurre la propagación de eventos en React?
• ✨ ¿Cómo detener la propagación de eventos en tus componentes?
• ✨ Event.target vs Event.currentTarget
• ✨ Orden de activación de eventos actualizada y parámetro useCapture en JavaScript
• ✨ ¿Qué eventos no propagan y cómo se manejan?
• ✨ Event Listeners en React Versión 16 y antes de VS Versión 17+
• ✨ Caso Borde Especial: ¿Qué pasa si necesitas que un elemento padre externo dispare también?

¿Qué es la delegación de eventos?

En pocas palabras, la delegación de eventos es simplemente una poderosa técnica de JavaScript que permite un manejo de eventos más eficiente.

? Pros (más tarde)

Esta técnica generalmente se considera eficaz, ya que solo se utiliza una función de escucha de eventos en el padre de nivel superior en lugar de una para cada elemento hijo.

? Contras (más tarde)

Una vez que se llama al evento de un elemento secundario interno, todos los elementos arriba / abajo también serán llamados (propagación / captura). Para evitar que esto suceda, se debe llamar a un método en el objeto event.

La propagación y la captura (explicado más adelante) nos permiten implementar el patrón de delegación de eventos.

¿Qué es la propagación de eventos?

Supongamos que conocemos a una chica llamada Molly, que tampoco es una persona real, sino que es, ? redoble de tambores, un componente de React. Wow - qué conveniencia.

Tiene un div padre único con un controlador de eventos onClick que, cuando se hace clic, llama a todos a la mesa para comer su comida.

Dentro de este div principal hay varios elementos tipo button que, cuando se hace clic, crean un elemento de comida simulado (es decir, el de console.log).

import React, { Component } from "react";

class Molly extends Component {
    llamarFamiliaAComer() {
        console.log("¡Familia!¡La comida está lista!");
    }

    cocinarHuevos() {
        console.log("Molly está cocinando huevos esponjosos...");
    }

    hacerArroz() {
        console.log("Molly está haciendo un delicioso arroz jazmín...");
    }

    mezclarPollo() {
        console.log("¡Molly está mezclando pollo con una deliciosa salsa picante!");
    }

    render() {
        return (
            <div className="soy-un-padre" onClick={this.llamarFamiliaAComer}>
                <button className="soy-un-hijo" onClick={this.cocinarHuevos}>Cocinar Huevos</button>
                <button className="soy-un-hijo" onClick={this.hacerArroz}>Hacer Arroz</button>
                <button className="soy-un-hijo" onClick={this.mezclarPollo}>Mezclar Pollo</button>
            </div>
        );
    }

}

export default Molly;

Y esto es lo que sucede cuando haces clic en cada uno(en inglés):

Aquí hay una pequeña versión en codepen si deseas seguir este camino:

¡No te olvides de abrir la consola para ver los resultados!

Como puedes ver, esto le sucede a todos los hijos:

1. Primero, se activa el controlador de eventos del button.
2. En segundo lugar, se activa el controlador de eventos del div padre.

En la mayoría de los casos, probablemente desees que solo se llame al controlador de eventos del botón cuando haga clic en él. ¡Pero como puedes ver, el evento de los padres también se activa ...!?

Esto se llama ✨Propagación de eventos✨ (Event Bubbling).
En las próximas secciones, discutiremos qué diablos está sucediendo y cómo podemos solucionarlo.

¿Cómo ocurre la propagación de eventos en JavaScript?

¿Por qué existe la propagación de eventos?

Una de las intenciones de JavaScript con la creación del patrón de propagación de eventos era facilitar la captura de eventos de una fuente, el elemento padre, en lugar de configurar un controlador de eventos en cada elemento secundario interno.

Orden de activación de propagación de eventos

Hay tres fases por las que pasa la propagación de eventos

1. ? Fase de captura: es la primera fase en la que se activa un evento. Este evento "captura" o se propaga primero a través del evento padre, que es el objeto de window, luego el document, luego el html y luego los demás elementos internos. Baja hasta que llega al event.target (en lo que hiciste clic / el evento desencadenado).
2. ? Fase objetiva: la segunda fase es cuando llegamos al event.target . Por ejemplo, cuando un usuario hace clic en un botón, este es el elemento actual de botón.
3. ? Fase de propagación: la tercera fase. Este evento comienza desde event.target y se propaga hasta que llega al elemento padre superior nuevamente (aunque el evento del elemento padre no se vuelve a llamar).

Ten en cuenta que, si bien hay 3 fases principales, la fase objetiva en realidad no se maneja por separado. Los controladores de eventos en las fases de Captura y Generación se activan aquí.

También existe técnicamente otra fase denominada "Fase Ninguna", en la que no se está produciendo ninguna fase de eventos. Puedes acceder a la fase en la que se encuentra un elemento a través de event.eventPhase.

Teniendo en cuenta lo que acabas de aprender, observa el siguiente ejemplo.

Supongamos que un usuario hizo clic en un elemento td en una table. ¿Cómo ocurriría la propagación de eventos aquí? ? Tómate un momento para pensarlo.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  </head>
  <body>
    <div id="root">
      <table>
        <tbody>
          <tr>
            <td>Shady Grove</td>
            <td>Aeolian</td>
          </tr>
          <tr>
            <td>Over the River, Charlie</td>
            <td>Dorian</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Esto es lo que realmente está sucediendo, en el mismo orden que acabamos de mencionar:

Ten en cuenta que el DefaultView, sería el objeto Window.

¿Cómo ocurre la propagación de eventos en React?

React, por otro lado, ha creado algo llamado SyntheticEvent.

Estos son simplemente envoltorios para el objeto event del navegador. El caso de uso básico es similar e incluye métodos como stopPropagation y preventDefault (que discutiremos más adelante). El mayor beneficio es que funcionan de la misma manera en todos los navegadores.

React no adjunta controladores de eventos a los nodos, sino a la raíz del documento. Cuando se activa un evento, React llama primero al elemento adecuado (es decir, la fase objetiva, elemento en el que hiciste clic) y luego comienza a generar.

¿Por qué React hace esto en lugar de simplemente manejar eventos de manera similar al DOM nativo?

Consistencia del navegador

Es importante que los eventos funcionen igual en todos los navegadores. React creó eventos sintéticos para asegurarse de que las propiedades sigan siendo consistentes en diferentes navegadores y plataformas.

No querrás crear una aplicación cuando un evento funciona en un navegador, pero luego un usuario en un navegador diferente usa tu aplicación y ya no funciona; esa es una mala experiencia de usuario.

Desencadena desde el elemento que realmente quieres desencadenar

Donde se establece el controlador de eventos es donde la intención es llamarlo, en ese elemento en particular y en ningún otro lugar (estamos ignorando temporalmente algunos casos extremos aquí, por supuesto, para comprender primero el concepto básico).

Ese evento sabe más sobre el elemento en el que está configurado, por lo que debería ser el primero en activarse. Después de eso, a medida que la Propagación de Eventos asciende, cada elemento de arriba sabe cada vez menos.

Tomemos, por ejemplo, nuestro ejemplo anterior con nuestro componente Molly. Sabemos que la extrañas, así que aquí está de nuevo:

? ¿Notaste que cuando se hace clic en un botón, el controlador de eventos de ese botón se llama primero y solo entonces se llama al controlador de eventos principal?

Nunca sucede a la inversa (es decir, la fase de captura nunca se activa).
Esto se debe a que el Evento Sintético de React solo usa la fase de propagación(la fase objetivo se incluye aquí). Esto tiene sentido si la intención es enfocarse en el event.target (el botón en este ejemplo) que activó el evento primero.

Ten en cuenta que React solo está simulando la fase de captura y propagación nativa de JavaScript con estos Eventos Sintéticos, por lo que puedes notar algunas diferencias a medida que pasa el tiempo (se explica más adelante en este artículo).

⚠️ El Evento Sintético no se centra de forma nativa en la fase de captura a menos que lo establezca específicamente. Para que la Fase de Captura se desencadene, simplemente configura el controlador de eventos onClick del div padre a onClickCapture:

import React, { Component } from "react";

class Molly extends Component {
    ...

    render() {
        return (
            <div className="soy-un-padre" onClickCapture={this.llamarFamiliaAComer}>
                <button className="soy-un-hijo" onClick={this.cocinarHuevos}>Cocinar Huevos</button>
                <button className="soy-un-hijo" onClick={this.hacerArroz}>Hacer Arroz</button>
                <button className="soy-un-hijo" onClick={this.mezclarPollo}>Mezclar Pollo</button>
            </div>
        );
    }

}

export default Molly;

Ten en cuenta que en lugar de la fase de propagación, la fase de captura se activa a continuación

⚠️Por último, queríamos mencionar que en React Versión 16 y versiones anteriores, cuando se activa la fase de propagación en SyntheticEvents, actúa de manera similar a la fase de propagación nativa de JavaScript al adjuntar controladores de eventos hasta el Document.

Ahora, en React Versión 17+, los controladores de eventos solo alcanzan el elemento root

¿Cómo detener la propagación de eventos en tus componentes?

Ahora que comprendes los conceptos básicos de la Propagación de Eventos, la Generación de Eventos y la Captura de Eventos, analicemos cómo solucionar nuestro problema inicial.

Tienes un botón (o algún otro elemento) y deseas que solo se active el controlador de eventos del botón; no se debe activar ningún otro padre.

? Entonces, ¿cómo podemos evitar que esto suceda? Tienes pocas opciones:

event.stopPropagation()

Esto evitará que se active el evento de cualquier componente principal. Para usar esto:

1. Asegúrate de pasar el objeto de event como parámetro.
2. Utiliza el método stopPropagation en el objeto de evento sobre tu código dentro de tu función de controlador de eventos.

Ten en cuenta que cambiamos del onClickCapture al onClick del div padre nuevamente

import React, { Component } from "react";

class Molly extends Component {
    llamarFamiliaAComer() {
        console.log("¡Familia!¡La comida está lista!");
    }

    cocinarHuevos() {
        event.stopPropagation(); // USADO AQUÍ!
        console.log("Molly está cocinando huevos esponjosos...");
    }

    hacerArroz() {
        console.log("Molly está haciendo un delicioso arroz jazmín...");
    }

    mezclarPollo() {
        console.log("¡Molly está mezclando pollo con una deliciosa salsa picante!");
    }

    render() {
        return (
            <div className="soy-un-padre" onClick={this.llamarFamiliaAComer}>
                <button className="soy-un-hijo" onClick={this.cocinarHuevos}>Cocinar Huevos</button>
                <button className="soy-un-hijo" onClick={this.hacerArroz}>Hacer Arroz</button>
                <button className="soy-un-hijo" onClick={this.mezclarPollo}>Mezclar Pollo</button>
            </div>
        );
    }

}

export default Molly;

Arriba solo agregamos stopPropagation a la función cocinarHuevos. Entonces, cuando se hace clic en el botón Cocinar Huevos, solo se activa el evento solo para ese elemento.

event.stopImmediatePropagation()

Supongamos que tienes varios eventos en el mismo elemento. Si usas event.stopPropagation(), asegúrate de que detendrá la activación de cualquier evento principal. Pero si tienes varios eventos en el mismo elemento, todos se dispararán.

Para evitar que se activen otros eventos en el mismo elemento, utiliza event.stopImmediatePropagation() en su lugar. Evitará que se activen los eventos de ambos padres y del mismo elemento.

Si te encuentras en una situación en la que event.stopPropagation() no te funciona, prueba event.stopImmediatePropagation() en su lugar.

Nota: De vez en cuando, puede haber una biblioteca de terceros en tu aplicación que hace que la primera no funcione. Por supuesto, sería una buena idea ver qué causó que este último funcionara, pero no el primero, y podríamos darte otra pista para solucionar el problema.

event.preventDefault()

Dependiendo del elemento y controlador de eventos, es posible que desees utilizar esto.

Por ejemplo:
Si tienes un formulario y no deseas que la página se actualice cuando se envíe. Estás configurando tu propia funcionalidad de ruta y no quieres que la página se actualice.

Event.target vs Event.currentTarget

Comprender la diferencia entre estas dos propiedades de destino en el objeto event realmente puede ahorrarte un dolor de cabeza en el futuro.

Recuerda: el elemento que desencadena el evento no siempre es el mismo que el elemento que tiene adjunto el detector de eventos(listener).

? ¿Confundido? No te preocupes, repasemos esto juntos.

Tomemos nuestro ejemplo anterior y hagamos un console.log tanto el event.target como el event.currentTarget dentro del controlador de eventos del div padre.

import React, { Component } from "react";

class Molly extends Component {
    //CHEQUEANDO AL PADRE
    llamarFamiliaAComer() {
        console.log("¡Familia!¡La comida está lista!");

        console.log("event.target:", event.target);
        console.log("event.currentTarget", event.currentTarget);
    }
    
    ...

    render() {
        return (
            <div className="soy-un-padre" onClick={this.llamarFamiliaAComer}>
                <button className="soy-un-hijo" onClick={this.cocinarHuevos}>Cocinar Huevos</button>
                <button className="soy-un-hijo" onClick={this.hacerArroz}>Hacer Arroz</button>
                <button className="soy-un-hijo" onClick={this.mezclarPollo}>Mezclar Pollo</button>
            </div>
        );
    }

}

export default Molly;

Ahora, cuando hacemos clic en el botón cocinarHuevos, ¿qué vemos?

Observa que el controlador de eventos del div padre es consciente de que el target (objetivo) previsto es el botón.

Pero como estamos comprobando dentro del controlador de eventos del padre, vemos que el div padre es el currentTarget(objetivo actual).

Ok, veamos más sobre esto.

¿Qué pasa si tomamos los mismos console.logs y verificamos dentro del controlador de eventos del botón actual?

? ¿Qué veríamos ahora?

import React, { Component } from "react";

class Molly extends Component {
    llamarFamiliaAComer() {
        console.log("¡Familia!¡La comida está lista!");
    }
    //CHEQUEANDO AL HIJO
    cocinarHuevos() {
        console.log("Molly está cocinando huevos esponjosos...");

        console.log("event.target:", event.target);
        console.log("event.currentTarget", event.currentTarget);
    }
    ...

    render() {
        return (
            <div className="soy-un-padre" onClick={this.llamarFamiliaAComer}>
                <button className="soy-un-hijo" onClick={this.cocinarHuevos}>Cocinar Huevos</button>
                <button className="soy-un-hijo" onClick={this.hacerArroz}>Hacer Arroz</button>
                <button className="soy-un-hijo" onClick={this.mezclarPollo}>Mezclar Pollo</button>
            </div>
        );
    }

}

export default Molly;

Ten en cuenta que, dado que ahora estamos comprobando el interior del controlador de eventos del botón, vemos que el currentTarget ha cambiado al botón.

Y, por supuesto, dado que estamos haciendo clic en el botón, ya sabemos que el target será el botón.

Teniendo en cuenta lo que acabas de aprender, ahora sabes que:

• event.target es el elemento más profundamente anidado que causó el evento.
• event.currentTarget es el elemento que escucha el evento (donde se adjunta el detector de eventos(listener)).

Orden de activación de eventos actualizada y parámetro useCapture en JavaScript

En JavaScript, EventTarget.addEventListener se usará para agregar un controlador a un evento.

Cuando echamos un vistazo a los documentos de MDN, vemos que puedes configurar la capture opcionalmente dentro del objeto options o mediante el parámetro useCapture (ahora también opcional), que hace lo mismo.

// Ahora puedes hacer esto:
tuElemento.addEventListener(tipo, detector, { capture: true });

// o esto:
tuElemento.addEventListener(tipo, detector, useCapture: true);

⚠️ La razón de esto es que, a menos que lo establezcamos específicamente, la Fase de Captura se ignorará y, en cambio, solo la Fase de Propagación(después de la Fase Objetivo) se activará de forma nativa en JavaScript. MDN también lo explica:

Para los detectores de eventos adjuntos al objetivo del evento, el evento está en la Fase de Objetivo, en lugar de las Fases de Captura y Propagación. Los detectores de eventos en la Fase de "Captura" se llaman antes que los detectores de eventos en cualquier fase de no captura.

Ten en cuenta que el parámetro useCapture no siempre ha sido opcional en los navegadores más antiguos. Asegúrate de consultar caniuse.com antes de implementarlo.

¿Qué eventos no propagan y cómo se manejan?

Aunque la mayoría de los eventos propagan, ¿sabías que varios no lo hacen?

A continuación, se muestran algunos ejemplos en JavaScript nativo:

• blur (focusout es el mismo pero en realidad propagga).
• focus (focusin es el mismo pero en realidad propaga).
• mouseleave (mouseout es el mismo pero en realidad propaga).
• mouseenter (mouseover es el mismo pero en realidad propaga).
• load, unload, abort, error, beforeunload.

⚠️ Los eventos que propagan se establecen como true en la opción de bubbles cuando se crea el evento, aunque todavía pasan por la Fase de Captura.

Event Listeners en React Versión 16 y antes de VS Versión 17+

Como aprendimos, SyntheticEvent de React no siempre actúa de la misma manera que sus equivalentes nativos de JavaScript.

Conozcamos algunas de estas diferencias, así como los cambios realizados entre las versiones de React.

Eventos que no esperarías que propagaran en React.

Por ejemplo, esperarías que onBlur y onFocus de React no propaguen, ya que el equivalente nativo de JavaScript no lo hace, ¿correcto? Sin embargo, React ha hecho que estos eventos, entre otros, sigan propagando intencionalmente.

⚠️ Si bien React v17 ha realizado algunos cambios en ciertos eventos como onScroll, que ya no propaga, la mayoría de los eventos aún continúan propagando.

Consulta esta respuesta y este artículo para obtener más detalles sobre este tema.

event.target.value solía ser nulo en funciones asíncronas

Antes de React v17, si intentabas acceder a un evento en una función asincrónica, notarías que no estaría definido.

Esto se debe a que los objetos SyntheticEvent de React se agruparon, lo que significa que después de llamar a los controladores de eventos, ya no tendrías acceso a ellos, ya que se restablecerían y volverían a poner en el grupo.

Esto causa problemas para las funciones asíncronas que necesitan acceder a la información dentro de ese evento en un momento posterior.

⚠️ La única forma de conservar esta información dentro de las funciones asíncronas era llamar event.persist():

La intención de esto era mejorar el rendimiento. Pero después de una inspección más cercana, el equipo de React descubrió que solo confundía a los desarrolladores y, en realidad, no mejoraba mucho el rendimiento, por lo que se eliminó por completo.

⚠️ Con el lanzamiento de React v17, React ya no agrupa objetos SyntheticEvent. Por lo tanto, puedes esperar recibir el event.target.value deseado dentro de tus funciones asíncronas sin necesidad del event.persist().

Asegúrese de leer más sobre esta actualización aquí.

Caso Borde Especial: ¿Qué pasa si necesitas que un elemento padre externo dispare también?

¡Tomemos todo lo que aprendimos y arreglemos un caso especial para que puedas aplicarlo en tu próxima (o actual) aplicación React!

? Digamos que queremos que ambos funcionen en nuestra aplicación:

1. Cuando un usuario hace clic en el elemento div/button/etc interno, queremos que ese evento se active solo (o en nuestro ejemplo a continuación, cambiando de canal en el televisor).
2. Cuando un usuario hace clic en el div principal externo, el evento principal se activa (esto podría ser útil para un modal emergente. Cuando un usuario hace clic fuera del modal, deseas que se cierre la ventana emergente, o en nuestro ejemplo a continuación, que un televisor se apague).

Actualmente, sabes que si haces clic en el elemento principal / secundario, el sistema SyntheticEvent de React activará la propagación.

También sabes que para detener esto podemos usar event.stopPropagation().

Pero nos quedamos con un dilema.

¿Qué sucede si deseas que un controlador de eventos se active en una situación (nuestro #1) y otro controlador de eventos se active en otra situación (#2)?

⚠️ Si usamos event.stopPropagation(), detendría la activación de un controlador de eventos, pero nunca podrás llamar al otro controlador de eventos en otra situación. ¿Cómo podemos arreglar esto?

Para resolver este problema, utilicemos el patrón de estado de React.

Ten en cuenta que estamos utilizando funciones de flecha aquí, por lo que el bind no es necesario. Si no estás seguro de lo que esto significa, no dudes en leer otro artículo que escribió Mariya sobre este tema aquí(en inglés).

ℹ️ A continuación, hemos incluido una versión de React Class Component y una versión de React Hooks; usa la que prefieras. Asegúrate de leer los comentarios detenidamente:

import React, { Fragment, Component } from "react";

import "./TV.css" // puedes ignorar esto ya que esto no existirá de tu parte

class TV extends Component {
    state = { canal: 1, deberiaApagarTv: false };

  	// el div principal se activa si la TV está APAGADA al hacer clic en 
	// cambiarCanal o apagarTV no se activará al mismo tiempo 
	//debido al event.stopPropagation() aquí
    prenderTv = (event) => {
        console.log("En prenderTv");

        const { deberiaApagarTv } = this.state;

        if (deberiaApagarTv) {
            event.stopPropagation();

            // Restablecimos el canal en 1, pero puedes hacer lo que necesites aquí
            this.setState({ deberiaApagarTv: false, canal: 1 });
        }
    }

    // el botón hijo cambiarCanal se activa si TV está ENCENDIDA(ON) 
    // haciendo clic en el div padre, o apagarTV no se activará al mismo tiempo 
    // debido al event.stopPropagation() aquí
    cambiarCanal = (event) => {
        console.log("En cambiarCanal");

        const { canal, deberiaApagarTv } = this.state;

        if (!deberiaApagarTv) {
            event.stopPropagation();

            // Incrementamos el canal en 1, pero puedes hacer lo que necesites aquí
            this.setState({ canal: canal + 1 });
        }
    }

    // el botón apagarTV se activa 
    // haciendo clic en el div principal o cambiar el canal no se activará al mismo tiempo 
    // debido al event.stopPropagation() aquí
    apagarTV = (event) => {
        console.log("En apagarTV");

        event.stopPropagation();

        this.setState({ deberiaApagarTv: true });
    }

    ponerCanal = () => {
        const { canal, deberiaApagarTv } = this.state;

        if (deberiaApagarTv) {
            return (
                <div>Ya está, ¡No mas TV!</div>
            )
        }

        return (
            <Fragment>
                <div>Canal Actual: {canal}</div>
                <button className="soy-un-boton-hijo" onClick={this.apagarTV}>Apagar la TV</button>
            </Fragment>
        )
    }

    render() {
        const { deberiaApagarTv } = this.state;
        return (
            <div className="soy-un-padre" onClick={this.prenderTv}> 
                {this.ponerCanal()}
                <hr />
                <button 
                    disabled={deberiaApagarTv}
                    className="soy-un-boton-hijo" 
                    onClick={this.cambiarCanal}
                >
                    Cambiar canal
                </button>
            </div>
        );
    }

}

export default TV;

import React, { Fragment, useState } from "react";

import "./TV.css" // puedes ignorar esto ya que esto no existirá de tu parte

const TV = () => {
    const [canal, setCanal] = useState(1);
    const [deberiaApagarCanal, setApagarTV] = useState(false);

    // el div padre se activa si la TV está APAGADA 
    // al hacer clic en cambiarCanal o apagarTV no se activará 
    // al mismo tiempo debido al event.stopPropagation() aquí
    const prenderTV = (event) => {
        console.log("En prenderTV");

        if (deberiaApagarCanal) {
            event.stopPropagation();

            // Restablecimos el canal en 1, pero puedes hacer lo que necesites aquí
            setApagarTV(false);
            setCanal(1);
        }
    }

    // el botón de cambiarCanal hijo se activa si la TV está ENCENDIDA 
    // haciendo clic en el div padre, o apagarTV 
    // no se activará al mismo tiempo debido al event.stopPropagation()) aquí
    const cambiarCanal = (event) => {
        console.log("En cambiarCanal");

        if (!deberiaApagarCanal) {
            event.stopPropagation();

            // Incrementamos el canal en 1, pero puedes hacer lo que necesites aquí
            setCanal(canal + 1);
        }
    }

    // se activa el botón de apagarTV
    // hacer clic en el div padre o cambiarCanal no se activará al mismo tiempo
    // debido al event.stopPropagation() aquí
    const apagarTV = (event) => {
        console.log("En apagarTV");

        event.stopPropagation();

        setApagarTV(true);
    }

    const ponerCanal = () => {
        if (deberiaApagarCanal) {
            return (
                <div>Ya está, ¡No mas TV!</div>
            )
        }

        return (
            <Fragment>
                <div>Canal Actual: {canal}</div>
                <button className="soy-un-boton-hijo" onClick={apagarTV}>Apagar la TV</button>
            </Fragment>
        )
    }

    return (
        <div className="soy-un-padre" onClick={prenderTV}> 
            {ponerCanal()}
            <hr />
            <button 
                disabled={deberiaApagarCanal}
                className="soy-un-boton-hijo" 
                onClick={cambiarCanal}
            >
                Cambiar canal
            </button>
        </div>
    );

}

export default TV;

? Y esto es lo que sucede cuando ejecutamos el código:

1. Cuando hacemos clic en cambiarCanal, el canal se incrementa. Observa que los otros dos controladores de eventos no se ejecutan.
2. Cuando hacemos clic en apagarTV, la interfaz de usuario cambia y si intentamos hacer clic en cualquier lugar fuera del div padre, los otros dos controladores de eventos no se ejecutan.
3. Cuando hacemos clic dentro del div padre externo cuando el televisor está apagado, solo se ejecuta un controlador de eventos.

Ten en cuenta: en el ejemplo anterior, estamos usando state = {} en lugar del constructor() {...}. Esto se debe a que cuando Babel (un compilador de JavaScript) convierte tu código de React, escupe un constructor con todo dentro. Si sabes esto, no dudes en omitir la imagen a continuación:

Una solución aún más simple

Esa es una forma de hacerlo, ¡pero hay una solución aún más simple! Simplemente verifica dentro del controlador de eventos si el target(en lo que se hizo clic) es el mismo que el eventTarget(el controlador de eventos que escucha el evento).

Si es lo mismo, puedes llamar al stopPropagation. A continuación, se muestra un ejemplo rápido:

...

const Modal = ({ cabecera, contenido, textoBotonCancelar, textoBotonConfirmar, history, confirmar }) => {
    const cancelar = (event) => {
        detenerIntentoDePropagacion(event);

        // se hace algo acá
    }

    const botonConfirmar = (event) => {
        detenerIntentoDePropagacion(event);

        // se hace algo acá
    }
    
    // por lo que los elementos con múltiples controladores de eventos 
    // no se llaman innecesariamente más de una vez (es decir, propagación de SyntheticEvent)
    export const detenerIntentoDePropagacion = (event) => {
        if (event.target === event.currentTarget) {
            event.stopPropagation();
        }
    }

    return crearPortal(
        <div onClick={cancelar} className="ui dimmer modals visible active">
            <div className="ui tiny modal visible active">
                <div className="cabecera">{cabecera}</div>
                <div className="contenido">{contenido}</div>
                <div className="acciones">
                    <button onClick={cancelar} className="ui button">{textoBotonCancelar}</button>
                    <button onClick={botonConfirmar} className="ui red button">{textoBotonConfirmar}</button>
                </div>
            </div>
        </div>,
        document.getElementById("modal")
    );
}

¡Lo hiciste! ✨?✨

Has terminado este artículo y, con suerte, ahora comprendes la propagación y la captura de eventos como un profesional. ¡Hurra!

Ahora sabes:

• Qué significa la delegación de eventos y cómo funcionan la propagación de eventos y la captura de eventos.
• Cómo funciona la propagación de eventos de manera diferente en JavaScript y React.
• Comprende mejor los beneficios y las advertencias del manejo de eventos en React.
• Varios métodos que puedes utilizar para solucionar problemas que puedan surgir en tu caso particular
• La diferencia entre Event.target y Event.currentTarget, así como que el evento desencadenado no siempre es el mismo que el que tiene el detector de eventos adjunto.
• Cómo ocurre la propagación de eventos en JavaScript moderno y cómo usar el parámetro useCapture si necesitas usar la fase de captura.
• Aprendimos que no todos los eventos propagan en JavaScript nativo, así como algunos de sus alias que sí lo hacen.
• También aprendimos que casi todos los SyntheticEvents de React (aparte de algunas actualizaciones en React Versión 17) propagan.
• Por último, ahora tienes una mejor comprensión sobre cómo manejar el caso borde de un elemento padre externo que necesita disparar sin detener otros controladores de eventos utilizando el estado de React

Más recursos / lectura adicional:

https://www.youtube.com/watch?v=Q6HAJ6bz7bY
https://javascript.info/bubbling-and-capturing
https://www.w3.org/TR/uievents/
https://chrisrng.svbtle.com/event-propagation-and-event-delegation
https://jsbin.com/hilome/edit?js,output

??¡Hola! ??‍? la autora original del artículo es Mariya Diminsky, una ingeniera de software autodidacta apasionada. Trabajó como ingeniera FullStacK, desarrolladora de frontend (ella ? React) y desarrolladora de Unity/C#. También es fundadora de TrinityMoon Studios y creador de The Girl Who Knew Time.

✨? Si disfrutaste de la lectura y te gustaría aprender más sobre varios temas de React/tópicos de System Design y más, considera seguirla en redes para obtener las últimas actualizaciones. ?

Hacer que un sitio web o una aplicación web sea accesible mejora la experiencia del usuario para las personas con discapacidades y también para todos los usuarios.

Dado que los desarrolladores se enfrentan a plazos ajustados y prioridades en conflicto, es fácil enviar accidentalmente problemas de accesibilidad no resueltos a producción. Y las cosas se vuelven aún más complejas cuando se trabaja con frameworks de JavaScript como React, que implica escribir JSX.

Pero, afortunadamente, existen herramientas que puedes aprovechar para eliminar o evaluar problemas comunes de accesibilidad en el editor de texto o el navegador.

Este artículo arrojará luz sobre estas herramientas de accesibilidad existentes y cómo puedes usarlas para crear aplicaciones React más accesibles.

¿Qué es la accesibilidad web?

Se dice que un sitio web o una aplicación web son accesibles si no excluyen a las personas con discapacidades de usarlos debido a su discapacidad.

Tener un sitio web accesible elimina las barreras y garantiza que tanto las personas discapacitadas como las no discapacitadas tengan el mismo acceso al contenido y la funcionalidad de la web.

Los beneficios de hacer que tu sitio web sea accesible para personas con discapacidades se extenderán a todos los usuarios, incluidas las personas sin discapacidades.

Por qué debería prestar atención a la accesibilidad

No se puede enfatizar lo suficiente la importancia de la accesibilidad. Si no prestas atención desde el comienzo de tu proyecto, corres el riesgo de convertir la accesibilidad en una carga, y una costosa, en el futuro si comienzas a modernizar.

Hacer que tu sitio sea accesible debe ser una parte integral de tu proyecto desde el principio. No debería ser una ocurrencia tardía.

A continuación, se ha destacado por qué se debe centrar en la accesibilidad desde el principio:

Sigue las mejores prácticas de SEO

Algunos de los requisitos básicos de accesibilidad, como el uso de elementos HTML semánticos, el uso adecuado de los elementos de encabezado y la adición de atributos alt descriptivos a las etiquetas img, también son las mejores prácticas de SEO.

Mejora la UX para todos los usuarios

Mejorar la accesibilidad para las personas con discapacidad mejorará la experiencia de todos tus usuarios.

Por ejemplo, agregar una relación de contraste suficiente no solo es útil para las personas con visión baja, daltonismo o deterioro cognitivo, sino que también es útil para las personas que trabajan en diferentes condiciones de iluminación.

De manera similar, agregar un atributo alt con el texto apropiado ayudará a las personas que usan lectores de pantalla, así como a aquellos con conexiones lentas a Internet, cuando la imagen no se carga o tarda demasiado en cargarse.

Es hacer lo correcto

Al hacer que tu sitio web sea accesible, estás haciendo lo correcto. Ellos también tienen derecho a acceder al servicio que ofreces y algunos son tus clientes. Además, no será bueno para ti o tu empresa si se les acusa de discriminación porque tu sitio es inaccesible para las personas con discapacidad. Dañará tu marca y reputación.

Evita problemas legales

Por último, es posible que te encuentres con requisitos legales de accesibilidad según el lugar donde vivas y trabajes. Algunos países tienen una legislación que exige que los sitios web sean accesibles para las personas con discapacidad.

Normas y pautas de accesibilidad

Hay varios estándares y pautas de accesibilidad diferentes. Los estándares más notables y reconocidos fueron desarrollados por el Consorcio World Wide Web (W3C) a través de su Iniciativa de Accesibilidad Web (WAI).

Han sido destacado algunos de estos estándares y pautas en las subsecciones siguientes.

Pautas de accesibilidad al contenido web (WCAG) 2.1

WCAG(Web Content Accessibility Guidelines) es uno de los estándares reconocidos internacionalmente para la accesibilidad del contenido web.

Fue desarrollado por W3C a través de un proceso participativo con aportes de una serie de partes interesadas individuales e institucionales de todo el mundo.

Este estándar explica cómo hacer que el contenido web sea más accesible para las personas con discapacidad. También ha sido aprobado por ISO.

Según W3C, WCAG se creó principalmente para servir como un estándar de referencia para individuos, organizaciones y gobiernos a nivel internacional en asuntos de accesibilidad al contenido web.

Pautas de accesibilidad para herramientas de autor (ATAG) 2.0

ATAG(Authoring Tools Accessibility Guidelines) es un conjunto de pautas de accesibilidad que puedes utilizar para diseñar herramientas para la creación de contenido web.

Esta guía ayuda a asegurarte de producir herramientas de autor que sean accesibles para personas con discapacidades. Las herramientas deberían, a su vez, ayudar a los autores a crear contenido web accesible.

Pautas de accesibilidad del agente de usuario (UAAG) 2.0

La UAAG(User Agent Accessibility Guidelines) 2.0 es una hermana de las WCAG. Este conjunto de pautas explica cómo puedes hacer que los navegadores, las extensiones del navegador, los reproductores multimedia y otros agentes de usuario sean accesibles para las personas con discapacidades.

Los proveedores de navegadores y los fabricantes de extensiones de navegadores lo utilizan para abordar ciertos problemas de accesibilidad, como la personalización del texto en el navegador.

En la siguiente sección, destacaremos un par de herramientas que pueden ayudarte a marcar problemas básicos de accesibilidad en tus aplicaciones React.

Herramientas de accesibilidad para tus aplicaciones React

Es fácil enviar involuntariamente problemas de accesibilidad a la producción, a pesar de tu esfuerzo para hacer lo contrario. En esta sección, arrojaremos luz sobre algunas herramientas que puedes usar para resaltar problemas comunes de accesibilidad.

Puede resultar tentador omitir determinadas funciones de accesibilidad si se trata de plazos ajustados. Por lo tanto, es útil tener herramientas de accesibilidad en tu configuración que te notifiquen los defectos de accesibilidad que podrías haber pasado por alto.

Esta no es de ninguna manera una lista exhaustiva de herramientas de accesibilidad. Si hay otras herramientas que crees que son útiles pero que no están incluidas aquí, ponte en contacto con Joseph en Twitter. Estará feliz de actualizar este artículo. Alguien podría encontrarlas útiles también.

Aunque estas herramientas detectarán algunos problemas comunes de accesibilidad que puedes medir programáticamente, no harán todo el trabajo por ti. Es tu responsabilidad hacer un esfuerzo deliberado para desarrollar productos digitales más accesibles e inclusivos desde la concepción del proyecto.

Se han categorizado las herramientas que vamos a cubrir en dos categorías, a saber:

• Herramientas de accesibilidad que puedes integrar en tu proyecto React que se han desarrollado con React en mente.
• Herramientas generales de auditoría de accesibilidad que puedes utilizar para auditar sitios creados con o sin React.

En las subsecciones a continuación, se destacarán las herramientas que puedes usar en tus proyectos de React. Se crean expresamente para su uso con React o JSX.

Herramientas de accesibilidad creadas para React

eslint-plugin-jsx-a11y

Puedes usar esta herramienta para identificar problemas de accesibilidad en elementos JSX en tus proyectos de React. Puedes usarlo junto con herramientas como eslint para vincular tu proyecto con estándares de accesibilidad directamente en el editor de texto.

Dado que se distribuye a través de npm, puedes instalarlo ejecutando el siguiente comando en tu proyecto:

# usando npm como administrador de paquetes

npm install eslint-plugin-jsx-a11y --save-dev

# usando yarn como administrador de paquetes

yarn add eslint-plugin-jsx-a11y --dev

Cualquier proyecto de React que hayas creado usando create-react-app viene con esta herramienta ya configurada, pero solo tiene un subconjunto de las reglas de accesibilidad configurables habilitadas de forma predeterminada.

Puedes habilitar reglas adicionales creando un archivo de configuración .eslintrc en tu proyecto y agregando el siguiente código:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

Si deseas marcar problemas de accesibilidad en un proyecto React personalizado, debes instalar eslint y agregar "jsx-a11y" al campo de complementos del archivo de configuración .eslintrc.

Se marcarán los problemas de accesibilidad que puede identificar programáticamente, y te advertirá directamente en el editor de texto, según tu configuración.

{  "plugins": [    "jsx-a11y"  ]}

Para obtener más información sobre cómo configurar esta herramienta de linting en un proyecto React personalizado, consulta el archivo README del proyecto en GitHub.

axe accessibility linter

El axe accessibility linter es una extensión de código de Visual Studio que puedes usar para enlazar React, HTML, Vue y Markdown con algunos defectos de accesibilidad comunes.

Comprueba si hay problemas de accesibilidad en archivos .js, .jsx, .ts, .tsx, .vue, .html, .htm, .md y .markdown.

No se necesita configuración para comenzar a usar el linter después de la instalación.

Lo instalas desde el marketplace de VSCode, y automáticamente comienza a enlazar archivos compatibles para detectar defectos de accesibilidad sin necesidad de configuración adicional.

Para obtener una lista completa de las reglas utilizadas por el linter, consulta la página de extensiones en el marketplace de VSCode.

También puedes continuar y configurar la herramienta si lo deseas, activando y desactivando algunas reglas, agregando el archivo de configuración ax-linter.yml en la raíz de tu proyecto.

Tienes la opción de deshabilitar las reglas de accesibilidad individualmente o en grupo usando el estándar WCAG. El uso de esta funcionalidad en tu proyecto garantizará que todos los miembros de tu equipo cumplan con el mismo estándar de accesibilidad.

Puedes agregar lo siguiente a tu archivo ax-linter.yml para habilitar o deshabilitar ciertas reglas individualmente. Para obtener una lista completa de reglas configurables, consulta la página de extensiones del linter en el marketplace de VSCode.

# Para habilitar/deshabilitar reglas a nivel individual:
  accessibility-rule: false # deshabilita la regla
  another-accessibility-rule: true # habilita la regla

Alternativamente, puedes agregar lo siguiente a tu archivo de configuración ax-linter.yml para deshabilitar las reglas como grupo usando estándares WCAG específicos.

Para obtener una lista completa de los estándares WCAG configurables, consulta la página de extensiones del linter en el marketplace de VSCode.

# Para habilitar/deshabilitar reglas a nivel de grupo según el estándar WCAG

tags: 
  - wcag2a # Deshabilita todas las reglas para WCAG 2.0 nivel A
  - wcag21a # Deshabilita todas las reglas para WCAG 2.1 nivel A

axe-core-react

Esta herramienta de pruebas(testing) de accesibilidad es desarrollada y mantenida por Deque Labs, la misma gente detrás del axe accessibility linter.

axe-core-react se denominó originalmente react-axe. Puedes ejecutarlo en tu proyecto React en desarrollo y los defectos de accesibilidad se resaltan en la consola de Chrome DevTools cada vez que tu componente se actualiza.

Realmente puede ayudarte a detectar algunos problemas de accesibilidad al principio del desarrollo. Por el momento, axe-core-react funciona mejor con Google Chrome. A diferencia de los dos primeros, éste prueba la accesibilidad del DOM renderizado en lugar del elemento JSX que escribes en los componentes de React.

npm install @axe-core/react --save-dev

A continuación, puedes ejecutar el paquete en desarrollo después de la instalación.

El siguiente código ilustra cómo puedes ejecutar axe-core-react en tu aplicación React usando la configuración más básica. Hay opciones de configuración adicionales sobre las que puedes leer en el paquete README en GitHub

const React = require('react');
const ReactDOM = require('react-dom');

// Asegúrate de ejecutar @axe-core/react en desarrollo

if (process.env.NODE_ENV !== 'production') {
  const axe = require('@axe-core/react');
  axe(React, ReactDOM, 1000);
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Puedes usar las herramientas mencionadas anteriormente, directamente en tu aplicación React para detectar y solucionar problemas comunes de accesibilidad.

En la siguiente sección, veremos algunas otras herramientas de accesibilidad que no están directamente relacionadas con React pero que son útiles para identificar defectos básicos de accesibilidad en una aplicación React.

Otras herramientas de accesibilidad

Hay una serie de herramientas que puedes utilizar para detectar problemas de accesibilidad comunes en el navegador. Se han destacado un par de estas herramientas a continuación.

Extensión del navegador Axe DevTools

Esta es una extensión del navegador que puedes usar para realizar una auditoría simple de tu página web para problemas comunes de accesibilidad.

Tu aplicación debe estar alojada en algún lugar antes de usar esta extensión del navegador para verificar si hay problemas de accesibilidad. Clasifica los defectos de accesibilidad en críticos, graves, moderados y menores.

Extensión del navegador WAVE Evaluation Tool

Esta es otra extensión del navegador Chrome que puedes utilizar para identificar problemas de accesibilidad en tu sitio web.

Al igual que la extensión del navegador Chrome Axe DevTools, esta extensión requiere que alojes la aplicación antes de usarla para auditar tu aplicación web en busca de defectos de accesibilidad.

Lighthouse de Google en Chrome DevTools

Puedes utilizar Lighthouse Chrome DevTools de Google para auditar tu sitio web en busca de problemas de accesibilidad. Genera un informe que puedes utilizar para corregir defectos en su sitio web.

Existe una lista interminable de herramientas generales de evaluación de accesibilidad web. Puedes elegir la que se adapte a tus necesidades.

Para obtener una lista completa, puedes consultar la lista de herramientas de evaluación de accesibilidad web de W3C o las herramientas de accesibilidad de a11y project.

Conclusión

El uso de herramientas como eslint-plugin-jsx-a11y, axe accessibility linter, y axe-core-react en tu proyecto serán de gran ayuda para asistirte en desarrollar productos más accesibles e inclusivos utilizando React.

Aunque son útiles, las herramientas mencionadas aquí solo marcarán un cierto porcentaje de defectos de accesibilidad, principalmente aquellos que se pueden detectar mediante programación.

Por lo tanto, es realmente importante integrar pruebas automatizadas, pruebas manuales y pruebas de usuarios reales en el desarrollo, porque las pruebas automatizadas por sí solas pueden no detectar ni siquiera el 50 por ciento de los problemas de accesibilidad en tu proyecto.

Entonces empecemos.

No olvides que cada cambio de ruta monta y desmonta un componente

Siempre que estés usando enrutamiento en una aplicación React, declaras rutas dentro del componente Switch. Esto significa que solo se muestra un componente con la ruta coincidente a la vez.

Por lo tanto, siempre que vayas de una ruta a otra, se desmonta el componente mostrado anteriormente y se monta el componente con la nueva ruta coincidente.

Si necesitas conservar algunos datos a través de un cambio de ruta, debes declararlo en el componente que encapsula las rutas. Podría ser el componente principal de la aplicación App en el siguiente Code Sandbox, o alguna otra forma de persistir los datos, como usar el almacenamiento local o el almacenamiento de sesiones.

Como puedes ver en el Code Sandbox anterior, cada vez que cambiamos la ruta haciendo clic en los enlaces, el correspondiente console.log se muestra en la consola. Esto indica que el componente anterior está desmontado y un nuevo componente está montado.

No utilices la sintaxis setState incorrecta

Cada vez que declaras algún estado dentro de un componente basado en clases, siempre es un objeto como este:

this.state = {
 contador: 0
}

Entonces, cada vez que usas la forma actualizadora de la sintaxis setState para modificar el estado, se ve así:

this.setState((estadoPrevio) => {
  return {
    contador: estadoPrevio.contador + 1
  };
});

Dado que el estado es un objeto, estadoPrevio también es un objeto, por lo que puedes acceder al contador utilizando estadoPrevio.contador.

Pero cuando usas componentes funcionales con React Hooks, el estado puede ser un objeto o un valor no-objeto como se muestra a continuación:

const [contador, setContador] = useState(0);

Aquí, el valor del contador no es un objeto sino un número. Entonces, para actualizar el estado usando la sintaxis del actualizador, escribirás el código así:

setContador((contadorPrevio) => contadorPrevio + 1);

Aquí, contadorPrevio es un número. Por lo tanto, no usas contadorPrevio.contador, solo contadorPrevio . O puedes simplificarlo como se muestra a continuación:

setContador((contador) => contador + 1);

Consulta el artículo de Yogesh(en inglés) aquí para obtener una introducción completa al estado de React.

No llames Hooks desde componentes de clase

A partir de la versión 16.8.0, React introdujo Hooks(ganchos). Te permiten escribir mejor código de React y hacer uso de estados y métodos de ciclo de vida de componentes dentro de componentes funcionales.

Echa un vistazo al artículo de Yogesh(en inglés) aquí para ver una introducción a los Hooks de React.

Para facilitar el código, React proporciona muchos Hooks como:

• El hook useParams para acceder a los parámetros de URL cuando se usa React Routing
• El hook useHistory para obtener acceso a la API de historial dentro de cualquier componente
• El hook useRef para obtener acceso al elemento DOM

y muchos otros hooks.

Pero todos estos hooks (que generalmente comienzan con la palabra clave use) funcionan solo dentro de componentes funcionales.

Si tienes un componente basado en clases, no puedes usar estos hooks. Necesitas refactorizar el código para convertirlo a componentes funcionales. Si no lo haces, es posible que obtengas un error como el de la siguiente captura de pantalla:

No olvides agregar una propiedad clave (key) cuando utilices el método para arreglos map

Dale un vistazo a esta Demo en inglés de Code Sandbox

Aquí, para mostrar una lista de elementos, puedes utilizar el siguiente código:

const Items = ({ items }) => (
  <ol>
    {items.map((item) => (
      <Item item={item} />
    ))}
  </ol>
);

En React, generalmente usarás el método para arreglos map para mostrar una lista de elementos almacenados en un arreglo.

Pero tan pronto como agregues un elemento a la lista en el Code Sandbox anterior, verás una advertencia de clave (key) faltante en la consola.

Esto se debe a que cada vez que utilizas el método para arreglos map para recorrer los elementos, debes proporcionar una propiedad key única. React usa esto para identificar qué elementos en la pantalla deben volver a renderizarse, por lo que agregar la propiedad key te ayuda a evitar una renderización innecesaria en tu aplicación.

Aquí hay una demostración de Code Sandbox actualizada con la propiedad key agregada.

Aquí, se proporcionó una propiedad key única para cada elemento que estamos recorriendo de esta manera:

<Item item={item} key={indice} />

Ahora, si intentas agregar algunos elementos, no recibirás ninguna advertencia en la consola

Nota: En el código anterior, como los elementos no se reordenaron o eliminaron, usar el index (indice) como key funciona bien. Pero si estás eliminando o cambiando el orden de los elementos mostrados, debes proporcionar una key única en lugar de usar index.

No utilices funciones en-línea de forma incorrecta

Échale un vistazo a esta demostración en Code Sandbox.

Aquí, se agregaron algunos elementos al estado:

const [items, setItems] = useState(["uno", "dos"]);

y estamos haciendo un bucle sobre ellos para mostrarlos en la pantalla:

{items.map((item, indice) => (
  <li key={indice}>
    {item} <button onClick={funcionParaRemoverItem(item)}>Remover</button>
  </li>
))}

Si verificas la aplicación, verás que no se muestran elementos en la pantalla. Agregar nuevos elementos tampoco funciona, como puedes ver a continuación:

Esto se debe al controlador onClick del botón:

<button onClick={funcionParaRemoverItem(item)}>Remover</button>

Aquí, llamamos al método funcionParaRemoverItem cuando el usuario hace clic en el botón, pero la forma en que llamamos al método es incorrecta.

Entonces, si no necesitas pasar ningún parámetro, usa la siguiente sintaxis:

<button onClick={funcionParaRemoverItem}>Remover</button>

Pero más tarde, si decides pasar algún parámetro a la función, debes llamar al controlador dentro de la función en-línea de esta manera:

<button onClick={() => funcionParaRemoverItem(item)}>Remover</button>

La mayoría de los desarrolladores de React se olvidan de agregar una función en-línea y luego se necesitan horas de depuración para comprender por qué algo no funciona.

Aquí hay una demostración en inglés de Code Sandbox actualizada.

¡Gracias por leer!

Comenzando con ES6, hay muchas adiciones útiles a JavaScript como

• Desestructuración ES6
• Sintaxis Import y Export
• Funciones de flecha
• Promesas
• Async/await
• Operador de encadenamiento opcional y mucho más.

Puedes aprender todo sobre todas las funciones de ES6+ en detalle en el libro Mastering Modern JavaScript de Yogesh.

Revisa el contenido de vista previa gratuita del libro aquí.

Además, puedes consultar el curso gratuito Introduction to React Router para aprender React Router desde cero.

¿Quieres mantenerte actualizado con el contenido regular sobre JavaScript, React, Node.js? Sígue a Yogesh en LinkedIn.

Traducido del artículo de Yogesh Chavan - Common Mistakes React Developers Make – And How to Fix Them

Encuentro que este enfoque ofrece una descripción bastante completa.

Este libro no intenta cubrir todo lo relacionado con Python. Se centra en el núcleo del lenguaje, tratando de simplificar los temas más complejos.

Esperamos que el contenido de este libro te ayude a lograr lo que quieres: aprender los conceptos básicos de Python.

Nota: puedes obtener una versión PDF, ePub y Mobi en inglés de este manual de Python

¡Que lo disfrutes!

Resumen

• Introducción a Python
• Cómo instalar Python
• Cómo ejecutar programas en Python
• Python 2 vs Python 3
• Básicos en Python
• Tipos de datos en Python
• Operadores en Python
• El operador ternario en Python
• Cadenas en Python
• Booleanos en Python
• Números en Python
• Constantes en Python
• Enums en Python
• Entradas de usuario en Python
• Declaraciones de control en Python
• Listas en Python
• Tuplas en Python
• Diccionarios en Python
• Conjuntos en Python
• Funciones en Python
• Objetos en Python
• Bucles en Python
• Clases en Python
• Módulos en Python
• Librería estándar de Python
• La guía de estilo PEP8 en Python
• Depurando en Python
• Ámbito de variable en Python
• Cómo aceptar argumentos desde la línea de comandos en Python
• Funciones Lambda en Python
• Recursión en Python
• Funciones anidadas en Python
• Closures en Python
• Decoradores en Python
• Docstrings en Python
• Introspección en Python
• Anotaciones en Python
• Excepciones en Python
• Declaración with en Python
• Cómo instalar paquetes de terceros en Python usando pip
• Comprensiones de lista en Python
• Polimorfismo en Python
• Sobrecarga de operador en Python
• Entornos virtuales en Python
• Conclusión

Recomendación: cuando estamos programando, integrando palabras en nuestro idioma, suele ser mejor evitar el uso de caracteres extendidos como las letras con tildes(á,é,ñ,ô,ü...), para que Python, tú o la persona usando tu código no genere errores inesperados y lograr la menor confusión posible.

Por este motivo, dentro de los bloques especiales en este libro que representen código, los nombres que le demos a nuestras variables y demás objetos, NO llevarán caracteres extendidos.

Introducción a Python

Python literalmente se está comiendo el mundo de la programación. Está creciendo en popularidad y uso de formas que no tienen precedentes en la historia de las computadoras.

Python sobresale en una amplia variedad de escenarios: las secuencias de comandos Shell, la automatización de tareas y el desarrollo web son solo algunos ejemplos básicos.

Python es el lenguaje preferido para data analysis y machine learning, pero también puede adaptarse para crear juegos y trabajar con dispositivos integrados.

Más importante aún, es el idioma elegido para las carreras de ciencias de computación en universidades de todo el mundo.

Muchos estudiantes aprenden Python como su primer lenguaje de programación. Muchos lo están aprendiendo ahora mismo y muchos más lo aprenderán en el futuro. Y para muchos de ellos, Python será el único lenguaje de programación que necesitarán.

Gracias a esta posición única, es probable que Python crezca aún más en el futuro.

El lenguaje es simple, expresivo y bastante sencillo.

El ecosistema es enorme. Parece haber una biblioteca para todo lo que puedas imaginar.

Python es un lenguaje de programación de alto nivel adecuado para principiantes gracias a su sintaxis intuitiva, su enorme comunidad y su ecosistema vibrante.

También es apreciado por profesionales de muchos campos diferentes.

Técnicamente hablando, Python es un lenguaje interpretado que no tiene una fase de compilación intermedia como un lenguaje compilado, por ejemplo C o Java.

Y como muchos lenguajes interpretados, se escribe dinámicamente. Esto significa que no tienes que indicar los tipos de variables que usas y las variables no están vinculadas a un tipo específico.

Esto tiene pros y contras. En particular, escribes programas más rápido, pero por otro lado tienes menos ayuda de las herramientas para prevenir posibles errores. Esto significa que conocerás ciertos problemas solo ejecutando el programa en tiempo de ejecución.

Python admite una amplia variedad de paradigmas de programación diferentes, incluida la programación procedimental, la programación orientada a objetos y la programación funcional. Es lo suficientemente flexible como para adaptarse a muchas necesidades diferentes.

Creado en 1991 por Guido van Rossum, su popularidad ha ido aumentando, especialmente en los últimos 5 años, como muestra esta infografía de Tendencias de Google:

Comenzar con Python es muy fácil. Todo lo que necesitas es instalar el paquete oficial de python.org, para Windows, macOS o Linux, y estarás listo para comenzar.

Si eres nuevo en la programación, en las siguientes publicaciones te guiaremos para pasar de cero a convertirte en programador Python.

E incluso si actualmente eres un programador que se especializa en otro idioma, Python es un lenguaje que vale la pena conocer porque creemos que solo seguirá creciendo a partir de aquí.

Los lenguajes de nivel inferior como C++ y Rust pueden ser excelentes para programadores expertos, pero son desalentadores para empezar y requieren mucho tiempo para dominarlos.

Python, por otro lado, es un lenguaje de programación para todos: estudiantes, personas que hacen su trabajo diario con Excel, científicos y más.

Es el idioma que todos los interesados en programar deberían aprender primero.

Cómo instalar Python

Ve a https://www.python.org, elije el menú Downloads (descargas), elije tu sistema operativo y aparecerá un panel con un enlace para descargar el paquete oficial:

Asegúrate de seguir las instrucciones específicas para tu sistema operativo. En macOS puedes encontrar una guía detallada(inglés) en https://flaviocopes.com/python-installation-macos/.

Cómo ejecutar programas en Python

Hay algunas formas diferentes de ejecutar programas Python.

En particular, hay una distinción entre el uso de mensajes interactivos, donde se escribe código Python y se ejecuta inmediatamente; y guardar un programa Python en un archivo y ejecutarlo.

Comencemos con indicaciones interactivas.

Si abres la terminal y escribes python, verás una pantalla parecida a esta:

Este es el Python REPL(Read-Evaluate-Print-Loop).

REPL es un entorno de programación computacional simple e interactivo que toma las entradas individuales del usuario, las evalúa y devuelve el resultado al usuario; un programa escrito en un entorno REPL es ejecutado por partes.

Observa el símbolo >>>  y el cursor después de eso. Puedes escribir cualquier código Python ahí y presionar la tecla enter para ejecutarlo.

Por ejemplo, intenta definir una nueva variable usando

nombre = "Flavio"

y luego imprime su valor, usando print():

print(nombre)

Nota: en el REPL, también puedes escribir el nombre, presionar la tecla enter y obtendrás el valor de vuelta. Pero en un programa, no verás ningún resultado si lo haces; deberás usar print() en su lugar.

Cualquier línea de Python que escribas ahí se ejecutará inmediatamente.

Escribe quit() para salir de este REPL de Python.

Puedes acceder al mismo mensaje interactivo utilizando la aplicación IDLE que Python instala automáticamente:

Esto te podría ser más conveniente porque con el mouse puedes moverte y copiar/pegar más fácilmente que con el terminal.

Esos son los básicos que vienen con Python de forma predeterminada. Sin embargo, recomiendo que instales IPython, probablemente la mejor aplicación REPL de línea de comandos que puedas encontrar.

Instálalo con

pip install ipython

Asegúrate de que los binarios pip estén en tu path(ruta), y ejecuta ipython:

ipython es otra interfaz que te permite trabajar con un REPL de Python y proporciona algunas características interesantes como resaltado de sintaxis, finalización de código y mucho más.

La segunda forma de ejecutar un programa Python es escribir el código de tu programa Python en un archivo, por ejemplo program.py:

y luego ejecútalo con python program.py:

Ten en cuenta que guardamos los programas de Python con la extensión .py, eso es una convención.

En este caso, el programa se ejecuta como un todo, no una línea a la vez. Y así es como normalmente ejecutamos los programas.

Usamos REPL para la creación rápida de prototipos y para el aprendizaje.

En Linux y macOS, un programa Python también se puede transformar en un script de shell, anteponiendo todo su contenido con una línea especial que indica qué ejecutable usar para ejecutarlo.

En mi sistema, el ejecutable de Python se encuentra en /usr/bin/python3, así que escribo #!/usr/bin/python3 en la primera línea:

Entonces puedo establecer el permiso de ejecución en el archivo:

chmod u+x program.py

y puedo ejecutar el programa con

./program.py

Esto es especialmente útil cuando escribes scripts que interactúan con el terminal.

Tenemos muchas otras formas de ejecutar programas Python.

Una de ellas es usando VS Code, y en particular la extensión oficial de Python de Microsoft:

Después de instalar esta extensión, tendrás autocompletado de código Python y verificación de errores, formateo automático y verificación de código con pylint, y algunos comandos especiales, que incluyen:

Python: start REPL para ejecutar REPL en la terminal integrada:

Python: Run Python File in Terminal para ejecutar el archivo actual en la terminal:

Python: Run Current File in Python Interactive Window (Ejecutar archivo actual en Ventana Interactiva Python)

y muchos más. Simplemente abre la paleta de comandos (View -> Command palette, o Cmd/Ctrl+Shift+P ) y escribe python para ver todos los comandos relacionados con Python:

Otra forma de ejecutar fácilmente el código Python es usar repl.it, un sitio web muy agradable que proporciona un entorno de programación en el que puedes crear y ejecutar tus aplicaciones, en cualquier lenguaje, incluido Python:

Regístrate (es gratis), luego, en create a repl, haz clic en Python:

e inmediatamente se mostrará un editor con un archivo main.py, listo para ser llenado con una gran cantidad de código Python:

Una vez que tengas algo de código, haz clic en Run para ejecutarlo en el lado derecho de la ventana:

Creemos que repl.it es útil porque:

• puedes compartir código fácilmente con solo compartir el enlace
• varias personas pueden trabajar en el mismo código
• puede albergar grandes programas de ejecución
• puedes instalar paquetes
• proporciona una base de datos de clave-valor para aplicaciones más complejas

Python 2 vs Python 3

Un tema clave que debemos abordar, desde el principio, es la discusión de Python 2 vs Python 3.

Python 3 se introdujo en 2008 y ha estado en desarrollo como la versión principal de Python, mientras que Python 2 se mantuvo con correcciones de errores y parches de seguridad hasta principios de 2020.

En esa fecha, se descontinuó el soporte a Python 2.

Muchos programas todavía se escriben con Python 2, y las organizaciones aún trabajan activamente en ellos, porque la migración a Python 3 no es trivial y requeriría mucho trabajo actualizar esos programas. Y las migraciones grandes e importantes siempre introducen nuevos errores.

Pero el código nuevo, a menos que tengas que cumplir con las reglas establecidas por tu organización que obliguen a usar Python 2, siempre debe escribirse en Python 3.

Este libro se enfoca en Python 3.

Básicos en Python

Variables en Python

Podemos crear una nueva variable de Python asignando un valor a una etiqueta, usando el operador de asignación =.

En este ejemplo asignamos una cadena con el valor "Roger" a nombre:

nombre = "Roger"

Aquí tienes un ejemplo con un número:

edad = 8

Un nombre de variable puede estar compuesto por caracteres, números y el carácter de subrayado _. No puede empezar con un número. Todos estos son nombres de variables válidos:

nombre1
EDAD
eDAD
a11111
mi_nombre
_nombre

Estos son nombres de variables inválidos:

123
prueba!
nombre%

Aparte de eso, cualquier cosa es válida a menos que sea una palabra clave de Python. Hay algunas palabras clave como for, if, while, import y más.

No es necesario memorizarlos, ya que Python te alertará si usas uno de ellos como variable, y los reconocerás gradualmente como parte de la sintaxis del lenguaje de programación Python.

Expresiones y declaraciones en Python

Podemos expresar cualquier tipo de código que devuelva un valor. Por ejemplo

1 + 1
"Roger"

Una declaración, por otro lado, es una operación sobre un valor. Por ejemplo, estas son 2 declaraciones:

nombre = "Roger"
print(nombre)

Un programa está formado por una serie de declaraciones. Cada declaración se coloca en su propia línea, pero puedes usar un punto y coma para tener más de una declaración en una sola línea:

nombre = "Roger"; print(nombre)

Comentar

En un programa de Python, todo lo que aparece después de una marca # se ignora y se considera un comentario.

#esto es una linea comentada

nombre = "Roger" #esto es un comentario en-linea

Indentación en Python

La indentación en Python es significativa.

No puede indentar aleatoriamente así:

nombre = "Flavio"
    print(nombre)

Algunos otros lenguajes no tienen espacios en blanco significativos, pero en Python, el indentado es importante.

En este caso, si intentas ejecutar este programa, obtendrás un error IndentationError: unexpected indent, porque el indentado tiene un significado especial.

Todo lo indentado pertenece a un bloque, como una declaración de control o un bloque condicional, o una función o cuerpo de clase. Veremos más sobre ellos más adelante.

Tipos de datos en Python

Python tiene varios tipos integrados.

Si creas la variable nombre asignándole el valor "Roger", automáticamente esta variable ahora representa un tipo de datos String(cadena)

nombre = "Roger"

Puedes verificar el tipo de una variable usando la función type(), pasando la variable como un argumento y luego comparando el resultado con str

nombre = "Roger"
type(nombre) == str #True

O usando isinstance():

nombre = "Roger"
isinstance(nombre, str) #True

Ten en cuenta que para ver el valor True (verdadero) en Python, fuera de un REPL, debes envolver este código dentro de print(), pero para mayor claridad, evitamos usarlo

Usamos la clase str aquí, pero lo mismo funciona para otros tipos de datos.

Primero, tenemos números. Los números enteros se representan mediante la clase int. Los números flotantes,decimales o fracciones, son de tipo float:

edad = 1
type(edad) == int #True

fraccion = 0.1
type(fraccion) == float #True

Viste cómo crear un tipo a partir de un valor literal, como este:

nombre = "Flavio"
edad = 20

Python detecta automáticamente el tipo a partir del tipo de valor.

También puedes crear una variable de un tipo específico utilizando el constructor de clase, pasando un valor literal o un nombre de variable:

nombre = str("Flavio")
otroNombre = str(nombre)

También puedes convertir de un tipo a otro utilizando el constructor de clases. Python intentará determinar el valor correcto, por ejemplo, extrayendo un número de una cadena:

edad = int("20")
print(edad) #20

fraccion = 0.1
fraccionEntera = int(fraccion)
print(fraccionEntera) #0

A esto se le llama casting. Por supuesto, es posible que esta conversión no siempre funcione según el valor pasado. Si escribes prueba en lugar de 20 en la cadena anterior, obtendrás unValueError: invalid literal for int() with base 10: 'prueba'.
Esos son solo los conceptos básicos de los tipos. Tenemos muchos más tipos en Python:

• complex para números complejos
• bool para booleanos(verdadero/falso)
• list para listas
• tuple para tuplas
• range para rangos
• dict para diccionarios
• set para conjuntos(sets)

¡y más!

Los exploraremos todos pronto.

Operadores en Python

Los operadores de Python son símbolos que usamos para ejecutar operaciones sobre valores y variables.

Podemos dividir los operadores en función del tipo de operación que realizan:

• Operador de asignación
• Operadores aritméticos
• Operadores de comparación
• Operadores lógicos
• Operadores bit a bit

además de algunos interesantes como is e in.

Operador de asignación en Python

El operador de asignación se utiliza para asignar un valor a una variable:

edad = 8

O para asignar un valor de variable a otra variable:

edad = 8
otraVariable = edad

Desde Python 3.8, el operador walrus(morsa) :=  se usa para asignar un valor a una variable como parte de otra operación. Por ejemplo, dentro de un if o en la parte condicional de un bucle. Más sobre eso luego.

Operadores aritméticos en Python

Python tiene varios operadores aritméticos: +,-, , / (división), %(resto), **(exponenciación) y // (división de piso):

1 + 1 #2
2 - 1 #1
2 * 2 #4
4 / 2 #2
4 % 3 #1
4 ** 2 #16
4 // 2 #2

Ten en cuenta que no necesitas un espacio entre los operandos, pero es bueno para la legibilidad.

- también funciona como un operador unario negativo:

print(-4) #-4

+ también se usa para concatenar valores de cadena:

"Roger" + " es un buen perro"
#Roger es un buen perro

Podemos combinar el operador de asignación con operadores aritméticos:

• +=
• -=
• *=
• /=
• %=
• ...y así

Ejemplo:

edad = 8
edad += 1
#edad es ahora 9

Operadores de comparación en Python

Python define algunos operadores de comparación:

• ==
• !=
• >
• <
• >=
• <=

Puedes usar esos operadores para obtener un valor booleano (True o False) según el resultado:

a = 1
b = 2

a == b #False
a != b #True
a > b #False
a <= b #True

Operadores booleanos en Python

Python nos da los siguientes operadores booleanos:

• not
• and
• or

Cuando se trabaja con atributos True o False, estos funcionan como "Y", "O" y "NO" lógicos, y a menudo se usan en la evaluación de la expresión condicional if:

condicion1 = True
condicion2 = False

not condicion1 #False
condicion1 and condicion2 #False
condicion1 or condicion2 #True

De lo contrario, presta atención a una posible fuente de confusión:

or usado en una expresión devuelve el valor del primer operando que no es un valor falso (False, 0, '', []...). De lo contrario, devuelve el último operando.

print(0 or 1) ## 1
print(False or 'hey') ## 'hey'
print('hola' or 'hey') ## 'hola'
print([] or False) ## 'False'
print(False or []) ## '[]'

Los documentos de Python lo describen como :

si "x" es falso, entonces "y", si no "x".

and solo evalúa el segundo argumento si el primero es verdadero. Entonces, si el primer argumento es falso (False, 0, '', []...), devuelve ese argumento. De lo contrario, evalúa el segundo argumento:

print(0 and 1) ## 0
print(1 and 0) ## 0
print(False and 'hey') ## False
print('hola' and 'hey') ## 'hey'
print([] and False ) ## []
print(False and [] ) ## False

Los documentos de Python lo describen como:

si "x" es falso, entonces "x", si no "y"

Operadores bit a bit en Python

Algunos operadores se utilizan para trabajar con bits y números binarios:

• & realiza el binario AND
• | realiza el binario OR
• ^ realiza una operación binaria XOR
• ~ realiza una operación binaria NOT
• << operación shift left
• >> operación shift right

Los operadores bit a bit se utilizan raramente, solo en situaciones muy específicas, pero vale la pena mencionarlos.

is e in en Python

is se llama el operador de identidad. Se utiliza para comparar dos objetos y devuelve verdadero si ambos son el mismo objeto. Más sobre objetos luego.

in se llama el operador de membresía. Se utiliza para saber si un valor está contenido en una lista o en otra secuencia. Más sobre listas y otras secuencias luego.

El operador ternario en Python

El operador ternario en Python permite definir rápidamente un condicional.

Digamos que tienes una función que compara una variable de edad con el valor 18 y devuelve True o False según el resultado.

En lugar de escribir:

def es_adulto(edad):
    if edad > 18:
        return True
    else:
        return False

Puedes implementarlo con el operador ternario de esta manera:

def es_adulto(edad):
    return True if edad > 18 else False

Primero defines el resultado si la condición es verdadera, luego evalúas la condición, luego defines el resultado si la condición es falsa:

<resultado_si_es_verdadero> if <condicion> else <resultado_si_es_falso>

Cadenas en Python

Una cadena en Python es una serie de caracteres entre comillas o comillas dobles:

"Roger"
'Roger'

Puedes asignar un valor de cadena a una variable:

nombre = "Roger"

Puedes concatenar dos cadenas usando el operador +:

frase = "Roger" + " es un buen perro"

Puedes agregar a una cadena usando +=:

nombre = "Roger"
nombre += " es un buen perro"

print(nombre) #Roger es un buen perro

Puedes convertir un número en una cadena usando el constructor de clase str:

str(8) #"8"

Esto es esencial para concatenar un número a una cadena:

print("Roger tiene " + str(8) + " a_os de edad") 
#Roger tiene 8 a_os de edad

Una cadena puede ser de varias líneas cuando se define con una sintaxis especial, encerrando la cadena en un conjunto de 3 comillas:

print("""Roger tiene

    8

a_os de edad
""")

#comillas dobles o simples

print('''
Roger tiene

    8

a_os de edad
''')

Una cadena tiene un conjunto de métodos integrados, como:

• isalpha() para comprobar si una cadena contiene solo caracteres y no está vacía
• isalnum() para comprobar si una cadena contiene caracteres o dígitos y no está vacía
• isdecimal() para comprobar si una cadena contiene dígitos y no está vacía
• lower() para obtener una versión en minúsculas de una cadena
• islower() para comprobar si una cadena está en minúsculas
• upper() para obtener una versión en mayúsculas de una cadena
• isupper() para comprobar si una cadena está en mayúsculas
• title() para obtener una versión capitalizada de una cadena
• startsswith() para comprobar si la cadena comienza con una subcadena específica
• endswith() para comprobar si la cadena termina con una subcadena específica
• replace() para reemplazar una parte de una cadena
• split() para dividir una cadena en un separador de caracteres específico
• strip() para recortar el espacio en blanco de una cadena
• join() para agregar nuevas letras a una cadena
• find() para encontrar la posición de una subcadena

Y muchas mas.

Ninguno de esos métodos altera la cadena original. En su lugar, devuelven una cadena nueva y modificada. Por ejemplo:

nombre = "Roger"
print(nombre.lower()) #"roger"
print(nombre) #"Roger"

También puedes usar algunas funciones globales para trabajar con cadenas.

En particular, pienso en len(), que te da la longitud de una cadena:

nombre = "Roger"
print(len(nombre)) #5

El operador in te permite verificar si una cadena contiene una subcadena:

nombre = "Roger"
print("ger" in nombre) #True

Escapar es una forma de agregar caracteres especiales a una cadena.

Por ejemplo, ¿cómo agregas una comilla doble en una cadena que está envuelta en comillas dobles?

nombre = "Roger"

"Ro"Ger" no funcionará, ya que Python pensará que la cadena termina en "Ro".

El camino a seguir es hacer escapar a a las comillas dobles dentro de la cadena, con el carácter \ (barra invertida):

nombre = "Ro\"ger"
#"Ro"ger"

Esto también se aplica a las comillas simples \' y a los caracteres de formateo especial como \t para tabulación, \n para nueva línea y \\ para la barra invertida.

Dada una cadena, puedes obtener sus caracteres usando corchetes cuadrados para obtener un elemento específico, dado su índice, comenzando desde cero [0]:

nombre = "Roger"
nombre[0] #'R'
nombre[1] #'o'
nombre[2] #'g'

El uso de un número negativo comenzará a contar desde el final:

nombre = "Roger"
nombre[-1] #"r"

También puedes usar un rango, usando lo que llamamos rebanar(slicing):

nombre = "Roger"
nombre[0:2] #"Ro"
nombre[:2] #"Ro"
nombre[2:] #"ger"

Booleanos en Python

Python proporciona el tipo bool , que puede tener dos valores: True (Verdadero) y False (Falso) (capitalizado).

hecho = False
hecho = True

Los booleanos son especialmente útiles con estructuras de control condicionales como declaraciones if :

hecho = True

if hecho:
    # Ejecuta algun codigo
else:
    # Ejecuta algun otro codigo

Al evaluar un valor para True o False, si el valor no es un bool , tenemos algunas reglas dependiendo del tipo que estemos verificando:

• los números son siempre True excepto el número 0,
• las cadenas son False solo cuando están vacías '',
• las listas, tuplas, conjuntos y diccionarios son False solo cuando están vacíos.

Puedes verificar si un valor es booleano de esta manera:

hecho = True
type(hecho) == bool #True

O usando isinstance(), pasando 2 argumentos: la variable y la clase bool :

hecho = True
isinstance(hecho, bool) #True

La función global any() también es muy útil cuando se trabaja con valores booleanos, ya que devuelve True si alguno de los valores del iterable (lista, por ejemplo) pasado como argumento es True :

libro_1_leido = True
libro_2_leido = False

algun_libro_leido = any([libro_1_leido, libro_2_leido])
#True

La función global all() es la misma, pero devuelve True si todos los valores que se le pasan son True:

ingredientes_comprados = True
comida_preparada = False

list_para_servir = all([ingredientes_comprados, comida_preparada])
#False

Números en Python

Los números en Python pueden ser de 3 tipos: int, float y complex.

Números enteros en Python

Los números enteros se representan mediante la clase int . Puedes definir un entero mediante un valor literal:

edad = 8

También puedes definir un número entero usando el constructor int():

edad = int(8)

Para comprobar si una variable es de tipo int, puedes utilizar la función global type():

type(edad) == int #True

Números flotantes en Python

Los números flotantes (fracciones, decimales) son de tipo float. Puedes definir un entero usando un valor literal:

fraccion = 0.1

O usando el constructor float():

fraccion = float(0.1)

Para comprobar si una variable es de tipo float, puede utilizar la función global type() :

type(fraccion) == float #True

Números complejos en Python

Los números complejos son de tipo complex.

Puedes definirlos usando un valor literal:

numeroComplejo = 2+3j

o usando el constructor complex():

numeroComplejo = complex(2, 3)

Una vez que tengas un número complejo, puedes obtener su parte real e imaginaria:

numeroComplejo.real #2.0
numeroComplejo.imag #3.0

Nuevamente, para verificar si una variable es de tipo complex, puedes usar la función global type():

type(numeroComplejo) == complex #True

Operaciones aritméticas con números en Python

Puedes realizar operaciones aritméticas con números, utilizando los operadores aritméticos: +, -, *, /(división),% (resto), ** (exponenciación) y // (división de piso):

1 + 1 #2
2 - 1 #1
2 * 2 #4
4 / 2 #2
4 % 3 #1
4 ** 2 #16
4 // 2 #2

y puedes utilizar los operadores de asignación compuesta

• +=
• -=
• *=
• /=
• %=
• y así...

para realizar rápidamente operaciones en variables, también:

edad = 8
edad += 1

Funciones integradas en Python

Hay 2 funciones integradas que ayudan con los números:

abs() devuelve el valor absoluto de un número.

round() dado un número, devuelve su valor redondeado al entero más cercano:

round(0.12) #0

Puedes especificar un segundo parámetro para establecer la precisión del punto decimal:

round(0.12, 1) #0.1

Varias otras funciones de utilidad matemática y constantes son proporcionadas por la biblioteca estándar de Python:

• el paquete math proporciona funciones y constantes matemáticas generales.
• el paquete cmath proporciona utilidades para trabajar con números complejos.
• el paquete decimal proporciona utilidades para trabajar con decimales y números decimales.
• el paquete fractions proporciona utilidades para trabajar con números racionales.

Exploraremos algunos de ellos por separado más adelante.

Constantes en Python

Python no tiene forma de exigir que una variable sea una constante.

Lo más cercano que puedes obtener es usar una enumeración:

class Constantes(Enum):
    ANCHURA = 1024
    ALTURA = 256

Y obtener cada valor usando, por ejemplo, Constantes.ANCHURA.value.

Nadie puede reasignar ese valor.

De lo contrario, si deseas confiar en las convenciones de nomenclatura, puedes adherirte a esta: declara las variables que nunca deben cambiar, en mayúsculas:

ANCHURA = 1024

Nadie evitará que sobrescribas este valor, y Python no lo detendrá.

Eso es lo que hace la mayoría del código Python que verás.

Enums en Python

Los Enums son nombres legibles que están vinculados a un valor constante.

Para usar Enums, importa Enum desde el módulo de biblioteca estándar enum:

from enum import Enum

Luego puedes inicializar un nuevo Enum de esta manera:

class Estado(Enum):
    INACTIVO = 0
    ACTIVO = 1

Una vez que lo hagas, puedes hacer referencia a Estado.INACTIVO y Estado.ACTIVO, y sirven como constantes.

Ahora, si intentas imprimir Estado.ACTIVO, por ejemplo:

print(Estado.ACTIVO)

no devolverá 1, sino Estado.ACTIVO.

El mismo valor puede ser alcanzado por el número asignado en el enum: print(Estado(1)) devolverá Estado.ACTIVO. Lo mismo para usar la notación de corchetes Estado['ACTIVO'].

Sin embargo, puedes obtener el valor mediante  Estado.ACTIVO.value.

Puedes enlistar todos los valores posibles de un enum:

list(Estado) # [<Estado.INACTIVO: 0>, <Estado.ACTIVO: 1>]

Puedes contarlos:

len(Estado) # 2

Entradas de usuario en Python

En una aplicación de línea de comandos de Python, puedes mostrar información al usuario mediante la función print():

nombre = "Roger"
print(nombre)

También podemos aceptar la entrada del usuario, usando input():

print('¿Cual es tu edad?')
edad = input()
print('Tu edad es ' + edad)

Este enfoque recibe entradas en tiempo de ejecución, lo que significa que el programa detendrá la ejecución y esperará hasta que el usuario escriba algo y presione la tecla Enter.

También puedes realizar un procesamiento de entradas más complejo y aceptar la entrada en el momento de la invocación del programa, y ​​veremos cómo hacerlo más adelante.

Esto funciona para aplicaciones de línea de comandos. Otros tipos de aplicaciones necesitarán una forma diferente de aceptar la entrada.

Declaraciones de control en Python

Cuando se trata de valores booleanos y expresiones que devuelven un valor booleano en particular, podemos tomar decisiones y diferentes caminos en función de sus valores True o False.

En Python lo hacemos usando la declaración if:

condicion = True

if condicion == True:
    # Hace algo

Cuando la prueba de condición se resuelve en True, como en el caso anterior, el bloque se ejecuta.

¿Qué es un bloque? Un bloque es la parte que tiene una indentación de un nivel (normalmente 4 espacios) a la derecha.

condicion = True

if condicion == True:
    print("La condicion")
    print("era VERDADERA")

El bloque puede estar formado por una sola línea, o también por varias líneas, y termina cuando regresa al nivel de indentación anterior:

condicion = True

if condicion == True:
    print("La condicion")
    print("era VERDADERA")

print("Fuera del IF")

En combinación con if, puedes tener un bloque else que se ejecute si la prueba de condición de if da como resultado False:

condicion = True

if condicion == True:
    print("La condicion")
    print("era VERDADERA")
else:
    print("La condicion")
    print("era FALSA")

Y puedes tener diferentes verificaciones vinculadas if con elif que se ejecutan si la verificación anterior fue falsa:

condicion = True
nombre = "Roger"

if condicion == True:
    print("La condicion")
    print("era VERDADERA")
elif nombre == "Roger":
    print("Hola Roger")
else:
    print("La condicion")
    print("era FALSA")

En este caso, el segundo bloque se ejecuta si condicion es False y el valor de la variable nombre es "Roger".

En una declaración if, puedes tener solo una verificación if y else, pero varias series de verificaciones elif:

condicion = True
nombre = "Roger"

if condicion == True:
    print("La condicion")
    print("era VERDADERA")
elif nombre == "Roger":
    print("Hola Roger")
elif nombre == "Syd":
    print("Hola Syd")
elif nombre == "Flavio":
    print("Hola Flavio")
else:
    print("La condicion")
    print("era FALSA")

if y else también se pueden usar en un formato en-línea, lo que nos permite devolver un valor u otro en función de una condición.

Ejemplo:

a = 2
resultado = 2 if a == 0 else 3
print(resultado) # 3

Listas en Python

Las listas son una estructura de datos esencial de Python.

Te permiten agrupar varios valores y hacer referencia a todos ellos con un nombre común.

Por ejemplo:

perros = ["Roger", "Syd"]

Una lista puede contener valores de diferentes tipos:

items = ["Roger", 1, "Syd", True]

Puedes verificar si un elemento está contenido en una lista con el operador in:

print("Roger" in items) # True

Una lista también se puede definir como vacía:

items = []

Puedes hacer referencia a los elementos en una lista por su índice, comenzando desde cero:

items[0] # "Roger"
items[1] # 1
items[3] # True

Usando la misma notación, puedes cambiar el valor almacenado en un índice específico:

items[0] = "Roger"

También puedes utilizar el método index():

items.index(0) # "Roger"
items.index(1) # 1

Al igual que con las cadenas, el uso de un índice negativo comenzará a buscar desde el final:

items[-1] # True

También puedes extraer una parte de una lista, utilizando porciones(slices):

items[0:2] # ["Roger", 1]
items[2:] # ["Syd", True]

Obtén el número de elementos contenidos en una lista usando la función global len(), la misma que usamos para obtener la longitud de una cadena:

len(items) #4

Puedes agregar elementos a la lista mediante el método append():

items.append("Prueba")

o el método extend()

items.extend(["Prueba"])

También puedes utilizar el operador +=:

items += ["Prueba"]

# los items son ['Roger', 1, 'Syd', True, 'Prueba']

Consejo: con extend() o += no olvides los corchetes. No hagas items += "Prueba" or items.extend("Prueba") o Python agregará 6 caracteres individuales a la lista, lo que dará como resultado ['Roger', 1, 'Syd', True, 'P', 'r', 'u', 'e', 'b', 'a']

Elimina un elemento usando el método remove():

items.remove("Prueba")

Puedes agregar varios elementos usando

items += ["Prueba 1", "Prueba 2"]

#o

items.extend(["Prueba 1", "Prueba 2"])

Estos anexan el elemento al final de la lista.

Para agregar un elemento en el medio de una lista, en un índice específico, usa el método insert():

items.insert("Prueba", 1) 
# agrega "Prueba" en el indice 1

Para agregar varios elementos en un índice específico, debes usar porciones(slices):

items[1:1] = ["Prueba 1", "Prueba 2"]

Ordena una lista usando el método sort():

items.sort()

Consejo: sort() solo funcionará si la lista contiene valores que se pueden comparar. Las cadenas y los enteros, por ejemplo, no se pueden comparar, y obtendrás un error como TypeError: '<' not supported between instances of 'int' and 'str' si lo intentas.

El método  sort() ordena primero las letras mayúsculas y luego las minúsculas. Para solucionar este problema, utiliza:

items.sort(key=str.lower)

El orden(sort) modifica el contenido de la lista original. Para evitarlo, puedes copiar el contenido de la lista utilizando

copiaitems = items[:]

o usa la función global sorted():

print(sorted(items, key=str.lower))

que devolverá una nueva lista, ordenada, en lugar de modificar la lista original.

Tuplas en Python

Las tuplas son otra estructura de datos fundamental de Python.

Te permiten crear grupos inmutables de objetos. Esto significa que una vez que se crea una tupla, no se puede modificar. No puedes agregar ni quitar elementos.

Se crean de forma similar a las listas, pero utilizando paréntesis en lugar de corchetes:

nombres = ("Roger", "Syd")

Una tupla está ordenada, como una lista, por lo que puedes obtener sus valores haciendo referencia a un valor de índice:

nombres[0] # "Roger"
nombres[1] # "Syd"

También puedes usar el método index() :

nombres.index('Roger') # 0
nombres.index('Syd')   # 1

Al igual que con las cadenas y las listas, el uso de un índice negativo comenzará a buscar desde el final:

nombres[-1] # True

Puedes contar los elementos en una tupla con la función len():

len(nombres) # 2

Puedes verificar si un elemento está contenido en una tupla con el operador in:

print("Roger" in nombres) # True

También puedes extraer una parte de una tupla, utilizando porciones(slices):

nombres[0:2] # ('Roger', 'Syd')
nombres[1:] # ('Syd',)

Puedes crear una versión ordenada de una tupla usando la función global sorted():

sorted(nombres)

Puedes crear una nueva tupla a partir de tuplas utilizando el operador +:

nuevaTupla = nombres + ("Vanille", "Tina")

Diccionarios en Python

Los diccionarios son una estructura de datos de Python muy importante.

Mientras que las listas te permiten crear colecciones de valores, los diccionarios permiten crear colecciones de pares clave/valor.

Aquí hay un ejemplo de diccionario con un par clave/valor:

perro = { 'nombre': 'Roger' }

La clave puede ser cualquier valor inmutable como una cadena, un número o una tupla. El valor puede ser el que desees.

Un diccionario puede contener varios pares clave/valor:

perro = { 'nombre': 'Roger', 'edad': 8 }

Puedes acceder a valores de claves individuales utilizando esta notación:

perro['nombre'] # 'Roger'
perro['edad']  # 8

Usando la misma notación, puedes cambiar el valor almacenado en un índice específico:

perro['nombre'] = 'Syd'

Y otra forma es usar el método get(), que tiene una opción para agregar un valor predeterminado:

perro.get('nombre') # 'Roger'
perro.get('prueba', 'predeterminado') # 'predeterminado'

El método pop() recupera el valor de una clave y, posteriormente, elimina el elemento del diccionario.

perro.pop('nombre') # 'Roger'

El método popitem() recupera y elimina el último par clave/valor insertado en el diccionario:

perro.popitem()

Puedes verificar si una clave está contenida en un diccionario con el operador in:

'nombre' in perro # True

Obtén una lista con las claves en un diccionario usando el método keys(), pasando su resultado al constructor list():

list(perro.keys()) # ['nombre', 'edad']

Obtén los valores usando el método values() y las tuplas de pares clave/valor usando el método items():

print(list(perro.values()))
# ['Roger', 8]

print(list(perro.items()))
# [('nombre', 'Roger'), ('edad', 8)]

Obtén la longitud de un diccionario usando la función global len(), la misma que usamos para obtener la longitud de una cadena o los elementos de una lista:

len(perro) #2

Puedes agregar un nuevo par clave/valor al diccionario de esta manera:

perro['comida favorita'] = 'Carne'

Puedes eliminar un par clave/valor de un diccionario usando la declaración del:

del perro['comida favorita']

Para copiar un diccionario, use el método copy():

perroCopia = perro.copy()

Conjuntos en Python

Los conjuntos(sets) son otra estructura de datos importante de Python.

Podemos decir que funcionan como tuplas, pero no están ordenadas y son mutables.

O podemos decir que funcionan como diccionarios, pero no tienen claves.

También tienen una versión inmutable, llamada frozenset.

Puedes crear un conjunto usando esta sintaxis:

nombres = {"Roger", "Syd"}

Los conjuntos funcionan bien cuando se los considera conjuntos matemáticos.

Puedes intersecar dos conjuntos:

conjunto1 = {"Roger", "Syd"}
conjunto2 = {"Roger"}

interseccion = conjunto1 & conjunto2 #{'Roger'}

Puedes crear una unión de dos conjuntos:

conjunto1 = {"Roger", "Syd"}
conjunto2 = {"Luna"}

union = conjunto1 | conjunto2
#{'Syd', 'Luna', 'Roger'}

Puedes obtener la diferencia entre dos conjuntos:

conjunto1 = {"Roger", "Syd"}
conjunto2 = {"Roger"}

diferencia = conjunto1 - conjunto2 #{'Syd'}

Puedes comprobar si un conjunto es un superconjunto de otro (y, por supuesto, si un conjunto es un subconjunto de otro):

conjunto1 = {"Roger", "Syd"}
conjunto2 = {"Roger"}

esSuperconjunto = conjunto1 > conjunto2 # True

Puedes contar los elementos de un conjunto con la función global len():

nombres = {"Roger", "Syd"}
len(nombres) # 2

Puedes obtener una lista de los elementos de un conjunto pasando el conjunto al constructor list():

nombres = {"Roger", "Syd"}
list(nombres) #['Syd', 'Roger']

Puedes verificar si un elemento está contenido en un conjunto con el operador in:

print("Roger" in nombres) # True

Funciones en Python

Una función nos permite crear un conjunto de instrucciones que podemos ejecutar cuando sea necesario.

Las funciones son esenciales en Python y en muchos otros lenguajes de programación. Nos ayudan a crear programas significativos, porque nos permiten descomponer un programa en partes manejables y promueven la legibilidad y la reutilización del código.

Aquí hay una función de ejemplo llamada hola que imprime "¡Hola!":

def hola():
    print('Hola!')

Esta es la definición de la función. Hay un nombre hola y un cuerpo, el conjunto de instrucciones, que es la parte que sigue a los dos puntos. Tiene una indentación de un nivel a la derecha.
Para ejecutar esta función, debemos llamarla. Esta es la sintaxis para llamar a la función:

hola()

Podemos ejecutar esta función una o varias veces.

El nombre de la función, hola, es muy importante. Debe ser descriptivo, para que cualquiera que lo llame pueda imaginar lo que hace la función.

Una función puede aceptar uno o más parámetros:

def hola(nombre):
    print('Hola ' + nombre + '!')

En este caso llamamos a la función pasando el argumento

hola('Roger')

Llamamos parámetros a los valores aceptados por la función dentro de la definición de la función, y argumentos a los valores que pasamos a la función cuando la llamamos. Es común confundirse con esta distinción.

Un argumento puede tener un valor predeterminado que se aplica si no se especifica el argumento:

def hola(nombre='mi amigo'):
    print('Hola ' + nombre + '!')

hola()
# Hola mi amigo!

Así es como podemos aceptar múltiples parámetros:

def hola(nombre, edad):
    print('Hola ' + nombre + ', tienes ' + str(edad) + ' a_os de edad!')

En este caso llamamos a la función pasando un conjunto de argumentos:

hola('Roger', 8)

Los parámetros se pasan por referencia. Todos los tipos en Python son objetos, pero algunos de ellos son inmutables, incluidos enteros, booleanos, flotantes, cadenas y tuplas. Esto significa que si los pasas como parámetros y modificas su valor dentro de la función, el nuevo valor no se refleja fuera de la función:

def cambio(valor):
    valor = 2

val = 1
cambio(val)

print(val) #1

Si pasas un objeto que no es inmutable y cambia una de sus propiedades, el cambio se reflejará en el exterior.

Una función puede devolver un valor mediante la declaración de return. Por ejemplo, en este caso devolvemos el nombre del parámetro nombre:

def hola(nombre):
    print('Hola ' + nombre + '!')
    return nombre

Cuando la función cumple con la declaración return, la función finaliza.

Podemos omitir el valor:

def hola(nombre):
    print('Hola ' + nombre + '!')
    return

Podemos tener la declaración de retorno dentro de un condicional, que es una forma común de finalizar una función si no se cumple una condición inicial:

def hola(nombre):
    if not nombre:
        return
    print('Hola ' + nombre + '!')

Si llamamos a la función pasando un valor que se evalúa como False, como una cadena vacía, la función finaliza antes de llegar a la declaración print().

Puedes devolver varios valores utilizando valores separados por comas:

def hola(nombre):
    print('Hola ' + nombre + '!')
    return nombre, 'Roger', 8

En este caso, al llamar a hola('Syd'), el valor de retorno es una tupla que contiene esos 3 valores: ('Syd', 'Roger', 8).

Objetos en Python

Todo en Python es un objeto.

Incluso los valores de tipos primitivos básicos (enteros, cadenas, flotantes...) son objetos. Las listas son objetos, al igual que las tuplas, los diccionarios, todo.

Los objetos tienen atributos y métodos a los que se puede acceder mediante la sintaxis de punto.

Por ejemplo, intenta definir una nueva variable de tipo int:

edad = 8

edad ahora tiene acceso a las propiedades y métodos definidos para todos los objetos int.

Esto incluye, por ejemplo, el acceso a la parte real e imaginaria de ese número:

print(edad.real) # 8
print(edad.imag) # 0

print(edad.bit_length()) #4

# el metodo bit_length() devuelve el numero de bits necesarios para representar este numero en notación binaria

Una variable que contiene un valor de lista tiene acceso a un conjunto diferente de métodos:

items = [1, 2]
items.append(3)
items.pop()

Los métodos dependen del tipo de valor.

La función global id() proporcionada por Python permite inspeccionar la ubicación en la memoria de un objeto en particular

id(edad) # 140170065725376

Tu valor de memoria cambiará, solo lo muestro como un ejemplo.

Si asignas un valor diferente a la variable, su dirección cambiará, porque el contenido de la variable ha sido reemplazado por otro valor almacenado en otra ubicación de la memoria:

edad = 8

print(id(edad)) # 140535918671808

edad = 9

print(id(edad)) # 140535918671840

Pero si modificas el objeto usando sus métodos, la dirección permanece igual:

items = [1, 2]

print(id(items)) # 140093713593920

items.append(3)

print(items) # [1, 2, 3]
print(id(items)) # 140093713593920

La dirección solo cambia si reasignas una variable a otro valor.

Algunos objetos son mutables, mientras que otros son inmutables. Esto depende del objeto en sí.

Si el objeto proporciona métodos para cambiar su contenido, entonces es mutable. De lo contrario, es inmutable.

La mayoría de los tipos definidos por Python son inmutables. Por ejemplo, un int es inmutable. No hay métodos para cambiar su valor. Si incrementas el valor usando

edad = 8
edad = edad + 1

# o 

edad += 1

y verificas con id(edad), encontrarás que la edad apunta a una ubicación de memoria diferente. El valor original no ha cambiado, simplemente cambiamos a otro valor.

Bucles en Python

Los bucles son una parte esencial de la programación.

En Python tenemos 2 tipos de bucles: bucles while y bucles for.

Bucles while en Python

Bucles while se definen utilizando la palabra clave while y repiten su bloque hasta que la condición se evalúa como False:

condicion = True
while condicion == True:
    print("La condicion es verdadera")

Este es un bucle infinito. Nunca termina.

Detengamos el ciclo justo después de la primera iteración:

condicion = True
while condicion == True:
    print("La condicion es verdadera")
    condicion = False

print("Despues del bucle")

En este caso, se ejecuta la primera iteración, ya que la prueba de condición se evalúa como True. En la segunda iteración, la prueba de condición se evalúa como False, por lo que el control pasa a la siguiente instrucción después del ciclo.

Es común tener un contador para detener la iteración después de algunos ciclos:

contador = 0
while contador < 10:
    print("La condicion es verdadera")
    contador = contador + 1

print("Despues del bucle")

Bucles for en Python

Usando bucles for podemos decirle a Python que ejecute un bloque por una cantidad predeterminada de veces, por adelantado, y sin la necesidad de una variable separada y condicional para verificar su valor.

Por ejemplo, podemos iterar los elementos de una lista:

items = [1, 2, 3, 4]
for item in items:
    print(item)

O puedes iterar una cantidad específica de veces usando la función range():

for item in range(04):
    print(item)

range(4)crea una secuencia que comienza desde 0 y contiene 4 elementos: [0, 1, 2, 3].

Para obtener el índice, debes ajustar la secuencia en la función enumerate():

items = [1, 2, 3, 4]
for indice, item in enumerate(items):
    print(indice, item)

Break y continue en Python

Tanto los bucles while como for pueden interrumpirse dentro del bloque, utilizando dos palabras clave especiales:  break y continue.

continue detiene la iteración actual y le dice a Python que ejecute la siguiente.

break detiene el bucle por completo y continúa con la siguiente instrucción después que termina el bucle.

El primer ejemplo aquí imprime 1, 3, 4. El segundo ejemplo imprime 1:

items = [1, 2, 3, 4]
for item in items:
    if item == 2:
        continue
    print(item)

items = [1, 2, 3, 4]
for item in items:
    if item == 2:
        break
    print(item)

Clases en Python

Además de usar los tipos proporcionados por Python, podemos declarar nuestras propias clases y, a partir de las clases, podemos crear instancias de objetos.

Un objeto es una instancia de una clase. Una clase es el tipo de objeto.

Podemos definir una clase de esta manera:

class <nombre_clase>:
    # mi clase

Por ejemplo, definamos una clase Perro:

class Perro:
    # la clase Perro

Una clase puede definir métodos:

class Perro:
    # la clase Perro
    def ladrido(self):
        print('Guau!')

self ya que el argumento del método apunta a la instancia del objeto actual y debe especificarse al definir un método.

Creamos una instancia de una clase, un objeto, usando esta sintaxis:

roger = Perro()

Ahora roger es un nuevo objeto de tipo Perro.

Si ejecutas:

print(type(roger))

Obtendrás <class '__main__.Perro'>

Un tipo especial de método, __init__() se llama constructor, y podemos usarlo para inicializar una o más propiedades cuando creamos un nuevo objeto de esa clase:

class Perro:
    # la clase Perro
    def __init__(self, nombre, edad):
        self.nombre = nombre
        self.edad = edad

    def ladrido(self):
        print('Guau!')

La usamos de esta manera:

roger = Perro('Roger', 8)
print(roger.nombre) # 'Roger'
print(roger.edad)  # 8

roger.ladrido() # 'Guau!'

Una característica importante de las clases es la herencia.

Podemos crear una clase Animal con un método caminar():

class Animal:
    def caminar(self):
        print('Caminando..')

y la clase Perro puede heredar de Animal:

class Perro(Animal):
    def ladrido(self):
        print('Guau!')

Ahora, la creación de un nuevo objeto de la clase Perro tendrá el método caminar(), ya que se hereda de Animal:

roger = Perro()
roger.caminar() # 'Caminando..'
roger.ladrido() # 'Guau!'

Módulos en Python

Cada archivo de Python es un módulo.

Puedes importar un módulo desde otros archivos, y esa es la base de cualquier programa de complejidad moderada, ya que promueve una organización sensata y la reutilización del código.

En el programa típico de Python, un archivo actúa como punto de entrada. Los otros archivos son módulos y exponen funciones que podemos llamar desde otros archivos.

El archivo perro.py contiene este código:

def ladrido():
    print('Guau!')

Podemos importar esta función desde otro archivo usando import. Y una vez que lo hagamos, podemos hacer referencia a la función usando la notación de puntos, perro.ladrido():

import perro

perro.ladrido()

O podemos usar la sintaxis from ... import y llamar a la función directamente:

from perro import ladrido

ladrido()

La primera estrategia nos permite cargar todo lo definido en un archivo.

La segunda estrategia nos permite elegir las cosas que necesitamos.

Esos módulos son específicos de tu programa y la importación depende de la ubicación del archivo en el sistema de archivos.

Supongamos que colocas perro.py en una subcarpeta lib.

En esa carpeta, debes crear un archivo vacío llamado __init__.py. Esto le dice a Python que la carpeta contiene módulos.

Ahora puedes elegir -puedes importar perro desde lib:

from lib import perro

perro.ladrido()

o puedes hacer referencia a la función específica del módulo de perro que se importa desde lib.perro:

from lib.perro import ladrido

ladrido()

Librería estándar de Python

Python expone una gran cantidad de funciones integradas a través de su librería estándar.

La librería estándar es una gran colección de todo tipo de utilidades, que van desde las matemáticas hasta la depuración y la creación de interfaces gráficas de usuario.

Puedes encontrar la lista completa en inglés de módulos de la biblioteca estándar aquí: https://docs.python.org/3/library/index.html

Algunos de los módulos importantes son:

• math para utilidades matemáticas
• re para expresiones regulares
• json para trabajar con JSON
• datetime para trabajar con fechas
• sqlite3 para usar SQLite
• os para utilidades de Sistemas Operativos
• random para la generación de números aleatorios
• statistics para utilidades estadísticas
• requests para realizar solicitudes de red HTTP
• http para crear servidores HTTP
• urllib para administrar URLs

Introduzcámos cómo usar un módulo de la biblioteca estándar. Ya sabes cómo usar los módulos que creas, importando desde otros archivos en la carpeta del programa.

Bueno, eso es lo mismo con los módulos proporcionados por la biblioteca estándar:

import math

math.sqrt(4) # 2.0

ó

from math import sqrt

sqrt(4) # 2.0

Pronto exploraremos los módulos más importantes de forma individual para comprender qué podemos hacer con ellos.

La guía de estilo PEP8 en Python

Cuando escribes código, debes adherirte a las convenciones del lenguaje de programación que utilizas.

Si aprendes las convenciones correctas de nomenclatura y formato desde el principio, será más fácil leer el código escrito por otras personas, y las personas encontrarán tu código más fácil de leer.

Python define sus convenciones en la guía de estilo PEP8. PEP son las siglas de Python Enhancement Proposals y es el lugar donde ocurren todas las mejoras y discusiones del lenguaje Python.

Hay muchas propuestas de PEP, todas disponibles en https://www.python.org/dev/peps/.

PEP8 es una de las primeras y también una de las más importantes. Define el formato y también algunas reglas sobre cómo escribir Python de forma "pitónica"("pythonic").

Puedes leer su contenido completo aquí: https://www.python.org/dev/peps/pep-0008/ pero aquí hay un resumen rápido de los puntos importantes con los que puedes comenzar:

• Aplicar indentación mediante espacios, no tabulaciones
• Indentar usando 4 espacios.
• Los archivos de Python están codificados en UTF-8
• Usa un máximo de 80 columnas para tu código
• Escribe cada declaración en su propia línea.
• Las funciones, los nombres de las variables y los nombres de los archivos están en minúsculas, con guiones bajos entre las palabras (snake_case)
• Los nombres de las clases están en mayúscula, las palabras separadas también se escriben con la letra mayúscula, (camelCase)
• Los nombres de los paquetes están en minúsculas y no tienen guiones bajos entre las palabras.
• Las variables que no deben cambiar (constantes) se escriben en mayúsculas
• Los nombres de las variables deben ser significativos
• Agrega comentarios útiles, pero evita los comentarios obvios
• Agregar espacios alrededor de los operadores
• No uses espacios en blanco innecesarios
• Agregar una línea en blanco antes de una función
• Agregar una línea en blanco entre los métodos de una clase
• Dentro de las funciones/métodos, las líneas en blanco se pueden usar para separar bloques de código relacionados para ayudar a la legibilidad

Depurando en Python

La depuración es una de las mejores habilidades que puedes aprender, ya que te ayudará en muchas situaciones difíciles.

Cada lenguaje tiene su depurador. Python tiene pdb, disponible a través de la biblioteca estándar.

Depura agregando un punto de interrupción en tu código:

breakpoint()

Puedes agregar más puntos de interrupción si es necesario.

Cuando el intérprete de Python llegue a un punto de interrupción en tu código, se detendrá y te dirá cuál es la siguiente instrucción que ejecutará.

Luego, puedes hacer algunas cosas.

Puedes escribir el nombre de cualquier variable para inspeccionar su valor.

Puedes presionar n para pasar a la siguiente línea en la función actual. Si el código llama a funciones, el depurador no entra en ellas y las considera "cajas negras"(black boxes).

Puedes presionar s para pasar a la siguiente línea en la función actual. Si la siguiente línea es una función, el depurador entra en ella y luego puedes ejecutar una instrucción de esa función a la vez.

Puedes presionar c para continuar la ejecución del programa con normalidad, sin necesidad de hacerlo paso a paso

Puedes presionar q para detener la ejecución del programa.

La depuración es útil para evaluar el resultado de una instrucción, y es especialmente bueno saber cómo usarla cuando tienes iteraciones o algoritmos complejos que deseas corregir.

Ámbito de variable en Python

Cuando declaras una variable, esa variable es visible en partes de tu programa, dependiendo de dónde la declares.

Si la declaras fuera de cualquier función, la variable es visible para cualquier código que se ejecute después de la declaración, incluidas las funciones:

edad = 8

def prueba():
    print(edad)

print(edad) # 8
prueba() # 8

Lo llamamos variable global.

Si defines una variable dentro de una función, esa variable es una variable local y solo es visible dentro de esa función. Fuera de la función, no es accesible:

def prueba():
    edad = 8
    print(edad)

prueba() # 8

print(edad)
# # # NameError: name 'edad' is not defined
# Error: el nombre 'edad' no está definido

Cómo aceptar argumentos desde la línea de comandos en Python

Python ofrece varias formas de manejar los argumentos pasados cuando invocamos el programa desde la línea de comandos.

Hasta ahora has ejecutado programas desde un REPL o usando

python <nombre_de_archivo>.py

Puedes pasar argumentos y opciones adicionales cuando lo hagas, como este:

python <nombre_de_archivo>.py <argumento1>
python <nombre_de_archivo>.py <argumento1> <argumento2>

Una forma básica de manejar esos argumentos es usar el módulo sys de la biblioteca estándar.

Puedes obtener los argumentos pasados en la lista sys.argv:

import sys
print(len(sys.argv))
print(sys.argv)

La lista sys.argv contiene como primer elemento el nombre del archivo que se ejecutó, por ejemplo ['archivo.py'].

Es una forma sencilla, pero tienes mucho trabajo por hacer. Debes validar los argumentos, asegurarte de que su tipo sea correcto y debes imprimir comentarios al usuario si no está usando el programa correctamente.

Python proporciona otro paquete en la biblioteca estándar para ayudarlo: argparse.

Primero importa argparse y llama a argparse.ArgumentParser(), pasando la descripción de tu programa:

import argparse

parser = argparse.ArgumentParser(
    description='Este programa imprime los nombres de mis perros'
)

Luego procedes a agregar los argumentos que deseas aceptar, por ejemplo en este programa aceptamos una opción -c para pasar un color, así:

python program.py -c red

import argparse

parser = argparse.ArgumentParser(
    description='Este programa imprime un valor de color HEX'
)

parser.add_argument('-c', '--color', metavar='color', required=True, help='el color que se va a buscar')

args = parser.parse_args()

print(args.color) # 'red'(rojo) 

Si no se especifica el argumento, el programa genera un error:

➜  python python programa.py
usage: programa.py [-h] -c color
programa.py: error: the following arguments are required: -c

(#programa.py: error: los siguientes argumentos son requeridos: -c)

Puedes configurar una opción para tener un conjunto específico de valores, usando choices(opciones):

parser.add_argument('-c', '--color', metavar='color', required=True, choices={'red','yellow'}, help='el color a buscar, en ingles')

➜  python python programa.py -c blue
usage: programa.py [-h] -c color
programa.py: error: argument -c/--color: invalid choice: 'blue' (choose from 'yellow', 'red')

#programa.py: error: argumentp -c/--color: opcion invalida: 'blue' (elija entre 'yellow', 'red')

Hay más opciones, pero esas son las básicas.

Y hay paquetes comunitarios que también brindan esta funcionalidad, como Click y Python Prompt Toolkit.

Funciones Lambda en Python

Las funciones lambda (también llamadas funciones anónimas) son funciones diminutas que no tienen nombre y solo tienen una expresión como cuerpo.

En Python se definen mediante la palabra clave lambda:

lambda <argumentos> : <expresión>

El cuerpo debe ser una sola expresión -una expresión, no una declaración.

Esta diferencia es importante. Una expresión devuelve un valor, una declaración no.

El ejemplo más simple de una función lambda es una función que duplica el valor de un número:

lambda num : num * 2

Las funciones Lambda pueden aceptar más argumentos:

lambda a, b : a * b

Las funciones de Lambda no se pueden invocar directamente, pero puedes asignarlas a variables:

multiplicar = lambda a, b : a * b

print(multiplicar(2, 2)) # 4

La utilidad de las funciones lambda viene cuando se combina con otras funciones de Python, por ejemplo en combinación con map(), filter() y reduce().

Recursión en Python

Una función en Python puede llamarse a sí misma. Eso es la recursividad. Y puede ser bastante útil en muchos escenarios.

La forma común de explicar la recursividad es mediante el cálculo factorial.

El factorial de un número es el número n multiplicado por n-1, multiplicado por n-2 ... y así sucesivamente, hasta llegar al número 1:

3! = 3 * 2 * 1 = 6
4! = 4 * 3 * 2 * 1 = 24
5! = 5 * 4 * 3 * 2 * 1 = 120

Usando la recursividad podemos escribir una función que calcule el factorial de cualquier número:

def factorial(n):
    if n == 1: return 1
    return n * factorial(n-1)

print(factorial(3)) #   6
print(factorial(4)) #  24
print(factorial(5)) # 120

Si dentro de la función factorial() llamas a factorial(n) en lugar de factorial(n-1), vas a provocar una recursión infinita. Python, de forma predeterminada detendrá las recursiones en 1000 llamadas, y cuando se alcance este límite, obtendrás un error RecursionError.

La recursividad es útil en muchos lugares y nos ayuda a simplificar nuestro código cuando no hay otra forma óptima de hacerlo, por lo que es bueno conocer esta técnica.

Funciones anidadas en Python

Las funciones en Python se pueden anidar dentro de otras funciones.

Una función definida dentro de una función es visible solo dentro de esa función.

Esto es conveniente para crear utilidades que sean útiles para una función, pero no útiles fuera de ella.

Podrías preguntar: ¿por qué debería "ocultar" esta función, si no hace daño?

Uno, porque siempre es mejor ocultar la funcionalidad que es local a una función y no es útil en otros lugares.

Además, porque podemos hacer uso de closures(sobre esto más adelante).

Aquí hay un ejemplo:

def hablar(frase):
    def decir(palabra):
        print(palabra)

    palabras = frase.split(' ')
    for palabra in palabras:
        decir(palabra)

hablar('Voy a comprar la leche')

Si deseas acceder a una variable definida en la función externa desde la función interna, primero debes declararla como nonlocal(no local):

def conteo():
    conteo = 0

    def incrementar():
        nonlocal conteo
        conteo = conteo + 1
        print(conteo)

    incrementar()

conteo()

Esto es útil especialmente con closures, como veremos a continuación.

Closures en Python

Si devuelves una función anidada de una función, esa función anidada tiene acceso a las variables definidas en esa función, incluso si esa función ya no está activa.

Aquí hay un ejemplo de contador simple.

def contador():
    conteo = 0

    def incrementar():
        nonlocal conteo
        conteo = conteo + 1
        return conteo

    return incrementar

incrementar = contador()

print(incrementar()) # 1
print(incrementar()) # 2
print(incrementar()) # 3

Devolvemos la función interna incrementar(), que todavía tiene acceso al estado de la variable conteo aunque la función contador() haya finalizado.

Decoradores en Python

Los decoradores son una forma de cambiar, mejorar o alterar de cualquier forma el funcionamiento de una función.

Los decoradores se definen con el símbolo @ seguido del nombre del decorador, justo antes de la definición de la función.

Ejemplo:

@registro
def hola():
    print('¡hola!')

Esta función hola tiene asignado el decorador de registro.

Siempre que llamemos a hola(), se llamará al decorador.

Un decorador es una función que toma una función como parámetro, envuelve la función en una función interna que realiza el trabajo que tiene que hacer y devuelve esa función interna. En otras palabras:

def registro(func):
    def envoltura():
        # hace algo antes
        val = func()
        # hace algo después
        return val
    return envoltura

Docstrings en Python

La documentación es muy importante, no solo para comunicar a otras personas cuál es el objetivo de una función / clase / método / módulo, sino que también te lo comunicas a ti mismo.

Cuando regreses a tu código dentro de 6 o 12 meses, es posible que no recuerdes todo el conocimiento que tienes en la cabeza. En ese momento, leer tu código y comprender lo que se supone que debe hacer será mucho más difícil.

Los comentarios son una forma de ayudarte a tí mismo (y a los demás):

# esto es un comentario

num = 1 # esto es otro comentario

Otra forma es utilizar docstrings(cadenas de documentación).

La utilidad de las docstrings es que siguen convenciones. Como tales, pueden procesarse automáticamente.

Así es como se define una docstring para una función:

def incrementar(n):
    """Incrementa un numero"""
    return n + 1

Así es como se define una docstring para una clase y un método:

class Perro:
    """Una clase que representa un perro"""
    def __init__(self, nombre, edad):
        """Inicializar un nuevo perro"""
        self.nombre = nombre
        self.edad = edad

    def ladrido(self):
        """Permite ladrar al perro"""
        print('WOF!')

Documenta un módulo colocando una cadena de documentos en la parte superior del archivo, por ejemplo, suponiendo que se trata de perro.py:

"""Modulo Perro

Este modulo hace ... bla bla bla y provee las siguientes clases:

- Perro
...
"""

class Perro:
    """Una clase que representa un perro"""
    def __init__(self, nombre, edad):
        """Inicializar un nuevo perro"""
        self.nombre = nombre
        self.edad = edad

    def ladrido(self):
        """Permite ladrar al perro"""
        print('WOF!')

Docstrings pueden abarcar varias líneas:

def incrementar(n):
    """Incrementa
    un numero
    """
    return n + 1

Python los procesará, y puedes usar la función global help() para obtener la documentación de una clase/método/función/módulo.

Por ejemplo, llamar a help(incrementar) te dará esto:

#Help on function incrementar in module __main__:
#Ayuda en función incrementar en el modulo __main__:

incrementar(n)
    Incrementa
    un número

Hay muchos estándares diferentes para formatear docstrings, y puedes elegir adherirte a tu favorito.

Me gusta el estándar de Google(inglés): https://github.com/google/styleguide/blob/gh-pages/pyguide.md#38-comments-and-docstrings

Los estándares permiten tener herramientas para extraer docstrings y generar automáticamente documentación para tu código.

Introspección en Python

Las funciones, variables y objetos se pueden analizar mediante la introspección.

Primero, usando la función global help() podemos obtener la documentación si se proporciona en forma de docstrings.

Luego, puede usar print() para obtener información sobre una función:

def incrementar(n):
    return n + 1

print(incrementar)

# <function incrementar at 0x7f420e2973a0>

o un objeto:

class Perro():
    def ladrido(self):
        print('WOF!')

roger = Perro()

print(roger)

# <__main__.Perro object at 0x7f42099d3340>

La función type() nos da el tipo de objeto:

print(type(incrementar))
# <class 'function'>

print(type(roger))
# <class '__main__.Perro'>

print(type(1))
# <class 'int'>

print(type('test'))
# <class 'str'>

La función global dir() nos permite conocer todos los métodos y atributos de un objeto:

print(dir(roger))

# ['__class__', '__delattr__', '__dict__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__le__', '__lt__', '__module__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__sizeof__', '__str__', '__subclasshook__', '__weakref__', 'ladrido']

La función global id() nos muestra la ubicación en la memoria de cualquier objeto:

print(id(roger)) # 140227518093024
print(id(1))     # 140227521172384

Puede resultar útil comprobar si dos variables apuntan al mismo objeto.

El módulo de biblioteca estándar para inspección inspect nos brinda más herramientas para obtener información sobre objetos, y puedes consultarlo aquí: https://docs.python.org/3/library/inspect.html(inglés)

Anotaciones en Python

Python se escribe dinámicamente. No tenemos que especificar el tipo de una variable o parámetro de función, o un valor de retorno de función.

Las anotaciones nos permiten (opcionalmente) hacer eso.

Esta es una función sin anotaciones:

def incrementar(n):
    return n + 1

Esta es la misma función con anotaciones:

def incrementar(n: int) -> int:
    return n + 1

También puedes anotar variables:

conteo: int = 0

Python ignorará esas anotaciones. Una herramienta separada llamada mypy se puede ejecutar de forma independiente o integrada por IDE como VS Code o PyCharm, para verificar automáticamente los errores de tipo de forma estática, mientras estás programando. También te ayudará a detectar errores de discrepancia de tipos incluso antes de ejecutar el código.

Una gran ayuda, especialmente cuando tu software se vuelve grande y necesitas refactorizar el código.

Excepciones en Python

Es importante tener una forma de manejar los errores, y Python nos brinda un manejo de excepciones para hacerlo.

Si envuelven líneas de código en un bloque try:

try:
    # algunas lineas de codigo

Si ocurre un error, Python te alertará y podrás determinar qué tipo de error ocurrió usando bloques except:

try:
    # algunas lineas de codigo
except <ERROR1>:
    # manejo de <ERROR1>
except <ERROR2>:
    # manejo de <ERROR2>

Para atrapar a todas las excepciones, puedes usar except sin ningún tipo de error:

try:
    # algunas lineas de codigo
except <ERROR1>:
    # manejo de <ERROR1>
except:
    # atrapar todas las demas excepciones

El bloque else se ejecuta si no se encontraron excepciones:

try:
    # algunas lineas de codigo
except <ERROR1>:
    # manejo de <ERROR1>
except <ERROR2>:
    # manejo de <ERROR2>
else:
    # no surgieron excepciones, el codigo se ejecuto correctamente

Un bloque finally permite realizar alguna operación en cualquier caso, independientemente de si se produjo un error o no:

try:
    # algunas lineas de codigo
except <ERROR1>:
    # manejo de <ERROR1>
except <ERROR2>:
    # manejo de <ERROR2>
else:
    # no surgieron excepciones, el codigo se ejecuto correctamente
finally:
    # hacer algo de todos modos

El error específico que va a ocurrir depende de la operación que estés realizando.

Por ejemplo, si estás leyendo un archivo, es posible que obtengas un EOFError. Si divides un número por cero obtendrás un ZeroDivisionError. Si tienes un problema de conversión de tipos, es posible que obtengas un TypeError.

Prueba este código:

resultado = 2 / 0
print(resultado)

El programa terminará con un error:

Traceback (most recent call last):
  File "main.py", line 1, in <module>
    resultado = 2 / 0
ZeroDivisionError: division by zero

#Rastreo (la mas reciente última llamada):
# Archivo "main.py", linea 1, en <modulo>
# 	resultado = 2 / 0
#ZeroDivisionError: division por cero

y las líneas de código después del error no se ejecutarán.

Agregar esa operación en un bloque try: nos permite recuperarnos con gracia y seguir adelante con el programa:

try:
    resultado = 2 / 0
except ZeroDivisionError:
    print('No se puede dividir por cero!')
finally:
    resultado = 1

print(resultado) # 1

También puedes generar excepciones en tu propio código, utilizando la declaración raise:

raise Exception('Ha ocurrido un error!')

Esto genera una excepción general y puedes interceptarla usando:

try:
    raise Exception('Ha ocurrido un error!')
except Exception as error:
    print(error)

También puedes definir tu propia clase de excepción, desde Exception:

class PerroNoEncontradoExcepcion(Exception):
    pass

pass aquí significa "nada" y debemos usarlo cuando definimos una clase sin métodos, o una función sin código también.

try:
    raise PerroNoEncontradoExcepcion()
except PerroNoEncontradoExcepcion:
    print('Perro no encontrado!')

Declaración with en Python

La declaración with es muy útil para simplificar el trabajo con el manejo de excepciones.

Por ejemplo, cuando trabajamos con archivos, cada vez que abrimos un archivo, debemos recordar cerrarlo.

with hace que este proceso sea transparente.

En lugar de escribir:

nombre = '/Users/flavio/prueba.txt'

try:
    archivo = open(nombre, 'r')
    contenido = archivo.read()
    print(contenido)
finally:
    archivo.close()

Puedes escribir:

nombre = '/Users/flavio/prueba.txt'

with open(nombre, 'r') as archivo:
    contenido = archivo.read()
    print(contenido)

En otras palabras, tenemos un manejo de excepciones implícito incorporado, ya que close() se llamará automáticamente para nosotros.

with no solo es útil para trabajar con archivos. El ejemplo anterior solo pretende presentar sus capacidades.

Cómo instalar paquetes de terceros en Python usando pip

La biblioteca estándar de Python contiene una gran cantidad de utilidades que simplifican nuestras necesidades de desarrollo de Python, pero nada puede satisfacerlo todo.

Es por eso que las personas y las empresas crean paquetes y los ponen a disposición como software de código abierto para toda la comunidad.

Todos esos módulos se recopilan en un solo lugar, Python Package Index (índice de paquetes de Python); disponible en https://pypi.org, y se pueden instalar en tu sistema usando pip.

Hay más de 270.000 paquetes disponibles gratuitamente al momento de escribir este artículo.

Deberías tener pip ya instalado si seguiste las instrucciones de instalación de Python.

Instala cualquier paquete usando el comando pip install:

pip install <paquete>

o, si tienes problemas, también puedes ejecutarlo a través de python -m:

python -m pip install <paquete>

Por ejemplo, puedes instalar el paquete requests, una biblioteca HTTP popular:

pip install requests

y una vez que lo hagas, estará disponible para todos tus scripts de Python, porque los paquetes se instalan globalmente.

La ubicación exacta depende de tu sistema operativo.

En macOS, con Python 3.9, la ubicación es /Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages.

Actualiza un paquete a su última versión usando:

pip install –U <paquete>

Instale una versión específica de un paquete usando:

pip install <paquete>==<version>

Desinstala un paquete usando:

pip uninstall <paquete>

Muestra los detalles de un paquete instalado, incluida la versión, el sitio web de documentación y la información del autor mediante:

pip show <paquete>

Comprensiones de lista en Python

Las comprensiones de lista son una forma de crear listas de una manera muy concisa.

Supongamos que tienes una lista:

numeros = [1, 2, 3, 4, 5]

Puedes crear una nueva lista usando una comprensión de lista, compuesta por los elementos de la lista de números, elevados a 2:

numeros_elevados_a_2 = [n**2 for n in numeros]
# [1, 4, 9, 16, 25]

Las comprensiones de lista son una sintaxis que a veces se prefiere a los bucles, ya que es más legible cuando la operación se puede escribir en una sola línea:

numeros_elevados_a_2 = []
for n in numeros:
    numeros_elevados_a_2.append(n**2)

y sobre map():

numeros_elevados_a_2 = list(map(lambda n : n**2, numeros))

Polimorfismo en Python

El polimorfismo generaliza una funcionalidad para que pueda funcionar en diferentes tipos. Es un concepto importante en la programación orientada a objetos.

Podemos definir el mismo método en diferentes clases:

class Perro:
    def comer():
        print('Comiendo comida de perro')

class Gato:
    def comer():
        print('Comiendo comida de gato')

Luego podemos generar objetos y podemos llamar al método comer() independientemente de la clase a la que pertenezca el objeto, y obtendremos resultados diferentes:

animal1 = Perro()
animal2 = Gato()

animal1.comer()
animal2.comer()

Creamos una interfaz generalizada y ahora no necesitamos saber que un animal es un Gato o un Perro.

Sobrecarga de operador en Python

La sobrecarga de operadores es una técnica avanzada que podemos utilizar para hacer que las clases sean comparables y que funcionen con los operadores de Python.

Tomemos una clase Perro:

class Perro:
    # la clase Perro
    def __init__(self, nombre, edad):
        self.nombre = nombre
        self.edad = edad

Creemos 2 objetos Perro:

roger = Perro('Roger', 8)
syd = Perro('Syd', 7)

Podemos usar la sobrecarga de operadores para agregar una forma de comparar esos 2 objetos, según la propiedad edad:

class Perro:
    # la clase Perro
    def __init__(self, nombre, edad):
        self.nombre = nombre
        self.edad = edad
    def __gt__(self, otro):
        return True if self.edad > otro.age else False

Ahora, si intentas ejecutar print(roger > syd) obtendrás el resultado True.

De la misma manera que definimos __gt__() (que significa mayor que), podemos definir los siguientes métodos:

• __eq__() para comprobar la igualdad
• __lt__() para comprobar si un objeto debe considerarse menor que otro con el operador <
• __le__() para menor o igual (<=)
• __ge__() para mayor o igual (>=)
• __ne__() para no igual (!=)

Entonces tienes métodos para interoperar con operaciones aritméticas:

• __add__() responde al operador +
• __sub__()responde al operador -
• __mul__() responde al operador *
• __truediv__() responde al operador /
• __floordiv__() responde al operador //
• __mod__() responde al operador %
• __pow__() responde al operador **
• __rshift__() responde al operador >>
• __lshift__() responde al operador <<
• __and__() responde al operador &
• __or__() responde al operador |
• __xor__() responde al operador ^

Hay algunos métodos más para trabajar con otros operadores, pero entiendes la idea.

Entornos virtuales en Python

Es común tener varias aplicaciones de Python ejecutándose en tu sistema.

Cuando las aplicaciones requieren el mismo módulo, en algún momento llegarás a una situación complicada en la que una aplicación necesita una versión de un módulo y otra aplicación una versión diferente de ese mismo módulo.

Para solucionar esto, utiliza entornos virtuales.

Usaremos venv. Otras herramientas funcionan de manera similar, como pipenv.

Crea un entorno virtual usando

python -m venv .venv

en la carpeta donde deseas iniciar el proyecto, o donde ya tienes un proyecto existente.

Entonces ejecuta

source .venv/bin/activate

Usa source .venv/bin/activate.fish en Fish shell

La ejecución del programa activará el entorno virtual de Python. Dependiendo de tu configuración, es posible que también veas un cambio en el indicador de tu terminal.

El mío cambió de

➜ carpeta

a

(.venv) ➜ carpeta

Ahora, la ejecución de pip utilizará este entorno virtual en lugar del entorno global.

Conclusión

Muchas gracias por leer este libro.

Espero que te inspire a aprender más sobre Python.

Para obtener más información sobre Python y los tutoriales de programación en general, consulta el blog flaviocopes.com.

Envía cualquier comentario, errata u opinión a mailto: flavio@flaviocopes.com, y puedes comunicarte con Flavio en Twitter @flaviocopes.

Nota: puedes obtener una versión PDF, ePub y Mobi en inglés de este manual de Python

Traducido del artículo de Flavio Copes - The Python Handbook

.contenedor {
    font-size: 33px;
}

Esta propiedad toma varios tipos de valores:

• Palabras clave (palabras clave de tamaño absoluto y relativo),
• Longitud (como píxeles (px) y unidades em), y
• Porcentajes.

.contenedor {
    font-size: xx-large;
}

La pregunta es: ¿qué tipo de valor debería elegir y por qué?

Esa es la pregunta que aborda este artículo. Te mostrará cómo usar la propiedad de font-size y las diferencias entre sus muchos valores. Así, la próxima vez que necesites cambiar el tamaño de fuente de tu texto, sabrás qué valor usar.

Valores de palabras clave

Hay dos tipos de valores de palabras clave que puede usar con el tamaño de fuente: palabras clave de tamaño absoluto y de tamaño relativo. Empecemos con lo absoluto.

Palabras clave de tamaño absoluto

El siguiente código utiliza la palabra clave de tamaño absoluto small para ajustar el tamaño del texto HTML.

.elemento_hijo {
    font-size: small;
}

Hay más opciones de palabras clave de tamaño absoluto para elegir:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large

El valor de una palabra clave de tamaño absoluto está determinado por el tamaño de fuente predeterminado del navegador. Normalmente, ese tamaño es medium (mediano).

Palabras clave de tamaño relativo

Las palabras clave de tamaño relativo son otra opción de palabra clave a considerar. Tienes dos para elegir: smaller y larger.

.elemento_padre {
    font-size: smaller;
}

El tamaño de fuente de un elemento con una palabra clave de tamaño relativo es relativo, mayor o menor, al tamaño de fuente de su padre.

Dicho de otra manera, el tamaño de fuente del elemento padre afecta el tamaño de fuente del elemento hijo, como puedes ver a continuación(inglés).

En este ejemplo, la palabra clave de tamaño relativo smaller se aplica al elemento hijo, y el valor de tamaño absoluto large se aplica al elemento padre.

Valores de longitud

font-size acepta varios valores de longitud diferentes. Exploraremos tres de ellos: píxeles px, y unidades em y rem. Cual sea tu selección, el valor de longitud que utilices debe ser positivo.

.elemento_padre {
    font-size: 60px;
}

Píxeles

Los píxeles son una unidad de longitud absoluta. Eso significa que no se ven afectados por otros elementos, como el elemento padre o el tamaño de la ventana.

Como resultado, los píxeles son precisos: tu defines el número exacto de píxeles que necesitas en un elemento y, por lo general, eso es lo que obtienes. Sin embargo, puede haber ligeras diferencias entre los navegadores.

Observa que los elementos hijo usan píxeles y tienen el mismo tamaño de fuente en el ejemplo de código anterior(inglés).

EMs

Si bien puedes pensar en los píxeles como fijos, piensa en los valores em como variables.

Eso es porque los valores em son una unidad de longitud relativa. El tamaño de fuente de un elemento que usa un valor em es relativo al tamaño de fuente de su padre.

Sin embargo, supongamos que no has establecido un tamaño de fuente para el elemento padre. Tampoco has configurado uno en otro lugar más arriba en el DOM. En este caso, el valor em se calcula utilizando el valor predeterminado del navegador (a menudo, 16px).

Hagamos esta idea concreta.

Digamos que el elemento padre está configurado en 30px y el elemento hijo está configurado en 2em. Luego, el tamaño de fuente representado del elemento hijo es de 60px (2 x 30px = 60px). Puedes ver este escenario en el código siguiente(inglés).

Los valores de em pueden ser problemáticos debido a su efecto compuesto, que se demuestra en el siguiente ejemplo(inglés).

Cuando tienes varios elementos que usan valores em anidados entre sí, los valores de tamaño de fuente se componen: se hacen cada vez más grandes. Este es el efecto compuesto en acción.

REMs

Ingresa los valores rem, que fueron creados para lidiar con el problema de efecto compuesto de los em.

Recuerda que los valores de em son relativos al elemento padre. Por el contrario, los valores rem son relativos al tamaño de fuente del elemento raíz (html).

Esto significa que puedes aplicar un valor rem a un elemento y no se verá afectado por el tamaño de fuente del padre. Esto evade el efecto compuesto que experimentamos anteriormente.

Este ejemplo usa la propiedad font-size con un valor rem(inglés).

Aquí hay un punto clave del ejemplo anterior: el tamaño de fuente del elemento padre no afecta el tamaño de fuente de los elementos hijos.

Porcentajes

Los porcentajes ofrecen una forma más de establecer el tamaño de fuente relativo al tamaño de fuente del elemento padre.

El elemento con el porcentaje se refiere a su elemento padre para determinar su tamaño de fuente. El valor porcentual debe ser positivo.

Aquí tienes un ejemplo(inglés).

Como puedes ver, en lo que respecta al tamaño de fuente, hay muchas opciones que se adaptan a tus necesidades.

Amy escribe sobre aprender a programar, y las mejores formas de hacerlo en amymhaddad.com. También twittea sobre programación, aprendizaje y productividad: @amymhaddad.

Traducido del artículo de Amy Haddad - CSS Font Size Tutorial – How to Change Text Size in HTML

Puedes usar algunos formularios web para solicitar un préstamo de automóvil nuevo, mientras que usarás otros para pedir pizza para la cena. Por lo tanto, es importante que los datos recopilados de esos formularios se limpien, se formateen correctamente y no contengan ningún código malicioso. Este proceso se denomina validación de formularios.

Necesitamos la validación del formulario cada vez que aceptamos la entrada del usuario. Debemos asegurarnos de que los datos ingresados estén en el formato correcto, se encuentren dentro de un rango válido de datos (como para los campos de fecha) y no contengan código malicioso que pueda dar lugar a inyecciones SQL. Los datos mal formados o faltantes también pueden hacer que la API arroje errores.

¿Cuáles son los diferentes tipos de validaciones de formularios?

La validación del formulario puede ocurrir en el lado del cliente y en el lado del servidor.

La validación del lado del cliente se produce utilizando atributos HTML5 y JavaScript del lado del cliente.

Es posible que hayas notado en algunos formularios, tan pronto como ingresas una dirección de correo electrónico inválida, el formulario muestra el error "Ingrese un correo electrónico válido". Este tipo inmediato de validación generalmente se realiza a través de JavaScript del lado del cliente.

En otros casos, es posible que hayas notado cuando completas un formulario e ingresas detalles como una tarjeta de crédito, puede mostrar una pantalla de carga y luego mostrar un error "Esta tarjeta de crédito no es válida".

Aquí, el formulario realizó una llamada al código del lado del servidor y devolvió un error de validación después de realizar verificaciones adicionales de la tarjeta de crédito. Este caso de validación en el que se realiza una llamada del lado del servidor se denomina validación del lado del servidor.

¿Qué datos se deben validar?

La validación del formulario es necesaria cada vez que aceptas datos de un usuario. Esto puede incluir:

1. Validando el formato de campos como dirección de correo electrónico, número de teléfono, código postal, nombre, contraseña.

2. Validando campos obligatorios.

3. Verificación del tipo de datos, como cadenas contra números, para campos como el número de seguro social.

4. Asegurarte de que el valor ingresado sea un valor válido, como país, fecha, etc.

Cómo configurar la validación del lado del cliente

En el lado del cliente, la validación se puede realizar de dos formas:

1. Utilizando la funcionalidad HTML5

2. Utilizando JavaScript

Cómo configurar la validación con la funcionalidad HTML5

HTML5 proporciona una serie de atributos para ayudar a validar los datos. A continuación, se muestran algunos casos de validación comunes:

• Hacer que los campos sean obligatorios usando required
• Restringir la longitud de los datos:
  - minlength, maxlength: para datos de texto
  - min y max para el valor máximo del tipo número
  
• Restringir el tipo de datos usando type:
  <input type="email" name="multiple" />
  
• Especificar patrones de datos usando pattern:
  Especifica un patrón de expresiones regulares que los datos ingresados del formulario deben coincidir.

Cuando el valor de entrada coincide con la validación HTML5 anterior, se le asigna un pseudo-clase :valid, e :invalid si no lo hace.

Probemos con un ejemplo:

<form>
<label for="nombre"> Nombre: </label>
<input type="text" name="nombre" id="nombre" required maxlength="45" />
<label for="apellido"> Apellido: </label>
<input type="text" name="apellido" id="apellido" required maxlength="45" />
<button>Enviar</button>
</form>

Enlace a JSFiddle (inglés)

Aquí tenemos dos campos obligatorios: nombre y apellido. Prueba este ejemplo en JSFiddle. Si omites cualquiera de estos campos y presionas enviar, recibirás un mensaje, "Por favor complete este campo". Esta es la validación mediante HTML5 incorporado.

Cómo configurar la validación usando JavaScript

Al implementar la validación de formularios, hay algunas cosas a considerar:

1. ¿Qué se define como datos "válidos"? Esto ayuda a responder preguntas sobre el formato, la longitud, los campos obligatorios y el tipo de datos.

2. ¿Qué sucede cuando se ingresan datos inválidos? Esto ayudará a definir la experiencia del usuario de la validación: ya sea para mostrar un mensaje de error en-línea o en la parte superior del formulario, ¿cuán detallado debe ser el mensaje de error?, ¿el formulario debe enviarse de todos modos?, ¿debería haber analíticas para rastrear el formato inválido de datos?, etc.

Puedes realizar la validación de JavaScript de dos formas:

1. Validación en-línea usando JavaScript.

2. API de validación de restricciones HTML5

Validación en-línea usando JavaScript

<form id="form">
  <label for="nombre"> Nombre* </label>
  <input type="text" name="nombre" id="nombre" />
  <button id="enviar">Enviar</button>

  <span role="alert" id="nombreError" aria-hidden="true">
    Ingrese su nombre, por favor
  </span>
</form>

const enviar = document.getElementById("enviar");

enviar.addEventListener("click", validar);

function validar(e) {
  e.preventDefault();

  const campoNombre = document.getElementById("nombre");
  let valido = true;

  if (!campoNombre.value) {
    const nombreError = document.getElementById("nombreError");
    nombreError.classList.add("visible");
    campoNombre.classList.add("invalido");
    nombreError.setAttribute("aria-hidden", false);
    nombreError.setAttribute("aria-invalid", true);
  }
  return valido;
}

#nombreError {
  display: none;
  font-size: 0.8em;
}

#nombreError.visible {
  display: block;
}

input.invalido {
  border-color: red;
}

Enlace a JSFiddle(inglés).

En este ejemplo, verificamos los campos obligatorios usando JavaScript. Si un campo obligatorio no está presente, usamos CSS para mostrar el mensaje de error.

Las etiquetas Aria se modifican en consecuencia para señalar un error. Al usar CSS para mostrar/ocultar un error, estamos reduciendo la cantidad de manipulaciones DOM que necesitamos realizar. El mensaje de error se proporciona en contexto, lo que hace que la experiencia del usuario sea intuitiva.

API de validación de restricciones HTML5

Los atributos HTML required y pattern pueden ayudar a realizar una validación básica. Pero si deseas una validación más compleja o deseas proporcionar mensajes de error detallados, puedes utilizar la API de validación de restricciones.

Algunos métodos proporcionados por esta API son:

1. checkValidity
2. setCustomValidity
3. reportValidity

Las siguientes propiedades son útiles:

1. validity
2. validationMessage
3. willValidate

En este ejemplo, validaremos utilizando métodos incorporados de HTML5, como required y length, junto con la API de validación de restricciones para proporcionar mensajes de error detallados.

<form>
<label for="nombre"> Nombre: </label>
<input type="text" name="nombre" required id="nombre" />
<button>Enviar</button>
</form>

const campoNombre = document.querySelector("input");

campoNombre.addEventListener("input", () => {
  campoNombre.setCustomValidity("");
  campoNombre.checkValidity();
  console.log(campoNombre.checkValidity());
});

campoNombre.addEventListener("invalid", () => {
  campoNombre.setCustomValidity("Por favor, ingrese su nombre.");
});

Enlace a JSFiddle(inglés)

No olvides la validación del lado del servidor

La validación del lado del cliente no es la única verificación de validación que debes realizar. También debes validar los datos recibidos del cliente en el código del lado del servidor para asegurarte de que los datos coincidan con lo que esperas que sean.

También puedes utilizar la validación del lado del servidor para realizar verificaciones de la lógica empresarial que no deberían estar en el lado del cliente.

Mejores prácticas de validación de formularios

1. Siempre ten validaciones del lado del servidor, ya que los actores malintencionados pueden eludir la validación del lado del cliente.
2. Proporciona mensajes de error detallados en contexto con el campo que produjo el error.
3. Proporciona un ejemplo de cómo deberían verse los datos en caso de un mensaje de error, como "El formato del correo electrónico no coincide - prueba@ejemplo.com".
4. Evita el uso de páginas de error único que impliquen redireccionamiento. Esta es una mala experiencia de usuario y obliga al usuario a volver a una página anterior para corregir el formulario y perder el contexto.
5. Marca siempre los campos obligatorios.

¿Interesado en más tutoriales y artículos como este? Inscríbete al boletín de noticias, o sigue a Shruti en Twitter

Traducido del artículo de Shruti Kapoor - Data Validation – How to Check User Input on HTML Forms with Example JavaScript Code

Versión TL;DR (muy largo; no lo leí)

# Agregar un nuevo repositorio upstream remoto
git remote add upstream https://github.com/PROPIETARIO_ORIGINAL/REPOSITORIO_ORIGINAL.git

# Sincroniza tu Fork
git fetch upstream
git checkout master
git merge upstream/master

Agregar un nuevo repositorio upstream remoto

Clonaste el fork en tu computadora y comenzaste a trabajar en el problema.

¿Sabías que tu fork es huérfano? Si enlistas el repositorio remoto configurado, solo verás a tu fork como origen:

git remote -v
origin  https://github.com/TU_USUARIO/TU_FORK.git (fetch)
origin  https://github.com/TU_USUARIO/TU_FORK.git (push)

¡No hay señales de padres! ¿Dónde está el repositorio original?

Necesitamos configurar esta información para restaurar la relación familiar agregando un nuevo repositorio remoto upstream:

git remote add upstream https://github.com/PROPIETARIO_ORIGINAL/REPOSITORIO_ORIGINAL.git

¡Salvaste a la familia! Ahora puedes ver tanto el repositorio original como al fork:

git remote -v
origin    https://github.com/TU_USUARIO/TU_FORK.git (fetch)
origin    https://github.com/TU_USUARIO/TU_FORK.git (push)
upstream  https://github.com/PROPIETARIO_ORIGINAL/REPOSITORIO_ORIGINAL.git (fetch)
upstream  https://github.com/PROPIETARIO_ORIGINAL/REPOSITORIO_ORIGINAL.git (push)

Sincroniza tu fork

Ahora todo está configurado. Puedes sincronizar tu fork con solo 2 comandos.

Asegúrate de estar en la raíz de tu proyecto y también en la rama maestra. De lo contrario, puedes consultar en la sucursal maestra:

git checkout master
Switched to branch 'master'

Ahora, debes buscar los cambios del repositorio original:

git fetch upstream
remote: Enumerating objects: 16, done.
remote: Counting objects: 100% (16/16), done.
remote: Compressing objects: 100% (7/7), done.
remote: Total 7 (delta 5), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (7/7), 1.72 Kio | 160.00 Kio/s, done.
From https://github.com/PROPIETARIO_ORIGINAL/REPOSITORIO_ORIGINAL
   909ef5a..0b228a8  master     -> upstream/master

Y fusiona los cambios en tu rama maestra:

git merge upstream/master
Updating 909ef5a..0b228a8
Fast-forward
 node.js/WorkingWithItems/batch-get.js               | 51 ++++++++++++++++++++++++++------------------------
 node.js/WorkingWithItems/batch-write.js             | 95 +++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------
 node.js/WorkingWithItems/delete-item.js             | 37 ++++++++++++++++++------------------
 node.js/WorkingWithItems/get-item.js                | 31 +++++++++++++++++--------------
 node.js/WorkingWithItems/put-item-conditional.js    | 51 +++++++++++++++++++++++++-------------------------
 node.js/WorkingWithItems/put-item.js                | 49 ++++++++++++++++++++++++------------------------
 node.js/WorkingWithItems/transact-get.js            | 51 ++++++++++++++++++++++++++------------------------
 node.js/WorkingWithItems/transact-write.js          | 79 ++++++++++++++++++++++++++++++++++++++++-------------------------------------
 node.js/WorkingWithItems/update-item-conditional.js | 51 ++++++++++++++++++++++++++------------------------
 node.js/WorkingWithItems/update-item.js             | 47 ++++++++++++++++++++++++----------------------
 10 files changed, 282 insertions(+), 260 deletions(-)

¡Eso es! Tu fork  ahora está actualizada.

¿Alguna pregunta? ¡No dudes en contactar a Johan en Twitter!

Traducido del artículo de Johan Rin-How to Sync Your Fork with the Original Git Repository

En este artículo te contamos algunos de los trucos más interesantes para depurar usando las herramientas de depuración nativas de los navegadores.

Una breve descripción del editor de código freeCodeCamp:

Antes de saltar a la depuración, filtremos algunos datos secretos sobre ese increíble motor de verificación de códigos en FCC.

Usamos un CodeMirror personalizado como editor de código. Se utiliza una función eval() para evaluar el código JavaScript representado como una cadena del editor. Cuando se llama a eval(), los navegadores ejecutarán tu código de forma nativa. Aprenderemos más por qué este secreto es importante en secciones posteriores de este artículo.

Pasemos ahora a los trucos:

DevTools de Google Chrome

Google Chrome es uno de los navegadores más populares con un motor JavaScript incorporado llamado V8, y ofrece un gran conjunto de herramientas para desarrolladores llamado Chrome DevTools. Se recomienda encarecidamente visitar su Guía completa de depuración de JavaScript.

1 : DevTools básico

Lanzamiento de Chrome DevTools

Presiona F12

Alternativamente, puedes presionar en Windows

Ctrl + Shift + I

y Linux or Mac

Cmd + Shift + I

o si te encanta tu ratón, ve a Menú > Más herramientas > Herramientas del desarrollador.

Conociendo las pestañas de Sources y Console.

Estas dos pestañas serán quizás tus mejores amigas mientras depures. La pestaña Sources(fuentes), se puede utilizar para visualizar todos los scripts que se encuentran en la página web que estás visitando. Esta pestaña tiene secciones para la ventana de código, árbol de archivos, pila de llamadas y ventanas de observación, etc.

La pestaña Console es donde va toda la salida del registro. Además, puedes utilizar el indicador de la pestaña de la consola para ejecutar código JavaScript. Es una especie de sinónimo del prompt de comandos en Windows o terminal en Linux.

Consejo: alterna la consola en cualquier momento en DevTools usando la tecla Esc.

2: Funciones y atajos comunes

Si bien puedes visitar la lista completa de accesos directos, a continuación se muestran algunos de los más utilizados:

Con Windows, Linux Mac:
Busca una palabra clave, se admiten expresiones regulares. Ctrl + F o Cmd+F
Buscar y abrir un archivo Ctrl + P o Cmd+P
Saltar a la línea Ctrl+G+:num_linea o Cmd+G+:num_linea
Agregar un punto de interrupción Ctrl+B o Cmd+B, o haz clic en el número de línea.

Pausar / reanudar la ejecución del script F8
Pasar sobre la siguiente llamada de función F10
Paso a la siguiente llamada de función F11

3 : Usando un Source Map(Mapa de origen) para nuestro código

Una de las funciones más interesantes que te encantará es la depuración de Dynamic Script, sobre la marcha, a través de Source Maps.

Cada script se puede visualizar en la pestaña Sources de DevTools. La pestaña Sources tiene todos los archivos fuente JavaScript. Pero el código del editor de código se ejecuta a través de eval() en un contenedor llamado simplemente máquina virtual (VM, virtual machine) dentro del proceso del navegador.

Como ya habrás adivinado, nuestro código es en realidad un script que no tiene un nombre de archivo. No vemos eso en la pestaña Sources.

¡Aquí viene el truco!

Debemos aprovechar Source Maps para asignar un nombre al JavaScript de nuestro editor. Es bastante simple:

Digamos que estamos en el desafío Factorialize, y nuestro código se ve así:

function factorialize(num) {
  if(num <= 1){
  ...
}
factorialize(5);

Todo lo que tenemos que hacer es agregar // # sourceURL = factorialize.js en la parte superior del código, es decir, la primera línea:

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...

¡Y Eureka! ¡Eso es!

Ahora abre DevTools y busca el nombre del archivo. Agrega puntos de interrupción, depura y disfruta!

Más información sobre depuración:

• Guía para principiantes para eliminar bugs (Inglés).
• Consejos y trucos de depuración para principiantes(Inglés).
• Cómo aprovechar al máximo la consola de depuración de su navegador(Inglés).

Traducido del artículo How to Debug JavaScript with your Browser's Devtools

En este tutorial, explicaré POO y te mostraré cómo usarlo.

Según Wikipedia, la programación basada en clases es:

"...un estilo de programación orientada a objetos (POO), en el que la herencia se produce mediante la definición de clases de objetos, en lugar de que la herencia se produzca únicamente a través de los objetos..."

El modelo más popular de POO está basado en clases.

Pero como mencioné, JavaScript no es un lenguaje basado en clases, es un lenguaje basado en prototipos.

Según la documentación de Mozilla:

"Un lenguaje basado en prototipos toma el concepto de objeto prototípico, un objeto que se utiliza como una plantilla a partir de la cual se obtiene el conjunto inicial de propiedades de un nuevo objeto."

Demos un vistazo a este código:

let nombres = {
    nombre: "Juan",
    apellido: "Pérez"
}
console.log(nombres.nombre);
console.log(nombres.hasOwnProperty("segNombre"));
// Resultado esperado:
// Juan
// false

El objeto de la variable nombres solo tiene dos propiedades: nombre y apellido. Ningún método en absoluto.

Entonces, ¿de dónde viene hasOwnProperty?

Bueno, viene del prototipo Object.

Intenta registrar el contenido de la variable en la consola:

console.log(nombres);

Cuando expandas los resultados en la consola, obtendrás esto:

¿Notas la última propiedad: <prototype>? Intenta expandirlo:

Verás un conjunto de propiedades en el constructor Object. Todas estas propiedades provienen del prototipo Object global. Si observas de cerca, también notarás nuestra propiedad hasOwnProperty oculta.

En otras palabras, todos los objetos tienen acceso al prototipo de Object. No poseen estas propiedades, pero se les concede acceso a las propiedades del prototipo.

La propiedad <prototype>

Esto apunta al objeto que se utiliza como prototipo.

Esta es la propiedad de cada objeto que le da acceso a la propiedad Object prototype(Prototipo de objeto).

Cada objeto tiene esta propiedad por defecto, que se refiere al prototipo de Objeto excepto cuando se configura de otra manera (es decir, cuando el <prototype> del objeto apunta a otro prototipo).

Modificando la propiedad <prototype>

Esta propiedad se puede modificar, indicando explícitamente que debería referirse a otro prototipo. Se utilizan los siguientes métodos para lograr esto:

Método Object.create():

function Perro(nombre, edad) {
    let perro = Object.create(ObjetoConstructor);
    perro.nombre = nombre;
    perro.edad = edad;
    return perro;
}

let ObjetoConstructor = {
    habla: function(){
        return "¡Soy un perro!"
    }
}

let firulais = Perro("Firulais", 9);
console.log(firulais);

En la consola, esto es lo que tendrías:

¿Observas la propiedad <prototype> y el método habla?

Object.create usa el argumento que se le pasa para convertirse en el prototipo.

Palabra clave new:

function Perro(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
}

Perro.prototype.habla = function() {
    return "¡Soy un perro!";
}

let bobby = new Perro("Bobby", 12);

La propiedad <prototype> de bobby, es dirigida al prototipo de Perro. Pero recuerda, el prototipo de Perro es un objeto (par clave y valor), por lo tanto, también tiene una propiedad <prototype> que se refiere al prototipo de objeto global.

Esta técnica se conoce como PROTOTYPE CHAINING (encadenamiento de prototipos).

Ten en cuenta que:  la palabra clave new, hace lo mismo que Object.create() pero solo lo hace más fácil, ya que hace algunas cosas automáticamente por ti.

Y entonces...

Cada objeto en JavaScript tiene acceso al prototipo de Object por defecto. Si está configurado para usar otro prototipo, digamos prototype2, entonces prototype2 también tendría acceso al prototipo de Object por defecto, y así sucesivamente.

Combinación de objeto + función

Probablemente estés confundido por el hecho de que Perro es una función (function Perro(){}),  y tiene propiedades a las que se accede con una notación de puntos. Esto se conoce como una combinación de objeto y función.

Cuando se declaran funciones, por defecto, se les asignan muchas propiedades adjuntas. Recuerda que las funciones también son objetos en los tipos de datos de JavaScript.

Ahora, clases

JavaScript introdujo la palabra clave class en ECMAScript 2015. Hace que JavaScript parezca un lenguaje POO. Pero solo es azúcar sintáctico sobre la técnica de creación de prototipos existente. Continúa con la creación de prototipos en segundo plano, pero hace que el cuerpo exterior parezca POO. Ahora veremos cómo es posible.

El siguiente ejemplo es un uso general de una class en JavaScript:

class Animales {
    constructor(nombre, especie) {
        this.nombre = nombre;
        this.especie = especie;
    }
    
    canta() {
        return `${this.nombre} puede cantar`;
    }
    
    baila() {
        return `${this.nombre} puede bailar`;
    }
}

let bongo = new Animales("Bongo", "Peludo");
console.log(bongo);

Este es el resultado en consola:

El <prototype> hace referencia al prototipo de Animales (que a su vez hace referencia al prototipo de Object).

A partir de esto, podemos ver que el constructor define las características principales, mientras que todo lo que está fuera del constructor (canta() y baila()) son las características adicionales (prototipos).

En segundo plano, utilizando el enfoque de la palabra clave new, lo anterior se traduce en:

function Animales(nombre, especie) {
    this.nombre = nombre;
    this.especie = especie;
}

Animales.prototype.canta = function(){
    return `${this.nombre} puede cantar`;
}

Animales.prototype.baila = function() {
    return `${this.nombre} puede bailar`;
}

let bongo = new Animales("Bongo", "Peludo");

Sub-clases

Esta es una característica en POO, donde una clase hereda características de una clase padre, pero posee características adicionales que el padre no tiene.

La idea aquí es, por ejemplo, decir que quieres crear una clase de Gatos. En lugar de crear la clase desde cero, indicando de nuevo las propiedades del nombre, la edad o la especie, heredaría esas propiedades de la clase padre Animales.

Esta clase Gatos puede tener propiedades adicionales como el color de los bigotes. Veamos cómo se hacen las sub-clases con class.

Aquí, necesitamos un padre del que herede la sub-clase. Examinemos el siguiente código:

class Animales {
    constructor(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }
    
    canta() {
        return `${this.nombre} puede cantar`;
    }
    
    baila() {
        return `${this.nombre} puede bailar`;
    }
}

class Gatos extends Animales {
    constructor(nombre, edad, colorBigotes) {
        super(nombre, edad);
        this.colorBigotes = colorBigotes;
    }
    
    bigotes() {
        return `Tengo bigotes color ${this.colorBigotes}`;
    }
}

let clara = new Gatos("Clara", 33, "índigo");

Con lo anterior, obtenemos los siguientes resultados:

console.log(clara.canta());
console.log(clara.bigotes());
// Resultado esperado
// "Clara puede cantar"
// "Tengo bigotes color índigo"

Cuando registras el contenido de clara en la consola, tenemos:

Notarás que clara tiene una propiedad <prototype> que hace referencia al constructor Gatos y obtiene acceso al método bigotes(). Esta propiedad <prototype> también tiene una propiedad <prototype> que hace referencia al constructor Animales obteniendo así acceso a canta() y baila().

nombre y edad son propiedades que existen en cada objeto creado a partir de este. Usando el enfoque del método Object.create, lo anterior se traduce en:

function Animales(nombre, edad) {
    let nuevoAnimal = Object.create(ConstructorAnimal);
    nuevoAnimal.nombre = nombre;
    nuevoAnimal.edad = edad;
    return nuevoAnimal;
}

let ConstructorAnimal = {
    canta: function() {
        return `${this.nombre} puede cantar`;
    },
    baila: function() {
        return `${this.nombre} puede bailar`;
    }
}

function Gatos(nombre, edad, colorBigotes) {
    let nuevoGato = Animales(nombre, edad);
    Object.setPrototypeOf(nuevoGato, ConstructorGato);
    nuevoGato.colorBigotes = colorBigotes;
    return nuevoGato;
}

let ConstructorGato = {
    bigotes() {
        return `Tengo bigotes color ${this.colorBigotes}`;
    }
}

Object.setPrototypeOf(ConstructorGato, ConstructorAnimal);
const clara = Gatos("Clara", 33, "púrpura");

clara.sing();
clara.whiskers();
// Resultado esperado
// "Clara puede cantar"
// "Tengo bigotes color púrpura"

Object.setPrototypeOf es un método que toma dos argumentos: el objeto (primer argumento) y el prototipo deseado (segundo argumento).

De lo anterior, la función Animales devuelve un objeto con ConstructorAnimal como prototipo. La función Gatos devuelve un objeto con ConstructorGato como prototipo. ConstructorGato, por otro lado, recibe un prototipo de ConstructorAnimal.

Por lo tanto, los animales comunes solo tienen acceso al ConstructorAnimal, pero los gatos tienen acceso al ConstructorGato y al ConstructorAnimal.

Terminando

JavaScript aprovecha su naturaleza de prototipo para dar la bienvenida a los desarrolladores de POO a su ecosistema. También proporciona formas sencillas de crear prototipos y organizar datos relacionados.

Los verdaderos lenguajes de programación orientada a objetos no realizan prototipos en segundo plano, solo toma nota de eso.

Un gran agradecimiento al curso de Will Sentance: "Frontend Masters - JavaScript: The Hard Parts of Object Oriented JavaScript". Aprendí todo lo que ves en este artículo (más un poco de investigación adicional) de su curso. Deberías darle un vistazo.

Puedes contactarme en Twitter en iamdillion para cualquier pregunta o contribuciones.

Gracias por leer :)

Recurso útil

• JavaScript orientado a objetos para principiantes

Traducido del artículo de Dillion Megida - Object Oriented Programming in JavaScript – Explained with Examples

  Cuando trabajamos con operaciones asíncronas en JavaScript, a menudo escuchamos el término Promise (Promesa). Pero puede resultar complicado entender cómo funcionan y cómo utilizarlos.

  A diferencia de muchos tutoriales de programación tradicionales, en este tutorial aprenderemos con la práctica. Completaremos cuatro tareas al final del artículo:

• Tarea 1: explicación de los conceptos básicos de la promesa usando mi cumpleaños.
• Tarea 2: construye un juego de adivinanzas.
• Tarea 3: obtener información del país de una API.
• Tarea 4: buscar países vecinos de un país.

Si deseas seguir adelante, asegúrate de descargar los recursos aquí: https://bit.ly/3m4bjWI

Tarea 1: explicación de los conceptos básicos de la promesa usando mi cumpleaños

  Mi amiga Kayo promete hacer una torta para mi cumpleaños en dos semanas.

  Si todo va bien, y Kayo no se enferma, tendremos una cierta cantidad de tortas. (Las tortas son contables en este tutorial ?). De lo contrario, si Kayo se enferma, no tendremos tortas.

  De cualquier manera, todavía vamos a tener una fiesta. Para esta primera tarea, traduciremos esta historia en código. Primero, creemos una función que devuelva una Promise:

const miCumple = (KayoSeEnferma) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!KayoSeEnferma) {
        resolve(2);
      } else {
        reject(new Error("Estoy triste"));
      }
    }, 2000);
  });
};

  En JavaScript, podemos crear una nueva Promise con new Promise(), que toma una función como argumento:(resolve, reject) => {}.

  En esta función, resolve(resolver) y reject(rechazar) son funciones callback, que se proporcionan de forma predeterminada en JavaScript.

  Echemos un vistazo más de cerca al código anterior.

  Cuando ejecutamos la función miCumple, después de 2000 ms:

• Si Kayo no está enferma, ejecutamos resolve con 2 como argumento.
• Si Kayo está enferma, ejecutamos el rejectcon un new Error("Estoy triste") como argumento. Aunque puedes pasar cualquier cosa a reject como argumento, se recomienda pasarle un objeto Error.

  Ahora, porque miCumple() retorna una Promise, tenemos acceso a los métodos then(entonces), catch(atrapa), yfinally (finalmente).

  Y también tenemos acceso a los argumentos que se pasaron a resolve y reject antes en ese then y catch.

  Echemos un vistazo más de cerca al código.

  Si Kayo no está enferma:

miCumple(false)
  .then((result) => {
    console.log(`Yo tengo ${result} tortas`); // En la consola: Yo tengo 2 tortas  
  })
  .catch((error) => {
    console.log(error); // No se ejecuta
  })
  .finally(() => {
    console.log("Fiesta"); // Aparece en la consola no importa qué: Fiesta
  });

  Si Kayo está enferma:

miCumple(true)
  .then((result) => {
    console.log(`Yo tengo ${result} tortas`); // No se ejecuta 
  })
  .catch((error) => {
    console.log(error); // En consola: Error: Estoy triste
  })
  .finally(() => {
    console.log("Fiesta"); // Aparece en la consola no importa qué: Fiesta
  });

  Muy bien, a estas alturas, espero que tengas la idea básica de Promise. Pasemos a la tarea 2.

Tarea 2: construye un juego de adivinanzas

  Los requerimientos:

• Historia de usuario: Un usuario puede introducir un número.
• Historia de usuario: El sistema elige un número aleatorio del 1 al 6.
• Historia de usuario: Si el número de usuario es igual al número aleatorio, le da al usuario 2 puntos.
• Historia de usuario: Si el número del usuario es diferente al número aleatorio por 1, le da al usuario 1 punto. De otra manera, le da al usuario 0 puntos.
• Historia de usuario: El usuario puede jugar tanto como quiera.

  Para las primeras 4 historias de usuario, crearemos una función insertaNum y retorna una Promise:

const insertaNum = () => {
  return new Promise((resolve, reject) => {
    // Empecemos desde aquí...
  });
};

  Lo primero que debemos hacer es pedirle un número al usuario y elegir un número aleatorio entre 1 y 6:

const insertaNum = () => {
  return new Promise((resolve, reject) => {
    const numUsuario = Number(window.prompt("Introduce un número (1 - 6):")); 
      // Pide al usuario que introduzca un número
      
    const aleatorio = Math.floor(Math.random() * 6 + 1); 
      // Elige un número aleatorio del 1 al 6
  });
};

  Ahora, numUsuario puede ingresar un valor que no es un número. Si es así, llamemos a la función reject con un error:

const insertaNum = () => {
  return new Promise((resolve, reject) => {
    const numUsuario = Number(window.prompt("Introduce un número (1 - 6):")); 
      // Pide al usuario que introduzca un número
      
    const aleatorio = Math.floor(Math.random() * 6 + 1); 
      // Elige un número aleatorio del 1 al 6

    if (isNaN(numUsuario)) {
      reject(new Error("Tipo de entrada incorrecta")); 
        // Si el usuario introduce un valor que no es un número, 
        // ejecuta reject con un error
    }
  });
};

  Lo siguiente que queremos hacer es verificar si el numUsuario es igual a aleatorio, si es así, queremos darle al usuario 2 puntos y podemos ejecutar la función resolve pasando un objeto {puntos: 2, aleatorio}. Observa que también queremos saber el número en aleatorio cuando se resuelva la promesa.

  Si él numUsuario es diferente de aleatorio por uno, entonces le damos al usuario 1 punto. De lo contrario, le damos al usuario 0 puntos:

return new Promise((resolve, reject) => {
  const numUsuario = Number(window.prompt("Introduce un número (1 - 6):")); 
    // Pide al usuario que introduzca un número
  const aleatorio = Math.floor(Math.random() * 6 + 1); 
    // Elige un número aleatorio del 1 al 6

  if (isNaN(numUsuario)) {
    reject(new Error("Tipo de entrada incorrecta")); 
        // Si el usuario introduce un valor que no es un número, 
        // ejecuta reject con un error
  }

  if (numUsuario === aleatorio) {
    // Si el número del usuario coincide con el número aleatorio, 
    // retorna 2 puntos
    resolve({
      puntos: 2,
      aleatorio,
    });
  } else if (numUsuario === aleatorio - 1 || numUsuario === aleatorio + 1) {
    // Si el número del usuario es diferente al número aleatorio por 1, 
    // retorna 1 punto
    resolve({
      puntos: 1,
      aleatorio,
    });
  } else {
    // Si no, retorna 0 puntos
    resolve({
      puntos: 0,
      aleatorio,
    });
  }
});

  Muy bien, también creemos otra función para preguntar si el usuario quiere continuar el juego:

const continuarJuego = () => {
  return new Promise((resolve) => {
    if (window.confirm("¿Quieres continuar?")) { 
        // Pregunta si el usuario quiere continuar el juego
        // con un modal de confirmación
      resolve(true);
    } else {
      resolve(false);
    }
  });
};

  Observa que creamos una Promise, pero no utiliza la función callback reject. Esto está totalmente bien.

  Ahora creemos una función para manejar la suposición:

const suponer = () => {
  insertaNum() // Esto retorna una Promesa
    .then((result) => {
      alert(`Dado: ${result.aleatorio}: obtuviste ${result.puntos} puntos`); 
      // Cuando resolve se ejecuta, obtenemos los puntos
      // y el número aleatorio
      
      // Vamos a preguntarle al usuario si quiere continuar el juego
      continuarJuego()
          .then((result) => {
                if (result) {
                  suponer(); // Si sí, ejecutamos suponer() de nuevo
                } else {
                  alert("Terminó el juego"); // Si no, mostramos una alerta
                }
          });
    })
    .catch((error) => alert(error));
};

suponer(); // Ejecuta la función suponer.

  Aquí cuando llamamos suponer(), insertaNum() ahora retorna una Promise:

• Si la Promise es resuelta, llamamos al método then y mostramos un mensaje de alerta. También preguntamos si el usuario quiere continuar.
• Si la Promise es rechazada, mostramos un mensaje de alerta con el error.

  Como puedes ver, el código es algo difícil de leer.

  Refactoricemos la función suponer un poco, utilizando la sintáxis async/await:

const suponer = async () => {
  try {
    const result = await insertaNum(); 
      // En lugar del método 'then', podemos obtener el resultado 
      // directamente, poniendo 'await' antes de la promesa
    alert(`Dado: ${result.aleatorio}: obtuviste ${result.puntos} puntos`);

    const estaContinuando = await continuarJuego();

    if (estaContinuando) {
      suponer();
    } else {
      alert("Terminó el juego");
    }
  } catch (error) { 
      // En lugar del método 'catch', podemos usar la sintáxis 'try/catch'
    alert(error);
  }
};

  Puedes ver que creamos una función async, colocando async antes de las llaves. Entonces en la función async:

• En lugar del método then, podemos obtener los resultados directamente , poniendo await antes de la promesa.
• En lugar del método catch, podemos utilizar la sintáxis try/catch.

  Aquí está todo el código para esta tarea, de nuevo, para tu referencia:

return new Promise((resolve, reject) => {
  const numUsuario = Number(window.prompt("Introduce un número (1 - 6):")); 
    // Pide al usuario que introduzca un número
  const aleatorio = Math.floor(Math.random() * 6 + 1); 
    // Elige un número aleatorio del 1 al 6

  if (isNaN(numUsuario)) {
    reject(new Error("Tipo de entrada incorrecta")); 
        // Si el usuario introduce un valor que no es un número, 
        // ejecuta reject con un error
  }

  if (numUsuario === aleatorio) {
    // Si el número del usuario coincide con el número aleatorio, 
    // devuelve 2 puntos
    resolve({
      puntos: 2,
      aleatorio,
    });
  } else if (numUsuario === aleatorio - 1 || numUsuario === aleatorio + 1) {
    // Si el número del usuario es diferente al número aleatorio por 1, 
    // devuelve 1 punto
    resolve({
      puntos: 1,
      aleatorio,
    });
  } else {
    // Si no, devuelve 0 puntos
    resolve({
      puntos: 0,
      aleatorio,
    });
  }
});

const continuarJuego = () => {
  return new Promise((resolve) => {
    if (window.confirm("¿Quieres continuar?")) { 
        // Pregunta si el usuario quiere continuar el juego
        // con un modal de confirmación
      resolve(true);
    } else {
      resolve(false);
    }
  });
};


const suponer = async () => {
  try {
    const result = await insertaNum(); 
      // En lugar del método 'then', podemos obtener el resultado 
      // directamente, poniendo 'await' antes de la promesa
    alert(`Dado: ${result.aleatorio}: obtuviste ${result.puntos} puntos`);

    const estaContinuando = await continuarJuego();

    if (estaContinuando) {
      suponer();
    } else {
      alert("Terminó el juego");
    }
  } catch (error) { 
      // En lugar del método 'catch', podemos usar la sintaxis 'try/catch'
    alert(error);
  }
};

  Muy bien, hemos terminado con la segunda tarea. Pasemos a la tercera.

Tarea 3: buscar información de un país desde una API

  Verás que las Promise se usan mucho al obtener datos de una API.

  Si abres https://restcountries.eu/rest/v2/alpha/col en una nueva ventana, verás los datos del país en formato JSON.

  Utilizando el Fetch API, podemos buscar los datos con:

const buscarDatos = async () => {
  const res = await fetch("https://restcountries.eu/rest/v2/alpha/col"); 
    // fetch() retorna una promesa, así que necesitamos esperar por ella
    
  const pais = await res.json(); 
    // res es ahora una respuesta HTTP, por lo que 
    //necesitamos llamar a res.json()

  console.log(pais); // Los datos de Colombia se registrarán en la consola
};

buscarDatos();

  Ahora que tenemos los datos del país que queremos, pasemos a la última tarea.

Tarea 4: buscar países vecinos de un país

  Si abres la tarea 4, verás que tenemos una función buscarPais, que obtiene los datos del endpoint: https://restcountries.eu/rest/v2/alpha/${alpha3Code} donde alpha3code es el código del país .

  También verás que detectará cualquier error que pueda ocurrir al obtener los datos.

// Tarea 4: obtener los países vecinos de Colombia

const buscarPais = async (alpha3Code) => {
  try {
    const res = await fetch(
      `https://restcountries.eu/rest/v2/alpha/${alpha3Code}`
    );

    const data = await res.json();

    return data;
  } catch (error) {
    console.log(error);
  }
};

  Creemos una función buscarPaisYVecinos y obtengamos la información de Colombia pasando col como alpha3code.

const buscarPaisYVecinos = async () => {
  const colombia = await buscarPais("col");

  console.log(colombia);
};

buscarPaisYVecinos();

  Ahora, si miras en tu consola, puedes ver un objeto con este aspecto:

  En el objeto, hay una propiedad de border que es una lista de alpha3codes para los países vecinos de Colombia.

  Ahora bien, si intentamos llegar a los países vecinos mediante:

  const vecinos = colombia.borders.map((border) => buscarPais(border));

  Entonces, vecinos serán un arreglo de objetos Promise.

  Cuando trabajamos con un arreglo de promesas, necesitamos usar Promise.all:

const buscarPaisYVecinos = async () => {
  const colombia = await buscarPais("col");

  const vecinos = await Promise.all(
    colombia.borders.map((border) => buscarPais(border))
  );

  console.log(vecinos);
};

buscarPaisYVecinos();

  En la consola, deberíamos poder ver la lista de objetos de países.

  Aquí está todo el código para la tarea 4 nuevamente para tu referencia:

const buscarPais = async (alpha3Code) => {
  try {
    const res = await fetch(
      `https://restcountries.eu/rest/v2/alpha/${alpha3Code}`
    );

    const data = await res.json();

    return data;
  } catch (error) {
    console.log(error);
  }
};

const buscarPaisYVecinos = async () => {
  const colombia = await buscarPais("col");

  const vecinos = await Promise.all(
    colombia.borders.map((border) => buscarPais(border))
  );

  console.log(vecinos);
};

buscarPaisYVecinos();

Conclusión

  Después de completar estas 4 tareas, puedes ver que Promise es útil cuando se trata de acciones asíncronas, o cosas que no suceden al mismo tiempo.

  Puedes ver esto en la práctica en uno de estos tutoriales, donde creamos una aplicación desde cero con React y Next.js:

_________ ? Acerca de Thu Nghiem_________

• Fundador de DevChallenges
• Suscríbete a su canal de YouTube
• Síguelo en Twitter
• Únete a Discord

Traducido del artículo de Thu Nghiem - How to Learn JavaScript Promises and Async/Await in 20 Minutes

Detenme si esto suena familiar...

Quieres iniciar con un nuevo framework/tiempo de ejecución. Así que instalas dicho framework/tiempo de ejecución.

Entonces, abres la terminal y ... comando no encontrado(command not found). Gran suspiro.

Revisitas los documentos que sugieren que has hecho algunos cambios a la configuración de perfil. De lo cual no estás seguro cómo hacerlo, así que vas a StackOverflow, donde encuentras una respuesta de "user92902399" que parece como si pudiera ser legítimo (quién sabe); así que copias y pegas eso en tu terminal y le ruegas a dios que no borre tu disco duro, y le envíes tu historial de búsqueda al presidente por correo.

Ahora el comando del tiempo de ejecución funciona. Pero falla. El error es críptico.

Regresas a Google.

Esta vez no hay respuesta clara en StackOverflow, a pesar de que varias personas tienen un problema similar. Encuentras un issue de Github que pareciera que podría estar relacionado. En algún lado, en el medio de una masa de gente diciendo "¡Gracias, esto funciona!" y "Esto no funciona para nada", alguien utiliza la palabra "Python".

Revisas tu versión de Python, y suficientemente seguro, este framework/tiempo de ejecución no es compatible con el que tienes instalado. Estás a punto de degradarlo, cuando te das cuenta de que la última vez que miraste en la dirección general de la instalación de Python, te tomó un día hacerlo funcionar nuevamente y todavía no está seguro de cómo lo hiciste.

¿Sabes qué? Este nuevo framework/tiempo de ejecución probablemente no sea tan bueno. Definitivamente no vale la pena tanto esfuerzo. ¡Oh mira! Una publicación de blog sobre cómo nunca debes usar declaraciones ternarias. ¿En qué estabas trabajando antes? A quien le importa.

¿Un poco demasiado parecido a lo que hiciste? Así es como es intentar configurar un nuevo proyecto, framework o tiempo de ejecución. Cada vez. Esto es parte de la razón por la que todos los desarrolladores, en un momento dado, miraron a alguien sin comprender, a mitad de un Cheeto, y dijeron: "funciona en mi máquina".

Funciona en TODAS las máquinas

La raíz del problema es que, para que el código funcione, hay un entorno completo que también debe configurarse correctamente. Este es un problema difícil de resolver. Lo que necesitamos es una forma de aislar el entorno de desarrollo y luego enviarlo con el código para que funcione en todas las máquinas. Y debemos hacerlo sin tener que enviar un sistema operativo completo.

La clave está en la palabra "aislar". Resulta que tenemos una forma de aislar y enviar entornos completos. Se llama "Docker". Puedes crear un contenedor con cualquier configuración y luego enviarlo a cualquier otra persona. Todo lo que necesitas ahora es una forma de desarrollar en ese contenedor como si fuera su máquina local.

Tú puedes.

En este artículo, te mostraré cómo puedes usar algunos archivos de configuración para empaquetar, y enviar todo tu entorno de desarrollo sin tu mal gusto en dubstep.

Todo esto gracias a la nueva extensión de contenedores de desarrollo para VSCode.

VS Code y contenedores de desarrollo

El concepto básico detrás de contenedores de desarrollo (Dev containers), es que especifiques un archivo Docker, que a su vez especifica todas las dependencias y pasos de configuración necesarios para obtener la configuración correcta del entorno de desarrollo. VS Code activará ese contenedor, instalará un pequeño servidor en él y luego se conectará de nuevo a tu instancia de VS Code. Lo que esto significa, es que ahora estás desarrollando dentro de un entorno preconfigurado. Pero para ti, es solo VS Code.

Para mostrarte cómo funciona esto, voy a crear un contenedor en el cual desarrollar la API de backend de un proyecto en el que trabajé llamado theurlist.com. El backend de este proyecto está escrito en C# y se ejecuta en Azure Functions. Para ejecutarlo localmente, tendría que instalar el .NET Core tiempo de ejecución, CLI de Azure Functions y la extensión Azure Functions VS Code.

El primer paso es instalar la extensión Dev Containers. Esto agregará un pequeño ícono en la esquina inferior izquierda de tu VSCode.

También necesitarás tener instalado Docker. Los contenedores de Docker no funcionan muy bien si no tienes Docker. Puede descargar la Community Edition aquí.

Con la extensión instalada, necesitas agregar los archivos de configuración adecuados a este proyecto. Es decir, un "Dockerfile" que especifique el contenedor en el que se cargará el proyecto. La extensión viene con un montón de entornos preconfigurados. Para agregar uno al proyecto, abre la paleta de comandos y selecciona "Dev Containers: Add Development Container Configuration Files" ("Contenedores de Desarrollo: Agregar archivos de configuración de contenedor de desarrollo").

Este proyecto utiliza Azure Functions y C#, por lo que seleccionarás esa definición de container.

Tan pronto como lo hagas, VS Code agregará una carpeta ".deployment" con "Dockerfile" y un archivo "devcontainer.json" dentro. También preguntará inmediatamente si quieres volver a abrir el proyecto en un contenedor. Decimos que no, y dejas que VS Code se relaje por un minuto mientras miramos estos archivos.

Primero vamos a mirar en el "Dockerfile".

Configuración Dockerfile

El "Dockerfile" especifica lo que habrá en el contenedor. Si lo abres, puedes ver que hay bastante allí. Es un poco detallado. Pero podemos analizar las partes importantes.

Lo primero que hace es incorporar la última versión de .NET Core SDK.

Luego instala algunas utilidades en el contenedor. Específicamente, instala ...

• Git (Fuente de controles)
• procps (utilidad de inspección de procesos)
• curl (utilidad HTTP)
• apt-transport-https (utilidad HTTPS)
• gnupg2 (una herramienta de encriptado)
• lsb-release (Imprime información específica de Linux)

Todo esto es para crear un entorno que tenga todas las herramientas oscuras que un desarrollador pueda necesitar para ejecutar este proyecto y poder registrarlo dentro y fuera del control de código fuente.

Luego, instala las herramientas principales de Azure Functions. Configura todas las ubicaciones de repositorio necesarias antes de la instalación. Estas son todas las cosas que un desarrollador tendría que hacer antes de poder ejecutar este proyecto.

El otro archivo de la carpeta ".devcontainer" es el archivo "devcontainer.json".

El archivo devcontainer.json

Este archivo especifica algunas configuraciones adicionales para el entorno de desarrollo remoto. Específicamente...

1. Indica que el "Dockerfile" debe usarse para construir el contenedor.
2. Se asegura de que el puerto "7071" se reenvíe desde el contenedor para que puedas acceder a él en "localhost: 7071". Este es el puerto en el que Azure Functions se ejecuta localmente.
3. Especifica las extensiones que se deben instalar en el contenedor. Dado que en realidad no estás usando VS Code localmente, sus extensiones no se instalan automáticamente. Especificarlos en este archivo asegura que estén allí cuando se abre el proyecto.

Y con eso, podemos abrir la paleta de comandos y seleccionar "Dev Containers: Reopen folder in container".

VS Code se recargará y comenzará a construir el contenedor para este proyecto.

La primera vez que hace esto, tarda uno o dos minutos porque las imágenes base deben extraerse y construirse. Una vez hecho esto por primera vez, las cargas posteriores son mucho más rápidas, ya que la imagen existe en tu máquina.

En el caso de este proyecto, una vez que se construye el contenedor, VS Code se propone restaurar las dependencias de C#, lo cual se realiza con la extensión C# que se incluyó en el archivo de configuración "devcontainer.json".

Cuando todo haya terminado, puedes ejecutar este proyecto simplemente presionando F5. Y así, la aplicación está en funcionamiento.

Piensa en lo que habríamos tenido que hacer para obtener esta configuración localmente ...

1. Instalar .NET Core
2. Instalar las Functions Core Tools
3. Instalar la extensión VS Code Functions
4. Instalar la extensión VS Code C#

Con los contenedores de desarrollo, nada de eso es necesario. Podemos configurar y enviar un entorno de desarrollo completo en dos archivos de texto.

Por favor, pon tu entorno de desarrollo en Github

Así que aquí está mi humilde súplica: en lugar de describir 15 pasos en un README de Github para configurar tu proyecto para que se ejecute, coloca todo tu entorno de desarrollo en Github. Eso significa registrar en esa carpeta ".devcontainers". Si un desarrollador usando tu proyecto no tiene VS Code o la extensión "Dev Containers", no sucede nada. No puedes perder.

Estoy emocionado porque siento que los días de configuraciones del infierno están llegando a su fin. Y además, piensa en todas las personas que salvaremos de los artículos dogmáticos sobre sentencias ternarias.

Un archivo local .gitignore generalmente se coloca en el directorio raíz de un proyecto. También puedes crear un archivo global .gitignore, y cualquier entrada en ese archivo se ignorará en todos tus repositorios de Git.

Para crear un archivo .gitignore local, crea un archivo de texto y asígnale el nombre ".gitignore" (recuerda incluir el . al principio). Luego, edita este archivo según sea necesario. Cada nueva línea debe incluir un archivo o carpeta adicional que quieras que Git lo ignore.

  Las entradas de este archivo también pueden seguir un patrón coincidente:

• * se utiliza como una coincidencia comodín.
• / se usa para ignorar las rutas relativas al archivo .gitignore.
• # es usado para agregar comentarios

Este es un ejemplo de cómo puede lucir el archivo .gitignore :

# Ignora archivos del sistema Mac 
.DS_store

# Ignora la carpeta node_modules
node_modules

# Ignora todos los archivos de texto
*.txt

# Ignora los archivos relacionados a API keys
.env

# Ignora archivos de configuración SASS
.sass-cache

Para agregar o cambiar tu .gitignore global, ejecuta el siguiente comando en la terminal:

git config --global core.excludesfile ~/.gitignore_global

Esto creará el archivo ~/.gitignore_global. Ahora puedes editar ese archivo de la misma manera que un archivo .gitignore local. Todos tus repositorios Git ignorarán los archivos y carpetas listadas en el .gitignore global.

¿Cómo evitar el rastreo de archivos a los que previamente les has hecho "commit" desde el nuevo Gitignore?

Para evitar el rastreo de un solo archivo, es decir, detener el rastreo del archivo, pero no borrarlo del sistema, utiliza:

git rm --cached nombre-del-archivo

Para evitar el rastreo de todos los archivos en .gitignore:

Primero haces "commit" de cualquier cambio de código pendiente, y luego ejecuta:

git rm -r --cached

Esto elimina los archivos modificados del índice (área de montaje), y luego ejecuta:

git add .

Haces "commit":

git commit -m ".gitignore funciona correctamente"

Para deshacer git rm --cached nombre-del-archivo, usa git add nombre-del-archivo

Traducido del artículo Gitignore Explained: What is Gitignore and How to Add it to Your Repo