JavaScript заметки

Нестандартные атрибуты, dataset При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны. Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript. #браузер #документ #атрибуты_свойств

DOM-свойства типизированы DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип. Есть и другие примеры. Атрибут style – строка, но свойство style является объектом. Хотя большинство свойств, всё же, строки. При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash. #браузер #документ #свойства_узлов

Хочешь прокачать дизайнерские скиллы? Самое время. Канал, из-за которого ты начнешь создавать работающий дизайн и дорого его продавать   Курсы тебе не понадобятся, здесь собрана вся необходимая теория и инструменты, чтобы ты смог получить заветное место в студии или начать рубить шекели на фрилансе Заходи ко мне: @glaz_ui Все бесплатно. Бери и пользуйся

Исключения синхронизации Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную. В примере выше: - Изменение атрибута value обновило свойство. - Но изменение свойства не повлияло на атрибут. Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value, и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте. #браузер #документ #атрибуты_свойств

Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем рекламу? Следуйте 3 простым шагам, чтобы сделать это: 1) Регистрируйтесь по ссылке: https://telega.in/c/notesjs 2) Пополняйтесь удобным способом 3) Размещайте рекламное сообщение Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

Синхронизация между атрибутами и свойствами Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями). В примере выше id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону. #браузер #документ #атрибуты_свойств

Стоит ли стремиться в финтех? И как писать фронтенд в банке без гипертонии? Разработчики Газпромбанка знают все ответы: на конференции HolyJS 2022 главный инженер разработки Максим Гиленко рассказал, почему нужно оценить все «за» и «против», прежде чем идти в финтех. А еще участники узнали, как замена жесткой бизнес-логики на абстракции может помочь предотвратить выгорание фронтенд-разработчиков в крупной компании. Если ты пишешь на JavaScript и ищешь команду единомышленников, смотри вакансии Газпромбанка > https://vk.cc/cfglwD

Расширенная демонстрация работы с атрибутами Пожалуйста, обратите внимание: 1. getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы. 2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение "123". 3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML. 4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value. #браузер #документ #атрибуты_свойств

Прекрати мечтать и стань мидлом за 50 дней Опытные Frontend-разработчики создали бесплатный канал, в котором регулярно выходят топовые видеоуроки и курсы для начинающих. Хватит тратить время на поиск годного контента, просто подпишись на Войти в IT, остальное мы сделаем за тебя.

HTML-атрибуты В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них. Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный. #браузер #документ #атрибуты_свойств

DOM-свойства Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство. DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять. Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript: - Им можно присвоить любое значение. - Они регистрозависимы (нужно писать elem.nodeType, не elem.NoDeTyPe). #браузер #документ #атрибуты_свойств

🏅Золотое правило программирования: Улучшайте свои навыки каждый день! Easy Code - канал в котором ежедневно публикуются отбороные материалы по JavaScript и не только. Подписывайтесь: @easy_code

Атрибуты и свойства Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов. Например, для такого тега <body id="page"> у DOM-объекта будет такое свойство body.id="page". #браузер #документ #атрибуты_свойств

Другие свойства У DOM-элементов есть дополнительные свойства, в частности, зависящие от класса: - value – значение для <input>, <select> и <textarea> (HTMLInputElement, HTMLSelectElement…). - href – адрес ссылки «href» для <a href="..."> (HTMLAnchorElement). - id – значение атрибута «id» для всех элементов (HTMLElement). - …и многие другие… Большинство стандартных HTML-атрибутов имеют соответствующее DOM-свойство, и мы можем получить к нему доступ. Если мы хотим узнать полный список поддерживаемых свойств для данного класса, можно найти их в спецификации. Например, класс HTMLInputElement описывается здесь: https://html.spec.whatwg.org/#htmlinputelement. Если же нам нужно быстро что-либо узнать или нас интересует специфика определённого браузера – мы всегда можем вывести элемент в консоль, используя console.dir(elem), и прочитать все свойства. Или исследовать «свойства DOM» во вкладке Elements браузерных инструментов разработчика. #браузер #документ #свойства_узлов

🆘 Остановитесь! Боишься проходить собеседования и устал сидеть без работы? Хватит это терпеть, подпишись: @console_log_js

Запись в textContent (безопасный способ) Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её. - С innerHTML вставка происходит «как HTML», со всеми HTML-тегами. - С textContent вставка получается «как текст», все символы трактуются буквально. Сравним два тега div (см. пример выше на картинке). - В первый <div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом. - Во второй <div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>. В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через textContent – один из способов от этого защититься. #браузер #документ #свойства_узлов

textContent: просто текст Свойство textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше). Как мы видим, возвращается только текст, как если бы все <теги> были вырезаны, но текст в них остался. На практике редко появляется необходимость читать текст таким образом. Намного полезнее возможность записывать текст в textContent, т.к. позволяет писать текст «безопасным способом». #браузер #документ #свойства_узлов

Добрый день! — Подборка горящих вакансий от чат-бота Masterhub, сервиса поиска работы для frontend-разработчиков. JS/TypeScript React Dev в Яндекс.Плюc Middle, Senior до 350 000 руб. на руки Полный рабочий день 💬 Мы пишем на TypeScript, используем React, GraphQL (Apollo Client), немного Redux, Node.js для серверного кода. Постоянно ищем способы повысить скорость и надёжность приложений; ✅ Дорабатывать SPA-приложения, расширять функциональность; проектировать кастомизируемые виджеты. Подробнее... JS React+Next.js Dev в Яндекс.Музыку Middle, Senior до 350 000 руб. на руки Полный рабочий день 😄 Предстоит ускорять работу интерфейса и разрабатывать новые функции; применять новые технологии для мобильного сайта Музыки; развивать процессы сборки, тестирования и выкатки инфраструктурных решений. ⚔️ Результатами нашей работы ежедневно пользуются миллионы людей, поэтому особое внимание мы уделяем производительности и стабильности нашего сайта. Сейчас мы пересматриваем процессы CI и workflow. Если вас не пугает легаси и в душе вы новатор, присоединяйтесь к нашей команде! Подробнее... JS/TypeScript Redux Dev в Яндекс Go Middle, Senior до 350 000 руб. на руки Полный рабочий день 💎 Сильная команда, миллионы пользователей, сложные задачи, премии и расширенная программа ДМС, оплата 80% стоимости ДМС для супругов и детей. 🎯 Разрабатывать инфраструктуру и веб-интерфейсы; разрабатывать клиентскую логику на JS; визуализировать данные, заниматься дизайном и вёрсткой. Подробнее... Посмотреть ещё 124 вакансии

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

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