23:null 24:["$","title",null,{"children":"Пятиминутное введение | Сандро | Observable"}] 29:[] 27:{"id":"e5939138791172f1","slug":"untitled/3","title":"Пятиминутное введение","thumbnail":"e1639c4310c4d1571da8b4967200f804b3a5a75e68a4ad396e9f0e3144132f6e","access_level":"public","create_time":"$D2018-07-14T03:29:14.517Z","update_time":"$D2019-02-17T14:18:39.258Z","view_time":null,"first_public_time":"$D2019-02-17T14:19:13.069Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"0a9c12baacff9b60","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":"starter_2024"},"version":405,"publish_version":405,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a697b2116f96092","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":null}],"members":[{"type":"individual","id":"3a697b2116f96092","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Пятиминутное введение","cells":[{"id":0,"value":"md`# Пятиминутное введение\n\nДобро пожаловать в Observable! Этот ноутбук дает быстрый, но технический обзор функций Observable. Несколько более подробное введение см. в разделе [Введение в ноутбуки](https://beta.observablehq.com/d/038e3ea161f84e82) а также [вводная серия учебников](https://beta.observablehq.com/collection/introduction). Если вы хотите смотреть, а не читать, мы также опубликовали [короткое введение в видео](https://www.youtube.com/watch?v=uEmDwflQ3xE)!\n\nНаблюдаемый ноутбук представляет собой последовательность ячеек. Каждая ячейка является фрагментом JavaScript. Вы можете видеть (и редактировать!) код для любой ячейки, нажимая на каретку в левом поле. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"2 * 3 * 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"{\n let sum = 0;\n for (let i = 0; i <= 100; ++i) {\n sum += i;\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`Клетки могут иметь имена. Это позволяет ссылаться на значение ячейки с других ячеек.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"color = \"red\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"`Мой любимый цвет - ${color}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`Ячейка, ссылающаяся на другую ячейку, автоматически переоценивается при изменении ссылочного значения. Попробуйте отредактировать определение *color* выше и shift-return для повторной оценки.\n\nЯчейки могут создавать DOM (HTML, SVG, Canvas, WebGL, *и т. д.*). Вы можете использовать стандартный DOM API, такой как *document*.createElement, или использовать встроенный *html* помеченный шаблонный литерал:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"html`\n Мой любимый язык - HTML.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`Также есть тег шаблона с отметкой Markdown. (Этот ноутбук написан на Markdown.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`Мой любимый язык - *Markdown*.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`DOM можно сделать реактивной, просто обратившись к другим ячейкам. Следующая ячейка ссылается на *color*. (Попробуйте отредактировать определение *color* выше.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"html`Мой любимый цвет - ${color}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`Иногда вам нужно загружать данные с удаленного сервера или вычислять что-то дорогое в веб-работнике. Для этого ячейки можно определить асинхронно, используя [promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"status = new Promise(resolve => {\n setTimeout(() => {\n resolve({resolved: new Date});\n }, 2000);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`Ячейка, которая ссылается на ячейку обещания, видит значение, когда оно разрешено; это неявное ожидание означает, что ссылку на ячейки не волнует, является ли значение синхронным или нет. Отредактируйте ячейку *status* выше, чтобы увидеть ячейку ниже обновлённой через две секунды.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"status","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`Обещания также полезны для загрузки библиотек из числа npm. Ниже \\`require\\` возвращает обещание, которое разрешает библиотеку d3-fetch:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"d3 = require(\"d3-fetch@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`Если вы предпочитаете, вы можете использовать async и ждать явно:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"countries = (await d3.tsv(\"https://unpkg.com/world-atlas@1/world/110m.tsv\"))\n .sort((a, b) => b.pop_est - a.pop_est) // Сортировать по убыванию населения.\n .slice(0, 10) // Возьмите первую десятку.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`Клетки можно определить как [generators](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators); значение выдаётся до шестидесяти раз в секунду.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"i = {\n let i = 0;\n while (true) {\n yield ++i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"`Текущее значение i равно ${i}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`Любая ячейка, которая ссылается на ячейку генератора, видит свое текущее значение; ссылочная ячейка повторно оценивается всякий раз, когда генератор дает новое значение. Как вы могли догадаться, генератор может дать обещания для [async iteration](https://github.com/tc39/proposal-async-iteration); где ссылающиеся ячейки видят текущее разрешенное значение.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"date = {\n while (true) {\n yield new Promise(resolve => {\n setTimeout(() => resolve(new Date), 1000);\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`Объединяя эти примитивы-обещания генераторов и DOM - вы можете создавать пользовательские интерфейсы. Вот ползунок и генератор, дающий значение ползунка:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"slider = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"sliderValue = Generators.input(slider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`Generators.input возвращает генератор, дающий обещания. Обещание разрешается всякий раз, когда связанный входной элемент испускает входное событие. Однако вам не нужно реализовывать этот генератор вручную. Существует встроенный оператор viewof, который предоставляет текущее значение данного элемента ввода:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof value = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`Вы можете импортировать ячейки из других ноутбуков. Чтобы продемонстрировать, как пользовательские интерфейсы могут выставлять произвольные значения другим ячейкам, можно использовать щеточный планшет автомобилей, демонстрирующий обратную зависимость между мощностью и топливной экономичностью.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"import {viewof selection as cars} from \"@mbostock/d3-brushable-scatterplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"cars","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`${Array.from(new Set(cars.map(c => c.name)))\n .sort()\n .map(c => `* ${c}`)\n .join(\"\\n\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W29","stdlib":"1"}} 28:"$27:body"