2c:null 2d:["$","title",null,{"children":"Введение в HTML | Сандро | Observable"}] 32:[] 30:{"id":"7c8a4599bba2e9d7","slug":"html","title":"Введение в HTML","thumbnail":"1e2882db655e61c1f72371afe1bd181bd242d5c62531a9c8e88ff3b69b299c07","access_level":"public","create_time":"$D2018-07-14T06:49:30.645Z","update_time":"$D2020-08-15T14:33:25.251Z","view_time":null,"first_public_time":"$D2018-07-14T10:10:17.097Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0a9c12baacff9b60","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":"starter_2024"},"version":610,"publish_version":610,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Введение в HTML","cells":[{"id":0,"value":"md`# Введение в HTML\n\nВо [введении в код](https://beta.observablehq.com/@warsan/untitled) мы посмотрели на ячейки, которые возвращают структуры данных, такие как числа, строки, массивы и объекты. Но что, если мы хотим интерактивную визуализацию? Или, если на то пошло, только какой-то текст?\n\nЕсли ячейка возвращает элемент DOM, этот элемент DOM отображается как есть!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`

Я - элемент параграфа!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`Или напрямую использовать DOM API W3C (не совсем то, что вам нужно - это довольно многословно):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n const p = document.createElement(\"p\");\n p.appendChild(document.createTextNode(\"Я также \"));\n p.appendChild(document.createElement(\"i\")).appendChild(document.createTextNode(\"параграфа\"));\n p.appendChild(document.createTextNode(\" элемент!\"));\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`Еще лучше, вы можете написать Markdown:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`Я тоже элемент *параграфа*.` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"md`или ссылку [Введение в ноутбуки](https://beta.observablehq.com/d/038e3ea161f84e82)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Markdown поддерживает множество стилей и структурных элементов, таких как списки и таблицы. См. [Руководство GitHub для Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) для получения дополнительной информации.\n\nПоскольку все ячейки в Observable являются JavaScript, «ячейка Markdown» является только ячейкой JavaScript Markdown [шаблонный литерал с тегами](http://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals) - Ячейки Markdown и HTML могут быть динамическими: вы можете вставлять выражения \\`\\${…}\\` в шаблонные литералы. Например, любимый номер ниже генерируется случайным образом.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`Мой любимый номер ${Math.random() * 100 | 0}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`Встроенные выражения также могут быть узлами DOM. Это позволяет встраивать динамический контент, такой как небольшие диаграммы в SVG или математические нотации в LaTeX, в Markdown.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`Мне нравится Markdown для прозы, но ${tex`\\KaTeX`} для математики.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`График ${граф([0, 8, 3, 2, 6, 5, 1, 9, 1, 9])} представляет собой диаграмму, содержащую прозу.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"function граф(values, width = 128, height = 27) {\n const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);\n const context = DOM.context2d(width, height);\n const line = d3.line().x((d, i) => x(i)).y(y).context(context);\n context.beginPath(), line(values), context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`И, конечно же, Markdown тоже может быть реактивным! Встроенная [стандартная библиотека](https://beta.observablehq.com/@warsan/n) Observable \\`now\\` является реактивной переменной, значение которой является текущим временем. Таким образом, включение ссылки на \\`now\\` заставляет Markdown постоянно его оценивать:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`Текущее время ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`Вы можете манипулировать DOM, сгенерированным из Markdown с помощью JavaScript, скажем, чтобы добавить динамический и статический контент. Текст ниже проходит через схему радуги D3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"{\n const p = md`Раздражающие радуги - это самые *лучшие* радуги.`;\n p.style.color = d3.interpolateRainbow(now / 1000);\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`Другим распространенным типом динамического контента является Canvas. Стандартный метод библиотеки DOM.context2d возвращает CanvasRenderingContext2D указанной ширины и высоты (и автоматического масштабирования для дисплеев с высоким разрешением). Нарисуйте контекст, а затем верните холст, чтобы отобразить его в записной книжке.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"{\n const context = DOM.context2d(128, 128);\n for (let radius = 8; radius < 128; radius += 8) {\n context.beginPath();\n context.arc(0, 0, radius, 0, 2 * Math.PI);\n context.stroke();\n }\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`Или, как SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`Часто для создания динамического содержимого используется вспомогательная библиотека, например [D3](https://d3js.org). Мы рассмотрим сторонние библиотеки более подробно позже во введении, но вот быстрый пример, создающий красочные концентрические круги в SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"{\n // Создать квадрат

Я - выделенный параграф.

\n \n Показать сюрприз.\n \n \n

`;\n div.querySelector(\"#toggle\").onclick = () => {\n div.querySelector(\"#surprise\").style.display = (show = !show) ? \"block\" : \"none\";\n div.dispatchEvent(new CustomEvent(\"update\"));\n };\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`Ячейка может вернуть элемент DOM, который уже отображается в другом месте страницы. В этом случае используется инспектор значений, вместо того, чтобы показывать элемент inline.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"slider // Этот слайдер уже виден выше!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`В то время как этот ноутбук дает лишь поверхностный обзор типа контента, который вы можете поместить в ноутбук Observable, мы надеемся, что он дает представление о множестве возможностей, предоставляемых современной сетью.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"