2a:T4a1,md`Los notebooks de Observable consisten en [celdas JavaScript](/@emmanueliarussi/1-1-programando-con-observable). Pueden ver el código de cualquier celda haciendo click en el el margen izquierdo, o clickeando **Edit** en el menú de la celda . (Muchas de las celdas de este notebook están marcadas con un pin en negro, lo que indica que su código fuente es visible.) Después de editar, pueden ejecutar el contenido de la celda aprendando Shift+Enter o haciendo click en el boton de play .`2b:[] 29:{"title":"1.0 ¿Qué es Observable?","cells":[{"id":0,"value":"md`# 1.0 ¿Qué es Observable?\n\nPequeño notebook editable para demostrar las capacidades de Observable!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"1 + 1 // Editame!","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`Para operaciones más complejas (de más de una línea), como ciclos, el código debe estar envuelto por llaves \\`{…}\\`. El valor de retorno se muestra en la parte superior de la celda.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"{\n var sum = 0;\n for (let i = 0; i < 100; ++i) {\n sum += i;\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`Las celdas pueden tener nombres, permitiendo que su valor sea referenciado (utilizado) por otras celdas. Una celda que referencia a otra se [re-ejecuta automáticamente](/@observablehq/how-observable-runs) cuando cambia el valor de la celda referenciada.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"color = \"rojo\" // Editame para ver como cambian los valores en ambas celdas.","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"`Mi color favorito es el ${color}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"md` Las celdas, además, les permiten inspeccionar el contenido de objetos y arreglos haciendo click en ellos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"letras = { return \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\"); }","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`Las celdas pueden generar elementos DOM (Document Object Model). Veremos eso en más detalle en el [siguiente notebook](/@emmanueliarussi/1-2-introduccion-a-html). En general podemos incrustar elementos HTML como SVG, Canvas o WebGL.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"html`

Mi lenguaje favorito es \n HTML.\n

` // span-tag: https://www.w3schools.com/tags/tag_span.asp","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`Podemos incrustar el contenido de otras celdas dentro de un elemento html. Por ejemplo, la celda de abajo refiere a la celda *color*, y se va a actualizar si cambiamos el valor de la celda *color* de arriba.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"html`Mi color favorito es el ${color}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`Es posible cargar datos adjuntando archivos o usando la [API de Fetch](https://developer.mozilla.org/es/docs/Web/API/Fetch_API). En este ejemplo cargamos el archivo *json* existente en esta dirección: [https://raw.githubusercontent.com/vega/vega/v4.3.0/docs/data/cars.json](https://raw.githubusercontent.com/vega/vega/v4.3.0/docs/data/cars.json):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"cars = fetch(\"https://raw.githubusercontent.com/vega/vega/v4.3.0/docs/data/cars.json\")\n .then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`También es posible escribir funciones para reutilizar código.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"function saludar(nombre) {\n return `Hola ${nombre}!`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"saludar(\"Susana\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`Las celdas también pueden ser [generadoras](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/yield), actualizando valores hasta 60 veces por segundo. Una celda que hacer referencia a un generador, se ejecuta automáticamente cada vez que el generador devuelve un nuevo valor. Este tipo de celdas nos serán de utilidad para controlar animaciones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"c = {\n for (let i = 0; true; ++i) {\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`Actualmente *c = ${c}*.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`Es posible utilizar los generadores en conjunción con elementos HTML, como el área de dibujo o [canvas](https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D), para crear animaciones. Hagan click en el boton de play en la esquina superior derecha para comenzar.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"{\n const height = 13; // altura del canvas\n const context = DOM.context2d(width, height); // canvas, área de dibujo\n for (var i = 0; i < width; ++i) {\n const t = i / width;\n const r = Math.floor(255 * Math.sin(Math.PI * (t + 0 / 3)) ** 2); \n const g = Math.floor(255 * Math.sin(Math.PI * (t + 1 / 3)) ** 2);\n const b = Math.floor(255 * Math.sin(Math.PI * (t + 2 / 3)) ** 2);\n context.fillStyle = `rgb(${r},${g},${b})`;\n context.fillRect(i, 0, 1, height);\n yield context.canvas; // generador\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`Es posible utilizar componentes interactivos dentro de una celda. A continuación, una celda toma su valor a partir del contenido de un slider.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof slider = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"sliderValue = slider","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`También es posible reusar código importando celdas de otros notebooks! A continuación importamos la celda tweet de [este notbook](https://observablehq.com/@mbostock/tweet) que nos permite incrustar un tweet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"tweet(\"1772313532962410518\") // ID del tweet","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}