FrontEND

Для отбора HTML-элементов в браузере при помощи JavaScript можно использовать готовые методы из стандарта объектной модели документа DOM. querySelector(); querySelectorAll(); Оба метода вызываются на HTML-элементе для которого нужно найти потомков. Метод «querySelector()» возвращает самого первого потомка, который соответствует CSS-селектору. Селектор передаётся в виде строки в качестве первого (единственного) параметра. Метод […]

Клиентский глобальный объект «window» имеет свойство «crypto«, которое хранит в себе объект — экземпляр класса Crypto. Данный экземпляр наследует от своего прототипа метод «randomUUID()«. Чтобы сгенерировать случайный UUID в виде строки, необходимо выполнить команду: crypto.randomUUID() или window.crypto.randomUUID() За более подробной информацией можно обратиться к документации — «Web Cryptography API«.

Метод «cloneNode()» может принимать в себя один параметр, который именуется как «deep«. Если перевести на наречие русского языка, то этому будет соответствовать слово «вглубь«. Предполагается, что все потомки клонируемого HTML-элемента, будут также склонированы в иерархическом порядке своего оригинала. Пример кода: myDOMelement.cloneNode(true)

Для обновления(перезапуска) вкладки браузера по уже открытому адресу, нужно воспользоваться командой: window.location.reload(); или просто location.reload(); В первом случае мы напрямую обращаемся к глобальному объекту «window». Во втором случае мы обращаемся к свойству «location» у того же глобального объекта — срабатывает относительное обращение.

Способ проверки сегодняшней даты в JavaScript через метод toDateString() При разработке интерфейсов иногда бывает удобно выводить не просто дату в виде числа месяца и года, а дату в виде слова «сегодня«. Для пользователя такая информация может оказаться более удобной, чтобы понимать какие операции выполнились сегодняшним днём. Мы воспользуемся командой получения […]

При перетаскивании HTML элементов div могут возникнуть проблемы с бросанием в область. Иногда может случиться так, что дочерние блоки имеют абсолютное позиционирование относительно своего родителя. В результате суммарная ширина детей может быть больше, чем ширина самого родителя. Также между детьми могут быть пустоты, которые только увеличивают суммарную ширину от края […]

При работе со строками очень часто нужно находить что-то в строке в разных местах и перемешивать это в каком-то другом порядке. Порядок элементов не всегда может быть последовательный и отделённый друг от друга. Часть строки может по смыслу попадать в две и более секции. Из-за обилия круглых скобок в шаблоне […]

Как узнать какая клавиша (кнопка) на клавиатуре была нажата на HTML-странице при помощи JavaScript? Само слово ‘keydown‘ обозначает именно нажатие. То есть событие на клиенте (в браузере) срабатывает в тот момент, когда фактически клавиша клавиатуры опустилась вниз. При этом если держать клавишу и не отпускать, то событие будет срабатывать с […]

Свойство «grid-template-columns» указывает список дорожек для столбцов сетки, а свойство «grid-template-rows» указывает список дорожек для строк сетки. Эти свойства определяют в виде списка дорожек, разделенных пробелами, имена линий и функции определения размеров дорожек сетки. Свойство «grid-template-columns» в родительском блоке отвечает за то, сколько столбцов должно быть в сетке на HTML-странице. Если […]

Есть массив из чисел на 11 элементов: let arr = [1,2,3,4,5,6,7,8,9,10,11]; Мы хотим получить массив из массивов, так, чтобы вложенные массивы хранили в себе по три элемента оригинального массива, начиная с начала. Если элементов недостаточно в конце массива, то всё равно добавляем те что есть, в пределах до 3 штук. […]

Нам нужно получить строку даты и времени, где время представлено только часами и минутами — без секунд. Как это сделать? Создадим объект Даты (Date) в JavaScript, чтобы было от чего отталкиваться: let d = new Date() Теперь мы можем получить полную строку временной метки в виде строки: d.toLocaleString() '21.07.2023, 10:46:22' […]

Как вынести отдельно из методов then() или catch() функцию обработки отклонённого обещания (Promise Rejected) с поддержкой передачи нужного количества параметров при помощи bind()? Что нужно запомнить? Метод bind() всегда принимает первым параметром объект, в контексте которого будет вызвана функция. Если мы просто указываем ссылку на функцию в методах then() или […]

Файл «app.js« var button1 = Ext.create('Ext.Button', { title: 'button1 title', //html: 'button1 html', text: 'btn1txt', width: 100, height: 50 }); var button2 = Ext.create('Ext.Button', { title: 'button2 title', //html: 'button2 html', text: 'btn2txt', width: 100, height: 50 }); var button3 = Ext.create('Ext.Button', { title: 'button3 title', //html: 'button3 html', text: […]

Рассмотрим три Панели (Panel). Всё что нам нужно — это ключ «items» у родительского объекта Панели (Panel), который хранит в себе массив с другими Панелями. var panel_two = Ext.create('Ext.Panel', { title: 'panel_two title', html: 'panel_two html', width: 200, height: 100 }); var panel_three = Ext.create('Ext.Panel', { title: 'panel_three title', html: […]

Как создать простую таблицу в Ext JS? Нам понадобятся два файла: HTML JS   HTML файл Для простоты, наш HTML файл будет иметь один элемент DIV с идентификатором равным «simpsonsDiv«. <div id="simpsonsDiv"></div> В момент отрисовки контента «Ext JS» будет искать этот контейнер для отрисовки содержимого таблицы с ячейками.   JS […]

Нам нужно регулярное выражение, которое просто говорит есть ли заглавная буква в строке или её там нет. Для этого нужно использовать дополнительный синтаксис шаблона для работы с пространством UNICODE. RegExp(/\p{Lu}/,'u').test("http://Forumserver.twoplustwo.com") true RegExp(/\p{Lu}/,'u').test("http://forumserver.twoplustwo.com") false Подробнее функционал дизъюнкции описан в публикации «JavaScript | Проверка на символ алфавита человеческого языка«.     Информационные […]

И вот однажды ты можешь задаться именно этим вопросом: «Как вручную разрешить JavaScript Обещание (Promise), не прописывая заранее логику в функции исполнителя?». Всё что тебе нужно, это вытащить наружу функцию разрешения из функции исполнителя для конкретного объекта Обещания. Для этого нужно создать любой внешний контейнер, будь то имя переменной или […]

Как приостановить выполнение алгоритма функции на некоторое время? В JavaScript можно создавать «ждущие функции». Это такие функции, которые умеют останавливать свою работу в определённых местах своего тела, ожидая следующей команды (события) или результата Обещания. Одной из реализаций «ждущей функции» в JavaScript является использование ключевого слова «async» перед ключевым словом «function«. […]

Как в редакторе Visual Studio Code с клавиатуры ввести символ табуляции вместо четырёх пробелов? Удерживая клавишу ALT нужно на мини-клавиатуре с цифрами (NUMPAD) нажать последовательно клавиши «0», «9». После этого появится стрелочка, смотрящая вправо, вместо четырёх точечек.  

Есть массив из чисел (идентификаторов), в котором значения элементов упорядочены по возрастанию: let arr = [1,2,3,4]; Мы хотим создать все возможные пары чисел и сложить их в новый массив: let new_arr = []; Делаем генерацию через цикл: for(let x of arr){ for(let y of arr){ new_arr.push([x,y]) } } В первом […]

Текст в массив слов при помощи JavaScript Представим себе такую задачу. У нас есть текст на HTML-странице (в документе). Мы хотим получить этот текст силами JavaScript, а потом достать из текста слова и разложить их как элементы массива. Мы знаем, что слова в текстах отделяются друг от друга пробелами (минимальное […]

Работая с JavaScript или NodeJS важно понимать как себя ведут «Отклонённые Обещания». Я говорю о таких объектах Promise, где в переданной функции «Исполнитель» была вызвана функция отклонения — reject(). То есть когда ветвление алгоритма привело нас к reject(), а не к resolve(). Называть функцию «Исполнитель» мы можем как угодно (здесь […]

Самый простой способ — это использовать рекурсивную функцию с гарантированным условием выхода через 100000 итераций. Функция вызывает сама себя. function f(x){ x > 100000 ? console.log('Готово') : f(x+1) } f(1) Мы используем «Условный Оператор» для возвращения из функции результата. Результат работы — Ошибка «RangeError: Maximum call stack size exceeded» : […]

Как проверить, является ли символ строки буквой какого-либо алфавита любого человеческого языка? В какой-то момент работы с регулярными выражениями появляются задачи по определению принадлежности символа строки к букве какого-то языка. Причём хочется анализировать любые строки, без акцента на какой-то конкретный язык. Ведь в современных публикациях в сети интернет легко можно […]

Знак доллара «$» в JavaScript может использоваться в разных ситуациях. Самое простое — им можно называть имена переменных.   Глобальный объект и ключ знак доллара в свойстве, объявленный через var JavaScript позволяет задавать имена переменных, используя в качестве первого символа знак доллара — «$«. В результате, если мы объявляем переменную […]

Оглавление Введение Где можно найти документацию по работе оператора typeof из JavaScript? typeof — это зарезервированное слово в JavaScript Оператор typeof и примитивные значения в JavaScript? Главная особенность работы оператора typeof в JavaScript Оператор typeof и функция в JavaScript? constructor.name вместо typeof   Введение Полезность или бесполезность оператора typeof в […]

Введение Прежде чем проверять существование имени переменной, нужно чётко понимать разницу между способами объявления этой переменной. Если говорить точнее, то нужно различать способы регистрации нового идентификатора привязки. Я говорю о таких словах как var, let, const. Учитывайте то, что только слово var является зарезервированным словом, а слова let и const не […]

Оглавление Вступление к публикации Как удалить собственное свойство объекта с строковым ключом JavaScript? Как удалить собственное свойство объекта с символьным ключом JavaScript? Как удалить наследованное свойство объекта JavaScript? Какое собственное свойство объекта JavaScript нельзя удалить? Код в строгом режиме и удаление собственного свойства объекта JavaScript Как использовать логические ответы оператора […]

Как отцентровать блок DIV внутри другого DIV по вертикали и горизонтали силами JavaScript? Идея именно в том, чтобы сделать это при помощи языка программирования JavaScript, а не через HTML-разметку или CSS-разметку. Так как мы работаем с JavaScript, то нас будут интересовать объекты интерфейсов прикладного программирования, которые встроены в браузер. Они […]

Когда мы переходим на уровень языка программирования JavaScript с уровня HTML, то все манипуляции для динамического формирования разметки ложатся на знание прикладных интерфейсов программирования и их объекты (классы объектов). Многие начинающие разработчики приходят к JavaScript из обычной вёрстки HTML. Это значит, что они уже касались стандарта, который отвечает за стилевое […]

Оператор return относится к операторам «внезапного завершения» функции. Это значит, что кроме return существуют другие операторы, которые могут внезапно завершить выполнение функции. Список операторов «внезапного завершения» по стандарту ECMAScript: break continue return throw Пример функции, которая завершается из-за оператора throw перед оператором return. function f_throw(){ throw(10); return 20; }; Скриншот […]

У нас есть число из 13 цифр. let number13 = 1646944886676; Это число является кодом UTC, который символизирует некую временную дату. Аббревиатура UTC расшифровывается как Coordinated Universal Time (Всемирное Координированное Время). Мы хотим получить какую-то внятную строку, по которой можно понять год, месяц, день, час и минуту, которые символизирует эта […]

Что нужно знать до создания HTML-таблицы силами JavaScript? Так как мы хотим создавать таблицу в браузере, то по сути у нас есть два пути к решению задачи: Либо мы пытаемся создать СТРОКУ, которая будет написана синтаксисом HTML и которая будет представлять из себя строковый вид таблицы в HTML-разметке. Либо мы […]

Прежде всего нужно помнить, что функции в JavaScript могут быть двух видов: Обычные функции (нормальные, которые оформляются через ключевое слово function) Стрелочные функции (с урезанными возможностями, которые оформляются в виде ()=>1) На что это влияет? В стрелочных функциях не определяются локальные привязки для arguments, super, this, or new.target.   Для получения имени функции […]

В JavaScript можно деструктурировать не только объекты, но и массивы. Существует формат присвоения, при помощи которого можно создавать имена новых переменных так, чтобы значения в этих переменных подхватывались из значений самого массива. В данном случае последовательность будет иметь значение. Это накладывает ряд ограничений на использование деструктуризации массива. let arr = […]

У нас есть строка с пробелами, написанная на JavaScript: let str = '  оди н д  ва     т ри  '; Нам нужно удалить все возможные пробелы из этой строки, чтобы оставшиеся символы слиплись в одну последовательность. Как это сделать? Проще всего воспользоваться регулярным выражением и написать шаблон для сопоставления […]

Обычный вариант записи присвоения имён переменных В JavaScript существует формат присвоения, при помощи которого можно получать имена новых переменных так, чтобы значения в этих переменных подхватывались из одноимённых ключей самого объекта. В чём суть? Представим, что у нас имеется объект вида: let obj = {aa: 1, bb:2}; В обычной ситуации, […]

У языка JavaScript существует возможность преобразовывать разные типы данных друг в друга. Чтобы превратить объект на массив нужно обратиться к конструктору класса Object и вызвать у него метод entries(), где в качестве параметра передать интересующий нас объект. Пусть у нас будет такой объект для трансформации: let obj = {a:2.3, b:["efim","360","ru"], […]

Представим себе такую задачу. Мы хотим передавать в функцию одно число. Внутри тела функции мы хотим получить: сначала результат сложения этого числа с числом 10, а потом хотим получить результат умножения этого числа на число 3. Как это сделать в JavaScript?   В чём может быть трудность возвращения нескольких результатов […]

Прежде чем погружаться в тему публикации, давайте проясним два момента: Функция может не иметь оператор return в своём теле Функция может иметь хотя бы один оператор return в своём теле То есть, существует всего два варианта. Функция что-то возвращает в определённый момент своей работы или не возвращает.   Видео про […]

Есть набор символов, которые лежат в массиве: let myarr = ['а','б','в','г','д','е','ё','ж']; Нам нужно создать такую функцию при помощи JavaScript, чтобы она могла принимать этот набор символов и нужную длину слова. На выходе функция должна возвращать случайное слово.   Решение задачи Нам нужна внутренняя функция, которая будет возвращать из передаваемого массива […]

Зачем переписывать детей HTML-элемента в DOM? Речь идёт о перемене мест детей между друг другом или полная их замена. У нас есть какой-то HTML-элемент на странице в браузере. У этого элемента есть несколько детей одного типа. Для простоты восприятия, представьте себе таблицу у которой есть столбцы и записи. Так вот, […]

Если не выполняются команды из редактора в веб-интерфейсе pgAdmin 4, то вероятнее всего исчерпаны все свободные подключения клиентов для СУБД PostgreSQL.   Куда смотреть? В первую очередь нужно заглянуть на главную панель pgAdmin 4 у нужной базы данных. Раскрываем слева меню напротив нужного сервера. Выбираем нужную базу данных по имени. […]

У нас есть строка: let str = `йц3уке рпар фыв3йцу иа яы1у й1ыс ыв4 аватц` Мы хотим удалить из этой строки символы «й«, «3» и «ц«. Как это сделать?   Удаление определённых символов строки через регулярное выражение в JavaScript Мы можем литерально записать наше регулярное выражение и передать его в […]

Работая с данными, в какой-то момент понимаешь, что не всё можно представить в виде линейной информации. Например, если мы говорим о текстах, то это обычные строки JavaScript. Что я имею ввиду? Смысл строк в том, что есть какой-то символ(или символы) и есть какая-то определённая последовательность этих символов. По сути, это […]

По стандарту HTML мы знаем, что в браузере можно рисовать любую графику. За это рисование отвечает HTML-элемент canvas. Для манипулирования с пикселями, текстами, линиями и путями мы используем JavaScript. Холст canvas представляет собой некоторое пиксельное пространство на котором размещаются «контексты рисования». По сути все изображения состоят из разных «контекстов рисования». […]

Что такое массив из массивов? Если смотреть на задачу со стороны визуализации, то массив из массивов представляет собой таблицу со столбцами и записями. Поэтому когда мы хотим перевернуть массив из массивов на девяносто градусов, то фактически мы хотим наклонить таблицу в правую или левую сторону — повернуть по часовой стрелке […]

Мы работаем с HTML-страницей в браузере и хотели бы в HTML-элементе «canvas» нарисовать красную линию, которая расположена диагонально относительно самого блока холста. Как это сделать? Для создания объектов мы используем язык JavaScript и интерфейсы объектной модели документа DOM.   Пример HTML-файла с JavaScript кодом, который рисует красную диагональную линию на […]