Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?
Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.
Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.
#вопросы_по_javascript
Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.
Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.
#вопросы_по_javascript
👍2
Что такое декораторы и к чему их можно применить?
Декоратор - это особый вид объявления, который позволяет вам изменять классы или члены классов сразу, помечая их аннотацией name. Каждый декоратор должен ссылаться на функцию, которая будет оцениваться во время выполнения.
Например, декоратор @sealed будет соответствовать запечатанной функции. Все, что помечено @sealed, будет использоваться для оценки запечатанной функции.
Их можно прикрепить к:
- Объявлениям классов
- Методам
- Свойствам-аксессорам
- Свойствам
- Параметрам
По умолчанию декораторы не включены. Чтобы включить их, вы должны отредактировать поле experimentalDecorators в параметрах компилятора в файле tsconfig.json или в командной строке.
#вопросы_по_typescript
Декоратор - это особый вид объявления, который позволяет вам изменять классы или члены классов сразу, помечая их аннотацией name. Каждый декоратор должен ссылаться на функцию, которая будет оцениваться во время выполнения.
Например, декоратор @sealed будет соответствовать запечатанной функции. Все, что помечено @sealed, будет использоваться для оценки запечатанной функции.
Их можно прикрепить к:
- Объявлениям классов
- Методам
- Свойствам-аксессорам
- Свойствам
- Параметрам
По умолчанию декораторы не включены. Чтобы включить их, вы должны отредактировать поле experimentalDecorators в параметрах компилятора в файле tsconfig.json или в командной строке.
#вопросы_по_typescript
👍4
В чем разница между двойным двоеточием и одним двоеточием в :: before и: after? Объясните роль этих двух псевдоэлементов.
В css3 одиночное двоеточие используется для представления псевдоклассов, а двойное двоеточие используется для представления псевдоэлементов. Но для обеспечения совместимости с существующим написанием псевдоэлементов в некоторых браузерах для представления псевдоэлемента также может использоваться одно двоеточие.
Псевдоклассы обычно соответствуют некоторым особым состояниям элементов, таким как наведение, ссылка и т. Д., Тогда как псевдоэлементы обычно соответствуют особым позициям, таким как после, до и т. Д.
#вопросы_по_css
В css3 одиночное двоеточие используется для представления псевдоклассов, а двойное двоеточие используется для представления псевдоэлементов. Но для обеспечения совместимости с существующим написанием псевдоэлементов в некоторых браузерах для представления псевдоэлемента также может использоваться одно двоеточие.
Псевдоклассы обычно соответствуют некоторым особым состояниям элементов, таким как наведение, ссылка и т. Д., Тогда как псевдоэлементы обычно соответствуют особым позициям, таким как после, до и т. Д.
#вопросы_по_css
👍11
Объясните делегирование событий
Всплытие событий позволяет реализовать один из самых важных приёмов разработки - делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому - мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Зачем использовать:
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
#вопросы_по_javascript
Всплытие событий позволяет реализовать один из самых важных приёмов разработки - делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому - мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Зачем использовать:
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
#вопросы_по_javascript
👍7
Атрибут alt
Всегда устанавливайте атрибут alt для тега img и не используйте в нем слова image и picture. Альтернативный текст предназначен для скринридеров, которые и так объявляют элемент как изображение, зачем повторяться?
#вопросы_по_html
Всегда устанавливайте атрибут alt для тега img и не используйте в нем слова image и picture. Альтернативный текст предназначен для скринридеров, которые и так объявляют элемент как изображение, зачем повторяться?
#вопросы_по_html
❤7👍2
Что такое Reducer? ⚡
Reducer — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.
Редюсеры определяют, как состояние приложения изменяется в ответ на экшены, отправленные в стор. Экшены только описывают, что произошло, но не описывают, как изменяется состояние приложения.
Reducer — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.
Редюсеры определяют, как состояние приложения изменяется в ответ на экшены, отправленные в стор. Экшены только описывают, что произошло, но не описывают, как изменяется состояние приложения.
❤11👍1
Делаем полноценный проект в портфолио от А до Я. Бесплатно.
Немного обо мне. Меня зовут Андрей, я Senior Frontend разработчик. Веду Ютуб и несколько ТГ каналов. Обучаю Frontend разработке бесплатно всех желающих.
Недавно я провёл опрос среди подписчиков и многие поддержали мою идею. Я решил сделать большой проект, большой плейлист, в котором мы реализуем огромное количество функционала. Гарантирую, такой проект сделает из вас мидла.
Переходи в наш канал с анонсами, чтобы не пропустить: @senior_javascript
Немного обо мне. Меня зовут Андрей, я Senior Frontend разработчик. Веду Ютуб и несколько ТГ каналов. Обучаю Frontend разработке бесплатно всех желающих.
Недавно я провёл опрос среди подписчиков и многие поддержали мою идею. Я решил сделать большой проект, большой плейлист, в котором мы реализуем огромное количество функционала. Гарантирую, такой проект сделает из вас мидла.
Переходи в наш канал с анонсами, чтобы не пропустить: @senior_javascript
👍4
Open-Closed Principle (Принцип открытости-закрытости)
Модули, отвечающие принципу открытости-закрытости, имеют два главных признака:
- Открыты для расширения. Поведение модуля может быть расширено. Мы можем добавить модулю новое поведение в соответствии с изменившимися требованиями к приложению или для удовлетворения нужд новых приложений.
- Закрыты для изменений. Исходный код такого модуля неприкасаем. Никто не вправе вносить в него изменения.
Модули, отвечающие принципу открытости-закрытости, имеют два главных признака:
- Открыты для расширения. Поведение модуля может быть расширено. Мы можем добавить модулю новое поведение в соответствии с изменившимися требованиями к приложению или для удовлетворения нужд новых приложений.
- Закрыты для изменений. Исходный код такого модуля неприкасаем. Никто не вправе вносить в него изменения.
🤩4👍3❤2
Расскажите про тег IFRAME?
Тег IFRAME в основном используется для встраивания документов в HTML-документ. Однако последние разработки в HTML 5 лишили поддержки тега IFRAME, поэтому вам следует избегать его использования.
#вопросы_по_html
Тег IFRAME в основном используется для встраивания документов в HTML-документ. Однако последние разработки в HTML 5 лишили поддержки тега IFRAME, поэтому вам следует избегать его использования.
#вопросы_по_html
👍4
var, let и const в JS
Область видимости var переменных ограничена функцией, если вы обратитесь к переменной до её объявления, то получите undefined.
const и let ограничены блоком, а попытка обратится к переменной
до её объявления, вернётся ошибкой ReferenceError.
И наконец, разница между let и const в том, что в первом случае вы можете изменить значение переменной, а во втором нет.
Область видимости var переменных ограничена функцией, если вы обратитесь к переменной до её объявления, то получите undefined.
const и let ограничены блоком, а попытка обратится к переменной
до её объявления, вернётся ошибкой ReferenceError.
И наконец, разница между let и const в том, что в первом случае вы можете изменить значение переменной, а во втором нет.
👍8
Для чего используется Noresize?
Атрибут Noresize используется во фреймах. Он используется для предотвращения изменения размера кадра в HTML-документе пользователем. Однако размер рамки по умолчанию можно изменить, и вы можете сделать это, щелкнув и перетащив границы любого кадра.
#вопросы_по_html
Атрибут Noresize используется во фреймах. Он используется для предотвращения изменения размера кадра в HTML-документе пользователем. Однако размер рамки по умолчанию можно изменить, и вы можете сделать это, щелкнув и перетащив границы любого кадра.
#вопросы_по_html
👍10
Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?
Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.
Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.
#вопросы_по_javascript
Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.
Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.
#вопросы_по_javascript
👍6
Объясните, что такое блочный контекст форматирования и как он работает.
Блочный контекст форматирования — часть механизма отображения веб-страницы в CSS. Это регион страницы, в котором блоки размещаются в привычном для блоков порядке, и в котором плавающие элементы взаимодействуют с другими элементами.
Блочный контекст форматирования может быть создан чем-либо из этого списка:
- плавающие элементы (элементы, у которых float не равно none)
- абсолютно позиционированные элементы (элементы, значение position которых либо absolute, либо fixed)
- «строчные блоки» (элементы с display: inline-block)
- флекс-элементы (непосредственные потомки элемента с display: flex или inline-flex)
- грид-элементы (непосредственные потомки элемента с display: grid или inline-grid) многоколоночные контейнеры (элементы, у которых column-count или column-width не - равно auto, включая элементы с column-count: 1)
#вопросы_по_css
Блочный контекст форматирования — часть механизма отображения веб-страницы в CSS. Это регион страницы, в котором блоки размещаются в привычном для блоков порядке, и в котором плавающие элементы взаимодействуют с другими элементами.
Блочный контекст форматирования может быть создан чем-либо из этого списка:
- плавающие элементы (элементы, у которых float не равно none)
- абсолютно позиционированные элементы (элементы, значение position которых либо absolute, либо fixed)
- «строчные блоки» (элементы с display: inline-block)
- флекс-элементы (непосредственные потомки элемента с display: flex или inline-flex)
- грид-элементы (непосредственные потомки элемента с display: grid или inline-grid) многоколоночные контейнеры (элементы, у которых column-count или column-width не - равно auto, включая элементы с column-count: 1)
#вопросы_по_css
👍8
Промисы (promises) и их полифилы
Промис — это объект, который может вернуть одно значение в будущем: либо выполненное значение, либо причину, по которой оно не было выполнено (например, произошла ошибка сети). Промис может находиться в одном из 3 возможных состояний: выполнено, отклонено или ожидает выполнения. При использовании промисов можно добавлять callback-функции для обработки выполенного значения или причины отказа.
Некоторыми распространёнными полифилами являются $.deferred, Q и Bluebird, но не все они соответствуют спецификации. ES2015 поддерживает промисы "из коробки", и в настоящее время полифилы обычно не нужны.
#вопросы_по_javascript
Промис — это объект, который может вернуть одно значение в будущем: либо выполненное значение, либо причину, по которой оно не было выполнено (например, произошла ошибка сети). Промис может находиться в одном из 3 возможных состояний: выполнено, отклонено или ожидает выполнения. При использовании промисов можно добавлять callback-функции для обработки выполенного значения или причины отказа.
Некоторыми распространёнными полифилами являются $.deferred, Q и Bluebird, но не все они соответствуют спецификации. ES2015 поддерживает промисы "из коробки", и в настоящее время полифилы обычно не нужны.
#вопросы_по_javascript
👍9
This media is not supported in your browser
VIEW IN TELEGRAM
Фронтенд гайды — канал для верстальщиков, в котором публикуют:
✓ Полезный код
✓ Макеты для верстки
✓ Тесты на знание кода
Ускорь работу над своим проектом!
✓ Полезный код
✓ Макеты для верстки
✓ Тесты на знание кода
Ускорь работу над своим проектом!
👍2
Перечислите все виды списков, которые можно использовать для создания веб-страниц
В HTML есть 3 вида списков:
- Упорядоченный список: отображает элементы в пронумерованном формате. В тег обозначает упорядоченный список
- Неупорядоченный список: отображает элементы в маркированном формате. В тег обозначает неупорядоченный список
- Список определений: отображает элементы в форме определения, подобной словарю. В , а также теги обозначают список определений.
#вопросы_по_html
В HTML есть 3 вида списков:
- Упорядоченный список: отображает элементы в пронумерованном формате. В тег обозначает упорядоченный список
- Неупорядоченный список: отображает элементы в маркированном формате. В тег обозначает неупорядоченный список
- Список определений: отображает элементы в форме определения, подобной словарю. В , а также теги обозначают список определений.
#вопросы_по_html
JavaScript вопрос: Какой из перечисленных методов мутирует исходный массив, а не возвращает новый?
#тест
#тест
👍2
Что такое кэш приложения в HTML5?
Одной из наиболее востребованных функций для конечного пользователя является работа в автономном режиме. Другими словами, если соединение с интернетом недоступно, страница должна возвращаться из кэша браузера, и кэш приложения поможет вам в этом.
Кэш приложения помогает вам определить, какие файлы должны быть кэшированы, а какие нет.
#вопросы_по_html
Одной из наиболее востребованных функций для конечного пользователя является работа в автономном режиме. Другими словами, если соединение с интернетом недоступно, страница должна возвращаться из кэша браузера, и кэш приложения поможет вам в этом.
Кэш приложения помогает вам определить, какие файлы должны быть кэшированы, а какие нет.
#вопросы_по_html
👍5
Объясните делегирование событий
Всплытие событий позволяет реализовать один из самых важных приёмов разработки - делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому - мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Зачем использовать:
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
#вопросы_по_javascript
Всплытие событий позволяет реализовать один из самых важных приёмов разработки - делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому - мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Зачем использовать:
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
#вопросы_по_javascript
👍9🔥1
Какие новые псевдоклассы добавлены в CSS3?
(1) elem: nth-child (n) выбирает n-й дочерний элемент под родительским элементом, и метка этого дочернего элемента - elem, n может принимать определенные значения или функции.
(2) elem: nth-last-child (n) выполняет ту же функцию, что и выше, но выполняет поиск сзади.
(3) elem: last-child выбирает последний дочерний элемент.
(4) elem: only-child Если elem является единственным дочерним элементом родительского элемента, выберите его.
(5) elem: nth-of-type (n) Выберите элемент n-го типа под родительским элементом. N может принимать определенные значения или функции.
(6) elem: first-of-type выбирает первый элемент типа elem под родительским элементом.
(7) elem: last-of-type выбирает последний элемент типа elem под родительским элементом.
#вопросы_по_css
(1) elem: nth-child (n) выбирает n-й дочерний элемент под родительским элементом, и метка этого дочернего элемента - elem, n может принимать определенные значения или функции.
(2) elem: nth-last-child (n) выполняет ту же функцию, что и выше, но выполняет поиск сзади.
(3) elem: last-child выбирает последний дочерний элемент.
(4) elem: only-child Если elem является единственным дочерним элементом родительского элемента, выберите его.
(5) elem: nth-of-type (n) Выберите элемент n-го типа под родительским элементом. N может принимать определенные значения или функции.
(6) elem: first-of-type выбирает первый элемент типа elem под родительским элементом.
(7) elem: last-of-type выбирает последний элемент типа elem под родительским элементом.
#вопросы_по_css
👍5