{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Javascript en el navegador\n",
    "\n",
    "## Historia y evolución de JavaScript y ECMAScript\n",
    "\n",
    "### Orígenes de JavaScript\n",
    "\n",
    "1. **Mocha**: \n",
    "   - JavaScript se inició bajo el nombre de **Mocha**. Fue desarrollado por Brendan Eich en Netscape Communications en 1995. Mocha fue el nombre original durante las primeras etapas de desarrollo.\n",
    "\n",
    "2. **LiveScript**:\n",
    "   - Antes de ser conocido como JavaScript, el lenguaje fue renombrado a **LiveScript**. Este nombre se utilizó durante un breve período en 1995.\n",
    "\n",
    "3. **JavaScript**:\n",
    "   - Finalmente, en diciembre de 1995, el lenguaje fue renombrado a **JavaScript**. Este cambio de nombre se debió a una estrategia de marketing para asociarlo con el popular lenguaje de programación Java, a pesar de que JavaScript y Java son muy diferentes en su diseño y propósito.\n",
    "\n",
    "### Estándar ECMAScript\n",
    "\n",
    "A partir de 1997, el **World Wide Web Consortium (W3C)** y **ECMA International** comenzaron a definir las especificaciones del lenguaje JavaScript bajo el nombre de **ECMAScript**. Este estándar asegura la interoperabilidad y la compatibilidad del lenguaje en distintos navegadores y plataformas. El W3C se encarga también de otros protocolos y lenguajes estándar, incluso de principios éticos: https://www.w3.org/TR/ethical-web-principles/ \n",
    "\n",
    "#### Sintaxis y Influencias\n",
    "\n",
    "La sintaxis de JavaScript se inspira en lenguajes como **C** y **Java**. Sin embargo, JavaScript es fundamentalmente diferente en su propósito y funcionalidad:\n",
    "- **C**: Influye en la estructura básica y la sintaxis de control (bucles, condiciones).\n",
    "- **Java**: Inspira la sintaxis de los objetos y la programación orientada a objetos.\n",
    "\n",
    "### Versiones Importantes de ECMAScript\n",
    "\n",
    "1. **ECMAScript 5th Edition (ES5)**:\n",
    "   - Publicada en diciembre de 2009.\n",
    "   - Esta versión es **soportada por todos los navegadores actuales**.\n",
    "   - Introdujo características clave como el \"strict mode\", métodos de array adicionales (como `forEach`, `map`, `filter`), y mejoras en el manejo de objetos.\n",
    "\n",
    "2. **ECMAScript 2015 (ES6)**:\n",
    "   - También conocida como **ES6**, fue publicada en junio de 2015.\n",
    "   - Es una de las actualizaciones más importantes del lenguaje, incorporando muchas características nuevas que facilitan y modernizan el desarrollo en JavaScript:\n",
    "     - **Clases**: Simplifican la sintaxis para la programación orientada a objetos.\n",
    "     - **Módulos**: Permiten la importación y exportación de bloques de código, mejorando la modularidad y reutilización.\n",
    "     - **Iteradores y Generadores**: Facilitan el manejo de datos iterables.\n",
    "     - **Funciones Flecha**: Proveen una sintaxis más corta para las funciones y cambian el comportamiento del `this`.\n",
    "     - **Declaraciones `let` y `const`**: Introducen alcance de bloque y constantes.\n",
    "     - **Promesas**: Manejan la asincronía de manera más efectiva y legible.\n",
    "\n",
    "3. **ECMAScript 2024**:\n",
    "   - Es la **última especificación** y trae consigo las actualizaciones más recientes.\n",
    "\n",
    "> En este libro se introducen instrucciones y conceptos posteriores al ES6, el cual debería ser el estándard mínimo con el que trabajaremos. Hay código ES6 que no se puede ejecutar ni transpilar fácilmente a ES5. \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Integrar JS en HTML\n",
    "\n",
    "En primer lugar, veamos cómo integrar Javascript en el HTML para que se ejecute en el navegador:\n",
    "\n",
    "\n",
    "```html\n",
    "     <!-- Integración de JavaScript directamente en el HTML -->\n",
    "    <script type=\"text/javascript\">\n",
    "        // Este es un bloque de código JavaScript embebido directamente en el documento HTML.\n",
    "        // Funciona para pequeños bloques en webs tradicionales. No recomendable en SPAs\n",
    "        console.log(\"Hola, este es un mensaje desde JavaScript embebido.\");\n",
    "    </script>\n",
    "\n",
    "    <!-- Integración de un archivo JavaScript externo -->\n",
    "    <script type=\"text/javascript\" src=\"scripts.js\"></script>\n",
    "\n",
    "    <!-- Mensaje para navegadores que no soportan JavaScript -->\n",
    "    <noscript>\n",
    "        <p>Tu navegador no soporta JavaScript o está desactivado.</p>\n",
    "    </noscript>\n",
    "\n",
    "    <!-- Comentario: Muchas veces, los desarrolladores colocan los scripts al final del documento para asegurarse de que todo el contenido HTML se haya cargado antes de ejecutar el JavaScript. -->\n",
    "```\n",
    "\n",
    "### Atributos `async` y `defer` en la Etiqueta `<script>`\n",
    "\n",
    "A partir de HTML5, la etiqueta `<script>` admite dos atributos, `async` y `defer`, que permiten que los scripts comiencen su descarga inmediatamente sin interrumpir el proceso de parseo del documento HTML.\n",
    "\n",
    "```{figure} ./imgs/asyncdefer.jpeg\n",
    "---\n",
    "scale: 100%\n",
    "align: center\n",
    "---\n",
    "Diagrama del funcionamiento de Async o Defer.  \n",
    "```\n",
    "\n",
    "#### `async`\n",
    "\n",
    "El atributo `async` permite que el script se ejecute de manera asíncrona tan pronto como se haya descargado. Esto significa que:\n",
    "\n",
    "- El script se descargará en paralelo con el parseo del documento.\n",
    "- Se ejecutará tan pronto como la descarga haya terminado, sin esperar a que el documento se haya parseado por completo.\n",
    "- Los scripts marcados con `async` pueden no ejecutarse en el orden en el que aparecen en el documento HTML, ya que la ejecución depende de cuál script se descargue primero.\n",
    "\n",
    "Ejemplo:\n",
    "\n",
    "```html\n",
    "<script src=\"scripts.js\" async></script>\n",
    "```\n",
    "\n",
    "#### `defer`\n",
    "\n",
    "El atributo `defer` asegura que los scripts se ejecutarán en el orden en el que aparecen en el documento HTML. Las características de `defer` incluyen:\n",
    "\n",
    "- El script se descarga en paralelo con el parseo del documento, similar a `async`.\n",
    "- La ejecución del script se pospone hasta que el documento se haya parseado completamente.\n",
    "- La ejecución ocurre justo antes del evento `DOMContentLoaded`, pero después de que todo el HTML haya sido procesado.\n",
    "\n",
    "Ejemplo:\n",
    "\n",
    "```html\n",
    "<script src=\"scripts.js\" defer></script>\n",
    "```\n",
    "\n",
    "#### Sin `async` ni `defer`\n",
    "\n",
    "Si un script no tiene ninguno de estos atributos, el comportamiento por defecto es que el script se descarga y se ejecuta de manera síncrona. Esto significa que:\n",
    "\n",
    "- El parseo del documento se pausa hasta que el script haya sido descargado y ejecutado completamente.\n",
    "- Los scripts se ejecutan en el orden en que aparecen en el documento.\n",
    "\n",
    "Ejemplo:\n",
    "\n",
    "```html\n",
    "<script src=\"scripts.js\"></script>\n",
    "```\n",
    "\n",
    "En cualquier caso, salvo ocasiones específicas, suele ser más fácil añadir un sólo script, trabajar con módulos y esperar al evento `DOMContentLoaded`.\n",
    "\n",
    "## Comprobar que funciona\n",
    "\n",
    "Los navegadores modernos vienen con una consola de depuración muy avanzada que permite interactuar con el DOM, el CSS, el JS, la red, entre otras cosas. La abriremos con F12 o el botón derecho y la mantendremos abierta casi todo el tiempo. \n",
    "\n",
    "```{figure} ./imgs/f12.png\n",
    "---\n",
    "scale: 75%\n",
    "align: center\n",
    "---\n",
    "Lo que se ve si pulsamos F12.  \n",
    "```\n",
    "\n",
    "Podemos ejecutar algo como:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "typescript"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "hola mundo\n"
     ]
    }
   ],
   "source": [
    "console.log(\"hola mundo\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Ocultar el código JavaScript\n",
    "\n",
    "\n",
    "**No es posible ocultar completamente el código JavaScript.** El código que se ejecuta en el lado del cliente (es decir, en el navegador web) siempre puede ser visto por los usuarios, ya que se descarga junto con el resto del contenido de la página web.\n",
    "\n",
    "Aunque no se puede ocultar el código, sí se pueden utilizar técnicas para **ofuscar** y **comprimir** el código JavaScript. Estas técnicas dificultan la lectura y comprensión del código por parte de personas, aunque no lo hacen completamente inaccesible.\n",
    "\n",
    "Tal vez, por eso, muchos proyectos de JS son directamente publicados como **Open Source**\n",
    "\n",
    "El siguiente código es un ejemplo:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "typescript"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello World!\n"
     ]
    }
   ],
   "source": [
    "var _0x47a0=['log','Hello\\x20World!']; (function (_0x558f55,_0x47a08a){var _0x257f99= function (_0x256ed6) \n",
    "{while(--_0x256ed6) {_0x558f55['push'] (_0x558f55['shift']()); }};_0x257f99(++_0x47a08a);}\n",
    "(_0x47a0,0x1cb));var _0x257f =function(_0x558f55,_0x47a08a){_0x558f55=_0x558f55-0x0;\n",
    "var _0x257f99=_0x47a0[_0x558f55];return _0x257f99;};function hi(){console[_0x257f('0x1')](_0x257f('0x0'));}hi();\n"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}