JavaScript заметки

Методы в 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 #интернационализация

🤯 829 GB курсов и книг на английском по разработке, программированию, информационной безопасности. Cкачать можно здесь(пост в закрепе) Кинь в избранное, чтобы не потерять:)

Соседи и родитель Соседи – это узлы, у которых один и тот же родитель. Следующий сосед – в свойстве nextSibling, а предыдущий – в previousSibling. Родитель доступен через parentNode. P.S. Примеры показаны на картинке выше. #браузер #документ #dom_навигация

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

Числа, Intl.NumberFormat Форматтер Intl.NumberFormat умеет красиво форматировать не только числа, но и валюту, а также проценты. P.S. На скрине показаны примеры создания и использования числового форматтера. #разное #Intl #интернационализация

Даты, 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 #интернационализация

ТОП-2 способа научиться создавать сайты: ✖️ Купить дорогой онлайн-курс ✔️ Подписаться на Сайтодел Это крупнейшее сообщество Web-разработчиков в Telegram! Там делятся лучшими бесплатными материалами и уроками: 📲 Макеты, сниппеты, репозитории и даже цветовые палитры. Здесь собрано всё, что необходимо новичку! Подписывайтесь и прокачивайте свои навыки: @sitodel 👈

Строки, Intl.Collator Intl.Collator - конструктор для «сортировщиков», которые представляют собой объекты, позволяющие сравнивать строки с учетом языка. Общая проблема строк JavaScript – они «не в курсе» языка и особенностей стран, где находится посетитель. При сравнении сравниваются коды символов, а это неправильно, к примеру, в русском языке оказывается, что "ё" > "я" и "а" > "Я", хотя всем известно, что я – последняя буква алфавита и это она должна быть больше любой другой. Intl.Collator решает все эти проблемы. P.S. Результат compare имеет значение 1 (больше), 0 (равно) или -1 (меньше). #разное #Intl #интернационализация

Proxy: Валидация с ловушкой «set» Допустим, мы хотим сделать массив исключительно для чисел. Если в него добавляется значение иного типа, то это должно приводить к ошибке. Ловушка set срабатывает, когда происходит запись свойства. - set(target, property, value, receiver): - target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy, - property – имя свойства, - value – значение свойства, - receiver – аналогично ловушке get, этот аргумент имеет значение, только если свойство – сеттер. Ловушка set должна вернуть true, если запись прошла успешно, и false в противном случае (будет сгенерирована ошибка TypeError). #разное #proxy #ловушки

Frontend-разработчики делают сайты и сложные сервисы. Они востребованы в больших корпорациях, маленьких студиях и на фрилансе. Что нужно, чтобы стать одним из них? На курсе Skillbox «Профессия Frontend-разработчик с нуля до PRO» за 9 месяцев вы сможете освоить специальность, трудоустроиться и начать зарабатывать. Вот что вас ждёт. → Трёхуровневая программа: основы, стажировка в команде, специализация. За первые 6 месяцев обучения платит Skillbox → Гарантия трудоустройства. Трудоустроим или вернём деньги! Подробные условия акции на сайте. → 6 проектов в портфолио, которые помогут доказать работодателю ваши навыки . → Сертификат Skillbox, который подтвердит вашу компетентность. → Год английского языка в нашей онлайн-школе в подарок. Переходите по ссылке https://clc.to/zad2qA, чтобы получить бесплатную консультацию и получить скидку.

Продвинутая реализация каррирования Выше представлен "продвинутый" вариант функции каррирования. Когда мы запускаем её, есть две ветви выполнения if: 1. Вызвать сейчас: если количество переданных аргументов args совпадает с количеством аргументов при объявлении функции (func.length) или больше, тогда вызов просто переходит к ней. 2. Частичное применение: в противном случае func не вызывается сразу. Вместо этого, возвращается другая обёртка pass, которая снова применит curried, передав предыдущие аргументы вместе с новыми. Затем при новом вызове мы опять получим либо новое частичное применение (если аргументов недостаточно) либо, наконец, результат. На картинке выше показано, что произойдёт в случае sum(a, b, c). У неё три аргумента, так что sum.length = 3. #разное #каррирование

Бесполезно учить JavaScript без знания технического английского! Английский программиста - самый простой и удобный способ выучить it термины и профессиональный английский. Даже опытные кодеры нас читают! Подпишись: @iteng

Proxy: Значение по умолчанию с ловушкой «get» Чаще всего используются ловушки на чтение/запись свойств. Чтобы перехватить операцию чтения, handler должен иметь метод get(target, property, receiver). Он срабатывает при попытке прочитать свойство объекта, с аргументами: - target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy, - property – имя свойства, - receiver – если свойство объекта является геттером, то receiver – это объект, который будет использован как this при его вызове. Обычно это сам объект прокси (или наследующий от него объект). Прямо сейчас нам не понадобится этот аргумент, подробнее разберём его позже. Давайте применим ловушку get, чтобы реализовать «значения по умолчанию» для свойств объекта. Например, сделаем числовой массив, так чтобы при чтении из него несуществующего элемента возвращался 0. #разное #proxy #ловушки

Proxy: ловушки Proxy – это особый объект, у него нет собственных свойств. С пустым handler он просто перенаправляет все операции на target. Чтобы активировать другие его возможности, добавим ловушки. Для большинства действий с объектами в спецификации JavaScript есть так называемый «внутренний метод», который на самом низком уровне описывает, как его выполнять. Например, [[Get]] – внутренний метод для чтения свойства, [[Set]] – для записи свойства, и так далее. Эти методы используются только в спецификации, мы не можем обратиться напрямую к ним по имени. Ловушки как раз перехватывают вызовы этих внутренних методов. Полный список методов, которые можно перехватывать, перечислен в спецификации Proxy, а также в таблице ниже. Для каждого внутреннего метода в этой таблице указана ловушка, то есть имя метода, который мы можем добавить в параметр handler при создании new Proxy, чтобы перехватывать данную операцию. P.S. На картинке отображена таблица со всеми доступными ловушками. #разное #proxy #ловушки

Proxy Объект Proxy «оборачивается» вокруг другого объекта и может перехватывать (и, при желании, самостоятельно обрабатывать) разные действия с ним, например чтение/запись свойств и другие. Далее мы будем называть такие объекты «прокси». Прокси используются во многих библиотеках и некоторых браузерных фреймворках. Синтаксис: let proxy = new Proxy(target, handler); - target – это объект, для которого нужно сделать прокси, может быть чем угодно, включая функции. - handler – конфигурация прокси: объект с «ловушками» («traps»): методами, которые перехватывают разные операции, например, ловушка get – для чтения свойства из target, ловушка set – для записи свойства в target и так далее. При операциях над proxy, если в handler имеется соответствующая «ловушка», то она срабатывает, и прокси имеет возможность по-своему обработать её, иначе операция будет совершена над оригинальным объектом target. #разное #proxy

matches Предыдущие методы искали по DOM. Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false. Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют. #браузер #документ #поиск

Главный мастхэв на 2022 год – выучить английский. С ним ты: → Легко заведешь друзей заграницей → Пересмотришь все сериалы без гугл-транслейта → В глазах знакомых будешь «тем самым чуваком с крутым акцентом» Чтобы speak english легко, заходи в канал Руинглиш. Одна неделя – и твоей речи позавидуют даже true americans.  🧠 Без зубрёжки. Без стандартных правил. Без скучной грамматики.  Хватай шанс выучить английский раз и навсегда: @RuEnglish

Пример: показать сообщение Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert. Это был пример HTML. Далее мы будем создавать такой же div, используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле). #браузер #документ #изменение

Хотите изучить программирование и стать востребованным веб-разработчиком? Попробуйте себя в вёрстке на бесплатном открытом уроке с опытным наставником! 😍 Когда: 12 июля в 16:00. В программе: 💙Что такое семантическая вёрстка. 💙Какие теги использовать корректно, а какие нет. 💙Знакомство с макетом и его пошаговая вёрстка. Хотите стать айтишником с нуля? Записывайтесь на лайв и начните обучение уже сейчас!

На каждой фазе разные обработчики на одном элементе срабатывают в порядке назначения Если у нас несколько обработчиков одного события, назначенных addEventListener на один элемент, в рамках одной фазы, то их порядок срабатывания – тот же, в котором они установлены. #браузер #документ #событие