JavaScript заметки

🔥 CodeCamp - книжный лагерь для IT специалистов любого уровня и направления. На канале мы публикуем самые свежие и интересные книги по Python, Java, С++ и другим языкам программирования. Все в формате PDF и доступно для скачивания в два клика. Подписывайтесь, чтобы не потерять: @campcode

Копирование объектов Одним из фундаментальных отличий объектов от примитивных типов данных является то, что они хранятся и копируются «по ссылке». Примитивные типы: строки, числа, логические значения – присваиваются и копируются «по значению». Переменная хранит не сам объект, а его «адрес в памяти», другими словами «ссылку» на него. Чтобы реально скопировать объект, нам нужно создать новый объект и повторить структуру дублируемого объекта, перебирая его свойства и копируя их. #object #основы

💰 Получи оффер от 150к На канале Frontend Interview постят актуальные вопросы с собеседований по JS, CSS, HTML. А главное - разбирают их и дают ответы, которые точно впечатлят интервьюера. Хочешь в Тинькофф или Яндекс? Подписывайся

Опциональная цепочка '?.' Опциональная цепочка ?. — это безопасный способ доступа к свойствам вложенных объектов, даже если какое-либо из промежуточных свойств не существует. Опциональная цепочка ?. останавливает вычисление и возвращает undefined, если часть перед ?. имеет значение undefined или null. P.S. Эта возможность была добавлена в язык недавно. В старых браузерах может понадобиться полифил. #опциональная_цепочка #основы

Может уже хватит писать код самому? За окном 2021 — век технологий. Перестань изобретать велосипед. Просто возьми код — и примени для своего проекта. @web_features — библиотека программиста, в которой мы пишем код за тебя. Креативная анимация, готовые карточки, варианты стильного интерфейса и др. Не будь crazy, подпишись — @web_features

XMLHttpRequest XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы. Несмотря на наличие слова «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML. Мы можем загружать/скачивать файлы, отслеживать прогресс и многое другое. Алгоритм работы: 1) Создать XMLHttpRequest; 2) Инициализировать его; 3) Послать запрос; 4) Слушать события на xhr, чтобы получить ответ. P.S. На сегодняшний день не обязательно использовать XMLHttpRequest, так как существует другой, более современный метод fetch. #xhr #сетевые_запросы

На канале ProgNote вы найдёте много статей на тему Web-разработки, операционных системах и в целом о программирование в разных сферах. Ещё имеются интересные учебники для изучения различных языков и фреймворков, например таких, как Python, PHP, и JavaScript с Express.js. Также периодически выходят новости из мира IT, и в раз неделю выкладывают интересные книги и какие-нибудь JS или HTML скрипты, или PSD, Figma макеты. Поэтому подписываетесь на канал ProgNote, и начинаете изучать программирование прямо сейчас.

Long Polling (длинные опросы) Длинные опросы – это самый простой способ поддерживать постоянное соединение с сервером, не используя при этом никаких специфических протоколов (типа WebSocket или Server Sent Events). Его очень легко реализовать, и он хорошо подходит для многих задач. Как это происходит: - Запрос отправляется на сервер; - Сервер не закрывает соединение, пока у него не возникнет сообщение для отсылки; - Когда появляется сообщение – сервер отвечает на запрос, посылая его; - Браузер немедленно делает новый запрос. P.S. на картинке примерный код клиентской функции subscribe, которая реализует длинные опросы. #LongPolling #сетевые_запросы

«Писать код надо, но тааак лень..» Расслабься, айтишник. Его уже написали за тебя и выложили на канале Frontended Libs. Это сборник удобных библиотек с готовым кодом под твои задачи. Открываешь – находишь нужную либу – выполняешь задачу в 5 раз быстрее. Подписывайся, сэкономим тебе время: @sWebDev

Server Sent Events Спецификация Server-Sent Events описывает встроенный класс EventSource, который позволяет поддерживать соединение с сервером и получать от него события. Как и в случае с WebSocket, соединение постоянно. Работа с потоком данных: - Текст сообщения указывается после data:, пробел после двоеточия необязателен; - Сообщения разделяются двойным переносом строки \n\n; - Чтобы разделить сообщение на несколько строк, мы можем отправить несколько data: подряд (третье сообщение). Про сравнение SSE с WS. Протокол SSE одновременно похож на WebSocket, но также сильно отличается. Например, данные отправляются лишь с сервера на клиент и могут иметь только текстовой формат. Однако это не делает SSE ненужным, напротив, у него своя ниша. Основное преимущество в простоте использования, что делает SSE более привлекательным для проектов, где вся мощь WS абсолютно не требуется. #sse #сетевые_запросы

Более 1540 русскоязычных книг по программированию и технологиям можно найти на канале @it_boooks Навигация всегда в закрепе.

WebSocket Протокол WebSocket, описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение. Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов. WebSocket особенно хорош для сервисов, которые нуждаются в постоянном обмене данными, например онлайн игры, торговые площадки, работающие в реальном времени, и т.д. В JavaScript WebSocket генерирует 4 события, с помощью которых и строится всё взаимодействие: - open – соединение установлено; - message – получены данные; - error – ошибка; - close – соединение закрыто. #WebSocket #сетевые_запросы

Frontend Planet - канал с самыми передовыми онлайн-инструментами, без которых не обойдется ни один разработчик.   Подписывайся и верстай в ускоренном режиме.

FormData FormData - это объект, представляющий данные HTML формы. Если передать в конструктор элемент HTML-формы form, то создаваемый объект автоматически прочитает из неё поля. Его особенность заключается в том, что методы для работы с сетью, например fetch, позволяют указать объект FormData в свойстве тела запроса body. Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: form/multipart. То есть, для сервера это выглядит как обычная отправка формы. P.S. на картинке выше пример отправки данных простой HTML формы с помощью fetch. #formData #сетевые_запросы

Что будет выведено в консоль? #middle #arrays

Глобальный catch Давайте представим, что произошла фатальная ошибка (программная или что-то ещё ужасное) снаружи try..catch, и скрипт упал. Существует ли способ отреагировать на такие ситуации?  Можно залогировать ошибку, показать что-то пользователю (обычно они не видят сообщение об ошибке) и т.д. В браузере мы можем присвоить функцию специальному свойству window.onerror, которая будет вызвана в случае необработанной ошибки. Синтаксис на картинке выше.  - message Сообщение об ошибке.  - url URL скрипта, в котором произошла ошибка.  - line, col Номера строки и столбца, в которых произошла ошибка.  - error Объект ошибки. Роль глобального обработчика window.onerror обычно заключается не в восстановлении выполнения скрипта – это скорее всего невозможно в случае программной ошибки, а в отправке сообщения об ошибке разработчикам. #глобальный_catch #обработка_ошибок

👆Этот хомяк бежит на чистом CSS Код хомяка и всё про современный фронтенд смотри на канале наших друзей

Прокрутка Встроенное свойство «length» содержит количество параметров функции в её объявлении. Событие прокрутки scroll позволяет реагировать на прокрутку страницы или элемента.  Есть много хороших вещей, которые при этом можно сделать. Например:  - Показать/скрыть дополнительные элементы управления или информацию, основываясь на том, в какой части документа находится пользователь.  - Подгрузить данные, когда пользователь прокручивает страницу вниз до конца. Вот картинке выше функция для отображения текущей прокрутки. #прокрутка #интерфейсные_события

Фронтенд? Сейчас объясню! На канале «Будни верстальщика» ежедневно выкладываются лучшие статьи и примеры по вёрстке и программированию, включая личный опыт автора. Не пропусти всё самое интересное в мире фронтенда!

Fetch JavaScript может отправлять сетевые запросы на сервер и подгружать новую информацию по мере необходимости. Например, мы можем использовать сетевой запрос, чтобы:  - Отправить заказ  - Загрузить информацию о пользователе  - Запросить последние обновления с сервера  - …и т.п. Метод fetch() — современный и очень мощный, поэтому начнём с него. Он не поддерживается старыми (можно использовать полифил), но поддерживается всеми современными браузерами. Базовый синтаксис:  - url – URL для отправки запроса.  - options – дополнительные параметры: метод, заголовки и так далее. Без options это простой GET-запрос, скачивающий содержимое по адресу url. #fetch #сетевые_запросы