diff --git a/.gitattributes b/.gitattributes index 6313b56c5..d3877a538 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1,2 @@ * text=auto eol=lf +*.svg binary diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index a586a5ea7..471941687 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -12,7 +12,7 @@ Los scripts se proporcionan y ejecutan como texto plano. No necesitan preparaci En este aspecto, JavaScript es muy diferente a otro lenguaje llamado [Java](). -```smart header="¿Por qué JavaScript?" +```smart header="¿Por qué se llama JavaScript?" Cuando JavaScript fue creado, inicialmente tenía otro nombre: "LiveScript". Pero Java era muy popular en ese momento, así que se decidió que el posicionamiento de un nuevo lenguaje como un "Hermano menor" de Java ayudaría. Pero a medida que evolucionaba, JavaScript se convirtió en un lenguaje completamente independiente con su propia especificación llamada [ECMAScript] (https://es.wikipedia.org/wiki/ECMAScript), y ahora no tiene ninguna relación con Java. @@ -38,7 +38,7 @@ Los motores son complicados, pero los fundamentos son fáciles. 2.- Entonces convierte ("compila") el script a lenguaje máquina. 3.- y por último el código maquina se ejecuta muy rápido. -El motor aplica optimizaciones en cada paso del proceso. Incluso observa como el script compilado se ejecuta, analiza los datos que fluyen a través de él y aplica optimizaciones al código maquina basadas en ese conocimiento. Cuando está terminado, los scripts se ejecutan bastante rápido. +El motor aplica optimizaciones en cada paso del proceso. Incluso observa como el script compilado se ejecuta, analiza los datos que fluyen a través de él y aplica optimizaciones al código maquina basadas en ese conocimiento. ``` ## ¿Qué puede hacer JavaScript en el navegador? diff --git a/1-js/01-getting-started/4-devtools/bug.html b/1-js/01-getting-started/4-devtools/bug.html index 37128a141..b50a64bef 100644 --- a/1-js/01-getting-started/4-devtools/bug.html +++ b/1-js/01-getting-started/4-devtools/bug.html @@ -7,7 +7,7 @@ - Hay un error en el script de ésta página. + Hay un error en el script de esta página. diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md index b651e2c95..77b3abbb5 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md @@ -1 +1,2 @@ -[html src="index.html"] \ No newline at end of file + +[html src="index.html"] diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 062c98c16..35de36a32 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -94,7 +94,7 @@ Pero deberían ser dos sentencias separadas, no una. Tal unión en este caso es Recomendamos colocar puntos y coma entre las sentencias, incluso si están separadas por saltos de línea. Esta regla está ampliamente adoptada por la comunidad. Notemos una vez más que es posible omitir los puntos y coma la mayoría del tiempo. Pero es más seguro, especialmente para un principiante, usarlos. -## Comentarios +## Comentarios [#code-comments] A medida que pasa el tiempo, los programas se vuelven cada vez más complejos. Se hace necesario agregar *comentarios* que describan lo que hace el código y por qué. @@ -136,7 +136,7 @@ alert('Mundo'); ``` ```smart header="¡Usa accesos rápidos del teclado!" -En la mayoría de los editores, se puede comentar una línea de código presionando `key:Ctrl+/` para un comentario de una sola línea y algo como `key:Ctrl+Shift+/` - para comentarios de varias líneas (selecciona una parte del código y pulsa la tecla de acceso rápido). Para Mac, intenta `key: Cmd` en lugar de `key: Ctrl`. +En la mayoría de los editores, se puede comentar una línea de código presionando `key:Ctrl+/` para un comentario de una sola línea y algo como `key:Ctrl+Shift+/` - para comentarios de varias líneas (selecciona una parte del código y pulsa la tecla de acceso rápido). Para Mac, intenta `key: Cmd` en lugar de `key: Ctrl` y `key:Option` en lugar de `key:Shift`. ``` ````warn header="¡Los comentarios anidados no son admitidos!" diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 103263c86..576db8cf3 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -203,7 +203,7 @@ let имя = '...'; let 我 = '...'; ``` -Técnicamente, no existe ningún error aquí, tales nombres están permitidos, pero existe una tradición internacional de utilizar inglés en el nombramiento de variables. Incluso si estamos escribiendo un script pequeño, este puede tener una larga vida por delante. Puede ser necesario que gente de otros países deba leerlo en algún momento. +Técnicamente, no existe ningún error aquí. Tales nombres están permitidos, pero existe una tradición internacional de utilizar inglés en el nombramiento de variables. Incluso si estamos escribiendo un script pequeño, este puede tener una larga vida por delante. Puede ser necesario que gente de otros países deba leerlo en algún momento. ```` ````warn header="Nombres reservados" @@ -267,7 +267,7 @@ Existe una práctica utilizada ampliamente de utilizar constantes como aliases d Tales constantes se nombran utilizando letras mayúsculas y guiones bajos. -Por ejemplo: +Por ejemplo, creemos constantes para los colores en el formato "web" (hexadecimal): ```js run const COLOR_RED = "#F00"; @@ -303,7 +303,7 @@ En otras palabras, las constantes nombradas con mayúscula son utilizadas como Estando en el tema de las variables, existe una cosa de mucha importancia. -Por favor se sensato al nombrar tus variables. Pensémolo por un momento. +Una variable debe tener un nombre claro, de significado evidente, que describa el dato que almacena. Nombrar variables es una de las habilidades más importantes y complejas en la programación. Un vistazo rápido a el nombre de las variables nos revela cuál código fue escrito por un principiante o por un desarrollador experimentado. diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md index 97aaa9d7a..6a2b5c942 100644 --- a/1-js/02-first-steps/05-types/article.md +++ b/1-js/02-first-steps/05-types/article.md @@ -1,273 +1,273 @@ -# Tipos de datos - -Un valor en JavaScript siempre es de cierto tipo. Por ejemplo, un string(cadena de caracteres) o un número. - -Hay ocho tipos de datos básicos en JavaScript. Aquí, los cubriremos en general y en los próximos capítulos hablaremos de cada uno de ellos en detalle. - -Podemos poner cualquier tipo en una variable. Por ejemplo, una variable puede en un momento ser un string y luego almacenar un número: - -```js -// no hay error -let message = "hola"; -message = 123456; -``` - -Los lenguajes de programación que permiten estas cosas se denominan "dinámicamente tipeados", lo que significa que hay tipos de datos, pero las variables no están vinculadas a ninguno de ellos. - -## Un number - -```js -let n = 123; -n = 12.345; -``` - -El tipo *number* (número) representa tanto números enteros como de punto flotante. - -Hay muchas operaciones para números, por ejemplo, multiplicación `*`, división `/`, suma `+`, resta `-`, y demás. - -Además de los números comunes, existen los llamados "valores numéricos especiales" que también pertenecen a este tipo de dato: `Infinity`, `-Infinity` and `NaN`. - -- `Infinity` representa el [Infinito](https://es.wikipedia.org/wiki/Infinito) matemático ∞. Es un valor especial que es mayor que cualquier número. - - Podemos obtenerlo como resultado de la división por cero: - - ```js run - alert( 1 / 0 ); // Infinito - ``` - - O simplemente hacer referencia a ello directamente: - - ```js run - alert( Infinity ); // Infinito - ``` -- `NaN` representa un error de cálculo. Es el resultado de una operación matemática incorrecta o indefinida, por ejemplo: - - ```js run - alert( "no es un número" / 2 ); // NaN, tal división es errónea - ``` - - `NaN` es "pegajoso". Cualquier otra operación sobre `NaN` devuelve `NaN`: - - ```js run - alert( "no es un número" / 2 + 5); // NaN - ``` - - Por lo tanto, si hay un `NaN` en alguna parte de una expresión matemática, se propaga a todo el resultado. - -```smart header="Las operaciones matemáticas son seguras" -Hacer matemáticas es "seguro" en JavaScript. Podemos hacer cualquier cosa: dividir por cero, tratar las cadenas no numéricas como números, etc. - -El script nunca se detendrá con un error fatal ("morir"). En el peor de los casos, obtendremos `NaN` como resultado. -``` - -Los valores numéricos especiales pertenecen formalmente al tipo "número". Por supuesto que no son números en el sentido estricto de la palabra. - -Veremos más sobre el trabajo con números en el capítulo . - -## BigInt - -En JavaScript, el tipo "número" no puede representar valores enteros mayores que (253-1) (eso es `9007199254740991`), o menor que -(253-1) para negativos. Es una limitación técnica causada por su representación interna. - -Para la mayoría de los propósitos es suficiente pero a veces necesitamos números realmente grandes, por ejemplo para criptografía o marcas de tiempo de precisión de microsegundos. - -`BigInt` se agregó recientemente al lenguaje para representar enteros de longitud arbitraria. - -Un valor `BigInt` se crea agregando `n` al final de un entero: - -```js -// la "n" al final significa que es un BigInt -const bigInt = 1234567890123456789012345678901234567890n; -``` - -Como los números `BigInt` rara vez se necesitan, no los cubrimos aquí, sino que les dedicamos un capítulo separado . Léalo cuando necesite números tan grandes. - -```smart header="Problemas de compatibilidad" -En este momento, `BigInt` es compatible con Firefox / Chrome / Edge, pero no con Safari / IE. -``` - -## Un string - -Un string (cadena de caracteres) en JavaScript debe estar encerrado entre comillas. - -```js -let str = "Hola"; -let str2 = 'Las comillas simples también están bien'; -let phrase = `puede incrustar ${str}`; -``` - -En JavaScript, hay 3 tipos de comillas. - -1. Comillas dobles: `"Hola"`. -2. Comillas simples: `'Hola'`. -3. Backticks (acento grave): `Hola`. - -Las comillas dobles y simples son comillas "simples". No hay diferencia entre ellas en JavaScript. - -Los Backticks son comillas de "funcionalidad extendida". Nos permiten incrustar variables y expresiones en una cadena de caracteres encerrándolas en `${...}`, por ejemplo: - -```js run -let name = "Juan"; - -// incrustar una variable -alert( `Hola, *!*${name}*/!*!` ); // Hola, Juan! - -// incrustar una expresión -alert( `el resultado es *!*${1 + 2}*/!*` ); //el resultado es 3 -``` - -La expresión dentro de `${...}` se evalúa y el resultado pasa a formar parte de la cadena. Podemos poner cualquier cosa ahí dentro: una variable como `name`, una expresión aritmética como `1 + 2`, o algo más complejo. - -Tenga en cuenta que esto sólo se puede hacer en los "backticks". ¡Otras comillas no tienen esta capacidad de incrustación! -```js run -alert( "el resultado es ${1 + 2}" ); // el resultado es ${1 + 2} (las comillas dobles no hacen nada) -``` - -En el capítulo trataremos más a fondo las cadenas. - -```smart header="No existe el tipo *carácter*". -En algunos lenguajes, hay un tipo especial "carácter" para un solo carácter. Por ejemplo, en el lenguaje C y en Java es `char`. - -En JavaScript no existe tal tipo. Sólo hay un tipo: `string`. Una cadena puede estar formada por un solo carácter o por varios de ellos. -``` - -## Un boolean (tipo lógico) - -El tipo boolean (booleano) tiene sólo dos valores: verdadero `true` y falso `false`. - -Este tipo se utiliza comúnmente para almacenar valores de sí/no: `true` significa "sí, correcto", y `false` significa "no, incorrecto". - -Por ejemplo: - -```js -let nameFieldChecked = true; // sí, el campo name está marcado -let ageFieldChecked = false; // no, el campo age no está marcado -``` - -Los valores booleanos también son el resultado de comparaciones: - -```js run -let isGreater = 4 > 1; - -alert( isGreater ); // verdadero (el resultado de la comparación es "sí") -``` - -En el capítulo trataremos más a fondo el tema de los booleanos. - -## El valor "null" (nulo) - -El valor especial `null` no pertenece a ninguno de los tipos descritos anteriormente. - -Forma un tipo propio separado que contiene sólo el valor `null`: - -```js -let age = null; -``` - -En JavaScript, `null` no es una "referencia a un objeto inexistente" o un "puntero nulo" como en otros lenguajes. - -Es sólo un valor especial que representa "nada", "vacío" o "valor desconocido". - -El código anterior indica que la "edad" es desconocida o está vacía por alguna razón. - -## El valor "undefined" (indefinido) - -El valor especial `undefined` también se distingue. Hace un tipo propio, igual que `null`. - -El significado de `undefined` es "valor no asignado". - -Si una variable es declarada pero no asignada, entonces su valor es `undefined`: - -```js run -let x; - -alert(x); // muestra "undefined" -``` - -Técnicamente, es posible asignar `undefined` a cualquier variable: - -```js run -let edad = 100; - -// cambia el valor a undefined -edad = undefined; - -alert(x); // "undefined" -``` - -...Pero no recomendamos hacer eso. Normalmente, usamos `null` para asignar un valor "vacío" o "desconocido" a una variable, y usamos `undefined` para chequeos como ver si una variable ha sido asignada. - -## Objects y symbols - -El tipo `object` (objeto) es especial. - -Todos los demás tipos se llaman "primitivos" porque sus valores pueden contener una sola cosa (ya sea una cadena, un número o lo que sea). Por el contrario, los objetos se utilizan para almacenar colecciones de datos y entidades más complejas. - -Siendo tan importantes, los objetos merecen un tratamiento especial. Nos ocuparemos de ellos más adelante en el capítulo después de aprender más sobre los primitivos. - -El tipo `symbol` (símbolo) se utiliza para crear identificadores únicos para los objetos. Tenemos que mencionarlo aquí para una mayor completitud, pero es mejor estudiar este tipo después de los objetos. - -## El operador typeof [#type-typeof] - -El operador `typeof` devuelve el tipo del argumento. Es útil cuando queremos procesar valores de diferentes tipos de forma diferente o simplemente queremos hacer una comprobación rápida. - -Soporta dos formas de sintaxis: - -1. Como operador: `typeof x`. -2. Como una función: `typeof(x)`. - -En otras palabras, funciona con paréntesis o sin ellos. El resultado es el mismo. - -La llamada a `typeof x` devuelve una cadena con el nombre del tipo: - -```js -typeof undefined // "undefined" (indefinido) - -typeof 0 // "number" (número) - -typeof 10n // "bigint" - -typeof true // "boolean" (booleano) - -typeof "foo" // "string" (cadena) - -typeof Symbol("id") // "symbol" (símbolo) - -*!* -typeof Math // "object" (1) -*/!* - -*!* -typeof null // "object" (2) -*/!* - -*!* -typeof alert // "function" (3) -*/!* -``` - -Las últimas tres líneas pueden necesitar una explicación adicional: - -1. `Math` es un objeto incorporado (built-in) que proporciona operaciones matemáticas. Lo aprenderemos en el capítulo . Aquí, sólo sirve como ejemplo de un objeto. -2. El resultado de `typeof null` es `"object"`. Esto es un error oficialmente reconocido de `typeof` que viene de viejos tiempos y se mantiene por cuestiones de compatibilidad. Definitivamente `null` no es un objeto. Es un valor especial con su tipo propio. -3. El resultado de `typeof alert` es `"function"`, porque `alert` es una función. Estudiaremos las funciones en los próximos capítulos donde veremos también que no hay ningún tipo especial "function" en JavaScript. Las funciones pertenecen al tipo objeto. Pero `typeof` las trata de manera diferente devolviendo `"function"`. Técnicamente esto no es correcto, pero puede ser conveniente en la práctica. - -## Resumen - -Hay 8 tipos básicos en JavaScript. - -- `number` para números de cualquier tipo: enteros o en punto flotante. Los enteros están limitados a ±253. -- `bigint` para números enteros de longitud arbitraria. -- `string` para cadenas. Una cadena puede tener uno o más caracteres, no hay un tipo especial para un único carácter. -- `boolean` para verdadero y falso: `true`/`false`. -- `null` para valores desconocidos -- un tipo independiente que tiene un solo valor nulo: `null`. -- `undefined` para valores no asignados -- un tipo independiente que tiene un único valor "indefinido": `undefined`. -- `object` para estructuras de datos complejas. -- `symbol` para identificadores únicos. - -El operador `typeof` nos permite ver qué tipo está almacenado en una variable. - -- Dos formas: `typeof x` o `typeof(x)`. -- Devuelve una cadena con el nombre del tipo, por ejemplo `"string"`. -- Para `null` devuelve `"object"` -- esto es un error en el lenguaje, en realidad no es un objeto. - -En los siguientes capítulos, nos concentraremos en los valores primitivos y una vez que nos familiaricemos con ellos, pasaremos a los objetos. +# Tipos de datos + +Un valor en JavaScript siempre es de cierto tipo. Por ejemplo, un string(cadena de caracteres) o un número. + +Hay ocho tipos de datos básicos en JavaScript. Aquí, los cubriremos en general y en los próximos capítulos hablaremos de cada uno de ellos en detalle. + +Podemos poner cualquier tipo en una variable. Por ejemplo, una variable puede en un momento ser un string y luego almacenar un número: + +```js +// no hay error +let message = "hola"; +message = 123456; +``` + +Los lenguajes de programación que permiten estas cosas se denominan "dinámicamente tipeados", lo que significa que hay tipos de datos, pero las variables no están vinculadas a ninguno de ellos. + +## Un number + +```js +let n = 123; +n = 12.345; +``` + +El tipo *number* (número) representa tanto números enteros como de punto flotante. + +Hay muchas operaciones para números, por ejemplo, multiplicación `*`, división `/`, suma `+`, resta `-`, y demás. + +Además de los números comunes, existen los llamados "valores numéricos especiales" que también pertenecen a este tipo de dato: `Infinity`, `-Infinity` and `NaN`. + +- `Infinity` representa el [Infinito](https://es.wikipedia.org/wiki/Infinito) matemático ∞. Es un valor especial que es mayor que cualquier número. + + Podemos obtenerlo como resultado de la división por cero: + + ```js run + alert( 1 / 0 ); // Infinito + ``` + + O simplemente hacer referencia a ello directamente: + + ```js run + alert( Infinity ); // Infinito + ``` +- `NaN` representa un error de cálculo. Es el resultado de una operación matemática incorrecta o indefinida, por ejemplo: + + ```js run + alert( "no es un número" / 2 ); // NaN, tal división es errónea + ``` + + `NaN` es "pegajoso". Cualquier otra operación sobre `NaN` devuelve `NaN`: + + ```js run + alert( "no es un número" / 2 + 5); // NaN + ``` + + Por lo tanto, si hay un `NaN` en alguna parte de una expresión matemática, se propaga a todo el resultado. + +```smart header="Las operaciones matemáticas son seguras" +Hacer matemáticas es "seguro" en JavaScript. Podemos hacer cualquier cosa: dividir por cero, tratar las cadenas no numéricas como números, etc. + +El script nunca se detendrá con un error fatal ("morir"). En el peor de los casos, obtendremos `NaN` como resultado. +``` + +Los valores numéricos especiales pertenecen formalmente al tipo "número". Por supuesto que no son números en el sentido estricto de la palabra. + +Veremos más sobre el trabajo con números en el capítulo . + +## BigInt + +En JavaScript, el tipo "número" no puede representar valores enteros mayores que (253-1) (eso es `9007199254740991`), o menor que -(253-1) para negativos. Es una limitación técnica causada por su representación interna. + +Para la mayoría de los propósitos es suficiente pero a veces necesitamos números realmente grandes, por ejemplo para criptografía o marcas de tiempo de precisión de microsegundos. + +`BigInt` se agregó recientemente al lenguaje para representar enteros de longitud arbitraria. + +Un valor `BigInt` se crea agregando `n` al final de un entero: + +```js +// la "n" al final significa que es un BigInt +const bigInt = 1234567890123456789012345678901234567890n; +``` + +Como los números `BigInt` rara vez se necesitan, no los cubrimos aquí, sino que les dedicamos un capítulo separado . Léalo cuando necesite números tan grandes. + +```smart header="Problemas de compatibilidad" +En este momento, `BigInt` es compatible con Firefox / Chrome / Edge, pero no con Safari / IE. +``` + +## Un string + +Un string (cadena de caracteres) en JavaScript debe estar encerrado entre comillas. + +```js +let str = "Hola"; +let str2 = 'Las comillas simples también están bien'; +let phrase = `puede incrustar ${str}`; +``` + +En JavaScript, hay 3 tipos de comillas. + +1. Comillas dobles: `"Hola"`. +2. Comillas simples: `'Hola'`. +3. Backticks (acento grave): `Hola`. + +Las comillas dobles y simples son comillas "simples". No hay diferencia entre ellas en JavaScript. + +Los Backticks son comillas de "funcionalidad extendida". Nos permiten incrustar variables y expresiones en una cadena de caracteres encerrándolas en `${...}`, por ejemplo: + +```js run +let name = "Juan"; + +// incrustar una variable +alert( `Hola, *!*${name}*/!*!` ); // Hola, Juan! + +// incrustar una expresión +alert( `el resultado es *!*${1 + 2}*/!*` ); //el resultado es 3 +``` + +La expresión dentro de `${...}` se evalúa y el resultado pasa a formar parte de la cadena. Podemos poner cualquier cosa ahí dentro: una variable como `name`, una expresión aritmética como `1 + 2`, o algo más complejo. + +Tenga en cuenta que esto sólo se puede hacer en los "backticks". ¡Otras comillas no tienen esta capacidad de incrustación! +```js run +alert( "el resultado es ${1 + 2}" ); // el resultado es ${1 + 2} (las comillas dobles no hacen nada) +``` + +En el capítulo trataremos más a fondo las cadenas. + +```smart header="No existe el tipo *carácter*". +En algunos lenguajes, hay un tipo especial "carácter" para un solo carácter. Por ejemplo, en el lenguaje C y en Java es `char`. + +En JavaScript no existe tal tipo. Sólo hay un tipo: `string`. Una cadena puede estar formada por un solo carácter o por varios de ellos. +``` + +## Un boolean (tipo lógico) + +El tipo boolean (booleano) tiene sólo dos valores: verdadero `true` y falso `false`. + +Este tipo se utiliza comúnmente para almacenar valores de sí/no: `true` significa "sí, correcto", y `false` significa "no, incorrecto". + +Por ejemplo: + +```js +let nameFieldChecked = true; // sí, el campo name está marcado +let ageFieldChecked = false; // no, el campo age no está marcado +``` + +Los valores booleanos también son el resultado de comparaciones: + +```js run +let isGreater = 4 > 1; + +alert( isGreater ); // verdadero (el resultado de la comparación es "sí") +``` + +En el capítulo trataremos más a fondo el tema de los booleanos. + +## El valor "null" (nulo) + +El valor especial `null` no pertenece a ninguno de los tipos descritos anteriormente. + +Forma un tipo propio separado que contiene sólo el valor `null`: + +```js +let age = null; +``` + +En JavaScript, `null` no es una "referencia a un objeto inexistente" o un "puntero nulo" como en otros lenguajes. + +Es sólo un valor especial que representa "nada", "vacío" o "valor desconocido". + +El código anterior indica que la "edad" es desconocida o está vacía por alguna razón. + +## El valor "undefined" (indefinido) + +El valor especial `undefined` también se distingue. Hace un tipo propio, igual que `null`. + +El significado de `undefined` es "valor no asignado". + +Si una variable es declarada pero no asignada, entonces su valor es `undefined`: + +```js run +let x; + +alert(x); // muestra "undefined" +``` + +Técnicamente, es posible asignar `undefined` a cualquier variable: + +```js run +let edad = 100; + +// cambia el valor a undefined +edad = undefined; + +alert(x); // "undefined" +``` + +...Pero no recomendamos hacer eso. Normalmente, usamos `null` para asignar un valor "vacío" o "desconocido" a una variable, y usamos `undefined` para chequeos como ver si una variable ha sido asignada. + +## Objects y symbols + +El tipo `object` (objeto) es especial. + +Todos los demás tipos se llaman "primitivos" porque sus valores pueden contener una sola cosa (ya sea una cadena, un número o lo que sea). Por el contrario, los objetos se utilizan para almacenar colecciones de datos y entidades más complejas. + +Siendo tan importantes, los objetos merecen un tratamiento especial. Nos ocuparemos de ellos más adelante en el capítulo después de aprender más sobre los primitivos. + +El tipo `symbol` (símbolo) se utiliza para crear identificadores únicos para los objetos. Tenemos que mencionarlo aquí para una mayor completitud, pero es mejor estudiar este tipo después de los objetos. + +## El operador typeof [#type-typeof] + +El operador `typeof` devuelve el tipo del argumento. Es útil cuando queremos procesar valores de diferentes tipos de forma diferente o simplemente queremos hacer una comprobación rápida. + +Soporta dos formas de sintaxis: + +1. Como operador: `typeof x`. +2. Como una función: `typeof(x)`. + +En otras palabras, funciona con paréntesis o sin ellos. El resultado es el mismo. + +La llamada a `typeof x` devuelve una cadena con el nombre del tipo: + +```js +typeof undefined // "undefined" (indefinido) + +typeof 0 // "number" (número) + +typeof 10n // "bigint" + +typeof true // "boolean" (booleano) + +typeof "foo" // "string" (cadena) + +typeof Symbol("id") // "symbol" (símbolo) + +*!* +typeof Math // "object" (1) +*/!* + +*!* +typeof null // "object" (2) +*/!* + +*!* +typeof alert // "function" (3) +*/!* +``` + +Las últimas tres líneas pueden necesitar una explicación adicional: + +1. `Math` es un objeto incorporado (built-in) que proporciona operaciones matemáticas. Lo aprenderemos en el capítulo . Aquí, sólo sirve como ejemplo de un objeto. +2. El resultado de `typeof null` es `"object"`. Esto es un error oficialmente reconocido de `typeof` que viene de viejos tiempos y se mantiene por cuestiones de compatibilidad. Definitivamente `null` no es un objeto. Es un valor especial con su tipo propio. +3. El resultado de `typeof alert` es `"function"`, porque `alert` es una función. Estudiaremos las funciones en los próximos capítulos donde veremos también que no hay ningún tipo especial "function" en JavaScript. Las funciones pertenecen al tipo objeto. Pero `typeof` las trata de manera diferente devolviendo `"function"`. Técnicamente esto no es correcto, pero puede ser conveniente en la práctica. + +## Resumen + +Hay 8 tipos básicos en JavaScript. + +- `number` para números de cualquier tipo: enteros o en punto flotante. Los enteros están limitados a ±253. +- `bigint` para números enteros de longitud arbitraria. +- `string` para cadenas. Una cadena puede tener uno o más caracteres, no hay un tipo especial para un único carácter. +- `boolean` para verdadero y falso: `true`/`false`. +- `null` para valores desconocidos -- un tipo independiente que tiene un solo valor nulo: `null`. +- `undefined` para valores no asignados -- un tipo independiente que tiene un único valor "indefinido": `undefined`. +- `object` para estructuras de datos complejas. +- `symbol` para identificadores únicos. + +El operador `typeof` nos permite ver qué tipo está almacenado en una variable. + +- Dos formas: `typeof x` o `typeof(x)`. +- Devuelve una cadena con el nombre del tipo, por ejemplo `"string"`. +- Para `null` devuelve `"object"` -- esto es un error en el lenguaje, en realidad no es un objeto. + +En los siguientes capítulos, nos concentraremos en los valores primitivos y una vez que nos familiaricemos con ellos, pasaremos a los objetos. 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 1ff146871..a2008c4e2 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 @@ -10,8 +10,8 @@ true + false = 1 "4" - 2 = 2 "4px" - 2 = NaN 7 / 0 = Infinity -" -9 " + 5 = " -9 5" // (3) -" -9 " - 5 = -14 // (4) +" -9 " + 5 = " -9 5" // (3) +" -9 " - 5 = -14 // (4) null + 1 = 1 // (5) undefined + 1 = NaN // (6) " \t \n" - 2 = -2 // (7) diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md index 1177a8268..c38ded20f 100644 --- a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md +++ b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md @@ -3,8 +3,8 @@ La razón es que la captura devuelve la entrada del usuario como una cadena. Entonces las variables tienen valores `"1"` y `"2"` respectivamente. ```js run -let a = "1"; // prompt("Primer número?", 1); -let b = "2"; // prompt("Segundo número?", 2); +let a = "1"; // prompt("¿Primer número?", 1); +let b = "2"; // prompt("¿Segundo número?", 2); alert(a + b); // 12 ``` @@ -14,8 +14,8 @@ Lo que debemos hacer es convertir las cadenas de texto a números antes `+`. Por Por ejemplo, justo antes de `prompt`: ```js run -let a = +prompt("Primer número?", 1); -let b = +prompt("Segundo número?", 2); +let a = +prompt("¿Primer número?", 1); +let b = +prompt("¿Segundo número?", 2); alert(a + b); // 3 ``` @@ -23,10 +23,10 @@ alert(a + b); // 3 O en el `alert`: ```js run -let a = prompt("Primer número?", 1); -let b = prompt("Segundo número?", 2); +let a = prompt("¿Primer número?", 1); +let b = prompt("¿Segundo número?", 2); alert(+a + +b); // 3 ``` -Usar ambos unario y binario `+` en el último ejemplo, se ve raro no? +Usar ambos unario y binario `+` en el último ejemplo, se ve raro, ¿no? diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md index 3f8395f12..54c5342fa 100644 --- a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md +++ b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md @@ -11,8 +11,8 @@ Funciona incorrectamente. El resultado en el ejemplo a continuación es `12` (pa ¿Por qué? Arreglalo. El resultado debería ser `3`. ```js run -let a = prompt("Primer número?", 1); -let b = prompt("Segundo número?", 2); +let a = prompt("¿Primer número?", 1); +let b = prompt("¿Segundo número?", 2); alert(a + b); // 12 ``` diff --git a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md index e26c638f5..402d5af3b 100644 --- a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md +++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md @@ -13,9 +13,9 @@ null === +"\n0\n" → false Algunas de las razones: 1. Obviamente, true. -2. Comparación lexicográfica, por lo tanto false. +2. Comparación lexicográfica, por lo tanto false. `"a"` es menor que `"p"`. 3. Una vez más, la comparación lexicográfica, el primer carácter de `"2"` es mayor que el primer carácter de `"1"`. 4. Los valores `null` y `undefined` son iguales entre sí solamente. 5. La igualdad estricta es estricta. Diferentes tipos de ambos lados conducen a false. -6. Ver (4). +6. Similar a (4). 7. Igualdad estricta de diferentes tipos. diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md index fb83697c7..1219e4b2f 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md @@ -1,6 +1,6 @@ ```js -result = (a + b < 4) ? 'Debajo' : 'Encima'; +let result = (a + b < 4) ? 'Debajo' : 'Encima'; ``` diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md index df7b392fc..cfb2c9b94 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md @@ -7,6 +7,8 @@ importance: 5 Reescriba esta condición `if` usando el operador ternario `'?'`: ```js +let result; + if (a + b < 4) { result = 'Debajo'; } else { diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index 8a9c0f893..2635de507 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -6,7 +6,7 @@ Para hacer esto, nosotros utilizaremos la sentencia `if` y el operador condicion ## La sentencia "if" -La sentencia `if` evalúa una condición y, si esta condición obtiene un booleano de tipo `true`, ejecuta un bloque de código. +La sentencia `if(...)` evalúa la condición en los paréntesis, y si el resultado es `true` ejecuta un bloque de código. Por ejemplo: @@ -127,7 +127,7 @@ alert(accessAllowed); Entonces el operador "ternario" también llamado "signo de interrogación" nos permite ejecutar esto en una forma más corta y simple. -El operador está representado por un signo de interrogación de cierre `?`. El término formal "ternario" significa que el operador tiene tres operandos. Este es actualmente el primer y único operador de JavaScript que tiene esta cantidad. +El operador está representado por un signo de interrogación de cierre `?`. A veces es llamado "ternario" porque el operador tiene tres operandos. Es el único operador de JavaScript que tiene esta cantidad de ellos. La Sintaxis es: ```js @@ -142,7 +142,7 @@ Por ejemplo: let accessAllowed = (age > 18) ? true : false; ``` -Técnicamente, podemos omitir el paréntesis alrededor de `age > 18`. El operador de signo de interrogación tiene una precedencia baja, por lo que se ejecuta después del signo de comparación `>`. +Técnicamente, podemos omitir el paréntesis alrededor de `age > 18`. El operador de signo de interrogación tiene una precedencia baja, por lo que se ejecuta después de la comparación `>`. En este ejemplo realizaremos lo mismo que en el anterior: @@ -216,7 +216,7 @@ Dependiendo de la condición `company == 'Netscape'`, se ejecutará la primera o Aquí no asignamos el resultado de una variable. En vez de esto, ejecutamos diferentes códigos dependiendo de la condición. -**Nosotros no recomendamos el uso del operador de signo de interrogación en estos casos.** +**No se recomienda el uso del operador de signo de interrogación de esta forma.** La notacion es mas corta que la sentencia equivalente con `if`, lo cual seduce a algunos programadores. Pero es menos legible. diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md index b2168dc84..ca25ebcab 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md @@ -5,7 +5,7 @@ let userName = prompt("Quién está ahí?", ""); if (userName == "Admin") { - let pass = prompt("Contraseña?", ""); + let pass = prompt("¿Contraseña?", ""); if (pass == "TheMaster") { alert( "Bienvenido!" ); 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 04803142f..360477b2c 100644 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ b/1-js/02-first-steps/11-logical-operators/article.md @@ -84,7 +84,7 @@ El operador OR `||` realiza lo siguiente: Un valor es retornado en su forma original, sin la conversión. -En otras palabras, una cadena de OR `"||"` retorna el primer valor verdadero o el último valor en caso de que ningún verdadero sea encontrado. +En otras palabras, una cadena de OR `"||"` devuelve el primer valor verdadero o el último si ningún verdadero es encontrado. Por ejemplo: @@ -216,12 +216,12 @@ Cuando todos los valores son verdaderos, el último valor es retornado: alert(1 && 2 && 3); // 3, el último. ``` -```smart header="La precedencia de AND `&&` es mayor que la de OR `||`" +````smart header="La precedencia de AND `&&` es mayor que la de OR `||`" La precedencia del operador AND `&&` es mayor que la de OR `||`. Así que el código `a && b || c && d` es básicamente el mismo que si la expresiones `&&` estuvieran entre paréntesis: `(a && b) || (c && d)` -``` +```` ````warn header="No remplace *if* con || or &&" A veces, la gente usa el operador AND `&&` como una "forma más corta de escribir `if`". @@ -231,7 +231,7 @@ Por ejemplo: ```js run let x = 1; -(x > 0) && alert( 'Greater than zero!' ); +(x > 0) && alert("¡Mayor que cero!"); ``` La acción en la parte derecha de `&&` sería ejecutada sólo si la evaluación la alcanza. Eso es, solo si `(x > 0)` es verdadero. @@ -241,9 +241,7 @@ Así que básicamente tenemos un análogo para: ```js run let x = 1; -if (x > 0) { - alert("Mayor que cero!"); -} +if (x > 0) alert("Mayor que cero!"); ``` Aunque la variante con `&&` parece más corta, `if` es más obvia y tiende a ser un poco más legible. Por lo tanto, recomendamos usar cada construcción para su propósito: use `if` si queremos si y use` && `si queremos AND. ```` diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md index fe24a2a3c..d5501ac66 100644 --- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -2,7 +2,7 @@ [recent browser="new"] -El _nullish coalescing operator_ `??` brinda una sintáxis corta para seleccionar la primera variable "definida" de una lista. +El _nullish coalescing operator_ `??` brinda una sintaxis corta para seleccionar la primera variable "definida" de una lista. El resultado de `a ?? b` es: - `a` si esta no es `null` o `undefined`, @@ -16,9 +16,9 @@ x = (a !== null && a !== undefined) ? a : b; Aquí un ejemplo más detallado. -Pensemos que tenemos un `firstName`, `lastName` o `nickName`, todos ellos opcionales. +Pensemos que tenemos un `firstName`, `lastName` o `nickName`, todos ellos pueden ser undefined si el usuario decide no ingresar ningún nombre. -Escojamos el que esté definido y mostrémoslo (o mostremos "Anonymous" si ninguno está definido): +Queremos mostrar un nombre, una de las tres variables, o "Anonymous" si ninguno está definido: ```js run let firstName = null; @@ -26,16 +26,18 @@ let lastName = null; let nickName = "Supercoder"; // Muestra la primera variable que no sea null/undefined +*!* alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder +*/!* ``` ## Comparación con || -Esto es muy similiar al operador OR `||`. De hecho, podemos reemplazar `??` con `||` en el código anterior y obtener el mismo resultado. +El operador OR `||` puede ser usado de la misma manera que `??`. De hecho, podemos reemplazar `??` con `||` en el código anterior y obtener el mismo resultado tal como está explicado en el [capítulo previo](info:logical-operators#or-finds-the-first-truthy-value) La gran diferencia es que: -- `||` retorna el primer valor _*truthy*_. -- `??` retorna el primer valor _*defined*_. +- `||` retorna el primer valor *truthy*. +- `??` retorna el primer valor *defined*. Esto es de suma importancia cuando queremos tratar `null/undefined` diferente de `0`. @@ -45,7 +47,7 @@ Por ejemplo: height = height ?? 100; ``` -Esto le asigna `100` a `height` si esta no está definida. En cambio si `height` es `0`, esta se mantiene "tal cual". +Esto le asigna `100` a `height` si esta no está definida. Comparémoslo con `||`: @@ -114,4 +116,4 @@ alert(x); // 2 ``` - El operador `??` tiene una precedencia muy baja, un poco más alta que `?` y `=`. -- Está prohibido su uso con `||` y `&&` sin paréntesis explícitos. \ No newline at end of file +- Está prohibido su uso con `||` y `&&` sin paréntesis explícitos. diff --git a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md index b4ebf1c03..3b364a19e 100644 --- a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md +++ b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md @@ -4,7 +4,7 @@ importance: 3 # Último valor del bucle -¿Cuál es el último valor alertado/mostrado por este código? ¿Por qué? +¿Cuál es el último valor mostrado en alerta por este código? ¿Por qué? ```js let i = 3; diff --git a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md index b29f0b1e8..3a9378821 100644 --- a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md +++ b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md @@ -6,7 +6,7 @@ importance: 4 Para cada bucle, anota qué valores mostrará y luego compara las respuestas. -Ambos bucles ¿`alertan` los mismos valores? +Ambos bucles, ¿muestran en `alert` los mismos valores? 1. La forma del sufijo: diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 40809beb0..495531776 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -170,4 +170,4 @@ switch (arg) { 1. Para `0`, `1`, se ejecuta el primer `alert`. 2. Para `2` se ejecuta el segundo `alert`. 3. Pero para `3`, el resultado del `prompt` es un string `"3"`, el cual no es estrictamente igual `===` al número `3`. Por tanto ¡Tenemos un código muerto en `case 3`! La variante `default` se ejecutará. - \ No newline at end of file + diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md index af137f24e..175a0de54 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md @@ -13,7 +13,7 @@ function checkAge(age) { if (age > 18) { return true; } else { - return confirm('¿Tienes permiso de tus padres para acceder a esta página?'); + return confirm('¿Tienes permiso de tus padres?'); } } ``` @@ -23,4 +23,4 @@ Reescríbalo, para realizar lo mismo, pero sin `if`, en una sola linea. Haz dos variantes de `checkAge`: 1. Usando un operador de signo de interrogación `?` -2. Usando Ó `||` +2. Usando OR `||` diff --git a/1-js/02-first-steps/15-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md index 772ec5fa7..edf511fb1 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/solution.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/solution.md @@ -20,4 +20,3 @@ if (n < 1) { alert( pow(x, n) ); } ``` - diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index 18d8b1441..8a7aa663e 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -48,7 +48,7 @@ Como puedes ver `(a, b) => a + b` significa una función que acepta dos parámet alert( double(3) ); // 6 ``` -- Si no hay parámetros, los paréntesis estarán vacíos (pero deberían estar presentes): +- Si no hay parámetros, los paréntesis estarán vacíos (pero deben estar presentes): ```js run let sayHi = () => alert("Hello!"); diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 19e663b9e..6a09b505c 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -105,7 +105,7 @@ Por favor abre el desplegable de informacion de la derecha (etiquetado con flech En el momento actual el debugger está dentro de la función `hello()`, llamada por un script en `index.html` (no dentro de ninguna función, por lo que se llama "anonymous"). - Si haces click en un elemento de la pila, el debugger saltará al código correspondiente, y todas sus variables también serán examinadas. + Si haces click en un elemento de la pila (por ejemplo "anonymous"), el debugger saltará al código correspondiente, y todas sus variables también serán examinadas. 3. **`Scope` -- variables activas.** `Local` muestra las variables de la función local. También puedes ver sus valores resaltados sobre el código fuente. diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md index 221e05981..ea6b044e2 100644 --- a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md +++ b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md @@ -39,7 +39,7 @@ function pow(x, n) { let x = prompt("x?", ""); let n = prompt("n?", ""); -if (n < 0) { +if (n <= 0) { alert(`Power ${n} is not supported, please enter an integer number greater than zero`); } else { diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md index 9563af3a7..bc61e022b 100644 --- a/1-js/03-code-quality/02-coding-style/article.md +++ b/1-js/03-code-quality/02-coding-style/article.md @@ -285,7 +285,7 @@ Por supuesto, un equipo siempre puede escribir su propia guía de estilo, pero g Algunas opciones populares: -- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml) +- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) - [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js) - [StandardJS](https://standardjs.com/) diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index 54e62fdb8..ba16dd24b 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -142,7 +142,7 @@ Documenta la utilización de una función Por cierto, muchos editores como [WebStorm](https://www.jetbrains.com/webstorm/) también pueden entenderlos y usarlos para proveer auto completado y algún tipo de verificación automática para el código. - Además, existen herramientas como [JSDoc](https://github.com/jsdoc3/jsdoc) que pueden generar documentación en formato HTML de los comentarios. Puedes leer más información sobre JSDoc aquí . + Además, existen herramientas como [JSDoc 3](https://github.com/jsdoc3/jsdoc) que pueden generar documentación en formato HTML de los comentarios. Puedes leer más información sobre JSDoc aquí . ¿Por qué se resuelve de esa manera? : Lo que está escrito es importante. Pero lo que *no* está escrito puede ser aún más importante para entender qué está pasando. ¿Por qué resuelven la tarea exactamente de esa manera? El código no nos da ninguna respuesta. diff --git a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js index e125807a8..3276aa192 100644 --- a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js @@ -1,5 +1,10 @@ describe("test", function() { + + // Mocha usually waits for the tests for 2 seconds before considering them wrong + + this.timeout(200000); // With this code we increase this - in this case to 200,000 milliseconds + // This is because of the "alert" function, because if you delay pressing the "OK" button the tests will not pass! before(() => alert("Inicio testing – antes de todos los tests")); after(() => alert("Final testing – después de todos los tests")); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js index 82821204a..186ded1b3 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js @@ -4,8 +4,8 @@ describe("pow", function() { assert.equal(pow(2, 3), 8); }); - it("3 elevado a la potencia de 3 es 27", function() { - assert.equal(pow(3, 3), 27); + it("3 elevado a la potencia de 4 es 81", function() { + assert.equal(pow(3, 4), 81); }); }); diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index 1c85b6381..c0e16f3b8 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -285,7 +285,6 @@ En la mayoría de los casos la distinción es imperceptible, porque los operador - `Infinity` (y `-Infinity`) es un valor numérico especial que es mayor (menor) que cualquier otra cosa. - `NaN` ("No un Número") representa un error. -======= Ambos pertenecen al tipo `number`, pero no son números "normales", así que hay funciones especiales para chequearlos: diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index e0ac74d61..31cac45ce 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -17,7 +17,7 @@ let double = "comillas dobles"; let backticks = `backticks`; ``` -Comillas simples y dobles son escencialmente lo mismo. Sin embargo los "backticks" nos permiten ingresar expresiones dentro del string, incluso llamados a funciones: +Comillas simples y dobles son escencialmente lo mismo. Sin embargo los "backticks" nos permiten ingresar expresiones dentro del string, envolviéndolos en `${…}`: ```js run function sum(a, b) { @@ -62,7 +62,7 @@ let guestList = 'Invitados:\n * Juan\n * Pedro\n * Maria'; alert(guestList); // una lista de invitados en múltiples líneas ``` -Por ejemplo, estas dos líneas son iguales, solo que escritas en forma diferente: +Por ejemplo, estas dos líneas son iguales, pero escritas en forma diferente: ```js run let str1 = "Hello\nWorld"; // dos líneas usando el "símbolo de nueva línea" @@ -126,7 +126,7 @@ Es posible, pero debemos duplicarlo como sigue `\\`: alert(`El carácter de escape: \\`); // El carácter de escape: \ ``` -## Largo del string (String length) +## Largo del string La propiedad 'length' entrega el largo del string: diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 6319d5c28..3467eeb5b 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -193,7 +193,7 @@ Un array es una clase especial de objeto. Los corchetes usados para acceder a un Ellos extienden los objetos proveyendo métodos especiales para trabajar con colecciones ordenadas de datos y también la propiedad `length`. Pero en el corazón es aún un objeto. -Recuerde, solo hay ocho tipos de datos básicos en JavaScript (consulte el capítulo [Tipos de datos] (https://javascript.info/types) para obtener más información). Array es un objeto y, por tanto, se comporta como un objeto. +Recuerde, solo hay ocho tipos de datos básicos en JavaScript (consulte el capítulo [Tipos de datos](info:types) para obtener más información). Array es un objeto y, por tanto, se comporta como un objeto. Por ejemplo, es copiado por referencia: diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/task.md b/1-js/05-data-types/05-array-methods/12-reduce-object/task.md index 015a56946..c4ca20af5 100644 --- a/1-js/05-data-types/05-array-methods/12-reduce-object/task.md +++ b/1-js/05-data-types/05-array-methods/12-reduce-object/task.md @@ -34,4 +34,4 @@ Dicha función es realmente útil cuando trabajamos con información del servido Para esta actividad asumimos que cada `id` es único. No existen dos elementos del array con el mismo `id`. -Usa el método `array.reduce` en la solución. +Usa el método de array `.reduce` en la solución. diff --git a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js b/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js index 1d210eec5..f62452a5f 100644 --- a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js +++ b/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js @@ -17,7 +17,7 @@ function Calculator() { } return this.methods[op](a, b); - } + }; this.addMethod = function(name, func) { this.methods[name] = func; diff --git a/1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md b/1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md index f8888d806..a272c4d40 100644 --- a/1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md +++ b/1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md @@ -31,6 +31,6 @@ La actividad consiste de dos partes. alert( result ); // 8 ``` -- Sin paréntesis ni expresiones complejas. +- Sin paréntesis ni expresiones complejas en esta tarea. - Los números y el operador deben estar delimitados por exactamente un espacio. - Puede haber manejo de errores si quisieras agregarlo. diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index f0637fa2b..f710e41d6 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -198,7 +198,7 @@ Tanto los iterables como los array-like generalmente no son *matrices*, no tiene ## Array.from -Existe un método universal [Array.from](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/from) que toma un valor iterable o similar a una matriz y crea un `Array` ¨real¨ a partir de él. De esta manera podemos llamar y usar métodos que pertenecen a una matriz. +Existe un método universal [Array.from](mdn:js/Array/from) que toma un valor iterable o similar a una matriz y crea un `Array` ¨real¨ a partir de él. De esta manera podemos llamar y usar métodos que pertenecen a una matriz. Por ejemplo: diff --git a/1-js/05-data-types/07-map-set/01-array-unique-map/task.md b/1-js/05-data-types/07-map-set/01-array-unique-map/task.md index b212e4a8a..b0688c6fc 100644 --- a/1-js/05-data-types/07-map-set/01-array-unique-map/task.md +++ b/1-js/05-data-types/07-map-set/01-array-unique-map/task.md @@ -4,7 +4,7 @@ importance: 5 # Filtrar miembros únicos del array -Permita que `arr` sea un array. +Digamos que `arr` es un array. Cree una función `unique(arr)` que debería devolver un array con elementos únicos de `arr`. @@ -24,6 +24,4 @@ alert( unique(values) ); // Hare, Krishna, :-O P.D. Aquí se usan strings, pero pueden ser valores de cualquier tipo. - - P.D.S. Use `Set` para almacenar valores únicos. diff --git a/1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md b/1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md index e0c3b67de..8ed04cf55 100644 --- a/1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md +++ b/1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md @@ -36,7 +36,7 @@ La clasificación de letras se realiza mediante la cadena de llamadas en la lín Por conveniencia la dividimos en múltiples líneas: ```js -let sorted = arr[i] // PAN +let sorted = word // PAN .toLowerCase() // pan .split('') // ['p','a','n'] .sort() // ['a','n','p'] diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md index 96a42d1e1..8d9ded8ae 100644 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ b/1-js/05-data-types/08-weakmap-weakset/article.md @@ -1,5 +1,6 @@ # WeakMap y WeakSet + Como sabemos por el capítulo , el motor de JavaScript almacena un valor en la memoria mientras es accesible(y puede ser potencialmente usado). Por ejemplo: diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md index 4238cc717..ceec764ef 100644 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md @@ -19,4 +19,4 @@ Crear la función `topSalary(salaries)` que devuelva el nombre de la persona mej - Si `salaries` es vacío, debería devolver `null`. - Si hay varias personas con mejor paga, devolver cualquiera de ellos. -PD: Utilice `Object.entries` y desestructuración para iterar sobre pares de propiedades/valores. \ No newline at end of file +PD: Utilice `Object.entries` y desestructuración para iterar sobre pares de propiedades/valores. diff --git a/1-js/05-data-types/11-date/1-new-date/solution.md b/1-js/05-data-types/11-date/1-new-date/solution.md index e0ab778a8..a7790ffb5 100644 --- a/1-js/05-data-types/11-date/1-new-date/solution.md +++ b/1-js/05-data-types/11-date/1-new-date/solution.md @@ -9,7 +9,6 @@ Aquí hay un ejemplo con números como componentes de fecha: let d1 = new Date(2012, 1, 20, 3, 12); alert( d1 ); ``` - También podríamos crear una fecha a partir de un string, así: ```js run @@ -17,4 +16,3 @@ También podríamos crear una fecha a partir de un string, así: let d2 = new Date("February 20, 2012 03:12:00"); alert( d2 ); ``` - diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md index 7951be1a7..d292ad9c5 100644 --- a/1-js/06-advanced-functions/01-recursion/article.md +++ b/1-js/06-advanced-functions/01-recursion/article.md @@ -422,7 +422,7 @@ let arr = [obj1, obj2, obj3]; ...Pero hay un problema con los Arrays. Las operaciones "eliminar elemento" e "insertar elemento" son costosas. Por ejemplo, la operación `arr.unshift(obj)` debe renumerar todos los elementos para dejar espacio para un nuevo `obj`, y si la matriz es grande, lleva tiempo. Lo mismo con `arr.shift ()`. -Las únicas modificaciones estructurales que no requieren renumeración masiva son aquellas que operan con el final del Array: `arr.push/pop`. Por lo tanto, una matriz puede ser bastante lenta para grandes colas. +Las únicas modificaciones estructurales que no requieren renumeración masiva son aquellas que operan con el final del Array: `arr.push/pop`. Por lo tanto, una matriz puede ser bastante lenta para grandes colas si tenemos que trabajar con el principio. Alternativamente, si realmente necesitamos una inserción/eliminación rápida, podemos elegir otra estructura de datos llamada [lista enlazada](https://es.wikipedia.org/wiki/Lista_enlazada). diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/solution.js new file mode 100644 index 000000000..8a71c869d --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/solution.js @@ -0,0 +1,3 @@ +function byField(fieldName){ + return (a, b) => a[fieldName] > b[fieldName] ? 1 : -1; +} diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/source.js b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/source.js new file mode 100644 index 000000000..23b433834 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/source.js @@ -0,0 +1,5 @@ +function byField(fieldName){ + + // Your code goes here. + +} diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js new file mode 100644 index 000000000..e3c335e03 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js @@ -0,0 +1,39 @@ +describe("byField", function(){ + + let users = [ + { name: "John", age: 20, surname: "Johnson" }, + { name: "Pete", age: 18, surname: "Peterson" }, + { name: "Ann", age: 19, surname: "Hathaway" }, + ]; + + it("sorts users by name", function(){ + let nameSortedKey = [ + { name: "Ann", age: 19, surname: "Hathaway" }, + { name: "John", age: 20, surname: "Johnson"}, + { name: "Pete", age: 18, surname: "Peterson" }, + ]; + let nameSortedAnswer = users.sort(byField("name")); + assert.deepEqual(nameSortedKey, nameSortedAnswer); + }); + + it("sorts users by age", function(){ + let ageSortedKey = [ + { name: "Pete", age: 18, surname: "Peterson" }, + { name: "Ann", age: 19, surname: "Hathaway" }, + { name: "John", age: 20, surname: "Johnson"}, + ]; + let ageSortedAnswer = users.sort(byField("age")); + assert.deepEqual(ageSortedKey, ageSortedKey); + }); + + it("sorts users by surname", function(){ + let surnameSortedKey = [ + { name: "Ann", age: 19, surname: "Hathaway" }, + { name: "John", age: 20, surname: "Johnson"}, + { name: "Pete", age: 18, surname: "Peterson" }, + ]; + let surnameSortedAnswer = users.sort(byField("surname")); + assert.deepEqual(surnameSortedAnswer, surnameSortedKey); + }); + +}); diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md b/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md index bd57085ea..8b1378917 100644 --- a/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md +++ b/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md @@ -1,22 +1 @@ - -```js run -let users = [ - { name: "John", age: 20, surname: "Johnson" }, - { name: "Pete", age: 18, surname: "Peterson" }, - { name: "Ann", age: 19, surname: "Hathaway" } -]; - -*!* -function byField(field) { - return (a, b) => a[field] > b[field] ? 1 : -1; -} -*/!* - -users.sort(byField('name')); -users.forEach(user => alert(user.name)); // Ann, John, Pete - -users.sort(byField('age')); -users.forEach(user => alert(user.name)); // Pete, Ann, John -``` - diff --git a/1-js/06-advanced-functions/07-new-function/article.md b/1-js/06-advanced-functions/07-new-function/article.md index 1909a36de..8061ad80e 100644 --- a/1-js/06-advanced-functions/07-new-function/article.md +++ b/1-js/06-advanced-functions/07-new-function/article.md @@ -16,6 +16,7 @@ Es más fácil entender viendo un ejemplo: Aquí tenemos una función con dos ar ```js run let sumar = new Function('a', 'b', 'return a + b'); + alert(sumar(1, 2)); // 3 ``` @@ -123,3 +124,8 @@ Estos tres significan lo mismo: ```js new Function('a', 'b', 'return a + b'); // sintáxis básica +new Function('a,b', 'return a + b'); // separación por comas +new Function('a , b', 'return a + b'); // separación por comas con espacios +``` + +Las funciones creadas con `new Function`, tienen `[[Environment]]` haciendo referencia a ambiente léxico global, no al externo. En consecuencia no pueden usar variables externas. Pero eso es en realidad algo bueno, porque nos previene de errores. Pasar parámetros explícitamente es mucho mejor arquitectónicamente y no causa problemas con los minificadores. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js index d2cf8e151..e671438f6 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js @@ -7,8 +7,8 @@ describe("throttle(f, 1000)", function() { } before(function() { - f1000 = throttle(f, 1000); this.clock = sinon.useFakeTimers(); + f1000 = throttle(f, 1000); }); it("the first call runs now", function() { diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index feaad79a9..a551d9709 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -4,7 +4,7 @@ importance: 5 # Decorador throttle -Crea un decorador "throttling" `throttle(f, ms)` -- que devuelve un contenedor. +Crea un decorador "throttling" `throttle(f, ms)` que devuelve un contenedor. Cuando se llama varias veces, pasa la llamada a `f` como máximo una vez por `ms` milisegundos. diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md index e1072e4c7..26bcc1071 100644 --- a/1-js/06-advanced-functions/10-bind/article.md +++ b/1-js/06-advanced-functions/10-bind/article.md @@ -91,14 +91,11 @@ setTimeout(() => user.sayHi(), 1000); // ...el valor de user cambia en 1 segundo - user = { sayHi() { alert("Another user in setTimeout!"); } }; - // Otro user en setTimeout! - ``` La siguiente solución garantiza que tal cosa no sucederá. diff --git a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md index 2dcdf3091..027018186 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md +++ b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md @@ -5,4 +5,4 @@ Esto se debe a que `this` es un objeto antes del punto, por lo que `rabbit.eat() La búsqueda y ejecución de propiedades son dos cosas diferentes. -El método `rabbit.eat` se encuentra primero en el prototipo, luego se ejecuta con `this = rabbit`. \ No newline at end of file +El método `rabbit.eat` se encuentra primero en el prototipo, luego se ejecuta con `this = rabbit`. diff --git a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md index 923c273ee..809b622f6 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md +++ b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md @@ -76,4 +76,4 @@ alert( speedy.stomach ); // manzana // El estómago de Lazy está vacio alert( lazy.stomach ); // ``` -Como solución común, todas las propiedades que describen el estado de un objeto en particular, como el "stomach" anterior, deben escribirse en ese objeto. Eso evita tales problemas. \ No newline at end of file +Como solución común, todas las propiedades que describen el estado de un objeto en particular, como el "stomach" anterior, deben escribirse en ese objeto. Eso evita tales problemas. diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index 1c9017d21..fc3820448 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -330,4 +330,4 @@ Solo operan en el objeto mismo. Las propiedades del prototipo *no* se tienen en - Si queremos leer una propiedad de `obj` o llamar a un método, y no existe, entonces JavaScript intenta encontrarla en el prototipo. - Las operaciones de escritura/eliminación actúan directamente sobre el objeto, no usan el prototipo (suponiendo que sea una propiedad de datos, no un setter). - Si llamamos a `obj.method()`, y `method` se toma del prototipo, `this` todavía hace referencia a `obj`. Por lo tanto, los métodos siempre funcionan con el objeto actual, incluso si se heredan. -- El bucle `for..in` itera sobre las propiedades propias y heredadas. Todos los demás métodos de obtención de valor/clave solo operan en el objeto mismo. \ No newline at end of file +- El bucle `for..in` itera sobre las propiedades propias y heredadas. Todos los demás métodos de obtención de valor/clave solo operan en el objeto mismo. diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md index 5348ad51b..bf1befa26 100644 --- a/1-js/08-prototypes/03-native-prototypes/article.md +++ b/1-js/08-prototypes/03-native-prototypes/article.md @@ -194,4 +194,4 @@ Los métodos de préstamo son flexibles, permiten mezclar funcionalidades de dif - Los métodos se almacenan en el prototipo (`Array.prototype`, `Object.prototype`, `Date.prototype`, etc.) - El objeto en sí solo almacena los datos (elementos de arreglo, propiedades de objeto, la fecha) - Los primitivos también almacenan métodos en prototipos de objetos contenedores: `Number.prototype`, `String.prototype` y `Boolean.prototype`. Solo `undefined` y `null` no tienen objetos contenedores -- Los prototipos integrados se pueden modificar o completar con nuevos métodos. Pero no se recomienda cambiarlos. El único caso permitido es probablemente cuando agregamos un nuevo estándar, pero aún no es compatible con el motor de JavaScript \ No newline at end of file +- Los prototipos integrados se pueden modificar o completar con nuevos métodos. Pero no se recomienda cambiarlos. El único caso permitido es probablemente cuando agregamos un nuevo estándar, pero aún no es compatible con el motor de JavaScript diff --git a/1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md b/1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md index 827cf35e3..d7093c0c3 100644 --- a/1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md +++ b/1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md @@ -1,8 +1,8 @@ -# Error on reading non-existant property +# Error on reading non-existent property -Usually, an attempt to read a non-existant property returns `undefined`. +Usually, an attempt to read a non-existent property returns `undefined`. -Create a proxy that throws an error for an attempt to read of a non-existant property instead. +Create a proxy that throws an error for an attempt to read of a non-existent property instead. That can help to detect programming mistakes early. diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md index ae06a580e..3f7ef63b8 100644 --- a/1-js/99-js-misc/01-proxy/article.md +++ b/1-js/99-js-misc/01-proxy/article.md @@ -662,7 +662,7 @@ In most cases we can do the same without `Reflect`, for instance, reading a prop ### Proxying a getter -Let's see an example that demonstrates why `Reflect.get` is better. And we'll also see why `get/set` have the fourth argument `receiver`, that we didn't use before. +Let's see an example that demonstrates why `Reflect.get` is better. And we'll also see why `get/set` have the third argument `receiver`, that we didn't use before. We have an object `user` with `_name` property and a getter for it. @@ -840,7 +840,7 @@ So there's no such problem when proxying an array. ### Private fields -The similar thing happens with private class fields. +A similar thing happens with private class fields. For example, `getName()` method accesses the private `#name` property and breaks after proxying: @@ -963,7 +963,7 @@ revoke(); alert(proxy.data); // Error ``` -A call to `revoke()` removes all internal references to the target object from the proxy, so they are no more connected. The target object can be garbage-collected after that. +A call to `revoke()` removes all internal references to the target object from the proxy, so they are no longer connected. The target object can be garbage-collected after that. We can also store `revoke` in a `WeakMap`, to be able to easily find it by a proxy object: diff --git a/1-js/99-js-misc/04-reference-type/3-why-this/solution.md b/1-js/99-js-misc/04-reference-type/3-why-this/solution.md index bf516ddcf..e654702b7 100644 --- a/1-js/99-js-misc/04-reference-type/3-why-this/solution.md +++ b/1-js/99-js-misc/04-reference-type/3-why-this/solution.md @@ -2,6 +2,7 @@ Aquí está la explicación. 1. Esta es una llamada común al método del objeto + 2. Lo mismo, aquí los paréntesis no cambian el orden de las operaciones, el punto es el primero de todos modos. 3. Aquí tenemos una llamada más compleja `(expression).method()`. La llamada funciona como si se dividiera en dos líneas: diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index a21773706..80fc46d07 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -22,7 +22,7 @@ function sayHi() { alert("Hola"); } -// Las funciones globales son accesibles como propiedades de window +// Las funciones globales son métodos del objeto global: window.sayHi(); ``` diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md index 01f9f9c71..68bc67215 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/article.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md @@ -215,7 +215,7 @@ Hay otros ejemplos. El atributo `style` es un string, pero la propiedad `style` ``` -Sin embargo, la mayoría de las propiedades son strings. +La mayoría de las propiedades son strings. Muy raramente, incluso si un tipo de propiedad DOM es un string, puede diferir del atributo. Por ejemplo, la propiedad DOM `href` siempre es una URL *completa*, incluso si el atributo contiene una URL relativa o solo un `#hash`. diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 946a8a8be..bf5df9566 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -219,7 +219,6 @@ Por ejemplo, en el código siguiente, el evento `menu-open` se activa durante el Se procesa inmediatamente, sin esperar a que termine el controlador `onclick`: - ```html run autorun @@ -245,6 +244,7 @@ Tenga en cuenta que el evento anidado `menu-open` se captura en `document`. La p No se trata solo de `dispatchEvent`, hay otros casos. Si un controlador de eventos llama a métodos que desencadenan otros eventos, también se procesan sincrónicamente, de forma anidada. + Digamos que no nos gusta. Querríamos que `onclick` se procesara por completo primero, independientemente de `menu-open` o cualquier otro evento anidado. Entonces podemos poner el `dispatchEvent` (u otra llamada de activación de eventos) al final de `onclick` o, mejor aún, envolverlo en el `setTimeout` de retardo cero: diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md index 6222fdb50..0f5bc6de6 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md @@ -6,7 +6,7 @@ Importance: 5 Escribe una función que muestre un tooltip sobre un elemento solamente si el visitante mueve el mouse *hacia él*, pero no *a través de él*. -En otras palabras, si el visitante mueve el mouse hacia el elemento y para ahí -- muestra el tooltip. Y si solamente mueve el mouse a través, entonces no lo necesitamos. ¿Quién quiere parpadeos extra? +En otras palabras, si el visitante mueve el mouse hacia el elemento y para ahí, muestra el tooltip. Y si solamente mueve el mouse a través, entonces no lo necesitamos. ¿Quién quiere parpadeos extra? Tecnicamente, podemos medir la velocidad del mouse sobre el elemento, y si es lenta podemos asumir que el mouse viene "sobre el elemento" y mostramos el tooltip, si es rápida -- entonces lo ignoramos. diff --git a/4-binary/02-text-decoder/article.md b/4-binary/02-text-decoder/article.md index c43c28563..8ea3b76c3 100644 --- a/4-binary/02-text-decoder/article.md +++ b/4-binary/02-text-decoder/article.md @@ -2,7 +2,7 @@ ¿Qué pasa si los datos binarios son en realidad un string? Por ejemplo, recibimos un archivo con datos textuales. -El objeto [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder) nos permite leer el texto de un conjunto de datos binarios y convertirlo en un dato de tipo string de JavaScript, dados el búfer y la codificación. +El objeto incorporado [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder) nos permite leer el texto de un conjunto de datos binarios y convertirlo en un dato de tipo string de JavaScript, dados el búfer y la codificación. Primero necesitamos crearlo: ```js diff --git a/4-binary/04-file/article.md b/4-binary/04-file/article.md index 217a57432..bebbc14dc 100644 --- a/4-binary/04-file/article.md +++ b/4-binary/04-file/article.md @@ -1,6 +1,6 @@ # File y FileReader -Un [File](https://www.w3.org/TR/FileAPI/#dfn-file) hereda de `Blob` y extiende las capacidades relacionadas con el sistema de archivos. +Un objeto [File](https://www.w3.org/TR/FileAPI/#dfn-file) hereda de `Blob` y extiende las capacidades relacionadas con el sistema de archivos. Hay dos maneras de obtenerlo diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md index 36c57aed4..31fb0b8be 100644 --- a/5-network/05-fetch-crossorigin/article.md +++ b/5-network/05-fetch-crossorigin/article.md @@ -329,7 +329,7 @@ fetch('http://another.com', { }); ``` -Now `fetch` sends cookies originating from `another.com` without request to that site. +Now `fetch` sends cookies originating from `another.com` with request to that site. If the server agrees to accept the request *with credentials*, it should add a header `Access-Control-Allow-Credentials: true` to the response, in addition to `Access-Control-Allow-Origin`. diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index a97ff1952..24f63e281 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -7,7 +7,7 @@ Lo que es interesante sobre ellos es que los datos sobreviven a una recarga de p Ya tenemos cookies. ¿Por qué tener objetos adicionales? - Al contrario que las cookies, los objetos de almacenaje web no se envian al servidor en cada petición. Debido a esto, podemos almacenar mucha más información. La mayoría de navegadores permiten almacenar, como mínimo, 2 megabytes de datos (o más) y tienen opciones para configurar éstos límites. -- El servidor no puede manipular los objetos de almacenaje via cabezeras HTTP, todo se hace via JavaScript. +- El servidor no puede manipular los objetos de almacenaje via cabeceras HTTP, todo se hace via JavaScript. - El almacenaje está vinculado al orígen (al triplete dominio/protocolo/puerto). Esto significa que distintos protocolos o subdominios tienen distintos objetos de almacenaje, no pueden acceder a otros datos que no sean los suyos. Ámbos objetos de almacenaje proveen los mismos métodos y propiedades: @@ -19,6 +19,8 @@ Ya tenemos cookies. ¿Por qué tener objetos adicionales? - `key(índice)` -- obtener la clave de una posición dada. - `length` -- el número de ítems almacenados. +Como puedes ver, es como una colección `Map` (`setItem/getItem/removeItem`), pero también permite el accesso a través de index con `key(index)`. + Vamos a ver cómo funciona. ## Demo de localStorage @@ -41,7 +43,7 @@ alert( localStorage.getItem('test') ); // 1 Solo tenemos que estar en el mismo dominio/puerto/protocolo, la url puede ser distinta. -`localStorage` es compartido, de modo que si guardamos datos en una ventana, el cambio es visible en la otra. +`localStorage` es compartido por toda las ventanas del mismo origen, de modo que si guardamos datos en una ventana, el cambio es visible en la otra. ## Acceso tipo Objeto @@ -70,11 +72,11 @@ Esto se permite por razones históricas, y principalmente funciona, pero en gene ## Iterando sobre las claves -Los métodos proporcionan la funcionalidad get / set / remove. ¿Pero cómo conseguimos todas las claves? +Los métodos proporcionan la funcionalidad get / set / remove. ¿Pero cómo conseguimos todas las claves o valores guardados? Desafortunadamente, los objetos de almacenaje no son iterables. -Una opción es utilizar iteración "tipo array": +Una opción es utilizar iteración sobre un array: ```js run for(let i=0; i { +window.onstorage = event => { // igual que en window.addEventListener('storage', () => { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); }; @@ -208,7 +210,7 @@ localStorage.setItem('now', Date.now()); Hay que tener en cuenta que el evento también contiene: `event.url` -- la url del documento en que se actualizaron los datos. -También que `event.storageArea` contiene el objeto de almacenaje -- el evento es el mismo para `sessionStorage` y `localStorage`, de modo que `storageArea` referencia el que se modificó. Podemos hasta querer cambiar datos en él, para "responder" a un cambio. +También que `event.storageArea` contiene el objeto de almacenaje -- el evento es el mismo para `sessionStorage` y `localStorage` --, de modo que `storageArea` referencia el que se modificó. Podemos hasta querer cambiar datos en él, para "responder" a un cambio. **Esto permite que distintas ventanas del mismo orígen puedan intercambiar mensajes.** @@ -232,7 +234,7 @@ API: - `setItem(clave, valor)` -- guarda pares clave/valor. - `getItem(clave)` -- coje el valor de una clave. - `removeItem(clave)` -- borra una clave con su valor. -- `clear()` -- bórralo todo. +- `clear()` -- borra todo. - `key(índice)` -- coje la clave en una posición determinada. - `length` -- el número de ítems almacenados. - Utiliza `Object.keys` para conseguir todas las claves. @@ -241,5 +243,5 @@ API: Evento storage: - Se dispara en las llamadas a `setItem`, `removeItem`, `clear`. -- Contiene todos los datos relativos a la operación, la `url` del documento y el objeto de almacenaje. +- Contiene todos los datos relativos a la operación (`key/oldValue/newValue`), la `url` del documento y el objeto de almacenaje. - Se dispara en todos los objetos `window` que tienen acceso al almacenaje excepto el que ha generado el evento (en una pestaña en el caso de `sessionStorage` o globalmente en el caso de `localStorage`). diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index 523c4fd4a..b3b7c30e7 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -174,7 +174,7 @@ En lugar de x1, y1, x2, y2, x< Por ejemplo, si los puntos de control son `(0,0)`, `(0.5, 1)` y `(1, 0)`, las ecuaciones se convierten en: - x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t -- y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –t2 + 2t +- y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t Ahora como `t` se ejecuta desde `0` a `1`, el conjunto de valores `(x,y)` para cada `t` forman la curva para dichos puntos de control. @@ -184,8 +184,8 @@ Las curvas de Bézier se definen por sus puntos de control. Vimos dos definiciones de curvas de Bézier: -1. Utilizando una fórmula matemática. -2. Utilizando un proceso de dibujo: el algoritmo de De Casteljau. +1. Utilizando un proceso de dibujo: el algoritmo de De Casteljau. +2. Utilizando una fórmula matemática. Buenas propiedades de las curvas de Bezier: diff --git a/7-animation/1-bezier-curve/demo.svg b/7-animation/1-bezier-curve/demo.svg index fbf8e87d5..5240697ee 100644 --- a/7-animation/1-bezier-curve/demo.svg +++ b/7-animation/1-bezier-curve/demo.svg @@ -1 +1,277 @@ - 1 t:1 + + + + + + + + + + + + + + + + + + + + + + + + + +1 + + + + + + +t:1 + + + + diff --git a/8-web-components/1-webcomponents-intro/article.md b/8-web-components/1-webcomponents-intro/article.md index 552c1bd58..958192b92 100644 --- a/8-web-components/1-webcomponents-intro/article.md +++ b/8-web-components/1-webcomponents-intro/article.md @@ -56,7 +56,7 @@ Los componentes pueden tener subcomponentes, p.ej. los mensajes pueden ser parte ¿Cómo decidimos qué es un componente? Eso viene de la intuición, la experiencia y el sentido común. Normalmente es una entidad visual separada que podemos describir en términos de lo que hace y cómo interactua con la página. En el caso anterior, la página tiene bloques, cada uno de ellos juega su propio papel, es lógico crear esos componentes. -Un componentes tiene: +Un componente tiene: - Su propia clase de JavaScript. - La estructura DOM, gestionada únicamente por su clase, el código externo no accede a ella (principio de "encapsulación"). - Estilos CSS, aplicados al componente. diff --git a/LICENSE.md b/LICENSE.md index 60f06924e..acfce9082 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,9 +1,15 @@ -# Attribution-NonCommercial-ShareAlike 4.0 +The tutorial is free to read. -The full license text is at . +If you'd like to do something else with it, please get a permission from Ilya Kantor, iliakan@javascript.info. -You are free to: +As of now, we license the tutorial to almost everyone for free under the terms of an open license. Just please be so kind to contact me. + +## License (Short) + +The license is basically [CC-BY-NC](https://creativecommons.org/licenses/by-nc/4.0/legalcode), revocable and exclusive. + +It gives the right to: - **Share** – copy and redistribute the tutorial in any medium or material. - **Adapt** – remix, transform, and build upon the material. @@ -11,4 +17,147 @@ Under the following terms: - **Attribution** — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. - **NonCommercial** — You may not use the material for commercial purposes. -- **ShareAlike** — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original. + +## License (Legal) + +By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this license ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. + +### Section 1 – Definitions. + +a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. + +b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License. + +c. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. + +d. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. + +e. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. + +f. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License. + +g. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. + +h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License. + +i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange. + +j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. + +k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. + +l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. + +### Section 2 – Scope. + +a. ___License grant.___ + + 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: + + A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and + + B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only. + + 2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. + + 3. __Term.__ The term of this Public License is specified in Section 6(a). + + 4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material. + + 5. __Downstream recipients.__ + + A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. + + B. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. + + 6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). + +b. ___Other rights.___ + + 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. + + 2. Patent and trademark rights are not licensed under this Public License. + + 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes. + +### Section 3 – License Conditions. + +Your exercise of the Licensed Rights is expressly made subject to the following conditions. + +a. ___Attribution.___ + + 1. If You Share the Licensed Material (including in modified form), You must: + + A. retain the following if it is supplied by the Licensor with the Licensed Material: + + i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); + + ii. a copyright notice; + + iii. a notice that refers to this Public License; + + iv. a notice that refers to the disclaimer of warranties; + + v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable; + + B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and + + C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. + + 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. + + 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. + + 4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License. + +### Section 4 – Sui Generis Database Rights. + +Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: + +a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only; + +b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and + +c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. + +For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. + +### Section 5 – Disclaimer of Warranties and Limitation of Liability. + +a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__ + +b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__ + +c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. + +### Section 6 – Term and Termination. + +a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. + +b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: + + 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or + + 2. upon express reinstatement by the Licensor. + + For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. + +c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. + +d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License. + +### Section 7 – Other Terms and Conditions. + +a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. + +b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. + +### Section 8 – Interpretation. + +a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. + +b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. + +c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. + +d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. diff --git a/README.md b/README.md index 1fd79ca95..a40303feb 100755 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ Hemos acordado un glosario para la consistencia de las traducciones, por favor, Si desea hacer seguimiento al trabajo realizado en este repositorio, saber más a cerca de como contribuir, o presentarte al equipo, le invitamos a que se una a nuestro servidor: [Discord](https://discord.gg/mcsMcHN) +See for the details. + # Como contribuir ## 1. Ingresar a la siguiente página: [es.javascript.info](https://github.com/javascript-tutorial/es.javascript.info/issues/17) @@ -200,3 +202,6 @@ Please don't translate or remove the `[#...]` part, it's for URL anchors. You can run the tutorial server locally to see how the translation looks. The server and install instructions are at . + +♥ +Ilya Kantor @iliakan diff --git a/TRANSLATION.md b/TRANSLATION.md deleted file mode 100644 index 83402a602..000000000 --- a/TRANSLATION.md +++ /dev/null @@ -1,64 +0,0 @@ -# Translation Style Guide - -This document describes rules that should be applied to **all** languages. - -NOTE TO MAINTAINERS: You may want to translate this guide so that it can be more accessible to your translators. - -## General - -The translation doesn't have to be word-by-word precise. - -It should be technically correct and explain well. - -If you feel the original text could be improved, please send a PR. - -## Text in Code Blocks - -- Translate comments in code blocks. -- Don't translate strings, variable names, ids, classes, etc. - -Example: - -```js -// Example -const text = "Hello, world"; -document.querySelector('.hello').innerHTML = text; -``` - -✅ DO (translate comment): - -```js -// Ejemplo -const text = 'Hello, world'; -document.querySelector('.hello').innerHTML = text; -``` - -❌ DON'T (translate string or class): - -```js -// Ejemplo -const text = 'Hola mundo'; -// ".hello" is a class -// DO NOT TRANSLATE -document.querySelector('.hola').innerHTML = text; -``` - -## External Links - -If an external link is to Wikipedia, e.g. https://en.wikipedia.org/wiki/JavaScript, and a version of that article exists in your language that is of decent quality, consider linking to that version instead. - -Example: - -```md -[JavaScript](https://en.wikipedia.org/wiki/JavaScript) is a programming language. -``` - -✅ OK (en -> es): - -```md -[JavaScript](https://es.wikipedia.org/wiki/JavaScript) es un lenguaje de programación. -``` - -For links to MDN, that are only partially translated, also use the language-specific version. - -If a linked article has no translated version, leave the link "as is". diff --git a/css.md b/css.md new file mode 100644 index 000000000..6a6316e69 --- /dev/null +++ b/css.md @@ -0,0 +1,4 @@ + +# CSS for JS developers + +- Outline diff --git a/figures.sketch b/figures.sketch index c740ac577..dfba26425 100644 Binary files a/figures.sketch and b/figures.sketch differ