JavaScript заметки
Открыть в Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Больше7 368
Подписчики
-124 часа
-167 дней
-5730 дней
Архив постов
7 368
"Зарезервированные" атрибуты (dataset)
Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве
dataset.
Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.
Атрибуты, состоящие из нескольких слов, к примеру data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации (CamelCase): dataset.orderState.
См. переписанный пример «состояния заказа» на картинке выше.
Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.
#браузер #документ #атрибуты_свойств7 368
Dark Space — это один из самых крупных каналов о DarkNet
На нашем канале работает множество админов, мы постоянно пополняем канал свежей информацией для подписчиков (баги, узявимости, программы и прочее):
• Вычисляем передвижение IOS-устройств.
• Устанавливаем слежку за "другом".
• 3 новых программы для спам-атак (одна, вторая).
Присоединяйся, и получи больше полезного материала:
https://t.me/+HhR02ErmGAgzNTUy
7 368
Атрибуты для стилизации элементов
Например, здесь для состояния заказа используется атрибут
order-state (см. картинку выше).
Почему атрибут может быть предпочтительнее таких классов, как .order-state-new, .order-state-pending, order-state-canceled?
Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто.
#браузер #документ #атрибуты_свойств7 368
7 368
Нестандартные атрибуты, dataset
При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.
Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.
#браузер #документ #атрибуты_свойств
7 368
Хочешь стать программистом, но не уверен, что тебе подойдёт эта специальность? Сомневаешься в своих силах и что сможешь освоить материал?
У нас есть для тебя решение.
В GeekBrains начинается курс для будущих айтишников. Ты сможешь получить базовые знания по программированию, а также написать свою первую программу без какой-либо подготовки всего за несколько часов – https://clc.to/v0Vgog
Но и это не всё: только для участников курса мы откроем много полезного контента, например курс и инструкции по запоминанию и изучению сложного материала, задачи на тренировку логики, эксклюзивные интервью, разбор ключевых специальностей в IT и многое другое.
Начни учиться бесплатно прямо сейчас вместе с GeekBrains. Переходи по ссылке в описании, регистрируйся, обязательно заполняй анкету и переходи сразу к обучению — https://clc.to/v0Vgog
Ждем тебя на занятиях.
7 368
DOM-свойства типизированы
DOM-свойства не всегда являются строками. Например, свойство
input.checked (для чекбоксов) имеет логический тип.
Есть и другие примеры. Атрибут style – строка, но свойство style является объектом.
Хотя большинство свойств, всё же, строки.
При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash.
#браузер #документ #свойства_узлов7 368
Команда разработчиков Netflix создала Telegram-канал, в котором рассказывают о секретах современной frontend-разработки.
В этом канале ты найдёшь: уникальные библиотеки, обзоры инструментов, интересные задачи, и многое другое.
Осваивай frontend-разработку без напряга👇
7 368
Исключения синхронизации
Но есть и исключения, например,
input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную.
В примере выше:
- Изменение атрибута value обновило свойство.
- Но изменение свойства не повлияло на атрибут.
Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value, и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.
#браузер #документ #атрибуты_свойств7 368
Большой сборник шпаргалок и документации для системных администраторов:
https://t.me/sysadmin_library
Информация постоянно дополняется.
7 368
Синхронизация между атрибутами и свойствами
Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).
В примере выше
id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону.
#браузер #документ #атрибуты_свойств7 368
Берись за голову - начинай писать код
Python Teacher - твой карманный справочник по самому востребованному языку программирования в России.
7 368
Расширенная демонстрация работы с атрибутами
Пожалуйста, обратите внимание:
1.
getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение "123".
3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML.
4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value.
#браузер #документ #атрибуты_свойств7 368
Тимлид по секрету показал мне свои закладки
Там столько полезного, что я не удержался и выкладываю все это добро на своем канале.
Подпишись на канал и посмотри 👇
7 368
Привет, дорогой подписчик!
Мы молодая команда JS разработчиков, которая решила открыть несколько каналов в Telegram, посвященных JavaScript и frontend-разработке в целом.
Подписывайся на другие наши проекты:
JavaScript тесты - канал с тестами и задачами по JS. Здесь ты сможешь практиковаться и обсуждать свои решения с другими подписчиками и админами. Каждый день тебя будет ждать новый интересный вызов в виде очередной викторины.
JavaScript инструменты - канал с инструментами по JS. Здесь каждый день публикуются современные технологии призванные упростить разработку на JavaScript.
Полезная вËрстка - канал с готовым кодом интересных решений различных повседневных задач: слайдеры, навигации, различная анимация и многое другое.
Развивайся с нами, ведь так проще!
7 368
HTML-атрибуты
В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.
Таким образом, когда у элемента есть
id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит,
если атрибут нестандартный.
#браузер #документ #атрибуты_свойств7 368
Программировать сразу на 3 языках – возможно?
Да, если подписан на Minor Code и пользуешься фишками с канала. Внутри:
– подборки книг по Python, C++ и Java
– готовые скрипты и программы на разных ЯП
– выжимки статей и уроки кодинга
Это как курсы по программированию, только бесплатно: @minorcode
7 368
DOM-свойства
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать
elem.nodeType, не elem.NoDeTyPe).
#браузер #документ #атрибуты_свойств7 368
📌 Топ ресурсов с бесплатными курсами:
1.Бесплатные курсы по JS
2.Бесплатные курсы по HTML/CSS
3.Бесплатные курсы для full stack dev
5.Бесплатные курсы по версте
6.Бесплатные курсы по python
7.Бесплатные курсы по Java
8.Бесплатные курсы по C++
9.Бесплатные курсы по Unity
10.Бесплатные курсы по SQL
11.Бесплатные курсы по Android
12.Бесплатные курсы по С#
13.Бесплатные курсы по UnrealEngine
14.Бесплатные курсы по Linux
15.Бесплатные курсы по tilda
16.Бесплатные курсы по Kotlin
7 368
Атрибуты и свойства
Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега
<body id="page"> у DOM-объекта будет такое свойство body.id="page".
#браузер #документ #атрибуты_свойств