Есть массив JavaScript: var massiv = [1,2,3,4,5,6,7,8,9,10] Мы хотим увеличить все числа в этом массиве на 100. Решение задачи — простое Чтобы решить задачу нужно использовать метод объектов-прототипов Array, который называется map(). Он ходит по каждому элементу основного массива, делает преобразования и возвращает новый массив такой же длины (с такой […]
Как создать объект с вычисляемым свойством? Как использовать this внутри одного объекта? Как сделать так, чтобы ЗНАЧЕНИЕ по КЛЮЧУ (элемента/свойства) в объекте автоматически высчитывалось на основании других ЗНАЧЕНИЙ у других КЛЮЧЕЙ? Оглавление Добавляем get в объект Добавляем set в объект В чём тут проблема? В обычном объекте мы не можем […]
Создание анонимного объекта с элементами в JavaScript Печатаем первый символ — открывающая фигурная скобка «{« Печатаем второй символ — закрывающая фигурная скобка «}« Так мы создадим пустой объект: {} Теперь нужно наполнить этот пустой объект элементами. Каждый элемент — это пары «КЛЮЧ/ЗНАЧЕНИЕ». Объект с одним элементом Внутри пустого объекта […]
Создание пустого анонимного объекта в JavaScript Печатаем первый символ — открывающая фигурная скобка «{« Печатаем второй символ — закрывающая фигурная скобка «}« Должно получиться следующее: {} В этом случае две фигурные скобки описывают границы объекта JavaScript. Почему этот объект пустой? — Потому что в нём нет элементов (пар «КЛЮЧ/ЗНАЧЕНИЕ») Почему […]
Есть строка: var stroka = "Subaru/" Нам нужно удалить из этой строки последний символ косой линии «/». Решение Воспользуемся методом slice() объекта -прототипа String. String.prototype.slice ( start, end ) Метод slice принимает два аргумента, start и end, и возвращает подстроку результата преобразования этого объекта в String, начиная с начала […]
Есть строка: var stroka = "/Chevrolet" Нам нужно удалить из этой строки первый символ косой линии «/». Решение Воспользуемся методом slice() объекта -прототипа String. String.prototype.slice ( start, end ) Метод slice принимает два аргумента, start и end, и возвращает подстроку результата преобразования этого объекта в String, начиная с начала […]
Конструктор строк (String) Конструктор String: является %String%. является начальным значением свойства «String» глобального объекта. создает и инициализирует новый объект String при вызове в качестве конструктора. выполняет преобразование типа при вызове функции, а не конструктора. предназначен для создания подклассов. Он может использоваться как значение предложения extends определения класса. Конструкторы подкласса, которые […]
Существует всего 3 сценария обработки редиректов запросов: fetch (url, {redirect: "follow"}) fetch (url, {redirect: "error"}) fetch (url, {redirect: "manual"}) redirect — это строка, указывающая, следует ли запрос за перенаправлениями, приводит ли к ошибке при обнаружении перенаправления или возвращает перенаправление (непрозрачно). Устанавливает перенаправление redirect запроса request. Таким образом, потенциально опасный ответ не может случайно […]
В чём тут проблема? Посмотрите на такие условия: {a:"a"} == {a:"a"} {a:"a"} === {a:"a"} В обоих случаях мы получим ответ ЛОЖЬ (false), когда сравниваем два объекта. Но мы же видим, что объекты полностью идентичны. У них одинаковые КЛЮЧИ и ЗНАЧЕНИЯ. Это наш критерий ОДИНАКОВОСТИ. Вся проблема в том, что под […]
Как обрабатывать HTTP/HTTPS запросы силами JavaScript на сервере? Как сделать ЧПУ при помощи JavaScript? Как понять куда кликнул пользователь, чтобы передать ему правильную разметку в браузер? Как отлавливать URL-адреса и указывать программе какой файл нужно передать с сервера на клиент? Этими вопросами задаётся любой JavaScript’изёр, который наигрался в генерацию разметки […]
Рабочий пример Функция транслитерации с русского на английский на JavaScript В одну строку: function translitRuEn(str){ var magic = function(lit){ var arrayLits = [ ["а","a"], ["б","b"], ["в","v"], ["г","g"], ["д","d"], ["е","e"], ["ё","yo"], ["ж","zh"], ["з","z"], ["и","i"], ["й","j"], ["к","k"], ["л","l"], ["м","m"], ["н","n"], ["о","o"], ["п","p"], ["р","r"], ["с","s"], ["т","t"], ["у","u"], ["ф","f"], ["х","x"], ["ц","c"], ["ч","ch"], ["ш","sh"], ["щ","shh"], […]
Как в Visual Studio Code сделать многострочный код однострочным? Шаг 1 — Выделяете нужный участок кода В моём примере 148 строк кода, которые принадлежат одной функции, а значит её можно спокойно преобразовать в одну строку. Шаг 2 — Нажимаете клавишу F1 Открывается строка для поиска команд. В этой строке […]
Строчные буквы русского алфавита (33 буквы) [«а»,»б»,»в»,»г»,»д»,»е»,»ё»,»ж»,»з»,»и»,»й»,»к»,»л»,»м»,»н»,»о»,»п»,»р»,»с»,»т»,»у»,»ф»,»х»,»ц»,»ч»,»ш»,»щ»,»ъ»,»ы»,»ь»,»э»,»ю»,»я»] Символьные коды строчных букв русского алфавита [1072, 1073, 1074, 1075, 1076, 1077, 1105, 1078, 1079, 1080, 1081, 1082, 1083, 1084, 1085, 1086, 1087, 1088, 1089, 1090, 1091, 1092, 1093, 1094, 1095, 1096, 1097, 1098, 1099, 1100, 1101, 1102, 1103] Заглавные буквы русского алфавита […]
Как очистить текст от ссылки? Есть разметка: <p>Сегодня холодная погода. Самое время <a href="https://efim360.ru">купить тёплые ботинки</a> и отправиться гулять в парк.</p> Мы хотим очистить текст — хотим убрать HTML-элемент <a>, который оборачивает фразу «купить тёплые ботинки». В чём суть задачи? По сути, нам нужно заменить innerHTML на innerText. Вот […]
Есть массив из чисел: var massiv = [55, 66, 77, 88] Его длина равна 4 — четыре элемента в массиве. Как в этот массив дописать последний элемент с нужным значением? Нужно воспользоваться методом push() объектов-прототипов Array и передать нужное значение в качестве параметра. massiv.push(99) Мы успешно дописали число 99 в конец […]
Если я попрошу вас посчитать пальцы на руке, то с какой цифры вы начнёте отcчёт? С цифры «один»? Так? Любой разумный человек на этой планете начнёт считать любые вещи с единицы. Но разработчики языка JavaScript почему то решили начинать отcчёт «индексных коллекций» (массивов) не с единицы, а с нуля. То […]
Одной командой — простое решение для большинства примитивных задач var stroka3 = stroka1.replace(stroka2, "") Видео инструкция В этом видео приводится пример вычитания одной строки из другой строки в JavaScript, при помощи метода replace(). Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу. Дано У нас есть две […]
Есть два массива (полный и пустой): var massiv1 = [1, 2, 3, 4, 5] // полный массив var massiv2 = [] // пустой массив На пустоту массива влияет значение его длины. То есть у каждого массива есть своё собственное значение длины — «length«. Если массив пустой, то у него нет […]
Описание Чтобы полностью очистить массив от элементов нужно установить его длину на ноль. Эта операция удалит все элементы массива, а также их значения. massiv.length = 0 Видео инструкция В этом видео приводится пример очистки массива в JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу. […]
Дано Есть строка, в которой три раза встречаются сдвоенные пробелы: var stroka = "Я люблю работать со строковым типом данных." Воспользуемся методом replaceAll() объекта-прототипа String. stroka.replaceAll(" ", " ") Мы будем искать двойной пробел (» «) в переменной stroka и заменять его на одиночный пробел (» «) Информационные ссылки JavaScript […]
Определяем нужный класс. Например: product-title__text Чтобы получить все элементы с этим классом нам нужно воспользоваться функцией querySelectorAll(selectors), которая входит в «миксин ParentNode» стандарта «Объектной Модели Документа» (DOM). В селекторах к названию класса нужно добавить точку: document.querySelectorAll(".product-title__text") В ответ получили прототип объекта NodeList. Теперь у нас есть полный набор элементов с […]
Ctrl + =, чтобы увеличить размер шрифта. Ctrl + -, чтобы уменьшить размер шрифта. Ctrl + 0 для сброса размера шрифта.
Пример Мы будем отложенно выводить в консоль браузера сумму чисел. То есть мы планируем передавать в функцию какие-нибудь числа, а потом дожидаться их сложения. Напишем две функции: sum — складывает числа sleep2sec — запускает функцию sum, через 2 секунды Функция sum() function sum (x, y){ console.log(`Сумма чисел: ${x + y}`) […]
Короткая справка по setTimeout() handle = self . setTimeout( handler [, timeout [, arguments... ] ] ) Планирует тайм-аут для запуска обработчика после тайм-аута в миллисекундах. Любые аргументы передаются непосредственно обработчику. handle = self . setTimeout( code [, timeout ] ) Планирует тайм-аут для компиляции и запуска кода после тайм-аута […]
Объектная модель документа преобразовывает все HTML-элементы в объекты JavaScript. У элементов на странице есть своя структура вложенности одного в другого. Из этого можно сделать вывод, что каждый элемент «родственно» может быть связан с другим. Какой-то элемент может быть родителем, а какой-то его ребёнком. Как получить всех детей элемента на странице? Для […]
Есть простая разметка: <div class="gg"> <p>GGGG</p> </div> <div class="aa"> <p>AAAA</p> </div> Мы хотим получить родителя для элемента <p>AAAA</p>. Как его узнать? Для начала получим сам элемент <p>AAAA</p> document.getElementsByTagName("p")[1] Элемент получен: Теперь ищем родителя. В этом нам поможет «Объектная модель документа» (DOM). В стандарте DOM есть «Интерфейс Node». В этом интерфейсе […]
Решение для нахождения родителей нескольких элементов Потестируем на примере интернет-магазина. Для эксперимента возьмём класс «c-product-tile-picture__holder». Для начала нужно отобрать все элементы по классу: document.querySelectorAll(".c-product-tile-picture__holder") Теперь можно преобразовать NodeList в Array: Array.from(document.querySelectorAll(".c-product-tile-picture__holder")) Теперь можно пройтись по элементам массива и для каждого получить родителя: Array.from(document.querySelectorAll(".c-product-tile-picture__holder")).map(i=>i.parentNode) Мы использовали атрибут узлов — […]
Одной командой new XMLSerializer().serializeToString(document) Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все веб-ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте клавишу ENTER. Для тех кто не понял строчку кода […]
Одной командой new DOMParser().parseFromString(ТВОЯ_СТРОКА, "text/html").getElementsByTagName("ТВОЙ_ЭЛЕМЕНТ")[0] Рассмотрен случай преобразования готовой разметки HTML, которая лежит в JavaScript в виде строки. ТВОЯ_СТРОКА — нужно указать свою строку ТВОЙ_ЭЛЕМЕНТ — нужно указать HTML-элемент, который получается из строки (тот который задумывался изначально) Пример реализации: [0] — это значение опционально, если нужно получить какой-либо один элемент из […]
У нас есть два массива со строками JavaScript (элементами обоих массивов являются строки): var massiv1 = ["a","b","c","d"] var massiv2 = ["e","f","g","h"] Мы хотим склеить эти два массива в один массив таким образом, чтобы строки из первого и второго массивов перенеслись в третий. Видео инструкция В этом видео приводится пример объединения […]
Решение задачи Array.from(massiv.entries()).filter(i => i[1] == "ТВОЁ_ЗНАЧЕНИЕ_ЭЛЕМЕНТА").map(i => i[0]) // Альтернативный способ Object.entries(massiv).filter(i => i[1] == "ТВОЁ_ЗНАЧЕНИЕ_ЭЛЕМЕНТА").map(i => Number(i[0])) Object.entries(massiv).map(i => {if (i[1] == "ТВОЁ_ЗНАЧЕНИЕ_ЭЛЕМЕНТА"){return Number(i[0])}}).filter(i => i != undefined) "ТВОЁ_ЗНАЧЕНИЕ_ЭЛЕМЕНТА" - в данном случае строка или число. Чтобы сравнивать объекты нужно другое условие. Видео инструкция В этом видео […]
Эта инструкция нужна для написания кода в «редакторе кода» (NotePAD++, VSC, WebStorm и т.п.). Если вы работаете напрямую в консоли браузера, то в ней нет необходимости. У нас есть массив: var massiv = ["JavaScript", "Array", "Index"] // простой массив из строк Пишем команду, которая выведет элемент массива в консоль браузера […]
В решении этого вопроса нам поможет «Объектная модель документа» (DOM). В этом стандарте есть «интерфейс Document». В нём есть узел, который называется document. Обращение к этому узлу возвращает нам полный список элементов HTML-страницы: document Информационные ссылки DOM DOM | Интерфейс Document JavaScript | Как получить код HTML-страницы?
Как отобрать элементы с уникальными значениями в массиве? У нас есть массив из чисел: var massiv = [1, 2, 3, 3, 4, 4, 4, 5, 6, 7, 10, 10, 10, 40, 65, 83, 83, 83, 109, 109, 432, 456] Этот массив отсортирован по возрастанию элементов, чтобы было легче его воспринимать […]
У любого массива есть свойство «length» (длина). Также любой массив можно создать при помощи синтаксиса языка — квадратными скобками. Для этого нужно внутрь квадратных скобок поместить 10 запятых: var massiv = [,,,,,,,,,,] Данная команда создаст нам пустой массив длиной 10. Но есть другой способ создания массива из 10 элементов — […]
sitemap.xml — это специальный файл для поисковых систем, который содержит URL-адреса на внутренние страницы сайта, представляющие интерес для владельца сайта. sitemap.xml анализируется поисковыми роботами, а затем страницы сайта попадают в поисковый индекс и могут начать показываться в поисковых системах по запросам пользователей. Что нужно знать? sitemap.xml может хранить максимально 50000 адресов в […]
Стандарт ECMAScript позволяет любой текст превратить в ссылку. Для этого есть специальное свойство String.prototype.link(url). JavaScript работает на стандарте ECMAScript, а это значит, что в JavaScript это работает точно так же. Как это работает? У нас есть текст в виде строкового типа данных (String): var stroka = "Скачайте файл по ссылке. […]
document.body.children Данная команда возвращает прототип объекта HTMLCollection — это массиво-подобный объект, который хранит в себе узлы объектной модели документа (DOM). Мы получаем всех детей HTML-элемента <body> с их собственной структурой вложенности при помощи JavaScript. В коллекции, дети выстаиваются в порядке появления в разметке документа (древовидный порядок). Первый элемент коллекции будет […]
Одна простая команда: document.body.children В ответ мы получим детей, которые находятся внутри элемента <body>. Как это работает? Мы сначала обращаемся к объекту document, который может являться текущей страницей в браузере. Затем у объекта document мы запрашиваем значение атрибута body, который по аналогии возвращает нам сам JavaScript объект элемента <body>. Далее […]
Функции в JavaScript — это маленькие программки, которые выполняют разные специфичные задачи. Что нужно знать про функции? Условно все функции можно разделить на 3 состояния: Функция может быть ОБЪЯВЛЕНА (т. е. тело функции содержит саму информацию о работе функции — что, куда и как) Функция может быть ВЫЗВАНА (т. […]
Что такое элемент массива? Элемент массива — это пара «индекс / значение», которая определяет одну единицу массива. Массивы могут состоять из элементов, а могут быть «пустыми» — без элементов. Индексы массивов всегда начинаются с нуля. Индексы массивов всегда целые положительные числа. Значения могут быть любого типа данных — числа, строки, […]
Под словосочетанием «индекс массива» подразумевают «номер целочисленного индекса элемента массива«. Как это понять? Любой элемент массива состоит из пары «ИНДЕКС / ЗНАЧЕНИЕ». Индексы — порядковые номера элементов. Сначала идёт первый элемент, потом второй, потом третий и т.д.. Значения — это данные, которые мы храним в элементах массивов. Именно эти данные […]
Одной командой document.documentElement.innerText Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить весь текст. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте клавишу ENTER. Для тех кто не понял длинную строчку кода […]
Одной командой Получаем массив из строк с адресами со знаками вопросов, которые достали из атрибутов href элементов <a> Array.from(document.getElementsByTagName("a")).filter(i => i.search != "").map(i => i.href) С выводом результатов на текущую страницу «замудрёным» способом 🙂 document.write((((Array.from(document.getElementsByTagName("a"))).map(i => {if (i.search != "") {return i.href}})).filter(i => i != undefined)).join("<br>")) Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить […]
Сокращение длины массива Иногда требуется уменьшить длину массива. Пусть у нас будет массив massivMinus: var massivMinus = ["qqq","www","eee","rrr","ttt","yyy"] Этот массив имеет 6 элементов со значениями. Это полный массив, а значит количество элементов равняется количеству его индексов (6 элементов / 6 индексов). Его индексы: 0, 1, 2, 3, 4, 5 Мы […]
Одной командой Получаем массив из строк-адресов со знаками решётки из атрибутов href элементов <a> Array.from(document.getElementsByTagName("a")).filter(i => i.hash != "").map(i => i.href) С выводом на текущую страницу «замудрёным» способом 🙂 document.write((((Array.from(document.getElementsByTagName("a"))).map(i => {if (i.hash != "") {return i.href}})).filter(i => i != undefined)).join("<br>")) Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все ссылки. Включаете «Инструменты […]
У нас есть строка, которая состоит из цифр: var stroka = "167592" Мы хотим сложить все цифры из этой строки. То есть мы хотим выполнить такую операцию: 1 + 6 + 7 + 5 + 9 + 2 Как это сделать? Сперва преобразуем строку в массив элементов: var massiv_str = […]
Простыми словами Простыми словами, массив — это набор элементов и их значений, в котором каждый элемент логически связан со всеми остальными. Понимание необходимости создания массивов данных. Пример из жизни Перед вами листок бумаги. Вы смотрите на него. Представьте, что в ваш мозг поступают данные с листка в таком виде: 4562 […]
Одна простая команда: document.children В ответ мы получим ребёнка, который может быть у объекта document — это элемент html (узел html, со всей своей вложенностью) Информационные ссылки JavaScript | Как получить всех детей? DOM | Миксин ParentNode DOM JavaScript | Как получить детей body?
Предположим у нас есть основной массив: var massiv = [[1,2,3],[4,5,6,7,8],[9,10,11,12],[13,14]] Мы хотим узнать длину любого массива, который находится внутри основного. У нас основной массив хранит в себе другие массивы. Пример из жизни Представьте, что вы пришли в гипермаркет и купили продукты. Задумайтесь, как это выглядит со стороны. Ваш автомобиль является […]