现已上线！2025 年 Telegram 研究 — 年度关键洞察 
JavaScript заметки
前往频道在 Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
显示更多7 740
订阅者
无数据24 小时
-57 天
-5730 天
帖子存档
7 740
один шрифт в день - telegram канал, куда дизайнеры публикуют популярные шрифты ежедневно. Присоединяйся, чтобы ускорить подбор интересных шрифтов для своих проектов!
7 740
DOM-свойства
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать
elem.nodeType, не elem.NoDeTyPe).
#браузер #документ #атрибуты_свойств7 740
Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷
Или писать личную СМСку, когда каждое слово видит клавиатурный шпион.
Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять.
Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К».
Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника?
Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab
7 740
Атрибуты и свойства
Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега
<body id="page"> у DOM-объекта будет такое свойство body.id="page".
#браузер #документ #атрибуты_свойств7 740
Итого по свойствам узлов
Каждый DOM-узел принадлежит определённому классу. Классы формируют иерархию. Весь набор свойств и методов является результатом наследования.
Главные свойства DOM-узла:
nodeType - позволяет узнать тип DOM-узла.
nodeName/tagName - это свойство возвращает название тега. Только для чтения.
innerHTML - внутреннее HTML-содержимое узла-элемента. Можно изменять.
outerHTML - полный HTML узла-элемента. Запись в
elem.outerHTML не меняет elem. Вместо этого она заменяет его во внешнем контексте.
nodeValue/data - содержимое узла-неэлемента (текст, комментарий). Можно изменять.
textContent - текст внутри элемента: HTML за вычетом всех <тегов>.
hidden - когда значение установлено в true, делает то же самое, что и CSS display:none.
В зависимости от своего класса DOM-узлы имеют и специфичные свойства.
#браузер #документ #свойства_узлов7 740
Станьте идеальным разработчиком😎
У нас есть курс, у вас — интерес к ИТ-сфере. Оставляйте заявки, чтобы не пропустить всё самое актуальное.
Преподаватели-практики на СВОЁМ опыте отобрали только то, что будет действительно важно для Fullstack-разработчика.
Вы
✔️экономите время
✔️экономите деньги
✔️прокачиваетесь профессионально
Повысьте свою квалификацию и станьте тем, кто может всё, — Fullstack-разработчиком на JavaScript!
Быстрая профессиональная прокачка от практиков🔥
Скорее занимайте места, чтобы разобраться в backend и frontend.
Не пропустите старт 03.10.2022. Ещё есть места, переходите по ссылке.
7 740
Другие свойства
У 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 браузерных инструментов разработчика.
#браузер #документ #свойства_узлов7 740
Свойство «hidden»
Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет.
Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке).
Технически,
hidden работает так же, как style="display:none". Но его применение проще.
#браузер #документ #свойства_узлов7 740
Свойство «hidden»
Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет.
Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке).
Технически,
hidden работает так же, как style="display:none". Но его применение проще.
#браузер #документ #свойства_узлов7 740
FrontendConf 2022 – это профессиональная конференция, которая посвящена всем аспектам разработки клиентской части веб проектов.
Вас ждут интересные и полезные доклады от спикеров, реальные кейсы, нетворкинг, активности на стендах партнеров, а также крутые мастер-классы. Вы легко сможете пообщаться с ТОПами индустрии.
Посмотрите отчетное видео FrontendConf 2021 и почувствуйте атмосферу нашей конференции 🤩
Переходите на сайт и бронируйте билет до повышения цены.
7 740
Запись в textContent (безопасный способ)
Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С
innerHTML вставка происходит «как HTML», со всеми HTML-тегами.
- С textContent вставка получается «как текст», все символы трактуются буквально.
Сравним два тега div (см. пример выше на картинке).
- В первый <div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.
- Во второй <div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>.
В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через textContent – один из способов от этого защититься.
#браузер #документ #свойства_узлов7 740
textContent: просто текст
Свойство
textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше).
Как мы видим, возвращается только текст, как если бы все <теги> были вырезаны, но текст в них остался.
На практике редко появляется необходимость читать текст таким образом.
Намного полезнее возможность записывать текст в textContent, т.к. позволяет писать текст «безопасным способом».
#браузер #документ #свойства_узлов7 740
Для тех кто просил, открываем доступ в секретный канал на 2 ЧАСА👇
https://t.me/+ijjAVkLQHZ5hYjFi
7 740
Скинуть секретный архив с платными материалами и книгами для программистов?
7 740
nodeValue/data: содержимое текстового узла
Свойство
innerHTML есть только у узлов-элементов.
У других типов узлов, в частности, у текстовых, есть свои аналоги: свойства nodeValue и data. Эти свойства очень похожи при использовании, есть лишь небольшие различия в спецификации. Мы будем использовать data, потому что оно короче.
Прочитаем содержимое текстового узла и комментария (см. картинку выше).
Мы можем представить, для чего нам может понадобиться читать или изменять текстовый узел, но комментарии?
Иногда их используют для вставки информации и инструкций шаблонизатора в HTML.
JavaScript может прочитать это из свойства data и обработать инструкции.
#браузер #документ #свойства_узлов7 740
outerHTML: HTML элемента целиком
Свойство
outerHTML содержит HTML элемента целиком. Это как innerHTML плюс сам элемент.
Будьте осторожны: в отличие от innerHTML, запись в outerHTML не изменяет элемент. Вместо этого элемент заменяется целиком во внешнем контексте.
Да, звучит странно, и это действительно необычно, поэтому здесь мы и отмечаем это особо.
#браузер #документ #свойства_узлов7 740
🔥 Хакатон ВТБ API возвращается!
Развивайте API на деле вместе с нами, участвуйте в VTB API hackathon 2022. Призовой фонд 1 800 000 рублей!
Приглашаются разработчики, графические и UX/UI-дизайнеры, аналитики, продакт-менеджеры, QA- и DevOps-специалисты.
Принять участие: https://cnrlink.com/vtbapijszm
Два трека:
1. Продукты на основе API;
2. Инструменты обеспечения безопасности API.
Финалисты получат фирменный мерч от ВТБ!А ещё в этом году Хакатон проводится при поддержке Финтех Хаба Банка России – это уникальная возможность для участников выиграть приз: обучение в образовательных программах Финтех Хаба.
Успейте зарегистрироваться до 25 сентября!
Регистрация по ссылке: https://cnrlink.com/vtbapijszm
7 740
Будьте внимательны: «innerHTML+=» осуществляет перезапись
Мы можем добавить HTML к элементу, используя
elem.innerHTML+="ещё html".
На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись.
Технически эти две строки (см. картинку выше) делают одно и то же.
Другими словами, innerHTML+= делает следующее:
1) Старое содержимое удаляется.
2) На его место становится новое значение innerHTML (с добавленной строкой).
Так как содержимое «обнуляется» и переписывается заново, все изображения и другие ресурсы будут перезагружены.
В примере chatDiv выше строка chatDiv.innerHTML+="Как дела?" заново создаёт содержимое HTML и перезагружает smile.gif (надеемся, картинка закеширована). Если в chatDiv много текста и изображений, то эта перезагрузка будет очень заметна.
#браузер #документ #свойства_узлов7 740
innerHTML: содержимое элемента
Свойство innerHTML позволяет получить HTML-содержимое элемента в виде строки.
Мы также можем изменять его. Это один из самых мощных способов менять содержимое на странице.
Пример выше показывает содержимое
document.body, а затем полностью заменяет его.
#браузер #документ #свойства_узлов7 740
Хотите увеличить уровень дохода и стать востребованным специалистом в IT? Тогда у нас для вас новости!
22 сентября в 13:00 вы не только узнаете, чем полезен React и прокачаетесь в программировании, но и увидите, как написать приложение на JavaScript.
Запишитесь на лайв и узнаете:
✅ Стоит ли учить React и востребован ли он на рынке труда.
✅ как выглядят типовые проекты на React, доступные даже для новичков.
А мы с вами напишем приложение для прогноза погоды на JavaScript с использованием библиотеки React.
Спойлер: программировать не просто, а очень просто! Не верите? Докажем на бесплатном лайве!!
