Руслан Куянец | Reactify

Поднятие переменных в JavaScript #JavaScript #code #hoisting

Поднятие переменных в JavaScript Понимание механизма поднятия переменных (или "hoisting") — ключевой элемент для эффективной работы с JavaScript. Этот процесс часто может вводить в заблуждение, особенно новичков, поэтому давайте разберемся, что это такое. ✨ Что такое поднятие (hoisting)? Поднятие — это особенность JavaScript, когда объявления переменных "поднимаются" или перемещаются в верхнюю часть текущей области видимости. Но здесь важно понимать: поднимается только объявление, а не инициализация (присвоение значения). 🔍 Что еще стоит знать? Поднятие также затрагивает объявления функций: полное объявление функции "поднимается" вверх. У функциональных выражений (когда переменной присваивается функция) поднимается только объявление переменной, но не её значение. 💡 Поднятие переменных — это механизм, с которым каждый разработчик на JavaScript сталкивается, независимо от уровня опыта. Понимание этого явления поможет избежать ненужных ошибок и написать более чистый и предсказуемый код. #JavaScript #ОбучающийПост #hoisting

С момента своего появления, AJAX революционизировал веб, предоставив разработчикам мощный инструмент для создания интерактивных веб-приложений без необходимости перезагружать страницу. Но как и всё в мире технологий, пришло время для новых изменений. 🌐 Что пришло на смену AJAX? 🚀 Fetch API: Нативное средство для отправки асинхронных HTTP-запросов, введенное в ES6. Гораздо более гибкий и модульный, поддерживает промисы, что упрощает работу с асинхронным кодом. Не просто "обертка", а стандартный API, предоставляемый современными браузерами, заменяя устаревший XMLHttpRequest. 📚 Axios: Популярная библиотека JavaScript, которая может работать поверх Fetch API или XMLHttpRequest. Автоматическое преобразование ответов в JSON. Улучшенная обработка ошибок, что позволяет разработчикам легче реагировать на различные сценарии. Также использует промисы, делая код более структурированным и понятным. Стандарты веба и потребности пользователей быстро меняются. Fetch и Axios предоставляют более современные, эффективные и гибкие решения для общения с сервером. Они делают код чище, упрощают обработку ошибок и интеграцию с современными фреймворками и библиотеками. #ОбучающийПост #AJAX #JavaScript #fetch #axios

1️⃣Мы добавляем обработчик событий для всего документа, который будет отслеживать клики. 2️⃣Если элемент, по которому был совершен клик, имеет класс 'add-to-cart', это означает, что пользователь нажал на кнопку добавления товара в корзину. 3️⃣Из этой кнопки мы извлекаем атрибут data-product-id, который содержит уникальный идентификатор товара, который пользователь хочет добавить в корзину. 4️⃣Функция addToCart отвечает за отправку AJAX-запроса на сервер для добавления выбранного продукта в корзину. 🔹Создаем новый экземпляр объекта XMLHttpRequest, который будет использоваться для выполнения асинхронного запроса. 🔹Мы устанавливаем метод запроса как POST и указываем URL-адрес сервера, куда будет отправлен запрос. Устанавливаем заголовок Content-Type как application/json;charset=UTF-8, указывая, что мы будем отправлять данные в формате JSON. 🔹Далее мы указываем функцию, которая будет вызвана, когда сервер ответит на наш запрос. При успешном ответе сервера мы обновляем содержимое корзины на странице. 🔹После, мы конвертируем объект с идентификатором продукта в строку JSON и отправляем его на сервер. #AJAX #ОбучающийПост #JavaScript

AJAX, стоящий за аббревиатурой "Asynchronous Javascript And XML", представляет собой революционный метод обращения к серверу без необходимости полной перезагрузки страницы. Эта технология обогатила пользовательский опыт, делая веб-приложения быстрыми, плавными и похожими на приложения для рабочего стола. 🚀 Ключевые особенности: 1️⃣Быстрый отклик: Благодаря AJAX, пользователь может видеть обновленные данные на странице без длительного ожидания. 2️⃣Динамичная подгрузка: AJAX позволяет подгружать данные в реальном времени, что идеально подходит для деревьев меню, где содержание узлов подгружается при их раскрытии. 3️⃣Живой поиск: Современные веб-приложения активно используют AJAX для мгновенного поиска, предоставляя результаты по мере ввода запроса. 4️⃣Универсальность данных: Несмотря на присутствие "XML" в названии, AJAX может работать с различными форматами данных, включая JSON, HTML, простой текст и даже бинарные файлы. 📌 Применение AJAX: 🔹Интерактивные элементы: AJAX позволяет создавать кнопки и формы, которые обрабатывают пользовательский ввод без перезагрузки страницы. Примеры таких элементов - кнопки "Добавить в корзину" в интернет-магазинах или кнопка "Подписаться" на новостные рассылки. 🔹Динамическая загрузка контента: С AJAX можно динамически подгружать новый контент или данные на страницу без необходимости её перезагрузки. Это особенно полезно для сайтов с большим количеством информации, например, каталогов товаров или онлайн-галерей. 🔹Мгновенный поиск: AJAX используется для создания функций "живого поиска", где результаты начинают отображаться сразу при вводе запроса пользователем, без необходимости нажимать кнопку "Поиск". #AJAX #ОбучающийПост #JavaScript

Спред оператор в JavaScript: Спред оператор — это мощный инструмент, призванный обеспечивать гибкость при манипулировании данными, делая ваш код более универсальным и читаемым. 🔹Спред оператор позволяет "распространять" элементы массива или свойства объекта, делая их индивидуальными элементами или свойствами. Особенности: 🎯Назначение: В отличие от рест оператора, который "собирает" элементы или свойства, спред оператор "расширяет" или "распространяет" их. 📖Синтаксис: Спред оператор также начинается с троеточия (...), но используется в слегка иных контекстах. #JavaScript #обучающийПост

Новое видео. Добавил пагинацию в приложение🎯 https://youtu.be/3iE8BbL0038

Деструктуризация и Рест оператор в JavaScript: Призваны обеспечивать гибкость и элегантность при работе с данными, делая код более понятным и кратким. Их корректное использование может значительно повысить читаемость и эффективность вашего кода. 🔹Деструктуризация позволяет локализованно и явно извлекать значения из массивов или свойства из объектов. 🔹Рест оператор позволяет собирать "остаточные" элементы в массив или свойства объекта в новый объект. Различия: 🎯Назначение: Деструктуризация извлекает и присваивает индивидуальные элементы или свойства, в то время как рест оператор собирает "оставшиеся" элементы или свойства. 📖Синтаксис: Деструктуризация использует конструкции {} или [] в зависимости от типа данных. Рест оператор начинается с .... #JavaScript #ОбучающийПост

Хочу вам посоветовать очень крутой ресурс для обучения JavaScript. Это онлайн учебник https://learn.javascript.ru Этот учебник всегда в моем браузере во вкладках и в свободное время я перечитываю темы. Тут вся актуальная теория, так как учебник постоянно обновляется и дополняется. ✅ #book #JavaScript

Нативные и Host-объекты 1️⃣Нативные объекты: Это основные "строительные блоки" языка JavaScript, которые всегда доступны, независимо от того, где вы запускаете свой код. 🔹Object: Основной объект, на котором построено большинство других объектов. 🔹Date: Объект для работы с датами и временем. 🔹Math: Предоставляет математические функции и константы. 🔹parseInt, eval: И другие глобальные функции и свойства. Преимущества нативных объектов: 📖Они являются частью стандарта ECMAScript и предоставляют основные функции языка. 🔑Где бы вы ни запускали код на JavaScript, нативные объекты будут доступны. 2️⃣Host-объекты (или объекты хоста): Эти объекты предоставляются окружением выполнения (например, браузером) и не являются частью самого языка JavaScript. Примеры в браузерной среде: 🔹window: Глобальный объект для браузера. 🔹document: Объект, представляющий текущую веб-страницу. 🔹XMLHttpRequest: Для выполнения асинхронных запросов к серверу. 🔹setTimeout: Позволяет выполнять код через заданный интервал времени. Что нужно знать про host-объекты: 🛠Они могут сильно отличаться в разных средах выполнения. Например, в Node.js будут другие host-объекты, чем в браузере. 📌Они дополняют возможности языка в конкретной среде, предоставляя доступ к уникальным для этой среды функциям. Понимание различий между нативными объектами и объектами хоста поможет вам писать более гибкий и устойчивый код, особенно когда дело доходит до работы в разных средах выполнения. #ОбучающийПост #JavaScript #Objects

На выходных выйдет еще одно видео с пагинацией. Будем дозировать контент с сервера, переключать страницы. Собственно для этого мы и делали скелетон, чтобы при переключении страниц и получении новых новостей наш контент не скакал😄

Вышло новое видео. В этом видео мы добавляем Скелетон и отслеживваем статус загрузки новостей. Так же работаем в таск менеджере, работаем с гитом (ветки, ПР, мердж). https://youtu.be/FeDSumhe0kQ

Если у нас будет 1000 элементов списка, то мы создадим 1000 обработчиков, что может стать причиной замедления работы страницы. При использовании делегирования, независимо от количества элементов, у нас будет только один обработчик на родительский элемент. Это делает код более производительным и легко масштабируемым. #code #JavaScript #делегирование

При клике на любой элемент списка li, сработает обработчик, привязанный к родительскому элементу ul, и выведет содержимое выбранного элемента списка. #JavaScript #code #делегирование

Вы когда-нибудь сталкивались с ситуацией, когда нужно было обрабатывать события множества элементов на странице? Делегирование событий — это решение этой задачи, которое сделает ваш код гораздо проще и эффективнее. 💡 Что такое делегирование событий? Это техника, при которой вы не привязываете обработчик события к каждому элементу отдельно. Вместо этого, вы назначаете один обработчик для их общего родителя. Когда событие происходит, вы можете определить, на каком именно элементе оно случилось, используя event.target. 📌 Как это работает? Назначьте обработчик события контейнеру (родителю). Когда событие произойдёт, через event.target вы узнаете, на каком дочернем элементе оно случилось. Обработайте событие нужным образом. 🥇 Преимущества делегирования: 1️⃣Экономия ресурсов: один обработчик вместо многих. 2️⃣Гибкость: легко добавлять и удалять элементы без изменения обработчиков. 3️⃣Упрощение кода: при массовых изменениях элементов можно просто обновить innerHTML. В следующий раз, когда вы столкнетесь с необходимостью обработки событий на многих элементах, помните о делегировании. Это упростит вашу жизнь и сделает код чище! 🚀 #JavaScript #ОбучающийПост #делегирование

Для начала в самый раз) всего 65 страниц