JavaScript заметки

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

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

Добрый день! — Подборка горящих вакансий от чат-бота Masterhub, сервиса поиска работы для frontend-разработчиков. JS/TypeScript React Dev в Яндекс.Плюc Middle, Senior до 350 000 руб. на руки Полный рабочий день 💬 Мы пишем на TypeScript, используем React, GraphQL (Apollo Client), немного Redux, Node.js для серверного кода. Постоянно ищем способы повысить скорость и надёжность приложений; ✅ Дорабатывать SPA-приложения, расширять функциональность; проектировать кастомизируемые виджеты. Подробнее... JS React+Next.js Dev в Яндекс.Музыку Middle, Senior до 350 000 руб. на руки Полный рабочий день 😄 Предстоит ускорять работу интерфейса и разрабатывать новые функции; применять новые технологии для мобильного сайта Музыки; развивать процессы сборки, тестирования и выкатки инфраструктурных решений. ⚔️ Результатами нашей работы ежедневно пользуются миллионы людей, поэтому особое внимание мы уделяем производительности и стабильности нашего сайта. Сейчас мы пересматриваем процессы CI и workflow. Если вас не пугает легаси и в душе вы новатор, присоединяйтесь к нашей команде! Подробнее... JS/TypeScript Redux Dev в Яндекс Go Middle, Senior до 350 000 руб. на руки Полный рабочий день 💎 Сильная команда, миллионы пользователей, сложные задачи, премии и расширенная программа ДМС, оплата 80% стоимости ДМС для супругов и детей. 🎯 Разрабатывать инфраструктуру и веб-интерфейсы; разрабатывать клиентскую логику на JS; визуализировать данные, заниматься дизайном и вёрсткой. Подробнее... Посмотреть ещё 124 вакансии

Декомпозиция процесса обработки событий Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий (см. пример на картинке). Теперь обработка событий разделена по методам, что упрощает поддержку кода. #браузер #документ #события

Объект-обработчик: handleEvent Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener. В этом случае, когда происходит событие, вызывается метод объекта handleEvent. #браузер #документ #события

3 канала, которые сделают из новичка опытного прогера и устроят на работу Первый делом подписывайся на IT подкасты: сборник лучших подкастов от преподавателей, топов рынка с разборами задач, советами по изучению и рекомендации для новичков. Затем начинай изучать книги в Книжном хранилище — самая большая база, более 2000 русскоязычных книг по PHP, Java, DB, Python, C, C++ ,C#, фронтенду и алгоритмам. И напоследок заходи в IT Jobs — ежедневные вакансии для новичков и мидлов, а также подборки советов по трудоустройству от ведущих IT-компаний.

Можно использовать класс для обработки событий Как видим, если addEventListener получает класс в качестве обработчика, он вызывает menu.handleEvent(event), когда происходит событие. Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener. Тогда объект menu будет получать события mousedown и mouseup, но не другие (не назначенные) типы событий. #браузер #документ #события

Объект события доступен и в HTML При назначении обработчика в HTML, тоже можно использовать объект event. Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: f unction(event) { alert(event.type) }. То есть, её первый аргумент называется "event", а тело взято из атрибута. #браузер #документ #события

Какое расстояние от земли до луны? 🌚 Странный вопрос, но еще страннее - то, что его иногда задают разработчикам на собеседованиях.  Меня зовут MAX(), я - кот-ревью. Если ты находишься в поиске работы, то у меня для тебя крутые новости.  Тут я собрал кучу разных интересных кейсов и историй по то: 👉 Как сделать так, чтобы тебя начали звать на собеседования? 👉 Откуда брать опыт для резюме, если его нет? 👉 Что делать, если валишься на собеседованиях и не можешь получить оффер? 👉 Насколько стало сложнее искать работу с марта 2022 года? Все это с примерами и пояснениями!  Если хочешь преисполниться в своих познаниях, то залетай ко мне — буду тебя ждать 😉

Основные свойства объекта event event.type — тип события, в данном случае "click". event.currentTarget — элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget. event.clientX / event.clientY — координаты курсора в момент клика относительно окна, для событий мыши. #браузер #документ #события

Почти все события всплывают. Ключевое слово в этой фразе – «почти». Например, событие focus не всплывает. В дальнейшем мы увидим и другие примеры. Однако, стоит понимать, что это скорее исключение, чем правило, всё-таки большинство событий всплывают. #браузер #документ #всплытие

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

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

Поэкспериментируйте сами Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM. Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке. Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements. Выглядит примерно так, как на картинке выше. Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее. Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы. #браузер #документ #dom

Другие типы узлов Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов. Например, узел-комментарий, который вы можете увидеть на картинке выше. Здесь мы видим узел нового типа – комментарий, обозначенный как #comment, между двумя текстовыми узлами. Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве. Все, что есть в HTML, даже комментарии, является частью DOM. Даже директива <!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед <html>. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует. Даже объект document, представляющий весь документ, формально является DOM-узлом. Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них: document, узлы-элементы, текстовые узлы, комментарии. #браузер #документ #dom

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

Автоисправление Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM. Например, в начале документа всегда должен быть тег <html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>. Например, если HTML-файл состоит из единственного слова "Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег <head>. При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее. В примере единственный тег <p> не закрыт, однако DOM будет нормальным, потому что браузер сам закроет тег и восстановит отсутствующие детали. #браузер #документ #dom

Терминалоджи – сборник всех IT терминов, которые задают на собеседовании в 90% компаний. 💡На нас подписаны опытные кодеры со всего СНГ, подпишись и ты: @it_terms

Пример DOM DOM – это представление HTML-документа в виде дерева тегов. На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов. Каждый узел этого дерева – это объект. Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: <html> – это корневой узел, <head> и <body> его дочерние узлы и т.д. Текст внутри элементов образует текстовые узлы, обозначенные как #text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне. Например, в теге <title> есть текстовый узел "О лосях". Обратите внимание на специальные символы в текстовых узлах: - перевод строки: ↵ (в JavaScript он обозначается как \n) - пробел: ␣ #браузер #документ #dom