JavaScript заметки

@codewars_js - telegram-канал для фронтенд-разработчиков, в котором публикуют задачи разной сложности по JavaScript. Подписывайся и развивай мышление программиста.

insertAdjacentHTML/Text/Element С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html). Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих: "beforebegin" – вставить html непосредственно перед elem, "afterbegin" – вставить html в начало elem, "beforeend" – вставить html в конец elem, "afterend" – вставить html непосредственно после elem. Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML». #браузер #документ #изменение

Методы вставки Вот методы для различных вариантов вставки: node.append(...nodes or strings) – добавляет узлы или строки в конец node, node.prepend(...nodes or strings) – вставляет узлы или строки в начало node, node.before(...nodes or strings) – вставляет узлы или строки до node, node.after(...nodes or strings) – вставляет узлы или строки после node, node.replaceWith(...nodes or strings) – заменяет node заданными узлами или строками. #браузер #документ #изменение

⚡Хочешь стать универсальным разработчиком и участвовать во всех этапах разработки? Тогда профессия Fullstack-разработчик на JavaScript для тебя! Такой специалист отвечает как за внешнюю часть сайта: верстку, дизайн, интерфейс, так и внутреннюю часть: сервера и базы данных. Освоить все необходимые навыки для старта в этой профессии можно с помощью специализации «Fullstack Developer» от OTUS. На этом онлайн-курсе предумотрена серьезная поэтапная подготовка: 3 ступени с живыми вебинарами, практикой и видеокурсом. 📌За 14 месяцев вы соберете 3 проекта в портфолио из и сможете стать Fullstack-разработчиком уровня Middle+, а трудоустроиться можно еще во время обучения. В этом вам поможет центр карьеры OTUS. 👉Успей записаться в группу до конца сентября со скидкой в 20%: https://otus.pw/t4oE/

Методы вставки, append Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в document.body. Для этого есть метод append, в нашем случае: document.body.append(div). #браузер #документ #изменение

Создание сообщения В нашем случае сообщение – это div с классом alert и HTML в нём. Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа. #браузер #документ #изменение

📌 Узнайте всё о фронтенд-разработке на бесплатном онлайн-вебинаре образовательной платформы Хекслет. Подключайтесь к прямому эфиру 30 сентября (пятница), в 19:00 мск! Для кого?  ✅ Вы новичок в программировании. Хотите стать разработчиком, но еще не определились с направлением и языком. ✅ Вы учили JavaScript самостоятельно. По книгам, доступным урокам. Хотите обучаться серьезно и системно, ищете курсы с практикой и помощью в трудоустройстве. ✅ У вас есть знания, полученные в другой школе. Но нет понимания, как искать работу, собрать портфолио и развиваться в профессии. Ведет вебинар Александр Смирнов, Frontend-разработчик в STM Labs, наставник студентов программы «Frontend-разработчик» в Хекслете.   Приходите! Вас ждет полезная информация, увлекательный квиз, а также подарки и бонусы от Хекслета.  Жмите по ссылке и записывайтесь☝☝☝

Создание элемента DOM-узел можно создать двумя методами: document.createElement(tag) - создаёт новый элемент с заданным тегом. document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом. Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения. #браузер #документ #изменение

Пример: показать сообщение Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert. Это был пример HTML. Далее мы будем создавать такой же div, используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле). #браузер #документ #изменение

Первый хакатон ПСБ по созданию банковских сервисов в Севастополе и Крыму   🔥40 часов живого кода, прокачка скиллов, треки по созданию крутых банковских сервисов, возможность войти в ИТ-команду ПСБ, новые знакомства, подарки и призовой фонд в размере 1 000 000 рублей! Участвуй в офлайн-хакатоне PSB TECH HACK 8-9 октября. Заявки принимаются до 6 октября! Подробнее:https://cnrlink.com/psbjs   🔎 На PSB TECH HACK ждут: frontend- и backend-разработчиков, бизнес-аналитиков, дизайнеров и продакт-менеджеров.    Уровень подготовки: начинающие и опытные специалисты, профессионалы и студенты.  Треки PSB TECH HACK: - Интеллектуальный сервис переводов по номеру телефона в мобильном Интернет-банке - Цифровой финансовый помощник по кредитным продуктам банка ПСБ   Участие бесплатное. Успейте зарегистрироваться до 6 октября по ссылке: https://cnrlink.com/psbjs Организатор: ПАО «Промсвязьбанк»

Изменение документа Добро пожаловать в новую главу на нашем канале "Изменение документа". Модификации DOM – это ключ к созданию «живых» страниц. Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие. P.S. Найти все посты по этой главе вы можете с помощью комбинации хештегов, которые указаны ниже. #браузер #документ #изменение

Итого по атрибутам и свойствам Атрибуты – это то, что написано в HTML. Свойства – это то, что находится в DOM-объектах. Методы для работы с атрибутами: elem.hasAttribute(name) – проверить на наличие. elem.getAttribute(name) – получить значение. elem.setAttribute(name, value) – установить значение. elem.removeAttribute(name) – удалить атрибут. elem.attributes – это коллекция всех атрибутов. В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например: - Нужен нестандартный атрибут. Но если он начинается с data-, тогда нужно использовать dataset. - Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение. #браузер #документ #атрибуты_свойств

Разработай веб-сервис с элементами геймификации для сотрудников Банка ВТБ. Прими участие в масштабном онлайн-хакатоне MORE.Tech 4.0 с призовым фондом 1 100 000 рублей! Что будет: ⚡️ С головой погрузишься в интересные задачи: разработаешь профильную ленту бизнес-новостей или веб-сервис с элементами геймификации для сотрудников Банка ВТБ; ⚡️ Познакомишься с опытными ИТ-специалистами ВТБ; ⚡️ Прокачаешься в разработке за 3 дня, как за месяц. 🏆 Помимо главного денежного приза в 1 100 000 рублей, тебя ждут нетворкинг, фирменный мерч и другие приятные подарки! 👉 Если нет своей команды — поможем ее собрать. Регистрируйся и вступай в чат единомышленников, присоединяйся к команде или создавай свою! Прием заявок до 3 октября, успевай! moretech.vtb.ru

"Зарезервированные" атрибуты (dataset) Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset. Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about. Атрибуты, состоящие из нескольких слов, к примеру data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации (CamelCase): dataset.orderState. См. переписанный пример «состояния заказа» на картинке выше. Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных. #браузер #документ #атрибуты_свойств

Атрибуты для стилизации элементов Например, здесь для состояния заказа используется атрибут order-state (см. картинку выше). Почему атрибут может быть предпочтительнее таких классов, как .order-state-new, .order-state-pending, order-state-canceled? Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто. #браузер #документ #атрибуты_свойств

Желаешь создать интерактивную веб-страницу или мобильное приложение? Образовательный канал посвященный JavaScript. Здесь публикуется готовый код, с использованием методов, конструкций и операторов языка, который можно использовать прямо сейчас. Сила JavaScript — в наших постах💪

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

📚 Добавлено 500 лучших уроков по программированию на 142GB: Javascript: https://t.me/+ggL4TH_vHLc1OTYy Python: https://t.me/+XdZaPTVgffc2ODQy Программирование: https://t.me/+qYEVVST_1Qo1Yjdi Figma: https://t.me/+FRwyl-lm4gJkYjYy

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

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