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
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
🤯5👍2
С момента своего появления, AJAX революционизировал веб, предоставив разработчикам мощный инструмент для создания интерактивных веб-приложений без необходимости перезагружать страницу. Но как и всё в мире технологий, пришло время для новых изменений.
🌐 Что пришло на смену AJAX?
🚀 Fetch API:
Нативное средство для отправки асинхронных HTTP-запросов, введенное в ES6.
Гораздо более гибкий и модульный, поддерживает промисы, что упрощает работу с асинхронным кодом.
Не просто "обертка", а стандартный API, предоставляемый современными браузерами, заменяя устаревший XMLHttpRequest.
📚 Axios:
Популярная библиотека JavaScript, которая может работать поверх Fetch API или XMLHttpRequest.
Автоматическое преобразование ответов в JSON.
Улучшенная обработка ошибок, что позволяет разработчикам легче реагировать на различные сценарии.
Также использует промисы, делая код более структурированным и понятным.
Стандарты веба и потребности пользователей быстро меняются. Fetch и Axios предоставляют более современные, эффективные и гибкие решения для общения с сервером. Они делают код чище, упрощают обработку ошибок и интеграцию с современными фреймворками и библиотеками.
#ОбучающийПост #AJAX #JavaScript #fetch #axios
🌐 Что пришло на смену AJAX?
🚀 Fetch API:
Нативное средство для отправки асинхронных HTTP-запросов, введенное в ES6.
Гораздо более гибкий и модульный, поддерживает промисы, что упрощает работу с асинхронным кодом.
Не просто "обертка", а стандартный API, предоставляемый современными браузерами, заменяя устаревший XMLHttpRequest.
📚 Axios:
Популярная библиотека JavaScript, которая может работать поверх Fetch API или XMLHttpRequest.
Автоматическое преобразование ответов в JSON.
Улучшенная обработка ошибок, что позволяет разработчикам легче реагировать на различные сценарии.
Также использует промисы, делая код более структурированным и понятным.
Стандарты веба и потребности пользователей быстро меняются. Fetch и Axios предоставляют более современные, эффективные и гибкие решения для общения с сервером. Они делают код чище, упрощают обработку ошибок и интеграцию с современными фреймворками и библиотеками.
#ОбучающийПост #AJAX #JavaScript #fetch #axios
🔥5
Поднятие переменных в JavaScript
Понимание механизма поднятия переменных (или "hoisting") — ключевой элемент для эффективной работы с JavaScript. Этот процесс часто может вводить в заблуждение, особенно новичков, поэтому давайте разберемся, что это такое.
✨ Что такое поднятие (hoisting)?
Поднятие — это особенность JavaScript, когда объявления переменных "поднимаются" или перемещаются в верхнюю часть текущей области видимости. Но здесь важно понимать: поднимается только объявление, а не инициализация (присвоение значения).
🔍 Что еще стоит знать?
Поднятие также затрагивает объявления функций: полное объявление функции "поднимается" вверх.
У функциональных выражений (когда переменной присваивается функция) поднимается только объявление переменной, но не её значение.
💡 Поднятие переменных — это механизм, с которым каждый разработчик на JavaScript сталкивается, независимо от уровня опыта. Понимание этого явления поможет избежать ненужных ошибок и написать более чистый и предсказуемый код.
#JavaScript #ОбучающийПост #hoisting
Понимание механизма поднятия переменных (или "hoisting") — ключевой элемент для эффективной работы с JavaScript. Этот процесс часто может вводить в заблуждение, особенно новичков, поэтому давайте разберемся, что это такое.
✨ Что такое поднятие (hoisting)?
Поднятие — это особенность JavaScript, когда объявления переменных "поднимаются" или перемещаются в верхнюю часть текущей области видимости. Но здесь важно понимать: поднимается только объявление, а не инициализация (присвоение значения).
🔍 Что еще стоит знать?
Поднятие также затрагивает объявления функций: полное объявление функции "поднимается" вверх.
У функциональных выражений (когда переменной присваивается функция) поднимается только объявление переменной, но не её значение.
💡 Поднятие переменных — это механизм, с которым каждый разработчик на JavaScript сталкивается, независимо от уровня опыта. Понимание этого явления поможет избежать ненужных ошибок и написать более чистый и предсказуемый код.
#JavaScript #ОбучающийПост #hoisting
👍4
📜 Почему на собеседованиях задают вопросы о "устаревших" технологиях?
На собеседованиях по программированию часто спрашивают о технологиях или практиках, которые кажутся устаревшими или редко используемыми в современном разработчике? Например, AJAX, var вместо let/const, или методы жизненного цикла устаревших версий популярных фреймворков. Вот несколько причин, по которым это происходит:
1️⃣Оценка фундаментальных знаний: Изучение и понимание основ технологии дает представление о том, насколько кандидат понимает принципы, лежащие в основе современных инструментов. Например, знание AJAX может помочь понять, как работают современные HTTP-запросы на более глубоком уровне.
2️⃣Историческая перспектива: Технологии эволюционируют, и то, что считается устаревшим сегодня, когда-то было новинкой. Понимание этой эволюции может помочь разработчикам лучше адаптироваться к изменениям в будущем.
3️⃣Работа с устаревшим кодом: Многие компании все еще используют старые системы или имеют устаревший код в своих проектах. Знание "старых" технологий может быть весьма полезным, если требуется внести изменения или обновления в такие системы.
4️⃣Оценка глубины знаний: Спрашивая об устаревших или менее популярных аспектах технологии, интервьюер может пытаться определить, насколько глубоко кандидат изучал материал и разбирался в нем.
5️⃣Логика и решение проблем: Вопросы на собеседовании не всегда о том, "что ты знаешь", но иногда о "как ты думаешь". Иногда решение проблемы с использованием устаревших технологий может показать ваш процесс мышления и аналитические навыки.
💡 Независимо от того, используете ли вы эти технологии в повседневной работе или нет, понимание их может оказаться ценным активом в вашей карьере разработчика. И помните, что за каждым вопросом на собеседовании стоит определенная цель или причина, даже если она не всегда очевидна на первый взгляд!
#ОбучающийПост
На собеседованиях по программированию часто спрашивают о технологиях или практиках, которые кажутся устаревшими или редко используемыми в современном разработчике? Например, AJAX, var вместо let/const, или методы жизненного цикла устаревших версий популярных фреймворков. Вот несколько причин, по которым это происходит:
1️⃣Оценка фундаментальных знаний: Изучение и понимание основ технологии дает представление о том, насколько кандидат понимает принципы, лежащие в основе современных инструментов. Например, знание AJAX может помочь понять, как работают современные HTTP-запросы на более глубоком уровне.
2️⃣Историческая перспектива: Технологии эволюционируют, и то, что считается устаревшим сегодня, когда-то было новинкой. Понимание этой эволюции может помочь разработчикам лучше адаптироваться к изменениям в будущем.
3️⃣Работа с устаревшим кодом: Многие компании все еще используют старые системы или имеют устаревший код в своих проектах. Знание "старых" технологий может быть весьма полезным, если требуется внести изменения или обновления в такие системы.
4️⃣Оценка глубины знаний: Спрашивая об устаревших или менее популярных аспектах технологии, интервьюер может пытаться определить, насколько глубоко кандидат изучал материал и разбирался в нем.
5️⃣Логика и решение проблем: Вопросы на собеседовании не всегда о том, "что ты знаешь", но иногда о "как ты думаешь". Иногда решение проблемы с использованием устаревших технологий может показать ваш процесс мышления и аналитические навыки.
💡 Независимо от того, используете ли вы эти технологии в повседневной работе или нет, понимание их может оказаться ценным активом в вашей карьере разработчика. И помните, что за каждым вопросом на собеседовании стоит определенная цель или причина, даже если она не всегда очевидна на первый взгляд!
#ОбучающийПост
На такое мероприятие собираюсь на выходных✌️
Пока что времени не хватает готовиться к выступлениям, но в планах начать тоже выступать, хотел бы выступить на конференции. Да и на хакатон хотел бы сходить😄 Но у меня свой хакатон дома, работа -> ютуб -> телега -> свой сервис -> обучение🙃
В Краснодаре часто хакатоны проводятся, с приличными призовыми и интересными темами. В будущем обязательно посоревнуюсь💪🏻
Пока что времени не хватает готовиться к выступлениям, но в планах начать тоже выступать, хотел бы выступить на конференции. Да и на хакатон хотел бы сходить😄 Но у меня свой хакатон дома, работа -> ютуб -> телега -> свой сервис -> обучение🙃
В Краснодаре часто хакатоны проводятся, с приличными призовыми и интересными темами. В будущем обязательно посоревнуюсь💪🏻
👍3
Декларативный и императивный — это два основных подхода к программированию. Они представляют собой разные методы описания того, что и как программа должна делать.
🟢 Декларативное программирование в JavaScript:
Описывает, что программа должна делать, не углубляясь в детали реализации.
Использование методов массивов, например map(). Нам не нужно знать, как работает .map() внутри; мы просто говорим, что хотим сделать.
Преимущества: Читаемость и краткость. Простота изменений и отладки.
🔴 Императивное программирование в JavaScript:
Описывает, как программа должна выполнять действия.
Использование циклов, написание логики методов самостоятельно. Здесь мы явно используем цикл for для итерации по каждому элементу массива и делаем какую либо логику, например такую же как и при использовании метода map().
Преимущества: Полный контроль над выполнением. Может быть более производительным в некоторых ситуациях (хотя не всегда).
📚Сравнение:
Читаемость: Декларативный код в JavaScript часто короче и проще для чтения.
Контроль: Императивный код дает больше контроля над деталями выполнения.
Производительность: Императивный код может быть оптимизирован для конкретных задач, но современные движки JavaScript часто оптимизируют декларативный код так же эффективно.
#JavaScript #обучающийПост
🟢 Декларативное программирование в JavaScript:
Описывает, что программа должна делать, не углубляясь в детали реализации.
Использование методов массивов, например map(). Нам не нужно знать, как работает .map() внутри; мы просто говорим, что хотим сделать.
Преимущества: Читаемость и краткость. Простота изменений и отладки.
🔴 Императивное программирование в JavaScript:
Описывает, как программа должна выполнять действия.
Использование циклов, написание логики методов самостоятельно. Здесь мы явно используем цикл for для итерации по каждому элементу массива и делаем какую либо логику, например такую же как и при использовании метода map().
Преимущества: Полный контроль над выполнением. Может быть более производительным в некоторых ситуациях (хотя не всегда).
📚Сравнение:
Читаемость: Декларативный код в JavaScript часто короче и проще для чтения.
Контроль: Императивный код дает больше контроля над деталями выполнения.
Производительность: Императивный код может быть оптимизирован для конкретных задач, но современные движки JavaScript часто оптимизируют декларативный код так же эффективно.
#JavaScript #обучающийПост
Какой из следующих элементов является примером декларативного подхода в программировании?
#JavaScript #quiz
#JavaScript #quiz
Anonymous Quiz
17%
Цикл for для обхода массива
71%
Метод filter для отбора элементов массива
2%
Журналирование ошибок
10%
Написание рекурсивной функции
Вспоминая мои первые шаги в изучении React, я с теплом вспоминаю видеокурс "Путь Самурая". В нем Димыч создавал социальную сеть, объясняя все доступно и логично.
На протяжении 100 серий я ежедневно усваивал материал, писал конспекты и дополнял знания из официальной документации React. Этот курс был похож на увлекательный сериал, который ждёшь с нетерпением. Несмотря на то что курс уже давно не обновлялся, он дал мне ценную основу. Особенно запомнился момент, когда мы создавали Redux с нуля, чтобы затем заменить его на официальную библиотеку. Это помогло понять механизмы работы Redux.
К сожалению, второй сезон, который был анонсирован, так и остался незавершенным. Когда я начал свою первую работу, опыт, полученный из этого курса, оказался очень полезным.
Сейчас есть много бесплатных видеокурсов, но старые курсы, такие как "Путь Самурая", остаются незабываемыми.🥲
Олды помнят
Вот то приложение (я сделал по курсу) - https://mirgradr.github.io/chat-app
Для входа:
Логин: free@samuraijs.com
Пароль: free
Стоит ли проходить? -Нет
Но возможно вы вдохновитесь и начнете создавать свое приложение по типу социальной сети, или любое другое
Сам видеокурс
https://youtu.be/gb7gMluAeao?si=r4I4uzacYArIDMSm
На протяжении 100 серий я ежедневно усваивал материал, писал конспекты и дополнял знания из официальной документации React. Этот курс был похож на увлекательный сериал, который ждёшь с нетерпением. Несмотря на то что курс уже давно не обновлялся, он дал мне ценную основу. Особенно запомнился момент, когда мы создавали Redux с нуля, чтобы затем заменить его на официальную библиотеку. Это помогло понять механизмы работы Redux.
К сожалению, второй сезон, который был анонсирован, так и остался незавершенным. Когда я начал свою первую работу, опыт, полученный из этого курса, оказался очень полезным.
Сейчас есть много бесплатных видеокурсов, но старые курсы, такие как "Путь Самурая", остаются незабываемыми.🥲
Олды помнят
Вот то приложение (я сделал по курсу) - https://mirgradr.github.io/chat-app
Для входа:
Логин: free@samuraijs.com
Пароль: free
Стоит ли проходить? -Нет
Но возможно вы вдохновитесь и начнете создавать свое приложение по типу социальной сети, или любое другое
Сам видеокурс
https://youtu.be/gb7gMluAeao?si=r4I4uzacYArIDMSm
mirgradr.github.io
React App
Web site created using create-react-app
🫡6
Что делает следующий код?
const { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }; #quiz #JavaScript
const { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }; #quiz #JavaScript
Anonymous Quiz
9%
Он присваивает значения a и b в новые переменные c и d
83%
Он присваивает 10 в a, 20 в b и оставшиеся значения в объект rest
4%
Он объединяет a, b и rest в один объект
4%
Он создаёт новый объект без свойств a и b
❤1👍1
В JavaScript, ключевое слово this обычно относится к объекту, в контексте которого была вызвана функция, но это может меняться в зависимости от того, как и где функция была вызвана. Понимание того, как работает this, может быть сложным, но очень важным аспектом языка. Давайте разберемся с этим поподробнее.
1️⃣Глобальный контекст: Когда this используется вне функции, он указывает на глобальный объект. В браузерах это window.
2️⃣Внутри функции: Значение this внутри функции зависит от того, как функция была вызвана. Если функция вызвана в обычном режиме (не в строгом), this будет указывать на глобальный объект. В строгом режиме ('use strict') this будет undefined.
3️⃣Внутри объекта: Когда функция вызывается в качестве метода объекта, this будет ссылаться на объект, который содержит этот метод.
4️⃣Стрелочные функции: Стрелочные функции не создают собственный контекст this. Они захватывают this из внешней функции.
5️⃣При использовании new: Когда функция вызывается с оператором new, this будет указывать на новый экземпляр объекта.
6️⃣Использование bind, call и apply: Эти методы позволяют явно задать значение this для функции.
Контекст this в JavaScript может быть сложным и не всегда интуитивно понятным, но понимание его поведения очень важно для эффективной работы с языком.
#JavaScript #ОбучающийПост #this
1️⃣Глобальный контекст: Когда this используется вне функции, он указывает на глобальный объект. В браузерах это window.
2️⃣Внутри функции: Значение this внутри функции зависит от того, как функция была вызвана. Если функция вызвана в обычном режиме (не в строгом), this будет указывать на глобальный объект. В строгом режиме ('use strict') this будет undefined.
3️⃣Внутри объекта: Когда функция вызывается в качестве метода объекта, this будет ссылаться на объект, который содержит этот метод.
4️⃣Стрелочные функции: Стрелочные функции не создают собственный контекст this. Они захватывают this из внешней функции.
5️⃣При использовании new: Когда функция вызывается с оператором new, this будет указывать на новый экземпляр объекта.
6️⃣Использование bind, call и apply: Эти методы позволяют явно задать значение this для функции.
Контекст this в JavaScript может быть сложным и не всегда интуитивно понятным, но понимание его поведения очень важно для эффективной работы с языком.
#JavaScript #ОбучающийПост #this
🔥6❤2
Сегодня новое видео выложу. Фильтрация новостей по категориям✌️✅
❤6🔥1
Новое видео на канале!
https://youtu.be/suowP9mWAso
https://youtu.be/suowP9mWAso
YouTube
React Новости. Фильтрация новостей по категориям. React приложение новостей. [4]
В этом выпуске мы займемся реализацией фильтрации новостей по категориям, позволяя пользователям выбирать, какие новости им стоит просмотреть. Завернем это в компонент для выбора категорий и обработаем соответствующий запрос к серверу.
Добро пожаловать на…
Добро пожаловать на…
❤5🔥1
На первой работе у меня была система контроля времени: мой экран записывался, и программа следила за кликами, движениями мыши и нажатиями клавиш.
Если в течение 10 минут не было действий, таймер останавливался и эти минуты не учитывались. Поэтому, когда я уходил на обед, я просил коллегу по 20 минут двигать мышью и нажимать клавиши.
Тем не менее, на созвонах меня регулярно указывали на плохую статистику. Даже короткие 30 минут без активности сильно сказывались на общем показателе. Ведь при работе, особенно когда читаешь документацию или решаешь задачу, физические действия происходят не так часто.
Этот контроль порождал у меня тревогу: даже читая или общаясь на созвонах, я неосознанно двигал мышью. Хотя у нас были ежедневные созвоны и все результаты видны на доске задач, такой уровень контроля казался излишним. Когда я хотел уйти на 5-6 минут, мне приходилось ставить таймер на телефоне, чтобы вернуться вовремя и двигать мышью.
Интересно, многие ли готовы были бы работать в таких условиях или лучше искали бы другую первую работу?🧐
Если в течение 10 минут не было действий, таймер останавливался и эти минуты не учитывались. Поэтому, когда я уходил на обед, я просил коллегу по 20 минут двигать мышью и нажимать клавиши.
Тем не менее, на созвонах меня регулярно указывали на плохую статистику. Даже короткие 30 минут без активности сильно сказывались на общем показателе. Ведь при работе, особенно когда читаешь документацию или решаешь задачу, физические действия происходят не так часто.
Этот контроль порождал у меня тревогу: даже читая или общаясь на созвонах, я неосознанно двигал мышью. Хотя у нас были ежедневные созвоны и все результаты видны на доске задач, такой уровень контроля казался излишним. Когда я хотел уйти на 5-6 минут, мне приходилось ставить таймер на телефоне, чтобы вернуться вовремя и двигать мышью.
Интересно, многие ли готовы были бы работать в таких условиях или лучше искали бы другую первую работу?🧐
👍5