JavaScript заметки

2021-12-08 19:00:27 Глобальный catch

Давайте представим, что произошла фатальная ошибка (программная или что-то ещё ужасное) снаружи try..catch, и скрипт упал.

Существует ли способ отреагировать на такие ситуации? 
Можно залогировать ошибку, показать что-то пользователю (обычно они не видят сообщение об ошибке) и т.д.

В браузере мы можем присвоить функцию специальному свойству window.onerror, которая будет вызвана в случае необработанной ошибки.

Синтаксис на картинке выше.

 - message
Сообщение об ошибке.
 - url
URL скрипта, в котором произошла ошибка.
 - line, col
Номера строки и столбца, в которых произошла ошибка.
 - error
Объект ошибки.

Роль глобального обработчика window.onerror обычно заключается не в восстановлении выполнения скрипта – это скорее всего невозможно в случае программной ошибки, а в отправке сообщения об ошибке разработчикам.

#глобальный_catch #обработка_ошибок Открыть/Комментировать

2021-12-08 16:00:47 Этот хомяк бежит на чистом CSS

Код хомяка и всё про современный фронтенд смотри на канале наших друзей Открыть/Комментировать

2021-12-07 20:04:26 Прокрутка

Встроенное свойство «length» содержит количество параметров функции в её объявлении.

Событие прокрутки scroll позволяет реагировать на прокрутку страницы или элемента. 
Есть много хороших вещей, которые при этом можно сделать.

Например:

 - Показать/скрыть дополнительные элементы управления или информацию, основываясь на том, в какой части документа находится пользователь.
 - Подгрузить данные, когда пользователь прокручивает страницу вниз до конца.

Вот картинке выше функция для отображения текущей прокрутки.

#прокрутка #интерфейсные_события Открыть/Комментировать

2021-12-06 22:03:05 Fetch

JavaScript может отправлять сетевые запросы на сервер и подгружать новую информацию по мере необходимости.

Например, мы можем использовать сетевой запрос, чтобы:

 - Отправить заказ
 - Загрузить информацию о пользователе
 - Запросить последние обновления с сервера
 - …и т.п.

Метод fetch() — современный и очень мощный, поэтому начнём с него. Он не поддерживается старыми (можно использовать полифил), но поддерживается всеми современными браузерами.

Базовый синтаксис:

 - url – URL для отправки запроса.
 - options – дополнительные параметры: метод, заголовки и так далее.

Без options это простой GET-запрос, скачивающий содержимое по адресу url.

#fetch #сетевые_запросы Открыть/Комментировать

2021-12-05 23:00:53 Открыть/Комментировать

2021-12-04 18:52:45 Symbol.iterator

Symbol.iterator - специальный встроенный Symbol , который позволяет сделать объект итерируемым.

Например, у нас есть объект range, который представляет собой диапазон чисел. Чтобы сделать range итерируемым (и позволить for..of работать с ним), нам нужно добавить в объект метод с именем Symbol.iterator.

- Когда цикл for..of запускается, он вызывает этот метод один раз (или выдаёт ошибку, если метод не найден). Этот метод должен вернуть итератор – объект с методом next.
- Дальше for..of работает только с этим возвращённым объектом.
- Когда for..of хочет получить следующее значение, он вызывает метод next() этого объекта.
- Результат вызова next() должен иметь вид {done: Boolean, value: any}, где done=true означает, что итерация закончена, в противном случае value содержит очередное значение.

#перебираемые_объекты #symbol_iterator Открыть/Комментировать

2021-12-03 17:01:10 Set

Объект Set – это особый вид коллекции: «множество» значений (без ключей), где каждое значение может появляться только один раз.

Его основные методы это:

 - new Set(iterable) – создаёт Set, и если в качестве аргумента был предоставлен итерируемый объект (обычно это массив), то копирует его значения в новый Set.
 - set.add(value) – добавляет значение (если оно уже есть, то ничего не делает), возвращает тот же объект set.
 - set.delete(value) – удаляет значение, возвращает true, если value было в множестве на момент вызова, иначе false.
 - set.has(value) – возвращает true, если значение присутствует в множестве, иначе false.
 - set.clear() – удаляет все имеющиеся значения.
 - set.size – возвращает количество элементов в множестве.

Основная «изюминка» – это то, что при повторных вызовах set.add() с одним и тем же значением ничего не происходит, за счёт этого как раз и получается, что каждое значение появляется один раз.

#set #словари Открыть/Комментировать

2021-12-03 14:00:10 True Figma - канал, где публикуется макеты Figma для практики вёрстки.

Макеты для вёрcтки - > @true_figma Открыть/Комментировать

2021-12-02 15:45:39 У стрелочных функций нет «this»

Стрелочные функции особенные: у них нет своего «собственного» this. 
Если мы используем this внутри стрелочной функции, то его значение берётся из внешней «нормальной» функции.

Например, на картинке выше arrow() использует значение this из внешнего метода user.sayHi().

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

#this #стрелочные_функции Открыть/Комментировать

2021-12-02 15:05:59 Прокачивай навыки JavaScript решая практические тесты!

На нашем втором канале JavaScript тесты каждый день выходят викторины на знание особенностей языка.

Подпишись, чтобы не потерять

#javascript #тесты Открыть/Комментировать