Как работает всплытие в JavaScript
Представьте себе следующее: у вас есть коробка (родительский элемент), и внутри неё находится ещё одна меньшая коробка (дочерний элемент). Когда вы касаетесь (или кликаете) меньшей коробки, ваше прикосновение не только ощущается на меньшей коробке, но и как бы «передаётся» на большую коробку.
В JavaScript это называется всплытием: если событие, например клик, происходит на внутреннем элементе, оно начинает перемещаться вверх к наружным элементам.
Вот так это может выглядеть в реальном коде:
Для настройки логики в JS также предусмотрена остановка всплытия
Если вы не хотите, чтобы событие поднималось вверх, можно его остановить с помощью
Когда используется всплытие?
— Всплытие удобно, когда вам нужно обрабатывать похожие события для группы элементов.
— Оно пригодится, когда вы хотите определить, что событие произошло на каком-то уровне и больше не важно, что происходит дальше в иерархии.
#простымисловами #javascript
Представьте себе следующее: у вас есть коробка (родительский элемент), и внутри неё находится ещё одна меньшая коробка (дочерний элемент). Когда вы касаетесь (или кликаете) меньшей коробки, ваше прикосновение не только ощущается на меньшей коробке, но и как бы «передаётся» на большую коробку.
В JavaScript это называется всплытием: если событие, например клик, происходит на внутреннем элементе, оно начинает перемещаться вверх к наружным элементам.
Вот так это может выглядеть в реальном коде:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="parent" style="padding: 20px; background-color: lightblue;">
Большая коробка (Parent Div)
<div id="child" style="padding: 20px; background-color: lightcoral;">
Меньшая коробка (Child Div)
</div>
</div>
<script>
document.getElementById('parent').addEventListener('click', function(event) {
alert('Клик по большой коробке!');
});
document.getElementById('child').addEventListener('click', function(event) {
alert('Клик по меньшей коробке!');
});
</script>
</body>
</html>
Для настройки логики в JS также предусмотрена остановка всплытия
Если вы не хотите, чтобы событие поднималось вверх, можно его остановить с помощью
event.stopPropagation(). Например, добавив это в код клика по меньшей коробке, вы сможете предотвратить срабатывание события для большей коробки.Когда используется всплытие?
— Всплытие удобно, когда вам нужно обрабатывать похожие события для группы элементов.
— Оно пригодится, когда вы хотите определить, что событие произошло на каком-то уровне и больше не важно, что происходит дальше в иерархии.
#простымисловами #javascript
Чёрная пятница — отличный повод инвестировать в развитие своей карьеры с максимальной выгодой
Как не захламлять свой дом ненужными вещами с распродаж? Вкладываться в себя. Знания — лучшая инвестиция, которая поможет вам увеличить доход и купить всё, что вы действительно хотите.
В Нетологии вы можете освоить новую профессию или получить навыки для роста в карьере. Только в ноябре любой курс доступен со скидкой до –40%, но и это ещё не всё — на сайте вы найдёте промокод на дополнительную скидку на 10, 15, 20 тысяч рублей. А при единой оплате сможете получить ещё -5%.
Двойные скидки для максимальной выгоды. Распродажа продлится с 15 по 24 ноября.
Это #партнёрский пост
Как не захламлять свой дом ненужными вещами с распродаж? Вкладываться в себя. Знания — лучшая инвестиция, которая поможет вам увеличить доход и купить всё, что вы действительно хотите.
В Нетологии вы можете освоить новую профессию или получить навыки для роста в карьере. Только в ноябре любой курс доступен со скидкой до –40%, но и это ещё не всё — на сайте вы найдёте промокод на дополнительную скидку на 10, 15, 20 тысяч рублей. А при единой оплате сможете получить ещё -5%.
Двойные скидки для максимальной выгоды. Распродажа продлится с 15 по 24 ноября.
Это #партнёрский пост
Топ JavaScript-фреймворков для быстрой разработки в 2025
Для JS существует огромное количество фреймворков. Возможно, пока вы читаете этот текст, вышел ещё один новый фреймворк.
Но как понять какие стоят внимания, какие — нет? Какие стоит использовать сегодня, а какие уже устарели?
Мы составили подборку JavaScript-фреймворков, которые достойны вашего внимания и точно будут актуальны в следующем году. Переходите по ссылке и выбирайте свой.
#javascript #подборка
Для JS существует огромное количество фреймворков. Возможно, пока вы читаете этот текст, вышел ещё один новый фреймворк.
Но как понять какие стоят внимания, какие — нет? Какие стоит использовать сегодня, а какие уже устарели?
Мы составили подборку JavaScript-фреймворков, которые достойны вашего внимания и точно будут актуальны в следующем году. Переходите по ссылке и выбирайте свой.
#javascript #подборка
Неизвестно полезный CSS
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
#css
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
#css
Django или FastAPI: какой фреймворк выбрать в 2025 году
Django и FastAPI — одни из самых популярных фреймворков Python. На какой стоит обращать внимание сейчас при начале работы с новым проектом?
В этой статье мы подробно разберём все основные критерии при выборе между этими фреймворками для начинающих свой путь разработчиков — востребованность фреймворка на рынке труда, тренды, которые повлияют на их востребованность в будущем, а так же важные особенности, которые нужно учитывать при выборе.
https://tproger.ru/articles/django-vs-fastapi-v-2025-godu--kakoj-frejmvork-vybrat-
#бэкенд #python #django #fastapi
Django и FastAPI — одни из самых популярных фреймворков Python. На какой стоит обращать внимание сейчас при начале работы с новым проектом?
В этой статье мы подробно разберём все основные критерии при выборе между этими фреймворками для начинающих свой путь разработчиков — востребованность фреймворка на рынке труда, тренды, которые повлияют на их востребованность в будущем, а так же важные особенности, которые нужно учитывать при выборе.
https://tproger.ru/articles/django-vs-fastapi-v-2025-godu--kakoj-frejmvork-vybrat-
#бэкенд #python #django #fastapi
Какое из следующих утверждений о всплытии (hoisting) в JavaScript является верным?
Anonymous Quiz
7%
Только переменные, объявленные с помощью let, подвергаются всплытию.
24%
Переменные и функции полностью инициализируются до выполнения кода.
55%
Объявления функций поднимаются на вершину своей области видимости, а выражения функций — нет.
13%
Константы, объявленные с const, подвергаются всплытию и инициализируются со значением undefined.
CSR, SSG, SSR — виды рендеринга приложений на примерах
Сегодня используется три основных способа рендеринга страницы: CSR — рендеринг на стороне клиента, SSG — генерация статического сайта и, наконец, SSR — рендеринг на стороне сервера. У каждого из этих подходов есть свои плюсы, минусы и важные особенности.
В статье автор рассказал и показал их основные различия, кейсы использования и практические примеры:
https://habr.com/ru/companies/alfa/articles/725626/
#фронтенд
Сегодня используется три основных способа рендеринга страницы: CSR — рендеринг на стороне клиента, SSG — генерация статического сайта и, наконец, SSR — рендеринг на стороне сервера. У каждого из этих подходов есть свои плюсы, минусы и важные особенности.
В статье автор рассказал и показал их основные различия, кейсы использования и практические примеры:
https://habr.com/ru/companies/alfa/articles/725626/
#фронтенд
This media is not supported in your browser
VIEW IN TELEGRAM
Коллекция лоадеров и скелетонов для вашего проекта
В этой подборке содержится большое количество лоадеров самых разных стилей: радиальные, с точками, полосы загрузки и прочее. Также здесь есть несколько готовых скелетонов.
Все они выполнены на HTML и CSS с применением препроцессоров. Так что всё, что вам нужно сделать — скопировать их в свой проект.
#html #css #лоадер
В этой подборке содержится большое количество лоадеров самых разных стилей: радиальные, с точками, полосы загрузки и прочее. Также здесь есть несколько готовых скелетонов.
Все они выполнены на HTML и CSS с применением препроцессоров. Так что всё, что вам нужно сделать — скопировать их в свой проект.
#html #css #лоадер
Сокращения JavaScript экономящие время
Разработчик, пишущий чистый, эффективный и лаконичный код может значительно сократить время разработки. И понимание ряда удобных сокращений JavaScript может сделать код более читаемым и помочь избежать повторяющихся шаблонов.
В статье вы найдёте 10 сокращений JavaScript, способных сэкономить часы работы над кодом и повысить производительность. Но помните о том, что иногда такие сокращения могут, наоборот, усложнить читаемость кода, поэтому используйте их с умом.
https://www.dev-notes.ru/articles/javascript/ten-javascript-shortcuts-to-save-hours-of-coding/
#javascript
Разработчик, пишущий чистый, эффективный и лаконичный код может значительно сократить время разработки. И понимание ряда удобных сокращений JavaScript может сделать код более читаемым и помочь избежать повторяющихся шаблонов.
В статье вы найдёте 10 сокращений JavaScript, способных сэкономить часы работы над кодом и повысить производительность. Но помните о том, что иногда такие сокращения могут, наоборот, усложнить читаемость кода, поэтому используйте их с умом.
https://www.dev-notes.ru/articles/javascript/ten-javascript-shortcuts-to-save-hours-of-coding/
#javascript
Media is too big
VIEW IN TELEGRAM
Учимся работать с DOM в JS
Урок для начинающих, который поможет вам разобраться, как работать с элементами DOM-дерева в JavaScript. За полчаса вы пройдёте 26 упражнений, где вы научитесь:
— создавать и удалять элементы на нашей странице;
— динамически создавать HTML-разметку;
— добавлять классы к элементам;
— использовать обработчики событий на созданных элементах
и многому другому.
Смотреть можно здесь или на YouTube.
#видео #javascript #начинающим
Урок для начинающих, который поможет вам разобраться, как работать с элементами DOM-дерева в JavaScript. За полчаса вы пройдёте 26 упражнений, где вы научитесь:
— создавать и удалять элементы на нашей странице;
— динамически создавать HTML-разметку;
— добавлять классы к элементам;
— использовать обработчики событий на созданных элементах
и многому другому.
Смотреть можно здесь или на YouTube.
#видео #javascript #начинающим
Forwarded from Точка входа в программирование
Что происходит, когда вы вводите адрес сайта и нажимаете Enter
Несмотря на фундаментальность вопроса, в нем ошибаются или не могут дать точного ответа даже Senior-разработчкии. Что уж говорить о джунах.
Но теперь вы можете разобраться в вопросе благодаря этой статье. Здесь без сложных терминов вы изучите процесс от ввода URL до полной загрузки и отображения страницы в браузере.
#веб #сеть
Несмотря на фундаментальность вопроса, в нем ошибаются или не могут дать точного ответа даже Senior-разработчкии. Что уж говорить о джунах.
Но теперь вы можете разобраться в вопросе благодаря этой статье. Здесь без сложных терминов вы изучите процесс от ввода URL до полной загрузки и отображения страницы в браузере.
#веб #сеть
10 признаков плохого кода
Проблема плохих программистов в том, что они не знают об этом. Они пишут, как умеют, а вот разбираться с этим приходится другим.
Чтобы вы не стали плохими программистами, лучше заранее знать о признаках, выдающих плохие практики в разработке ПО. Например, хардкод, сложные условия и так далее. Изучите их, чтобы быть уверенными в собственном коде.
Подробности в статье.
#советы
Проблема плохих программистов в том, что они не знают об этом. Они пишут, как умеют, а вот разбираться с этим приходится другим.
Чтобы вы не стали плохими программистами, лучше заранее знать о признаках, выдающих плохие практики в разработке ПО. Например, хардкод, сложные условия и так далее. Изучите их, чтобы быть уверенными в собственном коде.
Подробности в статье.
#советы
Делаем админскую панель со статистикой
Это большой курс, на котором вы научитесь создавать дашборд с анимацией, чартами и таблицами.
Фронтенд будет разрабатываться на Next.js / React. Стили реализуем с использованием Tailwind CSS. А также добавим типизацию с помощью TypeScript. Бэкенд А ещё поработаем с chart.js и framer motion.
Взято отсюда.
#курс #туториал
Это большой курс, на котором вы научитесь создавать дашборд с анимацией, чартами и таблицами.
Фронтенд будет разрабатываться на Next.js / React. Стили реализуем с использованием Tailwind CSS. А также добавим типизацию с помощью TypeScript. Бэкенд А ещё поработаем с chart.js и framer motion.
Взято отсюда.
#курс #туториал