Luis Delgado - freeCodeCamp.org

Contador de palabras en Excel: cómo verificar el número de palabras escritas

Luis Delgado — Fri, 09 Jul 2021 13:00:00 +0000

Excel no tiene su propia herramienta que le permita simplemente ver la cantidad de palabras en un documento (como hace Word). Pero, ¿es posible averiguarlo de todos modos?

Sí, lo es, pero es un poco complicado y también solo funciona en una celda a la vez. Sin embargo, no se preocupe, veremos al final cómo hacer que funcione en un grupo de celdas. Exploremos cómo contar palabras en Excel.

Las funciones de Excel que usaremos para contar caracteres

Necesitamos aprender sobre tres funciones de Excel, LEN(), TRIM() y SUBSTITUTE(), antes de poder usarlas en la fórmula.

Cómo usar la función `LEN()` en Excel

La función LEN() toma una celda con contenido de texto y devuelve el número de caracteres en esa celda.

Por ejemplo, si escribimos The horse under the three en una celda, y usamos la función LEN () para calcular el número de caracteres en esa oración en otra celda, obtendremos 25. Puedes ver cómo funciona aquí:

Al especificar que queremos el LEN() de la celda B1 (LEN(B1) , en la celda B2 anterior), Excel hace este cálculo por nosotros.

Nota: Explicaré por qué incluí el error de ortografía ("three" en lugar de "tree") a continuación.

Cómo usar la función `TRIM()` en Excel

La función TRIM() toma una celda con contenido de texto y devuelve el mismo texto sin ningún espacio en blanco al principio o al final.

Por ejemplo, digamos que tenemos una celda que se ve así: The horse under the three (con 7 espacios antes del texto y 2 al final. Tiene una longitud total de 34 caracteres, incluidos los espacios.

La función TRIM() nos devolverá The horse under the three (con solo los 25 caracteres originales) sin los espacios al principio o al final. Así es como se ve:

Puedes ver que, similar al ejemplo anterior con LEN(), cuando colocamos las instrucciones TRIM() en la celda B4, Excel calcula el valor correcto en la celda B5.

Cómo utilizar la función `SUBSTITUTE()` en Excel

La función SUBSTITUTE() reemplazará un fragmento del texto con otro fragmento de texto. Por ejemplo, en el texto que hemos estado usando hay un error de ortografía (en lugar de tree tenemos three). Podemos arreglarlo usando la función SUBSTITUTE().

La sintaxis es SUBSTITUTE (text, old_text, new_text, [instance_num]), siendo text el texto que vamos a cambiar. En este caso, tendremos el texto que queremos cambiar, y el old_text y la parte que queremos cambiar (tree) que serán reemplazados por el new_text (three).

La fórmula completa es SUBSTITUTE (B4, "three", "tree"). Tenga en cuenta que el texto de una fórmula siempre debe estar entre comillas. Así es como funciona:

En caso de que necesite saberlo, instance_num es un parámetro opcional que usa en caso de que haya varias instancias de old_text en el texto y desee cambiar solo una de ellas. Pero no lo estamos usando aquí.

Cómo contar palabras en Excel

Hemos aprendido a usar las funciones individuales anteriores, ahora necesitamos usarlas juntas de una manera algo complicada.

Antes de juntarlas, intentemos entender cómo los estamos usando, y luego construiremos juntos la fórmula completa.

Cómo funciona el contador de palabras en Excel.

Excel no tiene una fórmula o herramienta de conteo de palabras adecuada, pero hay una cosa que podemos contar, y son los caracteres, como aprendimos anteriormente. Específicamente, vamos a contar el número de espacios dentro de la cadena. Y de eso, vamos a derivar el número de palabras simplemente agregando 1 al número de espacios.

Cuando miramos nuestro ejemplo, podemos ver que la cuerda The horse under the tree tiene cuatro espacios. Si sumamos uno, obtenemos cinco, el número total de palabras en la oración.

Contar espacios tampoco es una tarea trivial. Dado que no existe una herramienta o fórmula específica que pueda contar solo espacios, debemos ser un poco creativos.

Lo que vamos a hacer es contar el número de caracteres en la cadena y luego contar el número de caracteres en la cadena cuando se hayan eliminado los espacios (podemos usar SUBSTITUTE (text, "", "") para esto). Luego tomaremos la diferencia entre los dos.

The horse under the three tiene 24 caracteres, mientras que Thehorseunderthetree tiene 20 caracteres. La diferencia es 4, que es el número de espacios en la cadena original. Si sumamos 1 obtenemos 5, el número de palabras.

Poniéndolo en práctica

Ahora necesitamos poner una fórmula única que hemos visto en el último párrafo. Esta fórmula tiene tres componentes:

La longitud de la oración con espacios al principio o al final de la oración eliminada (queremos contar solo los espacios entre las palabras), por lo que usaremos LEN(TRIM (texto))
La longitud de la cadena sin espacios, en este caso, no necesitamos usar TRIM() ya que estamos eliminando todos los espacios, entonces LEN(SUBSTITUTE(text, "", ""))
Luego solo agregamos 1.

La fórmula completa es: LEN(TRIM(text)) - LEN(SUBSTITUTE(text, "", "")) + 1.

Cómo crear una función personalizada para contar palabras en Excel

Hemos aprendido a contar palabras en una celda, pero tal vez no queramos escribir todo eso cada vez que necesitamos contar el número de palabras.

Afortunadamente, podemos resolver esto creando una función personalizada para contar palabras. También podemos tener una función personalizada para contar el número total de palabras en varias celdas.

Cómo crear una función personalizada con Visual Basic para aplicaciones

Podemos abrir el editor de VBA con Alt + F11 ( FN + Alt + F11 para Mac). Luego podemos ir a Insertar> Módulo, y estamos listos para escribir nuestra función.

Podemos usar lo que ya hemos escrito como punto de partida, pero necesitamos reemplazar SUBSTITUTE, ya que eso no existe en Visual Basic, con la función REPLACE. Así que ahora tendremos LEN(TRIM (texto)) - LEN(REPLACE (text, "", "")) + 1.

Nombramos la nueva función que queremos crear. He elegido el nombre WORDCOUNT, pero puede usar el nombre que desee. Simplemente reemplácelo en los dos lugares donde está escrito con el nombre de su elección.

Function WORDCOUNT(text)
   WORDCOUNT = LEN(TRIM(text)) - LEN(REPLACE(text, " ", "")) + 1
End Function

Una vez que agregue este código en el editor, habrá creado la función. ¡Ahora puedes cerrar el editor y disfrutar de tu nueva función! Pero tenga en cuenta que solo funciona para este libro.

Así que ahora hagamos que la función funcione con más de una celda, y luego también podemos agregarla permanentemente a Excel.

Cómo crear una función de Excel personalizada para contar el número total de palabras en un grupo de celdas

Ahora actualizaremos la función para que funcione con un rango de celdas para que sea un poco más útil. Tomamos el mismo código que el anterior y lo aplicamos a cada celda dentro de un rango, sumando el número de palabras en cada celda.

Reemplaza el código que escribimos antes con lo siguiente:

Function WORDCOUNT(rng As Range)
    Count = 0
    For Each cl In rng
        thisCount = LEN(TRIM(cl.Value)) - LEN(REPLACE(cl.Value, " ", "")) + 1
        Count = Count + thisCount
    Next
    WORDCOUNT = Count
End Function

Nota: esta versión funciona con un solo rango de celdas y todas las celdas seleccionadas deben contener texto. Si lo desea, puede intentar hacer su propia versión más versátil, ¡simplemente explore VBA por su cuenta!

Por último, queremos asegurarnos de que nuestra función esté disponible en todos los libros de trabajo de Excel. Para hacer eso, tenemos que cerrar el editor de VBA y guardar el libro en el que estamos trabajando como *.xlam, el tipo de archivo de complemento de Excel.

Para ello podemos ir a Archivo> Guardar como, darle al archivo un nombre que nos permita reconocerlo, como "WordCount", elegir el formato "Complemento de Excel (* .xlam)" del menú desplegable. No cambie la carpeta en la que guarda el archivo, ya que se establece automáticamente en una carpeta AddIns.

Para ello vamos a Archivo> Opciones> Complementos. En la parte inferior de la ventana, seleccione "Complementos de Excel" en el menú desplegable y haga clic en Ir .... En la nueva ventana use el botón Examinar ..., y allí debería abrir la carpeta de Complementos que hemos guardado el archivo. in. Selecciónelo y presione Ok, luego Ok nuevamente. Ahora la función WORDCOUNT() estará disponible cada vez que use Excel.

Conclusión

En este artículo, hemos aprendido a contar palabras en una cadena en Excel.

Y aunque Excel no tiene una herramienta preparada para contar palabras, aprendimos cómo crear nuestra propia función personalizada para evitar tener que escribir cada fórmula cada vez que queremos obtener la cantidad de palabras en una cadena.

Finalmente, también aprendimos cómo expandir nuestra función para que funcione con cualquier número de celdas.

Traducido del artículo de Ilenia Magoni - Word Count in Excel – How to Check the Number of Words

Tutorial de HTML en cursiva: cómo hacer que el texto en cursiva con la etiqueta

Luis Delgado — Tue, 22 Jun 2021 05:12:44 +0000

En este artículo, aprenderemos cómo usar la etiqueta y en qué se diferencia de la etiqueta .
En versiones anteriores de HTML, la etiqueta se usaba para mostrar texto en cursiva. Pero en HTML 5, la definición ha cambiado. Exploraremos esa nueva definición y aprenderemos sobre otras formas de aplicar estilo al texto en cursiva usando CSS.
¿Qué es la etiqueta ?
La etiqueta , o elemento de texto idiomático, es un espacio de texto que representa un cambio en el estado de ánimo o la calidad del texto. Este texto se muestra en cursiva.
Veamos algunas razones por las que es posible que quieras utilizar la etiqueta .
Usar la etiqueta para marcar frases en un idioma diferente
Puede utilizar la etiqueta para marcar un espacio de texto en un idioma diferente. Este ejemplo pone en cursiva una frase latina.
Stacy se acaba de tatuar la frase Audentes fortuna iuvat que significa "La fortuna favorece a los valientes".
También puede usar el atributo lang en la etiqueta para representar frases que están en un idioma diferente al del texto que las rodea.
La primera frase que Matt aprendió en italiano es Vorrei una birra, que se traduce como "Me gustaría una cerveza".
Usar la etiqueta para mostrar los pensamientos de alguien
También puede usar la etiqueta para resaltar los pensamientos internos de una persona.
Después de que Ben conoció a los padres de su novia, pensó para sí mismo: Realmente espero que les haya agradado.
Usando la etiqueta para el nombre de un barco
Si desea utilizar el nombre de un barco, puede envolver ese nombre en etiquetas .
El USS Arizona era un acorazado de la Armada de los Estados Unidos construido en la década de 1910.
Uso de la etiqueta para descripciones taxonómicas
Según el Convenio de Diversidad Biológica,
La taxonomía es la ciencia de nombrar, describir y clasificar organismos e incluye todas las plantas, animales y microorganismos del mundo.
Este sería un ejemplo del uso de la etiqueta para el término Felis catus.
Otro término para el gato doméstico sería Felis catus.
Diferencias entre la etiqueta y la etiqueta en HTML
Puedes pensar que las etiquetas y tienen el mismo significado porque tienen el mismo aspecto en el navegador. Pero las dos etiquetas tienen significados diferentes entre sí.
La etiqueta , o elemento de énfasis, debe usarse cuando desee poner énfasis en una palabra o un espacio de texto.
A continuación, se muestra un ejemplo con la etiqueta .
¡Deja de ser un bebé y hazlo ya!
Los seres humanos y los lectores de pantalla pondrán énfasis verbal en la palabra "hacer". Esto difiere de la etiqueta donde no se puso énfasis adicional en el texto.
¿Debería utilizar la etiqueta para diseñar?
No debe utilizar la etiqueta con fines de estilo. Si desea aplicar estilo al texto en cursiva, debe usar la propiedad de estilo de fuente CSS.
Estoy usando CSS para darle estilo a este texto en cursiva.
.demo-para { font-style: italic; }
¿Debería utilizar la etiqueta o para los iconos?
A lo largo de los años, se ha debatido si es "correcto" utilizar etiquetas o etiquetas para agregar iconos a su sitio web.
Algunos argumentarán que no tiene nada de malo y que es una práctica bastante común, mientras que otros piensan que es un mal uso de la etiqueta y que debería usar la etiqueta en su lugar.
Aquí hay una respuesta de Font Awesome con respecto al uso de para sus íconos:
Nos gusta la etiqueta por brevedad y porque la mayoría de la gente usa para texto semántico enfatizado / en cursiva en estos días. Si esa no es tu taza de té, usar un es semánticamente más correcto.
Mi objetivo no es hacer que elija un lado sobre el otro en este debate, sino más bien hacer que esté al tanto de esta discusión en curso.
Conclusión
La etiqueta es un espacio de texto que representa un cambio en el estado de ánimo o la calidad del texto. Si desea poner énfasis en el texto, la etiqueta apropiada sería la etiqueta .
La etiqueta no debe usarse con fines de estilo. La forma correcta de aplicar estilo al texto en cursiva es utilizar la propiedad de font-style CSS.
Espero que haya disfrutado de este artículo y haya aprendido a utilizar la etiqueta .
Traducido del artículo de Jessica Wilkins - HTML Italics Tutorial – How to Make Text Italic with the tag

Cómo escribir HTML / CSS más rápido con atajos de Emmet

Luis Delgado — Mon, 31 May 2021 13:00:00 +0000

Emmet es una de mis funciones integradas favoritas de VS Code. También está disponible como una extensión en otros editores de código.
Piense en Emmett como una taquigrafía. Con él, puede escribir fácilmente una gran cantidad de código rápidamente. Acelera drásticamente su flujo de trabajo HTML y CSS.
Entender cómo usar Emmet es literalmente una superpotencia. ¿Algunos incluso lo han llamado un código de trucos para programar.
Y es solo una de las muchas características asombrosas integradas de VS Code.
Recientemente, lancé un curso completo y detallado llamado Become A VS Code SuperHero. (Conviértete en un superheroe de VS Code). Cubre todos los aspectos de VS Code en gran profundidad.
Este artículo se basa en una de las 11 secciones del curso: escritura y formato de código.
HTML
Con Emmet puede crear rápidamente una plantilla HTML en un abrir y cerrar de ojos. En un archivo HTML, simplemente escriba ! y verá que Emmet ha aparecido como sugerencia. Ahora presiona Enter. Ahí lo tiene, una página web HTML básica en blanco lista para usar.
Si nunca antes ha visto HTML y no tiene idea de qué es todo esto, no se preocupe. Solo estoy demostrando las capacidades de VS Code y Emmet. No es necesario que sepas qué significa todo esto en este momento.
Etiquetas Básicas
Para crear etiquetas HTML básicas, simplemente escriba el nombre de la etiqueta y presione Enter. Observe cómo Emmet coloca su cursor dentro de la etiqueta. Ahora está configurado para continuar escribiendo dentro de la etiqueta.
Intente escribir: div y luego Enter, o h1 Enter, o p Enter.
Estos también funcionan: bq para un
, hdr para un
, ftr para un
, btn para un
Clases
Si está familiarizado con CSS, Emmet usa la misma forma para referirse a las clases usando un .. Para definir una clase junto con la etiqueta, simplemente agréguela así:
div.wrapper —>
h1.header.center —>
ID’s
Los Id funcionan de manera muy similar:
div#hero —>
Combinatoria
Puede combinar estos juntos:
div#hero.wrapper —>
Atributos
También podemos especificar atributos para las etiquetas:
img[src="cat.jpg"][alt="foto de gato"] —>
Contenido
Para incluir contenido dentro de la etiqueta, simplemente envolvemos el contenido entre llaves, { }.
p{Esto es un párrafo} —> Esto es un párrafo
Etiquetas hermanos e hijos
Cada vez se pone mejor. También podemos especificar etiquetas hermanos e hijos usando los caracteres + y >.
section+section —>
ul>li —>
Escalando
Tienes que intentar imaginar lo que estás construyendo en tu cabeza mientras escribes la taquigrafía de Emmet. En este ejemplo, "treparemos" por la estructura HTML usando ^.
div+div>p>span+em^bq
Resultado:
Aquí, queríamos que la etiqueta en blockquote estuviera al mismo nivel que el párrafo. Por eso, necesitábamos "trepar". De lo contrario, estaría dentro del párrafo.
Agrupar
Si su estructura es muy compleja, es posible que desee agrupar etiquetas en lugar de atravesar trepando.
En este ejemplo, crearemos un encabezado (header) y un pie de página (footer) sin escalar usando paréntesis ( ).
div>(header>ul>li>a)+footer>p
Resultado:
Multiplicación y $
Podemos generar múltiples etiquetas multiplicando (*) y numerando elementos en secuencia usando un signo de dólar ($).
ul>li*5 —>
ul>li{Item $}*3 —> Item 1 Item 2 Item 3
Incluso puede personalizar la secuencia de numeración rellenando con ceros, comenzando con un número específico e incluso en la dirección inversa.
Pad con ceros: u>li.item$$$*5
Resultado:
Comience con un número específico: ul>li.item$@3*5
Resultado:
Dirección inversa: ul>li.item$@-*5
Resultado:
Dirección inversa desde un número específico: ul>li.item$@-3*5
Resultado:
Nombres de etiqueta implícitos
Hay ciertas etiquetas que no es necesario escribir y pueden estar implícitas.
Una clase definida inicialmente sin etiqueta estará implícita como
.
.wrapper —>
Una clase definida dentro de una etiqueta de énfasis estará implícita como .
em>.enfasis —>
Una clase definida dentro de una lista estará implícita como un elemento de lista.
ul>.item —>
Una clase definida dentro de una tabla estará implícita como y dentro de una fila será un .
table>.fila>.col —>
Envolver con etiquetas
Habrá ocasiones en las que tenga un código existente que desee envolver con una etiqueta. Podemos hacerlo fácilmente con Emmet.
Simplemente resalte el código que desea envolver y abra la paleta de comandos (F1). Luego busque Emmet: Ajustar con abreviatura Emmet: Wrap with Abbreviation. A continuación, se le presentará un cuadro de diálogo donde puede escribir el elemento.
test —>
test
También puede utilizar la sintaxis estándar de Emmet en este cuadro de diálogo. Intente ajustar un poco de texto con span.wrapper.
De forma predeterminada, esta funcionalidad no está asignada a un método abreviado de teclado. Por lo tanto, si lo usa con frecuencia, es posible que desee agregar un acceso directo personalizado para él.
Lorem Ipsum
"Lorem Ipsum" es un texto ficticio utilizado por los desarrolladores para representar datos en una página. Simplemente escriba lorem y presione Enter. Emmet generará 30 palabras de texto falso que puede usar como relleno en su proyecto.
También se puede definir la cantidad de palabras generadas.
lorem10 te dará 10 palabras de texto aleatorio.
Poniéndolo todo junto
Usemos varias cosas que hemos aprendido hasta ahora. Prueba esto:
ul.mi-lista>lorem10.item-$*5
Resultado:
Lorem ipsum dolor sit amet. Numquam repudiandae fuga porro consequatur? Culpa, est. Tenetur, deleniti nihil? Numquam architecto corrupti quam repudiandae.
CSS
En CSS, Emmet tiene una abreviatura para cada propiedad. No voy a enumerarlos todos, pero señalaré los más utilizados. Para ver la lista completa, consulte la hoja de referencia de Emmet.
Position
pos —> position:relative; (Por defecto es relative)
pos:s —> position:static;
pos:a —> position:absolute;
pos:r —> position:relative;
pos:f —> position:fixed;
Display
d —> display:block; (Lo predetermina a block)
d:n —> display:none;
d:b —> display:block;
d:f —> display:flex;
d:if —> display:inline-flex;
d:i —> display:inline;
d:ib —> display:inline-block;
Cursor
cur —> cursor:pointer;
Color
c —> color:#000;
c:r —> color:rgb(0, 0, 0);
c:ra —> color:rgba(0, 0, 0, .5);
op —> opacity: ;
Margin & Padding
m —> margin: ;
m:a —> margin:auto;
mt —> margin-top: ;
mr —> margin-right: ;
mb —> margin-bottom: ;
ml —> margin-left: ;
p —> padding: ;
pt —> padding-top: ;
pr —> padding-right: ;
pb —> padding-bottom: ;
pl —> padding-left: ;
Box Sizing
bxz —> box-sizing:border-box;
Width
w —> width: ;
h —> height: ;
maw —> max-width: ;
mah —> max-height: ;
miw —> min-width: ;
mih —> min-height: ;
Border
bd —> border: ;
bd+ —> border:1px solid #000;
bd:n —> border:none;
¡Emmet es increíble!
Con Emmet, puede crear una estructura HTML realmente compleja con una línea. Es realmente asombroso. Y también funciona con CSS.
Puede ver cómo Emmet puede aumentar drásticamente su eficiencia y velocidad al escribir HTML y CSS.
Si desea aumentar aún más su eficiencia y velocidad mientras usa VS Code, consulte el curso Conviértase en un Superhéroe de VS Code (Become A VS Code Super Hero).
El curso profundiza mucho más en estos conceptos y te ayuda a convertirte en un desarrollador de superhéroes rápido y eficiente :)
Traducido del artículo de Jesse Hall - How to Write HTML/CSS Faster with Emmet Cheat-Codes

Código de enlace HTML: cómo insertar un enlace a un sitio web con HREF

Luis Delgado — Fri, 14 May 2021 05:12:02 +0000

Un sitio web se compone de varias piezas de información que se encuentran en diferentes secciones y en diferentes páginas dentro del propio sitio.
También puede encontrar información relacionada con ese sitio en páginas que se encuentran en diferentes sitios web.
Todas estas secciones y páginas están vinculadas en HTML mediante el atributo href.
En este artículo, veremos el término Hipervínculo. Luego, aprenderemos sobre las diferentes formas en que puede crear hipervínculos, qué hace href y cómo usar apropiadamente el atributo href para vincular secciones y páginas.
¿Qué son los Hipervínculos?
En HTML, hay varias formas de enlaces. En las imágenes, existe el atributo src para "vincular" la fuente de una imagen.
Para las hojas de estilo, existe la etiqueta de enlace (link) con el atributo href para "enlazar" la fuente de una hoja de estilo.
Para las etiquetas de anclaje (anchor), existe el atributo href para "vincular" la sección o página de referencias. Los enlaces de anclaje también se denominan hipervínculos.
Cuando un usuario sigue un hipervínculo, está navegando a esa página. Los hipervínculos son elementos que hacen referencia a otro documento, de modo que cuando un usuario hace clic en ese elemento, se le dirige al nuevo documento.
Cuándo usar Hipervínculos
Como se indicó anteriormente, es posible que desee vincular varias páginas (dentro de su sitio web o externamente) o secciones en su sitio web.
En este artículo, destacaré tres formas de crear hipervínculos. Es importante conocer estas diferentes formas porque determinan los valores del atributo href.
Muy bien, veamos esas tres formas diferentes ahora.
1. Cuando deseas vincular a secciones de una página
Puede utilizar este método, por ejemplo, al crear una página con una tabla de contenido.
En este caso, es posible que no desee que sus lectores tengan que desplazarse hacia abajo hasta la última sección. Sería bueno si pudieran hacer clic en la tabla de contenido y el navegador los llevaría allí directamente.
Este tipo de vinculación ocurre en el mismo documento y simplemente lleva al lector a diferentes secciones. Aprenderemos cómo crear un hipervínculo para este caso de uso cuando aprendamos sobre el atributo href.
2. Cuando deseas vincular a otra página dentro de un sitio web
En su sitio, es posible que tenga una página de inicio, una página de información, una página de servicios y otros tipos de páginas. Este método ayuda a los usuarios a navegar de una página a otra.
3. Cuando deseas vincular a páginas externas
A veces, es posible que su sitio web no contenga determinada información y que otro sitio web la tenga. En tales casos, es posible que desee hacer referencia al otro sitio web.
Para hacer esto, debe crear un hipervínculo externo que lleve al usuario al otro sitio web.
Estas son las tres formas principales de vincular páginas. Veamos ahora cómo el atributo href puede ayudarlo a habilitarlos.
Cómo utilizar el atributo href
El href es un atributo que se utiliza para hacer referencia a otro documento. Puede encontrarlo en etiquetas de enlace (link) y etiquetas de anclaje.
El atributo href se utiliza en etiquetas de anclaje (a) para crear hipervínculos en sitios web. El valor del atributo contiene la URL a la que apunta el hipervínculo. Puedes usarlo así:
Hypervínculo
Sin embargo, los valores de la URL pueden ser diferentes dependiendo de lo que esté apuntando. Para las tres formas que vimos anteriormente, veamos cómo puede usar href.
1. Cómo usar href para vincular secciones dentro de un documento
En este caso, el valor será el id del elemento que inicia la sección. Eso significa que tendremos algo como esto:
Ir a la segunda sección Segunda sección
Cuando se hace clic en el hipervínculo "Ir a la segunda sección", el navegador se desplaza hacia abajo hasta la sección con la identificación asociada (id). También cambia la URL en la barra de URL del navegador.
Por ejemplo, si la URL anterior era misitioweb.com, la nueva URL será misitioweb.com#segunda-seccion.
2. Cómo usar href para vincular páginas dentro de un sitio web
Para usar href de esta manera, debe comprender qué son las URL relativas y las URL absolutas.
Las URL relativas son URL cortas que apuntan a un documento en el mismo sitio web. Es más como, desde donde estás, ¿cómo llegas a este otro lugar en el mismo sitio web?
Este contraste, con las URL absolutas. Para estos, no le preocupa dónde se encuentra actualmente: proporciona todos los detalles para llegar a otro lugar como si estuviera comenzando desde el principio.
Para navegar entre páginas que viven en un sitio web, puede usar cualquiera de estas URL, pero comúnmente se usan las URL relativas.
Digamos que está en la página de inicio y desea hacer referencia a la página 'Acerca de'.
A continuación, se explica cómo utilizar el atributo href para hacer eso:
Acerca de
Desde la página de inicio (digamos misitioweb.com), el enlace anterior navegará a misitioweb.com/acerca.
Hay algo que vale la pena señalar sobre la barra inclinada (/) antes del enlace. El / le dice al navegador que agregue el enlace a la raíz del sitio (que es el dominio). Entonces, la raíz es misitioweb.com y el enlace se adjunta así: misitioweb.com/acerca.
Si la barra inclinada estaba ausente (), el navegador reemplazaría la ruta actual con /acerca.
Por ejemplo, si actualmente estuviéramos en misitioweb.com/proyectos/generador y tuviéramos los siguientes enlaces:
Acerca 1 Acerca 2
"Acerca 1" navegará a msitioweb.com/proyectos/acerca (reemplazando la ruta / generador actual) y "Acerca 2" navegará a misitioweb.com/about
3. Cómo usar href para vincular a páginas en otro sitio web
Dado que está en un sitio web diferente, no hay forma de que podamos usar URL relativas. Para esto, necesitamos especificar la fuente absoluta del documento al que hacemos referencia.
Por ejemplo, digamos que estamos en misitioweb.com y queremos hacer referencia a google.com, así es como lo haríamos con href:
Google
Si solo hubiéramos escrito google.com, el navegador lo trataría como una página dentro de un sitio web y, por lo tanto, lo agregaría a misitioweb.com.
Conclusión
En este artículo, hemos visto cómo el atributo href nos permite crear diferentes tipos de enlaces. Estos diversos enlaces muestran las diferentes formas en que se puede hacer referencia a documentos / páginas dentro de un sitio web.
Traducido del artículo de Dillion Megida - HTML Link Code – How to Insert a Link to a Website with HREF

Programación funcional en JavaScript Explicado

Luis Delgado — Tue, 11 May 2021 05:00:00 +0000

Una de las cosas más difíciles que tienes que hacer en programación es controlar la complejidad. Sin una consideración cuidadosa, el tamaño y la complejidad de un programa pueden crecer hasta el punto de confundir incluso al creador del programa.
De hecho, como dijo un autor:
"El arte de programar es la habilidad de controlar la complejidad" - Marijn Haverbeke
En este artículo desglosaremos un concepto importante de programación. Este concepto de programación puede ayudarlo a mantener la complejidad bajo control y a escribir mejores programas.
Al final de este artículo, sabrá qué es la programación funcional, los tipos de funciones que existen, los principios de la programación funcional y tendrá una comprensión más profunda de las funciones de orden superior (Higher Order functions).
Supongo que ya tiene conocimientos preexistentes de los conceptos básicos de las funciones. Los conceptos fundamentales de funciones no se tratarán en este artículo.
Si desea una revisión rápida de las funciones en JavaScript, he escrito un artículo detallado aquí.
¿Qué es la programación funcional?
La programación funcional es un paradigma de programación o un estilo de programación que se basa en gran medida en el uso de funciones puras y aisladas.
Tal como puede haber adivinado por el nombre, el uso de funciones es el componente principal de la programación funcional. Pero, el mero uso de funciones no se traduce en programación funcional.
En la programación funcional, utilizamos funciones puras, que son funciones que no tienen efectos secundarios. Explicaré qué significa todo esto.
Antes de profundizar en el artículo, comprendamos parte de la terminología y los tipos de funciones que existen.
Tipos de funciones
Hay cuatro tipos principales de funciones.
Funciones de primera clase
En JavaScript, todas las funciones son funciones de primera clase. Eso significa que pueden tratarse como cualquier otra variable.
Las funciones de primera clase son funciones que pueden asignarse como valores a variables, devolverse desde otras funciones y pasarse como argumentos a otras funciones.
Considera este ejemplo de una función pasada a una variable:
const holaMundo = () => { console.log("Hola, Mundo"); // Hola, Mundo }; holaMundo();
Funciones Callback
Las funciones callback son funciones que se pasan a otras funciones como argumentos y son llamadas por la función en la que se pasan.
Simplemente, las funciones callback son funciones que escribimos como argumentos en otras funciones. No podemos invocar funciones callback. Se invocan cuando se llama a la función principal en la que se pasaron como argumentos.
Veamos un ejemplo:
valorDePrueba es una función que acepta un valor y una función callback prueba que devuelve "valor pasó la prueba" si el valor devuelve verdadero cuando se pasa a la función callback.
En este caso, la función callback es el segundo argumento que pasamos a la función valorDePrueba. Se invoca cuando se llama a la función valorDePrueba.
Funciones de orden superior (High Order Functions)
Las funciones de orden superior son funciones que reciben otras funciones como argumentos o devuelven una función.
En este artículo, voy a profundizar en las funciones de orden superior y por qué son una provisión tan poderosa. Por ahora, todo lo que necesita saber es que este tipo de funciones reciben otras funciones como argumentos o funciones de retorno.
Funciones asíncronas
Las funciones asíncronas son funciones que no tienen nombre y no se pueden reutilizar. Estas funciones se escriben normalmente cuando necesitamos realizar algo una vez y en un solo lugar.
Un ejemplo perfecto de una función asíncrona es lo que escribimos anteriormente en este artículo.
const chequearString = ValorDePrueba('Twitter', valor => typeof valor === 'string'); chequeoString; // Consulte el fragmento de código anterior.
chequearString es una variable cuyo valor es una función. Pasamos dos argumentos a esta función.
'Twitter' es el primer argumento y el segundo es una función asíncrona. Esta función no tiene un nombre y solo tiene una tarea: verificar si el valor dado es una string.
Principios de la programación funcional
Anteriormente en el artículo aludí al hecho de que el mero uso de funciones no se traduce en programación funcional.
Hay algunos principios que debemos comprender si nuestros programas deben calificar para el estándar de programación funcional. Echemos un vistazo a esos.
Evite mutaciones y efectos secundarios.
El primer principio de la programación funcional es evitar cambiar las cosas. Una función no debería cambiar nada, como una variable global.
Esto es muy importante porque los cambios a menudo provocan errores. Si una función cambia una variable global, por ejemplo, podría dar lugar a un comportamiento inesperado en todos los lugares donde se utiliza esa variable.
El segundo principio es que una función debe ser pura, lo que significa que no tiene efectos secundarios. En la programación funcional, los cambios que se realizan se denominan mutaciones y los resultados se denominan efectos secundarios.
Una función pura no hace ninguna de las dos. Una función pura siempre tendrá la misma salida para la misma entrada.
Si una función depende de una variable global, esa variable debe pasarse a la función como argumento. Esto nos permite obtener la misma salida para la misma entrada.
Aquí hay un ejemplo:
const edadLegalEnEEUU = 21; const chequearEstadoLegal = (edad, edadLegal) => { return edad >= edadLegal ? 'Mayor de edad.' : 'Menor de edad.'; }; const johnEstado = chequearEstadoLegal(18, edadLegalEnEEUU); johnEstado; // Menor de edad. edadLegalEnEEUU; // 21
Abstracción
Las abstracciones ocultan detalles y nos permiten hablar sobre problemas en un nivel superior sin describir todos los detalles de implementación del problema.
Usamos abstracciones en casi todos los aspectos de nuestra vida, especialmente en el habla.
Por ejemplo, en lugar de decir "Voy a cambiar dinero por una máquina que una vez conectada muestra imágenes en movimiento acompañadas de sonido", lo más probable es que diga "Voy a comprar un televisor".
En este caso, comprar y televisor son abstracciones. Estas formas de abstracción facilitan mucho el habla y reducen las posibilidades de decir algo incorrecto.
Pero estará de acuerdo conmigo en que antes de usar términos abstractos como comprar, primero debe comprender el significado del término y el problema que abstrae.
Las funciones nos permiten lograr algo similar. Podemos crear funciones para tareas que es más probable que repitamos una y otra vez. Las funciones nos permite crear nuestras propias abstracciones.
Además de crear nuestras propias abstracciones, ya se han creado algunas funciones para que abstraigamos tareas que es más probable que hagamos una y otra vez.
Así que vamos a ver algunas de estas funciones de orden superior que ya existen para abstraer tareas repetitivas.
Filtrando Arreglos
Cuando trabajamos con estructuras de datos como arreglos, es más probable que nos encontremos en una situación en la que solo estemos interesados en ciertos elementos del arreglo.
Para obtener estos elementos podemos crear fácilmente una función para realizar la tarea:
function arregloFiltro(arreglo, prueba) { const arregloFiltrado = []; for (let elemento of arreglo) { if (prueba(elemento)) { arregloFiltrado.push(elemento); } } return arregloFiltrado; }; const arregloMezclado = [1, true, null, "Hola", undefined, "Mundo", false]; const soloCadenas = arregloFiltro(arregloMezclado, elemento => typeof elemento === 'cadena'); onlyCadenas; // ['Hola', 'Mundo']
arregloFlitro es una función que acepta un arreglo y una función callback. Recorre el arreglo y agrega los elementos que pasan la prueba en la función callback en un arreglo llamada arregloFiltrado.
Con esta función podemos filtrar un arreglo y devolver los elementos que nos interesan, como en el caso de arregloMezclado.
Imagínese si tuviéramos 10 programas diferentes y en cada programa necesitáramos filtrar un arreglo. Tarde o temprano resultaría extremadamente tedioso reescribir la misma función una y otra vez.
Por suerte, alguien ya pensó en esto. Los arreglos tienen un método de filtro (filter) estándar. Devuelve una nueva arreglo con los elementos del arreglo que recibe que pasan la prueba que proporcionamos.
const arregloMezclado = [1, true, null, "Hola", undefined, "Mundo", false]; const stringArreglo = arregloMezclado.filter(elemento => typeof elemento === 'cadena') arregloDeCadenas; // ['Hola', 'Mundo']
Usando el método de filtro estándar (filter) pudimos lograr los mismos resultados que logramos cuando definimos nuestra propia función en el ejemplo anterior. Entonces, el método de filtro (filter) es una abstracción de la primera función que escribimos.
Transformar Elementos del arreglo con Map
Imagine otro escenario en el que tenemos una serie de elementos pero nos gustaría realizar una determinada operación en todos los elementos. Podemos escribir una función para hacer esto por nosotros:
function transformarArreglo(arreglo, prueba) { const arregloTransformado = []; for (let elemento of arreglo) { arregloTransformado.push(prueba(elemento)); } return arregloTransformado; }; const edades = [12, 15, 21, 19, 32]; const doblarEdades = transformarArreglo(edades, edad => edad * 2); doblarEdades; // [24, 30, 42, 38, 64];
Así, hemos creado una función que recorre cualquier arreglo dada y transforma todos los elementos del arreglo en función de la función callback que proporcionamos.
Pero nuevamente, esto se volvería tedioso si tuviéramos que reescribir la función en 20 programas diferentes.
Una vez más, alguien pensó en esto por nosotros, y afortunadamente los arreglos tienen un método estándar llamado map que hace exactamente lo mismo. Aplica la función callback en todos los elementos del arreglo dada y luego devuelve una nueva arreglo.
const edades = [12, 15, 21, 19, 32]; const doblarEdades = edades.map(edad => edad * 2); doblarEdades; // [24, 30, 42, 38, 64];
Reducir arreglos con Reduce
Aquí hay otro escenario: tiene un arreglo de números, pero le gustaría calcular la suma de todos estos números y devolverla. Por supuesto, puede escribir una función para hacer esto por usted.
function reducirArreglo(arreglo, prueba, start) { let suma = start; for (let elemento of arreglo) { suma = prueba(suma, elemento) } return suma; } let numeros = [5, 10, 20]; let doblarNumeros = reducirArreglo(numeros, (a, b) => a + b, 0); doblarNumeros; // 35
Al igual que en los ejemplos anteriores que acabamos de ver, l0s arreglos tienen un método de reducción estándar (reduce) que tiene la misma lógica que la función que acabamos de escribir.
El método reduce se utiliza para reducir un arreglo a un solo valor en función de la función callback que proporcionamos. También toma un segundo argumento opcional que especifica desde dónde queremos que comience la operación callback.
La función callback que proporcionamos en la función de reducción (reduce) tiene dos parámetros. El primer parámetro es el primer elemento del arreglo de forma predeterminada. De lo contrario, es el segundo argumento que proporcionamos en el método de reducción (reduce). El segundo parámetro es el elemento actual del arreglo.
let numeros = [5, 10, 20]; let doblarNumeros = numeros.reduce((a, b) => a + b, 10); doblarNumeros; // 45 //El ejemplo anterior utiliza el método de reducción para agregar todos los elementos del arreglo a partir de 10.
Otros métodos de Arreglo útiles
Array.some()
Todas las arreglos tienen el método some que acepta una función callback. Devuelve verdadero si cualquier elemento del arreglo pasa la prueba dada en la función callback. De lo contrario, devuelve falso: (false)
const numeros = [12, 34, 75, 23, 16, 63] console.log(numeros.some(elemento => elemento < 100)) // true
Array.every()
El método every es lo opuesto al método some. También acepta una función callback y devuelve verdadero (true) si todos los elementos del arreglo pasan la prueba dada en la función callback. De lo contrario, devuelve falso: (false)
const numeros = [12, 34, 75, 23, 16, 63] console.log(numeros.every(elemento => elemento < 100)) // true
Array.concat()
El método concat, abreviatura de concatenar, es un método de arreglo estándar que concatena o une dos arreglos y devuelve una arreglo:
const arreglo1 = ['uno', 'dos', 'tres']; const arreglo2 = ['cuatro', 'cinco', 'seis']; const arreglo3 = arreglo1.concat(arreglo2); arreglo3; // [ 'uno', 'dos', 'tres', 'cuatro', 'cinco', 'seis' ]
Array.slice()
El método slice es un método de arreglo que copia los elementos de un arreglo de un índice dado y devuelve un nuevo arrelgo con los elementos copiados. El método slice acepta dos argumentos.
El primer argumento recibe el índice desde el que empezar a copiar. El segundo argumento recibe el índice desde el que dejar de copiar. Devuelve una nuevo arreglo con los elementos copiados desde el índice inicial (exclusivo) al índice final (inclusivo).
Sin embargo, tenga en cuenta que el método de slice no utiliza indexación cero. Entonces, el índice del primer elemento del arreglo es 1, no 0:
const numeros = [1,2,3,4,5,7,8]; console.log(numeros.slice(1, 4)); // [ 2, 3, 4 ]
Conclusión
Espero que hayas disfrutado leyendo este artículo y hayas aprendido algo nuevo al mismo tiempo.
Hay muchos métodos de arreglos y cadenas que no mencioné en el artículo. Si lo deseas, tómate un tiempo para investigar un poco sobre esos métodos.
Traducido del artículo de Joel P. Mugalu - Functional Programming in JavaScript Explained in Plain English

JavaScript String.Replace() ejemplos con expresiones regulares

Luis Delgado — Sat, 01 May 2021 06:27:16 +0000

Las expresiones regulares "Regular Expressions" (también llamadas RegEx o RegExp) son una forma poderosa de analizar texto. Con RegEx, puede hacer coincidir cadenas en puntos que coinciden con caracteres específicos (por ejemplo, JavaScript) o patrones (por ejemplo, NumberStringSymbol - 3a &).
El método .replace se usa en cadenas en JavaScript para reemplazar partes de las cadenas con caracteres. A menudo se usa así:
const str = 'JavaScript'; const nuevaStr = str.replace("ava", "-"); console.log(nuevaStr); // J-Script
Como puede ver arriba, el método .replace acepta dos argumentos: la cadena que se reemplazará y con qué se reemplazará la cadena.
Aquí es donde entra en juego Regex.
El uso de .replace anterior es limitado: los caracteres a reemplazar son conocidos - "ava". ¿Qué pasa si nos preocupamos por un patrón? ¿Quizás un número, dos letras y la palabra "foo" o tres símbolos usados juntos?
El método .replace utilizado con RegEx puede lograr esto. La expresión regular se puede utilizar de forma eficaz para recrear patrones. Entonces, combinar esto con .replace significa que podemos reemplazar patrones y no solo caracteres exactos.
Cómo usar RegEx con .replace en JavaScript
Para usar RegEx, el primer argumento de replace se reemplazará con la sintaxis de expresiones regulares, por ejemplo / regex /. Esta sintaxis sirve como patrón donde cualquier parte de la cadena que coincida con ella será reemplazada por la nueva sub cadena.
He aquí un ejemplo:
// coincide con un número, algunos caracteres y otro número const reg = /\d.*\d/ const str = "Java3foobar4Script" const nuevaStr = str.replace(reg, "-"); console.log(nuevaStr); // "Java-Script"
La cadena 3foobar4 coincide con la expresión regular /\d.*\d/, por lo que se reemplaza.
¿Y si quisiéramos realizar reemplazos en varios lugares?
Regex ofrece eso con la bandera g (global), y lo mismo se puede usar con replace. Así es cómo:
const reg = /\d{3}/g const str = "Java323Scr995ip4894545t"; const nuevaStr = str.replace(reg, ""); console.log(nuevaStr); // JavaScrip5t // 5 no pasó la prueba :(
La expresión regular coincide con partes de la cadena que son exactamente 3 números consecutivos. 323 coincide, 995 coincide, 489 coincide y 454 coincide. Pero los últimos 5 no coinciden con el patrón.
El resultado es que JavaScrip5t muestra cómo los patrones coinciden correctamente y se reemplaza con la nueva subcadena (una cadena vacía).
También se puede utilizar la bandera - i. Esto significa que puede reemplazar los patrones que no distinguen entre mayúsculas y minúsculas. Así es como se usa:
const reg1 = /\dA/ const reg2 = /\dA/i const str = "Jav5ascript" const nuevaStr1 = str.replace(reg1, "--"); const nuevaStr2 = str.replace(reg2, "--"); console.log(nuevaStr1) // Jav5ascript console.log(nuevaStr2) // Jav--script
..5a .. no coincide con la primera sintaxis porque la expresión regular distingue entre mayúsculas y minúsculas de forma predeterminada. Pero con el uso de la bandera i, como se ve en la segunda sintaxis, la cadena es como se esperaba: reemplazada.
Cómo utilizar Split con Expresiones Regulares
split también usa RegEx. Lo que significa que puede dividir una cadena no solo en las subcadenas que coinciden con los caracteres exactos, sino también con los patrones.
He aquí un vistazo rápido:
const regex = /\d{2}a/; const str = 'Hola54 Como 64aestas'; console.log(str.split(regex)); // ["Hola54 Como ", "estas"]
La cadena se dividió (split) en 64a porque esa subcadena coincide con la expresión regular especificada.
Tenga en cuenta que el indicador global - g - en la división split es irrelevante, a diferencia del indicador i y otros indicadores. Esto se debe a que split divide la cadena en varios puntos con los que coincide la expresión regular.
Terminando
RegEx hace reemplazar cadenas con replace en JavaScript sea más efectivo, poderoso y divertido.
No solo está restringido a caracteres exactos, sino también a patrones y reemplazos múltiples a la vez. En este artículo, hemos visto cómo funcionan juntos usando algunos ejemplos.
¿Salud por RegEx ?
Traducido del artículo de Dillion Megida - JavaScript String.Replace() Example with RegEx

JavaScript Try Catch: Explicación del manejo de Excepciones

Luis Delgado — Mon, 15 Mar 2021 05:49:19 +0000

La sentencia try..catch..finally especifica un bloque de código para probar junto con una respuesta en caso de que ocurra un error. La sentencia try puede contener uno o más bloques try y termina con al menos una cláusula catch o finally.
try...catch:
try { throw new Error('mi error'); } catch (err) { console.error(err.message); } // Output: mi error
try...finally:
try { throw new Error('mi error'); } finally { console.error('finally'); } // Output: finally
Cuando no se utiliza una declaración catch, el error no se "detecta", aun cuando se ejecute el bloque finally en el código. En cambio, el error continuará en el bloque superior try (o bloque principal).
try...catch...finally:
try { throw new Error('mi error'); } catch (err) { console.error(err.message); } finally { console.error('finally'); } // Output: // mi error // finally
Uso típico:
try { abrirArchivo(archivo); leerArchivo(archivo) } catch (err) { console.error(err.message); } finally { cerrarArchivo(archivo); }
try...catch anidado:
También puedes:
Anidar una declaración try-catch dentro de un bloque try.
Puedes anidar una declaración try..catch dentro de un bloque try. Por ejemplo, para lanzar un error hacia arriba:
try { try { throw new Error('mi error'); } catch (err) { console.error('interno', err.message); throw err; } finally { console.log('finally interno'); } } catch (err) { console.error('externo', err.message); } // Output: // interno mi error // finally interno // externo mi error
Traducido del artículo - JavaScript Try Catch: Exception Handling Explained

function.prototype.bind y function.prototype.length en JavaScript explicado

Luis Delgado — Fri, 05 Mar 2021 06:20:51 +0000

Función bind
bind es un método sobre el prototipo de todas las funciones en JavaScript. Te permite crear una nueva función a partir de una función existente, cambiar el contexto this de la nueva función y proporcionar los argumentos con los que deseas que se llame a la nueva función. Los argumentos proporcionados para vincular (bind) precederán a los argumentos que se pasen a la nueva función cuando se llame.
Usando bind para cambiar this en una función
El primer argumento proporcionado para vincular (bind) es el contexto this al que estará vinculada la función. Si no deseas cambiar el valor de this pasa null como primer argumento.
Tienes la tarea de escribir código para actualizar el número de asistencia a medida que llegan a una conferencia. Creas una página web simple que tiene un botón que, cuando se hace clic, incrementa la propiedad numDeAsistentes en el objeto de conferencia. Utilizas jQuery para agregar un controlador de clic a tu botón, pero después de hacer clic en el botón, el objeto de la conferencia no ha cambiado. Tu código podría verse así.
var nodevember = { numDeAsistentes: 0, incrementoNumDeAsistentes: function() { this.numDeAsistentes++; } // otras propiedades }; $('.agrega-asistente-btn').on('click', nodevember.incrementoNumDeAsistentes);
Esto es un problema común cuando se trabaja con jQuery y JavaScript. Cuando hace clic en el botón la palabra clave this en el método que pasó al método on de jQuery hace referencia al botón y no al objeto de la conferencia. Puedes vincular el contexto this de tu método para resolver el problema.
var nodevember = { numDeAsistentes: 0, incrementoNumDeAsistentes: function() { this.numDeAsistentes++; } // otras propiedades }; $('.agrega-asistente-btn').on('click', nodevember.incrementoNumDeInvitados.bind(nodevember));
Ahora, cuando se hace clic en el botón, la palabra clave this hace referencia al objeto nodevember.
Proporcionar argumentos a una función con bind
Cada argumento que se pase para vincular bind después del primero precederá a cualquier argumento que se pase cuando se llame a la función. Esto te permite aplicar previamente argumentos a una función. En el siguiente ejemplo, combinaCadenas toma dos cadenas de texto y las concatena. bind se usa para crear una función que siempre proporciona "Cool" como la primera cadena de texto.
function combinaCadenas(str1, str2) { return str1 + " " + str2 } var makeCool = combinaCadenas.bind(null, "Cool"); makeCool("trick"); // "Cool trick"
La guía de esta referencia tiene más información sobre cómo pueden cambiar las referencias de la palabra clave this .
Se pueden encontrar más detalles sobre el método de vinculación bind en los documentos MDN de Mozilla.
Función length
La propiedad length en el objeto de función contiene el número de argumentos que espera la función cuando se llama.
function noArgs() { } function oneArg(a) { } console.log(noArgs.length); // 0 console.log(oneArg.length); // 1
Sintaxis de ES2015
ES2015, o ES6 como se le llama comúnmente, introdujo el operador rest y los parámetros de función predeterminados. Ambas adiciones cambian la forma en que funciona la propiedad de longitud (length) .
Si se utiliza el operador rest o los parámetros predeterminados en una declaración de función, la propiedad de length solo incluirá el número de argumentos antes de un operador rest o un parámetro predeterminado.
function conRest(...args) { } function conArgsYRest(a, b, ...args) { } function conPredeterminados(a, b = 'Soy el predeterminado') { } console.log(conRest.length); // 0 console.log(conArgsYRest.length); // 2 console.log(conPredeterminados.length); // 1
Puedes encontrar más información sobre Function.length en MDN Docs de Mozilla.
Traducido del artículo - function.prototype.bind and function.prototype.length in JavaScript Explained

La palabra clave `this` + 5 reglas de vinculación de teclas (key binding) explicadas para principiantes de JavaScript

Luis Delgado — Tue, 02 Mar 2021 06:57:32 +0000

La palabra clave this de JavaScript es uno de los aspectos más difíciles de comprender del lenguaje. Pero es de vital importancia para escribir código JavaScript más avanzado.
En JavaScript, la palabra clave this nos permite:
Reutilizar funciones en diferentes contextos de ejecución. Es decir, una función una vez definida se puede invocar para diferentes objetos usando la palabra clave this.
Identificar el objeto en el contexto de ejecución actual cuando invocamos un método.
La palabra clave this estrechamente asociada con las funciones de JavaScript. Cuando se trata de this, lo fundamental es entender dónde se invoca una función. Porque no sabemos qué hay en la palabra clave this hasta que se invoca la función.
El uso de this se puede clasificar en cinco aspectos vinculantes (binding ) diferentes. En este artículo, aprenderemos sobre los cinco aspectos con ejemplos.
Primero, ¿Qué es la vinculación (binding)?
En JavaScript, un Entorno Léxico (Lexical Environment) es donde se escribe físicamente tu código. En el siguiente ejemplo, el nombre de la variable está léxicamente dentro de la función decirNombre().
function decirNombre() { let nombre = 'algunNombre'; console.log('El nombre es, ', nombre); }
Un Contexto de Ejecución (Execution Context) se refiere al código que se está ejecutando actualmente y todo lo demás que ayuda a ejecutarlo. Puede haber muchos entornos léxicos disponibles, pero el contexto de ejecución que se está ejecutando actualmente es manejado por el Contexto de Ejecución.
Entorno Léxico vs Contexto de Ejecución
Cada uno de los contextos de ejecución contiene un Registro de Entorno (Environment Record). A medida que el motor JavaScript ejecuta el código, las variables y los nombres de las funciones se agregan al registro de entorno.
Este fenómeno se conoce como vinculación en JavaScript. La vinculación ayuda a asociar los identificadores (variables, nombres de funciones) con la palabra clave this para un contexto de ejecución.
No se preocupe si encuentra esto un poco difícil de entender ahora. Obtendrá una mejor comprensión a medida que avancemos.
Regla #1: Cómo funciona la vinculación implícita de JavaScript
La vinculación implícita cubre la mayoría de los casos de uso para tratar con la palabra clave this.
En la vinculación implícita, debe verificar lo que está a la izquierda del operador de punto (.) adyacente a una función en el momento de la invocación. Esto determina a saber donde la palabra clave this está vinculada.
Veamos un ejemplo para entenderlo mejor.
let usuario = { nombre: 'Tapas', direccion: 'freecodecamp', getName: function() { console.log(this.nombre); } }; usuario.getName();
Aquí, this está vinculado al objeto usuario. Sabemos esto porque a la izquierda del operador punto(.) adyacente a la función getName(), vemos el objeto usuario . Entonces this.name va a registrar Tapas en la consola.
Veamos otro ejemplo para comprender mejor este concepto:
function decorateLogName(obj) { obj.logName = function() { console.log(this.nombre); } }; let tom = { nombre: 'Tom', edad: 7 }; let jerry = { nombre: 'jerry', edad: 3 }; decorateLogName(tom); decorateLogName(jerry); tom.logName(); jerry.logName();
En este ejemplo, tenemos dos objetos, tom y jerry . Hemos decorado (mejorado) estos objetos adjuntando un método llamado logName().
Observa que cuando invocamos tom.logName(), el objeto tom esta a la izquierda del operador punto(.) adyacente a la función logName(). Entonces this está vinculado al objeto tom y registra el valor de tom ( this.nombre es igual a tom aquí). Lo mismo se aplica cuando se invoca jerry.logName().
Regla #2: Cómo funciona la vinculación explícita de JavaScript (explicit binding)
Hemos visto que JavaScript crea un entorno para ejecutar el código que escribimos. Se encarga de la creación de memoria para variables, funciones, objetos, etc. en la fase de creación. Finalmente ejecuta el código en la fase de ejecución. Este entorno especial se denomina Contexto de ejecución (execution context).
Puede haber muchos entornos de este tipo (contextos de ejecución) en una aplicación JavaScript. Cada contexto de ejecución opera independientemente de los demás.
Pero a veces, es posible que deseemos usar cosas de un contexto de ejecución en otro. Ahí es donde entra en juego la vinculación explícita.
En la vinculación explícita, podemos llamar a una función con un objeto cuando la función está fuera del contexto de ejecución del objeto.
Hay tres métodos muy especiales, call(), apply() y bind() que nos ayudan a lograr una vinculación explícita.
Como funciona el método call() de JavaScript
Con el método call() , el contexto con el que se debe llamar a la función se pasará como parámetro call(). Veamos cómo funciona con un ejemplo:
let getName = function() { console.log(this.nombre); } let usuario = { nombre: 'Tapas', direccion: 'freecodecamp' }; getName.call(usuario);
Aquí, el método call() se invoca en una función llamada getName(). La función getName() simplemente registra this.nombre. ¿Pero qué es this aquí? Eso se determina por lo que se ha pasado al método call().
Aquí, this se vinculará al objeto de usuario porque hemos pasado el usuario como parámetro al método call(). Entonces this.nombre debe registrar el valor de la propiedad de nombre del objeto de usuario, es decir, Tapas.
En el ejemplo anterior, hemos pasado solo un argumento para call(). Pero también podemos pasar múltiples argumentos a call(), así:
let getName = function(pasatiempo1, pasatiempo2) { console.log(this.nombre + ' le gusta ' + pasatiempo1 + ' , ' + pasatiempo2); } let usuario = { nombre: 'Tapas', direccion: 'Bangalore' }; let pasatiempos = ['Nadar', 'Escribir']; getName.call(usuario, pasatiempos[0], pasatiempos[1]);
Aquí hemos pasado varios argumentos al método call(). El primer argumento debe ser el contexto del objeto con el que se debe invocar la función. Otros parámetros podrían ser simplemente valores para usar.
Aquí estoy pasando Nadar y Escribir como dos parámetros para la función getName().
¿Notaste un punto crítico aquí? En el caso de una call(), los argumentos deben pasarse uno por uno, lo cual no es una forma inteligente de hacer las cosas. Ahí es donde nuestro método siguiente, apply(), entra en escena.
Cómo funciona el método apply() de JavaScript
Esta forma frenética de pasar argumentos al método call() puede resolverse con otro método alternativo llamado apply(). Es exactamente lo mismo que call() pero le permite pasar los argumentos de manera más conveniente. Echar un vistazo:
let getName = function(pasatiempo1, pasatiempo2) { console.log(this.name + ' le gusta ' + pasatiempo1 + ' , ' + pasatiempo2); } let usuario = { nombre: 'Tapas', direccion: 'Bangalore' }; let pasatiempos = ['Nadar', 'Escribir']; getName.apply(usuario, pasatiempos);
Aquí podemos pasar una serie de argumentos, lo que es mucho más conveniente que pasarlos uno por uno.
Consejo: cuando solo tenga un argumento de valor o ningún argumento de valor para pasar, use call(). Cuando tenga varios argumentos de valor para pasar, use apply().
Cómo funciona el método bind() de JavaScript
El método bind() es similar al método call() pero con una diferencia. A diferencia del método call() de llamar a la función directamente, bind() devuelve una función nueva y podemos invocarla en su lugar.
let getName = function(pasatiempo1, pasatiempo2) { console.log(this.name + ' le gusta ' + pasatiempo1 + ' , ' + pasatiempo2); } let usuario = { nombre: 'Tapas', direccion: 'Bangalore' }; let pasatiempos = ['Nadar', 'Escribir']; let nuevaFn = getName.bind(usuario, pasatiempos[0], pasatiempos[1]); nuevaFn();
Aquí, getName.bind() no invoca la función getName() directamente. Devuelve una nueva función, newFn y podemos invocarla como newFn().
Regla #3: La vinculación new de JavaScript
La palabra clave new se utiliza para crear un objeto a partir de la función constructora.
let Caricatura = function(nombre, personaje) { this.nombre = nombre; this.personaje = personaje; this.log = function() { console.log(this.nombre + ' is a ' + this.personaje); } };
Puede crear objetos usando la palabra clave new como esta:
let tom = new Caricatura('Tom', 'Gato'); let jerry = new Caricatura('Jerry', 'Raton');
Cuando se invoca una función con la palabra clave new , JavaScript un objeto interno this (como, this = {}) dentro de la función. El recién creado this se una al objeto que se está creando utilizando la palabra clave new .
¿Suena complejo? Ok, analicémoslo. Toma esta línea,
let tom = new Caricatura('Tom', 'Gato');
Aquí se invoca la función Caricatura con la palabra clave new . Entonces, el this creado internamente estará vinculado al nuevo objeto que se está creando aquí, el cual es tom.
Regla #4: Vinculación de Objetos Globales de JavaScript
¿Cuál crees que será el resultado del siguiente código? ¿A qué se vincula this aquí?
let sayName = function(nombre) { console.log(this.nombre); }; window.nombre = 'Tapas'; sayName();
Si la palabra clave this no se resuelve con ninguno de las vinculaciones, implicit (implícito), explicit (explícito) o new, la palabra clave this se enlaza con el objeto window(global) .
Sin embargo, hay une excepción. El modo estricto (strict mode) de JavaScript no permite esta vinculación predeterminada.
"use strict"; function myFunction() { return this; }
En el caso anterior, la palabra clave this no está definida (undefined.)
Regla #5: Vinculación de elemento de evento HTML en JavaScript (event element)
En los controladores de eventos de HTML, la palabra clave this se vincula a los elementos HTML que reciben el evento.
El es el registro de salida (output log) en la consola cuando hace clic en el botón:
""
Puedes cambiar el estilo del botón usando la palabra clave this , así:
Pero tenga cuidado cuando llame a una función en el botón clic y use la palabra clave this dentro de esa función.
y en JavaScript:
function cambiarColor() { this.style.color='teal'; }
El código anterior no funcionará como se esperaba. Como hemos visto en la Regla 4, aquí esto estará ligado al objeto global (en el modo 'no estricto') donde no hay un objeto de estilo para establecer el color.
En Resumen
Para resumir,
En el caso de la vinculación implícita, la palabra clave this se vincula a la izquierda del operador punto (.).
En el caso de una vinculación explícita, podemos llamar a una función con un objeto cuando la función está fuera del contexto de ejecución del objeto. Los métodos call(), apply(), and bind() juegan un papel importante aquí.
Cuando se invoca una función con la palabra clave new, la palabra clave this dentro de la función se une al nuevo objeto que se está construyendo.
Cuando la palabra clave this no se resuelve con ninguno de las vinculaciones, implicit(implícito), explicit(explícito) o new, se enlaza con el objeto window(global). En el modo estricto (strict mode) de JavaScript, la palabra clave this no estará definida (undefined).
En los controladores de eventos HTML, la palabra clave this se vincula a los elementos HTML que reciben el evento.
Hay un caso más en el que la palabra clave this se comporta de manera diferente, como con las funciones de flecha de ES6 (ES6 arrow functions). Veremos eso en un artículo futuro.
Espero que este artículo le haya resultado útil.
Si este artículo fue útil, compártelo para que otros también puedan leerlo. Puedes @ me on Twitter (@tapasadhikary) con comentarios, o no dudes en seguirme.
Traducido del artículo de Tapas Adhikary - The JavaScript `this` Keyword + 5 Key Binding Rules Explained for JS Beginners

Explicación del Método JavaScript Math.random()

Luis Delgado — Sat, 30 Jan 2021 13:00:00 +0000

Método Aleatorio
El método JavaScript Math.random() es un excelente método integrado para producir números aleatorios. Cuando se ejecuta Math.random(), devuelve un número aleatorio que puede estar entre 0 y 1. Se incluye el 0 y se excluye el 1.
Generando un número de punto flotante aleatorio entre 0 y 1
El método Math.random() devolverá un número de coma flotante mayor o igual que 0 y menor que (pero nunca igual a) 1. En otras palabras, 0 <= x < 1. Por ejemplo:
console.log(Math.random()); // 0.7069207248635578 console.log(Math.random()); // 0.765046694794209 console.log(Math.random()); // 0.14069121642698246
(Por supuesto, los números devueltos serán diferentes cada vez. Esto se asumirá para todos los ejemplos siguientes; se producirán resultados diferentes en cada pasada).
Para obtener un número aleatorio entre un rango mayor, multiplique el resultado de Math.random() por un número.
Generando un número de punto flotante aleatorio entre 0 y un máximo especificado
Por lo general, no necesita números aleatorios entre 0 y 1; necesita números más grandes o incluso enteros.
Por ejemplo, si desea un número de punto flotante aleatorio entre 0 y 10, puede usar:
var x = Math.random()*10; console.log(x); // 4.133793901445541
Generando un número de punto flotante aleatorio dentro de un rango
Si necesita un número de punto flotante aleatorio que se encuentre entre dos números específicos, puede hacer algo como esto:
var min = 83.1; var max = 193.36; var x = Math.random()*(max - min)+min; console.log(x); // 126.94014012699063
Generando un número entero aleatorio entre 0 y un máximo
A menudo necesitas números enteros. Para hacer esto, tendrá que usar algunos otros métodos del objeto Math, Math.floor() (redondea hacia abajo al entero más cercano) y Math.ceil() (redondea hacia arriba al entero más cercano).
Por ejemplo, si necesita seleccionar aleatoriamente de una matriz de 10 elementos, necesitará un número aleatorio entre 0 y 9 inclusive (recuerde que las matrices tienen un índice cero).
var x = Math.floor(Math.random()*10); console.log(x); // 7
(Recuerda que Math.random() nunca devolverá exactamente 1, por lo que Math.random()*10 nunca devolverá exactamente 10. Esto significa que después de redondear hacia abajo, el resultado siempre será 9 o menos).
Generando un número entero aleatorio entre 1 y un máximo
Si necesita un número aleatorio con el número mínimo de 1 (por ejemplo, eligiendo un día al azar en enero), puede utilizar el método Math.ceil().
var x = Math.ceil(Math.random()*31); console.log(x); // 23
Otra forma habría sido usar la función anterior (usando Math.floor()) y agregarle 1:
var x = Math.floor(Math.random()*31)+1; console.log(x); // 17
Generando un número entero aleatorio dentro de un rango
Por último, ocasionalmente necesitas un número entero aleatorio entre dos números enteros específicos. Por ejemplo, si está tratando de elegir boletos de rifa y conoce los números del número más bajo y más grande:
var min = 1718; var max = 3429; var x = Math.floor(Math.random()*(max-min+1)+min); console.log(x); //2509
¿Qué tan aleatorio es Math.random ()?
Cabe señalar que el número devuelto por Math.random() es un número pseudoaleatorio, ya que ninguna computadora puede generar un número verdaderamente aleatorio, que exhibe aleatoriedad en todas las escalas y en todos los tamaños de conjuntos de datos. Sin embargo, el número pseudoaleatorio generado por Math.random() suele ser suficiente para las necesidades de casi cualquier programa que pueda escribir. La no-verdaderamente-aleatoriedad solo se hace evidente en conjuntos de números astronómicamente grandes o cuando se necesitan decimales excepcionalmente precisos.
Traducido del artículo - JavaScript Math.random() Method Explained

Cómo elegir el mejor editor de JavaScript para desarrollo web

Luis Delgado — Wed, 13 Jan 2021 13:00:00 +0000

Hay una serie de opciones para los desarrolladores que buscan un buen editor de JavaScript que proporcione un entorno de trabajo más eficiente y agradable.
Los principales editores de código JavaScript comparten muchas de las mismas características principales que podría esperar, incluido el autocompletado (completado del código), la integración de git y la compatibilidad con complementos (plug-in). Pero son las pequeñas cosas las que pueden hacer que un editor se adapte mejor que otro a un desarrollador determinado.
Una vez que se sienta cómodo con un editor de código y familiarizado con el flujo de trabajo que lo hace más eficiente, puede ser difícil cambiar de editor, ya que tendrá que volver a aprender los atajos para optimizar sus procesos de desarrollo.
Incluso si se vuelve más eficiente a largo plazo, todavía existe una gran barrera de entrada al cambiar, por lo que vale la pena invertir un poco de tiempo por adelantado para elegir el mejor editor para sus necesidades.
Repasemos ahora algunas de las opciones de editor más populares.
Visual Studio Code
VSCode de Microsoft es gratuito, de código abierto y bastante ligero tras la instalación. Este es el editor de facto para desarrolladores principiantes de JavaScript, en parte porque está precargado con un buen conjunto de funcionalidades que no requieren complementos adicionales. VSCode también es popular y puede ser ideal para usuarios más avanzados que necesitan comenzar rápidamente.
Una característica única de VSCode es que se puede utilizar a través del navegador. Por lo tanto, el mismo entorno exacto que obtiene en el escritorio es posible mientras viaja con su tableta. Se debe configurar un servidor de códigos en una red a la que pueda acceder para que esta característica funcione, pero es muy conveniente una vez que está configurada.
Consejo: Cuando estoy trabajando en un proyecto grande en otro IDE (entorno de desarrollo integrado) donde el proceso de compilación puede llevar algún tiempo, a menudo abro el enorme archivo de salida (output) JS en VSCode y lo ajusto para probar instantáneamente un cambio en el navegador antes de aplicarlo. VSCode maneja estos archivos grandes a la perfección.
Git está integrado en el IDE, pero la integración no es tan sólida como la de otros editores. Por ejemplo, los usuarios de WebStorm prefieren la experiencia de push / merge a la de VSCode.
Puede instalar muchas funciones adicionales que pueda necesitar como extensiones, de las cuales hay miles. Pero no todas son características reales. Los fragmentos de código se mezclan con las funciones y complementos, lo que puede llevar tiempo revisar y encontrar las mejores opciones para agregar. Si alguna vez se encuentra con un problema, VSCode tiene una gran comunidad de usuarios; es probable que alguien haya tenido el mismo problema y lo haya resuelto.
Si no está listo para un IDE de pago completo con todas las comodidades y no está lo suficientemente familiarizado con todos los complementos y funciones que pueda necesitar, VSCode es el punto de partida lógico.
Atom
El editor Atom gratuito fue desarrollado por GitHub. En realidad, es una versión especializada del navegador Chrome convertida en un editor de texto y código fuente. Internamente, utiliza Node.js para compatibilidad con complementos.
Hay una gran cantidad de complementos disponibles para cualquier característica que desee, sin embargo, no es tan fuerte de fábrica. Debe recopilar una serie de complementos para construir el entorno de desarrollo donde pueda ser lo más efectivo posible. Si está trabajando con JavaScript, aquí hay algunos complementos esenciales de Atom para comenzar:
atom-typescript
file-icons - para colorear y asignar iconos a diferentes tipos de archivos
atom-beautify
linter
Consejo: habilite el paquete de autoguardado que guardará las ediciones cuando pierda la concentración. Está deshabilitado por defecto.
Varios usuarios pueden trabajar en el mismo archivo al mismo tiempo, cada uno con varios cursores en la pantalla, a través del complemento de teletipo. Puede usar esto para asesorar, codificar en parejas o colaborar. Esta característica distingue a Atom de otros editores.
La integración de git está bien implementada, como ha de esperarse del software GitHub. También es útil un complemento git-plus que le permite ejecutar comandos git a través de atajos de teclado sin usar la terminal git.
Atom se puede personalizar hasta el punto en que puede editar un archivo .less para ajustar los colores IDE, lo cual es bueno si desea modificar cada detalle de su entorno. Puede ejecutar un script .coffe al inicio que se puede utilizar para cambiar rápidamente el comportamiento del editor.
Puede escribir complementos en JavaScript contra una API de editor bien documentada. Es bueno tener la posibilidad de crear sus propias funciones y comportamientos, en caso de que surja la necesidad.
La experiencia de edición es fluida y puede mejorarla con otros complementos como minimap, pero se requiere una inversión de tiempo inicial para configurarlo con todas las funciones que desea. El beneficio es que las funciones que no necesita no tardarán en cargarse, lo que ralentiza la experiencia. Sin embargo, puede experimentar cierta lentitud momentánea al cargar archivos grandes o cambiar de pestaña.
Inicialmente me gustó la idea de editar estilos CSS para personalizar el entorno IDE, o al menos tener la posibilidad si alguna vez quería crear mis propios temas. Suena divertido, pero en la práctica, crear temas que incluyan muchas variables no son proyectos triviales. Afortunadamente, hay muchos complementos de temas pulidos disponibles para descargar.
Atom es un editor sólido y encajará perfectamente con muchos desarrolladores.
Sublime Text
Sublime Text es un editor de pago, pero hay una prueba gratuita disponible. No está pre-cargado con muchos complementos (plugins) para comenzar, pero, por supuesto, están disponibles para satisfacer cualquier necesidad que pueda tener. Algunos paquetes como SideBarEnhancements para cambiar el nombre, mover, copiar y pegar probablemente deberían estar integrados en el paquete principal, pero puede descargarlos para habilitar esta funcionalidad.
Al igual que en Atom, puede llevar un poco de tiempo configurar todo. Pero una vez en funcionamiento, la experiencia es muy fluida. Autoguardado (save on lost focus) también está disponible.
Sublime Text es bueno porque es liviano, lo que lo hace muy rápido para cargar y trabajar con proyectos o archivos grandes. La implementación de la función "goto anything" (ir a cualquier cosa) se destaca, ya que se puede utilizar con nombres de archivo, símbolos y números de línea. La mayoría de los IDE proporcionan características similares de una forma u otra, pero poder combinarlas y buscar con consultas como "fileName@functionName" es bastante agradable.
La selección de una variable selecciona todas las apariciones de esa variable y el cambio de nombre cambia el nombre de todas las apariciones automáticamente, por lo que esta tarea común se convierte en una experiencia muy simplificada.
En muchos sentidos, Sublime Text es muy similar a Atom. Pero Sublime Text tiene la ventaja de un mejor rendimiento general y capacidad de respuesta, lo cual es excelente.
VIM
Vim también es un editor de texto gratuito y muy configurable. Originalmente llamado vi y el primer editor de texto desarrollado para Unix, luego se extendió a un editor más rico en funciones llamado Vim. Está disponible en la mayoría de las distribuciones de Linux.
Vim tiene capacidades sólidas de búsqueda y resaltado de sintaxis, y es superliviano, por lo que puede funcionar bien incluso con archivos muy grandes. Pero requiere algo de trabajo para configurarlo y dejarlo listo para usar.
Hay una GUI disponible, pero no es la interfaz predeterminada para Vim. Incluso habilitar la compatibilidad con el mouse requiere alguna acción para que funcione. El predeterminado es un modo de teclado en el que algunos pueden preferir acceder a todos los controles y funciones a través de atajos.
Dicho esto, Vim puede ser su IDE perfecto si dedica algún tiempo a aprender los entresijos del software, configura todos los comportamientos y características que desea en él. Si tiene poco tiempo y no puede hacer la inversión inicial para marcar las cosas, es posible que Vim no sea la mejor opción para ti.
WebStorm
WebStorm fue desarrollado por JetBrains y se destaca del resto como un verdadero IDE de JavaScript, ya que tiene todas las funciones integradas desde el primer momento. El entorno de desarrollo para diferentes plataformas como React, Angular, Vue.js, etc. es perfecto. Puede depurar scripts de nodos y ejecutar pruebas en un servidor integrado. También puede ejecutar y depurar scripts npm a través de una interfaz de vista de árbol. Y no requiere ningún complemento para hacer esto.
Sin embargo, los complementos (plugins) están disponibles para algunas funciones poco comunes que no están integradas directamente en el software. Un complemento (plugin) que no se incluyó de forma predeterminada fue una ventana de vista previa / edición (edit/preview window). Pero en su mayor parte, todo lo que pueda necesitar ya está ahí. Lo bueno de esto es que descubrirás características que no sabías que existían y lo bueno que es tenerlas.
Los archivos se guardan automáticamente a medida que trabaja en ellos de forma predeterminada. Cuando usa otra aplicación que no hace esto, el guardado manual se siente muy primitivo en comparación. Aunque no es exclusivo de WebStorm, la implementación es un poco mejor.
Es posible que algunas personas no siempre confíen en la integridad de la pila de estado de deshacer ctrl-z, pero en WebStorm hay un sistema VSC integrado que básicamente realiza una confirmación cada vez que se guarda un archivo. Esto es interno y está separado de tus git commits. Los archivos se guardan al menos cuando la ventana de contenido del archivo pierde el foco. Entonces, si pasa un tiempo sin comprometerse con git y tiene que volver o ver un estado anterior después de su última confirmación, no hay problema.
Consejo: Ctrl-shift-flecha arriba / abajo le permite mover líneas o bloques de código hacia arriba o hacia abajo mientras el editor maneja las comas / corchetes de bloque automáticamente.
Cuando trabaja en proyectos que tienen muchos archivos, desplazarse por el árbol de archivos en busca de un archivo específico puede ralentizarlo. Pero si uno de esos elementos ya está abierto y enfocado, al hacer clic en el icono de destino, la vista de árbol del proyecto se desplaza hacia este archivo. Es muy conveniente.
Un par de desventajas son que no es gratis. Y, a veces, puede ser una pérdida de memoria con proyectos muy grandes. Ha mejorado a lo largo de los años y el contenido de los archivos se indexa internamente, por lo que la búsqueda de proyectos grandes es muy rápida. Una actualización reciente también incluye una mejora significativa en la velocidad de inicio.
Consejos de productividad para los editores en general
El acceso directo de línea / selección duplicada (en WebStorm: ctrl-d, en Atom: ctrl-shift-d, pero todos pueden hacerlo) es uno de mis favoritos y puede ahorrar mucho tiempo en muchos escenarios de codificación.
Esto aparecerá de vez en cuando tenga una lista de elementos y tenga que modificar el primer (o algunos) carácter en cada línea de decir '.' to ',' pero buscar-reemplazar no es práctico de usar. WebStorm permite Alt-click para colocar varios cursores para realizar las mismas ediciones en varios lugares. Aun así, encuentro el siguiente enfoque más rápido en algunos escenarios:
Coloque el cursor después del primer punto y comience a realizar el cambio manualmente.
Presione la tecla de retroceso, coma, flecha hacia abajo. Coloque un dedo en cada tecla y repita las pulsaciones comenzando lentamente y luego acelerando a medida que avanza. Una vez que obtenga el patrón, puede acelerarlo hasta donde pasará por una lista de 200 líneas en poco tiempo.
Es casi como tocar una melodía en un piano (lo más rápido que puedas). También puede hacer esto con listas de numeración. Escriba la primera línea sin el número, duplique la línea 9 veces y haga el mismo proceso, excepto que haga que un dedo presione un número subsiguiente cada vez. Comience las siguientes 10 líneas con un '1' y realice el mismo proceso agregando un dígito después de cada '1'.
Si busca en Google “[nombre del editor] cheatsheet”, puede obtener un resumen rápido de los usuarios para configuraciones importantes o accesos directos para el editor que está probando. Imprímelo y lee todos los accesos directos para conocer las nuevas características y funcionalidades a las que de otro modo no estarías expuesto.
Considerando cómo subrayar acciones puede mejorar tu proceso actual, será beneficioso. Si ve uno de ellos puede ayudar, coloque una marca junto a él para que la próxima vez que se encuentre en la situación de usarlo sea fácil de recordar. Incluso si lo usa con poca frecuencia más que todo al principio, tener una referencia rápida a mano puede reducir la fricción para aprender más sobre su editor y puede ahorrar tiempo en el cambio de contexto y búsqueda en el futuro.
He ido tan lejos como para encontrar la versión PDF, imprimir y plastificar la página para referencia futura, pero para algunos, un marcador o una captura de pantalla también pueden funcionar.
Conclusión
Si es un principiante que espera aprender JavaScript y utilizar un entorno de desarrollo pulido para comenzar, VSCode es la opción obvia porque es fácil de usar con muchas funciones sólidas integradas.
Para los desarrolladores más experimentados que saben exactamente lo que quieren, pueden ser preferibles Sublime y Atom, ya que le darán un control total sobre su entorno de desarrollo. Puede elegir entre miles de funciones (paquetes) para instalar y mantener el inicio de la aplicación y el uso de recursos libres de extras que no necesita o desea. Pasar algo de tiempo con cada uno de ellos le ayudará a tomar la decisión correcta.
Para los usuarios avanzados que se sienten como en casa usando solo el teclado trabajando en proyectos, puede ser más efectivo con Vim que con cualquier otro editor. Ahorrar el tiempo que le toma a su mano moverse entre el teclado y el mouse se sumará, ¡pero llevará algo de tiempo dominar este proceso!
Por último, si no le importa mantener una suscripción paga y no le preocupan las limitaciones de memoria o CPU de su máquina de desarrollo, WebStorm lo pondrá en funcionamiento rápidamente independientemente de las plataformas de desarrollo de JavaScript, transpilers o procesos de compilación con los que trabajes. Proporciona un entorno muy conveniente para trabajar.
Yo personalmente uso WebStorm como mi IDE principal, pero sigo usando VSCode regularmente para editar archivos individuales o muy grandes cuando el rendimiento es una prioridad.
Si le gustó este artículo, considere consultar JSCharting, una biblioteca de gráficos de JavaScript para desarrolladores. También puede ver publicaciones de blog adicionales aquí.
Traducido del artículo de Arthur Puszynski - How to Choose the Best JavaScript Editor for Web Development

Angular vs React: Cuál Elegir Para tu Aplicación

Luis Delgado — Sun, 27 Dec 2020 13:00:00 +0000

Una comparación precisa de los aspectos generales y técnicos entre Angular y React
Hay tantos artículos titulados "Angular vs React", "React vs Angular", "Angular o React" – ¡Es un milagro que hayas abierto este post! Sin embargo, lo que le falta a esos artículos, es una comparación punto por punto con Angular vs React.
Así que esto es lo que haré en este post: colocar React y Angular en yuxtaposición directa. Vamos a revisar y contrastar estos dos frameworks de JavaScript y observar cada posible característica para asegurarnos de que no nos perdemos ni un solo dato.
Al final, no voy a decirte qué tecnología elegir. Pero te daré la suficiente información para reflexionar y que así elijas la tecnología que mejor se adapte a ti y a tu proyecto.
Descargar para mejor calidad de imagen
1. Breve descripción
React
React es una librería de JavaScript para el desarrollo UI (Interfaz de usuario). Está gestionado por Facebook y una comunidad de desarrolladores de código abierto.
La librería se presentó en mayo de 2013.
Las últimas actualizaciones se lanzaron el 22 de octubre de 2020.
Angular
Angular es un framework de JavaScript de código abierto para desarrollo web y móvil. Está basado en TypeScript y está gestionada por el equipo de Angular de Google y la comunidad de desarrolladores de Angular.
Lanzada en septiembre de 2016, Angular (también conocida como Angular 2.0) es una elaboración completa de Angular JS (Angular 1.0), que se presentó en 2010.
La última versión de Angular tuvo lugar el 6 de febrero de 2020.
2. Universalidad
React
React es una librería que se utiliza tanto en desarrollo web como móvil. Sin embargo, para el desarrollo móvil, debe incoporarse con Cordova. Por otra parte, para desarrollo móvil, existe una librería adicional – React Native.
React se puede utilizar para crear aplicaciones web de página única (single-page) o de varias páginas (multiple-page).
Angular
Angular es adecuado para el desarrollo web y móvil. En el desarrollo móvil, sin embargo, Ionic realiza una gran parte del trabajo. Además, similarmente a React, Angular tiene un framework de desarrollo móvil adicional. La contraparte de React Native es NativeScript.
Angular también se puede utilizar para aplicaciones web de página única o de varias páginas.
3. Autosuficiencia
React
React es una librería para el desarrollo UI, por lo que las aplicaciones escritas con React para que puedas ser utilizadas necesitan librerías adicionales. Por ejemplo, Redux, React Router o Helmet optimizan los procesos de gestión de estado, enrutamiento e interacción con la API. Funciones como las de enlazado de datos, el enrutamiento basado en componentes, la generación de proyectos, la validación de formularios, o la inyección de dependencias requieren la instalación de módulos o librerías adicionales.
Angular
Angular es un framework completo para el desarrollo de software, el cual generalmente no requiere de librerías adicionales. Todas las funciones mencionadas anteriormente como los enlaces de datos, el enrutamiento basado en componentes, la generación de proyectos, la validación de formularios, y la inyección de dependencias, se pueden implementar con los medios proporcionados por el paquete de Angular.
4. Curva de aprendizaje
React
React es minimalista: sin inyección de dependencias, sin plantillas clásicas, sin funciones demasiado complicadas. La librería será bastante sencilla de entender si ya conoces bien JavaScript.
Sin embargo, se necesita bastante tiempo para aprender a configurar un proyecto porque no existe una estructura de proyecto predefinida. También necesitarás aprender a manejar la librería Redux, que se usa en más de la mitad de las aplicaciones de React para la gestión de estado. Las actualizaciones constantes de la librería también requieren de un esfuerzo adicional por parte del desarrollador. Además, hay muchas buenas prácticas en React, que necesitarás aprender para poder hacer las cosas bien.
Angular
Angular en sí es una librería enorme, y aprender todos los conceptos asociados llevará mucho más tiempo que en el caso de React. Angular es más complejo de entender, hay mucha sintaxis innecesaria y la administración de componentes es compleja. Algunas características más complejas están integradas en el núcleo de la librería, lo que significa que el desarrollador no puede evitar aprenderlas y usarlas. Además, hay muchas formas de resolver un único problema.
Aunque TypeScript se parece mucho a JavaScript, también lleva algún tiempo aprenderlo. Dado que el framework se actualiza constantemente, el desarrollador debe realizar un esfuerzo extra de aprendizaje.
5. Comunidad
React
React es uno de las librerías de JS más populares en todo el mundo, y la comunidad que lo apoya y desarrolla es enorme.
Al trabajar con React, debes ser un aprendiz continuamente ya que la librería se actualiza a menudo. Si bien la comunidad intenta avanzar con la documentación más reciente lo más rápido posible, mantenerse al día con todos los cambios no es tan fácil. A veces, puede faltar cierta documentación, pero el problema a menudo se resuelve con el apoyo de la comunidad en foros temáticos.
React es utilizado activamente por empresas como Facebook, Twitter, Netflix, Airbnb, Paypal, The New York Times, Yahoo, Walmart, Uber y Microsoft.
Angular
Angular es menos admirado que React y encara mucho escepticismo, en parte debido a la impopularidad de Angular 1.0. Los desarrolladores solían descartar el framework por ser demasiado complicado, ya que requería mucho tiempo para aprenderlo. Sin embargo, este framework ha sido desarrollado por Google, que trabaja a favor de la credibilidad de Angular.
Google proporciona el soporte a largo plazo del framework y lo mejora constantemente. Sin embargo, las actualizaciones son tan rápidas que la documentación a menudo de sufre retrasos.
Angular también es utilizado por empresas como McDonald's, AT&T, HBO, Apple, Forbes, Adobe, Nike y Microsoft.
6. Desempeño
React
El rendimiento de React ha mejorado enormemente con la introducción del DOM virtual. Dado que todos los árboles DOM virtuales son ligeros y están integrados en el servidor, se reduce la carga en el navegador. Además, dado que el proceso de enlace de datos es unidireccional, los enlaces no se asignan a los observadores (watchers) como en el caso de Angular. Respectivamente, no se crea una carga de trabajo adicional.
Angular
Angular rinde peor, especialmente en el caso de aplicaciones web complejas y dinámicas.
El rendimiento de las aplicaciones de Angular se ve afectado negativamente por el enlace de datos bidireccional. A cada enlace se le asigna un observador para realizar el seguimiento de los cambios, y cada ciclo continúa hasta que se verifiquen todos los observadores y los valores asociados. Debido a esto, cuantas más vinculaciones tenga, más observadores se crearán y más engorroso se volverá el proceso.
Sin embargo, la actualización más reciente de Angular ha mejorado enormemente su rendimiento y ya no pierde frente a React. Además, el tamaño de una aplicación Angular es ligeramente más pequeño que el tamaño de una aplicación React.
7. Lenguaje
React
React se basa en JavaScript ES6 + combinado con JSX script. JSX es una extensión para la sintaxis, lo que hace que un código JavaScript se parezca a un código escrito en HTML. Esto hace que el código sea más fácil de entender y los errores tipográficos son más fáciles de detectar. Para que el código JSX se compile en un navegador, React se complementa con Babel, una herramienta de traducción de código.
Angular
Angular puede usar JavaScript o TypeScript, que es un superconjunto de JS desarrollado específicamente para proyectos más grandes. TypeScript es más compacto que JavaScript, el código es más fácil de navegar y los errores tipográficos se detectan fácilmente. El proceso de refactorización de código también se vuelve más simple y rápido.
8. Estructura de la Aplicación
React
La estructura de React ofrece a los desarrolladores la libertad de elegir. No existe "una única estructura correcta" para una aplicación React. Sin embargo, la necesidad de diseñar la estructura de la aplicación al comienzo de cada proyecto hace que sea más difícil y más largo de comenzar.
Además, React ofrece solo la capa View, mientras que Model y Controller se agregan con el uso de otras librerías.
La arquitectura de una aplicación React está basada en componentes. El código está hecho de componentes React, que se renderizan con la biblioteca React DOM y se dirigen de dos maneras: funcional (con una función que devuelve JSX) ...
function Hola(props){ return Hola {props.nombre} }
... y basado en clases (con clases ES6).
class Hola extends React.Component { render() { return Hola, {this.props.nombre}; }
Angular
La estructura de Angular es fija y compleja, adecuada para desarrolladores experimentados.
Angular se basa en tres capas: Model, Controller y View. El objeto responsable del Model es inicializado por el Controller y se muestra con el View.
El código de la aplicación consta de diferentes componentes de Angular, cada uno escrito en cuatro archivos separados: un archivo TypeScript para implementar el componente, un archivo HTML para definir la vista, un archivo CSS para definir las características de estilo y un archivo especial para efectuar las pruebas. Los enlaces a estos archivos están escritos en la directiva de la aplicación (app directive), que muestra la lógica estructural de la aplicación. Respectivamente, los componentes de Angular también son reutilizables.
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
9. Componentes de la interfaz de usuario (UI)
React
Las herramientas de interfaz de usuario para React son desarrolladas por la comunidad. Hay muchos componentes de IU gratuitos y de pago en el portal de React. Para usar componentes de Material design en React, tendría que instalar una librería adicional: Material-UI Library & Dependencies.
Angular
Angular tiene un Material design preconstruidos. Hay varios botones, diseños, indicadores, ventanas emergentes y controles de formulario. Debido a esto, la configuración de la interfaz de usuario (UI) se vuelve más simple y rápida.
10. Directivas
React
En React, las plantillas y la lógica se explican en un solo lugar: al final del componente. Permite al lector captar rápidamente el significado del código incluso si no conoce la sintaxis.
Angular
En Angular, cada plantilla se devuelve con un atributo: una directiva de cómo se debe configurar el objeto. La sintaxis de las directivas Angular es compleja y sofisticada, lo que la hace incomprensible para un lector sin experiencia trabajando con esta tecnología.
11. Gestión de Estado
React
En React, cada componente tiene su propio estado. Un desarrollador de React puede crear componentes especiales para mantener el estado de toda la aplicación o una parte en concreto de ella. La principal desventaja aquí consiste en el hecho de que el estado global debe almacenarse en múltiples partes diferentes de la aplicación y los datos se pasan manualmente a los diferentes niveles del árbol de componentes.
class Reloj extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( ¡Hola Mundo! Ahora es {this.state.date.toLocaleTimeString()}. ); } }
Para resolver este problema, existe una librería de gestión especial del estado: Redux. La idea de está es que el estado global se representa como un único objeto con estado, que se modifica en diferentes partes de la aplicación con la ayuda de reductores: funciones especiales de Redux.
La librería de gestión de estado MobX ofrece otra solución. A diferencia de Redux con el estado global almacenado en un solo objeto con estado inmutable, MobX ofrece almacenar solo el estado mínimo requerido, mientras que el resto se puede derivar.
Angular
En Angular, los datos de los componentes se almacenan en las propiedades de los componentes. Los componentes principales (parent) pasan datos a los secundarios (child). Los cambios de estado en algunas partes se pueden identificar y recalcular, pero en una aplicación grande, pueden causar una serie de actualizaciones multidireccionales del árbol, que serán difíciles de rastrear. Las funciones se pueden mejorar con la ayuda de bibliotecas de gestión de estado, como NgRx o RxJS, que garantizarían que el flujo de datos sea unidireccional.
export class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor(private service: HeroService) { } ngOnInit() { this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } }
12. Inyección de dependencias
React
React no es totalmente compatible con la inyección de dependencias, ya que no cumple totalmente con la idea de programación funcional e inmutabilidad de datos. En cambio, tiene un estado global para todos los componentes.
Angular
La mayor ventaja de Angular reside en el hecho de que, a diferencia de React, admite la inyección de dependencias. Por tanto, Angular permite tener diferentes ciclos de vida para diferentes almacenamientos.
import { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; @Injectable({ // declaramos que este servicio debe ser creado // por el inyector de aplicación root. providedIn: 'root', }) export class HeroService { getHeroes() { return HEROES; } }
13. Enlace de datos
React
El enlace de datos representa el proceso de sincronización de datos entre el Model y View. React debe reforzase con Redux, quien le permite trabajar con datos inmutables y hace que el flujo de datos sea unidireccional. El enlace unidireccional es predecible, lo que facilita el proceso de depuración.
Angular
Angular funciona con el enlace de datos bidireccional y datos mutables. Si bien las ventajas de los datos mutables e inmutables son tema de una acalorada discusión, definitivamente es más fácil trabajar con el enlace de datos bidireccional que con el enfoque unidireccional. Al mismo tiempo, el enlace de datos bidireccional afecta negativamente al rendimiento, ya que Angular desarrolla automáticamente un observador para cada enlace.
Las formas del enlace de datos en Angular:
{{expression}} Interpolation [target]="expression" Property bind-target="expression" Attribute
(target)="statement" Event on-target="statement" Event
[(target)]="expression" Two-way bindon-target="expression" Two-way
14. Cambio de Renderizado
React
React utiliza un Modelo de Objetos del Documento virtual (DOM), que permite implementar fácilmente cambios menores en los datos de un elemento sin actualizar la estructura de todo el árbol. La librería crea una memoria en caché de la estructura de datos, calcula los cambios y actualiza de manera eficiente el DOM que se muestra en el navegador. De esta manera, toda la página parece renderizarse representarse en cada cambio, mientras que en realidad, las librerías solo representan los subcomponentes modificados.
El equipo de React está mejorando constantemente Fiber, un mecanismo destinado a impulsar la productividad del renderizado de cambios.
Angular
Angular usa un DOM real, que actualiza toda la estructura del árbol incluso cuando los cambios han tenido lugar en un solo elemento. El DOM real se considera más lento y menos efectivo que el DOM virtual.
Para compensar esta desventaja, Angular utiliza la detección de cambios para identificar los componentes que deben modificarse. Por lo tanto, el DOM real en Angular funciona con la misma eficacia que el DOM virtual en React.
15. Herramientas
React
React es compatible con varios editores de código. Por ejemplo, el código en React se puede editar con Sublime Text, Visual Studio y Atom. Para iniciar un proyecto, puede usar la herramienta Create React App (CLI). A su vez, la renderizacion del lado del servidor se completa con el uso del framework Next.js.
Para probar toda la aplicación escrita en React, necesitarías varias herramientas. Por ejemplo, Enzyme para las pruebas de componentes, Jest para probar el código JS, React-unit para las pruebas unitarias, etc. Para depurar la aplicación en el modo de desarrollo, puede usar una extensión de navegador llamada React Dev Tools.
Otra herramienta interesante es React 360, que es una biblioteca utilizada para crear aplicaciones AR (realidad aumentada) y VR (realidad virtual).
Angular
De manera similar a React, Angular es compatible con una variedad de herramientas de edición de código. Por ejemplo, puedes trabajar con editores de código como Aptana, Sublime Text y Visual Studio. Un proyecto se puede configurar rápidamente con Angular CLI. La renderizacion del lado del servidor se completa con la ayuda de Angular Universal.
A diferencia de React, Angular se puede probar completamente con una sola herramienta. Para las pruebas de extremo a extremo (end-to-end) en Angular, las plataformas son Jasmine, Protractor y Karma. Otra herramienta que depura la aplicación en el modo de desarrollo es una extensión del navegador Augury.
Conclusión
Angular es un framework de desarrollo web y móvil completo. React es una librería solo para el desarrollo de UI, que se puede convertir en una solución completa con la ayuda de librerías adicionales.
React parece más simple a primera vista y lleva menos tiempo el comenzar a trabajar en un proyecto con React. Sin embargo, esa simplicidad que es la principal ventaja de React se neutraliza porque tienes que aprender a trabajar con frameworks y herramientas de JavaScript adicionales.
Angular en sí es más complejo y lleva bastante tiempo dominarlo. Sin embargo, es una herramienta poderosa que ofrece una experiencia de desarrollo web integral, y una vez que aprendes a trabajar con ella, da sus frutos.
No hay un mejor framework o una mejor librería. Ambos se actualizan continuamente para mantenerse al día con su competidor. Por ejemplo, mientras que se creía que React ganaba debido a su DOM virtual, Angular igualó la puntuación al implementar la detección de cambios. Si bien se consideró que Angular estaba ganando debido a que fue desarrollado por una empresa tan autoritaria como Google, la inmensa y devota comunidad de React compensó completamente la reputación de Google e hizo que React fuera similar a Angular.
Al final, React vs Angular es una cuestión de preferencia personal, una cuestión de habilidades y hábitos. Como principiante en programación, probablemente te beneficiarás más comenzando con React. Como desarrollador experimentado, sigue trabajando con lo que conozcas mejor.
No olvides desafiarte a ti mismo y comenzar a aprender un nuevo framework o librería, React o Angular. Como gerente de proyectos o propietario de una empresa que subcontrata a los desarrolladores, debe hablar con su equipo de desarrollo web y elegir juntos el framework o libraría marco que mejor se adapte a todos, ya sea Angular o React.
P.S.
Me gustaría agradecer a todos los que contribuyeron a este artículo, incluidos Sergey Gornostaev y Volodya Andrushchak, desarrolladores de software Full-stack @ KeenEthics.
Traducido del artículo de Oleg Romanyuk - Angular vs React: Which One to Choose for Your App

Luis Delgado - freeCodeCamp.org

Contador de palabras en Excel: cómo verificar el número de palabras escritas

Las funciones de Excel que usaremos para contar caracteres

Cómo usar la función LEN() en Excel

Cómo usar la función TRIM() en Excel

Cómo utilizar la función SUBSTITUTE() en Excel

Cómo contar palabras en Excel

Cómo funciona el contador de palabras en Excel.

Poniéndolo en práctica

Cómo crear una función personalizada para contar palabras en Excel

Cómo crear una función personalizada con Visual Basic para aplicaciones

Cómo crear una función de Excel personalizada para contar el número total de palabras en un grupo de celdas

Conclusión

Tutorial de HTML en cursiva: cómo hacer que el texto en cursiva con la etiqueta

¿Qué es la etiqueta ?

Usar la etiqueta para marcar frases en un idioma diferente

Usar la etiqueta para mostrar los pensamientos de alguien

Usando la etiqueta para el nombre de un barco

Uso de la etiqueta para descripciones taxonómicas

Diferencias entre la etiqueta y la etiqueta en HTML

¿Debería utilizar la etiqueta para diseñar?

¿Debería utilizar la etiqueta o para los iconos?

Conclusión

Cómo escribir HTML / CSS más rápido con atajos de Emmet

HTML

Etiquetas Básicas

Clases

ID’s

Combinatoria

Atributos

Contenido

Etiquetas hermanos e hijos

Escalando

Agrupar

Multiplicación y $

Nombres de etiqueta implícitos

Envolver con etiquetas

Lorem Ipsum

Poniéndolo todo junto

CSS

Position

Display

Cursor

Color

Margin & Padding

Box Sizing

Width

Border

¡Emmet es increíble!

Código de enlace HTML: cómo insertar un enlace a un sitio web con HREF

¿Qué son los Hipervínculos?

Cuándo usar Hipervínculos

1. Cuando deseas vincular a secciones de una página

2. Cuando deseas vincular a otra página dentro de un sitio web

3. Cuando deseas vincular a páginas externas

Cómo utilizar el atributo href

1. Cómo usar href para vincular secciones dentro de un documento

Segunda sección

2. Cómo usar href para vincular páginas dentro de un sitio web

3. Cómo usar href para vincular a páginas en otro sitio web

Conclusión

Programación funcional en JavaScript Explicado

¿Qué es la programación funcional?

Tipos de funciones

Funciones de primera clase

Funciones Callback

Funciones de orden superior (High Order Functions)

Funciones asíncronas

Principios de la programación funcional

Evite mutaciones y efectos secundarios.

Abstracción

Filtrando Arreglos

Transformar Elementos del arreglo con Map

Reducir arreglos con Reduce

Otros métodos de Arreglo útiles

Array.some()

Array.every()

Array.concat()

Array.slice()

Conclusión

Cómo usar la función `LEN()` en Excel

Cómo usar la función `TRIM()` en Excel

Cómo utilizar la función `SUBSTITUTE()` en Excel

1. Cómo usar `href` para vincular secciones dentro de un documento

2. Cómo usar `href` para vincular páginas dentro de un sitio web

3. Cómo usar `href` para vincular a páginas en otro sitio web

Cómo usar `RegEx` con `.replace` en JavaScript

`try...catch`:

`try...finally`:

`try...catch...finally`:

`try...catch` anidado:

Usando `bind` para cambiar `this` en una función

Proporcionar argumentos a una función con `bind`

Como funciona el método `call()` de JavaScript

Cómo funciona el método `apply()` de JavaScript

Cómo funciona el método `bind()` de JavaScript

Regla #3: La vinculación `new` de JavaScript