Часто в JavaScript мы пытаемся обращаться к каким-то свойствам объектов. Часто гоняем их в массивах. Иногда мы пытаемся использовать обращения к несуществующим ключам в условиях или функциях. И однажды возникнет такая ситуация, при которой всё сломается. Мы не специально, просто так получается. Как быть? В чём проблема с ключами […]
FrontEND
872 записи
Задача Мы хотим получить список внутренних страниц сайта на которые ссылается текущая страница сайта, но без URI-запросов и без URI-фрагментов (смотри стандарт URI - RFC 3986). То есть мы отрыли какую-нибудь страницу в браузере и хотим понять куда мы можем перейти из неё, в пределах одного домена. У нас есть […]
Мы будем писать функцию нахождения самой короткой строки в массиве по шагам. Исходный массив для тестирования будет такой: let arr = [1, 'Александр', 2, 'Вася', 'Гриша', 367323 ] Шаг № 1 - Фильтрация массива на наличие строк arr.filter(i=>i.constructor.name==='String') Шаг № 2 - Проверка, что в массиве есть строки if(arr.filter(i=>i.constructor.name==='String').length […]
У нас есть задача. Мы хотим при помощи браузера, языка JavaScript и прикладных интерфейсов программирования (APIs) скачать изображение на HTML-странице какого-нибудь сайта. Как это сделать? Эту задачу можно разделить на два этапа: Делаем выборку нужного ресурса изображения при помощи fetch() Распознаём содержимое ОТВЕТА сервера и сохраняем его в файл на […]
У нас есть задача сохранить строку в файл на ПК из клиента (браузера). В браузере у нас работает JavaScript. Но есть одна проблема. При попытке ручного копирования (CTRL+C / CTRL+V) строки из консоли браузера и вставки её в редактор кода или файл, мы теряем переносы строк. Вместо мульти-лайновости мы получаем […]
Два производства КВАНТИФИКАТОРОВ Начнём с того, что по стандарту ECMAScript квантификаторы могут иметь всего 2 (два) производства: Производство № 1 - КАНТИФИКАТОР - это префикс квантификатора Производство № 2 - КАНТИФИКАТОР - это префикс квантификатора и знак вопроса (?) справа Видео для понимания В видео подробно рассмотрен вопрос разницы […]
У нас есть число из 13 цифр. let number13 = 1646944886676; Это число является кодом UTC, который символизирует некую временную дату. Аббревиатура UTC расшифровывается как Coordinated Universal Time (Всемирное Координированное Время). Мы хотим получить какую-то внятную строку, по которой можно понять год, месяц, день, час и минуту, которые символизирует эта […]
Кодовые точки URL-адреса (URL code points) - это буквенно-цифровые символы ASCII, U+0021 (!), U+0024 ($), U+0026 (&), U+0027 ('), U+0028 ЛЕВАЯ СКОБКА, U+0029 ПРАВАЯ СКОБКА, U+002A (*), U+002B (+), U+002C (,), U+002D (-), U+002E (.), U+002F (/), U+003A (:), U+003B (;), U+003D (=), U+003F (?), U+0040 (@), U+005F (_), U+007E […]
Классический сценарий - один параметр - абсолютный путь У нас есть строка: let stroka = "https://efim360.ru/blabla123?sort=0#rty" Эта строка представляет собой полноценный путь до данных. Строка оформлена в виде полного идентификатора ресурса - URI. Строка начинается со схемы, у строки есть основание, путь , запрос и фрагмент. Полный набор возможных элементов […]
Миксин WindowOrWorkerGlobalScope предназначен для использования API, которые должны быть представлены в объектах Window и WorkerGlobalScope. Примечание Другие стандарты поощряются к его дальнейшему расширению с использованием "частичного микса интерфейса" partial interface mixin WindowOrWorkerGlobalScope {…}; вместе с соответствующей справкой. typedef (DOMString or Function) TimerHandler; interface mixin WindowOrWorkerGlobalScope { [Replaceable] readonly […]
Методы atob() и btoa() позволяют разработчикам преобразовывать содержимое в кодировку base64 и обратно. Примечание В этих API для мнемонических целей букву «b» можно рассматривать как "binary" (двоичную), а «a» — как «ASCII». Однако на практике, в первую очередь по историческим причинам, и ввод, и вывод этих функций представляют собой […]
Примечание API для динамической вставки разметки в документ взаимодействуют с синтаксическим анализатором, поэтому их поведение зависит от того, используются ли они с документами HTML (и синтаксическим анализатором HTML) или XML-документами (и синтаксическим анализатором XML). Объекты документа Document имеют счетчик вставки динамической разметки (throw-on-dynamic-markup-insertion counter), который используется в сочетании с созданием […]
Интерфейс DOMParser позволяет авторам создавать новые объекты Document путём разбора строк в формате HTML или XML. Для веб-разработчиков (не нормативно) parser = new DOMParser() Создает новый объект DOMParser. document = parser.parseFromString(string, type) Разбирает строку string с помощью анализатора HTML или XML в зависимости от типа type и возвращает результирующий объект документа Document. Тип type может […]
Для веб-разработчиков (не нормативно) window.alert(message) Отображает модальное предупреждение с заданным сообщением и ожидает, пока пользователь его закроет. result = window.confirm(message) Отображает модальное приглашение OK/Cancel с заданным сообщением, ожидает, пока пользователь отклонит его, и возвращает true, если пользователь нажимает OK, и false, если пользователь нажимает Cancel. result = window.prompt(message [, default]) Отображает подсказку модального текстового элемента управления […]
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 Безопасность с элементами […]
Для веб-разработчиков (не нормативно) self.queueMicrotask(callback) Помещает в очередь микрозадачу для выполнения данного обратного вызова callback. Метод queueMicrotask(callback) должен поставить микрозадачу в очередь для вызова обратного вызова callback, и если обратный вызов callback вызывает исключение, сообщить об исключении. Метод queueMicrotask() позволяет авторам планировать обратный вызов в очереди микрозадач. Это позволяет […]
Когда впервые запускаешь setInterval(), то спустя несколько вызовов функции-обработчика начинаешь замечать, что setInterval() не остановится самостоятельно. Он так и будет долбить вызовы без остановки. Что делать? Прежде чем погружаться в готовое решение нужно задать себе два вопроса: От имени какого объекта контекста вызывается setInterval() ? То есть кто является this […]
Методы setTimeout() и setInterval() позволяют авторам планировать обратные вызовы на основе таймера. Для веб-разработчиков (не нормативно) id = self.setTimeout(handler [, timeout [, ...arguments ] ]) Планирует тайм-аут для запуска обработчика handler по истечении тайм-аута timeout в миллисекундах. Любые аргументы arguments передаются напрямую обработчику handler. id = self.setTimeout(code [, timeout ]) Планирует тайм-аут для компиляции и запуска кода code […]
У нас есть какая-то страница сайта. Она открыта в браузере. Мы хотим при помощи языка JavaScript получить текстовое значение заголовка H1. Как это сделать? Решение Нужно для начала обратиться ко всему документу (объект document). Затем у документа нужно отыскать всех потомков, которые имеют имя тега h1. После этого нужно […]
Есть строка JavaScript: let stroka = "Вася . Петя . Гриша . Маша ." После каждого имени в строке идёт пробел, и только потом точка. Нам нужно привести данную строку к нормальному виду как в предложении. Как это сделать? Решение Давайте напишем универсальное решение под любое количество пробелов перед […]
Способ номер 1 - Метод getElementsByTagName() Получение HTMLCollection с объектами HTML-элементов <img> document.getElementsByTagName("img") Конвертируем коллекцию (HTMLCollection) в массив (Array) [...document.getElementsByTagName("img")] Проходим по каждому объекту в массиве и извлекаем значение свойства src. Получаем массив из строк [...document.getElementsByTagName("img")].map(i => i.src) Выводим результат на текущую открытую страницу браузера. Нужно для копирования в эксельку. […]
Иногда в JavaScript возникает задача по клонированию какого-то объекта. И в этот момент не всегда ясно как это правильно нужно делать. Решение У нас есть объект, который мы хотим клонировать. То есть мы хотим взять все свойства этого объекта и перенести их в новый объект. let obj22 = {s:123, […]
Есть четыре типа кода ECMAScript: Global code Eval code Function code Module code Global code Глобальный код (Global code) - это исходный текст, который рассматривается как сценарий ECMAScript. Глобальный код конкретного скрипта не включает в себя исходный текст, который анализируется как часть FunctionDeclaration, FunctionExpression, GeneratorDeclaration, GeneratorExpression, AsyncFunctionDeclaration, AsyncFunctionExpression, AsyncGeneratorDeclaration, […]
Introduction - Введение 1 Scope - Сфера 2 Conformance - Соответствие 2.1 Example Clause Heading 3 Normative References - Нормативные ссылки 4 Overview - Обзор 4.1 Web Scripting - Веб-скрипты 4.2 Hosts and Implementations - Хосты и Реализации 4.3 ECMAScript Overview - Обзор ECMAScript 4.3.1 Objects 4.3.2 The Strict Variant […]
В JavaScript всё является объектами. Любой объект в JavaScript по цепочке прототипов приходит к "Глобальному Объекту" языка. У "Глобального Объекта" JavaScript есть свои собственные свойства-конструкторы. Одним из таких свойств является объект Math Чтобы округлять дробные числа до целых нужно использовать конструктор Math и его собственные методы округления чисел: ceil( ) […]
Говорить о Контексте Выполнения (Execution Context) нужно как можно раньше, при изучении языка JavaScript. Это фундаментальное понятие, которое открывает глаза на суть Объектно-Ориентированного Программирования. Но это всё звучит по-прежнему страшно и непонятно. Давайте снизим градус "Высшего Образования" и перейдём на "Кухонный Уровень". Пример из обычной жизни Представьте себе такую […]
Какие пробелы считать лишними? Три случая: Строка начинается с пробела/пробелов Строка заканчивается пробелом/пробелами Внутри строки есть два и более пробелов подряд Все эти три случая мы будем удалять, очищая строку от лишних пробелов. ВНИМАНИЕ!!! Мы рассматриваем пробелы, которые имеют символьные коды № 32. Если вы видите между символами пробел, то […]
Дано Есть строка: '../aa/bb.html' Нужно получить: 'https://example.com/xyz/aa/bb.html' Строку с относительным путём мы получили из HTML-разметки документа, когда получали данные при помощи выборки Fetch. Адрес выборки: 'https://example.com/xyz/111/222.html' Как преобразовать относительный путь с точками в абсолютный? Способ № 1 - Использование конструктора URL Когда мы работаем в браузере, то у […]
Инструкция для чисел Мы можем открыть браузер и в нём перейти в инструменты разработчика. После этого мы можем открыть вкладку Консоль (Console). Теперь мы можем начинать вводить наши команды в пустое поле напротив символа >. После ввода команды нужно нажимать клавишу Enter, чтобы интерпретатор языка JavaScript начал свою работу и […]
Прежде чем пользоваться какой-нибудь функцией в JavaScript, её сначала нужно объявить, чтобы среда выполнения кода могла её зарегистрировать, а в случае вызова знала куда пойти её искать. Тут речь идёт только о новой функции, которая имеет свой уникальный проектный функционал. Имеется ввиду, что в среде выполнения кода она ранее не […]
Уровень CSS 2 использовал синтаксис с одним ключевым словом для 'display', требуя отдельных ключевых слов для блочных и встроенных вариантов одного и того же режима макета. Эти ключевые слова <display-legacy> сопоставляются следующим образом: 'inline-block' (встроенный блок) Вычисляет встроенный корневой поток - 'inline flow-root'. 'inline-table' (встроенная таблица) Вычисляет встроенную таблицу - […]
Name: display Value: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> Initial: встроенный (inline) Applies to: все элементы Inherited: нет Percentages: n/a Computed value: пара ключевых слов, представляющих внутренний и внешний типы отображения, плюс дополнительный флаг элемента списка 'list-item' или ключевое слово <display-internal> или <display-box>; […]
Этот раздел является нормативным. CSS берёт исходный документ, организованный в виде дерева tree из элементов elements (которое может содержать сочетание других элементов и текстовых узлов) и текстовых узлов text nodes (которые могут содержать текст), и отображает его на холсте, таком как ваш экран, лист бумаги, или звуковой поток. Хотя любой […]
1. Введение 1.1 Взаимодействие модулей 1.2 Определения значений 2 Режимы макета блока: свойство отображения 'display' 2.1 Внешние отображаемые роли для Flow Layout: блочные, встроенные и вводные ключевые слова 2.2 Модели макета внутреннего дисплея: ключевые слова потока, корневого потока, таблицы, гибкости, сетки и рубина. 2.3. Генерация блоков маркеров: ключевое слово элемента […]
В этой публикации хочется проверить, какую объектную модель документа создаст интерфейс DOMParser, если в передаваемой для разбора строке будут включены атрибуты style внутрь HTML-разметки элементов, без дополнительных стилевых файлов CSS. В качестве CSS-свойства для стилизации будем использовать "display", потому что оно влияет на итоговый рендеринг (визуализацию) документа. В чём проблема? […]
Информация о работе абстрактной операции GetSubstitution() актуальна на дату публикации (26 января 2022 года) Абстрактная операция GetSubstitution (Получить замену) принимает аргументы matched (Строка), str (Строка), position (неотрицательное целое), captures (возможно, пустой Список, каждый из элементов которого является Строкой или undefined), namedCaptures (Объект или undefined) и replaceTemplate (Строка). Для целей этой […]
Красивое решение для массива из чисел massiv.map(i=>x+=i, x=0).reverse()[0] massiv - это тот массив, на котором мы вызываем методы. То есть тот массив, в котором нужно сложить все числа. Мы используем второй аргумент функции map(), чтобы создать переменную "над" функцией обратного вызова (над первым аргументом map()). Коллбек будет видеть нашу переменную […]
Правила CSS, приведённые в этих подразделах, если не указано иное, предполагается использовать как часть значений по умолчанию таблицы стилей на уровне пользовательского агента для всех документов, содержащих элементы HTML. Некоторые правила предназначены для презентационных подсказок с нулевой специфичностью на уровне автора каскада CSS; они явно вызываются как презентационные подсказки. Когда […]
Предложения в этом разделе обычно выражены в терминах CSS. Ожидается, что пользовательские агенты будут либо поддерживать CSS, либо переводить правила CSS, приведённые в этом разделе, в приближения для других механизмов представления. При отсутствии противоположных правил уровня стилей (например, авторские таблицы стилей) ожидается, что пользовательские агенты будут отображать элемент таким образом, […]
Пользовательские агенты не обязаны представлять HTML-документы каким-либо особым образом. Тем не менее, в этом разделе представлен набор рекомендаций по отображению HTML-документов, которые, если им следовать, могут привести к тому, что пользовательский опыт будет очень похож на опыт, задуманный авторами документов. Во избежание путаницы в отношении нормативности этого раздела слово «должен» […]
Для веб-разработчиков (не нормативно) 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 - это […]
Для веб-разработчиков (не нормативно) 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 для элемента, который не визуализируется, возвращается его […]