В 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

Сегодня новое видео выложу. Фильтрация новостей по категориям✌️✅

#JavaScript #code #this

Нашел в figma вот такой дизайн сайта новостей. Как думакете, может быть после небольшого рефакторинга и миграции на TS переверстаем дизайн? И у нас будет отличный веб и адаптируем его под мобилку🧐

Как вам?

Новое видео на канале!
https://youtu.be/suowP9mWAso

На первой работе у меня была система контроля времени: мой экран записывался, и программа следила за кликами, движениями мыши и нажатиями клавиш.

Если в течение 10 минут не было действий, таймер останавливался и эти минуты не учитывались. Поэтому, когда я уходил на обед, я просил коллегу по 20 минут двигать мышью и нажимать клавиши.

Тем не менее, на созвонах меня регулярно указывали на плохую статистику. Даже короткие 30 минут без активности сильно сказывались на общем показателе. Ведь при работе, особенно когда читаешь документацию или решаешь задачу, физические действия происходят не так часто.

Этот контроль порождал у меня тревогу: даже читая или общаясь на созвонах, я неосознанно двигал мышью. Хотя у нас были ежедневные созвоны и все результаты видны на доске задач, такой уровень контроля казался излишним. Когда я хотел уйти на 5-6 минут, мне приходилось ставить таймер на телефоне, чтобы вернуться вовремя и двигать мышью.

Интересно, многие ли готовы были бы работать в таких условиях или лучше искали бы другую первую работу?🧐

Начинаем meetup✌️

Перерыв👍🏻

Вернулся домой, было круто. Пообщались с коллегами, посмеялись. Хорошее конечно IT сообщество. Короче нужно стараться посещать такие мероприятия чаще.✅
В чатах тг водится много агрессивных представителей, которые любят самоутвердиться и унизить новичков. Но обычно такие люди дальше своих комнат не выходят. 👌🏻
А вот на живых встречах люди которые действительно готовы тебе подсказать, дать совет или помочь. Ну и конечно просто поболтать, посмеяться😄

Что такое 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.

В моем доме ведутся ремонтные работы и у меня отключили интернет.
Я написал в поддержку и мне накинули трафика на мобильный.
Раздаю интернет с телефона на комп👍🏻

Если до вечера починят то выложу новое видео на канал. Продолжение нашего сериала React Новости.
В видео реализуем поиск по ключевому слову и debounce.
Сможем искать интересующие нас новости👍🏻

Новое видео!

https://youtu.be/kJ-7hd-MOzQ

Привет всем!

Сейчас я занимаюсь крайне увлекательной задачей на работе — созданием редактора SVG с нуля. Этот проект предполагает наличие панели инструментов, аналогичной той, что есть в Figma, где можно менять порядок элементов, группировать их, регулировать приоритет, а также модифицировать другие свойства, такие как цвет, видимость, названия и так далее.

В процессе работы над этим проектом мне предстоит создать алгоритм для парсинга SVG, интерфейс для визуализации элементов, а также функционал drag-and-drop для перетаскивания слоёв. Эта задача невероятно увлекательна, ведь тут можно наглядно увидеть, как пригождаются алгоритмы обхода деревьев, группировки элементов и понимание рекурсии. Кроме этого, передо мной стоит вызов по созданию эффективной структуры данных для хранения и модификации этих элементов, а также методов для сохранения и последующего чтения этих файлов.

Часто новички задаются вопросом о необходимости изучения алгоритмов. Скорее всего, в начале карьеры вам не придётся сталкиваться с такой сложной задачей, и более опытные коллеги возьмут на себя решение сложных функциональных задач. Однако стоит осознать, что со временем вам, возможно, придётся создавать и разрабатывать свои, более сложные алгоритмы. В связи с этим, для гармоничного развития профессионала в сфере веб-разработки необходимо развивать все аспекты: практиковаться в кодировании, изучать архитектуру и паттерны, решать алгоритмические задачи и углублять знания в теории компьютерных наук и устройстве компьютера.

Для новичков может быть сложно осознать всю важность этого процесса, и им может не хватить мотивации для освоения столь обширного материала сразу. Именно поэтому я считаю, что начинать углубленное изучение этих аспектов стоит уже имея позицию junior разработчика, чтобы в будущем сформировать сильную основу, позволяющую переходить на следующий уровень карьерной лестницы.

Всплытие событий – это когда информация о том, что произошло какое-то событие (например, клик мышью), передается от самого "младшего" элемента, на котором это событие произошло, к его "родителям" один за другим, пока не достигнет самого "верхнего" элемента (чаще всего это документ веб-страницы).

Эта особенность позволяет нам назначать обработчики событий не только конкретному элементу, но и "ловить" эти события на родительских элементах, что часто облегчает работу с интерфейсами.

К примеру, у вас на веб-странице присутствует определённый элемент, который, при клике на него, перенаправляет пользователя на другую страницу. Однако внутри этого элемента расположены две дополнительные кнопки, которые предназначены для других действий (например, открытие меню). Так вот, при нажатии на одну из этих кнопок, может случиться так, что активируется и главный элемент, который перенаправляет на другую страницу — это явление и называется всплытием событий.

Для предотвращения такого вида всплытия, вы можете воспользоваться методом event.stopPropagation(). Применив его в функции-обработчике события клика для внутренних кнопок, вы остановите всплытие события, и клик по кнопке не будет вызывать действие главного элемента. Это позволит избежать нежелательного перенаправления на новую страницу при попытке взаимодействовать с внутренними кнопками.

#JavaScript #ОбучающийПост

👆При клике на <div>, который оборачивает всю карточку пользователя, будет вызван обработчик goToProfile, что приведёт к переходу на страницу профиля пользователя.

👆При клике на кнопку "Удалить", сначала сработает обработчик handleDelete, который вызовет функцию onDelete и остановит всплытие события благодаря event.stopPropagation(). Это предотвратит вызов обработчика goToProfile и, следовательно, переход на страницу профиля пользователя не произойдёт.

#JavaScript #code

Разница между «атрибутом» (attribute) и «свойством« (property)

🔹Атрибуты (Attributes)

Атрибуты — это дополнительные значения, которые вы можете назначить тегам в вашем HTML-коде. Они представлены в исходном коде страницы и первоначально устанавливают свойства элементов.

<input type="text" value="Hello, World!" disabled>

В данном примере type, value и disabled — это атрибуты тега input.

Особенности атрибутов:

1️⃣Строковые значения: Даже если атрибут представляет число или другой тип данных, его значение всегда будет строкой.
2️⃣Нечувствительность к регистру: Имена атрибутов можно записывать любыми буквами — большими или маленькими, это не повлияет на работу.
3️⃣Видны в innerHTML: Если вы посмотрите на свойство innerHTML элемента, то увидите все атрибуты, указанные в разметке.

🔹Свойства (Properties)

Свойства — это характеристики DOM-узлов, которые вы можете читать или изменять с помощью JavaScript. Они представляют текущее состояние элемента в браузере, которое может меняться во время выполнения скрипта.

const inputElement = document.querySelector('input');
inputElement.value = "New Text";

В данном примере мы меняем свойство value у объекта inputElement.

Особенности свойств:

1️⃣Различные типы данных: Свойства могут иметь различные типы данных, не только строки.
2️⃣Чувствительность к регистру: Имена свойств нужно указывать в точном регистре, в отличие от атрибутов.
3️⃣Интерактивность с JavaScript: Свойства представляют собой характеристики объектов JavaScript и могут изменяться в любое время при выполнении скрипта.

#JavaScript #ОбучающийПост #HTML

Разница между «атрибутом» (attribute) и «свойством« (property)

#JavaScript #code #HTML

Мой первый JavaScript пет проект. После публикации, смотрел погоду только в нем😃

Так же это первое приложение в котором я использовал API и асинхронность. Было тяжко, возился пару дней, не понимал как отправлять запрос, куда добавлять апи ключ. Еще и работа со временем, нужно было учитывать часовой пояс и правильно отображать время.

Это отличная мотивация, когда реализовываешь свои идеи. Это приложение я придумал и реализовал сам, просто увидел подборку бесплатных API. Подсмотреть негде было, потому что не нашел в ютубе. Пришлось самому ковыряться. 👍

После завершения работы над этим приложением я уже с большей уверенностью создавал другие🎯

В нашем с вами приложении React Новости я планирую создать полноценный виджет с погодой, где будет погода на неделю и возможность выбора даты😎

Джун, который пытается накрутить опыт😂