Декларативный и императивный — это два основных подхода к программированию. Они представляют собой разные методы описания того, что и как программа должна делать.
🟢 Декларативное программирование в 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
Вернулся домой, было круто. Пообщались с коллегами, посмеялись. Хорошее конечно IT сообщество. Короче нужно стараться посещать такие мероприятия чаще.✅
В чатах тг водится много агрессивных представителей, которые любят самоутвердиться и унизить новичков. Но обычно такие люди дальше своих комнат не выходят. 👌🏻
А вот на живых встречах люди которые действительно готовы тебе подсказать, дать совет или помочь. Ну и конечно просто поболтать, посмеяться😄
В чатах тг водится много агрессивных представителей, которые любят самоутвердиться и унизить новичков. Но обычно такие люди дальше своих комнат не выходят. 👌🏻
А вот на живых встречах люди которые действительно готовы тебе подсказать, дать совет или помочь. Ну и конечно просто поболтать, посмеяться😄
👍3✍1
Что такое HTTP?
HTTP (HyperText Transfer Protocol) — это протокол передачи данных, являющийся основой всего веба. Каждое время, когда мы открываем веб-страницу, наше устройство отправляет HTTP-запрос на сервер и получает ответ в форме веб-страницы.
🔹Структура HTTP-Запроса
HTTP-запрос состоит из нескольких частей:
1️⃣Метод: Указывает, какой вид операции необходимо выполнить. Существует несколько методов, включая GET (получение данных), POST (отправка новых данных), PUT (обновление существующих данных) и DELETE (удаление данных).
2️⃣URL: Адрес, на который отправляется запрос.
3️⃣Заголовки: Содержат дополнительную информацию о запросе, такую как тип содержимого или cookies.
4️⃣Тело: Передает данные в запросах POST и PUT.
🔹Структура HTTP-Ответа
HTTP-ответ также состоит из нескольких частей:
1️⃣Статус-код: Сообщает нам о результате запроса. Например, 200 означает "ОК", а 404 - "Не найдено".
2️⃣Заголовки: Аналогично запросу, содержат дополнительную информацию о ответе.
3️⃣Тело ответа: Содержит саму запрашиваемую информацию, обычно HTML, CSS, JavaScript или JSON.
HTTP (HyperText Transfer Protocol) — это протокол передачи данных, являющийся основой всего веба. Каждое время, когда мы открываем веб-страницу, наше устройство отправляет HTTP-запрос на сервер и получает ответ в форме веб-страницы.
🔹Структура HTTP-Запроса
HTTP-запрос состоит из нескольких частей:
1️⃣Метод: Указывает, какой вид операции необходимо выполнить. Существует несколько методов, включая GET (получение данных), POST (отправка новых данных), PUT (обновление существующих данных) и DELETE (удаление данных).
2️⃣URL: Адрес, на который отправляется запрос.
3️⃣Заголовки: Содержат дополнительную информацию о запросе, такую как тип содержимого или cookies.
4️⃣Тело: Передает данные в запросах POST и PUT.
🔹Структура HTTP-Ответа
HTTP-ответ также состоит из нескольких частей:
1️⃣Статус-код: Сообщает нам о результате запроса. Например, 200 означает "ОК", а 404 - "Не найдено".
2️⃣Заголовки: Аналогично запросу, содержат дополнительную информацию о ответе.
3️⃣Тело ответа: Содержит саму запрашиваемую информацию, обычно HTML, CSS, JavaScript или JSON.
👍6❤1
Если до вечера починят то выложу новое видео на канал. Продолжение нашего сериала React Новости.
В видео реализуем поиск по ключевому слову и debounce.
Сможем искать интересующие нас новости👍🏻
В видео реализуем поиск по ключевому слову и debounce.
Сможем искать интересующие нас новости👍🏻
🔥8
Привет всем!
Сейчас я занимаюсь крайне увлекательной задачей на работе — созданием редактора SVG с нуля. Этот проект предполагает наличие панели инструментов, аналогичной той, что есть в Figma, где можно менять порядок элементов, группировать их, регулировать приоритет, а также модифицировать другие свойства, такие как цвет, видимость, названия и так далее.
В процессе работы над этим проектом мне предстоит создать алгоритм для парсинга SVG, интерфейс для визуализации элементов, а также функционал drag-and-drop для перетаскивания слоёв. Эта задача невероятно увлекательна, ведь тут можно наглядно увидеть, как пригождаются алгоритмы обхода деревьев, группировки элементов и понимание рекурсии. Кроме этого, передо мной стоит вызов по созданию эффективной структуры данных для хранения и модификации этих элементов, а также методов для сохранения и последующего чтения этих файлов.
Часто новички задаются вопросом о необходимости изучения алгоритмов. Скорее всего, в начале карьеры вам не придётся сталкиваться с такой сложной задачей, и более опытные коллеги возьмут на себя решение сложных функциональных задач. Однако стоит осознать, что со временем вам, возможно, придётся создавать и разрабатывать свои, более сложные алгоритмы. В связи с этим, для гармоничного развития профессионала в сфере веб-разработки необходимо развивать все аспекты: практиковаться в кодировании, изучать архитектуру и паттерны, решать алгоритмические задачи и углублять знания в теории компьютерных наук и устройстве компьютера.
Для новичков может быть сложно осознать всю важность этого процесса, и им может не хватить мотивации для освоения столь обширного материала сразу. Именно поэтому я считаю, что начинать углубленное изучение этих аспектов стоит уже имея позицию junior разработчика, чтобы в будущем сформировать сильную основу, позволяющую переходить на следующий уровень карьерной лестницы.
Сейчас я занимаюсь крайне увлекательной задачей на работе — созданием редактора SVG с нуля. Этот проект предполагает наличие панели инструментов, аналогичной той, что есть в Figma, где можно менять порядок элементов, группировать их, регулировать приоритет, а также модифицировать другие свойства, такие как цвет, видимость, названия и так далее.
В процессе работы над этим проектом мне предстоит создать алгоритм для парсинга SVG, интерфейс для визуализации элементов, а также функционал drag-and-drop для перетаскивания слоёв. Эта задача невероятно увлекательна, ведь тут можно наглядно увидеть, как пригождаются алгоритмы обхода деревьев, группировки элементов и понимание рекурсии. Кроме этого, передо мной стоит вызов по созданию эффективной структуры данных для хранения и модификации этих элементов, а также методов для сохранения и последующего чтения этих файлов.
Часто новички задаются вопросом о необходимости изучения алгоритмов. Скорее всего, в начале карьеры вам не придётся сталкиваться с такой сложной задачей, и более опытные коллеги возьмут на себя решение сложных функциональных задач. Однако стоит осознать, что со временем вам, возможно, придётся создавать и разрабатывать свои, более сложные алгоритмы. В связи с этим, для гармоничного развития профессионала в сфере веб-разработки необходимо развивать все аспекты: практиковаться в кодировании, изучать архитектуру и паттерны, решать алгоритмические задачи и углублять знания в теории компьютерных наук и устройстве компьютера.
Для новичков может быть сложно осознать всю важность этого процесса, и им может не хватить мотивации для освоения столь обширного материала сразу. Именно поэтому я считаю, что начинать углубленное изучение этих аспектов стоит уже имея позицию junior разработчика, чтобы в будущем сформировать сильную основу, позволяющую переходить на следующий уровень карьерной лестницы.
👍7