JavaScript заметки

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

Хочешь легко прокачать свой скилл в HTML/CSS/JS? Знаешь теорию, но не хватает практики?   Подписывайся на Frontend Quiz Здесь ежедневно публикуются тесты разной сложности по HTML, CSS и JS Постоянная практика — путь к мастерству!

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

Свойства className и classList Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class. Поэтому для классов было введено схожее свойство "className": elem.className соответствует атрибуту "class". Если мы присваиваем что-то elem.className, то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс. Для этого есть другое свойство: elem.classList - это специальный объект с методами для добавления/удаления одного класса. #браузер #документ #свойства

Расширенная демонстрация работы с атрибутами Пожалуйста, обратите внимание: 1. getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы. 2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение "123". 3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML. 4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value. #браузер #документ #атрибуты_свойств

На собеседовании по JS потеют ладошки и пересыхает в горле? Это все потому, что ты плохо подготовился! Канал «Задачи по JS | Подготовка к собеседованию» исправит ситуацию. Ежедневно на канале постят крутые задачи по JS, учат тонкостям и рассказывают про подводные камни языка, которые могут встретиться на собеседовании. Будь готов к любым трудностям! Подписывайся: js_training

HTML-атрибуты В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них. Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный. #браузер #документ #атрибуты_свойств

Обработчик в атрибуте и свойстве Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации. Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя. P.S. Два примера кода на картинке работают одинаково. #браузер #документ #события

One Day Offer для фронтенд-разработчиков 5 ноября Получить оффер Яндекса можно за 1 день. Участвуйте в One Day Offer Frontend: решите тестовое, пройдите 2 секции 5 ноября и получите оффер в тот же день. От Яндекса в мероприятии участвуют команды, которые готовы предложить работу в гибком формате — полностью удаленно, в гибридном режиме или из любого офиса или коворкинга в 20 городах России и мира. Варианты работы обсуждаются с каждым кандидатом индивидуально. На мероприятии ждут инженеров с опытом разработки от 3-х лет на JavaScript и TypeScript, либо готовых к работе на этих языках программирования.

Использование свойства DOM-объекта Можно назначать обработчик, используя свойство DOM-элемента on<событие>. К примеру, elem.onclick. Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство. #браузер #документ #события

Использование атрибута HTML Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>. Например, чтобы назначить обработчик события click на элементе input, можно использовать атрибут onclick. #браузер #документ #события

Прокачай скиллы в кодинге абсолютно бесплатно Инициативная команда создала несколько бесплатных каналов для комфортного развития в айтишке. Помощник фронта — хватит искать решения в гугле, поглядывай разок в день на крутые мини-проекты с исходным кодом и закидывай в свой проект Look at that API — здесь собрана база АПИшек на все случаи жизни JavaScript инструменты — куча полезных инструментов для Frontend-разработчика Python заметки — регулярные полезные заметки по языку Best Websites — подборка полезных веб-сайтов на все случи жизни Подпишись, дабы буст в карьере стал космическим!

Обработчики событий Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло. Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя. Есть несколько способов назначить событию обработчик. Мы их рассмотрим, начиная с самого простого. #браузер #документ #события

Введение в браузерные события Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM). Вот список самых часто используемых DOM-событий, пока просто для ознакомления: События мыши: click – происходит, когда кликнули на элемент левой кнопкой мыши. contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши. mouseover / mouseout – когда мышь наводится на / покидает элемент. mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе. mousemove – при движении мыши. События на элементах управления: submit – пользователь отправил форму <form>. focus – пользователь фокусируется на элементе. Клавиатурные события: keydown и keyup – когда пользователь нажимает / отпускает клавишу. События документа: DOMContentLoaded – когда HTML загружен и обработан. CSS events: transitionend – когда CSS-анимация завершена. Существует множество других событий. О них в следующих постах. #браузер #документ #события

Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷 Или писать личную СМСку, когда каждое слово видит клавиатурный шпион. Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять. Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К». Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника? Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab

Применение для fixed позиционирования Чаще всего нам нужны координаты для позиционирования чего-либо. Чтобы показать что-то около нужного элемента, мы можем вызвать getBoundingClientRect, чтобы получить его координаты элемента, а затем использовать CSS-свойство position вместе с left/top (или right/bottom). Например, функция createMessageUnder(elem, html) выше показывает сообщение под элементом elem. #браузер #документ #координаты

elementFromPoint(x, y) Вызов document.elementFromPoint(x, y) возвращает самый глубоко вложенный элемент в окне, находящийся по координатам (x, y). Например, код выше выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера. #браузер #документ #координаты

Фронтенд хомяк - канал с фичами и готовым кодом на css и javascript. Можно вставить в проект или повторить и прокачать свои скилы 💪 Подписывайся, выкладываем свежие исходники каждый день!

Зачем вообще нужны зависимые свойства? Для чего существуют top/left, если есть x/y? С математической точки зрения, прямоугольник однозначно задаётся начальной точкой (x,y) и вектором направления (width,height). Так что дополнительные зависимые свойства существуют лишь для удобства. Что же касается top/left, то они на самом деле не всегда равны x/y. Технически, значения width/height могут быть отрицательными. Это позволяет задать «направленный» прямоугольник, например, для выделения мышью с отмеченным началом и концом. То есть, отрицательные значения width/height означают, что прямоугольник «растет» влево-вверх из правого угла. #браузер #документ #координаты

Element.getBoundingClientRect() Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим). Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а. #браузер #документ #координаты