JavaScript заметки

😮 Добавлена новая база слитых курсов на 800ГБ: Программирование: https://t.me/+iLdBNekSTz9mNTMy Frontend и Web: https://t.me/+xnzqjNv4bNBlZTli Python: https://t.me/+gy2VjW-eWPgyOGJi Графика и дизайн: https://t.me/+VJNou3I_uQFlMDg6

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

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

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

Найти работу в айти можно 2 методами: Первый. Бесконечно скроллить HeadHunter и пытаться что-то выклевать на LinkedIN. Офигеть от условий и закрыть. Второй. Подписаться на JavaScript Job. Это база адекватных предложений, где даже для новичков много мест с хорошей з/п. Тут найдете работу как в Яндексе (именно сюда крупняки присылают вакансии напрямую), так и в молодых стартапах! В общем, не теряйте времени и находите работу в 2 клика: @JScript_jobs

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

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

Figma теперь в телеграм! Figma — самый популярный графический онлайн редактор в мире! Он очень прост и именно с него нужно начинать изучение веб-дизайна. А сейчас в телеграмме появился официальный русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!

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

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

ant

Любишь решать задачи по JS? А представь, что все это в формате MMORPG бота, где ты можешь прокачивать своего пресонажа, батлиться с друзьями, проходить собесы в разные IT компании и главное - прокачивать себя как разработчика! В Dev’s Battle ты найдешь: 👉 350+ задачек по JS 👉 300+ активных игроков 👉 7 компаний для собеседований. От Рабов Галерных до Facebook 👉 Прокачку и развитие внутриигрового персонажа 👉 Фан и общение с другими разработчиками Все это бесплатно, с небольшим кринжом и крутым комьюнити! 😎 Залетай в Dev’s Battle, если, конечно, сможешь…

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

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

⚡️Яндекс опубликовал список из 3 телеграм-каналов, по которым в компании обучают новых программистов. Сохраняйте, пригодится: IT подкасты – идеальный канал для тех, у кого нет времени 24/7 учить прогу. Разборы задач и советы от топовых кодеров будут с тобой везде. Книжное хранилище – бесплатная база более 3000 платных книг. Найдётся чтиво на любую тему: от PHP и Python до C++ и алгоритмов. IT Jobs – самый простой способ найти работу в айти. Яндекс, MailRu и даже VK набирают кандидатов исключительно отсюда.

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

Запретить прокрутку Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ. Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = "hidden". Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body. Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место. Это выглядит немного странно, но это можно обойти, если сравнить clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней. #браузер #документ #размеры

Element.scrollIntoView() Метод Element.scrollIntoView() интерфейса Element прокручивает контейнер родителя элемента так, чтобы элемент, на котором был вызван scrollIntoView(), стал виден пользователю. #браузер #документ #размеры

Все знают, что без элементарных знаний терминологии в айти делать нечего. На днях наши знакомые терминологи создали свой канал, где дают чёткие и понятные определения понятиям со всей IT сферы. Советуем подписаться, ведь таким интересным способом можно черпать знания, не заходя в гугл :)

Window.scrollBy() Прокручивает документ на указанные величины. Параметры: X - смещение в пикселях по горизонтали. Y - смещение в пикселях по вертикали. #браузер #документ #размеры