diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md index bce498827..4dda571bb 100644 --- a/1-js/02-first-steps/07-type-conversions/article.md +++ b/1-js/02-first-steps/07-type-conversions/article.md @@ -1,24 +1,24 @@ # Conversiones de Tipos -La mayoría de las veces, los operadores y funciones convierten automáticamente los valores que se les pasan al tipo correcto. Esto es llamado "conversión de tipo". +La mayoría de las veces, los operadores y las funciones convierten automáticamente los valores que reciben al tipo de dato que necesitan. -Por ejemplo, `alert` convierte automáticamente cualquier valor a string para mostrarlo. Las operaciones matemáticas convierten los valores a números. +Por ejemplo: `alert` convierte automáticamente cualquier valor a string para mostrarlo, y las operaciones matemáticas convierten los valores a números. También hay casos donde necesitamos convertir de manera explícita un valor al tipo esperado. -```smart header="Aún no hablamos de objetos" -En este capítulo no hablamos de objetos. Por ahora, solamente veremos los valores primitivos. +```smart header="No hablaremos de los objetos aún" +En este capítulo no cubrimos objetos. Por ahora, solamente veremos valores primitivos. -Más adelante, después de haberlos tratado, veremos en el capítulo cómo funciona la conversión de objetos. +Más adelante, después de haberlos tratado, veremos en el capítulo cómo funciona la conversión. ``` -## ToString +## Conversión a String -La conversión a string ocurre cuando necesitamos la representación en forma de texto de un valor. +La conversión a string ocurre cuando necesitamos la representación textual de un valor. -Por ejemplo, `alert(value)` lo hace para mostrar el valor como texto. +Por ejemplo, `alert(value)` lo hace para mostrar `value` como texto. -También podemos llamar a la función `String(value)` para convertir un valor a string: +También podemos llamar a la función `String(value)` para convertir `value` a string: ```js run let value = true; @@ -30,18 +30,19 @@ alert(typeof value); // string */!* ``` -La conversión a string es bastante obvia. El boolean `false` se convierte en `"false"`, `null` en `"null"`, etc. +La conversión a string es bastante evidente. El boolean `false` se convierte en `"false"`, `null` en `"null"`, etc. -## ToNumber +## Conversión numérica La conversión numérica ocurre automáticamente en funciones matemáticas y expresiones. -Por ejemplo, cuando se dividen valores no numéricos usando `/`: +Por ejemplo, cuando se aplica la división `/` a valores no numéricos: ```js run alert( "6" / "2" ); // 3, los strings son convertidos a números ``` -Podemos usar la función `Number(value)` para convertir de forma explícita un valor a un número: + +Podemos usar la función `Number(value)` para convertir `value` a un número de forma explícita: ```js run let str = "123"; @@ -51,7 +52,8 @@ let num = Number(str); // se convierte en 123 alert(typeof num); // number ``` -La conversión explícita es requerida usualmente cuando leemos un valor desde una fuente basada en texto, como lo son los campos de texto en los formularios, pero que esperamos que contengan un valor numérico. + +Usualmente, se requiere conversión explícita cuando leemos un valor desde una fuente basada en texto, como un formulario, pero esperamos que sea un número. Si el string no es un número válido, el resultado de la conversión será `NaN`. Por ejemplo: @@ -68,33 +70,22 @@ Reglas de conversión numérica: |`undefined`|`NaN`| |`null`|`0`| |true and false | `1` y `0` | -| `string` | Se eliminan los espacios (incluye espacios, tabs `\t`, saltos de línea `\n`, etc.) al inicio y final del texto. Si el string resultante es vacío, el resultado es `0`, en caso contrario el número es "leído" del string. Un error devuelve `NaN`. | +| `string` | Se eliminan los espacios en blanco (incluyendo espacios, tabs `\t`, saltos de línea `\n`, etc.) del inicio y final del texto. Si el string resultante es vacío, el resultado es `0`, en caso contrario el número es "leído" del string. Un error devuelve `NaN`. | Ejemplos: ```js run alert( Number(" 123 ") ); // 123 -alert( Number("123z") ); // NaN (error al leer un número en "z") +alert( Number("123z") ); // NaN (error al leer el número cuando encuentra "z") alert( Number(true) ); // 1 alert( Number(false) ); // 0 ``` -Ten en cuenta que `null` y `undefined` se comportan de distinta manera aquí: `null` se convierte en `0` mientras que `undefined` se convierte en `NaN`. - -````smart header="Adición '+' concatena strings" -Casi todas las operaciones matemáticas convierten valores a números. Una excepción notable es la suma `+`. Si uno de los valores sumados es un string, el otro valor es convertido a string. +Es importante notar que `null` y `undefined` se comportan de distinta manera aquí: `null` se convierte en `0` mientras que `undefined` se convierte en `NaN`. -Luego, los concatena (une): +La mayoría de los operadores matemáticos también ejecutan dicha conversión, esto lo veremos en el siguiente capítulo. -```js run -alert( 1 + '2' ); // '12' (string a la derecha) -alert( '1' + 2 ); // '12' (string a la izquierda) -``` - -Esto ocurre solo si al menos uno de los argumentos es un string, en caso contrario los valores son convertidos a número. -```` - -## ToBoolean +## Conversión booleana La conversión a boolean es la más simple. @@ -124,14 +115,13 @@ alert( Boolean(" ") ); // sólo espacios, también true (cualquier string no vac ``` ```` - ## Resumen Las tres conversiones de tipo más usadas son a string, a número y a boolean. -**`ToString`** -- Ocurre cuando se muestra algo. Se puede realizar con `String(value)`. La conversión a string es usualmente obvia para los valores primitivos. +**`Conversión a String`** -- Ocurre cuando mostramos un valor. Se puede realizar con `String(value)`. La conversión a string es usualmente evidente para los valores primitivos. -**`ToNumber`** -- Ocurre en operaciones matemáticas. Se puede realizar con `Number(value)`. +**`Conversión numérica`** -- Ocurre en operaciones matemáticas. Se puede realizar con `Number(value)`. La conversión sigue las reglas: @@ -142,7 +132,7 @@ La conversión sigue las reglas: |true / false | `1 / 0` | | `string` | El string es leído "como es", los espacios en blanco (incluye espacios, tabs `\t`, saltos de línea `\n`, etc.) tanto al inicio como al final son ignorados. Un string vacío se convierte en `0`. Un error entrega `NaN`. | -**`ToBoolean`** -- Ocurren en operaciones lógicas. Se puede realizar con `Boolean(value)`. +**`Conversión booleana`** -- Ocurren en operaciones lógicas. Se puede realizar con `Boolean(value)`. Sigue las reglas: @@ -152,7 +142,7 @@ Sigue las reglas: |cualquier otro valor| `true` | -La mayoría de estas reglas son fáciles de entender y recordar. Las excepciones más notables donde la gente suele cometer errores son: +La mayoría de estas reglas son fáciles de entender y recordar. Las excepciones más notables donde se suele cometer errores son: - `undefined` es `NaN` como número, no `0`. - `"0"` y textos que solo contienen espacios como `" "` son `true` como boolean. diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md index 59becbf4f..6670211fd 100644 --- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md +++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md @@ -22,4 +22,4 @@ undefined + 1 = NaN // (6) 4. La resta siempre convierte a números, por lo tanto hace de `" -9 "` un número `-9` (ignorando los espacios que lo rodean). 5. `null` se convierte en `0` después de la conversión numérica. 6. `undefined` se convierte en `NaN` después de la conversión numérica. -7. Los caracteres de espacio se recortan al inicio y al final de la cadena cuando una cadena se convierte en un número. Aquí toda la cadena consiste en caracteres de espacio, tales como `\t`, `\n` y un espacio "común" entre ellos. Por lo tanto, pasa lo mismo que a una cadena vacía, se convierte en `0`. +7. Al convertir una cadena en número, se ignoran los espacios en blanco al principio y al final (espacio común " ", tabulador \t, salto de línea \n, etc.). Si la cadena contiene solo ellos, queda vacía y se convierte en 0. diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md index 91e0a2838..a8d4abdd1 100644 --- a/1-js/02-first-steps/09-comparison/article.md +++ b/1-js/02-first-steps/09-comparison/article.md @@ -214,7 +214,7 @@ Obtenemos estos resultados porque: ## Resumen - Los operadores de comparación retornan un valor booleano. -- Las cadenas se comparan letra por letra en el orden del "diccionario". -- Cuando se comparan valores de diferentes tipos, se convierten en números (excepto un control de igualdad estricta). -- Los valores `null` y `undefined` son iguales `==` entre sí y no equivalen a ningún otro valor. -- Ten cuidado al usar comparaciones como `>` o `<` con variables que ocasionalmente pueden ser `null/undefined`. Revisar por separado si hay `null/undefined` es una buena idea. +- Las cadenas se comparan letra por letra en orden de diccionario. +- Cuando se comparan valores de diferentes tipos, se convierten en números (con la excepción de la igualdad estricta). +- Los valores `null` y `undefined` son iguales `==` entre sí y también iguales a sí mismos, pero no son iguales a ningún otro valor. +- Ten cuidado al usar comparaciones como `>` o `<` con variables que ocasionalmente pueden ser `null/undefined`. Comprobar `null/undefined` por separado suele ser una buena idea. diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md index e5a75c83f..7a3c42383 100644 --- a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md +++ b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md @@ -6,7 +6,7 @@ importance: 5 Reescriba el `if..else` utilizando operadores ternarios múltiples`'?'`. -Para legibilidad, es recomendad dividirlo en múltiples lineas de código. +Para mejor legibilidad, se recomienda dividirlo en múltiples lineas de código. ```js let message; diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index f62d71ddf..6005dfa19 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -37,13 +37,13 @@ La sentencia `if (…)` evalúa la expresión dentro de sus paréntesis y convie Recordemos las reglas de conversión del capítulo : -- El número `0`, un string vacío `""`, `null`, `undefined`, y `NaN`, se convierten en `false`. Por esto son llamados valores "falsos". -- El resto de los valores se convierten en `true`, entonces los llamaremos valores "verdaderos". +- Los valores: número `0`, string vacío `""`, `null`, `undefined`, y `NaN`, en un contexto booleano se convierten en `false`. Por ello, sin ser booleanos, se los conoce como valores "falsy". +- El resto de los valores se convierten en `true`, y son valores que llamamos "truthy". Entonces, el código bajo esta condición nunca se ejecutaría: ```js -if (0) { // 0 es falso +if (0) { // 0 es falsy ... } ``` @@ -51,7 +51,7 @@ if (0) { // 0 es falso ...y dentro de esta condición siempre se ejecutará: ```js -if (1) { // 1 es verdadero +if (1) { // 1 es truthy ... } ``` @@ -59,7 +59,7 @@ if (1) { // 1 es verdadero También podemos pasar un valor booleano pre-evaluado al `if`, así: ```js -let cond = (year == 2015); // la igualdad evalúa y devuelve un true o false +let cond = (year == 2015); // la igualdad se evalúa y devuelve un true o false if (cond) { ... @@ -68,7 +68,7 @@ if (cond) { ## La cláusula "else" -La sentencia `if` puede contener un bloque `else` ("si no", "en caso contrario") opcional. Este bloque se ejecutará cuando la condición sea falsa. +La sentencia `if` puede contener un bloque `else` ("si no", "en caso contrario") opcional. Este bloque se ejecuta cuando la condición resulta falsa. Por ejemplo: ```js run @@ -133,7 +133,7 @@ La Sintaxis es: let result = condition ? value1 : value2; ``` -Se evalúa `condition`: si es verdadera entonces devuelve `value1` , de lo contrario `value2`. +Se evalúa `condition`: si resulta verdadera entonces devuelve `value1` , de lo contrario `value2`. Por ejemplo: diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md index 9cd356a62..23fc22258 100644 --- a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md +++ b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md @@ -1,4 +1,4 @@ -La respuesta es `2`, ese es el primer valor verdadero. +La respuesta es `2`, ese es el primer valor truthy. ```js run alert( null || 2 || undefined ); diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md index acccef7d6..73eea0b53 100644 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md @@ -4,10 +4,10 @@ La repuesta: primero `1`, después `2`. alert( alert(1) || 2 || alert(3) ); ``` -La llamada a `alert` no retorna un valor. O, en otras palabras, retorna `undefined`. +Una llamada a `alert` no retorna un valor relevante. Siempre retorna `undefined`. -1. El primer OR `||` evalúa el operando de la izquierda `alert(1)`. Eso muestra el primer mensaje con `1`. -2. El `alert` retorna `undefined`, por lo que OR se dirige al segundo operando buscando un valor verdadero. -3. El segundo operando `2` es un valor verdadero, por lo que se detiene la ejecución, se retorna `2` y es mostrado por el alert exterior. +1. El primer OR `||` comienza evaluando el operando de la izquierda `alert(1)`. Este alert muestra el primer mensaje con `1`. +2. Ese mismo `alert` retorna `undefined`, por lo que OR se dirige al segundo operando buscando un valor truthy. +3. El segundo operando `2` es un valor truthy, por lo que el OR detiene su ejecución y retorna el 2. Este 2 es luego mostrado por el alert exterior. -No habrá `3` debido a que la evaluación no alcanza a `alert(3)`. +No habrá `3` debido a que la evaluación nunca alcanza a `alert(3)`. diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md index 0ceba5d2a..f926c6dfe 100644 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md +++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md @@ -1,4 +1,4 @@ -La respuesta: `null`, porque es el primer valor falso de la lista. +La respuesta: `null`, porque es el primer valor falsy de la lista. ```js run alert(1 && null && 2); diff --git a/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md b/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md index 1f1b494ef..a6aa8780d 100644 --- a/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md +++ b/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md @@ -4,6 +4,6 @@ La respuesta: `1` y después `undefined`. alert( alert(1) && alert(2) ); ``` -La llamada a `alert` retorna `undefined` (solo muestra un mensaje, así que no hay un valor que retornar relevante) +Una llamada a `alert` siempre retorna `undefined` (solo muestra un mensaje, no tiene un valor relevante que retornar) -Debido a ello, `&&` evalúa el operando de la izquierda (imprime `1`) e inmediatamente se detiene porque `undefined` es un valor falso. Como `&&` busca un valor falso y lo retorna, terminamos. +Debido a ello, `&&` evalúa el operando de la izquierda (el cual imprime `1`) e inmediatamente se detiene porque `undefined` es falsy. Como `&&` busca un valor falsy, lo retorna y termina. diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md index 4903143d7..b99056a48 100644 --- a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md @@ -12,5 +12,5 @@ El resultado de `2 && 3 = 3`, por lo que la expresión se convierte en: null || 3 || 4 ``` -Ahora el resultado será el primer valor verdadero: `3`. +Ahora el resultado será el primer valor truthy: `3`. diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md index f9ce47b32..e81c631a2 100644 --- a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md +++ b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md @@ -4,11 +4,11 @@ Detalles: ```js run // Corre. -// El resultado de -1 || 0 = -1, valor verdadero +// El resultado de -1 || 0 es -1, valor truthy if (-1 || 0) alert( "primero" ); // No corre. -// -1 && 0 = 0, valor falso +// -1 && 0 es 0, valor falsy if (-1 && 0) alert( "segundo" ); // Se ejecuta diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md index 60e00ad49..d2ed2db8a 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md @@ -6,12 +6,12 @@ importance: 3 Escribe un código que pregunte por el inicio de sesión con `propmt`. -Si el visitante ingresa `"Admin"`, entonces `prompt`(pregunta) por una contraseña, si la entrada es una linea vacía o `key:Esc` -- muestra "Cancelado.", si es otra cadena de texto -- entonces muestra "No te conozco". +Si el visitante ingresa `"Admin"`, entonces debe pedir una contraseña (con un nuevo `propmt`). Si la entrada es una linea vacía o `key:Esc`, entonces muestra "Cancelado.". Si es otra cadena de texto, entonces muestra "No te conozco". La contraseña se comprueba de la siguiente manera: - Si es igual a "TheMaster", entonces muestra "Bienvenido!", -- Si es otra cadena de texto -- muetra "Contraseña incorrecta", +- Si es otra cadena de texto, muetra "Contraseña incorrecta", - Para una cadena de texto vacía o una entrada cancelada, muestra "Cancelado." El esquema: diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md index de2ce5591..5805a37f0 100644 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ b/1-js/02-first-steps/11-logical-operators/article.md @@ -35,7 +35,7 @@ Por ejemplo, el número `1` es tratado como `true`, el número `0` como `false`: ```js run if (1 || 0) { // Funciona como if( true || false ) - alert("valor verdadero!"); + alert("¡valor truthy!"); } ``` @@ -94,14 +94,14 @@ alert(1 || 0); // 1 (1 es un valor verdadero) alert(null || 1); // 1 (1 es el primer valor verdadero) alert(null || 0 || 1); // 1 (el primer valor verdadero) -alert(undefined || null || 0); // 0 (todos son valores falsos, retorna el último valor) +alert(undefined || null || 0); // 0 (todos son valores falsy, retorna el último valor) ``` Esto brinda varios usos interesantes comparados al "OR puro, clásico, de solo booleanos". 1. **Obtener el primer valor verdadero de una lista de variables o expresiones.** - Por ejemplo, tenemos las variables `firstName`, `lastName` y `nickName`, todas opcionales (pueden ser undefined o tener valores falsos). + Por ejemplo, tenemos las variables `firstName`, `lastName` y `nickName`, todas opcionales (pueden ser undefined o tener valores falsy). Usemos OR `||` para elegir el que tiene los datos y mostrarlo (o anónimo si no hay nada configurado): @@ -115,7 +115,7 @@ Esto brinda varios usos interesantes comparados al "OR puro, clásico, de solo b */!* ``` - Si todas las variables fueran falsas, aparecería `"Anonymous"`. + Si todas las variables fueran falsy, aparecería `"Anonymous"`. 2. **Evaluación del camino más corto.** @@ -134,7 +134,7 @@ Esto brinda varios usos interesantes comparados al "OR puro, clásico, de solo b En la primera línea, el operador OR `||` detiene la evaluación inmediatamente después de ver que es verdadera, por lo que la alerta no se ejecuta. - A veces se usa esta función para ejecutar comandos solo si la condición en la parte izquierda es falsa. + A veces se usa esta función para ejecutar comandos solo si la condición en la parte izquierda es falsy. ## && (AND) @@ -168,11 +168,11 @@ Al igual que con OR, cualquier valor es permitido como operando de AND: ```js run if (1 && 0) { // evaluado como true && false - alert( "no funcionará porque el resultado es un valor falso" ); + alert( "no funcionará porque el resultado es un valor falsy" ); } ``` -## AND "&&" encuentra el primer valor falso +## AND "&&" encuentra el primer valor falsy Dado múltiples valores aplicados al operador AND: @@ -184,27 +184,27 @@ El operador AND `&&` realiza lo siguiente: - Evalúa los operandos de izquierda a derecha. - Para cada operando, los convierte a un booleano. Si el resultado es `false`, se detiene y retorna el valor original de dicho operando. -- Si todos los operandos han sido evaluados (todos fueron valores verdaderos), retorna el último operando. +- Si todos los operandos han sido evaluados (todos fueron valores truthy), retorna el último operando. -En otras palabras, AND retorna el primer valor falso o el último valor si ninguno fue encontrado. +En otras palabras, AND retorna el primer valor falsy o el último valor si ninguno fue encontrado. -Las reglas anteriores son similares a las de OR. La diferencia es que AND retorna el primer valor *falso* mientras que OR retorna el primer valor *verdadero*. +Las reglas anteriores son similares a las de OR. La diferencia es que AND retorna el primer valor *falsy* mientras que OR retorna el primer valor *truthy*. Ejemplo: ```js run -// si el primer operando es un valor verdadero, +// si el primer operando es un valor truthy, // AND retorna el segundo operando: alert(1 && 0); // 0 alert(1 && 5); // 5 -// si el primer operando es un valor falso, +// si el primer operando es un valor falsy, // AND lo retorna. El segundo operando es ignorado alert(null && 5); // null alert(0 && "cualquier valor"); // 0 ``` -También podemos pasar varios valores de una vez. Observa como el primer valor falso es retornado: +También podemos pasar varios valores de una vez. Observa como el primer valor falsy es retornado: ```js run alert(1 && 2 && null && 3); // null diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 96e492bbb..8c45b2dc5 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -100,7 +100,7 @@ Digamos que queremos el último elemento de un array. Algunos lenguajes de programación permiten el uso de índices negativos para este propósito, como `fruits[-1]`. -Aunque en JavaScript esto no funcionará. El resultado será `undefined`, porque el índice de los corchetes es tratado literalmente. +Sin embargo, en JavaScript esto no funcionará. El resultado será `undefined`, porque el índice de los corchetes es tratado literalmente. Podemos calcular explícitamente el último índice y luego acceder al elemento: `fruits[fruits.length - 1]`. diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md index f3d2e9b80..404fa14b5 100644 --- a/1-js/09-classes/05-extend-natives/article.md +++ b/1-js/09-classes/05-extend-natives/article.md @@ -1,7 +1,7 @@ -# Ampliación de clases integradas +# Ampliación de clases nativas -Las clases integradas como Array, Map y otras también son extensibles. +Las clases nativas como Array, Map y otras también son extensibles. Por ejemplo, aquí `PowerArray` hereda del `Array` nativo: @@ -34,7 +34,7 @@ Aún más, podemos personalizar ese comportamiento. Podemos agregar un `getter` estático especial `Symbol.species` a la clase. Si existe, debería devolver el constructor que JavaScript usará internamente para crear nuevas entidades en `map`, `filter` y así sucesivamente. -Si queremos que los métodos incorporados como `map` o `filter` devuelvan matrices regulares, podemos devolver `Array` en `Symbol.species`, como aquí: +Si queremos que los métodos nativos como `map` o `filter` devuelvan matrices regulares, podemos devolver `Array` en `Symbol.species`, como aquí: ```js run class PowerArray extends Array { @@ -43,7 +43,7 @@ class PowerArray extends Array { } *!* - // los métodos incorporados usarán esto como el constructor + // los métodos nativos usarán esto como el constructor static get [Symbol.species]() { return Array; } @@ -68,7 +68,7 @@ Como puede ver, ahora `.filter` devuelve un `Array`. Por lo tanto, la funcionali Otras colecciones, como `Map` y `Set`, funcionan igual. También usan `Symbol.species`. ``` -## Sin herencia estática en incorporados +## Sin herencia estática en nativos Los objetos nativos tienen sus propios métodos estáticos, por ejemplo, `Object.keys`, `Array.isArray`, etc. @@ -86,4 +86,4 @@ Imagen de la estructura para `Date` y `Object`: Como puede ver, no hay un vínculo entre `Date` y `Object`. Son independientes, solo `Date.prototype` hereda de `Object.prototype`. -Esa es una diferencia importante de herencia entre los objetos integrados en comparación con lo que obtenemos con 'extends`. +Esa es una diferencia importante de herencia entre los objetos nativos en comparación con lo que obtenemos con 'extends`. diff --git a/1-js/09-classes/06-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md index 86393f6c1..925ec25e3 100644 --- a/1-js/09-classes/06-instanceof/article.md +++ b/1-js/09-classes/06-instanceof/article.md @@ -10,7 +10,7 @@ La sintaxis es: ```js obj instanceof Class ``` -Devuelve `true` si `obj` pertenece a la `Class` o una clase que hereda de ella. +Devuelve `true` si `obj` pertenece a `Class` o una clase que hereda de ella. Por ejemplo: @@ -20,7 +20,7 @@ let rabbit = new Rabbit(); // ¿Es un objeto de la clase Rabbit? *!* -alert( rabbit instanceof Rabbit ); // verdadero +alert( rabbit instanceof Rabbit ); // true */!* ``` @@ -32,15 +32,15 @@ También funciona con funciones de constructor: function Rabbit() {} */!* -alert( new Rabbit() instanceof Rabbit ); // verdadero +alert( new Rabbit() instanceof Rabbit ); // true ``` -...Y con clases integradas como `Array`: +...Y con clases nativas como `Array`: ```js run let arr = [1, 2, 3]; -alert( arr instanceof Array ); // verdadero -alert( arr instanceof Object ); // verdadero +alert( arr instanceof Array ); // true +alert( arr instanceof Object ); // true ``` Tenga en cuenta que `arr` también pertenece a la clase `Object`. Esto se debe a que `Array` hereda prototípicamente de `Object`. @@ -54,8 +54,9 @@ El algoritmo de `obj instanceof Class` funciona más o menos de la siguiente man Por ejemplo: ```js run - // Instalar instancia de verificación que asume que - // cualquier cosa con propiedad canEat es un animal + + // verificacion con instanceof que determina que + // cualquier cosa que tenga la propiedad canEat es un animal class Animal { static [Symbol.hasInstance](obj) { @@ -65,10 +66,10 @@ El algoritmo de `obj instanceof Class` funciona más o menos de la siguiente man let obj = { canEat: true }; - alert(obj instanceof Animal); // verdadero: Animal[Symbol.hasInstance](obj) es llamada + alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj) es llamada ``` -2. La mayoría de las clases no tienen `Symbol.hasInstance`. En ese caso, se utiliza la lógica estándar: `obj instanceOf Class` comprueba si `Class.prototype` es igual a uno de los prototipos en la cadena de prototipos `obj`. +2. La mayoría de las clases no tienen `Symbol.hasInstance`. En ese caso, se utiliza la lógica estándar: `obj instanceof Class` comprueba si `Class.prototype` es igual a uno de los prototipos en la cadena de prototipos `obj`. En otras palabras, compara uno tras otro: @@ -91,7 +92,7 @@ El algoritmo de `obj instanceof Class` funciona más o menos de la siguiente man let rabbit = new Rabbit(); *!* - alert(rabbit instanceof Animal); // verdadero + alert(rabbit instanceof Animal); // true */!* // rabbit.__proto__ === Animal.prototype (no match) @@ -106,7 +107,7 @@ Aquí está la ilustración de lo que `rabbit instanceof Animal` compara con `An Por cierto, también hay un método [objA.isPrototypeOf(objB)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/object/isPrototypeOf), que devuelve `true` si `objA` está en algún lugar de la cadena de prototipos para `objB`. Por lo tanto, la prueba de `obj instanceof Class` se puede reformular como `Class.prototype.isPrototypeOf(obj)`. -Es divertido, ¡pero el constructor `Class` en sí mismo no participa en el chequeo! Solo importa la cadena de prototipos y `Class.prototype`. +Es extraño, ¡pero el constructor `Class` en sí mismo no participa en el chequeo! Solo importa la cadena de prototipos y `Class.prototype`. Eso puede llevar a consecuencias interesantes cuando se cambia una propiedad `prototype` después de crear el objeto. @@ -121,7 +122,7 @@ Rabbit.prototype = {}; // ...ya no es un conejo! *!* -alert( rabbit instanceof Rabbit ); // falso +alert( rabbit instanceof Rabbit ); // false */!* ``` @@ -201,7 +202,7 @@ Como puedes ver, el resultado es exactamente `Symbol.toStringTag` (si existe), e Al final tenemos "typeof con esteroides" que no solo funciona para tipos de datos primitivos, sino también para objetos incorporados e incluso puede personalizarse. -Podemos usar `{}.toString.call` en lugar de `instanceof` para los objetos incorporados cuando deseamos obtener el tipo como una cadena en lugar de solo verificar. +Podemos usar `{}.toString.call` en lugar de `instanceof` para los objetos nativos cuando deseamos obtener el tipo como una cadena en lugar de solo verificar. ## Resumen diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index 54fbab0b7..25ae5095d 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -1,7 +1,7 @@ # Módulos, introducción -A medida que nuestra aplicación crece, queremos dividirla en múltiples archivos, llamados "módulos". Un módulo puede contener una clase o una biblioteca de funciones para un propósito específico. +A medida que nuestra aplicación crece, queremos dividirla en múltiples archivos, los llamados "módulos". Un módulo puede contener una clase o una biblioteca de funciones para un propósito específico. Durante mucho tiempo, JavaScript existió sin una sintaxis de módulo a nivel de lenguaje. Esto no era un problema, porque inicialmente los scripts eran pequeños y simples. diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 91ff2b848..1e09fbb67 100644 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -1,12 +1,12 @@ # Export e Import -Las directivas export e import tienen varias variantes de sintaxis. - +Las directivas export e import tienen varias formas de sintaxis. + En el artículo anterior vimos un uso simple, ahora exploremos más ejemplos. ## Export antes de las sentencias -Podemos etiquetar cualquier sentencia como exportada colocando 'export' antes, ya sea una variable, función o clase. +Podemos exportar cualquier declaración colocando antes 'export', ya sea a una variable, función o clase. Por ejemplo, aquí todas las exportaciones son válidas: @@ -18,7 +18,7 @@ Por ejemplo, aquí todas las exportaciones son válidas: *!*export*/!* const MODULES_BECAME_STANDARD_YEAR = 2015; // exportar una clase -*!*export*/!* clase User { +*!*export*/!* class User { constructor(name) { this.name = name; } @@ -28,14 +28,14 @@ Por ejemplo, aquí todas las exportaciones son válidas: ````smart header="Sin punto y coma después de export clase/función" Tenga en cuenta que `export` antes de una clase o una función no la hace una [expresión de función](info:function-expressions). Sigue siendo una declaración de función, aunque exportada. -La mayoría de las guías de estilos JavaScript no recomiendan los punto y comas después de declarar funciones y clases. +La mayoría de las guías de estilos JavaScript no recomiendan punto y coma después de declarar funciones y clases. Es por esto que no hay necesidad de un punto y coma al final de `export class` y `export function`: ```js export function sayHi(user) { alert(`Hello, ${user}!`); -} *!* // no ; at the end */!* +} *!* // sin ; al final */!* ``` ```` @@ -130,7 +130,7 @@ Exportemos funciones como `hi` y `bye`: export {sayHi as hi, sayBye as bye}; ``` -Ahora `hi` y `bye` son los nombres oficiales para desconocidos, a ser utilizados en importaciones: +Ahora `hi` y `bye` son los nombres oficiales exportados, los que usarán otros módulos al hacer sus importaciones. ```js // 📁 main.js @@ -144,8 +144,8 @@ say.*!*bye*/!*('John'); // Bye, John! En la práctica, existen principalmente dos tipos de módulos. -1. Módulos que contienen una librería, paquete de funciones, como `say.js` de arriba. -2. Módulos que declaran una entidad simple, por ejemplo un módulo `user.js` exporta únicamente `class User`. +1. Módulos que contienen una librería, un paquete de funciones como `say.js` de arriba. +2. Módulos que declaran una entidad simple, por ejemplo un módulo `user.js` que exporta únicamente `class User`. Principalmente, se prefiere el segundo enfoque, de modo que cada "cosa" reside en su propio módulo. @@ -338,7 +338,7 @@ import {login, logout} from 'auth/index.js' El "archivo principal", `auth/index.js`, exporta toda la funcionalidad que queremos brindar en nuestro paquete. -La idea es que los extraños, los desarrolladores que usan nuestro paquete, no deben entrometerse con su estructura interna, buscar archivos dentro de nuestra carpeta de paquetes. Exportamos solo lo que es necesario en `auth/index.js` y mantenemos el resto oculto a miradas indiscretas. +La idea es que los desarrolladores que usen nuestro paquete no deban lidiar con su estructura interna, buscar archivos dentro de nuestra carpeta de paquetes. Exportamos solo lo que es necesario en `auth/index.js` y mantenemos el resto oculto a miradas indiscretas. Como la funcionalidad real exportada se encuentra dispersa entre el paquete, podemos importarla en `auth/index.js` y exportar desde ella: @@ -440,15 +440,15 @@ import {sayHi} from './say.js'; // import al final del archivo En la práctica, las importaciones generalmente se encuentran al comienzo del archivo, pero eso es solo para mayor comodidad. -**Tenga en cuenta que las declaraciones de import/export no funcionan si están dentro `{...}`.** +**Tenga en cuenta que import y export solo funcionan en el nivel superior del módulo, no dentro de ningún bloque `{...}`.** -Una importación condicional, como esta, no funcionará: +Una importación condicional como esta no funcionará: ```js if (something) { import {sayHi} from "./say.js"; // Error: import debe estar en nivel superior } ``` -...Pero, ¿qué pasa si realmente necesitamos importar algo condicionalmente? O en el momento adecuado? Por ejemplo, ¿cargar un módulo a pedido, cuando realmente se necesita? +Pero ¿qué pasa si realmente necesitamos importar algo condicionalmente? ¿O en el momento adecuado? Por ejemplo, cargar un módulo a pedido, cuando realmente se necesita. Veremos importaciones dinámicas en el próximo artículo. diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 69cbca6e1..5cec620b2 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -167,7 +167,7 @@ Si mantenemos una referencia a `elem.childNodes`, y añadimos o quitamos nodos d ``` ````warn header="No uses `for..in` para recorrer colecciones" -Las colecciones son iterables usando `for..of`. Algunas veces las personas tratan de utilizar `for..in` para eso. +Las colecciones son iterables usando `for..of`. Hay quienes tratan de utilizar `for..in` para eso. Por favor, no lo hagas. El bucle `for..in` itera sobre todas las propiedades enumerables. Y las colecciones tienen unas propiedades "extra" raramente usadas que normalmente no queremos obtener: @@ -235,7 +235,7 @@ La propiedad `parentElement` devuelve el "elemento" padre, mientras `parentNode` Con la excepción de `document.documentElement`: ```js run -alert( document.documentElement.parentNode ); // documento +alert( document.documentElement.parentNode ); // document alert( document.documentElement.parentElement ); // null ``` diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md index 89d7bb027..6fab8d8fd 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -332,7 +332,7 @@ Algunas propiedades del objeto `event`: : Tipo de evento, en este caso fue `"click"`. `event.currentTarget` -: Elemento que maneja el evento. Lo que exactamente igual a `this`, a menos que el handler sea una función de flecha o su `this` esté vinculado a otra cosa, entonces podemos obtener el elemento desde `event.currentTarget`. +: Elemento que maneja el evento. Lo que es exactamente igual a `this`, a menos que `this` haya cambiado por ser el handler una función de flecha, o su `this` esté vinculado a otra cosa. event.currentTarget`siempre apunta al elemento. `event.clientX` / `event.clientY` : Coordenadas del cursor relativas a la ventana, para eventos de cursor. @@ -440,7 +440,7 @@ Hay tres formas de asignar handlers: 1. Atributos HTML: `onclick="..."`. 2. Propiedades del DOM: `elem.onclick = function`. -3. Métodos: `elem.addEventListener(event, handler[, phase])` para agregar ó `removeEventListener` para remover. +3. Métodos: `elem.addEventListener(event, handler[, phase])` para agregarlos ó `removeEventListener` para quitarlos. Los atributos HTML se usan con moderación, porque JavaScript en medio de una etiqueta HTML luce un poco extraño y ajeno. Además no podemos escribir montones de código ahí. diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md index 1ce058981..0ffc870d5 100644 --- a/2-ui/2-events/02-bubbling-and-capturing/article.md +++ b/2-ui/2-events/02-bubbling-and-capturing/article.md @@ -45,13 +45,12 @@ Un clic en el elemento del interior `

` primero ejecuta `onclick`: Así si hacemos clic en `

`, entonces veremos 3 alertas: `p` -> `div` -> `form`. -Este proceso se conoce como "propagación" porque los eventos "se propagan" desde el elemento más al interior, a través de los padres, como una burbuja en el agua. +Este proceso se conoce como "propagación" (bubbling, burbujeo) porque los eventos "se propagan" desde el elemento más al interior, a través de los padres, como una burbuja en el agua. ```warn header="*Casi* todos los elementos se propagan." La palabra clave en esta frase es "casi". - -Por ejemplo, un evento `focus` no se propaga. Hay otros ejemplos también, los veremos. Pero aún así, esta es la excepción a la regla, la mayoría de eventos sí se propagan. +Por ejemplo, un evento `focus` no se propaga. Hay otros ejemplos que veremos también. Pero aún así, esta es la excepción a la regla, la mayoría de eventos sí se propagan. ``` ## event.target @@ -99,7 +98,7 @@ Si un elemento tiene múltiples manejadores para un solo evento, aunque uno de e En otras palabras, `event.stopPropagation()` detiene la propagación hacia arriba, pero todos los manejadores en el elemento actual se ejecutarán. -Para detener la propagación y prevenir que los manejadores del elemento actual se ejecuten, hay un método `event.stopImmediatePropagation()`. Después de él, ningún otro manejador será ejecutado. +Para detener la propagación e impedir que los manejadores del elemento actual se ejecuten, hay un método `event.stopImmediatePropagation()`. Después de él, ningún otro manejador será ejecutado. ``` ```warn header="¡No detengas la propagación si no es necesario!" @@ -113,7 +112,7 @@ Por ejemplo: 2. Luego decidimos atrapar los clic en toda la ventana, para seguir el rastro del comportamiento del usuario (donde hacen clic). Algunos sistemas de análisis hacen eso. Usualmente el código usa `document.addEventListener('click'…)` para atrapar todos los clics. 3. Nuestro análisis no funcionará sobre el área dónde los clics son detenidos por `stopPropagation`. Tristemente, tenemos una "zona muerta". -Usualmente no hay una necesidad real para prevenir la propagación, pero una tarea que aparentemente lo requiera puede ser resuelta por otros medios. Uno de ellos es usar eventos personalizados, cubriremos eso más tarde. También podemos escribir nuestros datos en el objeto `event` en un manejador y leerlo en otro, para así poder pasar información sobre el proceso de abajo a los manejadores en los padres. +Usualmente no hay una necesidad real para impedir la propagación. Cuando algo parece necesitarlo, existen otros medios para resolverlo. Uno es usar eventos personalizados, que cubriremos más adelante. Otro es escribir datos en event en un manejador y leerlos en otro, para pasar información a los manejadores padres. ``` ## Captura @@ -201,7 +200,7 @@ elem.addEventListener("click", e => alert(2)); ``` ```` -```smart header="`event.stopPropagation()` durante la captura también evita la propagación" +```smart header="`event.stopPropagation()` durante la captura también impide la propagación" El método `event.stopPropagation()` y su hermano `event.stopImmediatePropagation()` también pueden ser llamados en la fase de captura. En este caso no solo se detienen las capturas sino también la propagación. En otras palabras, normalmente el evento primero va hacia abajo ("captura") y luego hacia arriba ("propagación"). Pero si se llama a `event.stopPropagation()` durante la fase de captura, se detiene la travesía del evento, y la propagación no volverá a ocurrir. diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 4da0838ad..794bac617 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -154,7 +154,7 @@ Mueve el mouse sobre el campo de entrada para ver `clientX/clientY` (el ejemplo ``` ```` -## Previniendo la selección en mousedown +## Impedir la selección en mousedown El doble clic del mouse tiene un efecto secundario que puede ser molesto en algunas interfaces: selecciona texto. @@ -166,9 +166,9 @@ Por ejemplo, un doble clic en el texto de abajo lo selecciona además de activar Si se pulsa el botón izquierdo del ratón y, sin soltarlo, mueve el ratón, también hace la selección, a menudo no deseado. -Hay varias maneras de evitar la selección, que se pueden leer en el capítulo . +Hay varias maneras de impedir la selección, que se pueden leer en el capítulo . -En este caso particular, la forma más razonable es evitar la acción del navegador `mousedown`. Esto evita ambas selecciones: +En este caso particular, la forma más razonable es impedir la acción del navegador `mousedown`. Esto impide ambas selecciones: ```html autorun height=50 Antes... @@ -182,17 +182,17 @@ Ahora el elemento en negrita no se selecciona con doble clic, y al mantener pres Tenga en cuenta: el texto dentro de él todavía es seleccionable. Sin embargo, la selección no debe comenzar en el texto en sí, sino antes o después. Por lo general, eso está bien para los usuarios. -````smart header="Previniendo copias" -Si queremos inhabilitar la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar otro evento: `oncopy`. +````smart header="Impedir copias" +Si queremos impedir la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar otro evento: `oncopy`. ```html autorun height=80 no-beautify

Querido usuario, - El copiado está prohibida para ti. + El copiado está prohibido para ti. Si sabes JS o HTML entonces puedes obtener todo de la fuente de la página.
``` -Si intenta copiar un fragmento de texto en el `
` no va a funcionar porque la acción default de `oncopy` fue evitada. +Si intenta copiar un fragmento de texto en el `
` no va a funcionar porque la acción predeterminada de `oncopy` fue deshabilitada. Seguramente el usuario tiene acceso a la fuente HTML de la página, y puede tomar el contenido desde allí, pero no todos saben cómo hacerlo. ```` @@ -208,6 +208,6 @@ Los eventos del mouse tienen las siguientes propiedades: - Coordenadas relativas a la ventana: `clientX/clientY`. - Coordenadas relativas al documento: `pageX/pageY`. -La acción predeterminada del navegador `mousedown` es la selección del texto, si no es bueno para la interfaz, entonces debe evitarse. +La acción predeterminada del navegador `mousedown` es la selección del texto, si no es bueno para la interfaz, entonces debe impedirse. En el próximo capítulo veremos más detalles sobre los eventos que siguen al movimiento del puntero y cómo rastrear los cambios de elementos debajo de él. diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md index 4b5ad7b14..1eafd5b34 100644 --- a/2-ui/99-ui-misc/01-mutation-observer/article.md +++ b/2-ui/99-ui-misc/01-mutation-observer/article.md @@ -1,7 +1,7 @@ # Mutation observer -`MutationObserver` es un objeto incorporado que observa un elemento DOM y dispara un callback cuando hay cambios en él. +`MutationObserver` es un objeto nativo que observa un elemento DOM y dispara un callback cuando hay cambios en él. Primero veremos su sintaxis, luego exploraremos un caso de la vida real para ver dónde puede ser útil.