متاح الآن! بحث تيليغرام 2025 — أهم رؤى العام 
JavaScript заметки
الذهاب إلى القناة على Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
إظهار المزيد7 740
المشتركون
-124 ساعات
-67 أيام
-5430 أيام
أرشيف المشاركات
7 740
Исключения синхронизации
Но есть и исключения, например,
input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную.
В примере выше:
- Изменение атрибута value обновило свойство.
- Но изменение свойства не повлияло на атрибут.
Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value, и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.
#браузер #документ #атрибуты_свойств7 740
Как быстрее освоить фронтенд разработку? Используйте комплексный подход!
Немаловажный фактор - наличие обратной связи. Мы собрали для вас каналы, где вы можете БЕСПЛАТНО задавать интересующие вас вопросы и получать на них ответы.
@front_tests - тесты для проверки знаний
@frontend_study - теория и тонкости языка
@front_interview - вопросы для подготовки к собеседованию
@front_helper - сборник полезных инструменов для более продуктивной разработки
@figmadev - бесплатные дизайн-макеты, которые можно реализовать и добавить в портфолио
Подписывайтесь и прокачивайте свои скиллы.
7 740
Синхронизация между атрибутами и свойствами
Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).
В примере выше
id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону.
#браузер #документ #атрибуты_свойств7 740
Расширенная демонстрация работы с атрибутами
Пожалуйста, обратите внимание:
1.
getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение "123".
3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML.
4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value.
#браузер #документ #атрибуты_свойств7 740
Знаменитости массово жалуются на искусственный интеллект, который сливает их интим-фотки.
Процесс и результат работы – на видео.
В телеграме даже появился канал, где пишут про разработки ИИ.
Увидеть себя 90-летнего или создать фейк-порно со своей знакомой? Легко.
Подпишитесь и офигеете, что нам приготовили технологии 2022: @art_intellect
7 740
HTML-атрибуты
В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.
Таким образом, когда у элемента есть
id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит,
если атрибут нестандартный.
#браузер #документ #атрибуты_свойств7 740
DOM-свойства
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать
elem.nodeType, не elem.NoDeTyPe).
#браузер #документ #атрибуты_свойств7 740
Макеты для вёрстки сайтов — это канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку.
Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами вместе с @build_html
7 740
Атрибуты и свойства
Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега
<body id="page"> у DOM-объекта будет такое свойство body.id="page".
#браузер #документ #атрибуты_свойств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
1. Frontend Planet – самые продуктивные приложения собраны в одном месте.
2. IT MIX– канал с полезными шпаргалками, которые облегчат вам жизнь.
3. Frontend Project - здесь собраны лучшие проекты с codepen.
4. Visual Studio Code - канал с плагинами, которые прокачают ваш редактор кода.
✔️(Жми на название канала и получай знания)
7 740
Запись в textContent (безопасный способ)
Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С
innerHTML вставка происходит «как HTML», со всеми HTML-тегами.
- С textContent вставка получается «как текст», все символы трактуются буквально.
Сравним два тега div (см. пример выше на картинке).
- В первый <div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.
- Во второй <div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>.
В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через textContent – один из способов от этого защититься.
#браузер #документ #свойства_узлов7 740
Тебе открыт доступ к уникальной базе знаний
Если ты фронт или дизайнер, такое лучше не пропускать.
Фронтам ~ бесплатное введение в основы UI/UX. Поможет наработать визуальный вкус и прокачать креатив.
UX/UI дизайнерам ~ замена платным курсам и экономия двух тысяч часов на поиске и сортировке информации.
Заходи ко мне: @glaza_ui
7 740
textContent: просто текст
Свойство
textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше).
Как мы видим, возвращается только текст, как если бы все <теги> были вырезаны, но текст в них остался.
На практике редко появляется необходимость читать текст таким образом.
Намного полезнее возможность записывать текст в textContent, т.к. позволяет писать текст «безопасным способом».
#браузер #документ #свойства_узлов7 740
Декомпозиция процесса обработки событий
Метод
handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий (см. пример на картинке).
Теперь обработка событий разделена по методам, что упрощает поддержку кода.
#браузер #документ #события7 740
Объект-обработчик: handleEvent
Мы можем назначить обработчиком не только функцию, но и объект при помощи
addEventListener. В этом случае, когда происходит событие, вызывается метод объекта handleEvent.
#браузер #документ #события7 740
Объект события доступен и в HTML
При назначении обработчика в HTML, тоже можно использовать объект
event.
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: f
unction(event) { alert(event.type) }.
То есть, её первый аргумент называется "event", а тело взято из атрибута.
#браузер #документ #события7 740
Основные свойства объекта event
event.type — тип события, в данном случае "click".
event.currentTarget — элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget.
event.clientX / event.clientY — координаты курсора в момент клика относительно окна, для событий мыши.
#браузер #документ #события7 740
Сейчас уже ни для кого не секрет, что, если вы хотите устроиться в хорошую компанию и стремительно продвигаться вверх по карьерной лестнице, то очень важно знание английского языка.
А с чего можно начать изучение, если совершенно не знаешь английского? Вокруг столько курсов и марафонов, что можно потеряться.
👉🏼 И мы нашли для вас проверенный базовый курс английского EngLove.
На этом курсе:
➡️ вы точно увидите результат и заговорите на английском через 3 месяца
➡️ нет обучения на потоке
➡️ каждому ученику ежедневно даётся обратная связь 💪
❇️ Для кого этот курс?
📌 для тех, кому фраза “I very good speak English” кажется правильной
📌 для тех, кто вообще не изучал английский или изучал в школе/на курсах/в университете, но ничего не помнит
❇️ Что требуется от вас:
📌 В течение 3 месяцев стабильно заниматься английским 60 минут в день.
📌 раз в неделю на выходных заниматься 60 минут устно в мини-группе с преподавателем и носителем языка.
❇️ Что вы получите:
📌 Вы будете знать базу грамматики и лексики английского языка, которая поможет вам развиваться дальше.
📌 Вы сможете преодолеть языковой барьер, так как на курсе есть носитель языка.
🚀 Старт 3-го потока - 12 сентября.
Подписывайтесь также на телеграмм-канал курса, где очень много полезного! 😉
7 740
Объект события
Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.
Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.
Пример выше демонстрирует получение координат мыши из объекта события.
#браузер #документ #события
