Задача Нам нужно отрисовывать HTML-разметку в открытом документе в браузере только в тот момент, когда скролл (прокрутка) достигнет определённого HTML-элемента (блока). По задумке хочется иметь несколько HTML-элементов под одним классом, в которые мы будем подгружать контент в момент долистывания. Все эти элементы будут лежать в одном массиве и по мере […]
JS
815 записей
Часто в JavaScript мы пытаемся обращаться к каким-то свойствам объектов. Часто гоняем их в массивах. Иногда мы пытаемся использовать обращения к несуществующим ключам в условиях или функциях. И однажды возникнет такая ситуация, при которой всё сломается. Мы не специально, просто так получается. Как быть? В чём проблема с ключами […]
Задача Мы хотим получить список внутренних страниц сайта на которые ссылается текущая страница сайта, но без 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]) Отображает подсказку модального текстового элемента управления […]
Для веб-разработчиков (не нормативно) 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, её сначала нужно объявить, чтобы среда выполнения кода могла её зарегистрировать, а в случае вызова знала куда пойти её искать. Тут речь идёт только о новой функции, которая имеет свой уникальный проектный функционал. Имеется ввиду, что в среде выполнения кода она ранее не […]
В этой публикации хочется проверить, какую объектную модель документа создаст интерфейс 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()). Коллбек будет видеть нашу переменную […]
Способ № 1 - Через интерфейс DOMParser Стандарт DOM Parsing and Serialization - https://www.w3.org/TR/DOM-Parsing/ описывает интерфейс DOMParser, у которого есть метод parseFromString(str, type) Первым параметром метод принимает строку, которая по сути является полноценной разметкой HTML-страницы. Вторым параметром метод принимает тип распознавания для будущего документа. Это один из: "text/html" "text/xml" "application/xml" […]
Абстрактная операция EnumerateObjectProperties (Перечислить Свойства Объекта) принимает аргумент O (объект Object). При вызове она выполняет следующие шаги: 1. Вернуть объект Iterator (27.1.1.2), метод next которого выполняет итерацию по всем ключам со значением String перечислимых (enumerable) свойств O. Объект итератора никогда не доступен напрямую для кода ECMAScript. Механика и порядок перечисления […]
Цикл for in в JavaScript затрагивает несколько концепций, которые на первый взгляд могут быть не очевидны при быстром изучении языка. В них обязательно нужно разобраться. Надеюсь эта публикация откроет глаза на лучшее понимание работы языка JavaScript. В чём основная суть работы цикла for in? Цикл for in - это […]
За перенос строки на новую линию отвечают специальные символы: возврат каретки - 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(), который попытается […]
Запись Частной Среды (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 в том, что […]