JavaScript заметки

outerHTML: HTML элемента целиком Свойство outerHTML содержит HTML элемента целиком. Это как innerHTML плюс сам элемент. Будьте осторожны: в отличие от innerHTML, запись в outerHTML не изменяет элемент. Вместо этого элемент заменяется целиком во внешнем контексте. Да, звучит странно, и это действительно необычно, поэтому здесь мы и отмечаем это особо. #браузер #документ #свойства_узлов

🔥 Хакатон ВТБ 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

Будьте внимательны: «innerHTML+=» осуществляет перезапись Мы можем добавить HTML к элементу, используя elem.innerHTML+="ещё html". На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись. Технически эти две строки (см. картинку выше) делают одно и то же. Другими словами, innerHTML+= делает следующее: 1) Старое содержимое удаляется. 2) На его место становится новое значение innerHTML (с добавленной строкой). Так как содержимое «обнуляется» и переписывается заново, все изображения и другие ресурсы будут перезагружены. В примере chatDiv выше строка chatDiv.innerHTML+="Как дела?" заново создаёт содержимое HTML и перезагружает smile.gif (надеемся, картинка закеширована). Если в chatDiv много текста и изображений, то эта перезагрузка будет очень заметна. #браузер #документ #свойства_узлов

innerHTML: содержимое элемента Свойство innerHTML позволяет получить HTML-содержимое элемента в виде строки. Мы также можем изменять его. Это один из самых мощных способов менять содержимое на странице. Пример выше показывает содержимое document.body, а затем полностью заменяет его. #браузер #документ #свойства_узлов

Хотите увеличить уровень дохода и стать востребованным специалистом в IT? Тогда у нас для вас новости! 22 сентября в 13:00 вы не только узнаете, чем полезен React и прокачаетесь в программировании, но и увидите, как написать приложение на JavaScript.  Запишитесь на лайв и узнаете: ✅ Стоит ли учить React и востребован ли он на рынке труда. ✅ как выглядят типовые проекты на React, доступные даже для новичков. А мы с вами напишем приложение для прогноза погоды на JavaScript с использованием библиотеки React. Спойлер: программировать не просто, а очень просто! Не верите? Докажем на бесплатном лайве!! 

Имена тегов (кроме XHTML) всегда пишутся в верхнем регистре В браузере существуют два режима обработки документа: HTML и XML. HTML-режим обычно используется для веб-страниц. XML-режим включается, если браузер получает XML-документ с заголовком: Content-Type: application/xml+xhtml. В HTML-режиме значения tagName/nodeName всегда записаны в верхнем регистре. Будет выведено BODY вне зависимости от того, как записан тег в HTML <body> или <BoDy>. В XML-режиме регистр сохраняется «как есть». В настоящее время XML-режим применяется редко. #браузер #документ #свойства_узлов

Тег: nodeName и tagName Получив DOM-узел, мы можем узнать имя его тега из свойств nodeName и tagName. Есть ли какая-то разница между tagName и nodeName? Да, она отражена в названиях свойств, но не очевидна. - Свойство tagName есть только у элементов Element. - Свойство nodeName определено для любых узлов Node: - - для элементов оно равно tagName. - - для остальных типов узлов (текст, комментарий и т.д.) оно содержит строку с типом узла. Другими словами, свойство tagName есть только у узлов-элементов (поскольку они происходят от класса Element), а nodeName может что-то сказать о других типах узлов. Например, сравним tagName и nodeName на примере объекта document и узла-комментария (см. картинку выше). #браузер #документ #свойства_узлов

​​🔥 Если ты фронт, такое лучше не пропускать. На фронте - канал, на котором команда фронтендеров, собирает для Вас обучающие материалы. На канале ты найдешь 💎Макеты для верстки 💎Тесты с объяснениями 💎Обучающие туториалы и статьи Подписывайся и начинай прокачать свои скилы вместе с 👉 @on_the_frontend

Свойство «nodeType» Свойство nodeType предоставляет ещё один, «старомодный» способ узнать «тип» DOM-узла. Его значением является цифра: - elem.nodeType == 1 для узлов-элементов, - elem.nodeType == 3 для текстовых узлов, - elem.nodeType == 9 для объектов документа, - В спецификации можно посмотреть остальные значения. В современных скриптах, чтобы узнать тип узла, мы можем использовать метод instanceof и другие способы проверить класс, но иногда nodeType проще использовать. Мы не можем изменить значение nodeType, только прочитать его. P.S. Пример с nodeType на картинке выше. #браузер #документ #свойства_узлов

Хабр теперь в Telegram! Подписывайтесь: @habr_articles

Наследование классов DOM-узлов Проверить наследование можно также при помощи instanceof. Как видно, DOM-узлы – это обычные JavaScript объекты. Для наследования они используют классы, основанные на прототипах. В этом легко убедиться, если вывести в консоли браузера любой элемент через console.dir(elem). Или даже напрямую обратиться к методам, которые хранятся в HTMLElement.prototype, Element.prototype и т.д. #браузер #документ #свойства_узлов

Стоит ли учить Java в 2022 году? Так ли хорош Java в качестве первого языка для изучения программирования? Какие карьерные перспективы ждут Java-разработчиков? 22 сентября в 19.00 по мск образовательная платформа Хекслет приглашает всех, кто делает первые шаги в Java или только задумывается о профессии, на бесплатный карьерный мастер-класс! Поговорим о сфере применения языка и задачах, которые предстоит решать. Порассуждаем, где учиться и почему не всем нужна «вышка» в IT. Расскажем о специфике программы по Java-разработке в Хекслете. Затронем тему поиска первой работы. Дадим лайфхаки от студентов — как собрать портфолио, не имея опыта коммерческой разработки.   ✅ Q&A сессия Ответим на ваши вопросы. Вышлем «Карту компетенций начинающего разработчика» всем участникам мероприятия, подарим бонусы для воодушевляющего старта! Жмите по ссылке и записывайтесь!

Как узнать имя класса DOM-узла? Есть 2 способа сделать это: - вспомним, что обычно у объекта есть свойство constructor. Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя - мы можем просто привести его к строке Например, для тега <body> JavaScript-класс HTMLBodyElement. #браузер #документ #свойства_узлов

«По домам» frontend-разработчиков AvitoTech Ребята из Авито придумали классный проект, который даёт возможность познакомиться с командой, узнать о работе в компании изнутри и не только. В видосах фронтендеры расскажут: — Какие технологии и библиотеки, по их мнению, лучшие — Что стоит изучить в 2022 году — Как писать стили, какой инструмент выбрать И ещё много полезного. Поэтому го на Ютуб, смотреть первое интервью.

HTMLElement – является базовым классом для всех остальных HTML-элементов. От него наследуют конкретные элементы: - HTMLInputElement – класс для тега <input>, - HTMLBodyElement – класс для тега <body>, - HTMLAnchorElement – класс для тега <a>, …и т.д, каждому тегу соответствует свой класс, который предоставляет определённые свойства и методы. #браузер #документ #свойства_узлов

20 сентября в Айтилогии стартует 7-дневный бесплатный интенсив по frontend-разработке, на котором ты с нуля без знаний создашь фронтенд-проект на Angular 🔥 На интенсиве ты: – Сверстаешь лендинг на HTML + CSS – Реализуешь функционал на JavaScript – Используешь фронтенд-фреймворк Angular – Подключишь Backend и загрузишь сайт на хостинг 🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы! А в конце автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$ Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻 Frontend Start

Element – это базовый класс для DOM-элементов. Он обеспечивает навигацию на уровне элементов: nextElementSibling, children и методы поиска: getElementsByTagName, querySelector. Браузер поддерживает не только HTML, но также XML и SVG. Класс Element служит базой для следующих классов: SVGElement, XMLElement и HTMLElement. #браузер #документ #свойства_узлов

Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode, nextSibling, childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуют от него: Text – для текстовых узлов, Element – для узлов-элементов и более экзотический Comment – для узлов-комментариев. #браузер #документ #свойства_узлов

Прекрати мечтать и найди уже работу в IT! Ну или поменяй, подняв ЗП 😁 2 канала, с топовыми материалами, которые помогут тебе подготовиться и найти работу мечты! IT questions – поможет тебе подготовиться к собеседованию: - ответы на популярные вопросы с интервью; - реальные задачи, с примерами решений; - полезные материалы и отобранные вакансии (Frontend, Backend) Learn English, code better 🇬🇧 — качай свой технический английский без больших усилий, уделяя 5 минут в день! Через 30 дней будешь спокойно читать документации на английском и искать работу за рубежом!

EventTarget – это корневой «абстрактный» класс. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже. P.S. На картинке описание интерфейса на TypeScipt. #браузер #документ #свойства_узлов