JavaScript заметки
8.56K subscribers
2.75K photos
4 videos
1.27K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип.

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом.

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash.

#браузер #документ #свойства_узлов
👍4🔥21
Почти всё в JavaScript — объект

В JavaScript объект является прародителем всех других сущностей. Все типы данных и структуры, кроме примитивных, являются потомками объекта. По этой причине абсолютно у всех наследников объекта имеется набор общих методов: toString(), valueOf() и др.

#объекты #объект

Подробнее
👍41🔥1
Set

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

Set — это неиндексированная коллекция, положить элемент в коллекцию можно, но достать нельзя. По элементам коллекции можно итерироваться.

Основные методы для работы с коллекцией:

add()добавить элемент.
delete()удалить элемент.
has()проверить, есть ли элемент в коллекции.
clear()очистить коллекцию.
forEach() — выполнить функцию для каждого элемента в коллекции, аналогично одноимённому методу массива.

Содержит свойство size для получения количества элементов в коллекции.

#множества #Set

Подробнее
👍13🔥21
.keys()

Возвращает итератор для обхода значений коллекции Set в порядке добавления значений в коллекцию.

Обычно метод keys() возвращает итератор для обхода ключей коллекции, но так как коллекция Set не имеет ключей, то для поддержки универсального интерфейса итератор возвращает значения.

Метод используется редко, правильнее использовать метод values(), так как он даёт лучшую читаемость коду.

#множества #keys

Подробнее
👍92🔥2
.add()

Метод add() добавляет значение в коллекцию Set. Если значение уже есть в коллекции, то вызов игнорируется.

#множества #add

Подробнее
🔥5👍21
.entries()

Возвращает итератор, который обходит массив пар [значение, значение] коллекции Set в порядке добавления этих значений в коллекцию.

Обычно метод entries() возвращает итератор с парой [ключ, значение] коллекции, но так как коллекции Set не имеют ключей, то для поддержки универсального интерфейса итератор возвращает пару из одного и того же значения.

Метод используется редко.

#множества #entries

Подробнее
👍101🔥1
.size

Свойство size содержит количество значений, находящихся в коллекции Set. Доступно только для чтения.

#множества #size

Подробнее
👍91🔥1
try...catch

Конструкция try...catch позволяет выполнить произвольный код, но если в нем произошла ошибка, то программа не остановит своё выполнение, а перейдёт в блок catch, где ошибку можно обработать.

#обработка_исключений #trycatch

Подробнее
👍82🔥1
Error и стандартные ошибки

Программа
может работать правильно, только если код написан корректно и не содержит ошибок. JavaScript умеет обрабатывать некорректный код и сообщать об ошибке в коде. Существует семь встроенных видов ошибок, также можно создать свои собственные. Встроенные ошибки генерируются самим движком JavaScript при выполнении программы, а пользовательские — создаются с помощью конструктора Error. Оба типа ошибок можно ловить в конструкции try...catch.

#обработка_исключений #errors

Подробнее
👍7
Объект Math

Math — это объект, хранящий в себе различные математические константы (например число π) и функции типа вычисления квадратного корня. Обычно используется для генерации случайных чисел или округления значений.

#Math #Math

Подробнее
👍61🔥1
Math.floor(), Math.round(), Math.ceil() и Math.trunc()

Объект Math содержит набор методов, который используется для округления чисел:

round() — округление по обычным правилам;
floor() — округление вниз;
ceil() — округление вверх;
trunc()отбрасывание дробной части, не обращая внимания на знак аргумента.

#Math #Math

Подробнее
👍92🔥2
Math.random()

Одна
из самых часто используемых функции объекта Math. Возвращает случайное число в диапазоне от 0 до 1, не включая 1.

#Math #Mathrandom

Подробнее
👍71🔥1
Браузерное окружение, BOM

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

У разных окружений разные возможности и функциональность. В этой статье рассмотрим браузерное окружение и браузерную модель документа.

Окружение предоставляет языку дополнительные возможности и функции. Браузерное окружение, например, даёт возможность работать со страницами сайтов.

Представление этих дополнительных возможностей и функциональностей в виде объектов, к которым у языка есть доступ — это объектная модель.

В случае с браузерным окружением — это объектная модель браузера (Browser Object Model, BOM). Она предоставляет доступ к navigator, location, fetch и другим объектам.

#Браузерное_окружение #Браузерное_окружение #BOM

Подробнее
👍10🔥21
DOM

DOM (Document Object Model) — это специальная древовидная структура, которая позволяет управлять HTML-разметкой из JavaScript-кода. Управление обычно состоит из добавления и удаления элементов, изменения их стилей и содержимого.

Браузер создаёт DOM при загрузке страницы, складывает его в переменную document и сообщает, что DOM создан, с помощью события DOMContentLoaded. С переменной document начинается любая работа с HTML-разметкой в JavaScript.

#Браузерное_окружение #DOM

Подробнее
👍81🔥1
console.log()

console.log() — это метод, предназначенный для печати в консоль браузера.

При написании скриптов иногда нужно увидеть промежуточный результат прямо в консоли браузера — это просто, удобно и не требует никакой дополнительной логики для отображения.

#Браузерное_окружение #consolelog

Подробнее
🔥3👍21
window.history

History API даёт доступ к управлению историей браузера в рамках текущей сессии. Браузер создаёт новую сессию, когда пользователь открывает новую вкладку или новое окно браузера.

С помощью History API можно переходить по истории вперёд, назад и управлять содержимым истории. Доступ к API осуществляется с помощью объекта window.history.

Основные методы:

back() перемещает пользователя по истории на страницу назад;
forward() перемещает пользователя по истории на страницу вперёд;
go() универсальный метод для перемещения по истории вперёд или назад;
pushState() добавляет новую запись в истории сессии;
replaceState() изменяет текущую запись в истории сессии.

#Браузерное_окружение #windowhistory

Подробнее
👍32🔥1
fetch()

С помощью функции fetch() можно отправлять сетевые запросы на сервер — как получать, так и отправлять данные. Метод возвращает промис с объектом ответа, где находится дополнительная информация (статус ответа, заголовки) и ответ на запрос.

#Браузерное_окружение #fetch

Подробнее
👍52🔥2
window.navigator

Свойство window.navigator возвращает объект описания приложения (user agent), которое выполняет скрипт. В подавляющем большинстве случаев это приложениебраузер. Объект содержит свойства, описывающие браузер, и методы для выполнения действий.

#Браузерное_окружение #windownavigator

Подробнее
👍21🔥1
FormData

FormData — это специальная коллекция данных, которая позволяет передавать данные в виде пар [ключ, значение] на сервер при помощи fetch() или XMLHttpRequest. При этом используется точно такой же формат данных, какой использует тег <form> с типом кодирования 'multipart/form-data'. Поэтому, значения в FormData, как и у обычной HTML формы, могут быть только строками или файлами.

#Браузерное_окружение #FormData

Подробнее
🔥82👍2
window.location

location — это объект хранящийся в window, который позволяет получать информацию о текущем адресе страницы и менять его с помощью функций или обновления полей объекта.

#Браузерное_окружение #windowlocation

Подробнее
👍42🔥2
Geolocation API

Geolocation API позволяет запросить у пользователя данные о географическом местоположении.

Работать с геопозицией пользователей можно только при защищённом соединении (HTTPS).

#Браузерное_окружение #GeolocationAPI

Подробнее
👍3🔥1