Строки, Intl.Collator

Intl.Collator - конструктор для «сортировщиков», которые представляют собой объекты, позволяющие сравнивать строки с учетом языка.

Общая проблема строк JavaScript – они «не в курсе» языка и особенностей стран, где находится посетитель.

При сравнении сравниваются коды символов, а это неправильно, к примеру, в русском языке оказывается, что "ё" > "я" и "а" > "Я", хотя всем известно, что я – последняя буква алфавита и это она должна быть больше любой другой.

Intl.Collator решает все эти проблемы.

P.S. Результат compare имеет значение 1 (больше), 0 (равно) или -1 (меньше).

#разное #Intl #интернационализация

ТОП-2 способа научиться создавать сайты:

✖️ Купить дорогой онлайн-курс
✔️ Подписаться на Сайтодел

Это крупнейшее сообщество Web-разработчиков в Telegram! Там делятся лучшими бесплатными материалами и уроками:

📲 Макеты, сниппеты, репозитории и даже цветовые палитры. Здесь собрано всё, что необходимо новичку!

Подписывайтесь и прокачивайте свои навыки: @sitodel 👈

Даты, Intl.DateTimeFormat

Первый аргумент – такой же, как и в Collator, а в объекте options мы можем определить, какие именно части даты показывать (часы, месяц, год…) и в каком формате.

Все локали обязаны поддерживать следующие наборы настроек:
- weekday, year, month, day, hour, minute, second
- weekday, year, month, day
- year, month, day
- year, month
- month, day
- hour, minute, second

Если указанный формат не поддерживается, то настройка formatMatcher задаёт алгоритм подбора наиболее близкого формата: basic – по стандартным правилам и best fit – по умолчанию, на усмотрение окружения (браузера).

#разное #Intl #интернационализация

Числа, Intl.NumberFormat

Форматтер Intl.NumberFormat умеет красиво форматировать не только числа, но и валюту, а также проценты.

P.S. На скрине показаны примеры создания и использования числового форматтера.

#разное #Intl #интернационализация

Делать сайты не так сложно как кажется!

На нашем втором канале Полезная вЁрстка можно найти готовые решения ежедневных задач, с которыми сталкиваются веб-разработчики.

Подписывайся на канал и получай новые идеи!

Соседи и родитель

Соседи – это узлы, у которых один и тот же родитель.

Следующий сосед – в свойстве nextSibling, а предыдущий – в previousSibling.
Родитель доступен через parentNode.

P.S. Примеры показаны на картинке выше.

#браузер #документ #dom_навигация

Методы в Date, String, Number

Методы форматирования также поддерживаются в обычных строках, датах, числах:

String.prototype.localeCompare(that [, locales [, options]])
Сравнивает строку с другой, с учётом локали.

Date.prototype.toLocaleString([locales [, options]])
Форматирует дату в соответствии с локалью.

Date.prototype.toLocaleDateString([locales [, options]])
То же, что и выше, но опции по умолчанию включают в себя год, месяц, день.

Date.prototype.toLocaleTimeString([locales [, options]])
То же, что и выше, но опции по умолчанию включают в себя часы, минуты, секунды.

Number.prototype.toLocaleString([locales [, options]])
Форматирует число, используя опции Intl.NumberFormat.

Все эти методы при запуске создают соответствующий объект Intl.* и передают ему опции, можно рассматривать их как укороченные варианты вызова.

P.S. Примеры по каждому методу показаны на картинке.

#разное #Intl #интернационализация

Браузерное окружение, спецификации

Язык JavaScript изначально был создан для веб-браузеров. Но с тех пор он значительно эволюционировал и превратился в кроссплатформенный язык программирования для решения широкого круга задач.

Сегодня JavaScript может использоваться в браузере, на веб-сервере или в какой-то другой среде, даже в кофеварке. Каждая среда предоставляет свою функциональность, которую спецификация JavaScript называет окружением.

Окружение предоставляет свои объекты и дополнительные функции, в дополнение базовым языковым. Браузеры, например, дают средства для управления веб-страницами. Node.js делает доступными какие-то серверные возможности и так далее.

P.S. На картинке в общих чертах показано, что доступно для JavaScript в браузерном окружении.

#браузер #документ

DOM (Document Object Model)

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объект document – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице.

Мы использовали в примере только document.body.style, но на самом деле возможности по управлению страницей намного шире. Различные свойства и методы описаны в спецификации:

DOM Living Standard на https://dom.spec.whatwg.org

#браузер #документ

BOM (Browser Object Model)

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

Например:
- Объект navigator даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются: navigator.userAgent – информация о текущем браузере, и navigator.platform – информация о платформе (может помочь в понимании того, в какой ОС открыт браузер – Windows/Linux/Mac и так далее).
- Объект location позволяет получить текущий URL и перенаправить браузер по новому адресу.

Пример как мы можем использовать объект location показан на рисунке.

Функции alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем.

#браузер #документ

Пример DOM

DOM – это представление HTML-документа в виде дерева тегов.

На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов.

Каждый узел этого дерева – это объект.

Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: <html> – это корневой узел, <head> и <body> его дочерние узлы и т.д.

Текст внутри элементов образует текстовые узлы, обозначенные как #text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне.

Например, в теге <title> есть текстовый узел "О лосях".

Обратите внимание на специальные символы в текстовых узлах:
- перевод строки: ↵ (в JavaScript он обозначается как \n)
- пробел: ␣

#браузер #документ #dom

Автоисправление

Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.

Например, в начале документа всегда должен быть тег <html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>.

Например, если HTML-файл состоит из единственного слова "Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег <head>.

При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.

В примере единственный тег <p> не закрыт, однако DOM будет нормальным, потому что браузер сам закроет тег и восстановит отсутствующие детали.

#браузер #документ #dom

Другие типы узлов

Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.

Например, узел-комментарий, который вы можете увидеть на картинке выше.

Здесь мы видим узел нового типа – комментарий, обозначенный как #comment, между двумя текстовыми узлами.

Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве.

Все, что есть в HTML, даже комментарии, является частью DOM.

Даже директива <!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед <html>. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует.

Даже объект document, представляющий весь документ, формально является DOM-узлом.

Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них: document, узлы-элементы, текстовые узлы, комментарии.

#браузер #документ #dom

Поэкспериментируйте сами

Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.

Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.

Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.

Выглядит примерно так, как на картинке выше.

Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.

Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.

#браузер #документ #dom

Создание элемента

DOM-узел можно создать двумя методами:

document.createElement(tag) - создаёт новый элемент с заданным тегом.

document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом.

Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения.

#браузер #документ #изменение

Почти все события всплывают.

Ключевое слово в этой фразе – «почти».

Например, событие focus не всплывает. В дальнейшем мы увидим и другие примеры. Однако, стоит понимать, что это скорее исключение, чем правило, всё-таки большинство событий всплывают.

#браузер #документ #всплытие

Основные свойства объекта event

event.type — тип события, в данном случае "click".

event.currentTarget — элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget.

event.clientX / event.clientY — координаты курсора в момент клика относительно окна, для событий мыши.

#браузер #документ #события

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект event.

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: f
unction(event) { alert(event.type) }.

То есть, её первый аргумент называется "event", а тело взято из атрибута.

#браузер #документ #события

Можно использовать класс для обработки событий

Как видим, если addEventListener получает класс в качестве обработчика, он вызывает menu.handleEvent(event), когда происходит событие.

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener. Тогда объект menu будет получать события mousedown и mouseup, но не другие (не назначенные) типы событий.

#браузер #документ #события

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener. В этом случае, когда происходит событие, вызывается метод объекта handleEvent.

#браузер #документ #события