По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
Чтобы начать наше знакомство с регулярными выражениями, давайте взглянем на них поближе. Регулярные выражения являются шаблоном, который выполняет сравнение последовательности текста слева направо. Выражние "регулярные выражения" используют не очень часто, чаще всего применяют "regex" либо "regexp". В общем и целом, регулярные выражения предназначены для изменения текста в строке, а также они выполняют проверку некоторых форм, и т.д.
К примеру, у вас в разработке ведется некое приложение, и вам понадобилось выявить какие-то правила, по которым юзер уже будет выбирать собственное наименование. Важным условием будет ограничение в количестве символов и написании самого имени, которое должно состоять из букв, цифр, дефиса и нижнего подчеркивания. Для того, чтобы решить данную задачу, можно воспользоваться представленным ниже решением:
john_doe;
jo-hn_doe;
john12_as.
Но если наименование юзера будет состоять из прописной буквы, например Jo, то оно никак не будет соответствовать данному условию.
Основные совпадения
Регулярные выражения являются шаблоном, который состоит из неких символов, с помощью которого разработчики выполняют поиск в тексте. К примеру, условие "The" будет означать букву "t", за которой идет "h", затем - "e".
"the" => The fat cat sat onthemat.
Метасимволы
Строительными блоками регулярных выражений являются метасимволы, которые являются независимыми, и обычно используются любыми способами. Некоторое количество из них могут иметь особое предназначение, поэтому они выделяются квадратными скобками. Ниже вы можете ознакомиться с метасимволами.
Метасимволы
Описание
.
Любой единичный символ, исключая новую строку.
[ ]
Поиск набора символов, помещенных в скобки.
[^ ]
Отрицательный класс символов. Соответствует любому символу, не заключенному в квадратные скобки.
*
0 или больше повторений предшествующего символа.
+
1 или больше повторений предшествующего символа.
?
Делает предшествующий символ опциональным.
{n,m}
Возвращает как минимум "n", но не более "m" повторений предшествующего символа.
(xyz)
Находит группу символа в строго заданном порядке.
|
Разделяет допустимые варианты.
Исключает следующий символ. Позволяет искать служебные символы [ ] ( ) { } . * + ? ^ $ |
^
Находит начало введенной строки.
$
Находит конец введенной строки.
Сокращения для обозначения символов
В регулярных выражениях также существуют некоторые сокращения для символов, что в несколько раз повышает комфортность при работе. Ниже приведен список сокращений:
Сокращение
Описание
.
Любой символ, кроме новой строки
w
Соответствует буквенно-цифровым символам: [a-zA-Z0-9_]
W
Соответствует не буквенно-цифровым символам: [^w]
d
Соответствует цифрам: [0-9]
D
Соответствует нецифровым знакам: [^d]
s
Соответствует знаку пробела: [
f
p{Z}]
S
Соответствует символам без пробела: [^s]
Look Around Позиционная проверка
Look Around представляет собой набор некоторых групп, которые предназначены для поиска в тексте, но сами в него не входят. Позиционная проверка используется в том случае, если в определенном условии существует шаблон, который либо предшествует, либо идет следующим.
Символ
Описание
?=
Положительный Lookahead
?!
Отрицательный Lookahead
?<=
Положительный Lookbehind
?
Отрицательный Lookbehind
Флаги
Флаги также часто называют модификаторами, так как они могут изменять выходные данные регулярного выражения. Флаги ниже являются неотъемлемой частью и могут использоваться в любом порядке или комбинации регулярных выражений.
Флаг
Описание
i
Нечувствительность к регистру: делает выражение нечувствительным к регистру.
g
Глобальный поиск: поиск шаблона во всей строке ввода.
m
Многострочность: анкер метасимвола работает в каждой строке.
Жадные vs. ленивые выражения
По умолчанию регулярные выражения выполняются благодаря "жадным" квантификаторам, им соответствует максимально длинная строка из всех возможных.
"/(.*at)/" => The fat cat sat on the mat.
Чтобы получить "ленивое" выражение, нужно использовать знак "?". Так будет получена максимально короткая строка.
"/(.*?at)/" => The fat cat sat on the mat.
Система контроля версий (Version Control System) – это инструмент, который используется для отслеживания, внесения и управления изменениями в программном коде. Это также можно назвать просто контролем версий.
Системы контроля версий помогает разработчикам сохранять изменения, внесенные в файл, на разных этапах, чтобы и они сами, и их коллеги могли их увидеть позже.
Существует три типа систем контроля версий:
Локальные системы контроля версий
Централизованные системы контроля версий
Распределенные системы контроля версий
Что такое локальная система контроля версий (LVCS)?
Этот тип системы контроля версий очень распространен и прост в использовании. Однако этот метод может выдавать ошибки и подвержен атакам, потому что файлы хранятся в вашей локальной системе.
Это означает, что вы можете потерять системный файл или случайно забыть каталог, с которым вы работаете (и затем записать в другой каталог).
Что такое централизованная система контроля версий (CVCS)?
В этом типе контроля версий сервер работает как общее хранилище, в котором находятся все версии кода. CVCS помогает разработчикам работать совместно.
Однако, несмотря на то, что такой метод позволяет разработчикам сотрудничать, если сервер отключится на несколько секунд или будет поврежден, то есть шанс, что вы потеряете все файлы. Это является серьезной проблемой при работе с CVCS.
В CVCS только несколько разработчиков могут работать совместно над проектом.
Что такое распределенная система контроля версий (DVCS)?
В настоящее время это новый и наиболее часто используемый тип системы контроля версий.
В DVCS у каждого разработчика есть полная резервная копия всех данных на сервере. Это означает, что всякий раз, когда сервер не будет работать или будет неисправен, то вы все равно сможете работать над своим проектом, а также копировать или создавать резервные копии своих хранилищ на сервере, чтобы восстановить их.
При работе с DVCS над одним проектом может работать много разработчиков. Одной из популярнейших DVCS является Git, о которой мы сейчас будем говорить подробнее.
Что такое Git?
Git – это бесплатная распределенная система контроля версий с открытым исходным кодом, которую можно использовать для отслеживания изменений в ваших файлах. В Git можно работать над всеми типами и размерами проектов.
С помощью Git вы можете добавлять изменения в свой код, а затем фиксировать их (или сохранять), когда это необходимо. Это означает, что у вас есть возможность вернуться к ранее внесенным изменениям. Git работает рука об руку с GitHub. А что же такое GitHub?
Что такое GitHub?
GitHub – это веб-интерфейс, в котором можно хранить свои репозитории Git, а также эффективно отслеживать и управлять своими изменениями. С его помощью разные разработчики имеют доступ к коду одного проекта. У вас есть возможность вносить свои собственные изменения в проект одновременно с другими разработчиками.
Например, если вы вдруг допустили какую-то ошибку во время внесения изменений, вы можете легко вернуться к предыдущему этапу, где ошибки еще нет.
Для чего нужно использовать GitHub?
Есть множество причин для использования GitHub. Давайте рассмотрим некоторые из них.
Эффективное управление проектами
GitHub – это своего рода хранилище ваших репозиториев. GitHub позволяет разработчикам работать над одним проектом, находясь в разных местах.
С помощью GitHub вы можете легко отслеживать внесенные вами изменения и управлять ими, а также проверять ход вашей работы над проектом.
Простое сотрудничество
С GitHub разработчики со всего мира могут работать вместе на одним проектом без каких-либо проблем.
Команды разработчиков могут оставаться на одной странице во время совместной работы над проектом и могут легко организовывать и эффективно управлять проектом.
Открытый исходный код
GitHub – это бесплатная система с открытым исходным кодом. Это означает, что разработчики могут легко получить доступ к различным типам кода/проектов, которые они могут использовать для обучения и развития своих навыков.
Универсальность
Это свойство GitHub очень важно. GitHub – это веб-интерфейс не только для разработчиков. Его также могут использовать дизайнеры, писатели и все, кто хочет отслеживать историю своих проектов.
Как настроить Git?
Чтобы использовать Git, его необходимо загрузить на свой компьютер. Сделать это можно, зайдя на официальный сайт.
Когда сайт откроется, прокрутите страницу вниз, и вы увидите кнопку загрузки. Нажмите на нее.
Выберите свою операционную систему: Windows, MacOS, Linux/Unix. В моем случае я выбираю Windows, потому что я использую компьютер именно с этой операционной системой.
Нажмите на первую ссылку в самом верху страницы, чтобы загрузить последнюю версию Git.
Когда загрузка будет завершена, установите Git на свой компьютер. Для этого вам нужно будет перейти в папку, куда был загружен файл, и установить его.
После завершения установки, необходимо убедиться, что Git успешно установлен в вашей системе. Откройте командную строку или Git bash (в зависимости от того, что вы решили использовать) и выполните команду:
git --version
Если Git был успешно установлен на вашем компьютере, то он должен отобразить текущую версию Git под командой, которую вы только что выполнили. Если отображается, то мои поздравления!
Как настроить Git?
Теперь, когда мы установили Git на компьютер, нам нужно его настроить. Мы делаем это для того, чтобы каждый раз, когда мы работаем в команде над проектом, мы могли бы легко идентифицировать сделанные нами коммиты в репозитории.
Чтобы настроить Git, нам нужно указать имя, адрес электронной почты и ветку с помощью команды git config --global. Например:
На изображении выше мы использовали git config --global user.name для настройки имени пользователя. То же самое относится и к конфигурации git config --global user.email.
Git имеет ветку по умолчанию master, можно поменять называние, чтобы она называлась main, с помощью команды git config --global init.default branch main.
Теперь вы готовы начать использовать Git.
Чтобы настроить учетную запись GitHub, зайдите на их официальный сайт. Нажмите на кнопку регистрации в правом верхнем углу:
Когда откроется форма регистрации, введите свой адрес электронной почты, создайте пароль, введите свое имя пользователя, а затем проверьте все, прежде чем нажимать кнопку создания учетной записи.
Популярные команды Git
Есть несколько основных команд Git, которые должен знать каждый разработчик:
git config
git init
git remote add origin
git add
git commit
git clone
git push
git rm
git branch
git diff
git log
git checkout
git merge
Давайте кратко рассмотрим каждую из них, чтобы вы понимали, как их использовать.
Как использовать команду git config
Эта команда используется для того, чтобы установить имя пользователя, адрес электронной почты и ветку пользователя, чтобы определить, кто зафиксировал изменения при работе над проектом. Эта команда используется, когда вы загрузили Git на свой компьютер и хотите настроить его для своего использования.
Например:
git config --global user.name “[username]”
git config --global user.email [email address]
Как использовать команду git init
Эта команда используется для того, чтобы запустить Git в своем проекте для отслеживания изменений, внесенных в проект.
git init
Когда вы запускаете эту команду, вы должны увидеть, что папка с названием .git автоматически создалась в текущей папке, над которой вы работаете.
Как использовать команду git remote add origin
Теперь мы укажем нашей кодовой базе (папке, в которой находится наш код), где хранить наш код в облаке. Мы введем git remote add origin [your-repo-url], который установит источник для нашего репозитория. Теперь мы можем заливать (пушить) код в наш источник (origin), чтобы сохранить его на наше облако в GitHub.
Как использовать команду git add
Эта команда добавляет ваш файл в промежуточную область (staging area). Промежуточная область – это та область, в которую добавляются файлы, в которые мы вносим изменения, и где они ждут следующего коммита.
Чтобы добавить файл в промежуточную область, нужно воспользоваться командой git add. Она добавляет все файлы в папке в промежуточную область.
git add (file name) добавляет имя конкретного файла, который вы хотите зафиксировать в промежуточной области.
Эту команду нужно использовать тогда, когда вы внесли изменения в файл и хотите зафиксировать их в своем проекте.
Как использовать команду git commit
Эта команда фиксирует любой файл, который был добавлен с помощью команды git add, а также все файлы в промежуточной области.
git commit –m “first commit”
Эта команда навсегда сохраняет файл в репозиторий Git. Ее необходимо использовать каждый раз, когда вы добавляете файл в промежуточную область с помощью команды git add.
-m называется «флагом» и сигнализирует о том, что есть необязательные действия, которые мы хотели бы выполнить с этим комитом. Флаг m означает, что впоследствии мы предоставим сообщение, которое является в нашем случае - «first commit».
Как использовать команду git clone
Эта команда используется для того, чтобы скопировать существующий репозиторий в другую область из одного места в другое.
git clone (repository name)
Эта команда используется, когда вы хотите продублировать репозиторий Git из GitHub в локальное хранилище.
Как использовать команду git push
Эта команда используется для того, чтобы загрузить/отправить файлы из локального репозитория/хранилища в другое хранилище, например, в удаленное, такое как GitHub.
git push (remote storage name)
Эта команда используется только тогда, когда вы довольны всеми изменениями и комитами, которые были сделаны в проекте, и, наконец, хотите отправить их в репозиторий Git на GitHub.
Как использовать команду git rm
Эта команда используется для того, чтобы удалить файл из рабочего репозитория.
git rm (filename)
Эта команда используется только тогда, когда вам необходимо избавиться от нежелательных изменений или файлов из репозитория Git.
Как использовать команду git branch
Эта команда используется для того, чтобы проверить текущую ветку, над который вы работаете, main или master.
git branch
Эта команда поможет вам узнать имя текущей ветки, над которой вы работаете.
Как использовать команду git diff
Git покажет вам разницу между кодом, который у вас есть сейчас, и кодом, когда он был сохранен в последний раз.
Немного сложно понять, что здесь происходит, но - — это удаления, а + — вставки. Мы удалили текст Hello, this is a git example и добавили текст Now I have changed the first line. Так Git отслеживает, что изменилось между версиями.
diff --git a/git.js b/git.js
index eb0f1d1..8dbf769 100644
--- a/git.js
+++ b/git.js
@@ -1,3 +1,3 @@
+console.log('Now I have changed the first line.')
-console.log('Hello, this is a git example!')
console.log('And here is another!')
console.log('And yet a third')
Как использовать команду git log
Мы можем просмотреть сделанные нами коммиты с помощью команды git log. Это может выглядеть так:
commit 67627dd44e84a3106a18a19e94cf9f3723e59b3c (HEAD -> master)
Author: amberwilkie amber@amberwilkie.com
Date: Wed Apr 22 16:55:39 2020 -0400
Update first console log
commit 49fe4152f474a9674a83e2b014a08828209d2690
Author: amberwilkie amber@amberwilkie.com
Date: Wed Apr 22 16:54:59 2020 -0400
Initial commit
Мы видим наши сообщения комиты, время, в которое мы их совершили, и уникальный идентификатор для нашго комита, который мы можем использовать для ссылки на коммиты в будущем.
Как использовать команду git checkout
Если мы хотим вернуться и увидеть изменения в нашем коде из предыдущего коммита, мы сделаем это с помощью:
git checkout 49fe4152f474a9674a83e2b014a08828209d2690
Git поместит наш код во временное состояние, чтобы мы могли посмотреть, как код выглядел на этом снимке во времени. Тут мы использовали идентификатор комитаю
Чтобы вернуться к нашей ветке, введите git checkout [branch_name].
Как использовать команду git merge
git merge возьмет все коммиты, которые вы сделали в этой ветке, и вставит их в основную ветку, сохранив вашу работу.
Ветки
Git полагается на ветвление для поддержки нашего кода. Вы можете считать главной веткой (обычно это master или main) ствол вашего дерева кода. Вы можете отпочковаться от нее и внести некоторые изменения, но конечная цель всегда состоит в том, чтобы вернуть их в ствол, в основную ветку.
Вы можете использовать git checkout для создания новой ветки, а не только для проверки предыдущих версий вашего кода. Попробуйте использовать git checkout -b new-branch. Флаг -b используется, когда мы создаем новую ветку, и после флага мы пишем имя нашей новой ветки. Мы можем сделать много коммитов в этой ветке, а затем вернуть их в master с помощью процесса, называемого слиянием (merging), используя для этого команду git merge.
На диаграмме ниже точки обозначают коммиты. Две ветки были сделаны от мастера. В разработке программного обеспечения мы часто называем эти «функциональные» (feature) ветки, в отличие от основной главной ветки. Синяя ветвь была объединена с мастером, а желтая ветвь все еще находится в разработке.
Обратите внимание, что несмотря на то, что желтая ветка была создана после синей ветки, в этой ветке будут видны только изменения из мастера. Если мы создадим третью ветку когда-нибудь в будущем, изменения как из master, так и из синей ветки будут присутствовать в новой, третьей ветке.
Просмотр кода в GitHub
Теперь ваш код находится GitHub!
Вы можете щелкать по файлам и папкам вашего репозитория, просматривая текущее состояние кода. Вы также можете просмотреть предыдущие версии кода. Вы увидите список коммитов, сделанных в репо, и если вы нажмете на них, вы сможете просмотреть файлы вашего проекта в том виде, в каком они существовали в этот период времени.
Пулл-реквесты
Есть много других возможностей GitHub, но самая важная в совместной работе с коллегами — это пулл реквесты (pull request). Пулл реквест (очень часто сокращается до PR или ПР) — это способ управления входящими изменениями в базе кода. По сути это событие, когда один участник просит влить свои изменения в ветку.
Чтобы сделать это, вы создадите новую ветку на своем локальном компьютере, создадите хотя бы один комит в этой ветке, а затем сделайте git push origin head отправите эту ветку на GitHub. (Вы можете указать имя своей ветки вместо заголовка, но это полезно для точного соответствия всех элементов).
Теперь, когда вы вернетесь на GitHub, вы увидите, что ваша ветка доступна для создания PR.
Если вы нажмете кнопку Compare & pull request, вы сможете изменить многие настройки для своего PR. Наиболее важными, как правило, являются заголовок и описание. Если вы работаете в команде, вы можете пометить коллег, чтобы попросить их просмотреть ваш код, добавить в проекты и использовать многие другие функции.
Обратите внимание, что мы сравниваем ветки. Здесь мы просим добавить изменения из этой ветки (pr-пример) в основную ветку. Но мы могли бы ориентироваться на любую другую ветку в нашем репо. А пока просто помните, что master — не единственная ветка, с которой вы можете сделать ПР.
Когда вы нажмете Create Pull Request, вы увидите этот экран:
Вы можете посмотреть все коммиты в этой ветке, а также можете слить свой пулреквест.
Помните, как мы могли объединить наш код локально при помощи merge, когда говорили о Git? Мы можем выполнить то же действие с нашим облачным кодом на GitHub. Если вы нажмете зеленую кнопку Merge pull request, ваши изменения будут объединены в мастер.
Заключение
Благодаря этому руководству, вы узнали, что такое системы контроля версий. Также вы узнали, как установить и настроить Git на своем компьютере и настроить учетную запись GitHub. И, наконец, мы рассмотрели некоторые популярные команды Git.
Что такое DOM?
DOM
(Document Object Model) – это объектная модель документа. Это интерфейс между JavaScript и веб-браузером.
С помощью DOM вы можете написать код JavaScript для создания, изменения или удаления элементов HTML, установки стилей, классов и атрибутов, а также для принятия событий и реагирования на них.
Дерево DOM формируется из HTML-документа, и с ним уже можно будет взаимодействовать. DOM – это очень сложный API, у которого есть методы и свойства для взаимодействия с деревом DOM.
Как работает DOM – за кадром
DOM продуманно организован. Родительский элемент называется EventTarget. Приведенная ниже диаграмма поможет вам лучше понять, как это работает:
EventTarget
– это интерфейс, реализуемый объектами, которые могут принимать события и у которых могут быть обработчики этих событий. Иными словами, любой источник событий реализует три метода, которые связаны с этим интерфейсом. Самыми распространенными генераторами событий являются Element и его дочерние элементы, Document и Window. Другие объекты также могут выступать в качестве источников событий.
Объект Window
- это окно браузера. Все глобальные объекты, функции и переменные JavaScript автоматически становятся частью объекта Window. Глобальные переменные – это свойства Window. Глобальные функции – это методы Window. И даже Document (DOM HTML) является свойством Window.
window.document.getElementById("header");
// Both are same
document.getElementById("header");
В модели дом DOM есть узлы., и все части документа, такие как элементы, атрибуты, текст и т.д., организованы в виде иерархической древовидной структуры, которая состоит из родителей и потомков. Все эти части документа называются узлами (Node).
Node на приведенной выше диаграмме представлен как объект JavaScript. В основном мы работаем с document, у которого есть такие распространенные методы, как document.queryselector(), document.getElementBy Id() и т.д.
Теперь давайте посмотрим на document.
Как выбирать, создавать и удалять элементы с помощью DOM
С помощью DOM мы можем выбирать, удалять и создавать элементы в JavaScript.
Как выбирать элементы
Существует несколько способов выбрать HTML-элементы (HTML Elements) в JavaScript. Здесь мы рассмотрим следующие методы:
document.getElementById();
document.getElementByClassName();
document.getElementByTagName();
document.querySelector();
document.querySelectorAll();
Как использовать метод document.getElementById()
Метод getElementById() возвращает элемент, идентификатор которого соответствует переданной строке. Идентификаторы элементов HTML должны быть уникальными, поэтому это самый быстрый способ выбрать элемент с идентификатором.
Пример:
const ele = document.getElementById("IDName");
console.log(ele); // This will log the whole HTML element
Как использовать метод document.getElementByClassName()
Метод document.getElementByClassName() возвращает HTMLCollection элементов, которые соответствуют имени переданного класса. Можно искать сразу несколько имен классов, передав их через пробел. Тогда этот метод вернет «живую» HTMLCollection.
Что такое «живая» HTMLCollection? Это означает, что как только мы получим HTMLCollection для какого-то имени класса, и если мы добавим элемент с тем же именем класса, то HTMLCollection автоматически обновится.
Пример:
const ele = document.getElementByClassName("ClassName");
console.log(ele); // Logs Live HTMLCollection
Как использовать метод document.getElementByTagName()
Метод document.getElementByTagName() возвращает HTMLCollection элементов, которые соответствуют переданному имени тега. Его можно вызывать для любого элемента HTML. Метод вернет «живую» HTMLCollection.
Пример:
const paragraph = document.getElementByTagName("p");
const heading = document.getElementByTagName("h1");
console.log(paragraph); // p element HTMLCollection
console.log(heading); // h1 element HTMLCollection
Как использовать метод document.querySelector()
Метод document.querySelector() возвращает первый элемент, который соответствует переданному селектору. Здесь мы можем передать имя класса, идентификатор и имя тега. Давайте посмотрим на пример ниже:
const id = document.querySelector("#idname"); // using id
const classname = document.querySelector(".classname"); // using class
const tag = document.querySelector("p"); // using tagname
Правила выбора:
если вы выбираете по имени класса, то используйте (.) в начале. Например, (“.classname”).
если вы выбираете по идентификатору, то используйте (#) в начале. Например, (“#id”).
если вы выбираете по имени тега, то просто введите тег. Например, (“p”).
Как использовать метод document.querySelectorAll()
Метод document.querySelectorAll() - это расширение метода querySelector. Этот метод возвращает все элементы, которые соответсвуют переданному селектору. Он возвращает «неживую» коллекцию Nodelist.
Пример:
const ele = document.querySelectorAll("p");
console.log(ele); // return nodelist collection of p tag
ПРИМЕЧАНИЕ
: HTMLCollection – это «живая» коллекция, а коллекция Nodelist – статическая.
Как создавать элементы
Вы можете создавать HTML-элементы в JavaScript и динамически добавлять их в HTML. Вы можете создать любой элемент HTML с помощью метода document.createElement(), просто передав имя тега в скобках.
После того, как элемент будет создан, вы сможете добавить к нему имя класса, атрибуты и текст.
Вот пример:
const ele = document.createElement("a");
ele.innerText = "Click Me";
ele.classList.add("text-left");
ele.setAttribute("href", "www.google.com");
// update to existing element in HTML
document.querySelector(".links").prepend(ele);
document.querySelector(".links").append(ele);
document.querySelector(".links").befor(ele);
document.querySelector(".links").after(ele);
// Simalar to below anchor tag
// Click Me
В приведенном выше примере мы создали тег привязки (anchor) в JavaScript и добавили атрибуты и имя класса к этому тегу. Там же у нас есть четыре метода для того, чтобы обновить созданный элемент в HTML.
prepend(): вставляет данные поверх своего первого дочернего элемента.
append(): вставляем данные или содержимое внутрь элемента по последнему индексу.
before(): вставляет данные перед выбранным элементом.
after(): помещает элемент после указанного элемента. Или можно сказать, что он вставляет данные за пределами элемента (делая это содержимое элементом того же уровня) в набор подходящих элементов.
Как удалять элементы
Мы знаем, как создавать элементы на JavaScript и помещать их в HTML. Но, что если нам нужно удалить элементы в HTML? Это довольно просто! Нам достаточно воспользоваться методом remove() для нужного элемента.
Вот пример:
const ele = document.querySelector("p");
// This will remove ele when clicked on
ele.addEventListner('click', function(){
ele.remove();
})
Как управлять CSS из JavaScript
Мы знаем, как управлять HTML из JavaScript. А теперь мы узнаем, как управлять CSS из JavaScript. Это может помочь вам динамически менять стиль ваших веб-страниц.
Например, если вы нажимаете на элемент, то его фоновый цвет должен поменяться. Это реально сделать, управляя CSS из JavaScript.
Вот пример синтаксиса:
const ele = document.querySelector("desired element");
ele.style.propertyName = value;
// E.g -
ele.style.color = red;
Когда вы меняете свойства CSS с помощью JavaScript, помните, что всякий раз, когда в CSS печатается «-», в JavaScript там будет стоять заглавная буква. Например, в CSS вы бы написали background-color, а в JavaScript – backgroundColor (с большой буквы C).
Вот пример:
const ele = document.querySelector("div");
ele.style.backgroundColor = "red";
Предположим, что вы написали код CSS для своего проекта и хотите добавить классы с помощью JavaScript. Это можно сделать с помощью classList в JavaScript.
Вот еще один пример:
const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // add class bg-red to existing class list
ele.classList.remove("pb-4");// remove class bg-red from existing class list
ele.classList.toggle("bg-green"); // toggle class bg-red to existing class list which means if it already exists then it will be removed, if it doesn't exist it will be added.
classList добавляет, удаляет или переключает классы относительно какого-то элемента. Это чем-то похоже на обновление существующих классов.
В отличие от element.className, он удаляет все существующие классы и добавляет указанный класс.
И еще один пример:
const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // add class bg-red to existing class list
ele.classList.remove("pb-4");// remove class bg-red from existing class list
ele.className = "p-10"; // Now this will remove all existing classes and add only "p-10 class to element."
Как использовать обработчики событий
Событие (Event) – это изменение состояния объекта. Обработка событий (Event Handling) – процесс реагирования на события.
События происходит всякий раз, когда пользователь щелкает кнопкой мыши, наводит курсор на элемент, нажимает клавишу и т.д. Поэтому, когда происходит событие, и вы хотите выполнить какое-то действие, то вы используете обработчики событий, чтобы это действие произошло.
Мы используем обработчики событий для того, чтобы выполнить определенный код, когда это конкретное событие происходит. В JavaScript есть несколько обработчиков событий, однако процесс их добавления к элементам одинаков.
Вот синтаксис:
const ele = document.querySelector("a");
ele.addEventListner("event", function(){
// callback function
});
Вот некоторые события, которые вы можете использовать:
click
mouseover
mouseout
keypress
keydown
А вот пример использования события «click» (нажатия на кнопку мыши):
const ele = document.querySelector("a");
ele.addEventListner("click", function(){
ele.style.backgroundColor = "pink";
});
Распространение событий: всплывание событий и перехват событий
Распространение событий определяет то, в каком порядке элементы будут получать события. Существует два способа обработки порядка распространения событий в DOM: всплывание событий и перехват событий.
Что такое всплывание событий?
Когда в каком-то компоненте происходит событие, то он сначала на нем запускается обработчик событий, только потом на его родительском компоненте, а затем уже и на всех остальных компонентах, которых называют предками.
По умолчанию все обработчики событий перемещаются именно в этом порядке - от события центрального компонента к событию компонента, который находится от него дальше всех.
Что такое перехват событий?
Этот способ – противоположность предыдущему. Обработчик событий запускается сначала на родительском компоненте, а уже потом на том компоненте, на котором он фактически и должен был сработать.
Проще говоря, это означает, что событие сначала перехватывается самым удаленным элементом, а затем распространяется на внутренние элементы. Также этот способ называют «просачиванием вниз».
Давайте попробуем запустить следующий пример:
Example
Этот код выдаст нам следующее:
Теперь давайте внимательно изучим приведенный выше пример. Я добавил получатель событий к тегу nav и тегу anchor. Когда вы нажимаете на nav, то цвет фона меняется на зеленый. Когда вы нажимаете на тег anchor, то цвет фона меняется на розовый.
Но когда вы нажимаете на тег anchor, то цвет фона меняется как у nav, так и у anchor. Это происходит из-за всплывания событий.
Вот что происходит, когда вы нажимаете только на элемент nav:
А вот что происходит, когда вы нажимаете только на элемент anchor:
Для того, чтобы остановить распространение событий, мы можем воспользоваться методом stoppropagation() на получателе событий, из-за которого и происходит распространение события. В таком случае в приведенном выше примере получатель событий элемента nav не сработает.
Example
Как перемещаться по модели DOM
«Хороший разработчик JavaScript должен знать, как перемещаться по модели DOM. Перемещаться по модели DOM значит выбирать один элемент из другого,» - Зелл Лью.
Теперь посмотрим, почему лучше обойти модель DOM, чем использовать метод document.querySelector(), и как это выполнить на профессиональном уровне.
Есть три способа обхода модели DOM:
Снизу-вверх
Сверху-вниз
Продольный
Как обойти модель DOM снизу-вверх
Существует два метода, которые помогут вам перемещаться по модели DOM снизу-вверх:
parentElement
closest
parentElement – это свойство, которое выбирает родительский элемент, например:
const ele = document.querySelector("a");
console.log(ele.parentElement); //
parentElement отлично подходит для того, чтобы выбрать элемент, который находится на один уровень выше. Но closest позволяет найти элемент, который может быть на несколько уровней выше текущего. closest позволяет вам выбрать ближайший элемент-предок, который соответствует селектору.
Вот пример с использованием closest:
const ele = document.querySelector(".heading");
console.log(ele.closest(".demo")); // This is heading
В приведенном выше фрагменте кода мы пытаемся получить ближайший элемент к .heading, который имеет класс .demo.
Как обойти модель DOM сверху-вниз
Мы можем перемещаться вниз, используя метод селектора children. При таком подходе вы можете выбрать прямого потомка нужного элемента.
Вот пример:
const ele = document.querySelector("div");
const child = ele.children;
console.log(child); // gives HTMLCollection
// 4 element inside div
Как обойти модель DOM продольно
Это очень интересный вопрос, как же мы можем продольно обойти DOM. В основном мы можем использовать лишь два метода:
previousElementSibling
nextElementSibling
С помощью метода previousElementSibling мы можем выбрать предшествующие элементы в HTML:
This is sample
This is heading
This heading 2
Link-1
const ele = document.querySelector("h1");
console.log(ele.previousElementSibling); // Link-1
А с помощью метода nextElementSibling мы можем выбрать последующие элементы в HTML:
Heading
Link-1
const ele = document.querySelector("a");
console.log(ele.nextElementSibling); //