JavaScript заметки

"Javascript developer. Professional"  - это хардкорный онлайн-курс для web-разработчиков по продвинутым возможностям JS и его фреймворков. Приходите за продвинутыми навыками фулстек-разработки в OTUS. В программе курса — современные технологии Node.js, React, Angular, Vue, Svelte, TypeScript, Web Components.  Справитесь ли вы с уровнем курса? Покажет вступительный тест. 📍Пройдите тестирование, чтобы: ● оценить свои навыки ● получить доступ к демо-занятиям курса ● занять место по специальной цене ● получить доступ в закрытое сообщество JS-разработчиков 👉 Пройти полное тестирование: https://otus.pw/igcy/ Реклама. Информация о рекламодателе на сайте otus.ru

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

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

JavaScript - всё о JavaScript и frontend-разработке. Подпишись - @js_script

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

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

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

Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷 Или писать личную СМСку, когда каждое слово видит клавиатурный шпион. Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять. Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К». Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника? Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab

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

Итого по свойствам узлов Каждый DOM-узел принадлежит определённому классу. Классы формируют иерархию. Весь набор свойств и методов является результатом наследования. Главные свойства DOM-узла: nodeType - позволяет узнать тип DOM-узла. nodeName/tagName - это свойство возвращает название тега. Только для чтения. innerHTML - внутреннее HTML-содержимое узла-элемента. Можно изменять. outerHTML - полный HTML узла-элемента. Запись в elem.outerHTML не меняет elem. Вместо этого она заменяет его во внешнем контексте. nodeValue/data - содержимое узла-неэлемента (текст, комментарий). Можно изменять. textContent - текст внутри элемента: HTML за вычетом всех <тегов>. hidden - когда значение установлено в true, делает то же самое, что и CSS display:none. В зависимости от своего класса DOM-узлы имеют и специфичные свойства. #браузер #документ #свойства_узлов

Станьте идеальным разработчиком😎 У нас есть курс, у вас — интерес к ИТ-сфере. Оставляйте заявки, чтобы не пропустить всё самое актуальное.  Преподаватели-практики на СВОЁМ опыте отобрали только то, что будет действительно важно для Fullstack-разработчика.  Вы ✔️экономите время ✔️экономите деньги ✔️прокачиваетесь профессионально Повысьте свою квалификацию и станьте тем, кто может всё, — Fullstack-разработчиком на JavaScript! Быстрая профессиональная прокачка от практиков🔥 Скорее занимайте места, чтобы разобраться в backend и frontend.  Не пропустите старт 03.10.2022. Ещё есть места, переходите по ссылке.

Другие свойства У 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 браузерных инструментов разработчика. #браузер #документ #свойства_узлов

Свойство «hidden» Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет. Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке). Технически, hidden работает так же, как style="display:none". Но его применение проще. #браузер #документ #свойства_узлов

Свойство «hidden» Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет. Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке). Технически, hidden работает так же, как style="display:none". Но его применение проще. #браузер #документ #свойства_узлов

FrontendConf 2022 – это профессиональная конференция, которая посвящена всем аспектам разработки клиентской части веб проектов. Вас ждут интересные и полезные доклады от спикеров, реальные кейсы, нетворкинг, активности на стендах партнеров, а также крутые мастер-классы. Вы легко сможете пообщаться с ТОПами индустрии. Посмотрите отчетное видео FrontendConf 2021 и почувствуйте атмосферу нашей конференции 🤩 Переходите на сайт и бронируйте билет до повышения цены.

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

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

Для тех кто просил, открываем доступ в секретный канал на 2 ЧАСА👇 https://t.me/+ijjAVkLQHZ5hYjFi

nodeValue/data: содержимое текстового узла Свойство innerHTML есть только у узлов-элементов. У других типов узлов, в частности, у текстовых, есть свои аналоги: свойства nodeValue и data. Эти свойства очень похожи при использовании, есть лишь небольшие различия в спецификации. Мы будем использовать data, потому что оно короче. Прочитаем содержимое текстового узла и комментария (см. картинку выше). Мы можем представить, для чего нам может понадобиться читать или изменять текстовый узел, но комментарии? Иногда их используют для вставки информации и инструкций шаблонизатора в HTML. JavaScript может прочитать это из свойства data и обработать инструкции. #браузер #документ #свойства_узлов