📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Я хоть и не новичок, но как же приятно видеть на просторах образовательного ру-контента такой крутой, понятный и полезный контент Александр, спасибо вам
Больше спасибо за видео. Очень помогло освежить знания. Можно в следующем уроке рассказать подробнее о том как работать с slot элементами? Как искать их по дереву и проходить в них. Вообщем все о slot. Спасибо большое.
Про slot - это Web Components API? В рамках этого курса про это, увы, не будет. Это весьма специфичная тема. Но отдельное видео, в принципе, сделать не проблема. Мне и самому интереснее копнуть в эту тему глубже.
Уже давно! Ну, пару недель назад начал ведь про JS в браузере рассказывать 😅 А впереди ещё два месяца концентрированного контента, по два видео в неделю 😎 Курс планирую закончить в октябре.
После того, как в браузерном JS изучишь DOM (поиск элементов на странице, их свойства и атрибуты, размеры и координаты, управление стилями), события (понятия всплытия и погружение, делегирование событий, отмена дефолтного браузерного поведения, основные события мыши, клавиатуры, фокуса, событие отправки формы).
Я подразумеваю тему клиент-серверного взаимодействия. Ну грубо говоря функция fetch, get / post запросы, обработка ответа от сервера, статусы запросов.
Удобно как раз таки от document всегда искать, указывая в аргументах CSS-селектор посложнее. Но производительнее будет по-возможности использовать уже имеющуюся ссылку на DOM-элемент и уже от него искать вглубь дерева.
По душню... Псевдомассивы, такие как NodeList, возвращаемые методами вроде document.querySelectorAll(), часто фиксированы в момент создания. Это означает, что если DOM изменится, содержимое такого NodeList не обновится автоматически.
Да, про разницу статической и живой коллекции было упомянуто в этом видео и в следующих уроках курса на этих особенностях неоднократно будет сделан акцент.
Да, и в рамках курса в конце некоторых уроках и в целом, после курса, будет серия видео по отдельным компонентам на ванильном JS и мастер-класс по верстке с JS.
Чтобы было меньше ошибок в коде. С тем, что возвращает querySelectorAll, обычно работают так - перебирают методом forEach и выполняют какие-то действия, например: document .querySelectorAll('a') .forEach((element) => { … }) Если бы метод querySelectorAll возвращал null, пришлось бы делать дополнительные проверки: const linkElements = document.querySelectorAll('a') if (linkElements) { linkElements.forEach((element) => { … }) } Ну или применять повсюду оператор опциональной последовательности: document .querySelectorAll('a') ?.forEach((element) => { … })
Хм, не слышал о таком. А какие есть альтернативы? Типа getElementsByClassName для поиска по CSS-классам? На мой субъективный взгляд по CSS-классам искать в DOM-дереве - не лучшая практика. А поиск по селектору атрибута, который я пропагандирую в этом видео, возможен только через методы querySelector и querySelectorAll. В любом случае - проблема querySelector быть может и есть, но высосана из пальца, т. к. на перформанс по-большей части влияют другие факторы, типа неоптимального расхода памяти (неиспользующиеся лишние переменные, отсутствие оных и написание однотипных повторяющихся выражений вместо сохранения результата выражения в промежуточную переменную, утечки памяти и т. д. и т. п.) В общем, проблема не в синтаксисе JS, а в том, как им пользуются разработчики :)
@@AleksanderLamkov Ну вот что к примеру getElementById - самый быстрый из-за внутренних оптимизаций браузера. Но лично я сам стараюсь только querySelector использовать :) Мне кажется - это из той же области, что var в каких-то случаях эффективнее работает чем let, const. Короче - тема для гиков и холиваров :)
Никакие. Просто в моем понимании классы лучше использовать только в CSS-коде. Когда в JS-коде для доступа к элементам используются data-атрибуты, то при чтении разметки будет сразу понятно, какой элемент будет как-либо задействован в JS-коде, а какой нет.
9:24 ты сказал querySelector и querySelectorAll покрывает 99% задач поэтому не используются эти а getElementById забыл перечислить или почему не сказал его?
У getElementById нет тех преимуществ, которые есть в рассмотренных после 9:24 методах. Он возвращает всегда либо null, либо ссылку на первый DOM-элемент с определенным id. И значение этого выражения будет актуально только на момент вызова метода. Другие же методы, getElementsByTagName, getElementsByClassName и getElementsByName всегда возвращают живую коллекцию HTMLCollection, в которой всегда будут содержаться актуальные данные, соответствующие текущему состоянию DOM-дерева.
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Спасибо за отличное видео. Особенно понравился акцент на нэйминге и дата-атрибутах.
Я хоть и не новичок, но как же приятно видеть на просторах образовательного ру-контента такой крутой, понятный и полезный контент
Александр, спасибо вам
Спасибо за отличное видео! Очень полезно подчеркнул для себя информацию с именованием через data!
Крутые рекомендации по неймингу! Также топ пояснение про статические и живые коллекции!
Спасибо вам за очень полезный контент
Я не новичок, но очень понравилось, обращение внимания на нейминг переменных 😉👍
Спасибо, Александр!
Нравится эта тема, супер, лайк!
Спасибо!
Лучший! Как всегда
Больше спасибо за видео. Очень помогло освежить знания. Можно в следующем уроке рассказать подробнее о том как работать с slot элементами? Как искать их по дереву и проходить в них. Вообщем все о slot. Спасибо большое.
Про slot - это Web Components API? В рамках этого курса про это, увы, не будет. Это весьма специфичная тема. Но отдельное видео, в принципе, сделать не проблема. Мне и самому интереснее копнуть в эту тему глубже.
Жду полноценного платного курса, если в свободном доступе такой крутой формат, то что будет в курсе, если он конечно будет)
Будет! Обязательно будет. И по качеству не хуже, чем бесплатные курсы на канале :)
@@AleksanderLamkov Спасибо!
@@AleksanderLamkov А будет ли еще один мастер-класс по верстке с использованием JS или это и будет в платном курсе?
Будет в виде бесплатного контента на канале. Сразу после окончания этого курса.
о, ты теперь и дом элементы будешь объяснять?) теперь только у тебя смотреть буду!
Уже давно! Ну, пару недель назад начал ведь про JS в браузере рассказывать 😅
А впереди ещё два месяца концентрированного контента, по два видео в неделю 😎
Курс планирую закончить в октябре.
@@AleksanderLamkov подскажи, а когда апи изучать?
После того, как в браузерном JS изучишь DOM (поиск элементов на странице, их свойства и атрибуты, размеры и координаты, управление стилями), события (понятия всплытия и погружение, делегирование событий, отмена дефолтного браузерного поведения, основные события мыши, клавиатуры, фокуса, событие отправки формы).
@@AleksanderLamkov А о чем конкретно речь? Какое api? Вроде растяжимое понятие, не понял контекста😮
Я подразумеваю тему клиент-серверного взаимодействия. Ну грубо говоря функция fetch, get / post запросы, обработка ответа от сервера, статусы запросов.
Я тоже предпочитаю использовать дата-атрибуты для поиска элементов. Стрелял пару раз себе в ногу с классами. Не критично но неприятно)
5:40 интересно почему разработчики забывают про это, это же удобно
Удобно как раз таки от document всегда искать, указывая в аргументах CSS-селектор посложнее. Но производительнее будет по-возможности использовать уже имеющуюся ссылку на DOM-элемент и уже от него искать вглубь дерева.
По душню... Псевдомассивы, такие как NodeList, возвращаемые методами вроде document.querySelectorAll(), часто фиксированы в момент создания. Это означает, что если DOM изменится, содержимое такого NodeList не обновится автоматически.
Да, про разницу статической и живой коллекции было упомянуто в этом видео и в следующих уроках курса на этих особенностях неоднократно будет сделан акцент.
@@AleksanderLamkov будет практика на нативном js?
Да, и в рамках курса в конце некоторых уроках и в целом, после курса, будет серия видео по отдельным компонентам на ванильном JS и мастер-класс по верстке с JS.
5:31 интересно почему мы получим пустой nodeList а не null
Чтобы было меньше ошибок в коде.
С тем, что возвращает querySelectorAll, обычно работают так - перебирают методом forEach и выполняют какие-то действия, например:
document
.querySelectorAll('a')
.forEach((element) => {
…
})
Если бы метод querySelectorAll возвращал null, пришлось бы делать дополнительные проверки:
const linkElements = document.querySelectorAll('a')
if (linkElements) {
linkElements.forEach((element) => {
…
})
}
Ну или применять повсюду оператор опциональной последовательности:
document
.querySelectorAll('a')
?.forEach((element) => {
…
})
Слышал мнение, что querySelector не самый быстрый метод из подобных. Но вряд ли стоит учитывать это при оптимизации приложения?
Хм, не слышал о таком. А какие есть альтернативы? Типа getElementsByClassName для поиска по CSS-классам? На мой субъективный взгляд по CSS-классам искать в DOM-дереве - не лучшая практика. А поиск по селектору атрибута, который я пропагандирую в этом видео, возможен только через методы querySelector и querySelectorAll.
В любом случае - проблема querySelector быть может и есть, но высосана из пальца, т. к. на перформанс по-большей части влияют другие факторы, типа неоптимального расхода памяти (неиспользующиеся лишние переменные, отсутствие оных и написание однотипных повторяющихся выражений вместо сохранения результата выражения в промежуточную переменную, утечки памяти и т. д. и т. п.)
В общем, проблема не в синтаксисе JS, а в том, как им пользуются разработчики :)
@@AleksanderLamkov Ну вот что к примеру getElementById - самый быстрый из-за внутренних оптимизаций браузера. Но лично я сам стараюсь только querySelector использовать :) Мне кажется - это из той же области, что var в каких-то случаях эффективнее работает чем let, const. Короче - тема для гиков и холиваров :)
Какие могут возникнуть проблемы при поиске в DOM по классам?
Никакие.
Просто в моем понимании классы лучше использовать только в CSS-коде.
Когда в JS-коде для доступа к элементам используются data-атрибуты, то при чтении разметки будет сразу понятно, какой элемент будет как-либо задействован в JS-коде, а какой нет.
9:24 ты сказал querySelector и querySelectorAll покрывает 99% задач поэтому не используются эти
а getElementById забыл перечислить или почему не сказал его?
У getElementById нет тех преимуществ, которые есть в рассмотренных после 9:24 методах.
Он возвращает всегда либо null, либо ссылку на первый DOM-элемент с определенным id. И значение этого выражения будет актуально только на момент вызова метода.
Другие же методы, getElementsByTagName, getElementsByClassName и getElementsByName всегда возвращают живую коллекцию HTMLCollection, в которой всегда будут содержаться актуальные данные, соответствующие текущему состоянию DOM-дерева.
форыч