По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
Данная статья посвящена, наверное, самой сложной части начальной части изучения Linux - правам доступа. В данной статье будет рассказано о правах доступа, владельцах файлов, папок.
Цели статьи:
Просматривать и изменять владельцев объектов.
Устанавливать правила доступа к объектам.
Понимать право “Execute”
Основные команды для работы с правами доступа:
chown – установка владельца
chgrp – установка группы владельца
chmod – установка прав доступа
В Windows у нас есть только один владелец файла или папки. Это можно посмотреть в свойствах объекта на вкладке безопасность, дополнительно и там же мы можем сменить владельца. Владелец в Windows по умолчанию обладает полными правами на объект. В Linux все происходит немного по-другому: Любой объект моет иметь своего владельца и группу владельцев, и кроме этого для объекта существуют все остальные пользователи в системе. Это самое существенное различие, что может быть владелец и группа владельцев.
И так у меня есть пользователь petya и пользователь siadmin. Теперь посмотрим информацию по этим двум пользователям. Чтобы посмотреть воспользуемся командой id siadmin и id petya.
У моего пользователя есть uid, который говорит, что я siadmin и вхожу в группу siadmin. Когда мы создаем нового пользователя группа по умолчанию совпадает с именем пользователя. Т.е каждый пользователь по умолчанию входит в свою собственную группу. Для пользователя petya я создал группу не по его имени. Я создал группу testusers и включил данного пользователя в данную группу и установил данную группу по умолчанию для данного пользователя.
Я нахожусь в домашней папке. Набрав команду ls –l мы можем посмотреть список каталогов и файлов, у каждого из них есть владелец и группа владельцев. Эти данные указаны в колонках. Для файла test1.txt владельцем является root и группа владельцев root.
Я создал папку Folder и файл test2.txt и назначил владельца и группу владельцев, согласно картинке. Для изменения данных параметров используется команда chown. Данную команду необходимо применять с повышением в привилегиях, через команду sudo. Например, изменим владельца для файла test1.txt. команда будет выглядеть так sudo chown petya test1.txt. Пароль не запросило, т.к я уже его вводил.
Как мы видим все успешно отработало. Если раньше был владелец root, то теперь мы видим petya. Для изменения группы мы так же можем воспользоваться командой sudo chgrp testusers test1.txt.
Данная команда chgrp используется редко, т.к вполне достаточно знать команду chown. Данная команда умеет менять в том числе и группу. Простой пример изменим группу используя команду chown :testusers file.txt. Просто перед группой ставим знак : который и говорит, что надо заменить группу на указанную. А можно сделать сразу 2 действия chown petya:testusers file1.txt
Немного сумбура вносит, что у пользователя группа по умолчанию совпадает с именем пользователя. Но это стандартное поведение Linux, который так заводит группу. Даже суперпользователь root имеет свою группу root. При создании пользователя petya был принудительно включен в группу testusers и она была выставлена по умолчанию для данного пользователя.
Еще есть важный момент, который необходимо упомянуть. Это рекурсивное выставление владельцем или группы владельцев на папки или файлы. Т.е если у нас есть папка родительская и в ней дочерние папки и файлы, а то и несколько вложений, а мы хотим изменить владельца или группу владельцев рекурсивно вниз, то команду chown необходимо использовать с ключем –R.
Пример: sudo chown –R siadmin:testusers Folder
Права доступа
Далее вернемся к самой первой картинке. На картинке добавлены подписи на английском языке. Это сделано, для большей наглядности. Потому, что сейчас будем раздавать права на объекты файловой системы файлы, папки и другие объект. Следовательно, права будут присваиваться владельцам, группе владельцев и все остальные. Права для владельцев – это user - (u), права для группы владельцев group - (g), Права для всех остальных other - (o).
Для того, чтобы далее разбираться с темой прав, надо запомнить вот такую табличку.
В классическом Linux, есть 3 вида доступа к объекту, это право на чтение, право на запись и право на выполнение и различные комбинации из этих прав. Заглавные буквы на верху таблицы отвечают за какое-либо право. Цифрами обозначены значения данных прав. Если мы даем право на чтение, то оно обозначается r--, если чтение и запись то rw-, если даем все права то rwx. Мы можем объединять данные права, как видите в табличке различные комбинации указаны. Всего 8 комбинаций от "нет прав", до "полных прав". Так же данная комбинация может назначаться в виде цифр. Т.е на какой то файл у такого товарища доступ 5, это значить что данный товарищ имеет право читать файл и запускать на выполнение. Посчитать очень просто чтение это - 4 , а выполнение – это 1, а в сумме будет 5 или по другому r-x. Следовательно мы можем назначать, как в цифровом, так и в символьном варианте права.
Еще один не маловажный момент мы назначаем права на файл, сразу для всех видов пользователей. Следовательно, указывая права, мы их сразу задаем для владельца, для группы владельца и всех остальных. Права мы можем назначать. Точно так же как на картинке символами rwx или цифрами, согласно табличке. Для лучшего понимания пример:
Chmod 750 script - полные права владельцу, чтение и выполнение группе владельца и ничего всем остальным.
Когда мы просматриваем права на объекты мы видим символьные обозначения, а там, где нет символа ставится прочерк, который означает, что данное право отсутствует.
Право <<rwx rw- r-->> script - полные права владельцу, чтение и запись группе владельца, чтение остальным.
Чтобы легче было определять права на объект надо мысленно разделить на блоки по 3 символа. Первый блок — это Владелец, 2-й Блок — это группа владельца и 3-й блок — это другие пользователи.
Сhmod u+w script - дать право записи владельцу.
Chmod ugo-x script - отобрать у всех право исполнения файла.
Посмотреть, какие объекты находятся в директории и их права можно командой ls –la. Так же мы видим владельца и группу владельца. Теперь мы можем понимать первую строчку.
Вывод из всего этого, напрашивается следующий. Владелец у объекта файловой системы может быть только один. В группу testusers или другую мы можем добавить кого угодно и они будут следовательно иметь права, как группа владельцев. И, следовательно, все остальные пользователи, т.е не владелец и не входящие в группу, будут относится к категории всех остальных пользователей. Получается Linux нам дает разбить всех на три группы и в соответствии с этим назначить различные права, а Windows ведет себя по-другому и там можно более гибко задавать права. Мы можем создать 100 пользователей и каждому из них дать какие-то свои уникальные права. В Linux тоже это возможно с помощью разных ACL (Access Control List - лист доступа), но это не входит в базовые понятия, которые мы разбираем в рамках данной статьи.
Можно заметить ,что для папки спереди появляется символ d. Это d – directory каталог. Может появляться l – link – ссылка и.т.д.
Следовательно, можно убирать права указывая у кого, например, забрать выполнение chmod ugo-x test1.txt или мы можем добавить владельцу chmod u+x test1.txt. И третий вариант изменения прав на файл - это полностью перезаписать права на объект chmod 640 test1.txt.
Разберемся с правом на execute – выполнение.
Понятно становится это права, когда мы имеет дело с каким-то скриптом или бинарником или программой исполняемой. Так же у нас данное право может назначаться на каталог, а каталог мы исполнить не можем. Но тут есть интересный момент, если у вас будет на папку разрешение только на чтение и запись, прочитать папку, переименовать ее т.е поработать с наименованием папки, но в глубь папки вы не сможете зайти. Чтобы зайти во внутрь папки необходимо право execute – т.е выполнение ее.
Маска создания файлов и папок
В данной части статьи рассмотрим следующий вопрос:
Понимание принципов работы и управления масками создания файлов и папок.
Основные понятия:
umask – маска создания файлов и папок
suid – бит запуска от имени владельца
sgid – бит запуска от имени группы владельцев
sticky – бит защиты содержимого
Первое понятие umask - user creation mask - т.е маска с которой создается новая папка или файл, это то с какими правами по умолчанию будут создаваться папки и файлы для данного пользователя. В том случае если не создано каких-то особенных настроек наследования папки.
suid – set user id, который позволяет, если установлен на исполняемый файл, то любой пользователь, который запускает, получает права определенные для владельца данного файла. По-другому, позволяет использовать права владельца данного файла, происходит некая подмена вас на владельца этого файла.
sgid – set user id, который позволяет, если установлен на исполняемый файл, то любой пользователь, который запускает, получает права определенные для группы владельца данного файла. По-другому, позволяет использовать права группы владельца данного файла, происходит некая подмена вас на пользователя входящего в группу владельца этого файла.
Маска это такая интересная штука, которая указывает права по–умолчанию. Она рассчитывается с помощью вычитания из максимальных прав. Примеры вычисления показаны на картинке.
Посмотрим, как выглядит это в консоли.
Создадим текстовый файл от имени стандартного пользователя touch test10.txt.
Мы видим права, которые были выданы по умолчанию 664, соответственно я являюсь владельцем и моя группа.
Создадим папку mkdir TestFolder.
Выданы права по умолчанию 775. Теперь посмотрим правило действующее. Почему создаются объекты именно с такими правами. Этот параметр находится в профиле в старых версиях, сейчас он перенесен и за данный параметр отвечает утилита pam_umask. Если мы откроем мануал по данной утилите, то мы увидим, что данный параметр находится в /etc/login.defs
Видим, что значение umask = 022. – это значение, которое идет по умолчанию во всех дебиан подобных операционных системах.
Введем новое значение umask 075. Создадим новый файл touch test20.txt.
Получаем права 602.
После перезагрузки маска изменится на маску по умолчанию, чтобы маску нужную зафиксировать, необходимо отредактировать файл /etc/login.defs. Следовательно, для нашего пользователя значить маска изменится с 022 на ту маску, которую там пропишем.
Нужно обратить внимание, что при создании папки права на выполнение по умолчанию выдаются, а на файл нет. Это связанно с тем, что без данных прав в данную папку невозможно будет зайти, а с файла убираются в целях защиты. Например, если вдруг окажется, что файл – это вредоносный код.
Suid, sgid, sticky
Рассмотрим оставшийся вопрос. Зачем нужны suid, sgid и sticky, биты и их установка.
Suid – устанавливается для файлов.
Sgid – устанавливается для файлов и для папок
Sticky – устанавливается для папок.
У них у всех есть цифровые значения. Их можно назначать точно так же, как и права, можно назначать через rwx или цифирные сочетания, а также т.к есть цифирные обозначения их можно комбинировать. Если мы установили 6 то мы установили suid и sgid. Этот бит через цифры ставится, точно так же, как и права, только ставим дополнительную цифру перед цифрами, означающими права.
Так же эти биты можно ставить, через буквы:
Chmod u+s script - установка suid
Chmod g+s script - установка sgid
Chmod o+t script - установка sticky
Как мы видим suid добавляется к правам владельца, sguid прибавляется к правам группы владельца. Sticky добавляется к правам всем остальным.
Как мы видим создан файл script.run с правами 755 и папка TestFolder 755. Установим suid бит на файл script.run. В настоящее время данный файл может выполнить любой человек. Изменим права на 770 - sudo chmod 770 script.run. Переключимся под пользователя, который не входит в группу siadmin. Например, пользователь su petya. Можно конечно добавить права пользователю petya, но иногда нужно, чтобы файлик запустился из-под Владельца файла. Даже если будут стоять разрешение на запуск данного файла и будет стоять suid, то файл запуститься из под Владельца.
Устанавливаем sudo chmod u+s script.run и видим, во-первых, теперь у нас файлик подкрашен красным, данное выделение делает оболочка. Во-вторых, когда мы смотрим права, то видим x заменился на s. И теперь, кто бы не запускал файл, он всегда будет запускать от имени Владельца.
Можно подробнее посмотреть через команду stat script.run, которая показывает полную статистику по файлу.
Мы можем увидеть, что права стали теперь 4770. Вот эта самая цифра 4 впереди и говорит, что установлен suid бит. Мы аналогично можем убрать suid бит sudo chmod u-s script.run. Все вернулось на свои места.
Для чего это нужно, есть некоторые программы которым необходим доступ к аппаратной части. Например ping, который проверяет связь, ему нужен доступ к сетевой карте. По умолчанию права на ping есть только у root, но если мы хотим чтобы все пользователи могли использовать данную утилиту, то мы должны разрешить ее запуск от имени root. Фактически та же самая функция, как и в операционной системе Windows запустить от пользователя. Аналогичным образом работает и sgid, если нам необходимо запускать от группы владельца, то устанавливаем этот бит и можем пользоваться - sudo chmod g+s script.run.
Результат наших действий подсвечен желтым.
Можно одновременно оба бита установить, следовательно, при выполнении будет и владелец заменен и группа заменена. Это имеет смысл делать, только для исполняемых файлов. Устанавливать на обычный текстовый файл данные биты, смысла конечно же нет.
Очень редко, когда применяю оба бита сразу, такое сочетание необходимо если уж сильно кто-то заморачивается с безопасностью или требуется ювелирная настройка прав доступа и запуска.
Теперь посмотрим, что с папкой происходит. На папку можно устанавливать sgid и sticky биты. Если мы устанавливаем групповой бит, то он для папок будет менять владельцев всех вложенных файлов на группу владельцев этой папки, т.е это один из вариантов наследования.
Создадим файл от пользователя siadmin. Touch file.txt в текущей папки он создается со стандартными правами. Установим sgid на папку TestFolder - Sudo chmod g+s TestFolder.
Создадим в ней такой же файл sudo touch TestFolder/file.txt
Как мы видим группа осталась прежней. Если пользователю root сказать создать файл в текущем каталоге, то владелец и группа будут root.
Теперь про sticky бит. Если установлен sticky бит на папку, то только Владелец данной папки или суперпользователь может удалить из нее файлы.
Создадим папку Folder, поставим на нее максимальные права 777. И внутри создадим файл file.txt.
Файлик с правами по умолчанию. Поменяем права на данный фал 666. Права на чтение и запись появились теперь у всех. Переключимся на другого пользователя, например, petya. Перейдем в домашний каталог пользователя siadmin - cd /home/siadmin/Folder. Внутри файл txt, который мы создавали. И удаляем rm file.txt. Файл удалился без проблем. Допустим мы хотим защитить от удаления, следовательно, необходимо установить sticky бит - sudo chmod o+t Folder
Как видим появилась буква t на месте прав для всех остальных. Создадим еще раз файл touch file1.txt. Даем на данный файл всем права 666. А далее перелогиниваемся под petya. Заходим в папку /home/siadmin/Folder и командой rm file1.txt пытаемся удалить, на что получаем отказ от системы. Несмотря на права 666, система не дает удалить файл. Следовательно, удалить все вложенные объекты может либо root или Владелец папки.
SugarCRM - самая распространенная в мире CRM (customer relationship management) или система взаимоотношений с клиентом, являющаяся системой с открытым кодом, или проще говоря «Open Source». Созданная в 2004 году, на текущий момент SugarCRM удовлетворяет потребности свыше 7 000 клиентов, которые создают маркетинговые кампании, увеличивают продажи, повышают лояльность клиентов и используют различные бизнес приложения.
Уникальность SugarCRM заключается в том, что это «Open Source» приложение, а следовательно, оно доступно всем пользователям, будь то разработчик или конечный клиент продукта. Получив исходный код, клиент имеет возможность самостоятельно управлять информацией и приложениями внутри CRM и инсталлировать ее в зависимости от требований. Рассмотрим возможные редакции SugarCRM:
Community Edition (CE) - CE распространяется в рамках лицензии AGPLv3. С 2004 года, CE скачало больше 8 миллионов человек. Данная версия обеспечивает базовый функционал для отдела продаж, маркетинга, поддерживает автоматизацию процессов, пользователей и соответствующих прав. В рамках Community Edition, доступны такие модули как Studio и Module Builder, которые позволяет исправлять ту или иную настройку под конкретное предприятие. Распространяется бесплатно.
Professional Edition (PE) - PE - коммерческое издание SugarCRM, которое устанавливается на базе CE и имеет расширенный функционал. Из всех доступных опций, отметим наиболее важные:
Поддержка «Команд», в рамках которых, можно группировать пользователей по правилам отделов, департаментов или рабочего функционала.
Мощный механизм построения отчетности, который позволяет создавать собственные отчеты по работе сотрудников в виде круговых диаграмм, графиков и статистических данных.
Специально оптимизированная для мобильных телефонов WEB – версия SugarCRM, которая полностью совместима с iPhone и Android смартфонами.
Плагины для Microsoft Office, Outlook, Word и Excel.
Corporate Edition (CorpEd) - Это новая редакция добавлена вместе с релизом версии 6.2, позволяет выстроить следующий функционал поверх существующей PE инсталляции:
Расширенная мобильная версия, которая позволяет хранить данные в режиме оффлайн, совместимо с iPhone, iPad и Blackberry платформами.
Более высокий уровень технической поддержки клиента.
Enterprise Edition (EE) - Перечислим дополнительные опции версии EE:
Улучшенная система отчетности
Оффлайн клиент для работы сотрудников
Специальный портал, в рамках которого осуществляется облегченное взаимодействие с SugarCRM
Специальный плагин для работы с управленческими процессами и документами Lotus Notes
Поддержка базы данных Oracle
Высочайший уровень технической поддержки клиента.
Ultimate Edition (UE) - UE является самым богатым изданием с точки зрения инструментария и функционала. Ко всем вышеперечисленным функциям добавляются:
Коннектор к серверу приложений Lotus Domino Server
Самый высокий из возможных сервис технической поддержки
Что необходимо для установки SugarCRM?
Для базовой инсталляции необходимо:
Компьютер/сервер (поддерживается Unix или Windows ОС)
WEB – сервер (Apache .x или IIS 6 и 7.x)
База данных (MySQL 5.x, SQL Server 2005/2008 или Oracle 10g/11g)
Последняя версия PHP для работы с вышеуказанными компонентами (5.2 или 5.3 поддерживается)
Браузер для доступа к самой CRM (IE 7/8, Firefox, Safari и Chrome)
Если у вас имеется новый дистрибутив Linux, все эти компоненты должны быть доступны из под менеджера пакетов (deb, rpm). Сам по себе инсталлятор это набор web – процедур. Все что нужно, это распаковать скачанный пакет в корне web – сервера и открыть эту директорию через интернет браузер. Пошаговый инсталлятор запросит необходимую информацию и произведет установку.
Что такое 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); //