JavaScript заметки

IT Инженерия - канал в котором обо всём, что используется в IT индустрии.  + Linux для чайника - канал, где можно начать изучать OS Linux прямо сейчас.

Свойство «hidden» Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет. Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке). Технически, hidden работает так же, как style="display:none". Но его применение проще. #браузер #документ #свойства_узлов

@gd_code - Телеграм-канал, в котором ты узнаешь правила хорошего кода для проектов на JavaScript, TypeScript, React и Vue.  Подпишись и пиши код грамотно t.me/gd_code

Запись в textContent (безопасный способ) Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её. - С innerHTML вставка происходит «как HTML», со всеми HTML-тегами. - С textContent вставка получается «как текст», все символы трактуются буквально. Сравним два тега div (см. пример выше на картинке). - В первый <div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом. - Во второй <div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>. В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через textContent – один из способов от этого защититься. #браузер #документ #свойства_узлов

Здорово! Меня зовут Сергей и я Senior JavaScript-разработчик из Хельсинки. На своём авторском канале «Будни разработчика» я выкладываю самые интересные и оригинальные находки, что помогают мне в моей работе. Статьи, заметки, фишки, опросы с подвохом и разбор багов браузеров. Залетай, скучно не будет!

textContent: просто текст Свойство textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше). Как мы видим, возвращается только текст, как если бы все <теги> были вырезаны, но текст в них остался. На практике редко появляется необходимость читать текст таким образом. Намного полезнее возможность записывать текст в textContent, т.к. позволяет писать текст «безопасным способом». #браузер #документ #свойства_узлов

Делать сайты не так сложно как кажется! На нашем втором канале Полезная вЁрстка можно найти: - готовый код, копируй и вставляй в свой проект - полезные сервисы, конец нудным поискам в Google - нужные расширения, улучшат работу твоего редактора и браузера - а также: инструменты, библиотеки, игры, книги и многое другое. Подписывайтесь на канал и получайте новые идеи!

nodeValue/data: содержимое текстового узла Свойство innerHTML есть только у узлов-элементов. У других типов узлов, в частности, у текстовых, есть свои аналоги: свойства nodeValue и data. Эти свойства очень похожи при использовании, есть лишь небольшие различия в спецификации. Мы будем использовать data, потому что оно короче. Прочитаем содержимое текстового узла и комментария (см. картинку выше). Мы можем представить, для чего нам может понадобиться читать или изменять текстовый узел, но комментарии? Иногда их используют для вставки информации и инструкций шаблонизатора в HTML. JavaScript может прочитать это из свойства data и обработать инструкции. #браузер #документ #свойства_узлов

Совет для всех айтишников – учите фронтенд и 3D-графику. Сайты с 3D-графикой продают на 40% лучше обычных, поэтому хорошим спецам компании платят в 3-4 раза больше рынка. Лучший способ освоить главные фишки – подписаться на @travellerLogs. В коротких постах автор делится фишками по оптимизации, основам трехмерной графики и подборками полезных сервисов. Зачем полгода ходить на курсы, если всё можно выучить в 1 канале по простым инструкциям?

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

Хочешь постоянно практиковаться в решении задач и получать подробное объяснение? Тогда подписывайся на JavaScript | Тесты для проверки знаний! Здесь ты найдешь огромное количество задач по JS с подробными объяснениями! Переходи и развивайся ежедневно! 👇

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

Стать программистом не так сложно, как кажется. Вот несколько советов: 1. Изучайте основы программирования. Языки и фреймворки постоянно меняются. Основы будут актуальны всегда. 2. Постоянно практикуйтесь. Наш мозг так устроен, что если мы не используем что то, то он это забывает. 3. Смотрите как пишут код другие. Изучайте проекты с открытым кодом, которые пишут опытные программисты. Самые интересные проекты с открытым кодом собраны в одном канале — подписывайся!

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

Реально ли стать крепким джуном во фронтенд-разработке за 10 месяцев? У Хекслета получилось сделать такой курс. На нём дают только самое необходимое, а после успешного завершения обучения можно попасть на оплачиваемую стажировку. И цифры говорят сами за себя: 65% выпускников курса "Frontend-разработчик"получают оффер на первых пяти собеседованиях, а 27% устраиваются вообще без поиска работы — работодатели находят их сами. Скорее узнавайте подробнее и присоединяйтесь к огромному сообществу веб-разработчиков прямо сейчас.

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

Android Developer Кто ищет: Ubiquiti — разработчик ПО в B2B и В2С Основные требования: - 2+ года опыта разработки под Android - Владение RxJava, Kotlin, Android Studio, REST interfaces - Опыт работы с геозонами и картами Google - Уровень английского от Intermediate Где: Рига, Латвия Зарплата: от 2 500 до 6 000 EUR ➡️ Откликнуться

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

🔥Промо-ролик нашего канала! Друзья, всем привет! Скоро нас уже будет целых две тысячи человек — солидная цифра, на которой мы не планируем останавливаться. Сегодня хотим поделиться с вами роликом для привлечения внимания к нашему комьюнити, и, надеемся, вы поделитесь им со своими знакомыми (если, конечно, оно вам понравится 🌝). Подписывайтесь на наш канал и репостите это сообщение! Напоминаем, команда нашего канала помогает российскому бизнесу и ИТ-специалистам адаптироваться к происходящему. Если у вас есть вопрос или вы хотите поделиться с нами полезной информацией — пишите нашему боту @russianhelperbot, а мы опубликуем ваш материал с указанием авторства или разберемся в вашем вопросе и подготовим пост с ответом. p.s. Вот тут удобная ссылка на youtube.

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