Skip to content

Commit

Permalink
Merge pull request #49 from UlisesGascon/dev
Browse files Browse the repository at this point in the history
v1.0.1
  • Loading branch information
UlisesGascon committed Jan 9, 2019
2 parents 5fc5112 + eba2868 commit 588b19b
Show file tree
Hide file tree
Showing 17 changed files with 144 additions and 68 deletions.
7 changes: 7 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@
> *Linus Torvalds*

### En otros idiomas

Este libro originalmente fue escrito en [español](https://leanpub.com/javascript-inspirate), pero ha sido traducido por la comunidad a los siguientes idiomas:

- [Gallego](https://leanpub.com/javascript-inspirate-gallego). Gracias a [Yoel Macia Delgado](https://github.com/ymdx)


### Acerca de este libro

#### Un libro de programación sencillo y divertido que nos muestra como programar en JavaScript desde cero.
Expand Down
2 changes: 1 addition & 1 deletion manuscript/capitulo1.txt
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ G> - *[Facebook en 2015](http://web.archive.org/web/20150731235552/https://faceb

## El largo camino del Developer

Este esquemático *[mapa mental](https://coggle.it/diagram/WF5nS6mGe9w7iwoZ)*, puede ayudaros a visualizar lo que esta ocurriendo hoy en día en la web, y comprender como los profesionales de la industria, hemos ido migrando de nombres y funciones hasta donde estamos ahora mismo, que no es definitivo y lógicamente seguirá evolucionando.
Este esquemático *[mapa mental](https://coggle.it/diagram/WF5nS6mGe9w7iwoZ)*, puede ayudaros a visualizar lo que está ocurriendo hoy en día en la web, y comprender como los profesionales de la industria, hemos ido migrando de nombres y funciones hasta donde estamos ahora mismo, que no es definitivo y lógicamente seguirá evolucionando.

### Una historia de evolución

Expand Down
38 changes: 19 additions & 19 deletions manuscript/capitulo10.txt
Original file line number Diff line number Diff line change
Expand Up @@ -70,19 +70,19 @@ Las funciones, especialmente como *[parámetro (callback)](https://es.wikipedia.

{lang=js}
~~~~~~~
var miFuncion = function(){
console.log("Hola!");
}
var miFuncion = function(){
console.log("Hola!");
}

function otraFunción() {
console.log("Hola de nuevo!");
}
function otraFunción() {
console.log("Hola de nuevo!");
}

var obj = {
metodo: function () {
console.log("Hola... ahora como método!");
}
}
var obj = {
metodo: function () {
console.log("Hola... ahora como método!");
}
}

miFuncion();
otraFunción();
Expand Down Expand Up @@ -266,7 +266,7 @@ pruebaArgumentos (1, "vale", true);
~~~~~~~

T> Conversión array requiere de ciertos conocimientos avanzados en el uso de
T> *[protoype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)* y
T> *[prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)* y
T> *[this](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/this)*. Os
T> dejo una función que os ayudará a realizar esta conversión de una forma fácil.
T>
Expand Down Expand Up @@ -387,7 +387,7 @@ W> *linter* como *[JSHint](http://jshint.com/)* o *[ESLint](http://eslint.org/)*

## Funciones Anónimas

En JavaScript podemos crear tantas funciones como queramos, sin embargo entre los requisitos de creación no esta incluir un nombre necesariamente.
En JavaScript podemos crear tantas funciones como queramos, sin embargo entre los requisitos de creación no está incluir un nombre necesariamente.

### Funciones que retornan funciones

Expand Down Expand Up @@ -448,7 +448,7 @@ Lo contenido en el primer paréntesis contiene el código encapsulado, al igual
El segundo paréntesis es el encargado de ejecutar el bloque de código anterior, asi es como logramos que la función sea inmediatamente ejecutada dentro de un ámbito al que no podremos acceder.


Como podemos, ver la estructura básica sería algo así:
Como podemos ver, la estructura básica sería algo así:

{lang=js}
~~~~~~~
Expand Down Expand Up @@ -612,9 +612,9 @@ Veamos un ejemplo, un poco condensado. Os ayudaré comentando el código:
*/
var quieroCallback = function(p1, callback){
// Consideramos el callback como algo opcional.
if ((callback){
if (callback){
// Validamos si es una función o no.
if (typeof callback === 'function')){
if (typeof callback === 'function'){
/*
De ser una función lo ejecutamos y
y pasamos como argumento "p1"
Expand Down Expand Up @@ -644,7 +644,7 @@ I> **La naturaleza de la Asincronía**
I>
I> Hasta ahora todo el código que vimos se ejecutaba de una manera lógica,
I> previsible y secuencial.
I> Cada línea de código era ejecutada después de la anterior, tardará lo que tardrá.
I> Cada línea de código era ejecutada después de la anterior, tardará lo que tardará.
I> Este estilo de programación es ineficiente y bloqueante, lo que en el mundo de
I> la web es intolerable.
I>
Expand All @@ -653,7 +653,7 @@ I> ejecución en un segundo plano.
I> De tal forma que resulta imposible saber cuando terminarán y además antes de terminar su ejecucción se ejecutan la siguiente línea de código.


Cuando en JavaScript se habla de asincronía, lo que realmente esta ocurriendo es que dejamos de ejecutar partes de nuestro script de manera secuencial. Esto crea un efecto curioso que tiene como consecuencia, un script muy escalable y rápido, ya que el sistema no espera a que algo termine para seguir ejecutando el resto del script.
Cuando en JavaScript se habla de asincronía, lo que realmente está ocurriendo es que dejamos de ejecutar partes de nuestro script de manera secuencial. Esto crea un efecto curioso que tiene como consecuencia, un script muy escalable y rápido, ya que el sistema no espera a que algo termine para seguir ejecutando el resto del script.

I> La mala noticia, es que recaerá en el lector todo el peso de controlar esos caballos
I> desbocados.
Expand Down Expand Up @@ -756,7 +756,7 @@ traigoDatos(pintoDatos);
Algunas soluciones a este problema:

- No anidar en exceso... ¿Has oído hablar de la *[complejidad ciclomática](https://es.wikipedia.org/wiki/Complejidad_ciclom%C3%A1tica)*?.
- Cualquier anidación de funciones a más de dos o tres niveles esta pidiendo a gritos una refactorización.
- Cualquier anidación de funciones a más de dos o tres niveles está pidiendo a gritos una refactorización.
- No todas las funciones de tu código han de ser anónimas...
- Modularizar y refactorizar son tus dos mejores amigos en JavaScript.
- Gestiona los errores en cada función y no al final de la pila.
Expand Down
10 changes: 5 additions & 5 deletions manuscript/capitulo11.txt
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ A la hora de trabajar con el navegador fuera de la consola, disponemos básicame

JavaScript

: Que es lo que intentamos aprender a lo largo de este libro, y que nos permite en esencia programar sobre la web que esta renderizada en el cliente.
: Que es lo que intentamos aprender a lo largo de este libro, y que nos permite en esencia programar sobre la web que está renderizada en el cliente.


BOM
Expand Down Expand Up @@ -59,11 +59,11 @@ history.forward();
### *[window.navigator](https://developer.mozilla.org/es/docs/Web/API/Navigator)*


Es un API que nos permite sacar gran cantidad de información sobre la máquina donde se esta ejecutando nuestro script. Incluso dispone de algunos métodos tan interesantes como *[Navigator.vibrate()](https://developer.mozilla.org/es/docs/Web/API/Navigator/vibrate)*, que permite hacer vibrar el dispositivo (siempre que sea compatible).
Es un API que nos permite sacar gran cantidad de información sobre la máquina donde se está ejecutando nuestro script. Incluso dispone de algunos métodos tan interesantes como *[Navigator.vibrate()](https://developer.mozilla.org/es/docs/Web/API/Navigator/vibrate)*, que permite hacer vibrar el dispositivo (siempre que sea compatible).

En el siguiente ejemplo, hacemos una lectura de gran información del sistema y además hacemos un par de cálculos interesantes para confirmar el nivel de batería.

En la línea 28 hemos utilizado una *[promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa)*, ya que *[navigator.getBattery()](https://developer.mozilla.org/es/docs/Web/API/Navigator/getBattery) lo requiere así. Recuerda que esta es otra de las formas válidas, que existen para manejar la asincronía.*
En la línea 28 hemos utilizado una *[promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa)*, ya que *[navigator.getBattery()](https://developer.mozilla.org/es/docs/Web/API/Navigator/getBattery) lo requiere así. Recuerda que ésta es otra de las formas válidas, que existen para manejar la asincronía.*



Expand Down Expand Up @@ -322,7 +322,7 @@ Veamos como se utilizan algunos selectores avanzados de CSS3:

{lang=css}
~~~~~~~
a[href*="leanpub"] {
a[href*="google.es"] {
color:orange;
}
~~~~~~~
Expand Down Expand Up @@ -726,7 +726,7 @@ Básicamente crearemos un objeto con los métodos *agregar* y *quitar* vacíos.

Es un poco más de trabajo de lo esperado, pero así es mucho mas sencillo gestionar nuestra aplicación, ya que nuestros métodos se adaptarán y no así nuestro código.

El valor añadido de usar este patrón esta, en que en un solo punto tomo una decisión que se extenderá por toda nuestra aplicación.
El valor añadido de usar este patrón está en que en un solo punto tomo una decisión que se extenderá por toda nuestra aplicación.

{lang=js}
~~~~~~~
Expand Down
22 changes: 10 additions & 12 deletions manuscript/capitulo12.txt
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,13 @@ Estos códigos de estado pueden dividirse en cinco categorías principales:
Siendo especialmente importantes para nosotros, los 4xx y los 5xx, ya que nos indican errores que están sucediendo y esto seguramente derive en un tráfico de datos erróneo.


I> Aquí podéis encontrar la *[lista completa](https://es.wikipedia.
I> org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP)* y la *[especificación](https://tools.ietf.
I> org/html/rfc2616#section-10)*.
I> Aquí podéis encontrar la *[lista completa](https://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP)*
I> y la *[especificación](https://tools.ietf.org/html/rfc2616#section-10)*.


W> **Misterioso estado 418**
W>
W> Existen algunos códigos tan increíbles como *[418. I´m a teapot](http://www.josevazquez.net/codigo
W> -de-estado-http-418-i%C2%B4m-a-teapot/)*.
W> Existen algunos códigos tan increíbles como *[418. I´m a teapot](http://www.josevazquez.net/codigo-de-estado-http-418-i%C2%B4m-a-teapot/)*.


## Trabajando con APIs
Expand All @@ -84,8 +82,8 @@ Esto permite conseguir datos (peticiones GET), actualizar datos (peticiones PUT)
En la mayoría de los casos, el intercambio de información entre el cliente y servidor se realiza utilizando un formato de intercambio de datos conocido como JSON y no XML como antiguamente. De todo esto hablaremos a lo largo de este último capítulo.


I> Para ilustrar un poco el ejemplo, te invito a visitar *[jsonplaceholder](https://jsonplaceholder.
I> typicode.com/)* que es una especie de *[Lorem Ipsum](https://es.wikipedia.org/wiki/Lorem_ipsum)*
I> Para ilustrar un poco el ejemplo, te invito a visitar *[jsonplaceholder](https://jsonplaceholder.typicode.com/)*
I> que es una especie de *[Lorem Ipsum](https://es.wikipedia.org/wiki/Lorem_ipsum)*
I> para peticiones Ajax.


Expand All @@ -112,14 +110,14 @@ Petición DELETE a *api.loremblog.com/posts/hello*


I> Partiendo de esta filosofía, podremos atrevernos con muchas APIs, tan divertidas como [Twitter](
I> https://dev.twitter.com/), *[Facebook](https://developers.facebook.com/)*, *[Spotify](https://
I> developer.spotify.com/web-api/)* e incluso *[Yahoo!](https://developer.yahoo.com/everything.html)*
I> https://dev.twitter.com/), *[Facebook](https://developers.facebook.com/)*,
I> *[Spotify](https://developer.spotify.com/web-api/)* e incluso *[Yahoo!](https://developer.yahoo.com/everything.html)*



## Peticiones AJAX

Ya hemos visto que las peticiones Ajax son la esencia en la web de hoy, pero siempre que las utilicemos, debemos recordar, que nosotros somos consumidores/generadores de datos y que nuestra aplicación, esta dependiendo de manera permanente de otros sistemas.
Ya hemos visto que las peticiones Ajax son la esencia en la web de hoy, pero siempre que las utilicemos, debemos recordar, que nosotros somos consumidores/generadores de datos y que nuestra aplicación, está dependiendo de manera permanente de otros sistemas.

Esto quiere decir, que puede haber errores en su código, que hagan que las respuestas a nuestras peticiones no traigan los datos como esperamos. Por tanto, tendremos que hacer un esfuerzo adicional para validar todos los datos que recibimos. En ocasiones la documentación sobre la API, puede ser poco precisa o estar desfasada... dejándonos en una situación muy comprometida.

Expand All @@ -145,7 +143,7 @@ Respuesta 204

Respuesta 401

: *No autorizado*. Hemos olvidado utilizar el token. O nuestro token no esta correctamente configurado.
: *No autorizado*. Hemos olvidado utilizar el token. O nuestro token no está correctamente configurado.


Respuesta 403
Expand Down Expand Up @@ -318,7 +316,7 @@ Y por ello, cualquier petición que hagamos desde el navegador cliente no podrá

La mejor solución, es comunicarnos con los responsables de la API y facilitarles *[este link](http://enable-cors.org/index.html)*, donde *[Monsur Hossain](http://monsur.hossa.in/)* y *[Michael Hausenblas](http://mhausenblas.info/)*, explican como realizar las configuraciones adecuadas en muchos entornos.

Si por desgracia esta opción esta descartada, no pasa nada.... existen más posibilidades.
Si por desgracia esta opción está descartada, no pasa nada.... existen más posibilidades.

La primera y más útil es crear/configurar/usar un *[proxy](https://es.wikipedia.org/wiki/Servidor_proxy)*. La idea del proxy, es que realice una petición capturando esos datos y enviándolos de nuevo, teniendo CORS habilitado en la cabecera, de tal forma que podremos hacer peticiones Ajax, aunque tengamos que pasar por nuestro servidor.

Expand Down
8 changes: 4 additions & 4 deletions manuscript/capitulo2.txt
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ I> **Fiero veterano**
I>
I> En este capítulo, hablaremos sobre como es la computación y que se espera de un
I> desarrollador.
I> Si ya dominaís algun lenguaje de programación o sencillamente quiereís empezar ya mismo con JavaScript... pasad al siguiente capítulo.
I> Si ya dominaís algún lenguaje de programación o sencillamente queréis empezar ya mismo con JavaScript, pasad al siguiente capítulo.


## Un mundo de máquinas
Expand Down Expand Up @@ -163,7 +163,7 @@ Para que la lógica del sistema pueda decidir, necesitamos reducir todo a compar
- Operaciones lógicas

* La variable "nombreUsuario" es igual a "Pepe"
* La variable "nombreUsuario" no esta vacía
* La variable "nombreUsuario" no está vacía


A la hora de representar las opciones. *[PseInt](http://pseint.sourceforge.net/)* nos da dos opciones principales. La estructura *Si.. entonces* y *Según*, la diferencia en este contexto está en función del número de opciones.
Expand Down Expand Up @@ -272,7 +272,7 @@ Instrucciones

- **While (Mientras)**

Esta pensado para aquellos bucles que requieran de una condición lógica y no matemática para validar la iteracción.
Está pensado para aquellos bucles que requieran de una condición lógica y no matemática para validar la iteracción.


T> Aunque lógicamente podremos mezclar entre las diversas condiciones (matemáticas y lógicas).
Expand Down Expand Up @@ -306,7 +306,7 @@ Instrucciones

- **For (Para)**

Esta diseñado específicamente para trabajar con series de números (longitud de cadena, elementos de un array, propiedades de un objeto, etc...) y nos provee de una estructura más sencilla para gestionar el flujo.
Está diseñado específicamente para trabajar con series de números (longitud de cadena, elementos de un array, propiedades de un objeto, etc...) y nos provee de una estructura más sencilla para gestionar el flujo.

- En Pseudocódigo:

Expand Down
2 changes: 1 addition & 1 deletion manuscript/capitulo3.txt
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,7 @@ I> En el caso de depuración y prototipado de código puede ser un recurso muy

{lang=js}
~~~~~~~
confirm("¿Esta seguro que desea abandonar esta web?");
confirm("¿Está seguro que desea abandonar esta web?");
~~~~~~~

Ejemplo:
Expand Down
2 changes: 1 addition & 1 deletion manuscript/capitulo4.txt
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ El *operador ternario (?:)* nos ofrece una manera propia de hacer estructuras co

Este operador simplifica mucho la sintaxis propia de los condicionales, pero se desaconseja su uso para operaciones o evaluaciones múltiples.

I> Si estas empezando con JavaScript, debes tener en cuenta, que es un operador que resulta difícil
I> Si estás empezando con JavaScript, debes tener en cuenta, que es un operador que resulta difícil
I> de recordar al principio. Siendo bastante común su uso especialmente en proyectos desarrollados
I> con Node.js.

Expand Down
6 changes: 3 additions & 3 deletions manuscript/capitulo5.txt
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Para el caso que os preocupe el rendimiento de vuestros bucles os dejo *[este li

El primer bucle que veremos está específicamente diseñado para funcionar de manera constante, mientras una condición dada siga cumpliéndose.

Este bucle esta pensado para simplificarnos la sintaxis cuando el control del bucle no se realiza mediante operaciones matemáticas (mayor que... menor que...).
Este bucle está pensado para simplificarnos la sintaxis cuando el control del bucle no se realiza mediante operaciones matemáticas (mayor que... menor que...).

### Funcionamiento

Expand Down Expand Up @@ -240,7 +240,7 @@ for (var i = 0; i < 10; i++) {

### Exprimiendo el For

Si dominamos las tres partes básicas que componen el bucle *for*, podemos plantearnos estructuras tan complejas como esta.
Si dominamos las tres partes básicas que componen el bucle *for*, podemos plantearnos estructuras tan complejas como ésta.

{lang=js}
~~~~~~~
Expand All @@ -258,7 +258,7 @@ T> una buena práctica.

### No refactorizar

En ocasiones, el código evoluciona y no repasamos lo que habíamos construido previamente... llegando a situaciones tan monstruosas como esta.
En ocasiones, el código evoluciona y no repasamos lo que habíamos construido previamente... llegando a situaciones tan monstruosas como ésta.

* Antes de refactorizar:

Expand Down
6 changes: 3 additions & 3 deletions manuscript/capitulo6.txt
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@ Hacemos una recopilación simplificada de los métodos más utilizados, aunque e

{lang=js}
~~~~~~~
Math.floor(20.5); // 21
Math.floor(20.5); // 20
Math.floor(20.49); // 20
Math.floor(-20.51); // -21
~~~~~~~
Expand Down Expand Up @@ -416,7 +416,7 @@ W> modificaciones (año, día del mes, etc..).
{lang=js}
~~~~~~~
var ahora = new Date();
console.log("Con UTC: ";
console.log("Con UTC: ");
console.log("==== FECHA ====");
console.log("El año: " + ahora.getUTCFullYear()); // 4 dígitos
console.log("El mes: " + ahora.getUTCMonth()); // 0 - 11
Expand Down Expand Up @@ -473,7 +473,7 @@ Los setters en el caso de las fechas están planteados como una manera de ajusta

Debes tener en cuenta las leyes naturales: un día tiene 24 horas, un mes tiene un máximo de 31 días...

Si obviamos esta lógica, JavaScript improvisa una nueva fecha, pero esta no suele ser correcta.
Si obviamos esta lógica, JavaScript improvisa una nueva fecha, pero ésta no suele ser correcta.


{lang=js}
Expand Down
4 changes: 2 additions & 2 deletions manuscript/capitulo8.txt
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ Hacemos una recopilación simplificada de los métodos más utilizados, aunque e
console.log(amigos.toString());
~~~~~~~

- ***[.toLocalString()](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString)***
- ***[.toLocaleString()](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString)***

Retorna como string (configuración regional) todos los elementos.

Expand Down Expand Up @@ -369,7 +369,7 @@ Hacemos una recopilación simplificada de los métodos más utilizados, aunque e
console.info("frutas.length:", frutas.length); // 2
~~~~~~~

Si deseamos conservar en un variable aquellos elementos que hemos eliminado, es necesario hacer una asignación como esta:
Si deseamos conservar en un variable aquellos elementos que hemos eliminado, es necesario hacer una asignación como ésta:

{lang=js}
~~~~~~~
Expand Down

0 comments on commit 588b19b

Please sign in to comment.