Для веб-разработчиков (не нормативно) element.innerText [ = value ] Возвращает текстовое содержимое элемента «в том виде, в каком оно было отображено». Можно установить, чтобы заменить дочерние элементы на заданное значение, но с разрывами строк, преобразованными в элементы br. element.outerText [ = value ] Возвращает текстовое содержимое элемента «в том виде, в каком оно было отображено». Можно […]
Способ № 1 - Через интерфейс DOMParser Стандарт DOM Parsing and Serialization - https://www.w3.org/TR/DOM-Parsing/ описывает интерфейс DOMParser, у которого есть метод parseFromString(str, type) Первым параметром метод принимает строку, которая по сути является полноценной разметкой HTML-страницы. Вторым параметром метод принимает тип распознавания для будущего документа. Это один из: "text/html" "text/xml" "application/xml" […]
Объекты, реализующие интерфейс CanvasPath, имеют путь. Путь (path) имеет список из нуля или более подпутей. Каждый подконтур состоит из списка из одной или нескольких точек, соединенных прямыми или сегменты изогнутой линии (curved line segments), и флага, указывающего, является ли подконтур закрытым или нет. Замкнутый подконтур — это тот, в котором […]
Объекты, реализующие интерфейс CanvasState, поддерживают стек состояний рисования. Состояния чертежа (Drawing states) состоят из: Текущая матрица преобразования. Текущая область отсечения. Текущие значения следующих атрибутов: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, filter, globalCompositeOperation, font, textAlign, textBaseline, direction, letterSpacing, fontKerning, fontStretch, fontVariantCaps, textRendering, wordSpacing, imageSmoothingEnabled, imageSmoothingQuality. Текущий список тире. Примечание Растровые изображения контекста визуализации не являются частью состояния рисования, поскольку они зависят от того, привязан ли контекст визуализации к элементу холста […]
Этот раздел не является нормативным. Выходное растровое изображение, когда оно не отображается непосредственно пользовательским агентом, реализации могут вместо обновления этого растрового изображения просто запоминать последовательность операций рисования, которые были применены к нему до тех пор, пока не потребуются фактические данные растрового изображения (например, из-за вызова drawImage() или фабричного метода createImageBitmap()). […]
Абстрактная операция EnumerateObjectProperties (Перечислить Свойства Объекта) принимает аргумент O (объект Object). При вызове она выполняет следующие шаги: 1. Вернуть объект Iterator (27.1.1.2), метод next которого выполняет итерацию по всем ключам со значением String перечислимых (enumerable) свойств O. Объект итератора никогда не доступен напрямую для кода ECMAScript. Механика и порядок перечисления […]
Цикл for in в JavaScript затрагивает несколько концепций, которые на первый взгляд могут быть не очевидны при быстром изучении языка. В них обязательно нужно разобраться. Надеюсь эта публикация откроет глаза на лучшее понимание работы языка JavaScript. В чём основная суть работы цикла for in? Цикл for in - это […]
2.6.2.1 Интерфейс HTMLAllCollection 3.1.4 Отчёт о статусе загрузки документа 4.8.5 Элемент iframe 4.12.5 Элемент canvas 4.12.5.1.1 Замечания по реализации 4.12.5.1.2 Состояние холста 4.12.5.1.3 Стили линий 4.12.5.1.4 Стили текста 4.12.5.1.5 Строительные пути 4.12.5.1.11 Нанесение текста на растровое изображение 4.12.5.1.15 Манипуляции с пикселями 4.12.5.1.17 Сглаживание изображения 4.12.5.6 Безопасность с элементами […]
Для веб-разработчиков (не нормативно) document.readyState Возвращает: "loading" (загрузка) во время загрузки объекта документа Document, "interactive" (интерактивный) после завершения синтаксического анализа, но по-прежнему загружает подресурсы, "complete (завершённый) после загрузки. Событие readystatechange запускается для объекта Document при изменении этого значения. Событие DOMContentLoaded срабатывает после перехода в режим "interactive" (интерактивный), но до […]
Шаги сбора отображаемого текста (rendered text collection steps), заданные узлом node, следующие: 1. Пусть элементы items будут результатом выполнения шагов сбора отрендеренного текста с каждым дочерним узлом node в порядке дерева, а затем объединения результатов в один список. 2. Если вычисленное значение "видимости" узла node не является "видимым", верните элементы […]
Шаги геттера innerText и externalText: 1. Если объект контекста (this) не отображается или если пользовательский агент не является пользовательским агентом CSS, верните текстовое содержимое потомка объекта контекста (this). Примечание Этот шаг может привести к неожиданным результатам, так как при вызове средства получателя innerText для элемента, который не визуализируется, возвращается его […]
За перенос строки на новую линию отвечают специальные символы: возврат каретки - CARRIAGE RETURN (CR) перенос строки - LINE FEED (LF) Смысл в том, что это именно два символа, а не один. Как правило. В JavaScript эти символы экранируются специальными последовательностями: \r - возврат каретки - CARRIAGE RETURN (CR) \n […]
Как получить все названия классов на HTML-странице? Мы хотим знать какие именно названия HTML-атрибутов class можно встретить в качестве его значений во всём документе. Как это сделать? Решение [...new Set([...document.querySelectorAll('*')].map(i=>[...i.classList]).flat(Infinity).sort())] или [...new Set([...document.all].map(i=>[...i.classList]).flat(Infinity).sort())] Данное выражение вернёт нам сортированный массив из уникальных строк, которые являются значениями классов всех элементов в […]
Интерфейс HTMLAllCollection используется для устаревшего атрибута document.all. Он работает аналогично HTMLCollection; основные отличия заключаются в том, что он допускает ошеломляющее разнообразие различных (ab) применений своих методов, чтобы все в конечном итоге что-то возвращали, и что его можно вызывать как функцию в качестве альтернативы доступу к свойствам. Примечание Все объекты HTMLAllCollection […]
Задача простая. Мы хотим получить истину или ложь, если искомый класс существует в объекте document. Искомый HTML-класс у нас представлен в виде обычной строки JavaScript. Как это проверить? Решение через функцию, оператор if и метод querySelector() Схема работы такая. Мы обращаемся к документу (document) и на нём вызываем метод querySelector(), который попытается […]
Какие пробелы считать лишними? Три случая: Строка начинается с пробела/пробелов Строка заканчивается пробелом/пробелами Внутри строки есть два и более пробелов подряд Все эти три случая мы будем удалять, очищая строку от лишних пробелов. Пример строки с "лишними" пробелами let str = " ffff ddddd ss aa ttttt qqqqq " […]
Cyrillic 0040 0041 0042 0043 0044 0045 0046 0047 0048 0049 004A 004B 004C 004D 004E 004F 0 Ѐ А Р а р ѐ Ѡ Ѱ Ҁ Ґ Ҡ Ұ Ӏ Ӑ Ӡ Ӱ 0 1 Ё Б С б с ё ѡ ѱ ҁ ґ ҡ ұ Ӂ ӑ […]
В этой таблице перечислены имена ссылок на символы, поддерживаемые HTML, и кодовые точки, на которые они ссылаются. На него ссылаются предыдущие разделы. Примечание Для совместимости с устаревшими версиями преднамеренно многие кодовые точки имеют многосимвольные справочные имена. Например, некоторые из них появляются как с точкой с запятой в конце, так и […]
Запись Частной Среды (PrivateEnvironment Record) — это механизм спецификации, используемый для отслеживания Частных Имен на основе лексической вложенной структуры ClassDeclaration'ов и ClassExpression'ов в коде ECMAScript. Они похожи на Environment Records, но отличаются от них. Каждая Запись Частной Среды связана с ClassDeclaration или ClassExpression. Каждый раз, когда оценивается такой класс, создаётся […]
Оглавление 9.1 Environment Records - Записи Среды 9.2 PrivateEnvironment Records - Записи Частной Среды 9.3 Realms - Области 9.4 Execution Contexts - Контексты Выполнения 9.5 Jobs and Host Operations to Enqueue Jobs - Задания и Хост Операции для постановки Заданий в Очередь 9.6 InitializeHostDefinedRealm ( ) - Инициализировать Область, Определенную […]
LIFO - это сокращение от выражения LAST-IN/FIRST-OUT. Дословный перевод «последним вошёл / первым вышел». Речь идёт о таких понятиях как Контекст выполнения (execution context), Текущий контекст выполнения (running execution context) Стек контекста выполнения (execution context stack). Информационные ссылки ECMAScript | Контексты Выполнения Стандарт ECMAScript - Раздел "9.4 Execution Contexts" - https://tc39.es/ecma262/#sec-execution-contexts
Для веб-разработчиков (не нормативно) context.fillText(text, x, y [, maxWidth ]) Заполняет заданный текст в заданной позиции. Если указана максимальная ширина, текст будет масштабироваться в соответствии с этой шириной, если это необходимо. context.strokeText(text, x, y [, maxWidth ]) Обводит заданный текст в заданной позиции. Если указана максимальная ширина, текст будет масштабироваться в соответствии с этой шириной, если это необходимо. metrics = context.measureText(text) Возвращает объект […]
Контекст выполнения (execution context) - это устройство спецификации, которое используется для отслеживания оценки кода во время выполнения реализацией ECMAScript. В любой момент времени существует не более одного контекста выполнения для каждого агента, который фактически выполняет код. Это называется текущим контекстом выполнения (running execution context) агента. Все ссылки на текущий контекст […]
Стандартное поведение контекста визуализации определяет для текста выравнивание по левому краю (по началу текста). Это логично т. к. большинство языков имеют направление печати слева-направо. Но как можно выровнять текст на холсте canvas по центру или по правому краю (по концу текста)? В нашем примере будет создан блок canvas на странице […]
Шаг № 1 - Создаём объект canvas через JavaScript На первом шаге нам нужно получить новый объект холста canvas, который мы положим в переменную, чтобы иметь возможность управлять его содержимым. Для этого нам понадобится JavaScript и DOM, которые работают в браузере. let my_canvas = document.createElement('canvas'); Шаг № 2 - Создаём […]
По умолчанию размер холста canvas равен 300 на 150 пикселей. В большинстве случаев этот размер никуда не подходит и есть 100% необходимость его изменить. Как это сделать? За размеры холста canvas отвечают его HTML-атрибуты: width - ширина (горизонтальный размер) height - высота (вертикальный размер) Если мы "ручками" создаём HTML-разметку элемента […]
По умолчанию холсты canvas имеют размер 300 х 150 пикселей. Эти размеры получаются, если мы просто создаём новый объект элемента canvas в документе document при помощи языка JavaScript. let my_canvas = document.createElement('canvas'); Если сейчас мы обратимся к свойствам width и height, то получим: my_canvas.width 300 my_canvas.height 150 Информация из стандарта […]
Если уточнить задачу, то нас интересует тот момент, который наступает после присваивания значения атрибуту srcdoc и моментального обращения к свойству contentDocument. Напомню, что атрибут принимает строку, которая должна являться частью синтаксиса HTML. Это может быть как полная разметка страницы, так и частичный код. Смысл работы атрибута srcdoc в том, что […]
Категории: Потоковый контент. Фразовый контент. Встроенный контент. Интерактивный контент. Ощутимый контент. Контексты, в которых может использоваться этот элемент: Где ожидается встроенный контент. Контентная модель: Ничего такого Отсутствие тега в text/html: Ни один из тегов не может быть пропущен. Атрибуты контента: Глобальные атрибуты src — Адрес ресурса srcdoc — Документ для […]
Дано Есть строка: '../aa/bb.html' Нужно получить: 'https://example.com/xyz/aa/bb.html' Строку с относительным путём мы получили из HTML-разметки документа, когда получали данные при помощи выборки Fetch. Адрес выборки: 'https://example.com/xyz/111/222.html' Как преобразовать относительный путь в абсолютный? Способ № 1 - Использование конструктора URL Когда мы работаем в браузере, то у нас в […]
Для веб-разработчиков (не нормативно) imagedata = new ImageData(sw, sh [, settings]) Возвращает объект ImageData с заданными размерами и цветовым пространством, указанным в настройках settings. Все пиксели в возвращаемом объекте прозрачно-чёрные. Выдает исключение DOMException "IndexSizeError", если любой из аргументов ширины или высоты равен нулю. imagedata = new ImageData(data, sw [, sh [, settings ] ]) Возвращает объект ImageData, используя данные, предоставленные в аргументе Uint8ClampedArray, […]
Для веб-разработчиков (не нормативно) context.imageSmoothingEnabled [ = value ] Возвращает значение заполнения шаблона, и метод drawImage() попытается сгладить изображения, если их пиксели не совпадают точно с дисплеем при масштабировании изображений. Можно установить, чтобы изменить, сглаживаются ли изображения (true) или нет (false). context.imageSmoothingQuality [ = value ] Возвращает текущее предпочтение качества сглаживания изображения. Можно установить, чтобы изменить […]
Данная публикация является переводом на русский язык официальной версии стандарта HTML, расположенного по адресу https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element На 02.01.2022 раздел называется "4.12.5 The canvas element" Категории: Поточное содержание. Фразовое содержание. Встроенное содержание. Ощутимое содержание. Контексты, в которых можно использовать этот элемент: Где ожидается встроенное содержание. Модель контента: Прозрачный, но без интерактивных потомков […]
Этот раздел не является нормативным. Утечка информации (Information leakage) может произойти, если скрипты из одного источника могут получить доступ к информации (например, считывать пиксели) из изображений из другого источника (не того же самого). Чтобы смягчить это, растровые изображения, используемые с элементами холста canvas и объектами ImageBitmap, определены так, чтобы иметь […]
Для веб-разработчиков (не нормативно) context.font [ = value ] styles.font [ = value ] Возвращает текущие настройки шрифта. Можно установить, чтобы изменить шрифт. Синтаксис такой же, как и для свойства CSS 'font'; значения, которые не могут быть проанализированы как значения шрифта CSS, игнорируются. Относительные ключевые слова и длины вычисляются относительно шрифта элемента холста canvas. context.textAlign [ = value ] […]
В этой публикации хочу рассмотреть создание одного элемента холста canvas при помощи JavaScript. Внутри этого элемента будут созданы два контекста визуализации с режимом "2d", которые будут представлять собой два квадрата. Первый квадрат фиолетового цвета будет закрывать всё пространство холста. Второй квадрат жёлтого цвета будет меньше и он будет логически отцентрован […]
Для веб-разработчиков (не нормативно) context.lineWidth [ = value ] styles.lineWidth [ = value ] Возвращает текущую ширину линии. Может быть установлен, чтобы изменить ширину линии. Значения, не являющиеся конечными значениями больше нуля, игнорируются. context.lineCap [ = value ] styles.lineCap [ = value ] Возвращает текущий стиль окончания строки. Можно установить, чтобы изменить стиль окончания линии. Возможные стили окончания линии: «стык», «круглый» и […]
Есть строка: let stroka = 'etgjьт3;43refeв,а 2758 лжЖ:30hjhj2а лм,53во лklатл1 00-,алjlllfм' В ней всего понамешано. Но нам из всего этого 🙂 нужно получить только буквы. Русские буквы. Как это сделать? Решение задачи Когда мы работаем со строками, тогда мы работаем с регулярными выражениями. Удаление лишнего - это замена на НИЧЕГО. […]
Суть задачи в том, чтобы использовать JavaScript для генерации нужной разметки HTML-документа, которая будет содержать в себе только один элемент холста canvas залитый квадратом красного цвета размером 100 на 100 пикселей. Как это сделать? Ниже готовый код. Протестируйте! <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta […]
На этом сайте пишу публикации и периодически вставляю кусочки кода из редакторов. Часто приходится разукрашивать синтаксические элементы языковых конструкций JavaScript. Для небольших кодов я вручную присваиваю цвета в блоках PRE при помощи редактора публикаций WordPress. Но на больших фрагментах кода делать разукрашивание ручным способом довольно запарно. Хочется просто взять из […]
Редактор кода Visual Studio Code по сути является обычным браузером, работающим на движке Chrome. Это значит то, что у него можно открыть инструменты разработчика и посмотреть нужные участки кода или воспользоваться привычной консолью с JavaScript. В обычном браузере инструменты разработчика открываются при помощи сочетания клавиш CTRL + SHIFT + I. […]
У нас есть шаблон HTML-документа: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Документ с холстом canvas</title> </head> <body> <script> </script> </body> </html> Мы хотим в этом документе создать элемент холста canvas в самом простом виде без привязки контекста визуализации. Как это сделать? Шаг […]
Для веб-разработчиков (не нормативно) context = canvas.getContext(contextId [, options ]) Возвращает объект, предоставляющий API для рисования на холсте. contextId указывает желаемый API: «2d», «bitmaprenderer», «webgl», «webgl2» или «webgpu». options обрабатываются этим API. Эта спецификация определяет контексты «2d» и «bitmaprenderer» ниже. Спецификации WebGL определяют контексты «webgl» и «webgl2». WebGPU определяет контекст «webgpu». [WEBGL] [WEBGPU] Возвращает null, […]
Для веб-разработчиков (не нормативно) canvas.transferControlToOffscreen() Возвращает только что созданный объект OffscreenCanvas, который использует элемент холста canvas в качестве заполнителя. После того, как элемент холста canvas стал заполнителем для объекта OffscreenCanvas, его внутренний размер больше не может быть изменен, и он не может иметь контекст визуализации. Содержимое холста-заполнителя обновляется путем вызова […]
Для веб-разработчиков (не нормативно) canvas.toBlob(callback [, type [, quality ] ]) Создаёт объект Blob, представляющий файл, содержащий изображение на холсте, и вызывает обратный вызов с дескриптором этого объекта. Второй аргумент, если он указан, управляет типом возвращаемого изображения (например, PNG или JPEG). По умолчанию это «image/png»; этот тип также используется, если данный тип не […]
Для веб-разработчиков (не нормативно) url = canvas.toDataURL([ type [, quality ] ]) Возвращает data: URL изображения на холсте. Первый аргумент, если он указан, управляет типом возвращаемого изображения (например, PNG или JPEG). По умолчанию это «image/png»; этот тип также используется, если данный тип не поддерживается. Второй аргумент применяется, если тип представляет собой формат изображения, который поддерживает переменное […]
Мы хотим получить из массива каждый третий элемент. Как это сделать? У нас есть массив: let massiv = [1,2,3,4,5,6,7,8,9,10]; Мы взяли массив из чисел для простоты восприятия, чтобы результат был более наглядным. Использование метода filter() Из документации мы знаем, что метод filter() может принимать ДВА параметра. Первый обязательный - это […]
Мы хотим получить из массива каждый второй элемент. Как это сделать? У нас есть массив: let massiv = [1,2,3,4,5,6,7,8,9,10]; Мы взяли массив из чисел для простоты восприятия. Использование метода filter() Из документации мы знаем, что метод filter() может принимать ДВА параметра. Первый обязательный - это функция обратного вызова, выполнение которой […]
Редакция от 10 ноября 2021 г. Резюме В этом документе описывается, как автор может установить политику рефёрера (referrer policy) для создаваемых документов, а также влияние такой политики на HTTP-заголовок Referer для исходящих запросов и переходов. Статус этого документа Это общедоступная копия редакционного черновика. Он предназначен только для обсуждения […]
У нас есть два массива: let m1 = [21,22,23,24,25,26,27,28]; let m2 = [81,82,83,84,85,86,87,88]; Мы хотим перемешать элементы каждого массива и потом собрать их все в один массив. Как это сделать? Нет смысла перемешивать каждый массив по отдельности. Проще всего перемешивать один полный массив. Шаг № 1 - склеивание массивов в […]