Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 58 additions & 60 deletions 1-js/01-getting-started/1-intro/article.md
Original file line number Diff line number Diff line change
@@ -1,122 +1,120 @@
# Una introducción a JavaScript
# Una Introducción a Javascript

Veamos que tiene de especial JavaScript, que podemos lograr con este lenguaje y que otras tecnologías se integran bien con él.
Veamos qué tiene de especial JavaScript, qué podemos conseguir con él y qué otras tecnologías funcionan bien con él.

## ¿Qué es JavaScript?
## Qué es JavaScript?

_JavaScript_ Fue creado para _"dar vida a la páginas web"_.
*JavaScript* fue creado inicialmente para *"dar vida a la páginas web"*.

Los programas en este lenguaje son llamados _scripts_. Se pueden escribir directamente en el HTML de una página web y ejecutarse automáticamente a medida que se carga la página.
Los programas en este lenguaje se llaman *scripts*. Pueden ser escritos directamente en el HTML de una página web y ejecutados automáticamente a medida que la página se carga.

Los scripts se proporcionan y ejecutan como texto plano. No necesitan preparación especial o compilación para correr.
Los scripts se presentan y ejecutan como texto plano. No necesitan preparación o compilación especial para ejecutarse.

En este aspecto, JavaScript es muy diferente de otro lenguaje llamado [Java](<https://es.wikipedia.org/wiki/Java_(lenguaje_de_programaci%C3%B3n)>).
En este aspecto, JavaScript es muy diferente a otro lenguaje llamado [Java](https://es.wikipedia.org/wiki/Java_(lenguaje_de_programación))).

```smart header="¿Por qué <u>Java</u>Script?"
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.
Cuando se creó JavaScript, inicialmente tenía otro nombre: "LiveScript". Pero Java era muy popular en esa época, así que se decidió que posicionar un nuevo lenguaje como el "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 para nada relación con Java.
Pero a medida que evolucionó, JavaScript se convirtió en un lenguaje totalmente independiente con su propia especificación denominada [ECMAScript](https://es.wikipedia.org/wiki/ECMAScript), y ahora no tiene ninguna relación con Java en absoluto.
```

Hoy, JavaScript puede ejecutarse no solo en los navegadores, sino también en servidores o incluso en cualquier dispositivo que cuente con un programa especial llamado [El motor o intérprete de JavaScript](https://es.wikipedia.org/wiki/Int%C3%A9rprete_de_JavaScript).
Hoy en día, JavaScript puede ejecutarse no sólo en el navegador, sino también en el servidor, o en cualquier dispositivo que tenga un programa especial llamado [el motor de JavaScript] (https://es.wikipedia.org/wiki/Int%C3%A9rprete_de_JavaScript).

El navegador tiene un motor embebido a veces llamado una "Máquina virtual de JavaScript".
El navegador tiene un motor embebido a veces llamado "máquina virtual de JavaScript".

Diferentes motores tienen diferentes "nombres en clave". Por ejemplo:

- [V8](https://es.wikipedia.org/wiki/Chrome_V8) -- en Chrome y Opera.
- [SpiderMonkey](https://es.wikipedia.org/wiki/SpiderMonkey) -- en Firefox.
- ...Existen otros nombres en clave como "Trident" and "Chakra" para diferentes versiones de IE (Internet Explorer), "ChakraCore" para Microsoft Edge, "Nitro" y "SquirrelFish" para Safari, etc.

Los términos anteriores es bueno recordarlos porque son usados en artículos para desarrolladores en internet. También los usaremos. Por ejemplo, si "la característica X es soportada por V8", entonces probablemente funciona en Chrome y Opera.
- ...Existen otros nombres en clave como "Trident" y "Chakra" para diferentes versiones de IE, "ChakraCore" para Microsoft Edge, "Nitro" y "SquirrelFish" para Safari, etc.

```smart header="¿Como trabajan los motores?"
Los términos anteriores, es bueno recordarlos porque se utilizan en artículos para desarrolladores en Internet. Nosotros los usaremos también. Por ejemplo, si "una característica X es soportada por V8", entonces probablemente funcione en Chrome y Opera.

Los motores son complicados, pero los fundamentos son fáciles.
```smart header="¿Cómo funcionan los motores?"

1.- El motor (embebido si es un navegador) lee ("analiza") el script.
2.- Entonces convierte ("compila") el script a lenguaje máquina.
3.- y por último el código maquina se ejecuta muy rápido.
Los motores son complicados. Pero los fundamentos son sencillos.

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.
1. El motor (embebido si es un navegador) lee ("analiza") el script.
2. Luego convierte ("compila") el script al lenguaje máquina.
3. Y entonces el código máquina se ejecuta, bastante rápido.

El motor aplica optimizaciones en cada paso del proceso. Incluso observa el script compilado mientras se ejecuta, analiza los datos que fluyen a través de él y aplica optimizaciones al código máquina basadas en ese conocimiento. Cuando está hecho, los scripts se ejecutan bastante rápido.
```

## ¿Qué puede hacer JavaScript en el navegador?
## ¿Qué puede hacer JavaScript dentro del navegador?

JavaScript moderno es un lenguaje de programación "seguro". No proporciona acceso de bajo nivel a la memoria o la CPU (UCP), ya que se creó inicialmente para los navegadores los cuales no lo requieren.
El JavaScript moderno es un lenguaje de programación "seguro". No proporciona acceso de bajo nivel a la memoria o a la CPU, ya que fue creado inicialmente para navegadores que no lo requieren.

Las capacidades de JavaScript dependen en gran medida en el entorno en que se ejecuta. Por ejemplo, [Node.JS (https://es.wikipedia.org/wiki/Node.js) Soporta funciones que permiten a JavaScript leer y escribir archivos arbitrariamente, realizar solicitudes de red, etc.
Las capacidades de Javascript dependen en gran medida del entorno en el que se ejecuta. Por ejemplo, [Node.JS](https://es.wikipedia.org/wiki/Node.js) soporta funciones que le permiten a JavaScript leer/escribir archivos arbitrarios, realizar peticiones de red, etc.

En el navegador JavaScript puede realizar cualquier cosa relacionada con la manipulación de una página web, interacción con el usuario y el servidor web.
JavaScript en el navegador puede hacer todo lo relacionado con manipulación de páginas web, la interacción con el usuario y el servidor web.

Por ejemplo, en el navegador JavaScript es capaz de:
Por ejemplo, JavaScript en el navegador es capaz de:

- Agregar nuevo HTML a la página, cambiar el contenido existente y modificar estilos.
- Reaccionar a las acciones del usuario, ejecutarse con los clics del ratón, movimientos del puntero y al oprimir teclas.
- Enviar solicitudes de red a servidores remotos, descargar y cargar archivos (Tecnologías llamadas [AJAX](https://es.wikipedia.org/wiki/AJAX) y [COMET](https://es.wikipedia.org/wiki/Comet)).
- Obtener y configurar cookies, hacer preguntar al visitante y mostrar mensajes.
- Agregar nuevo HTML a la página, cambiar el contenido existente, modificar estilos.
- Reaccionar a las acciones del usuario, ejecutarse ante clics del ratón, movimientos del puntero, pulsaciones de teclas.
- Enviar solicitudes a través de la red a servidores remotos, descargar y cargar archivos (las llamadas tecnologías [AJAX](https://es.wikipedia.org/wiki/AJAX) y [COMET](https://es.wikipedia.org/wiki/Comet)).
- Obtener y establecer cookies, hacer preguntas al visitante, mostrar mensajes.
- Recordar datos en el lado del cliente con el almacenamiento local ("local storage").

## ¿Qué no puede hacer JavaScript en el navegador?
## ¿Qué NO puede hacer JavaScript en el navegador?

Las habilidades de JavaScript en el navegador están limitadas por el bien de la seguridad de usuario. El objetivo es prevenir el acceso de información privada o dañar los datos de usuario por parte de una página maliciosa.
Las capacidades de JavaScript en el navegador están limitadas por el bien de la seguridad del usuario. El objetivo es evitar que una página web malintencionada acceda a información privada o perjudique los datos del usuario.

Ejemplos de tales restricciones incluyen:

- JavaScript en el navegador no puede leer y escribir arbitrariamente archivos en el disco duro, copiarlos o ejecutar programas. No tiene acceso directo a funciones del Sistema operativo (OS).

Los navegadores mas modernos le permiten trabajar con archivos, pero el acceso es limitado y solo permitido si el usuario realiza ciertas acciones, como "arrastrar" un archivo a la ventana del navegador o seleccionarlo por medio de una etiqueta `<input`>.
- JavaScript en una página web no puede leer/escribir arbitrariamente archivos en el disco duro, copiarlos o ejecutar programas. No tiene acceso directo a las funciones del sistema operativo.

Existen maneras de interactuar con la cámara, micrófono y otros dispositivos, pero eso requiere el permiso explicito del usuario. Por lo tanto, una página habilitada para JavaScript no puede habilitar una cámara web para observar el entorno y enviar la información a la [NSA](https://es.wikipedia.org/wiki/Agencia_de_Seguridad_Nacional).
Los navegadores modernos le permiten trabajar con archivos, pero el acceso es limitado y sólo se proporciona si el usuario realiza ciertas acciones, como "soltar" un archivo en una ventana del navegador o seleccionarlo mediante una etiqueta `<input>`.

- Diferentes pestañas y ventanas generalmente no se conocen entre sí. A veces si lo hacen, por ejemplo, cuando una ventana usa JavaScript para abrir otra. Pero incluso en este caso, JavaScript no puede acceder a la otra si provienen de diferentes sitios. (De diferente dominio, protocolo o puerto).
Hay formas de interactuar con la cámara/micrófono y otros dispositivos, pero requieren el permiso explícito del usuario. Por lo tanto, no es posible que una página con JavaScript habilite sigilosamente una cámara web, observe el entorno y envíe la información a la [NSA] (https://es.wikipedia.org/wiki/Agencia_de_Seguridad_Nacional).
- Las diferentes pestañas/ventanas generalmente no se conocen entre sí. A veces lo hacen, por ejemplo cuando una ventana utiliza JavaScript para abrir la otra. Pero incluso en este caso, no es posible que JavaScript de una página pueda acceder a la otra si provienen de sitios diferentes (de un dominio, protocolo o puerto diferente).

Esto es conocido como "política del mismo origen" ("Same Origin Policy"). Para evitar eso, ambas páginas deben contener código especial de JavaScript que permita manejar el intercambio de datos.
Esto se denomina "Política de Mismo Origen". Para evitarlo, *ambas páginas* deben contener un código JavaScript especial que se encargue del intercambio de datos.

Esta limitación es, de nuevo, para la seguridad del usuario. Una página de `http://anysite.com` la cual el usuario ha abierto no debe ser capaz de acceder a otra pestaña del navegador con la URL `http://gmail.com` y robar información de esta otra página.
Esta limitación es, una vez más, para la seguridad del usuario. Una página de `http://cualquiersitio.com` que un usuario haya abierto no debe poder acceder a otra pestaña del navegador con la URL ``http://gmail.com` y robar información de allí.
- JavaScript puede comunicarse fácilmente a través de la red con el servidor de donde proviene la página actual. Pero su capacidad para recibir datos de otros sitios/dominios está paralizada. Aunque es posible, requiere un acuerdo explícito (expresado en cabeceras HTTP) desde el lado remoto. Una vez más, es una limitación de seguridad.

- JavaScript puede fácilmente comunicarse a través de la red con el servidor de donde esta página proviene. Pero su capacidad para recibir información de otros sitios y dominios esta bloqueada. Aunque sea posible, esto requiere un acuerdo explícito (expresado en los encabezados HTTP) desde el sitio remoto. Una vez más, esto es una limitación de seguridad.
![](limitaciones.png)

![](limitations.png)
Tales limitaciones no existen si JavaScript se utiliza fuera del navegador, por ejemplo, en un servidor. Los navegadores modernos también permiten complementos/extensiones que pueden solicitar permisos extendidos.

Tales limitaciones no existen si JavaScript es usado fuera del navegador, por ejemplo, en un servidor. Los navegadores modernos también permiten complementos y extensiones que pueden preguntar por permisos extendidos.
## ¿Qué hace que JavaScript sea único?

## ¿Qué hace a JavaScript único?

Existen al menos _tres_ geniales cosas acerca de JavaScript:
Hay por lo menos *tres* grandes cosas de JavaScript:

```compare
+ Completa integración con HTML y CSS..
+ Las cosas simples se hacen simplemente.
+ Integración completa con HTML/CSS.
+ Las cosas simples se hacen de manera sencilla.
+ Soportado por la mayoría de los navegadores y habilitado por defecto.
```
Javascript es la única tecnología de navegador que combina estas tres cosas.

JavaScript es la única tecnología de los navegadores que combina estas tres cosas.

Eso es lo que hace a JavaScript único. Eso es el porqué es la herramienta mas extendida para crear interfaces de navegador.
Eso es lo que hace único a JavaScript. Por eso es la herramienta más extendida para crear interfaces de navegador.

Al planificar aprender una nueva tecnología, es beneficioso revisar sus perspectivas. Así que vamos a movernos a las tendencias modernas que lo afectan, incluyendo nuevos lenguajes y capacidades del navegador.

## Lenguajes "por arriba de" JavaScript

La sintaxis de JavaScript no se ajusta para las necesidades de todos. Personas diferentes quieren diferentes características.
La sintaxis de JavaScript no se ajusta a las necesidades de todos. Diferentes personas quieren diferentes características.

Eso es de esperarse, porque los proyectos y requerimientos son diferentes para cada persona.
Eso es de esperar, porque los proyectos y los requisitos son diferentes para cada uno.

Así que recientemente a aparecido una abundancia de nuevos lenguajes, los cuales son _Convertidos_ / _Transpilados_ (transpiled) a JavaScript antes de ser ejecutados en el navegador.
Así que recientemente ha aparecido una plétora de nuevos lenguajes, los cuales son *transpilados* (convertidos) a JavaScript antes de ser ejecutados en el navegador.

Las herramientas modernas hacen la conversión (Transpilation) muy rápido y transparente, permitiendo a los desarrolladores codificar en otros lenguajes y convertirlo automáticamente detrás de escena.
Las herramientas modernas hacen que la transpilación sea muy rápida y transparente, permitiendo a los desarrolladores programar en otro lenguaje y convertirlo automáticamente detrás de escena.

Ejemplos de tales lenguajes:
Ejemplos de estos lenguajes:

- [CoffeeScript](http://coffeescript.org/) Es una "sintaxis azucarada" [syntactic sugar](https://es.wikipedia.org/wiki/Az%C3%BAcar_sint%C3%A1ctico) para JavaScript. Introduce una sintaxis corta, permitiéndonos escribir un código mas claro y preciso. Usualmente desarrolladores de Ruby prefieren este lenguaje.
- [TypeScript](http://www.typescriptlang.org/) se concentra en agregar "tipado estricto" ("strict data typing") para simplificar el desarrollo y soporte de sistemas complejos. Es desarrollado por Microsoft.
- [Dart](https://www.dartlang.org/) es un lenguaje independiente que tiene su propio motor que corre en entornos que no son los navegadores (como aplicaciones móviles). Fue inicialmente ofrecido por Google como un remplazo para JavaScript, pero a partir de ahora, los navegadores requieren que este sea convertido (transpiled) a JavaScript igual que los anteriores.
- [CoffeeScript](http://coffeescript.org/) una "sintaxis azucarada" [syntactic sugar] para JavaScript. Introduce una sintaxis más corta, lo que nos permite escribir un código más claro y preciso. Normalmente, a los programadores de Ruby les gusta.
- [TypeScript](http://www.typescriptlang.org/) se concentra en añadir "escritura de datos estricta" para simplificar el desarrollo y el soporte de sistemas complejos. Es desarrollado por Microsoft.
- [Dart](https://www.dartlang.org/) es un lenguaje independiente que tiene su propio motor que funciona en entornos que no son navegadores (como las aplicaciones móviles). Inicialmente fue ofrecido por Google como un reemplazo de JavaScript, pero a partir de ahora, los navegadores requieren que sea transpilado a JavaScript como los de arriba.

Hay mas. Por supuesto, incluso si nosotros usamos alguno de estos lenguajes, deberíamos conocer también JavaScript para realmente entender que está pasando.
Hay más. Por supuesto, incluso si usamos uno de estos lenguajes, también deberíamos conocer JavaScript para entender realmente lo que estamos haciendo.

## Resumen

- JavaScript fue inicialmente creado como un lenguaje solo para el navegador, pero ahora es usado también en muchos otros entornos.
- Hoy en día, JavaScript tiene una posición única como el lenguaje más extendido y adoptado de navegador, con una integración completa con HTML y CSS.
- Existen muchos lenguajes que se convierten "transpiled" a JavaScript y aportan ciertas características. Es recomendable echarles un vistazo, al menos brevemente, después de dominar JavaScript.
- JavaScript fue creado inicialmente como un lenguaje sólo para navegadores, pero ahora también es utilizado en muchos otros entornos.
- Hoy en día, JavaScript tiene una posición única como el lenguaje para navegadores más ampliamente utilizado con plena integración con HTML/CSS.
- Existen muchos lenguajes que se "transpilan" a JavaScript y proporcionan ciertas características. Se recomienda echarles un vistazo, al menos brevemente, después de dominar JavaScript.